Files
Gyannetra_website/index.html
ectasy663 94f653c3a1 Fix: Implement comprehensive FOUC prevention for data nodes
- Add aggressive multi-layer FOUC prevention in index.html head section
- Use inline CSS and JavaScript style injection for immediate hiding
- Position nodes far off-screen (-3000px) to prevent any flash
- Hide both .data-node and .data-constellation containers
- Update CSS to use CSS custom properties for better control
- Add responsive breakpoint coverage for all screen sizes
- Implement smart timing control with CSS loading detection
- Handle duplicate data nodes in neural-network-container and hero-animation
- Clean style removal after proper positioning is applied

Resolves the 1-second flash where icons appeared scattered during page load
2025-05-26 18:25:59 +05:30

804 lines
36 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Gyannetra — AI Services & Solutions</title>
<!-- Critical FOUC Prevention - Must be first before any CSS -->
<style>
/* Immediate FOUC prevention - applies before any other CSS loads */
.data-node {
opacity: 0 !important;
visibility: hidden !important;
transform: translateX(-3000px) translateY(-3000px) !important;
position: absolute !important;
}
/* Prevent any flash during CSS loading */
.data-constellation {
opacity: 0 !important;
visibility: hidden !important;
}
</style>
<script>
// Immediate FOUC prevention for data nodes - more aggressive approach
document.documentElement.style.setProperty('--data-node-visibility', 'hidden');
document.documentElement.style.setProperty('--data-node-opacity', '0');
document.documentElement.style.setProperty('--data-node-position', '-3000px');
// Hide all potential data node containers immediately
const style = document.createElement('style');
style.textContent = `
.data-node, .data-constellation {
opacity: 0 !important;
visibility: hidden !important;
transform: translateX(-5000px) translateY(-5000px) !important;
}
`;
document.head.appendChild(style);
window.foucPreventionStyle = style;
</script>
<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">
<!-- Enable data nodes after all CSS is loaded -->
<script>
// Wait for all stylesheets to load before enabling nodes
function enableDataNodes() {
// Check if all CSS files are loaded
const cssLoaded = Array.from(document.styleSheets).every(sheet => {
try {
return sheet.cssRules || sheet.rules;
} catch (e) {
return false;
}
});
if (cssLoaded && document.readyState !== 'loading') {
// Remove the aggressive FOUC prevention style
if (window.foucPreventionStyle) {
window.foucPreventionStyle.remove();
}
// Enable nodes with proper CSS variables
document.documentElement.style.setProperty('--data-node-visibility', 'visible');
document.documentElement.style.setProperty('--data-node-opacity', '1');
document.documentElement.style.setProperty('--data-node-position', 'unset');
// Force enable all data nodes and constellations
const dataNodes = document.querySelectorAll('.data-node, .data-constellation');
dataNodes.forEach(node => {
node.style.removeProperty('opacity');
node.style.removeProperty('visibility');
node.style.removeProperty('transform');
});
} else {
// Retry after a short delay
setTimeout(enableDataNodes, 50);
}
}
// Start checking when DOM is interactive
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', enableDataNodes);
} else {
enableDataNodes();
}
// Fallback: ensure nodes are enabled after full page load
window.addEventListener('load', () => {
setTimeout(() => {
// Remove the aggressive FOUC prevention style
if (window.foucPreventionStyle) {
window.foucPreventionStyle.remove();
}
document.documentElement.style.setProperty('--data-node-visibility', 'visible');
document.documentElement.style.setProperty('--data-node-opacity', '1');
document.documentElement.style.setProperty('--data-node-position', 'unset');
// Force enable all data nodes and constellations
const dataNodes = document.querySelectorAll('.data-node, .data-constellation');
dataNodes.forEach(node => {
node.style.removeProperty('opacity');
node.style.removeProperty('visibility');
node.style.removeProperty('transform');
});
}, 150);
});
</script>
</head>
<body>
<div class="atmospheric-bg">
<div class="light-effect-top"></div>
<div class="light-effect-bottom"></div>
<div class="small-light-top"></div>
<div class="small-light-bottom"></div>
<div class="overlay"></div>
<div class="noise"></div>
</div> <!-- NAVBAR --> <header class="site-header">
<nav class="navbar container">
<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">
<li><a href="Services/machine-learning.html"><div class="dropdown-item-content"><img src="assets/mlng.png" alt="Machine Learning Icon" class="dropdown-icon"><div class="text-content"><span class="item-title">Machine Learning</span><span class="item-description">We build intelligent systems that learn from data to predict outcomes and automate decisions.</span></div></div></a></li>
<li><a href="Services/data-analysis.html"><div class="dropdown-item-content"><img src="assets/data analytics.png" alt="Data Analysis Icon" class="dropdown-icon"><div class="text-content"><span class="item-title">Data Analytics</span><span class="item-description">We transform raw data into actionable insights, helping you understand trends and optimize performance.</span></div></div></a></li>
<li><a href="Services/generative-ai.html"><div class="dropdown-item-content"><img src="assets/gen ai.png" alt="Generative AI Icon" class="dropdown-icon" /><div class="text-content"><span class="item-title">Generative AI</span><span class="item-description">We create novel content, from text and images to code, unlocking new possibilities for creativity and efficiency.</span></div></div></a></li>
<li><a href="Services/agentic-ai.html"><div class="dropdown-item-content"><img src="assets/ai agent.png" alt="Agentic AI Icon" class="dropdown-icon" /><div class="text-content"><span class="item-title">Agentic AI</span><span class="item-description">We develop autonomous AI agents capable of perceiving their environment and taking actions to achieve specific goals.</span></div></div></a></li>
<li><a href="Services/automation-flows.html"><div class="dropdown-item-content"><img src="assets/automation flows.png" alt="Automation Flows Icon" class="dropdown-icon" /><div class="text-content"><span class="item-title">Automation Flows</span><span class="item-description">We design and implement intelligent automation solutions to streamline your workflows and boost productivity.</span></div></div></a></li>
</ul>
</li>
<li class="dropdown"><a href="#" class="nav-link">Industries ▾</a>
<ul class="dropdown-menu industries-dropdown"> <li><a href="Industries/finance.html"><div class="dropdown-item-content"><img src="assets/Finance Ind.png" alt="Finance Icon" class="dropdown-icon" /><div class="text-content"><span class="item-title">Finance</span><span class="item-description">Applying AI to enhance fraud detection, risk management, and customer experience.</span></div></div></a></li>
<li><a href="Industries/healthcare.html"><div class="dropdown-item-content"><img src="assets/healthcare ind.png" alt="Healthcare Icon" class="dropdown-icon" /><div class="text-content"><span class="item-title">Healthcare</span><span class="item-description">Leveraging AI for faster diagnoses, personalized treatments, and improved patient care.</span></div></div></a></li>
<li><a href="Industries/manufacturing.html"><div class="dropdown-item-content"><img src="assets/manufacturing ind.png" alt="Manufacturing Icon" class="dropdown-icon" /><div class="text-content"><span class="item-title">Manufacturing</span><span class="item-description">Optimizing production processes, predicting maintenance needs, and enhancing quality control with AI.</span></div></div></a></li>
<li><a href="Industries/marketing.html"><div class="dropdown-item-content"><img src="assets/marketing ind.png" alt="Marketing Icon" class="dropdown-icon" /><div class="text-content"><span class="item-title">Marketing</span><span class="item-description">Personalizing campaigns, predicting consumer behavior, and optimizing marketing spend using AI.</span></div></div></a></li>
<li><a href="Industries/media-entertainment.html"><div class="dropdown-item-content"><img src="assets/media and entertainment ind.png" alt="Media & Entertainment Icon" class="dropdown-icon" /><div class="text-content"><span class="item-title">Media & Entertainment</span><span class="item-description">Creating engaging content, personalizing recommendations, and optimizing content delivery with AI.</span></div></div></a></li>
<li><a href="Industries/travel.html"><div class="dropdown-item-content"><img src="assets/travel ind.png" alt="Travel Icon" class="dropdown-icon" /><div class="text-content"><span class="item-title">Travel</span><span class="item-description">Enhancing customer journeys, optimizing pricing, and improving operational efficiency through AI.</span></div></div></a></li> <li><a href="Industries/retail.html"><div class="dropdown-item-content"><img src="assets/retail ind.png" alt="Retail Icon" class="dropdown-icon" /><div class="text-content"><span class="item-title">Retail</span><span class="item-description">Personalizing shopping experiences, optimizing inventory, and predicting demand with AI.
</span></div></div></a></li>
<li><a href="Industries/case-studies.html"><div class="dropdown-item-content"><img src="assets/case study ind.png" alt="Case Studies Icon" class="dropdown-icon" /><div class="text-content"><span class="item-title">Case Studies</span><span class="item-description">Real-world examples showcasing how our AI solutions have delivered tangible results for our clients.</span></div></div></a></li>
</ul>
</li> <li class="dropdown"><a href="#" class="nav-link">Education ▾</a>
<ul class="dropdown-menu education-dropdown">
<li><a href="Education/workshops.html"><div class="dropdown-item-content"><img src="assets/workshops.png" alt="Workshops Icon" class="dropdown-icon" /><div class="text-content"><span class="item-title">Workshops</span><span class="item-description">Engaging and interactive sessions designed to introduce key AI concepts and practical skills.</span></div></div></a></li>
<li><a href="Education/individual-trainings.html"><div class="dropdown-item-content"><img src="assets/indi training.png" alt="Individual Training Icon" class="dropdown-icon" /><div class="text-content"><span class="item-title">Individual Trainings</span><span class="item-description">Personalized learning programs tailored to your specific needs and learning pace.</span></div></div></a></li>
<li><a href="Education/corporate-trainings.html"><div class="dropdown-item-content"><img src="assets/corpo training.png" alt="Corporate Training Icon" class="dropdown-icon" /><div class="text-content"><span class="item-title">Corporate Trainings</span><span class="item-description">Customized training solutions to upskill your teams and drive AI adoption within your organization.
</span></div></div></a></li>
</ul>
</li>
<li><a href="about.html" class="nav-link">About Us</a></li>
<li><a href="contact.html" class="nav-link">Contact Us</a></li>
</ul>
</nav>
</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>
<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>
</div>
<!-- First marquee (right to left) -->
<div class="tech-marquee-container">
<div class="tech-marquee">
<div class="tech-marquee-content">
<!-- First set of items -->
<div class="tech-marquee-item">
<div class="tech-icon-container">
<div class="tech-icon ollama"></div>
</div>
<p>Ollama</p>
</div>
<div class="tech-marquee-item">
<div class="tech-icon-container">
<div class="tech-icon langchain"></div>
</div>
<p>LangChain</p>
</div>
<div class="tech-marquee-item">
<div class="tech-icon-container">
<div class="tech-icon chroma"></div>
</div>
<p>Chroma</p>
</div>
<div class="tech-marquee-item">
<div class="tech-icon-container">
<div class="tech-icon pinecone"></div>
</div>
<p>Pinecone</p>
</div>
<div class="tech-marquee-item">
<div class="tech-icon-container">
<div class="tech-icon vectordb"></div>
</div>
<p>OpenAI</p>
</div>
<div class="tech-marquee-item">
<div class="tech-icon-container">
<div class="tech-icon huggingface"></div>
</div>
<p>Hugging Face</p>
</div>
<div class="tech-marquee-item">
<div class="tech-icon-container">
<div class="tech-icon pytorch"></div>
</div>
<p>PyTorch</p>
</div>
<div class="tech-marquee-item">
<div class="tech-icon-container">
<div class="tech-icon tensorflow"></div>
</div>
<p>TensorFlow</p>
</div>
<div class="tech-marquee-item">
<div class="tech-icon-container">
<div class="tech-icon llama"></div>
</div>
<p>Llama</p>
</div>
<div class="tech-marquee-item">
<div class="tech-icon-container">
<div class="tech-icon milvus"></div>
</div>
<p>Milvus</p>
</div>
<div class="tech-marquee-item">
<div class="tech-icon-container">
<div class="tech-icon docker"></div>
</div>
<p>Docker</p>
</div>
<!-- Duplicated set for seamless looping -->
<div class="tech-marquee-item">
<div class="tech-icon-container">
<div class="tech-icon ollama"></div>
</div>
<p>Ollama</p>
</div>
<div class="tech-marquee-item">
<div class="tech-icon-container">
<div class="tech-icon langchain"></div>
</div>
<p>LangChain</p>
</div>
<div class="tech-marquee-item">
<div class="tech-icon-container">
<div class="tech-icon chroma"></div>
</div>
<p>Chroma</p>
</div>
<div class="tech-marquee-item">
<div class="tech-icon-container">
<div class="tech-icon pinecone"></div>
</div>
<p>Pinecone</p>
</div>
<div class="tech-marquee-item">
<div class="tech-icon-container">
<div class="tech-icon vectordb"></div>
</div>
<p>OpenAI</p>
</div>
<div class="tech-marquee-item">
<div class="tech-icon-container">
<div class="tech-icon huggingface"></div>
</div>
<p>Hugging Face</p>
</div>
<div class="tech-marquee-item">
<div class="tech-icon-container">
<div class="tech-icon pytorch"></div>
</div>
<p>PyTorch</p>
</div>
<div class="tech-marquee-item">
<div class="tech-icon-container">
<div class="tech-icon tensorflow"></div>
</div>
<p>TensorFlow</p>
</div>
<div class="tech-marquee-item">
<div class="tech-icon-container">
<div class="tech-icon llama"></div>
</div>
<p>Llama</p>
</div>
<div class="tech-marquee-item">
<div class="tech-icon-container">
<div class="tech-icon milvus"></div>
</div>
<p>Milvus</p>
</div>
<div class="tech-marquee-item">
<div class="tech-icon-container">
<div class="tech-icon docker"></div>
</div>
<p>Docker</p>
</div>
</div>
</div>
<div class="tech-shadow tech-shadow-left"></div>
<div class="tech-shadow tech-shadow-right"></div>
</div>
<!-- Divider between marquees -->
<div class="tech-marquee-divider"></div>
<!-- Second marquee (left to right) -->
<div class="tech-marquee-container tech-marquee-reversed">
<div class="tech-marquee">
<div class="tech-marquee-content tech-marquee-content-reversed">
<!-- First set of items for reverse direction -->
<div class="tech-marquee-item">
<div class="tech-icon-container">
<div class="tech-icon weaviate"></div>
</div>
<p>Weaviate</p>
</div>
<div class="tech-marquee-item">
<div class="tech-icon-container">
<div class="tech-icon qdrant"></div>
</div>
<p>Qdrant</p>
</div>
<div class="tech-marquee-item">
<div class="tech-icon-container">
<div class="tech-icon haystack"></div>
</div>
<p>Haystack</p>
</div>
<div class="tech-marquee-item">
<div class="tech-icon-container">
<div class="tech-icon mistral"></div>
</div>
<p>Mistral AI</p>
</div>
<div class="tech-marquee-item">
<div class="tech-icon-container">
<div class="tech-icon anthropic"></div>
</div>
<p>Anthropic</p>
</div>
<div class="tech-marquee-item">
<div class="tech-icon-container">
<div class="tech-icon groq"></div>
</div>
<p>Groq</p>
</div>
<div class="tech-marquee-item">
<div class="tech-icon-container">
<div class="tech-icon gemini"></div>
</div>
<p>Gemini</p>
</div>
<div class="tech-marquee-item">
<div class="tech-icon-container">
<div class="tech-icon llamaindex"></div>
</div>
<p>LlamaIndex</p>
</div>
<div class="tech-marquee-item">
<div class="tech-icon-container">
<div class="tech-icon vllm"></div>
</div>
<p>vLLM</p>
</div>
<div class="tech-marquee-item">
<div class="tech-icon-container">
<div class="tech-icon rag"></div>
</div>
<p>RAG</p>
</div>
<div class="tech-marquee-item">
<div class="tech-icon-container">
<div class="tech-icon spacy"></div>
</div>
<p>spaCy</p>
</div>
<!-- Duplicated set for seamless looping -->
<div class="tech-marquee-item">
<div class="tech-icon-container">
<div class="tech-icon weaviate"></div>
</div>
<p>Weaviate</p>
</div>
<div class="tech-marquee-item">
<div class="tech-icon-container">
<div class="tech-icon qdrant"></div>
</div>
<p>Qdrant</p>
</div>
<div class="tech-marquee-item">
<div class="tech-icon-container">
<div class="tech-icon haystack"></div>
</div>
<p>Haystack</p>
</div>
<div class="tech-marquee-item">
<div class="tech-icon-container">
<div class="tech-icon mistral"></div>
</div>
<p>Mistral AI</p>
</div>
<div class="tech-marquee-item">
<div class="tech-icon-container">
<div class="tech-icon anthropic"></div>
</div>
<p>Anthropic</p>
</div>
<div class="tech-marquee-item">
<div class="tech-icon-container">
<div class="tech-icon groq"></div>
</div>
<p>Groq</p>
</div>
<div class="tech-marquee-item">
<div class="tech-icon-container">
<div class="tech-icon gemini"></div>
</div>
<p>Gemini</p>
</div>
<div class="tech-marquee-item">
<div class="tech-icon-container">
<div class="tech-icon llamaindex"></div>
</div>
<p>LlamaIndex</p>
</div>
<div class="tech-marquee-item">
<div class="tech-icon-container">
<div class="tech-icon vllm"></div>
</div>
<p>vLLM</p>
</div>
<div class="tech-marquee-item">
<div class="tech-icon-container">
<div class="tech-icon rag"></div>
</div>
<p>RAG</p>
</div>
<div class="tech-marquee-item">
<div class="tech-icon-container">
<div class="tech-icon spacy"></div>
</div>
<p>spaCy</p>
</div>
</div>
</div>
<div class="tech-shadow tech-shadow-left"></div>
<div class="tech-shadow tech-shadow-right"></div>
</div>
</section>
<div class="tech-section-spacer"></div>
<!-- EXPERTISE -->
<section id="expertise" class="container">
<h2 class="section-heading">OUR EXPERTISE</h2>
<div class="exp-grid"> <div class="exp-item">
<img src="assets/predictive.png" alt="Predictive Analytics Icon" />
<p>Predictive Analytics</p>
<p class="exp-description">Using statistical algorithms and machine learning techniques to forecast future outcomes.</p>
</div> <div class="exp-item">
<img src="assets/technology.png" alt="Automation Icon" />
<p>Automation</p>
<p class="exp-description">Designing and implementing intelligent systems to streamline workflows and boost productivity.</p>
</div> <div class="exp-item">
<img src="assets/analytics (1).png" alt="Data Analysis Icon" />
<p>Data Analysis</p>
<p class="exp-description">Transforming raw data into actionable insights to inform strategic decisions.</p>
</div>
</div>
</section>
<!-- FOOTER -->
<footer class="site-footer">
<div class="container"> <div class="footer-content">
<div class="footer-col footer-col-logo">
<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>
<a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
<a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
<a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
</div>
</div>
<div class="footer-col">
<h3>Quick Links</h3>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="Services/machine-learning.html">Machine Learning</a></li>
<li><a href="Services/data-analysis.html">Data Analysis</a></li>
<li><a href="Services/generative-ai.html">Generative AI</a></li>
<li><a href="Services/agentic-ai.html">Agentic AI</a></li>
<li><a href="Services/automation-flows.html">Automation Flows</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
<div class="footer-col">
<h3>Contact Us</h3>
<ul>
<li><p><i class="fas fa-map-marker-alt"></i> 123 AI Street, Innovation City, Techland</p></li>
<li><p><i class="fas fa-phone"></i> +1 (555) 123-4567</p></li>
<li><p><i class="fas fa-envelope"></i> <a href="mailto:info@gyannetra.com">info@gyannetra.com</a></p></li>
</ul>
</div>
<div class="footer-col">
<h3>Follow Us</h3>
<p>Stay updated with our latest insights and news.</p>
<form action="#" method="post" class="newsletter-form" style="display: none;">
<input type="email" name="email" placeholder="Enter your email" required>
<button type="submit" class="btn btn-secondary">Subscribe</button>
</form>
</div>
</div>
<div class="footer-bottom">
<p>&copy; 2025 Gyannetra. All rights reserved. | <a href="privacy-policy.html">Privacy Policy</a> | <a href="terms-of-service.html">Terms of Service</a></p>
</div>
</div> </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>