naman_panwar_gnpl/Gyannetra_website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Complete website optimization: Color scheme standardization and hero page enhancement

Browse Source 
- STANDARDIZED COLOR SCHEMES: Unified all service pages to use consistent purple theme (#6d28d9)
  - Removed theme-specific body classes from automation-flows.html and agentic-ai.html
  - Removed inline CSS color overrides from machine-learning.html, generative-ai.html, and data-analysis.html
  - Updated 15+ instances of hardcoded border colors to use rgba(var(--primary-color-rgb), 0.3)
  - Updated 5+ hover effects to use rgba(var(--primary-color-rgb), 0.4) for consistent glow colors
  - All service pages now maintain visual consistency with the main website

- ENHANCED HERO PAGE: Improved data node scattering for better organic distribution
  - Repositioned core service nodes (ML, AI, Analytics, Automation) for natural scatter pattern
  - Enhanced industry nodes positioning with organic right-side distribution
  - Improved strategic nodes placement across right quadrant for better visual balance
  - Added varied animation delays and floating patterns for different node groups
  - Implemented micro-positioning adjustments for more natural appearance
  - Created size variations and rotation effects for enhanced organic feel

- NEW FEATURES ADDED:
  - Enhanced CSS animations with varied floating patterns
  - Improved node interaction effects with staggered hover animations
  - Better responsive design for mobile devices
  - New documentation files for color standardization completion

- TECHNICAL IMPROVEMENTS:
  - Updated hero-animation.css with enhanced organic scatter positioning
  - Maintained all existing functionality while improving visual aesthetics
  - Ensured cross-browser compatibility and mobile responsiveness
This commit is contained in:
ectasy663
2025-05-26 17:40:17 +05:30
parent 226b03b5d7
commit 29165abbaa
69 changed files with 8685 additions and 830 deletions
Download Patch File Download Diff File Expand all files Collapse all files

331
index.html
View File

@@ -3,8 +3,9 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Gyannetra — AI Services & Solutions</title>
<link rel="stylesheet" href="css/style.css" />
<title>Gyannetra — AI Services & Solutions</title> <link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/hero-animation.css" />
<link rel="stylesheet" href="css/animations.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
</head>
@@ -16,11 +17,11 @@
<div class="small-light-bottom"></div>
<div class="overlay"></div>
<div class="noise"></div>
</div>
<!-- NAVBAR -->
<header class="site-header">
</div> <!-- NAVBAR --> <header class="site-header">
<nav class="navbar container">
<a href="index.html" class="logo">GYANNETRA</a>
<a href="index.html" class="logo">
<img src="assets/Company Icons/GN Name logo.svg" alt="Gyannetra Logo" class="logo-img">
</a>
<ul class="nav-links">
<li class="dropdown"><a href="#" class="nav-link">Services ▾</a>
<ul class="dropdown-menu services-dropdown">
@@ -54,14 +55,271 @@
<li><a href="contact.html" class="nav-link">Contact Us</a></li>
</ul>
</nav>
</header> <!-- HERO -->
<section id="hero">
<div class="hero-overlay"></div> <div class="hero-content container">
<h1>AI SERVICES<br />AND SOLUTIONS</h1>
<p>Inventing the future, powered by intelligence: We unlock the infinite potential of artificial intelligence to create groundbreaking solutions that anticipate tomorrow's needs.</p>
<a href="contact.html" class="btn-primary">Get Started</a>
</header> <!-- HERO --> <section id="hero">
<div class="hero-overlay"></div>
<!-- Full-width Neural Network Background -->
<div class="neural-network-container">
<!-- AI Neural Network Background -->
<div class="neural-mesh">
<canvas class="mesh-canvas" width="1200" height="800"></canvas>
</div>
<!-- Floating Data Nodes -->
<div class="data-constellation">
<!-- Core Services (Inner Ring) -->
<div class="data-node node-ml" data-tech="Machine Learning">
<div class="node-core"></div>
<div class="node-icon">
<img src="assets/mlng.png" alt="ML">
</div>
<div class="node-label">ML</div>
</div>
<div class="data-node node-ai" data-tech="Generative AI">
<div class="node-core"></div>
<div class="node-icon">
<img src="assets/gen ai.png" alt="Gen AI">
</div>
<div class="node-label">Gen AI</div>
</div>
<div class="data-node node-analytics" data-tech="Data Analytics">
<div class="node-core"></div>
<div class="node-icon">
<img src="assets/data analytics.png" alt="Analytics">
</div>
<div class="node-label">Analytics</div>
</div>
<div class="data-node node-automation" data-tech="Automation">
<div class="node-core"></div>
<div class="node-icon">
<img src="assets/automation flows.png" alt="Automation">
</div>
<div class="node-label">Automation</div>
</div>
<!-- Industry Applications (Outer Ring) -->
<div class="data-node node-finance" data-tech="Finance">
<div class="node-core industry-core"></div>
<div class="node-icon">
<img src="assets/Finance Ind.png" alt="Finance">
</div>
<div class="node-label">Finance</div>
</div>
<div class="data-node node-healthcare" data-tech="Healthcare">
<div class="node-core industry-core"></div>
<div class="node-icon">
<img src="assets/healthcare ind.png" alt="Healthcare">
</div>
<div class="node-label">Healthcare</div>
</div>
<div class="data-node node-retail" data-tech="Retail">
<div class="node-core industry-core"></div>
<div class="node-icon">
<img src="assets/retail ind.png" alt="Retail">
</div>
<div class="node-label">Retail</div>
</div>
<div class="data-node node-manufacturing" data-tech="Manufacturing">
<div class="node-core industry-core"></div>
<div class="node-icon">
<img src="assets/manufacturing ind.png" alt="Manufacturing">
</div>
<div class="node-label">Manufacturing</div>
</div>
<!-- Additional Strategic Nodes -->
<div class="data-node node-agentic" data-tech="Agentic AI">
<div class="node-core specialty-core"></div>
<div class="node-icon">
<img src="assets/ai agent.png" alt="Agentic AI">
</div>
<div class="node-label">Agentic AI</div>
</div>
<div class="data-node node-marketing" data-tech="Marketing">
<div class="node-core industry-core"></div>
<div class="node-icon">
<img src="assets/marketing ind.png" alt="Marketing">
</div>
<div class="node-label">Marketing</div>
</div>
<div class="data-node node-media" data-tech="Media & Entertainment">
<div class="node-core industry-core"></div>
<div class="node-icon">
<img src="assets/media and entertainment ind.png" alt="Media">
</div>
<div class="node-label">Media</div>
</div>
<!-- New Strategic Nodes - positioned to avoid text content -->
<div class="data-node node-travel" data-tech="Travel">
<div class="node-core industry-core"></div>
<div class="node-icon">
<img src="assets/travel ind.png" alt="Travel">
</div>
<div class="node-label">Travel</div>
</div>
<div class="data-node node-education" data-tech="Education">
<div class="node-core specialty-core"></div>
<div class="node-icon">
<img src="assets/education-cap-icon.svg" alt="Education">
</div>
<div class="node-label">Education</div>
</div>
<div class="data-node node-technology" data-tech="Technology">
<div class="node-core specialty-core"></div>
<div class="node-icon">
<img src="assets/technology.png" alt="Technology">
</div>
<div class="node-label">Technology</div>
</div>
</div>
<!-- Morphing Geometric Patterns -->
<div class="geometric-morphs">
<div class="morph-shape morph-1"></div>
<div class="morph-shape morph-2"></div>
<div class="morph-shape morph-3"></div>
<div class="morph-shape morph-4"></div>
<div class="morph-shape morph-5"></div>
<!-- Additional Morphing Shapes -->
<div class="morph-shape morph-6"></div>
<div class="morph-shape morph-7"></div>
<div class="morph-shape morph-8"></div>
<!-- New Morphing Shapes for better distribution -->
<div class="morph-shape morph-9"></div>
<div class="morph-shape morph-10"></div>
<div class="morph-shape morph-11"></div>
</div>
<!-- Data Stream Effects -->
<div class="data-streams">
<div class="stream stream-1"></div>
<div class="stream stream-2"></div>
<div class="stream stream-3"></div>
<div class="stream stream-4"></div>
<!-- Additional Data Streams -->
<div class="stream stream-5"></div>
<div class="stream stream-6"></div>
<!-- Horizontal Streams for Better Coverage -->
<div class="stream-horizontal stream-h1"></div>
<div class="stream-horizontal stream-h2"></div>
<!-- New Diagonal Streams -->
<div class="stream-diagonal stream-d1"></div>
<div class="stream-diagonal stream-d2"></div>
<div class="stream-diagonal stream-d3"></div>
</div>
</div>
</section> <!-- TECHNOLOGIES -->
<div class="hero-container">
<div class="hero-content">
<h1>AI SERVICES<br />AND SOLUTIONS</h1>
<p>Inventing the future, powered by intelligence: We unlock the infinite potential of artificial intelligence to create groundbreaking solutions that anticipate tomorrow's needs.</p>
<a href="contact.html" class="btn-primary">Get Started</a>
</div> <div class="hero-animation">
<!-- Floating Data Nodes -->
<div class="data-constellation">
<!-- Core Services (Inner Ring) -->
<div class="data-node node-ml" data-tech="Machine Learning">
<div class="node-core"></div>
<div class="node-icon">
<img src="assets/mlng.png" alt="ML">
</div>
<div class="node-label">ML</div>
</div>
<div class="data-node node-ai" data-tech="Generative AI">
<div class="node-core"></div>
<div class="node-icon">
<img src="assets/gen ai.png" alt="Gen AI">
</div>
<div class="node-label">Gen AI</div>
</div>
<div class="data-node node-analytics" data-tech="Data Analytics">
<div class="node-core"></div>
<div class="node-icon">
<img src="assets/data analytics.png" alt="Analytics">
</div>
<div class="node-label">Analytics</div>
</div>
<div class="data-node node-automation" data-tech="Automation">
<div class="node-core"></div>
<div class="node-icon">
<img src="assets/automation flows.png" alt="Automation">
</div>
<div class="node-label">Automation</div>
</div> <!-- Custom Secondary Animation Nodes -->
<div class="data-node node-education-right" data-tech="Education">
<div class="node-core specialty-core"></div>
<div class="node-icon">
<img src="assets/education-cap-icon.svg" alt="Education">
</div>
<div class="node-label">Education</div>
</div>
<div class="data-node node-technology-right" data-tech="Technology">
<div class="node-core specialty-core"></div>
<div class="node-icon">
<img src="assets/technology.png" alt="Technology">
</div>
<div class="node-label">Technology</div>
</div>
<div class="data-node node-travel-right" data-tech="Travel">
<div class="node-core industry-core"></div>
<div class="node-icon">
<img src="assets/travel ind.png" alt="Travel">
</div>
<div class="node-label">Travel</div>
</div>
</div>
<!-- Morphing Geometric Patterns -->
<div class="geometric-morphs">
<div class="morph-shape morph-1"></div>
<div class="morph-shape morph-2"></div>
<div class="morph-shape morph-3"></div>
<div class="morph-shape morph-4"></div>
<div class="morph-shape morph-5"></div>
<!-- Additional Morphing Shapes -->
<div class="morph-shape morph-6"></div>
<div class="morph-shape morph-7"></div>
<div class="morph-shape morph-8"></div>
</div>
<!-- Data Stream Effects -->
<div class="data-streams">
<div class="stream stream-1"></div>
<div class="stream stream-2"></div>
<div class="stream stream-3"></div>
<div class="stream stream-4"></div>
<!-- Additional Data Streams -->
<div class="stream stream-5"></div>
<div class="stream stream-6"></div>
<!-- Horizontal Streams for Better Coverage -->
<div class="stream-horizontal stream-h1"></div>
<div class="stream-horizontal stream-h2"></div>
</div>
</div>
</div>
</section><!-- TECHNOLOGIES -->
<section id="technologies">
<div class="container">
<h2 class="section-heading">TECHNOLOGIES WE USE</h2>
@@ -100,12 +358,6 @@
<div class="tech-icon-container">
<div class="tech-icon vectordb"></div>
</div>
<p>Vector DB</p>
</div>
<div class="tech-marquee-item">
<div class="tech-icon-container">
<div class="tech-icon openai"></div>
</div>
<p>OpenAI</p>
</div>
<div class="tech-marquee-item">
@@ -140,9 +392,9 @@
</div>
<div class="tech-marquee-item">
<div class="tech-icon-container">
<div class="tech-icon faiss"></div>
<div class="tech-icon docker"></div>
</div>
<p>FAISS</p>
<p>Docker</p>
</div>
<!-- Duplicated set for seamless looping -->
@@ -174,12 +426,6 @@
<div class="tech-icon-container">
<div class="tech-icon vectordb"></div>
</div>
<p>Vector DB</p>
</div>
<div class="tech-marquee-item">
<div class="tech-icon-container">
<div class="tech-icon openai"></div>
</div>
<p>OpenAI</p>
</div>
<div class="tech-marquee-item">
@@ -214,9 +460,9 @@
</div>
<div class="tech-marquee-item">
<div class="tech-icon-container">
<div class="tech-icon faiss"></div>
<div class="tech-icon docker"></div>
</div>
<p>FAISS</p>
<p>Docker</p>
</div>
</div>
</div>
@@ -291,12 +537,7 @@
</div>
<p>RAG</p>
</div>
<div class="tech-marquee-item">
<div class="tech-icon-container">
<div class="tech-icon transformers"></div>
</div>
<p>Transformers</p>
</div>
<div class="tech-marquee-item">
<div class="tech-icon-container">
<div class="tech-icon spacy"></div>
@@ -365,12 +606,7 @@
</div>
<p>RAG</p>
</div>
<div class="tech-marquee-item">
<div class="tech-icon-container">
<div class="tech-icon transformers"></div>
</div>
<p>Transformers</p>
</div>
<div class="tech-marquee-item">
<div class="tech-icon-container">
<div class="tech-icon spacy"></div>
@@ -404,13 +640,13 @@
</div>
</div>
</section>
<!-- FOOTER -->
<footer class="site-footer">
<div class="container">
<div class="footer-content">
<div class="container"> <div class="footer-content">
<div class="footer-col footer-col-logo">
<a href="index.html" class="logo">GYANNETRA</a>
<a href="index.html" class="logo">
<img src="assets/Company Icons/GN logo with banner.svg" alt="Gyannetra Logo" class="footer-logo-img">
</a>
<p>Empowering businesses with intelligent AI solutions to drive innovation, efficiency, and growth in a data-centric world.</p>
<div class="social-links">
<a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
@@ -456,5 +692,10 @@
</footer> <script src="js/menu-dropdown.js" defer></script>
<script src="js/main.js" defer></script>
<script src="js/tech-marquee.js" defer></script>
<script src="js/hero-animation-new.js" defer></script>
<script src="js/data-node-interactions.js" defer></script>
<script src="js/page-specific.js" defer></script>
<script src="js/dynamic-content.js" defer></script>
<script src="js/form-handler.js" defer></script>
</body>
</html>