Adjust hero section positioning and standardize contact information
- Updated hero section CSS to position content lower on the page - Changed #hero padding-top from 8rem to 4rem with !important flag - Modified .hero-container to use align-items: flex-start with 10rem top padding - Added cache-busting parameter to style.css link for browser refresh - Standardized contact information across all pages: - Location: Pune, Maharashtra, India - Phone: +91 89491-35299 - Email: info@gyannetra.com - Updated footer contact sections in about.html and all service/industry pages - Fixed CSS syntax error by removing extra closing brace - Cleaned up unused CSS and JS files for better project organization
This commit is contained in:
2
.vscode/settings.json
vendored
2
.vscode/settings.json
vendored
@@ -1,3 +1,3 @@
|
||||
{
|
||||
"liveServer.settings.port": 5501
|
||||
"liveServer.settings.port": 5502
|
||||
}
|
||||
@@ -1,156 +0,0 @@
|
||||
# Gyannetra Website Color Scheme Standardization - COMPLETED
|
||||
|
||||
## Overview
|
||||
|
||||
Successfully standardized and improved the Gyannetra Website's color scheme system by implementing a centralized CSS variable approach for all industry and service pages, replacing individual page-specific color overrides with a unified theme class system.
|
||||
|
||||
## Changes Implemented
|
||||
|
||||
### 1. CSS Variables System (style.css)
|
||||
|
||||
- **Extended `:root` CSS variables** with standardized color schemes for all categories
|
||||
- **Industry Colors:**
|
||||
|
||||
- Finance: `#007bff` (blue)
|
||||
- Healthcare: `#00c6ff` (medical blue)
|
||||
- Retail: `#e74c3c` (red)
|
||||
- Manufacturing: `#3498db` (industrial blue)
|
||||
- Marketing: `#ec4899` (pink)
|
||||
- Travel: `#0ea5e9` (sky blue)
|
||||
- Media & Entertainment: `#9333ea` (purple)
|
||||
|
||||
- **Service Colors:**
|
||||
- Machine Learning: `#2563eb` (deep blue)
|
||||
- Generative AI: `#10b981` (emerald green)
|
||||
- Data Analysis: `#f59e0b` (amber)
|
||||
- Automation: `#8b5cf6` (purple)
|
||||
- Agentic AI: `#ec4899` (pink)
|
||||
|
||||
### 2. Theme Class System
|
||||
|
||||
- **Implemented standardized theme classes** with consistent naming pattern: `theme-[category]`
|
||||
- **Each theme class defines:**
|
||||
- `--primary-color`
|
||||
- `--primary-color-rgb`
|
||||
- `--primary-color-hover`
|
||||
- `--primary-color-glow`
|
||||
|
||||
### 3. Industry Pages Updated (8 files)
|
||||
|
||||
All files in `Industries/` folder updated with theme classes:
|
||||
|
||||
- `finance.html` → `class="theme-finance"`
|
||||
- `healthcare.html` → `class="theme-healthcare"`
|
||||
- `retail.html` → `class="theme-retail"`
|
||||
- `manufacturing.html` → `class="theme-manufacturing"`
|
||||
- `marketing.html` → `class="theme-marketing"`
|
||||
- `travel.html` → `class="theme-travel"`
|
||||
- `media-entertainment.html` → `class="theme-media"`
|
||||
- `case-studies.html` → `class="theme-media"`
|
||||
|
||||
### 4. Services Pages Updated (5 files)
|
||||
|
||||
All files in `Services/` folder updated with standardized theme classes:
|
||||
|
||||
- `machine-learning.html` → `class="theme-machine-learning"`
|
||||
- `generative-ai.html` → `class="theme-generative-ai"`
|
||||
- `data-analysis.html` → `class="theme-data-analysis"`
|
||||
- `automation-flows.html` → `class="theme-automation"`
|
||||
- `agentic-ai.html` → `class="theme-agentic-ai"`
|
||||
|
||||
### 5. Education Pages
|
||||
|
||||
- No changes needed - using default color scheme
|
||||
- Pages: `workshops.html`, `individual-trainings.html`, `corporate-trainings.html`
|
||||
|
||||
## Technical Benefits
|
||||
|
||||
### 1. Maintainability
|
||||
|
||||
- **Centralized color management** - all colors defined in one location
|
||||
- **Consistent naming conventions** across all categories
|
||||
- **Easy updates** - change colors in CSS variables, affects all relevant pages
|
||||
|
||||
### 2. Scalability
|
||||
|
||||
- **Easy to add new categories** - just add new CSS variables and theme class
|
||||
- **Consistent pattern** for future development
|
||||
- **No code duplication** across pages
|
||||
|
||||
### 3. Performance
|
||||
|
||||
- **Eliminated inline styles** reducing HTML file sizes
|
||||
- **Better caching** - styles in external CSS file
|
||||
- **Reduced maintenance overhead**
|
||||
|
||||
### 4. Code Quality
|
||||
|
||||
- **Separation of concerns** - styling separated from markup
|
||||
- **DRY principle** - no repeated color definitions
|
||||
- **Standardized approach** across entire website
|
||||
|
||||
## Validation
|
||||
|
||||
- ✅ All HTML files validated - no errors
|
||||
- ✅ CSS file validated - no errors
|
||||
- ✅ Browser testing completed
|
||||
- ✅ Color schemes display correctly
|
||||
- ✅ Hover effects working properly
|
||||
|
||||
## File Structure Impact
|
||||
|
||||
```
|
||||
css/
|
||||
style.css ← Updated with complete color variable system and theme classes
|
||||
|
||||
Industries/ (8 files updated)
|
||||
├── finance.html ← theme-finance
|
||||
├── healthcare.html ← theme-healthcare
|
||||
├── retail.html ← theme-retail
|
||||
├── manufacturing.html ← theme-manufacturing
|
||||
├── marketing.html ← theme-marketing
|
||||
├── travel.html ← theme-travel
|
||||
├── media-entertainment.html ← theme-media
|
||||
└── case-studies.html ← theme-media
|
||||
|
||||
Services/ (5 files updated)
|
||||
├── machine-learning.html ← theme-machine-learning
|
||||
├── generative-ai.html ← theme-generative-ai
|
||||
├── data-analysis.html ← theme-data-analysis
|
||||
├── automation-flows.html ← theme-automation
|
||||
└── agentic-ai.html ← theme-agentic-ai
|
||||
|
||||
Education/ (3 files - no changes needed)
|
||||
├── workshops.html
|
||||
├── individual-trainings.html
|
||||
└── corporate-trainings.html
|
||||
```
|
||||
|
||||
## Future Maintenance
|
||||
|
||||
To add a new category or modify colors:
|
||||
|
||||
1. Add/modify CSS variables in `:root` section of `style.css`
|
||||
2. Add/modify corresponding theme class
|
||||
3. Apply theme class to page's `<body>` tag
|
||||
|
||||
Example:
|
||||
|
||||
```css
|
||||
/* In :root */
|
||||
--new-category-primary: #color;
|
||||
--new-category-primary-rgb: r, g, b;
|
||||
--new-category-primary-hover: #hover-color;
|
||||
|
||||
/* Theme class */
|
||||
.theme-new-category {
|
||||
--primary-color: var(--new-category-primary);
|
||||
--primary-color-rgb: var(--new-category-primary-rgb);
|
||||
--primary-color-hover: var(--new-category-primary-hover);
|
||||
--primary-color-glow: rgba(var(--new-category-primary-rgb), 0.5);
|
||||
}
|
||||
```
|
||||
|
||||
## Status: ✅ COMPLETE
|
||||
|
||||
All objectives achieved successfully. The website now has a fully standardized, maintainable, and scalable color scheme system.
|
||||
@@ -1,152 +0,0 @@
|
||||
# Color Scheme Standardization - Complete Implementation
|
||||
|
||||
## Project Overview
|
||||
|
||||
Successfully standardized text color schemes across all service pages to match the primary website's color scheme using CSS variables and centralized theming.
|
||||
|
||||
## Color System Structure
|
||||
|
||||
The website uses a sophisticated theme-based color system with:
|
||||
|
||||
- **Primary Color**: `--primary-color: #6d28d9` (purple)
|
||||
- **Primary Color RGB**: `--primary-color-rgb: 109, 40, 217` (for rgba usage)
|
||||
- **Standardized Variables**: Defined in `css/style.css`
|
||||
|
||||
## Files Modified
|
||||
|
||||
### Service Pages Completely Standardized:
|
||||
|
||||
#### 1. automation-flows.html
|
||||
|
||||
- ✅ Removed `class="theme-automation"` from body tag
|
||||
- ✅ Updated 3 hardcoded border colors to use `rgba(var(--primary-color-rgb), 0.3)`
|
||||
- ✅ Updated 1 hover effect glow color to use `rgba(var(--primary-color-rgb), 0.4)`
|
||||
|
||||
#### 2. agentic-ai.html
|
||||
|
||||
- ✅ Removed `class="theme-agentic-ai"` from body tag
|
||||
- ✅ Updated 3 hardcoded border colors to use `rgba(var(--primary-color-rgb), 0.3)`
|
||||
- ✅ Updated 1 hover effect glow color to use `rgba(var(--primary-color-rgb), 0.4)`
|
||||
|
||||
#### 3. machine-learning.html
|
||||
|
||||
- ✅ Removed inline CSS color overrides (`--primary-color: #6d28d9`)
|
||||
- ✅ Updated 3 hardcoded border colors to use `rgba(var(--primary-color-rgb), 0.3)`
|
||||
- ✅ Updated 1 hover effect glow color to use `rgba(var(--primary-color-rgb), 0.4)`
|
||||
|
||||
#### 4. generative-ai.html
|
||||
|
||||
- ✅ Removed inline CSS color overrides (`--primary-color: #10b981`)
|
||||
- ✅ Updated 3 hardcoded border colors to use `rgba(var(--primary-color-rgb), 0.3)`
|
||||
- ✅ Updated 1 hover effect glow color to use `rgba(var(--primary-color-rgb), 0.4)`
|
||||
|
||||
#### 5. data-analysis.html
|
||||
|
||||
- ✅ Removed inline CSS color overrides (`--primary-color: #0ea5e9`)
|
||||
- ✅ Updated 3 hardcoded border colors to use `rgba(var(--primary-color-rgb), 0.3)`
|
||||
- ✅ Updated 1 hover effect glow color to use `rgba(var(--primary-color-rgb), 0.4)`
|
||||
|
||||
## Key Changes Made
|
||||
|
||||
### 1. Theme Class Removal
|
||||
|
||||
```html
|
||||
<!-- BEFORE -->
|
||||
<body class="theme-automation">
|
||||
<!-- AFTER -->
|
||||
<body></body>
|
||||
</body>
|
||||
```
|
||||
|
||||
### 2. Inline Color Override Removal
|
||||
|
||||
```css
|
||||
/* BEFORE */
|
||||
body {
|
||||
--primary-color: #2563eb;
|
||||
--primary-color-rgb: 37, 99, 235;
|
||||
}
|
||||
|
||||
/* AFTER */
|
||||
body {
|
||||
/* Using standardized colors from main CSS */
|
||||
--card-bg: rgba(25, 35, 55, 0.7);
|
||||
--text-light: #e0e0e0;
|
||||
--text-muted: #b0b0b0;
|
||||
}
|
||||
```
|
||||
|
||||
### 3. Border Color Standardization
|
||||
|
||||
```css
|
||||
/* BEFORE */
|
||||
border: 1px solid rgba(14, 165, 233, 0.3);
|
||||
|
||||
/* AFTER */
|
||||
border: 1px solid rgba(var(--primary-color-rgb), 0.3);
|
||||
```
|
||||
|
||||
### 4. Hover Effect Standardization
|
||||
|
||||
```css
|
||||
/* BEFORE */
|
||||
box-shadow: 0 12px 25px rgba(16, 185, 129, 0.4);
|
||||
|
||||
/* AFTER */
|
||||
box-shadow: 0 12px 25px rgba(var(--primary-color-rgb), 0.4);
|
||||
```
|
||||
|
||||
## Visual Consistency Achieved
|
||||
|
||||
### Before Standardization:
|
||||
|
||||
- **automation-flows.html**: Blue theme (#2563eb)
|
||||
- **agentic-ai.html**: Blue theme (#3b82f6)
|
||||
- **machine-learning.html**: Purple theme (#6d28d9)
|
||||
- **generative-ai.html**: Green theme (#10b981)
|
||||
- **data-analysis.html**: Light blue theme (#0ea5e9)
|
||||
|
||||
### After Standardization:
|
||||
|
||||
- **All service pages**: Consistent purple theme (#6d28d9)
|
||||
- **Unified visual identity**: All headings, borders, and accents use the same color
|
||||
- **Centralized control**: Color changes can be made globally via CSS variables
|
||||
|
||||
## Benefits of This Implementation
|
||||
|
||||
1. **Visual Consistency**: All service pages now share the same purple color scheme
|
||||
2. **Maintainability**: Color changes can be made in one central location
|
||||
3. **Brand Coherence**: Strengthened brand identity across all pages
|
||||
4. **Future-Proof**: Easy to update colors site-wide if needed
|
||||
5. **Performance**: Removed redundant theme-specific CSS classes
|
||||
|
||||
## Technical Implementation Details
|
||||
|
||||
### CSS Variable Usage:
|
||||
|
||||
- `--primary-color`: Used for text colors, icons, and primary accents
|
||||
- `--primary-color-rgb`: Used for rgba() functions with opacity
|
||||
- `--card-bg`, `--text-light`, `--text-muted`: Supporting colors maintained
|
||||
|
||||
### Preserved Elements:
|
||||
|
||||
- Black shadow effects for depth and dimension
|
||||
- White border separators (`rgba(255, 255, 255, 0.1)`)
|
||||
- Existing layout and spacing
|
||||
- All functionality and interactions
|
||||
|
||||
## Quality Assurance
|
||||
|
||||
- ✅ All files pass HTML validation
|
||||
- ✅ No CSS errors introduced
|
||||
- ✅ All interactive elements function correctly
|
||||
- ✅ Responsive design maintained
|
||||
- ✅ Cross-browser compatibility preserved
|
||||
|
||||
## Implementation Date
|
||||
|
||||
May 26, 2025
|
||||
|
||||
## Result
|
||||
|
||||
**Complete color scheme standardization achieved** - All service pages now display a cohesive visual identity with the standardized purple color theme (#6d28d9) while maintaining their unique content and functionality.
|
||||
@@ -1,104 +0,0 @@
|
||||
# Gyannetra Website - Dynamic Features
|
||||
|
||||
## Enhanced JavaScript Functionality
|
||||
|
||||
The following dynamic features have been added to the Gyannetra website to create a more interactive, engaging, and modern user experience:
|
||||
|
||||
### 1. Core Animation & Interaction Features
|
||||
|
||||
#### Neural Network Animation
|
||||
|
||||
- Interactive animated neural mesh background with connections that respond to user movement
|
||||
- Dynamic data nodes with hover and click effects
|
||||
- Connection lines between related technology nodes
|
||||
- 3D tilt effects and glowing highlights
|
||||
|
||||
#### Scroll-Based Animations
|
||||
|
||||
- Elements fade and slide into view when scrolling
|
||||
- Parallax background effects for depth
|
||||
- Section transitions with staggered element animations
|
||||
- Smart animations that only trigger when elements enter the viewport
|
||||
|
||||
#### Interactive UI Elements
|
||||
|
||||
- Custom animated cursor that changes on interactive elements
|
||||
- 3D card hover effects with depth and highlights
|
||||
- Smooth page transitions between sections
|
||||
- Animation effects for buttons and interactive elements
|
||||
|
||||
### 2. Page-Specific Features
|
||||
|
||||
#### Homepage
|
||||
|
||||
- Dynamic tech marquee with hover effects
|
||||
- Animated expertise items with staggered entrance
|
||||
- Pulsing logo and energy core effects
|
||||
- Morphing background shapes and data streams
|
||||
|
||||
#### Services & Industries Pages
|
||||
|
||||
- Animated service cards with reveal animations
|
||||
- Interactive case studies with hover effects
|
||||
- Tab system for content organization with smooth transitions
|
||||
- Dynamic counter animations for statistics and metrics
|
||||
|
||||
#### Educational Pages
|
||||
|
||||
- Expandable course cards with click interactions
|
||||
- Animated instructor profiles
|
||||
- Workshop timeline with progress indicators
|
||||
- Interactive skills diagrams
|
||||
|
||||
### 3. Form & User Input Features
|
||||
|
||||
#### Contact Form
|
||||
|
||||
- Multi-step form with animated transitions
|
||||
- Real-time validation with visual feedback
|
||||
- Animated success and error states
|
||||
- Floating labels that animate when fields are focused
|
||||
|
||||
#### Newsletter Subscription
|
||||
|
||||
- Animated subscription process
|
||||
- Success confirmation with animated checkmark
|
||||
- Form reset with smooth transitions
|
||||
|
||||
### 4. Performance Optimizations
|
||||
|
||||
- Lazy loading of images to improve page load times
|
||||
- Optimized animations that pause when page is not visible
|
||||
- Responsive design adaptations for different devices
|
||||
- Mobile-specific touch interactions
|
||||
|
||||
### 5. File Structure
|
||||
|
||||
- **main.js**: Core functionality and initialization
|
||||
- **hero-animation-new.js**: Hero section animations and effects
|
||||
- **data-node-interactions.js**: Interactive nodes and connections
|
||||
- **tech-marquee.js**: Technology marquee animations
|
||||
- **page-specific.js**: Page-specific animations and interactions
|
||||
- **dynamic-content.js**: Dynamic content loading and filtering
|
||||
- **form-handler.js**: Form validation and submission handling
|
||||
- **animations.css**: Custom animation keyframes and classes
|
||||
|
||||
## How to Customize
|
||||
|
||||
To modify the animation behavior or add new interactive elements:
|
||||
|
||||
1. Adjust timing and easing in the **animations.css** file
|
||||
2. Add new animation keyframes for custom effects
|
||||
3. Extend the page-specific.js file to add functionality for new pages
|
||||
4. Modify the data-node-interactions.js to adjust the neural network behavior
|
||||
|
||||
## Browser Compatibility
|
||||
|
||||
These animations and effects are compatible with modern browsers including:
|
||||
|
||||
- Chrome 60+
|
||||
- Firefox 60+
|
||||
- Safari 12+
|
||||
- Edge 79+
|
||||
|
||||
For older browsers, basic functionality is preserved while advanced effects may be limited.
|
||||
@@ -8,7 +8,56 @@
|
||||
<link rel="stylesheet" href="../css/benefits-cards.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/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">
|
||||
|
||||
<!-- Navbar scroll effect styles -->
|
||||
<style>
|
||||
.site-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
background: transparent !important;
|
||||
backdrop-filter: blur(0px);
|
||||
-webkit-backdrop-filter: blur(0px);
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border-bottom: 1px solid transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.site-header.scrolled {
|
||||
background: transparent !important;
|
||||
backdrop-filter: blur(30px);
|
||||
-webkit-backdrop-filter: blur(30px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
padding: 1rem 2rem;
|
||||
max-width: none !important;
|
||||
margin: 0 !important;
|
||||
background: transparent !important;
|
||||
border-radius: 0 !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Override any existing navbar container styles */
|
||||
.site-header .navbar,
|
||||
.site-header .container,
|
||||
.navbar .container {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
/* Ensure body has top padding to account for fixed navbar */
|
||||
body {
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
.hero-section {
|
||||
padding-top: 12rem;
|
||||
padding-bottom: 6rem;
|
||||
@@ -131,47 +180,55 @@
|
||||
<div class="noise"></div>
|
||||
</div>
|
||||
<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>
|
||||
<nav class="navbar">
|
||||
<a href="../index.html" class="logo">
|
||||
<img src="../assets/Company Icons/GN Name logo.svg" alt="Gyannetra Logo" class="logo-img">
|
||||
</a>
|
||||
|
||||
<!-- Hamburger menu button for mobile -->
|
||||
<button class="hamburger-menu" aria-label="Toggle menu">
|
||||
<span class="hamburger-line"></span>
|
||||
<span class="hamburger-line"></span>
|
||||
<span class="hamburger-line"></span>
|
||||
</button>
|
||||
|
||||
<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 active">Education ▾</a>
|
||||
<ul class="dropdown-menu education-dropdown">
|
||||
<li><a href="./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="./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="./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>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="dropdown"><a href="#" class="nav-link active">Education ▾</a>
|
||||
<ul class="dropdown-menu education-dropdown">
|
||||
<li><a href="./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="./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="./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>
|
||||
|
||||
<main>
|
||||
<section class="hero-section">
|
||||
@@ -351,7 +408,41 @@
|
||||
<script src="../js/unified-neural-interactions.js" defer></script>
|
||||
<script src="../js/tech-marquee.js" defer></script>
|
||||
<script src="../js/data-node-interactions.js" defer></script>
|
||||
|
||||
|
||||
<!-- Navbar scroll effect script -->
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const header = document.querySelector('.site-header');
|
||||
|
||||
function handleScroll() {
|
||||
const currentScrollY = window.scrollY;
|
||||
|
||||
if (currentScrollY > 30) {
|
||||
header.classList.add('scrolled');
|
||||
} else {
|
||||
header.classList.remove('scrolled');
|
||||
}
|
||||
}
|
||||
|
||||
// Throttle scroll events for better performance
|
||||
let ticking = false;
|
||||
function onScroll() {
|
||||
if (!ticking) {
|
||||
requestAnimationFrame(function() {
|
||||
handleScroll();
|
||||
ticking = false;
|
||||
});
|
||||
ticking = true;
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', onScroll, { passive: true });
|
||||
|
||||
// Initial check
|
||||
handleScroll();
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -8,7 +8,56 @@
|
||||
<link rel="stylesheet" href="../css/benefits-cards.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">
|
||||
|
||||
<!-- Navbar scroll effect styles -->
|
||||
<style>
|
||||
.site-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
background: transparent !important;
|
||||
backdrop-filter: blur(0px);
|
||||
-webkit-backdrop-filter: blur(0px);
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border-bottom: 1px solid transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.site-header.scrolled {
|
||||
background: transparent !important;
|
||||
backdrop-filter: blur(30px);
|
||||
-webkit-backdrop-filter: blur(30px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
padding: 1rem 2rem;
|
||||
max-width: none !important;
|
||||
margin: 0 !important;
|
||||
background: transparent !important;
|
||||
border-radius: 0 !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Override any existing navbar container styles */
|
||||
.site-header .navbar,
|
||||
.site-header .container,
|
||||
.navbar .container {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
/* Ensure body has top padding to account for fixed navbar */
|
||||
body {
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
.benefit-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -78,10 +127,18 @@
|
||||
<div class="atmospheric-bg"></div>
|
||||
<!-- NAVBAR -->
|
||||
<header class="site-header">
|
||||
<nav class="navbar container">
|
||||
<nav class="navbar">
|
||||
<a href="../index.html" class="logo">
|
||||
<img src="../assets/Company Icons/GN Name logo.svg" alt="Gyannetra Logo" class="logo-img">
|
||||
</a>
|
||||
|
||||
<!-- Hamburger menu button for mobile -->
|
||||
<button class="hamburger-menu" aria-label="Toggle menu">
|
||||
<span class="hamburger-line"></span>
|
||||
<span class="hamburger-line"></span>
|
||||
<span class="hamburger-line"></span>
|
||||
</button>
|
||||
|
||||
<ul class="nav-links">
|
||||
<li class="dropdown"><a href="#" class="nav-link">Services ▾</a>
|
||||
<ul class="dropdown-menu services-dropdown">
|
||||
@@ -316,6 +373,41 @@
|
||||
<script src="../js/tech-marquee.js" defer></script>
|
||||
<script src="../js/data-node-interactions.js" defer></script>
|
||||
|
||||
<!-- Navbar scroll effect script -->
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const header = document.querySelector('.site-header');
|
||||
|
||||
function handleScroll() {
|
||||
const currentScrollY = window.scrollY;
|
||||
|
||||
if (currentScrollY > 30) {
|
||||
header.classList.add('scrolled');
|
||||
} else {
|
||||
header.classList.remove('scrolled');
|
||||
}
|
||||
}
|
||||
|
||||
// Throttle scroll events for better performance
|
||||
let ticking = false;
|
||||
function onScroll() {
|
||||
if (!ticking) {
|
||||
requestAnimationFrame(function() {
|
||||
handleScroll();
|
||||
ticking = false;
|
||||
});
|
||||
ticking = true;
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', onScroll, { passive: true });
|
||||
|
||||
// Initial check
|
||||
handleScroll();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -3,11 +3,61 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Workshops - Gyannetra</title> <link rel="stylesheet" href="../css/style.css">
|
||||
<title>Workshops - Gyannetra</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<link rel="stylesheet" href="../css/benefits-cards.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">
|
||||
|
||||
<!-- Navbar scroll effect styles -->
|
||||
<style>
|
||||
.site-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
background: transparent !important;
|
||||
backdrop-filter: blur(0px);
|
||||
-webkit-backdrop-filter: blur(0px);
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border-bottom: 1px solid transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.site-header.scrolled {
|
||||
background: transparent !important;
|
||||
backdrop-filter: blur(30px);
|
||||
-webkit-backdrop-filter: blur(30px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
padding: 1rem 2rem;
|
||||
max-width: none !important;
|
||||
margin: 0 !important;
|
||||
background: transparent !important;
|
||||
border-radius: 0 !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Override any existing navbar container styles */
|
||||
.site-header .navbar,
|
||||
.site-header .container,
|
||||
.navbar .container {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
/* Ensure body has top padding to account for fixed navbar */
|
||||
body {
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
.benefit-card.workshop-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -68,48 +118,56 @@
|
||||
<div class="noise"></div>
|
||||
</div>
|
||||
<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>
|
||||
<nav class="navbar">
|
||||
<a href="../index.html" class="logo">
|
||||
<img src="../assets/Company Icons/GN Name logo.svg" alt="Gyannetra Logo" class="logo-img">
|
||||
</a>
|
||||
|
||||
<!-- Hamburger menu button for mobile -->
|
||||
<button class="hamburger-menu" aria-label="Toggle menu">
|
||||
<span class="hamburger-line"></span>
|
||||
<span class="hamburger-line"></span>
|
||||
<span class="hamburger-line"></span>
|
||||
</button>
|
||||
|
||||
<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 active">Education ▾</a>
|
||||
<ul class="dropdown-menu education-dropdown">
|
||||
<li><a href="./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="./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="./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>
|
||||
</li>
|
||||
<li class="dropdown"><a href="#" class="nav-link active">Education ▾</a>
|
||||
<ul class="dropdown-menu education-dropdown">
|
||||
<li><a href="./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="./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="./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>
|
||||
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section id="workshops-hero" class="hero-section">
|
||||
<div class="container">
|
||||
@@ -264,7 +322,42 @@
|
||||
<script src="../js/unified-neural-interactions.js" defer></script>
|
||||
<script src="../js/tech-marquee.js" defer></script>
|
||||
<script src="../js/data-node-interactions.js" defer></script>
|
||||
|
||||
|
||||
<!-- Navbar scroll effect script -->
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const header = document.querySelector('.site-header');
|
||||
|
||||
function handleScroll() {
|
||||
const currentScrollY = window.scrollY;
|
||||
|
||||
if (currentScrollY > 30) {
|
||||
header.classList.add('scrolled');
|
||||
} else {
|
||||
header.classList.remove('scrolled');
|
||||
}
|
||||
}
|
||||
|
||||
// Throttle scroll events for better performance
|
||||
let ticking = false;
|
||||
function onScroll() {
|
||||
if (!ticking) {
|
||||
requestAnimationFrame(function() {
|
||||
handleScroll();
|
||||
ticking = false;
|
||||
});
|
||||
ticking = true;
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', onScroll, { passive: true });
|
||||
|
||||
// Initial check
|
||||
handleScroll();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
|
||||
262
HAMBURGER_MENU_COMPLETE.md
Normal file
262
HAMBURGER_MENU_COMPLETE.md
Normal file
@@ -0,0 +1,262 @@
|
||||
# 🍔 HAMBURGER MENU IMPLEMENTATION - COMPLETE
|
||||
|
||||
## Project Overview
|
||||
|
||||
Successfully implemented a responsive hamburger menu for mobile navigation across the entire Gyannetra website, providing an enhanced mobile user experience with modern UI interactions.
|
||||
|
||||
## ✅ Implementation Status: COMPLETE
|
||||
|
||||
### Files Updated: 19 Total
|
||||
|
||||
- **Main Pages**: index.html, about.html, contact.html
|
||||
- **Services**: 5 pages (machine-learning, data-analysis, generative-ai, agentic-ai, automation-flows)
|
||||
- **Industries**: 8 pages (finance, healthcare, manufacturing, marketing, media-entertainment, travel, retail, case-studies)
|
||||
- **Education**: 3 pages (workshops, individual-trainings, corporate-trainings)
|
||||
|
||||
### 🎯 Core Features Implemented
|
||||
|
||||
#### 1. Hamburger Button HTML Structure
|
||||
|
||||
```html
|
||||
<button class="hamburger-menu" aria-label="Toggle menu">
|
||||
<span class="hamburger-line"></span>
|
||||
<span class="hamburger-line"></span>
|
||||
<span class="hamburger-line"></span>
|
||||
</button>
|
||||
```
|
||||
|
||||
#### 2. Responsive CSS Styling
|
||||
|
||||
- **Breakpoint**: @media (max-width: 768px)
|
||||
- **Mobile Menu**: Full-screen overlay with backdrop blur
|
||||
- **Animation**: Hamburger lines transform to X when active
|
||||
- **Touch-Friendly**: Large tap targets and proper spacing
|
||||
|
||||
#### 3. JavaScript Functionality
|
||||
|
||||
- **File**: menu-dropdown.js
|
||||
- **Toggle**: Click hamburger to open/close menu
|
||||
- **Auto-close**: Menu closes when navigation links are clicked
|
||||
- **Dropdown Support**: Mobile-optimized dropdown menus
|
||||
- **Scroll Lock**: Prevents body scrolling when menu is open
|
||||
|
||||
## 🎨 Design Features
|
||||
|
||||
### Desktop View (>768px)
|
||||
|
||||
- Traditional horizontal navigation bar
|
||||
- Hover effects on navigation links
|
||||
- Standard dropdown menus
|
||||
|
||||
### Mobile View (≤768px)
|
||||
|
||||
- Hamburger icon replaces navigation links
|
||||
- Full-screen mobile menu overlay
|
||||
- Animated hamburger-to-X icon transformation
|
||||
- Vertical dropdown menus with touch-friendly spacing
|
||||
|
||||
## 🛠️ Technical Implementation
|
||||
|
||||
### CSS Architecture
|
||||
|
||||
```css
|
||||
.hamburger-menu {
|
||||
display: none; /* Hidden on desktop */
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
/* Hamburger styling */
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hamburger-menu {
|
||||
display: flex; /* Show on mobile */
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
position: fixed;
|
||||
left: -100%; /* Hidden by default */
|
||||
/* Full-screen overlay styling */
|
||||
}
|
||||
|
||||
.nav-links.active {
|
||||
left: 0; /* Slide in when active */
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### JavaScript Events
|
||||
|
||||
```javascript
|
||||
// Toggle hamburger menu
|
||||
hamburgerMenu.addEventListener("click", function () {
|
||||
hamburgerMenu.classList.toggle("active");
|
||||
navLinks.classList.toggle("active");
|
||||
|
||||
// Prevent body scrolling
|
||||
document.body.style.overflow = navLinks.classList.contains("active")
|
||||
? "hidden"
|
||||
: "";
|
||||
});
|
||||
```
|
||||
|
||||
## 📱 Mobile UX Enhancements
|
||||
|
||||
### Visual Effects
|
||||
|
||||
- **Slide Animation**: Menu slides in from left with smooth 0.3s transition
|
||||
- **Backdrop Blur**: Background content blurred for focus
|
||||
- **Icon Animation**: Hamburger lines morph into X with CSS transforms
|
||||
- **Overlay Gradient**: Beautiful gradient background with transparency
|
||||
|
||||
### Interaction Design
|
||||
|
||||
- **Touch Optimization**: 44px minimum touch targets
|
||||
- **Auto-Close**: Tapping navigation links closes the menu
|
||||
- **Dropdown Integration**: Mobile dropdowns expand vertically
|
||||
- **Scroll Prevention**: Body scroll locked when menu is open
|
||||
|
||||
## 🧪 Testing & Validation
|
||||
|
||||
### Automated Validation
|
||||
|
||||
- **Script**: validate-hamburger-menu.ps1
|
||||
- **Coverage**: 19/19 files pass validation
|
||||
- **Checks**: HTML structure, CSS implementation, JavaScript integration
|
||||
|
||||
### Manual Testing Points
|
||||
|
||||
1. **Responsive Breakpoint**: Verify hamburger appears at ≤768px width
|
||||
2. **Animation**: Confirm smooth hamburger-to-X transformation
|
||||
3. **Menu Overlay**: Test full-screen menu with backdrop blur
|
||||
4. **Touch Interaction**: Verify large tap targets work on mobile
|
||||
5. **Dropdown Functionality**: Test dropdown menus in mobile view
|
||||
6. **Auto-Close**: Confirm menu closes when links are clicked
|
||||
7. **Cross-Page Consistency**: Test across all 19 pages
|
||||
|
||||
### Browser Compatibility
|
||||
|
||||
- ✅ Modern browsers (Chrome, Firefox, Safari, Edge)
|
||||
- ✅ Mobile browsers (iOS Safari, Chrome Mobile)
|
||||
- ✅ CSS3 and ES6+ features utilized
|
||||
|
||||
## 🚀 Performance Impact
|
||||
|
||||
### Minimal Overhead
|
||||
|
||||
- **CSS**: ~50 lines of additional mobile styles
|
||||
- **JavaScript**: ~50 lines of event handling code
|
||||
- **HTML**: 4 additional elements per page (button + 3 spans)
|
||||
|
||||
### Optimization Features
|
||||
|
||||
- **CSS Transitions**: Hardware-accelerated animations
|
||||
- **Event Delegation**: Efficient click handling
|
||||
- **Conditional Loading**: Mobile styles only apply below 768px
|
||||
|
||||
## 📊 Accessibility Features
|
||||
|
||||
### ARIA Support
|
||||
|
||||
- `aria-label="Toggle menu"` on hamburger button
|
||||
- Semantic HTML structure maintained
|
||||
- Keyboard navigation preserved
|
||||
|
||||
### Screen Reader Friendly
|
||||
|
||||
- Descriptive button labels
|
||||
- Proper heading hierarchy maintained
|
||||
- Focus management for menu interactions
|
||||
|
||||
## 🎯 Key Benefits Delivered
|
||||
|
||||
### User Experience
|
||||
|
||||
- **Mobile-First**: Modern responsive navigation pattern
|
||||
- **Touch-Friendly**: Optimized for finger navigation
|
||||
- **Fast Access**: Single-tap menu access on mobile
|
||||
- **Consistent**: Uniform experience across all pages
|
||||
|
||||
### Technical Benefits
|
||||
|
||||
- **Maintainable**: Clean separation of HTML, CSS, and JavaScript
|
||||
- **Scalable**: Easy to add new navigation items
|
||||
- **Performance**: Lightweight implementation
|
||||
- **Standards**: Follows modern web development best practices
|
||||
|
||||
## 📝 Implementation Timeline
|
||||
|
||||
1. **HTML Structure**: Added hamburger button to all 19 pages
|
||||
2. **CSS Styling**: Implemented responsive mobile menu styles
|
||||
3. **JavaScript**: Developed menu toggle and dropdown functionality
|
||||
4. **PowerShell Automation**: Created script to update multiple files
|
||||
5. **Manual Fixes**: Updated 3 service pages with missing elements
|
||||
6. **Testing**: Comprehensive validation across all pages
|
||||
7. **Documentation**: Created test page and validation scripts
|
||||
|
||||
## 🔧 Files Created/Modified
|
||||
|
||||
### New Files
|
||||
|
||||
- `hamburger-test.html` - Comprehensive test page
|
||||
- `validate-hamburger-menu.ps1` - Validation script
|
||||
- `add-hamburger-menu.ps1` - Initial automation script
|
||||
|
||||
### Modified Files
|
||||
|
||||
- `css/style.css` - Added mobile responsive styles
|
||||
- `js/menu-dropdown.js` - Enhanced with hamburger functionality
|
||||
- All 19 HTML pages - Added hamburger button structure
|
||||
|
||||
## 🎉 Project Completion Status
|
||||
|
||||
### ✅ All Requirements Met
|
||||
|
||||
- [x] Hamburger menu appears on mobile devices (≤768px)
|
||||
- [x] Navigation links hidden behind hamburger icon
|
||||
- [x] Smooth animations and transitions
|
||||
- [x] Touch-friendly mobile interface
|
||||
- [x] Full-screen overlay menu
|
||||
- [x] Dropdown menu integration
|
||||
- [x] Auto-close functionality
|
||||
- [x] Cross-page consistency
|
||||
- [x] Accessibility compliance
|
||||
- [x] Performance optimization
|
||||
|
||||
### 🎯 Success Metrics
|
||||
|
||||
- **Coverage**: 100% of pages updated (19/19)
|
||||
- **Validation**: 100% pass rate on automated checks
|
||||
- **Responsiveness**: Works perfectly at mobile breakpoint
|
||||
- **Functionality**: All features working as designed
|
||||
- **UX**: Smooth, modern mobile navigation experience
|
||||
|
||||
## 🚀 Optional Future Enhancements
|
||||
|
||||
### Potential Improvements
|
||||
|
||||
1. **Swipe Gestures**: Add touch swipe to close menu
|
||||
2. **Keyboard Navigation**: Enhanced keyboard accessibility
|
||||
3. **Animation Variants**: Different hamburger animation styles
|
||||
4. **Close Button**: Optional dedicated close button in menu
|
||||
5. **Menu Themes**: Different color schemes for mobile menu
|
||||
6. **Micro-Interactions**: Additional hover/tap feedback
|
||||
|
||||
### Advanced Features
|
||||
|
||||
1. **Progressive Web App**: Service worker integration
|
||||
2. **Voice Navigation**: Voice command support
|
||||
3. **Gesture Controls**: Advanced touch gestures
|
||||
4. **Analytics**: Track mobile menu usage
|
||||
5. **A/B Testing**: Test different menu layouts
|
||||
|
||||
---
|
||||
|
||||
## 🎊 IMPLEMENTATION COMPLETE!
|
||||
|
||||
The hamburger menu has been successfully implemented across the entire Gyannetra website, providing a modern, responsive, and user-friendly mobile navigation experience. All 19 pages now feature a consistent, touch-optimized navigation system that enhances the mobile user experience while maintaining full functionality across all device sizes.
|
||||
|
||||
**Test the implementation**: http://localhost:8080/hamburger-test.html
|
||||
|
||||
---
|
||||
|
||||
_Hamburger Menu Implementation - Completed May 27, 2025_
|
||||
@@ -3,9 +3,60 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Case Studies - Gyannetra</title> <link rel="stylesheet" href="../css/style.css">
|
||||
<title>Case Studies - Gyannetra</title>
|
||||
<link rel="stylesheet" href="../css/style.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"> <style>
|
||||
<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">
|
||||
|
||||
<!-- Navbar scroll effect styles -->
|
||||
<style>
|
||||
.site-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
background: transparent !important;
|
||||
backdrop-filter: blur(0px);
|
||||
-webkit-backdrop-filter: blur(0px);
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border-bottom: 1px solid transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.site-header.scrolled {
|
||||
background: transparent !important;
|
||||
backdrop-filter: blur(30px);
|
||||
-webkit-backdrop-filter: blur(30px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
padding: 1rem 2rem;
|
||||
max-width: none !important;
|
||||
margin: 0 !important;
|
||||
background: transparent !important;
|
||||
border-radius: 0 !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Override any existing navbar container styles */
|
||||
.site-header .navbar,
|
||||
.site-header .container,
|
||||
.navbar .container {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
/* Ensure body has top padding to account for fixed navbar */
|
||||
body {
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
/* Case Studies Card Styles */
|
||||
|
||||
.articles-grid {
|
||||
@@ -72,12 +123,11 @@
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.case-studies-hero h1,
|
||||
.case-studies-hero h1,
|
||||
.case-studies-filters h2 {
|
||||
font-size: 2.2rem;
|
||||
margin-bottom: 30px;
|
||||
color: var(--primary-color);
|
||||
/* Inherit the beautiful gradient and glow from main h2 styling */
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
@@ -209,11 +259,19 @@
|
||||
</div>
|
||||
<!-- NAVBAR -->
|
||||
<header class="site-header">
|
||||
<nav class="navbar container">
|
||||
<a href="../index.html" class="logo">
|
||||
<nav class="navbar">
|
||||
<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">
|
||||
|
||||
<!-- Hamburger menu button for mobile -->
|
||||
<button class="hamburger-menu" aria-label="Toggle menu">
|
||||
<span class="hamburger-line"></span>
|
||||
<span class="hamburger-line"></span>
|
||||
<span class="hamburger-line"></span>
|
||||
</button>
|
||||
|
||||
<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>
|
||||
@@ -346,12 +404,11 @@
|
||||
<li><a href="../about.html">About Us</a></li>
|
||||
<li><a href="../contact.html">Contact Us</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-col">
|
||||
</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-map-marker-alt"></i> Pune, Maharashtra, India</p></li>
|
||||
<li><p><i class="fas fa-phone"></i>+91 89491-35299</p></li>
|
||||
<li><p><i class="fas fa-envelope"></i> <a href="mailto:info@gyannetra.com">info@gyannetra.com</a></p></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -370,13 +427,48 @@
|
||||
</div>
|
||||
</footer>
|
||||
<script src="../js/main.js" defer></script>
|
||||
<script src="../js/menu-dropdown.js" defer></script>
|
||||
<script src="../js/form-subscribe.js" defer></script>
|
||||
<script src="../js/unified-neural-interactions.js" defer></script>
|
||||
<script src="../js/tech-marquee.js" defer></script>
|
||||
<script src="../js/data-node-interactions.js" defer></script>
|
||||
<script src="../js/menu-dropdown.js" defer></script>
|
||||
<script src="../js/form-subscribe.js" defer></script>
|
||||
<script src="../js/unified-neural-interactions.js" defer></script>
|
||||
<script src="../js/tech-marquee.js" defer></script>
|
||||
<script src="../js/data-node-interactions.js" defer></script>
|
||||
|
||||
<!-- Navbar scroll effect script -->
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const header = document.querySelector('.site-header');
|
||||
|
||||
function handleScroll() {
|
||||
const currentScrollY = window.scrollY;
|
||||
|
||||
if (currentScrollY > 30) {
|
||||
header.classList.add('scrolled');
|
||||
} else {
|
||||
header.classList.remove('scrolled');
|
||||
}
|
||||
}
|
||||
|
||||
// Throttle scroll events for better performance
|
||||
let ticking = false;
|
||||
function onScroll() {
|
||||
if (!ticking) {
|
||||
requestAnimationFrame(function() {
|
||||
handleScroll();
|
||||
ticking = false;
|
||||
});
|
||||
ticking = true;
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', onScroll, { passive: true });
|
||||
|
||||
// Initial check
|
||||
handleScroll();
|
||||
});
|
||||
</script>
|
||||
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -3,12 +3,65 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||
<title>AI in Finance - Gyannetra</title> <link rel="stylesheet" href="../css/style.css" />
|
||||
<title>AI in Finance - Gyannetra</title>
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
<link rel="stylesheet" href="../css/benefits-cards.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"> <style>
|
||||
<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">
|
||||
|
||||
<!-- Navbar scroll effect styles -->
|
||||
<style>
|
||||
.site-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
background: transparent !important;
|
||||
backdrop-filter: blur(0px);
|
||||
-webkit-backdrop-filter: blur(0px);
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border-bottom: 1px solid transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.site-header.scrolled {
|
||||
background: transparent !important;
|
||||
backdrop-filter: blur(30px);
|
||||
-webkit-backdrop-filter: blur(30px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
padding: 1rem 2rem;
|
||||
max-width: none !important;
|
||||
margin: 0 !important;
|
||||
background: transparent !important;
|
||||
border-radius: 0 !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Override any existing navbar container styles */
|
||||
.site-header .navbar,
|
||||
.site-header .container,
|
||||
.navbar .container {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
/* Ensure body has top padding to account for fixed navbar */
|
||||
body {
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
/* Finance Page Specific Styles - Using standardized theme class */
|
||||
body {
|
||||
/* You can add body-specific styles here if needed */
|
||||
}
|
||||
|
||||
.finance-page-container .hero-section.finance-hero {
|
||||
text-align: center;
|
||||
@@ -16,12 +69,10 @@
|
||||
background: linear-gradient(rgba(10, 20, 40, 0.8), rgba(10, 20, 40, 0.95)), url('../assets/finance_hero_bg.jpg') no-repeat center center;
|
||||
background-size: cover;
|
||||
border-bottom: 2px solid var(--primary-color-glow);
|
||||
}
|
||||
|
||||
.finance-page-container .hero-section.finance-hero h1 {
|
||||
} .finance-page-container .hero-section.finance-hero h1 {
|
||||
font-size: 3.2rem; /* Slightly adjusted */
|
||||
margin-bottom: 15px;
|
||||
color: #fff; /* White for better contrast on dark bg */
|
||||
/* Inherit the beautiful gradient and glow from main h1 styling */
|
||||
text-shadow: 0 2px 10px rgba(0,0,0,0.7);
|
||||
}
|
||||
|
||||
@@ -242,18 +293,26 @@
|
||||
<div class="overlay"></div>
|
||||
<div class="noise"></div>
|
||||
</div>
|
||||
<!-- NAVBAR -->
|
||||
<!-- NAVBAR -->
|
||||
<header class="site-header">
|
||||
<nav class="navbar container">
|
||||
<nav class="navbar">
|
||||
<script src="../js/dropdown.js"></script>
|
||||
<a href="../index.html" class="logo">
|
||||
<img src="../assets/Company Icons/GN Name logo.svg" alt="Gyannetra Logo" class="logo-img">
|
||||
</a>
|
||||
|
||||
<!-- Hamburger menu button for mobile -->
|
||||
<button class="hamburger-menu" aria-label="Toggle menu">
|
||||
<span class="hamburger-line"></span>
|
||||
<span class="hamburger-line"></span>
|
||||
<span class="hamburger-line"></span>
|
||||
</button>
|
||||
|
||||
<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/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 Analysis</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>
|
||||
@@ -396,12 +455,11 @@
|
||||
<li><a href="../about.html">About Us</a></li>
|
||||
<li><a href="../contact.html">Contact Us</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-col">
|
||||
</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-map-marker-alt"></i> Pune, Maharashtra, India</p></li>
|
||||
<li><p><i class="fas fa-phone"></i>+91 89491-35299</p></li>
|
||||
<li><p><i class="fas fa-envelope"></i> <a href="mailto:info@gyannetra.com">info@gyannetra.com</a></p></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -427,6 +485,40 @@
|
||||
<script src="../js/tech-marquee.js" defer></script>
|
||||
<script src="../js/data-node-interactions.js" defer></script>
|
||||
|
||||
<!-- Navbar scroll effect script -->
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const header = document.querySelector('.site-header');
|
||||
|
||||
function handleScroll() {
|
||||
const currentScrollY = window.scrollY;
|
||||
|
||||
if (currentScrollY > 30) {
|
||||
header.classList.add('scrolled');
|
||||
} else {
|
||||
header.classList.remove('scrolled');
|
||||
}
|
||||
}
|
||||
|
||||
// Throttle scroll events for better performance
|
||||
let ticking = false;
|
||||
function onScroll() {
|
||||
if (!ticking) {
|
||||
requestAnimationFrame(function() {
|
||||
handleScroll();
|
||||
ticking = false;
|
||||
});
|
||||
ticking = true;
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', onScroll, { passive: true });
|
||||
|
||||
// Initial check
|
||||
handleScroll();
|
||||
});
|
||||
</script>
|
||||
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
@@ -3,10 +3,61 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||
<title>Healthcare - Gyannetra</title> <link rel="stylesheet" href="../css/style.css" />
|
||||
<title>Healthcare - Gyannetra</title>
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
<link rel="stylesheet" href="../css/benefits-cards.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"> <style>
|
||||
<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">
|
||||
|
||||
<!-- Navbar scroll effect styles -->
|
||||
<style>
|
||||
.site-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
background: transparent !important;
|
||||
backdrop-filter: blur(0px);
|
||||
-webkit-backdrop-filter: blur(0px);
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border-bottom: 1px solid transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.site-header.scrolled {
|
||||
background: transparent !important;
|
||||
backdrop-filter: blur(30px);
|
||||
-webkit-backdrop-filter: blur(30px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
padding: 1rem 2rem;
|
||||
max-width: none !important;
|
||||
margin: 0 !important;
|
||||
background: transparent !important;
|
||||
border-radius: 0 !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Override any existing navbar container styles */
|
||||
.site-header .navbar,
|
||||
.site-header .container,
|
||||
.navbar .container {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
/* Ensure body has top padding to account for fixed navbar */
|
||||
body {
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
/* Healthcare Card Structure Styles */
|
||||
|
||||
.solutions-grid {
|
||||
@@ -117,12 +168,10 @@
|
||||
background-color: var(--primary-color-hover);
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
} .section-heading {
|
||||
font-size: 2.2rem;
|
||||
margin-bottom: 45px;
|
||||
color: var(--primary-color);
|
||||
/* Inherit the beautiful gradient and glow from main h2 styling */
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
@@ -160,10 +209,18 @@
|
||||
</div>
|
||||
<!-- NAVBAR -->
|
||||
<header class="site-header">
|
||||
<nav class="navbar container">
|
||||
<nav class="navbar">
|
||||
<a href="../index.html" class="logo">
|
||||
<img src="../assets/Company Icons/GN Name logo.svg" alt="Gyannetra Logo" class="logo-img">
|
||||
</a>
|
||||
|
||||
<!-- Hamburger menu button for mobile -->
|
||||
<button class="hamburger-menu" aria-label="Toggle menu">
|
||||
<span class="hamburger-line"></span>
|
||||
<span class="hamburger-line"></span>
|
||||
<span class="hamburger-line"></span>
|
||||
</button>
|
||||
|
||||
<ul class="nav-links">
|
||||
<li class="dropdown"><a href="#" class="nav-link">Services ▾</a>
|
||||
<ul class="dropdown-menu services-dropdown">
|
||||
@@ -342,12 +399,11 @@
|
||||
<li><a href="../about.html">About Us</a></li>
|
||||
<li><a href="../contact.html">Contact Us</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-col">
|
||||
</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-map-marker-alt"></i> Pune, Maharashtra, India</p></li>
|
||||
<li><p><i class="fas fa-phone"></i>+91 89491-35299</p></li>
|
||||
<li><p><i class="fas fa-envelope"></i> <a href="mailto:info@gyannetra.com">info@gyannetra.com</a></p></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -372,7 +428,42 @@
|
||||
<script src="../js/tech-marquee.js" defer></script>
|
||||
<script src="../js/data-node-interactions.js" defer></script>
|
||||
|
||||
<!-- Navbar scroll effect script -->
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const header = document.querySelector('.site-header');
|
||||
|
||||
function handleScroll() {
|
||||
const currentScrollY = window.scrollY;
|
||||
|
||||
if (currentScrollY > 30) {
|
||||
header.classList.add('scrolled');
|
||||
} else {
|
||||
header.classList.remove('scrolled');
|
||||
}
|
||||
}
|
||||
|
||||
// Throttle scroll events for better performance
|
||||
let ticking = false;
|
||||
function onScroll() {
|
||||
if (!ticking) {
|
||||
requestAnimationFrame(function() {
|
||||
handleScroll();
|
||||
ticking = false;
|
||||
});
|
||||
ticking = true;
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', onScroll, { passive: true });
|
||||
|
||||
// Initial check
|
||||
handleScroll();
|
||||
});
|
||||
</script>
|
||||
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -3,10 +3,61 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||
<title>AI in Manufacturing - Gyannetra</title> <link rel="stylesheet" href="../css/style.css" />
|
||||
<title>AI in Manufacturing - Gyannetra</title>
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
<link rel="stylesheet" href="../css/benefits-cards.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"> <style>
|
||||
<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">
|
||||
|
||||
<!-- Navbar scroll effect styles -->
|
||||
<style>
|
||||
.site-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
background: transparent !important;
|
||||
backdrop-filter: blur(0px);
|
||||
-webkit-backdrop-filter: blur(0px);
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border-bottom: 1px solid transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.site-header.scrolled {
|
||||
background: transparent !important;
|
||||
backdrop-filter: blur(30px);
|
||||
-webkit-backdrop-filter: blur(30px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
padding: 1rem 2rem;
|
||||
max-width: none !important;
|
||||
margin: 0 !important;
|
||||
background: transparent !important;
|
||||
border-radius: 0 !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Override any existing navbar container styles */
|
||||
.site-header .navbar,
|
||||
.site-header .container,
|
||||
.navbar .container {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
/* Ensure body has top padding to account for fixed navbar */
|
||||
body {
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
/* Manufacturing Page Specific Styles */
|
||||
|
||||
/* Hero section */
|
||||
@@ -16,12 +67,10 @@
|
||||
background: linear-gradient(rgba(10, 20, 40, 0.8), rgba(10, 20, 40, 0.95)), url('../assets/manufacturing_hero_bg.jpg') no-repeat center center;
|
||||
background-size: cover;
|
||||
border-bottom: 2px solid var(--primary-color-glow);
|
||||
}
|
||||
|
||||
.manufacturing-hero h1 {
|
||||
} .manufacturing-hero h1 {
|
||||
font-size: 3.2rem;
|
||||
margin-bottom: 15px;
|
||||
color: #fff;
|
||||
/* Inherit the beautiful gradient and glow from main h1 styling */
|
||||
text-shadow: 0 2px 10px rgba(0,0,0,0.7);
|
||||
}
|
||||
|
||||
@@ -197,10 +246,18 @@
|
||||
</div>
|
||||
<!-- NAVBAR -->
|
||||
<header class="site-header">
|
||||
<nav class="navbar container">
|
||||
<nav class="navbar">
|
||||
<a href="../index.html" class="logo">
|
||||
<img src="../assets/Company Icons/GN Name logo.svg" alt="Gyannetra Logo" class="logo-img">
|
||||
</a>
|
||||
|
||||
<!-- Hamburger menu button for mobile -->
|
||||
<button class="hamburger-menu" aria-label="Toggle menu">
|
||||
<span class="hamburger-line"></span>
|
||||
<span class="hamburger-line"></span>
|
||||
<span class="hamburger-line"></span>
|
||||
</button>
|
||||
|
||||
<ul class="nav-links">
|
||||
<li class="dropdown"><a href="#" class="nav-link">Services ▾</a>
|
||||
<ul class="dropdown-menu services-dropdown">
|
||||
@@ -351,12 +408,11 @@
|
||||
<li><a href="../about.html">About Us</a></li>
|
||||
<li><a href="../contact.html">Contact Us</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-col">
|
||||
</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-map-marker-alt"></i> Pune, Maharashtra, India</p></li>
|
||||
<li><p><i class="fas fa-phone"></i>+91 89491-35299</p></li>
|
||||
<li><p><i class="fas fa-envelope"></i> <a href="mailto:info@gyannetra.com">info@gyannetra.com</a></p></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -381,7 +437,42 @@
|
||||
<script src="../js/tech-marquee.js" defer></script>
|
||||
<script src="../js/data-node-interactions.js" defer></script>
|
||||
|
||||
<!-- Navbar scroll effect script -->
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const header = document.querySelector('.site-header');
|
||||
|
||||
function handleScroll() {
|
||||
const currentScrollY = window.scrollY;
|
||||
|
||||
if (currentScrollY > 30) {
|
||||
header.classList.add('scrolled');
|
||||
} else {
|
||||
header.classList.remove('scrolled');
|
||||
}
|
||||
}
|
||||
|
||||
// Throttle scroll events for better performance
|
||||
let ticking = false;
|
||||
function onScroll() {
|
||||
if (!ticking) {
|
||||
requestAnimationFrame(function() {
|
||||
handleScroll();
|
||||
ticking = false;
|
||||
});
|
||||
ticking = true;
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', onScroll, { passive: true });
|
||||
|
||||
// Initial check
|
||||
handleScroll();
|
||||
});
|
||||
</script>
|
||||
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -3,10 +3,61 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Marketing - Gyannetra</title> <link rel="stylesheet" href="../css/style.css">
|
||||
<title>Marketing - Gyannetra</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<link rel="stylesheet" href="../css/benefits-cards.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">
|
||||
<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">
|
||||
|
||||
<!-- Navbar scroll effect styles -->
|
||||
<style>
|
||||
.site-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
background: transparent !important;
|
||||
backdrop-filter: blur(0px);
|
||||
-webkit-backdrop-filter: blur(0px);
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border-bottom: 1px solid transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.site-header.scrolled {
|
||||
background: transparent !important;
|
||||
backdrop-filter: blur(30px);
|
||||
-webkit-backdrop-filter: blur(30px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
padding: 1rem 2rem;
|
||||
max-width: none !important;
|
||||
margin: 0 !important;
|
||||
background: transparent !important;
|
||||
border-radius: 0 !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Override any existing navbar container styles */
|
||||
.site-header .navbar,
|
||||
.site-header .container,
|
||||
.navbar .container {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
/* Ensure body has top padding to account for fixed navbar */
|
||||
body {
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
/* Marketing Card Structure Styles */
|
||||
|
||||
/* Marketing hero section styling */
|
||||
@@ -28,11 +79,10 @@
|
||||
min-width: 300px;
|
||||
padding-right: 2rem;
|
||||
}
|
||||
|
||||
.marketing-hero-content h1 {
|
||||
.marketing-hero-content h1 {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 1.5rem;
|
||||
color: var(--primary-color);
|
||||
/* Inherit the beautiful gradient and glow from main h1 styling */
|
||||
}
|
||||
.marketing-hero-content p {
|
||||
font-size: 1.2rem;
|
||||
@@ -153,14 +203,12 @@
|
||||
background-color: var(--primary-color-hover);
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.features-section h2,
|
||||
} .features-section h2,
|
||||
.advantage-section h2,
|
||||
.blogs-section h2 {
|
||||
font-size: 2.2rem;
|
||||
margin-bottom: 45px;
|
||||
color: var(--primary-color);
|
||||
/* Inherit the beautiful gradient and glow from main h2 styling */
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
@@ -216,10 +264,18 @@
|
||||
</div>
|
||||
|
||||
<header class="site-header">
|
||||
<nav class="navbar container">
|
||||
<nav class="navbar">
|
||||
<a href="../index.html" class="logo">
|
||||
<img src="../assets/Company Icons/GN Name logo.svg" alt="Gyannetra Logo" class="logo-img">
|
||||
</a>
|
||||
|
||||
<!-- Hamburger menu button for mobile -->
|
||||
<button class="hamburger-menu" aria-label="Toggle menu">
|
||||
<span class="hamburger-line"></span>
|
||||
<span class="hamburger-line"></span>
|
||||
<span class="hamburger-line"></span>
|
||||
</button>
|
||||
|
||||
<ul class="nav-links">
|
||||
<li class="dropdown"><a href="#" class="nav-link">Services ▾</a>
|
||||
<ul class="dropdown-menu services-dropdown">
|
||||
@@ -255,7 +311,9 @@
|
||||
<li><a href="../contact.html" class="nav-link">Contact Us</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header> <main>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<!-- HERO SECTION -->
|
||||
<section class="marketing-hero">
|
||||
<div class="container">
|
||||
@@ -390,12 +448,11 @@
|
||||
<li><a href="../about.html">About Us</a></li>
|
||||
<li><a href="../contact.html">Contact Us</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-col">
|
||||
</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-map-marker-alt"></i> Pune, Maharashtra, India</p></li>
|
||||
<li><p><i class="fas fa-phone"></i>+91 89491-35299</p></li>
|
||||
<li><p><i class="fas fa-envelope"></i> <a href="mailto:info@gyannetra.com">info@gyannetra.com</a></p></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -414,13 +471,48 @@
|
||||
</div>
|
||||
</footer>
|
||||
<script src="../js/main.js" defer></script>
|
||||
<script src="../js/menu-dropdown.js" defer></script>
|
||||
<script src="../js/form-subscribe.js" defer></script>
|
||||
<script src="../js/unified-neural-interactions.js" defer></script>
|
||||
<script src="../js/tech-marquee.js" defer></script>
|
||||
<script src="../js/data-node-interactions.js" defer></script>
|
||||
<script src="../js/menu-dropdown.js" defer></script>
|
||||
<script src="../js/form-subscribe.js" defer></script>
|
||||
<script src="../js/unified-neural-interactions.js" defer></script>
|
||||
<script src="../js/tech-marquee.js" defer></script>
|
||||
<script src="../js/data-node-interactions.js" defer></script>
|
||||
|
||||
<!-- Navbar scroll effect script -->
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const header = document.querySelector('.site-header');
|
||||
|
||||
function handleScroll() {
|
||||
const currentScrollY = window.scrollY;
|
||||
|
||||
if (currentScrollY > 30) {
|
||||
header.classList.add('scrolled');
|
||||
} else {
|
||||
header.classList.remove('scrolled');
|
||||
}
|
||||
}
|
||||
|
||||
// Throttle scroll events for better performance
|
||||
let ticking = false;
|
||||
function onScroll() {
|
||||
if (!ticking) {
|
||||
requestAnimationFrame(function() {
|
||||
handleScroll();
|
||||
ticking = false;
|
||||
});
|
||||
ticking = true;
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', onScroll, { passive: true });
|
||||
|
||||
// Initial check
|
||||
handleScroll();
|
||||
});
|
||||
</script>
|
||||
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -16,12 +16,10 @@
|
||||
background: linear-gradient(rgba(10, 20, 40, 0.8), rgba(10, 20, 40, 0.95)), url('../assets/media_hero_bg.jpg') no-repeat center center;
|
||||
background-size: cover;
|
||||
border-bottom: 2px solid var(--primary-color-glow);
|
||||
}
|
||||
|
||||
.media-hero h1 {
|
||||
} .media-hero h1 {
|
||||
font-size: 3.2rem;
|
||||
margin-bottom: 15px;
|
||||
color: #fff;
|
||||
/* Inherit the beautiful gradient and glow from main h1 styling */
|
||||
text-shadow: 0 2px 10px rgba(0,0,0,0.7);
|
||||
}
|
||||
|
||||
@@ -208,6 +206,14 @@
|
||||
<a href="../index.html" class="logo">
|
||||
<img src="../assets/Company Icons/GN Name logo.svg" alt="Gyannetra Logo" class="logo-img">
|
||||
</a>
|
||||
|
||||
<!-- Hamburger menu button for mobile -->
|
||||
<button class="hamburger-menu" aria-label="Toggle menu">
|
||||
<span class="hamburger-line"></span>
|
||||
<span class="hamburger-line"></span>
|
||||
<span class="hamburger-line"></span>
|
||||
</button>
|
||||
|
||||
<ul class="nav-links">
|
||||
<li class="dropdown"><a href="#" class="nav-link">Services ▾</a>
|
||||
<ul class="dropdown-menu services-dropdown">
|
||||
@@ -364,12 +370,11 @@
|
||||
<li><a href="../about.html">About Us</a></li>
|
||||
<li><a href="../contact.html">Contact Us</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-col">
|
||||
</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-map-marker-alt"></i> Pune, Maharashtra, India</p></li>
|
||||
<li><p><i class="fas fa-phone"></i>+91 89491-35299</p></li>
|
||||
<li><p><i class="fas fa-envelope"></i> <a href="mailto:info@gyannetra.com">info@gyannetra.com</a></p></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -398,3 +403,4 @@
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -3,10 +3,61 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||
<title>AI in Retail - Gyannetra</title> <link rel="stylesheet" href="../css/style.css" />
|
||||
<title>AI in Retail - Gyannetra</title>
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
<link rel="stylesheet" href="../css/benefits-cards.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"> <style>
|
||||
<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">
|
||||
|
||||
<!-- Navbar scroll effect styles -->
|
||||
<style>
|
||||
.site-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
background: transparent !important;
|
||||
backdrop-filter: blur(0px);
|
||||
-webkit-backdrop-filter: blur(0px);
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border-bottom: 1px solid transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.site-header.scrolled {
|
||||
background: transparent !important;
|
||||
backdrop-filter: blur(30px);
|
||||
-webkit-backdrop-filter: blur(30px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
padding: 1rem 2rem;
|
||||
max-width: none !important;
|
||||
margin: 0 !important;
|
||||
background: transparent !important;
|
||||
border-radius: 0 !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Override any existing navbar container styles */
|
||||
.site-header .navbar,
|
||||
.site-header .container,
|
||||
.navbar .container {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
/* Ensure body has top padding to account for fixed navbar */
|
||||
body {
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
/* Retail Page Specific Styles */
|
||||
|
||||
/* Hero section */
|
||||
@@ -16,12 +67,10 @@
|
||||
background: linear-gradient(rgba(10, 20, 40, 0.8), rgba(10, 20, 40, 0.95)), url('../assets/retail_hero_bg.jpg') no-repeat center center;
|
||||
background-size: cover;
|
||||
border-bottom: 2px solid var(--primary-color-glow);
|
||||
}
|
||||
|
||||
.retail-hero h1 {
|
||||
} .retail-hero h1 {
|
||||
font-size: 3.2rem;
|
||||
margin-bottom: 15px;
|
||||
color: #fff;
|
||||
/* Inherit the beautiful gradient and glow from main h1 styling */
|
||||
text-shadow: 0 2px 10px rgba(0,0,0,0.7);
|
||||
}
|
||||
|
||||
@@ -292,10 +341,18 @@
|
||||
|
||||
<!-- NAVBAR -->
|
||||
<header class="site-header">
|
||||
<nav class="navbar container">
|
||||
<nav class="navbar">
|
||||
<a href="../index.html" class="logo">
|
||||
<img src="../assets/Company Icons/GN Name logo.svg" alt="Gyannetra Logo" class="logo-img">
|
||||
</a>
|
||||
|
||||
<!-- Hamburger menu button for mobile -->
|
||||
<button class="hamburger-menu" aria-label="Toggle menu">
|
||||
<span class="hamburger-line"></span>
|
||||
<span class="hamburger-line"></span>
|
||||
<span class="hamburger-line"></span>
|
||||
</button>
|
||||
|
||||
<ul class="nav-links">
|
||||
<li class="dropdown"><a href="#" class="nav-link">Services ▾</a>
|
||||
<ul class="dropdown-menu services-dropdown">
|
||||
@@ -454,12 +511,11 @@
|
||||
<li><a href="../about.html">About Us</a></li>
|
||||
<li><a href="../contact.html">Contact Us</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-col">
|
||||
</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-map-marker-alt"></i> Pune, Maharashtra, India</p></li>
|
||||
<li><p><i class="fas fa-phone"></i>+91 89491-35299</p></li>
|
||||
<li><p><i class="fas fa-envelope"></i> <a href="mailto:info@gyannetra.com">info@gyannetra.com</a></p></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -484,7 +540,42 @@
|
||||
<script src="../js/tech-marquee.js" defer></script>
|
||||
<script src="../js/data-node-interactions.js" defer></script>
|
||||
|
||||
<!-- Navbar scroll effect script -->
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const header = document.querySelector('.site-header');
|
||||
|
||||
function handleScroll() {
|
||||
const currentScrollY = window.scrollY;
|
||||
|
||||
if (currentScrollY > 30) {
|
||||
header.classList.add('scrolled');
|
||||
} else {
|
||||
header.classList.remove('scrolled');
|
||||
}
|
||||
}
|
||||
|
||||
// Throttle scroll events for better performance
|
||||
let ticking = false;
|
||||
function onScroll() {
|
||||
if (!ticking) {
|
||||
requestAnimationFrame(function() {
|
||||
handleScroll();
|
||||
ticking = false;
|
||||
});
|
||||
ticking = true;
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', onScroll, { passive: true });
|
||||
|
||||
// Initial check
|
||||
handleScroll();
|
||||
});
|
||||
</script>
|
||||
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -3,25 +3,75 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||
<title>AI in Travel - Gyannetra</title> <link rel="stylesheet" href="../css/style.css" />
|
||||
<title>AI in Travel - Gyannetra</title>
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
<link rel="stylesheet" href="../css/benefits-cards.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"> <style>
|
||||
<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">
|
||||
|
||||
<!-- Navbar scroll effect styles -->
|
||||
<style>
|
||||
.site-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
background: transparent !important;
|
||||
backdrop-filter: blur(0px);
|
||||
-webkit-backdrop-filter: blur(0px);
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border-bottom: 1px solid transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.site-header.scrolled {
|
||||
background: transparent !important;
|
||||
backdrop-filter: blur(30px);
|
||||
-webkit-backdrop-filter: blur(30px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
padding: 1rem 2rem;
|
||||
max-width: none !important;
|
||||
margin: 0 !important;
|
||||
background: transparent !important;
|
||||
border-radius: 0 !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Override any existing navbar container styles */
|
||||
.site-header .navbar,
|
||||
.site-header .container,
|
||||
.navbar .container {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
/* Ensure body has top padding to account for fixed navbar */
|
||||
body {
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
/* Travel Page Specific Styles */
|
||||
|
||||
/* Hero section */
|
||||
.travel-hero {
|
||||
text-align: center;
|
||||
padding: 80px 20px 60px;
|
||||
background: linear-gradient(rgba(10, 20, 40, 0.8), rgba(10, 20, 40, 0.95)), url('../assets/travel_hero_bg.jpg') no-repeat center center;
|
||||
padding: 80px 20px 60px; background: linear-gradient(rgba(10, 20, 40, 0.8), rgba(10, 20, 40, 0.95)), url('../assets/travel_hero_bg.jpg') no-repeat center center;
|
||||
background-size: cover;
|
||||
border-bottom: 2px solid var(--primary-color-glow);
|
||||
}
|
||||
|
||||
|
||||
.travel-hero h1 {
|
||||
font-size: 3.2rem;
|
||||
margin-bottom: 15px;
|
||||
color: #fff;
|
||||
/* Inherit the beautiful gradient and glow from main h1 styling */
|
||||
text-shadow: 0 2px 10px rgba(0,0,0,0.7);
|
||||
}
|
||||
|
||||
@@ -203,10 +253,18 @@
|
||||
|
||||
<!-- NAVBAR -->
|
||||
<header class="site-header">
|
||||
<nav class="navbar container">
|
||||
<nav class="navbar">
|
||||
<a href="../index.html" class="logo">
|
||||
<img src="../assets/Company Icons/GN Name logo.svg" alt="Gyannetra Logo" class="logo-img">
|
||||
</a>
|
||||
|
||||
<!-- Hamburger menu button for mobile -->
|
||||
<button class="hamburger-menu" aria-label="Toggle menu">
|
||||
<span class="hamburger-line"></span>
|
||||
<span class="hamburger-line"></span>
|
||||
<span class="hamburger-line"></span>
|
||||
</button>
|
||||
|
||||
<ul class="nav-links">
|
||||
<li class="dropdown"><a href="#" class="nav-link">Services ▾</a>
|
||||
<ul class="dropdown-menu services-dropdown">
|
||||
@@ -367,12 +425,11 @@
|
||||
<li><a href="../about.html">About Us</a></li>
|
||||
<li><a href="../contact.html">Contact Us</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-col">
|
||||
</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-map-marker-alt"></i> Pune, Maharashtra, India</p></li>
|
||||
<li><p><i class="fas fa-phone"></i>+91 89491-35299</p></li>
|
||||
<li><p><i class="fas fa-envelope"></i> <a href="mailto:info@gyannetra.com">info@gyannetra.com</a></p></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -397,7 +454,42 @@
|
||||
<script src="../js/tech-marquee.js" defer></script>
|
||||
<script src="../js/data-node-interactions.js" defer></script>
|
||||
|
||||
<!-- Navbar scroll effect script -->
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const header = document.querySelector('.site-header');
|
||||
|
||||
function handleScroll() {
|
||||
const currentScrollY = window.scrollY;
|
||||
|
||||
if (currentScrollY > 30) {
|
||||
header.classList.add('scrolled');
|
||||
} else {
|
||||
header.classList.remove('scrolled');
|
||||
}
|
||||
}
|
||||
|
||||
// Throttle scroll events for better performance
|
||||
let ticking = false;
|
||||
function onScroll() {
|
||||
if (!ticking) {
|
||||
requestAnimationFrame(function() {
|
||||
handleScroll();
|
||||
ticking = false;
|
||||
});
|
||||
ticking = true;
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', onScroll, { passive: true });
|
||||
|
||||
// Initial check
|
||||
handleScroll();
|
||||
});
|
||||
</script>
|
||||
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -3,10 +3,61 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||
<title>Agentic AI - Gyannetra</title> <link rel="stylesheet" href="../css/style.css" />
|
||||
<title>Agentic AI - Gyannetra</title>
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
<link rel="stylesheet" href="../css/benefits-cards.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"> <style>
|
||||
<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">
|
||||
|
||||
<!-- Navbar scroll effect styles -->
|
||||
<style>
|
||||
.site-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
background: transparent !important;
|
||||
backdrop-filter: blur(0px);
|
||||
-webkit-backdrop-filter: blur(0px);
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border-bottom: 1px solid transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.site-header.scrolled {
|
||||
background: transparent !important;
|
||||
backdrop-filter: blur(30px);
|
||||
-webkit-backdrop-filter: blur(30px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
padding: 1rem 2rem;
|
||||
max-width: none !important;
|
||||
margin: 0 !important;
|
||||
background: transparent !important;
|
||||
border-radius: 0 !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Override any existing navbar container styles */
|
||||
.site-header .navbar,
|
||||
.site-header .container,
|
||||
.navbar .container {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
/* Ensure body has top padding to account for fixed navbar */
|
||||
body {
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
/* Agentic AI Page Specific Styles */
|
||||
|
||||
/* Footer Styles to match automation-flows.html */
|
||||
@@ -78,13 +129,10 @@
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.hero-section h1 { /* Standardized */
|
||||
} .hero-section h1 { /* Standardized */
|
||||
font-size: 3.2rem;
|
||||
margin-bottom: 25px;
|
||||
color: var(--primary-color);
|
||||
text-shadow: 0 2px 10px rgba(0,0,0,0.7);
|
||||
/* Inherit the beautiful gradient and glow from main h1 styling */
|
||||
}
|
||||
|
||||
.hero-section p { /* Standardized */
|
||||
@@ -200,16 +248,14 @@
|
||||
background-color: var(--primary-color-hover);
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.overview-section h2, /* Standardized */
|
||||
} .overview-section h2, /* Standardized */
|
||||
.key-offerings-section h2, /* Standardized */
|
||||
.benefits-section h2, /* Standardized */
|
||||
.blogs-case-studies-section h2, /* Standardized */
|
||||
.related-content-section h2 { /* Standardized */
|
||||
font-size: 2.2rem;
|
||||
margin-bottom: 30px;
|
||||
color: var(--primary-color);
|
||||
/* Inherit the beautiful gradient and glow from main h2 styling */
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
@@ -295,13 +341,20 @@
|
||||
<div class="overlay"></div>
|
||||
<div class="noise"></div>
|
||||
</div>
|
||||
|
||||
<header class="site-header">
|
||||
<nav class="navbar container">
|
||||
<a href="../index.html" class="logo">
|
||||
<nav class="navbar">
|
||||
<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">
|
||||
|
||||
<!-- Hamburger menu button for mobile -->
|
||||
<button class="hamburger-menu" aria-label="Toggle menu">
|
||||
<span class="hamburger-line"></span>
|
||||
<span class="hamburger-line"></span>
|
||||
<span class="hamburger-line"></span>
|
||||
</button>
|
||||
|
||||
<ul class="nav-links">
|
||||
<li class="dropdown"><a href="#" class="nav-link">Services ▾</a> <ul class="dropdown-menu services-dropdown">
|
||||
<li><a href="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="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>
|
||||
@@ -501,12 +554,11 @@
|
||||
<li><a href="../about.html">About Us</a></li>
|
||||
<li><a href="../contact.html">Contact Us</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-col">
|
||||
</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-map-marker-alt"></i> Pune, Maharashtra, India</p></li>
|
||||
<li><p><i class="fas fa-phone"></i>+91 89491-35299</p></li>
|
||||
<li><p><i class="fas fa-envelope"></i> <a href="mailto:info@gyannetra.com">info@gyannetra.com</a></p></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -531,6 +583,40 @@
|
||||
<script src="../js/tech-marquee.js" defer></script>
|
||||
<script src="../js/data-node-interactions.js" defer></script>
|
||||
|
||||
<!-- Navbar scroll effect script -->
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const header = document.querySelector('.site-header');
|
||||
|
||||
function handleScroll() {
|
||||
const currentScrollY = window.scrollY;
|
||||
|
||||
if (currentScrollY > 30) {
|
||||
header.classList.add('scrolled');
|
||||
} else {
|
||||
header.classList.remove('scrolled');
|
||||
}
|
||||
}
|
||||
|
||||
// Throttle scroll events for better performance
|
||||
let ticking = false;
|
||||
function onScroll() {
|
||||
if (!ticking) {
|
||||
requestAnimationFrame(function() {
|
||||
handleScroll();
|
||||
ticking = false;
|
||||
});
|
||||
ticking = true;
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', onScroll, { passive: true });
|
||||
|
||||
// Initial check
|
||||
handleScroll();
|
||||
});
|
||||
</script>
|
||||
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
@@ -3,10 +3,61 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||
<title>Automation Flows - Gyannetra</title> <link rel="stylesheet" href="../css/style.css" />
|
||||
<title>Automation Flows - Gyannetra</title>
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
<link rel="stylesheet" href="../css/benefits-cards.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"> <style>
|
||||
<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">
|
||||
|
||||
<!-- Navbar scroll effect styles -->
|
||||
<style>
|
||||
.site-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
background: transparent !important;
|
||||
backdrop-filter: blur(0px);
|
||||
-webkit-backdrop-filter: blur(0px);
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border-bottom: 1px solid transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.site-header.scrolled {
|
||||
background: transparent !important;
|
||||
backdrop-filter: blur(30px);
|
||||
-webkit-backdrop-filter: blur(30px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
padding: 1rem 2rem;
|
||||
max-width: none !important;
|
||||
margin: 0 !important;
|
||||
background: transparent !important;
|
||||
border-radius: 0 !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Override any existing navbar container styles */
|
||||
.site-header .navbar,
|
||||
.site-header .container,
|
||||
.navbar .container {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
/* Ensure body has top padding to account for fixed navbar */
|
||||
body {
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
/* Automation Flows Page Specific Styles */
|
||||
|
||||
.hero-section {
|
||||
@@ -16,13 +67,10 @@
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.hero-section h1 {
|
||||
} .hero-section h1 {
|
||||
font-size: 3.2rem;
|
||||
margin-bottom: 25px;
|
||||
color: var(--primary-color);
|
||||
text-shadow: 0 2px 10px rgba(0,0,0,0.7);
|
||||
/* Inherit the beautiful gradient and glow from main h1 styling */
|
||||
}
|
||||
|
||||
.hero-section p {
|
||||
@@ -138,16 +186,14 @@
|
||||
background-color: var(--primary-color-hover);
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.overview-section h2,
|
||||
} .overview-section h2,
|
||||
.key-offerings-section h2,
|
||||
.benefits-section h2,
|
||||
.blogs-case-studies-section h2,
|
||||
.related-content-section h2 {
|
||||
font-size: 2.2rem;
|
||||
margin-bottom: 30px;
|
||||
color: var(--primary-color);
|
||||
/* Inherit the beautiful gradient and glow from main h2 styling */
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
@@ -304,13 +350,20 @@
|
||||
<div class="overlay"></div>
|
||||
<div class="noise"></div>
|
||||
</div>
|
||||
|
||||
<header class="site-header">
|
||||
<nav class="navbar container">
|
||||
<a href="../index.html" class="logo">
|
||||
<nav class="navbar">
|
||||
<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">
|
||||
|
||||
<!-- Hamburger menu button for mobile -->
|
||||
<button class="hamburger-menu" aria-label="Toggle menu">
|
||||
<span class="hamburger-line"></span>
|
||||
<span class="hamburger-line"></span>
|
||||
<span class="hamburger-line"></span>
|
||||
</button>
|
||||
|
||||
<ul class="nav-links">
|
||||
<li class="dropdown"><a href="#" class="nav-link">Services ▾</a> <ul class="dropdown-menu services-dropdown">
|
||||
<li><a href="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="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>
|
||||
@@ -512,12 +565,11 @@
|
||||
<li><a href="../about.html">About Us</a></li>
|
||||
<li><a href="../contact.html">Contact Us</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-col">
|
||||
</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-map-marker-alt"></i> Pune, Maharashtra, India</p></li>
|
||||
<li><p><i class="fas fa-phone"></i>+91 89491-35299</p></li>
|
||||
<li><p><i class="fas fa-envelope"></i> <a href="mailto:info@gyannetra.com">info@gyannetra.com</a></p></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -543,6 +595,40 @@
|
||||
<script src="../js/tech-marquee.js" defer></script>
|
||||
<script src="../js/data-node-interactions.js" defer></script>
|
||||
|
||||
<!-- Navbar scroll effect script -->
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const header = document.querySelector('.site-header');
|
||||
|
||||
function handleScroll() {
|
||||
const currentScrollY = window.scrollY;
|
||||
|
||||
if (currentScrollY > 30) {
|
||||
header.classList.add('scrolled');
|
||||
} else {
|
||||
header.classList.remove('scrolled');
|
||||
}
|
||||
}
|
||||
|
||||
// Throttle scroll events for better performance
|
||||
let ticking = false;
|
||||
function onScroll() {
|
||||
if (!ticking) {
|
||||
requestAnimationFrame(function() {
|
||||
handleScroll();
|
||||
ticking = false;
|
||||
});
|
||||
ticking = true;
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', onScroll, { passive: true });
|
||||
|
||||
// Initial check
|
||||
handleScroll();
|
||||
});
|
||||
</script>
|
||||
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
@@ -3,10 +3,62 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||
<title>Data Analysis - Gyannetra</title> <link rel="stylesheet" href="../css/style.css" />
|
||||
<title>Data Analysis - Gyannetra</title>
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
<link rel="stylesheet" href="../css/benefits-cards.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"> <style>
|
||||
<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">
|
||||
|
||||
<!-- Navbar scroll effect styles -->
|
||||
<style>
|
||||
.site-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
background: transparent !important;
|
||||
backdrop-filter: blur(0px);
|
||||
-webkit-backdrop-filter: blur(0px);
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border-bottom: 1px solid transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.site-header.scrolled {
|
||||
background: transparent !important;
|
||||
backdrop-filter: blur(30px);
|
||||
-webkit-backdrop-filter: blur(30px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
padding: 1rem 2rem;
|
||||
max-width: none !important;
|
||||
margin: 0 !important;
|
||||
background: transparent !important;
|
||||
border-radius: 0 !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Override any existing navbar container styles */
|
||||
.site-header .navbar,
|
||||
.site-header .container,
|
||||
.navbar .container {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
/* Ensure body has top padding to account for fixed navbar */
|
||||
body {
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
/* Data Analysis Page Specific Styles */
|
||||
body {
|
||||
/* Using standardized colors from main CSS */
|
||||
--card-bg: rgba(25, 35, 55, 0.7);
|
||||
@@ -21,13 +73,10 @@
|
||||
margin: 0 auto;
|
||||
position: relative; /* Ensure hero content is above atmospheric bg */
|
||||
z-index: 2; /* Ensure hero content is above atmospheric bg */
|
||||
}
|
||||
|
||||
.hero-section h1 {
|
||||
} .hero-section h1 {
|
||||
font-size: 3.2rem;
|
||||
margin-bottom: 25px;
|
||||
color: var(--primary-color);
|
||||
text-shadow: 0 2px 10px rgba(0,0,0,0.7);
|
||||
/* Inherit the beautiful gradient and glow from main h1 styling */
|
||||
}
|
||||
|
||||
.hero-section p {
|
||||
@@ -148,11 +197,10 @@
|
||||
.overview-section h2,
|
||||
.key-offerings-section h2,
|
||||
.benefits-section h2,
|
||||
.blogs-case-studies-section h2,
|
||||
.related-content-section h2 {
|
||||
.blogs-case-studies-section h2, .related-content-section h2 {
|
||||
font-size: 2.2rem;
|
||||
margin-bottom: 30px;
|
||||
color: var(--primary-color);
|
||||
/* Inherit the beautiful gradient and glow from main h2 styling */
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
@@ -203,12 +251,18 @@
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.read-more {
|
||||
.read-more {
|
||||
color: var(--primary-color);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.related-content-image {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin-bottom: 15px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
/* Removed conflicting section styling that was here:
|
||||
section:not(.hero-section) {
|
||||
margin: 0;
|
||||
@@ -288,11 +342,19 @@
|
||||
<div class="noise"></div>
|
||||
</div>
|
||||
<header class="site-header">
|
||||
<nav class="navbar container">
|
||||
<a href="../index.html" class="logo">
|
||||
<nav class="navbar">
|
||||
<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">
|
||||
|
||||
<!-- Hamburger menu button for mobile -->
|
||||
<button class="hamburger-menu" aria-label="Toggle menu">
|
||||
<span class="hamburger-line"></span>
|
||||
<span class="hamburger-line"></span>
|
||||
<span class="hamburger-line"></span>
|
||||
</button>
|
||||
|
||||
<ul class="nav-links">
|
||||
<li class="dropdown"><a href="#" class="nav-link">Services ▾</a>
|
||||
<ul class="dropdown-menu services-dropdown">
|
||||
<li><a href="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>
|
||||
@@ -365,14 +427,23 @@
|
||||
<img src="../assets/predictive-analytics-icon.png" alt="Predictive Analytics Icon" class="solution-icon">
|
||||
<h3>Predictive Analytics</h3>
|
||||
<p>Leveraging historical data and machine learning to forecast future outcomes, identify risks, and uncover opportunities.</p>
|
||||
</div>
|
||||
<div class="solution-item">
|
||||
</div> <div class="solution-item">
|
||||
<img src="../assets/data-strategy-icon.png" alt="Data-Driven Strategy Consulting Icon" class="solution-icon">
|
||||
<h3>Data-Driven Strategy Consulting</h3>
|
||||
<p>Providing expert guidance to help you develop and implement effective data strategies that align with your business goals.</p>
|
||||
</div>
|
||||
<div class="solution-item">
|
||||
<img src="../assets/analytics (1).png" alt="Real-time Analytics Icon" class="solution-icon">
|
||||
<h3>Real-time Analytics & Monitoring</h3>
|
||||
<p>Implement live data processing and monitoring systems to track business metrics and respond to changes instantly.</p>
|
||||
</div>
|
||||
<div class="solution-item">
|
||||
<img src="../assets/data analytics.png" alt="Advanced Data Modeling Icon" class="solution-icon">
|
||||
<h3>Advanced Data Modeling</h3>
|
||||
<p>Build sophisticated data models that capture complex relationships and enable deeper analytical insights across your organization.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section> <section class="benefits-section section-padding container">
|
||||
</section><section class="benefits-section section-padding container">
|
||||
<h2>BENEFITS OF CHOOSING GYANNETRA FOR DATA ANALYSIS</h2> <div class="benefits-cards-grid">
|
||||
<div class="benefit-card">
|
||||
<div class="benefit-card-icon">
|
||||
@@ -404,48 +475,26 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="blogs-case-studies-section section-padding container">
|
||||
<h2>BLOGS & CASE STUDIES</h2>
|
||||
<div class="articles-grid">
|
||||
<div class="article-card">
|
||||
<img src="../assets/blog-descriptive-analytics.jpg" alt="The Power of Descriptive Analytics in Business Intelligence">
|
||||
<h3>The Power of Descriptive Analytics in Business Intelligence</h3>
|
||||
<p>Understanding how descriptive analysis provides a foundational view of your business data for informed decision-making and strategic planning.</p>
|
||||
<a href="../Industries/case-studies.html#descriptive-analytics" class="read-more-link">Read More</a>
|
||||
</div>
|
||||
<div class="article-card">
|
||||
<img src="../assets/blog-predictive-modeling-techniques.jpg" alt="Exploring Advanced Predictive Modeling Techniques">
|
||||
<h3>Exploring Advanced Predictive Modeling Techniques</h3>
|
||||
<p>A deep dive into various methods for forecasting future trends and outcomes across diverse industries and complex business applications.</p>
|
||||
<a href="../Industries/case-studies.html#predictive-modeling" class="read-more-link">Read More</a>
|
||||
</div>
|
||||
<div class="article-card">
|
||||
<img src="../assets/case-study-retail-data-mining.jpg" alt="Case Study: Improving Retail Sales with Data Mining">
|
||||
<h3>Case Study: Improving Retail Sales by 28% with Data Mining</h3>
|
||||
<p>Discover how a prominent retail client leveraged strategic data mining insights to achieve significant quarterly sales growth and enhance customer segmentation.</p>
|
||||
<a href="../Industries/case-studies.html#data-mining-retail" class="read-more-link">Read More</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="related-content-section section-padding container">
|
||||
<h2>RELATED BLOGS & CASE STUDIES</h2>
|
||||
<section class="related-content-section section-padding container">
|
||||
<h2>EXPLORE OUR CAPABILITIES</h2>
|
||||
<div class="related-content-grid">
|
||||
<div class="related-content-item">
|
||||
<h3>Machine Learning Insights</h3>
|
||||
<p>Explore how our Machine Learning services can complement your data analysis efforts for predictive power.</p>
|
||||
<img src="../assets/mlng.png" alt="Machine Learning Services" class="related-content-image">
|
||||
<h3>Machine Learning Solutions</h3>
|
||||
<p>Enhance your data analysis with predictive models and intelligent algorithms that learn from your data to forecast outcomes.</p>
|
||||
<a href="machine-learning.html" class="read-more">Learn More</a>
|
||||
</div>
|
||||
<div class="related-content-item">
|
||||
<h3>Generative AI for Data Augmentation</h3>
|
||||
<p>Discover how Generative AI can create synthetic data to enhance your analytical models.</p>
|
||||
<a href="generative-ai.html" class="read-more">Learn More</a>
|
||||
<img src="../assets/gen ai.png" alt="Generative AI Solutions" class="related-content-image">
|
||||
<h3>Generative AI for Data</h3>
|
||||
<p>Create synthetic data, generate insights, and automate report creation with our advanced Generative AI capabilities.</p>
|
||||
<a href="generative-ai.html" class="read-more">Discover GenAI</a>
|
||||
</div>
|
||||
<div class="related-content-item">
|
||||
<h3>Automating Data Pipelines</h3>
|
||||
<p>Learn how our Automation Flow services can streamline your data collection and preparation processes.</p>
|
||||
<a href="automation-flows.html" class="read-more">Learn More</a>
|
||||
<div class="related-content-item">
|
||||
<img src="../assets/automation flows.png" alt="Automation Flows" class="related-content-image">
|
||||
<h3>Data Pipeline Automation</h3>
|
||||
<p>Streamline your data collection, processing, and analysis workflows with intelligent automation solutions.</p>
|
||||
<a href="automation-flows.html" class="read-more">Automate Now</a>
|
||||
</div>
|
||||
</div>
|
||||
<div style="text-align: center; margin-top: 40px;">
|
||||
@@ -482,12 +531,11 @@
|
||||
<li><a href="../about.html">About Us</a></li>
|
||||
<li><a href="../contact.html">Contact Us</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-col">
|
||||
</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-map-marker-alt"></i> Pune, Maharashtra, India</p></li>
|
||||
<li><p><i class="fas fa-phone"></i>+91 89491-35299</p></li>
|
||||
<li><p><i class="fas fa-envelope"></i> <a href="mailto:info@gyannetra.com">info@gyannetra.com</a></p></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -512,6 +560,42 @@
|
||||
<script src="../js/tech-marquee.js" defer></script>
|
||||
<script src="../js/data-node-interactions.js" defer></script>
|
||||
|
||||
<!-- Navbar scroll effect script -->
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const header = document.querySelector('.site-header');
|
||||
|
||||
function handleScroll() {
|
||||
const currentScrollY = window.scrollY;
|
||||
|
||||
if (currentScrollY > 30) {
|
||||
header.classList.add('scrolled');
|
||||
} else {
|
||||
header.classList.remove('scrolled');
|
||||
}
|
||||
}
|
||||
|
||||
// Throttle scroll events for better performance
|
||||
let ticking = false;
|
||||
function onScroll() {
|
||||
if (!ticking) {
|
||||
requestAnimationFrame(function() {
|
||||
handleScroll();
|
||||
ticking = false;
|
||||
});
|
||||
ticking = true;
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', onScroll, { passive: true });
|
||||
|
||||
// Initial check
|
||||
handleScroll();
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -3,11 +3,15 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||
<title>Generative AI - Gyannetra</title> <link rel="stylesheet" href="../css/style.css" />
|
||||
<title>Generative AI - Gyannetra</title>
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
<link rel="stylesheet" href="../css/benefits-cards.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">
|
||||
<style> /* Card Structure Styles */
|
||||
|
||||
<!-- Navbar scroll effect styles -->
|
||||
<style>
|
||||
/* Card Structure Styles */
|
||||
body {
|
||||
/* Using standardized colors from main CSS */
|
||||
--card-bg: rgba(25, 35, 55, 0.7);
|
||||
@@ -84,13 +88,10 @@
|
||||
margin: 0 auto;
|
||||
position: relative; /* Ensure hero content is above atmospheric bg */
|
||||
z-index: 2; /* Ensure hero content is above atmospheric bg */
|
||||
}
|
||||
|
||||
.hero-section h1 {
|
||||
} .hero-section h1 {
|
||||
font-size: 3.2rem;
|
||||
margin-bottom: 25px;
|
||||
color: var(--primary-color);
|
||||
text-shadow: 0 2px 10px rgba(0,0,0,0.7);
|
||||
/* Inherit the beautiful gradient and glow from main h1 styling */
|
||||
}
|
||||
|
||||
.hero-section p {
|
||||
@@ -217,15 +218,14 @@
|
||||
margin: 4rem 0;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
*/
|
||||
.overview-section h2,
|
||||
*/ .overview-section h2,
|
||||
.key-offerings-section h2,
|
||||
.benefits-section h2,
|
||||
.blogs-case-studies-section h2,
|
||||
.related-content-section h2 {
|
||||
font-size: 2.2rem;
|
||||
margin-bottom: 30px;
|
||||
color: var(--primary-color);
|
||||
/* Inherit the beautiful gradient and glow from main h2 styling */
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
@@ -271,17 +271,71 @@
|
||||
margin-bottom: 10px;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.related-content-item p {
|
||||
.related-content-item p {
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.related-content-image {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
object-fit: contain;
|
||||
margin-bottom: 15px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.read-more {
|
||||
color: var(--primary-color);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.site-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
background: transparent !important;
|
||||
backdrop-filter: blur(0px);
|
||||
-webkit-backdrop-filter: blur(0px);
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border-bottom: 1px solid transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.site-header.scrolled {
|
||||
background: transparent !important;
|
||||
backdrop-filter: blur(30px);
|
||||
-webkit-backdrop-filter: blur(30px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
padding: 1rem 2rem;
|
||||
max-width: none !important;
|
||||
margin: 0 !important;
|
||||
background: transparent !important;
|
||||
border-radius: 0 !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Override any existing navbar container styles */
|
||||
.site-header .navbar,
|
||||
.site-header .container,
|
||||
.navbar .container {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
/* Ensure body has top padding to account for fixed navbar */
|
||||
body {
|
||||
padding-top: 80px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -289,13 +343,20 @@
|
||||
<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>
|
||||
<header class="site-header">
|
||||
<nav class="navbar container">
|
||||
<a href="../index.html" class="logo">
|
||||
</div> <header class="site-header">
|
||||
<nav class="navbar">
|
||||
<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">
|
||||
|
||||
<!-- Hamburger menu button for mobile -->
|
||||
<button class="hamburger-menu" aria-label="Toggle menu">
|
||||
<span class="hamburger-line"></span>
|
||||
<span class="hamburger-line"></span>
|
||||
<span class="hamburger-line"></span>
|
||||
</button>
|
||||
|
||||
<ul class="nav-links">
|
||||
<li class="dropdown"><a href="#" class="nav-link">Services ▾</a>
|
||||
<ul class="dropdown-menu services-dropdown">
|
||||
<li><a href="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>
|
||||
@@ -360,12 +421,31 @@
|
||||
<img src="../assets/solution_icon_personalization.svg" alt="AI-Driven Design Icon" class="solution-icon">
|
||||
<h3>AI-Driven Design</h3>
|
||||
<p>Innovative design tools powered by AI to enhance creativity and streamline workflows</p>
|
||||
</div>
|
||||
<div class="solution-item">
|
||||
</div> <div class="solution-item">
|
||||
<img src="../assets/solution_icon_content_analysis.svg" alt="Content Analysis Icon" class="solution-icon">
|
||||
<h3>Content Analysis</h3>
|
||||
<p>Intelligent content evaluation and improvement suggestions for optimal results</p>
|
||||
</div>
|
||||
<div class="solution-item">
|
||||
<img src="../assets/solution_icon_chatbots.svg" alt="Conversational AI Icon" class="solution-icon">
|
||||
<h3>Conversational AI</h3>
|
||||
<p>Advanced chatbots and virtual assistants powered by generative language models for natural interactions</p>
|
||||
</div>
|
||||
<div class="solution-item">
|
||||
<img src="../assets/solution_icon_code_generation.svg" alt="Code Generation Icon" class="solution-icon">
|
||||
<h3>AI Code Generation</h3>
|
||||
<p>Automated code writing and documentation generation to accelerate software development processes</p>
|
||||
</div>
|
||||
<div class="solution-item">
|
||||
<img src="../assets/solution_icon_image_synthesis.svg" alt="Image Synthesis Icon" class="solution-icon">
|
||||
<h3>Image & Video Synthesis</h3>
|
||||
<p>Generate high-quality images, videos, and visual content for marketing and creative applications</p>
|
||||
</div>
|
||||
<div class="solution-item">
|
||||
<img src="../assets/solution_icon_personalization.svg" alt="Personalized Content Icon" class="solution-icon">
|
||||
<h3>Personalized Content Generation</h3>
|
||||
<p>Create tailored content that resonates with specific audiences based on their preferences and behaviors</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="benefits-section section-padding container">
|
||||
@@ -423,25 +503,31 @@
|
||||
<a href="../Industries/case-studies.html" class="read-more-link">Read More</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="related-content-section section-padding container"> <!-- ADDED section-padding -->
|
||||
<h2>RELATED BLOGS & CASE STUDIES</h2>
|
||||
</section> <section class="related-content-section section-padding container"> <!-- ADDED section-padding -->
|
||||
<h2>EXPLORE OUR AI CAPABILITIES</h2>
|
||||
<div class="related-content-grid">
|
||||
<div class="related-content-item">
|
||||
<img src="../assets/analytics (1).png" alt="Generative AI Transforms Industries Thumbnail" class="related-content-image">
|
||||
<h3>How Generative AI Transforms Industries</h3>
|
||||
<p>Explore the impact of generative models across business sectors</p>
|
||||
<a href="../Industries/case-studies.html" class="read-more">Read More</a>
|
||||
<img src="../assets/mlng.png" alt="Machine Learning Services" class="related-content-image">
|
||||
<h3>Machine Learning Solutions</h3>
|
||||
<p>Build predictive models and intelligent algorithms that learn from data to forecast outcomes and automate decisions.</p>
|
||||
<a href="machine-learning.html" class="read-more">Discover ML</a>
|
||||
</div>
|
||||
<div class="related-content-item">
|
||||
<img src="../assets/case study ind.png" alt="Content Generation Success Case Study Thumbnail" class="related-content-image">
|
||||
<h3>Case Study: Content Generation Success</h3>
|
||||
<p>How a media company increased engagement by 70% using our generative AI models</p>
|
||||
<a href="../Industries/case-studies.html" class="read-more">Read More</a>
|
||||
<img src="../assets/data analytics.png" alt="Data Analysis Services" class="related-content-image">
|
||||
<h3>Data Analysis & Visualization</h3>
|
||||
<p>Transform raw data into clear, actionable insights with our expert data analysis and visualization services.</p>
|
||||
<a href="data-analysis.html" class="read-more">Analyze Data</a>
|
||||
</div>
|
||||
<div class="related-content-item">
|
||||
<img src="../assets/ai agent.png" alt="Agentic AI Solutions" class="related-content-image">
|
||||
<h3>Intelligent Agentic AI</h3>
|
||||
<p>Deploy autonomous AI agents that perceive environments and take goal-driven actions to solve complex problems.</p>
|
||||
<a href="agentic-ai.html" class="read-more">Explore Agents</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="../Industries/case-studies.html" class="btn-primary">Explore Our Generative AI Capabilities</a>
|
||||
<div style="text-align: center; margin-top: 40px;">
|
||||
<a href="../contact.html" class="btn btn-primary">Discuss Your AI Project</a>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
@@ -473,12 +559,11 @@
|
||||
<li><a href="../about.html">About Us</a></li>
|
||||
<li><a href="../contact.html">Contact Us</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-col">
|
||||
</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-map-marker-alt"></i> Pune, Maharashtra, India</p></li>
|
||||
<li><p><i class="fas fa-phone"></i>+91 89491-35299</p></li>
|
||||
<li><p><i class="fas fa-envelope"></i> <a href="mailto:info@gyannetra.com">info@gyannetra.com</a></p></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -504,6 +589,40 @@
|
||||
<script src="../js/tech-marquee.js" defer></script>
|
||||
<script src="../js/data-node-interactions.js" defer></script>
|
||||
|
||||
<!-- Navbar scroll effect script -->
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const header = document.querySelector('.site-header');
|
||||
|
||||
function handleScroll() {
|
||||
const currentScrollY = window.scrollY;
|
||||
|
||||
if (currentScrollY > 30) {
|
||||
header.classList.add('scrolled');
|
||||
} else {
|
||||
header.classList.remove('scrolled');
|
||||
}
|
||||
}
|
||||
|
||||
// Throttle scroll events for better performance
|
||||
let ticking = false;
|
||||
function onScroll() {
|
||||
if (!ticking) {
|
||||
requestAnimationFrame(function() {
|
||||
handleScroll();
|
||||
ticking = false;
|
||||
});
|
||||
ticking = true;
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', onScroll, { passive: true });
|
||||
|
||||
// Initial check
|
||||
handleScroll();
|
||||
});
|
||||
</script>
|
||||
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
@@ -3,10 +3,62 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||
<title>Machine Learning - Gyannetra</title> <link rel="stylesheet" href="../css/style.css" />
|
||||
<title>Machine Learning - Gyannetra</title>
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
<link rel="stylesheet" href="../css/benefits-cards.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"> <style>
|
||||
<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">
|
||||
|
||||
<!-- Navbar scroll effect styles -->
|
||||
<style>
|
||||
.site-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
background: transparent !important;
|
||||
backdrop-filter: blur(0px);
|
||||
-webkit-backdrop-filter: blur(0px);
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border-bottom: 1px solid transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.site-header.scrolled {
|
||||
background: transparent !important;
|
||||
backdrop-filter: blur(30px);
|
||||
-webkit-backdrop-filter: blur(30px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
padding: 1rem 2rem;
|
||||
max-width: none !important;
|
||||
margin: 0 !important;
|
||||
background: transparent !important;
|
||||
border-radius: 0 !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Override any existing navbar container styles */
|
||||
.site-header .navbar,
|
||||
.site-header .container,
|
||||
.navbar .container {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
/* Ensure body has top padding to account for fixed navbar */
|
||||
body {
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
/* General styles */
|
||||
body {
|
||||
/* Using standardized colors from main CSS */
|
||||
--card-bg: rgba(25, 35, 55, 0.7); /* Darker card background for contrast */
|
||||
@@ -21,13 +73,10 @@
|
||||
margin: 0 auto;
|
||||
position: relative; /* Ensure hero content is above atmospheric bg */
|
||||
z-index: 2; /* Ensure hero content is above atmospheric bg */
|
||||
}
|
||||
|
||||
.hero-section h1 {
|
||||
} .hero-section h1 {
|
||||
font-size: 3.2rem;
|
||||
margin-bottom: 25px;
|
||||
color: var(--primary-color);
|
||||
text-shadow: 0 2px 10px rgba(0,0,0,0.7);
|
||||
/* Inherit the beautiful gradient and glow from main h1 styling */
|
||||
}
|
||||
|
||||
.hero-section p {
|
||||
@@ -148,11 +197,10 @@
|
||||
.overview-section h2,
|
||||
.key-offerings-section h2,
|
||||
.benefits-section h2,
|
||||
.blogs-case-studies-section h2,
|
||||
.related-content-section h2 {
|
||||
.blogs-case-studies-section h2, .related-content-section h2 {
|
||||
font-size: 2.2rem;
|
||||
margin-bottom: 30px; /* Standardized margin */
|
||||
color: var(--primary-color);
|
||||
/* Inherit the beautiful gradient and glow from main h2 styling */
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
@@ -317,10 +365,18 @@
|
||||
<div class="noise"></div>
|
||||
</div>
|
||||
<header class="site-header">
|
||||
<nav class="navbar container">
|
||||
<nav class="navbar">
|
||||
<a href="../index.html" class="logo">
|
||||
<img src="../assets/Company Icons/GN Name logo.svg" alt="Gyannetra Logo" class="logo-img">
|
||||
</a>
|
||||
|
||||
<!-- Hamburger menu button for mobile -->
|
||||
<button class="hamburger-menu" aria-label="Toggle menu">
|
||||
<span class="hamburger-line"></span>
|
||||
<span class="hamburger-line"></span>
|
||||
<span class="hamburger-line"></span>
|
||||
</button>
|
||||
|
||||
<ul class="nav-links">
|
||||
<li class="dropdown"><a href="#" class="nav-link">Services ▾</a> <ul class="dropdown-menu services-dropdown">
|
||||
<li><a href="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>
|
||||
@@ -392,12 +448,21 @@
|
||||
<img src="../assets/personalized-recommendations.svg" alt="Recommendation Systems Icon" class="solution-icon">
|
||||
<h3>Recommendation Systems</h3>
|
||||
<p>Design personalized recommendation engines to enhance user engagement and drive conversions.</p>
|
||||
</div>
|
||||
<div class="solution-item">
|
||||
</div> <div class="solution-item">
|
||||
<img src="../assets/fraud_detection_icon.svg" alt="Anomaly Detection Icon" class="solution-icon">
|
||||
<h3>Anomaly Detection</h3>
|
||||
<p>Identify unusual patterns and outliers in your data that may indicate fraud, errors, or opportunities.</p>
|
||||
</div>
|
||||
<div class="solution-item">
|
||||
<img src="../assets/automation.png" alt="AutoML Icon" class="solution-icon">
|
||||
<h3>Automated Machine Learning (AutoML)</h3>
|
||||
<p>Streamline model development with automated feature engineering, model selection, and hyperparameter tuning for optimal results.</p>
|
||||
</div>
|
||||
<div class="solution-item">
|
||||
<img src="../assets/mlng.png" alt="MLOps Icon" class="solution-icon">
|
||||
<h3>MLOps & Model Deployment</h3>
|
||||
<p>Implement robust machine learning operations pipelines for seamless model deployment, monitoring, and lifecycle management.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="benefits-section section-padding container">
|
||||
@@ -512,12 +577,11 @@
|
||||
<li><a href="../about.html">About Us</a></li>
|
||||
<li><a href="../contact.html">Contact Us</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-col">
|
||||
</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-map-marker-alt"></i> Pune, Maharashtra, India</p></li>
|
||||
<li><p><i class="fas fa-phone"></i>+91 89491-35299</p></li>
|
||||
<li><p><i class="fas fa-envelope"></i> <a href="mailto:info@gyannetra.com">info@gyannetra.com</a></p></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -542,6 +606,41 @@
|
||||
<script src="../js/tech-marquee.js" defer></script>
|
||||
<script src="../js/data-node-interactions.js" defer></script>
|
||||
|
||||
<!-- Navbar scroll effect script -->
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const header = document.querySelector('.site-header');
|
||||
|
||||
function handleScroll() {
|
||||
const currentScrollY = window.scrollY;
|
||||
|
||||
if (currentScrollY > 30) {
|
||||
header.classList.add('scrolled');
|
||||
} else {
|
||||
header.classList.remove('scrolled');
|
||||
}
|
||||
}
|
||||
|
||||
// Throttle scroll events for better performance
|
||||
let ticking = false;
|
||||
function onScroll() {
|
||||
if (!ticking) {
|
||||
requestAnimationFrame(function() {
|
||||
handleScroll();
|
||||
ticking = false;
|
||||
});
|
||||
ticking = true;
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', onScroll, { passive: true });
|
||||
|
||||
// Initial check
|
||||
handleScroll();
|
||||
});
|
||||
</script>
|
||||
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
|
||||
103
about.html
103
about.html
@@ -7,6 +7,56 @@
|
||||
<link rel="stylesheet" href="css/style.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">
|
||||
|
||||
<!-- Navbar scroll effect styles -->
|
||||
<style>
|
||||
.site-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
background: transparent !important;
|
||||
backdrop-filter: blur(0px);
|
||||
-webkit-backdrop-filter: blur(0px);
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border-bottom: 1px solid transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.site-header.scrolled {
|
||||
background: transparent !important;
|
||||
backdrop-filter: blur(30px);
|
||||
-webkit-backdrop-filter: blur(30px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
padding: 1rem 2rem;
|
||||
max-width: none !important;
|
||||
margin: 0 !important;
|
||||
background: transparent !important;
|
||||
border-radius: 0 !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Override any existing navbar container styles */
|
||||
.site-header .navbar,
|
||||
.site-header .container,
|
||||
.navbar .container {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
/* Ensure body has top padding to account for fixed navbar */
|
||||
body {
|
||||
padding-top: 80px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="atmospheric-bg">
|
||||
@@ -17,12 +67,20 @@
|
||||
<div class="overlay"></div>
|
||||
<div class="noise"></div>
|
||||
</div>
|
||||
<!-- NAVBAR -->
|
||||
<!-- NAVBAR -->
|
||||
<header class="site-header">
|
||||
<nav class="navbar container">
|
||||
<nav class="navbar">
|
||||
<a href="index.html" class="logo">
|
||||
<img src="assets/Company Icons/GN Name logo.svg" alt="Gyannetra Logo" class="logo-img">
|
||||
</a>
|
||||
|
||||
<!-- Hamburger menu button for mobile -->
|
||||
<button class="hamburger-menu" aria-label="Toggle menu">
|
||||
<span class="hamburger-line"></span>
|
||||
<span class="hamburger-line"></span>
|
||||
<span class="hamburger-line"></span>
|
||||
</button>
|
||||
|
||||
<ul class="nav-links">
|
||||
<li class="dropdown"><a href="#" class="nav-link">Services ▾</a>
|
||||
<ul class="dropdown-menu services-dropdown">
|
||||
@@ -132,12 +190,11 @@
|
||||
<li><a href="about.html">About Us</a></li>
|
||||
<li><a href="contact.html">Contact Us</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-col">
|
||||
</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-map-marker-alt"></i> Pune, Maharashtra, India</p></li>
|
||||
<li><p><i class="fas fa-phone"></i>+91 89491-35299</p></li>
|
||||
<li><p><i class="fas fa-envelope"></i> <a href="mailto:info@gyannetra.com">info@gyannetra.com</a></p></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -159,6 +216,40 @@
|
||||
<script src="js/main.js" defer></script>
|
||||
<script src="js/data-node-interactions.js" defer></script>
|
||||
|
||||
<!-- Navbar scroll effect script -->
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const header = document.querySelector('.site-header');
|
||||
|
||||
function handleScroll() {
|
||||
const currentScrollY = window.scrollY;
|
||||
|
||||
if (currentScrollY > 30) {
|
||||
header.classList.add('scrolled');
|
||||
} else {
|
||||
header.classList.remove('scrolled');
|
||||
}
|
||||
}
|
||||
|
||||
// Throttle scroll events for better performance
|
||||
let ticking = false;
|
||||
function onScroll() {
|
||||
if (!ticking) {
|
||||
requestAnimationFrame(function() {
|
||||
handleScroll();
|
||||
ticking = false;
|
||||
});
|
||||
ticking = true;
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', onScroll, { passive: true });
|
||||
|
||||
// Initial check
|
||||
handleScroll();
|
||||
});
|
||||
</script>
|
||||
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
100
contact.html
100
contact.html
@@ -7,6 +7,56 @@
|
||||
<link rel="stylesheet" href="css/style.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">
|
||||
|
||||
<!-- Navbar scroll effect styles -->
|
||||
<style>
|
||||
.site-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
background: transparent !important;
|
||||
backdrop-filter: blur(0px);
|
||||
-webkit-backdrop-filter: blur(0px);
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border-bottom: 1px solid transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.site-header.scrolled {
|
||||
background: transparent !important;
|
||||
backdrop-filter: blur(30px);
|
||||
-webkit-backdrop-filter: blur(30px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
padding: 1rem 2rem;
|
||||
max-width: none !important;
|
||||
margin: 0 !important;
|
||||
background: transparent !important;
|
||||
border-radius: 0 !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Override any existing navbar container styles */
|
||||
.site-header .navbar,
|
||||
.site-header .container,
|
||||
.navbar .container {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
/* Ensure body has top padding to account for fixed navbar */
|
||||
body {
|
||||
padding-top: 80px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="atmospheric-bg">
|
||||
@@ -17,13 +67,21 @@
|
||||
<div class="overlay"></div>
|
||||
<div class="noise"></div>
|
||||
</div>
|
||||
<!-- NAVBAR -->
|
||||
<!-- NAVBAR -->
|
||||
<header class="site-header">
|
||||
<nav class="navbar container">
|
||||
<nav class="navbar">
|
||||
<script src="js/dropdown.js"></script>
|
||||
<a href="index.html" class="logo">
|
||||
<img src="assets/Company Icons/GN Name logo.svg" alt="Gyannetra Logo" class="logo-img">
|
||||
</a>
|
||||
|
||||
<!-- Hamburger menu button for mobile -->
|
||||
<button class="hamburger-menu" aria-label="Toggle menu">
|
||||
<span class="hamburger-line"></span>
|
||||
<span class="hamburger-line"></span>
|
||||
<span class="hamburger-line"></span>
|
||||
</button>
|
||||
|
||||
<ul class="nav-links">
|
||||
<li class="dropdown"><a href="#" class="nav-link">Services ▾</a>
|
||||
<ul class="dropdown-menu services-dropdown">
|
||||
@@ -146,8 +204,8 @@
|
||||
<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-map-marker-alt"></i> Pune, Maharashtra, India</p></li>
|
||||
<li><p><i class="fas fa-phone"></i>+91 89491-35299</p></li>
|
||||
<li><p><i class="fas fa-envelope"></i> <a href="mailto:info@gyannetra.com">info@gyannetra.com</a></p></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -169,6 +227,40 @@
|
||||
<script src="js/main.js" defer></script>
|
||||
<script src="js/data-node-interactions.js" defer></script>
|
||||
|
||||
<!-- Navbar scroll effect script -->
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const header = document.querySelector('.site-header');
|
||||
|
||||
function handleScroll() {
|
||||
const currentScrollY = window.scrollY;
|
||||
|
||||
if (currentScrollY > 30) {
|
||||
header.classList.add('scrolled');
|
||||
} else {
|
||||
header.classList.remove('scrolled');
|
||||
}
|
||||
}
|
||||
|
||||
// Throttle scroll events for better performance
|
||||
let ticking = false;
|
||||
function onScroll() {
|
||||
if (!ticking) {
|
||||
requestAnimationFrame(function() {
|
||||
handleScroll();
|
||||
ticking = false;
|
||||
});
|
||||
ticking = true;
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', onScroll, { passive: true });
|
||||
|
||||
// Initial check
|
||||
handleScroll();
|
||||
});
|
||||
</script>
|
||||
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
@@ -1,339 +0,0 @@
|
||||
/**
|
||||
* Custom animations for Gyannetra website
|
||||
* Enhances UI with smooth transitions and dynamic effects
|
||||
*/
|
||||
|
||||
/* General fade-in animation */
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
/* Slide up animation */
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Scale in animation */
|
||||
@keyframes scaleIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* Pulse animation */
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.05);
|
||||
opacity: 0.8;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Floating animation */
|
||||
@keyframes float {
|
||||
0% { transform: translateY(0px); }
|
||||
50% { transform: translateY(-10px); }
|
||||
100% { transform: translateY(0px); }
|
||||
}
|
||||
|
||||
/* Node pulse effect */
|
||||
@keyframes nodePulse {
|
||||
0% {
|
||||
box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
|
||||
}
|
||||
70% {
|
||||
box-shadow: 0 0 0 15px rgba(59, 130, 246, 0);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Node ripple effect */
|
||||
@keyframes nodeRipple {
|
||||
0% {
|
||||
transform: scale(0.8);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: scale(2.5);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom cursor animation */
|
||||
@keyframes cursorPulse {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
opacity: 0.7;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.5);
|
||||
opacity: 0.3;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Section transition animation */
|
||||
@keyframes sectionTransition {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Logo pulse animation */
|
||||
@keyframes logoPulse {
|
||||
0% {
|
||||
filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
|
||||
}
|
||||
50% {
|
||||
filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.8));
|
||||
}
|
||||
100% {
|
||||
filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
|
||||
}
|
||||
}
|
||||
|
||||
/* Rotating animation */
|
||||
@keyframes rotate {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* Shine effect animation */
|
||||
@keyframes shine {
|
||||
0% {
|
||||
background-position: -100px;
|
||||
}
|
||||
40%, 100% {
|
||||
background-position: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom animation classes */
|
||||
.animate-on-scroll {
|
||||
opacity: 0;
|
||||
transition: opacity 0.8s ease, transform 0.8s ease;
|
||||
}
|
||||
|
||||
.animated {
|
||||
opacity: 1;
|
||||
transform: translateY(0) !important;
|
||||
}
|
||||
|
||||
.animate-on-scroll.section-heading {
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
|
||||
.animate-on-scroll.btn-primary {
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
.animate-on-scroll.exp-item {
|
||||
transform: translateY(30px);
|
||||
}
|
||||
|
||||
/* Staggered animation for elements */
|
||||
.section-hidden {
|
||||
opacity: 0;
|
||||
transition: all 1s ease;
|
||||
}
|
||||
|
||||
.section-visible {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.section-highlighted {
|
||||
animation: pulse 1s ease;
|
||||
}
|
||||
|
||||
.animate-on-visible {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
transition: opacity 0.5s ease, transform 0.5s ease;
|
||||
}
|
||||
|
||||
.element-visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* Header animations */
|
||||
.header-scrolled {
|
||||
backdrop-filter: blur(10px);
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
||||
background-color: rgba(10, 10, 30, 0.8);
|
||||
}
|
||||
|
||||
.header-hidden {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
.site-header {
|
||||
transition: transform 0.3s ease, background-color 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
/* Footer animations */
|
||||
.footer-visible .footer-col {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
transition: opacity 0.5s ease, transform 0.5s ease;
|
||||
}
|
||||
|
||||
.footer-visible .col-visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* Custom cursor styles */
|
||||
.custom-cursor {
|
||||
position: fixed;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border: 2px solid rgba(59, 130, 246, 0.5);
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
z-index: 9999;
|
||||
transform: translate(-50%, -50%);
|
||||
transition: width 0.2s, height 0.2s, border-color 0.2s;
|
||||
}
|
||||
|
||||
.cursor-dot {
|
||||
position: fixed;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
background-color: rgba(59, 130, 246, 0.8);
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
z-index: 9999;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.cursor-hover {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-color: rgba(139, 92, 246, 0.7);
|
||||
background-color: rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
/* Data node effects */
|
||||
.node-hover {
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.node-active .node-core {
|
||||
animation: nodePulse 1.5s infinite;
|
||||
}
|
||||
|
||||
.node-halo {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
border: 2px solid rgba(59, 130, 246, 0.7);
|
||||
box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
|
||||
opacity: 0.8;
|
||||
animation: nodeRipple 1.5s ease-out infinite;
|
||||
}
|
||||
|
||||
.node-pulse-effect {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(59, 130, 246, 0.3);
|
||||
opacity: 0;
|
||||
animation: nodeRipple 1.5s ease-out;
|
||||
}
|
||||
|
||||
.node-ripple {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
animation: nodeRipple 0.4s ease-out;
|
||||
}
|
||||
|
||||
.core-glow {
|
||||
box-shadow: 0 0 15px 5px rgba(59, 130, 246, 0.7);
|
||||
}
|
||||
|
||||
.constellation-line {
|
||||
transition: stroke 0.3s ease, stroke-width 0.3s ease, opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.constellation-line-active {
|
||||
stroke: rgba(100, 200, 255, 0.8) !important;
|
||||
stroke-width: 2 !important;
|
||||
filter: drop-shadow(0 0 3px rgba(100, 200, 255, 0.5));
|
||||
}
|
||||
|
||||
/* Expertise item animations */
|
||||
.exp-item {
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.exp-hover {
|
||||
transform: translateY(-10px);
|
||||
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.exp-click {
|
||||
animation: pulse 0.3s ease;
|
||||
}
|
||||
|
||||
.animate-entrance {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
animation: slideUp 0.5s forwards;
|
||||
}
|
||||
|
||||
/* Page transitions */
|
||||
.transition-ready {
|
||||
transition: opacity 0.5s ease-out;
|
||||
}
|
||||
|
||||
.page-hidden .neural-mesh,
|
||||
.page-hidden .data-constellation,
|
||||
.page-hidden .geometric-morphs,
|
||||
.page-hidden .data-streams {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
@@ -1,883 +0,0 @@
|
||||
/* Neural Network Hero Animation - Improved Scatter Algorithm
|
||||
.neural-network-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Ensure neural network data nodes are clickable above hero content */
|
||||
.neural-network-container .data-node {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* Neural Mesh Background */
|
||||
.neural-mesh {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.mesh-canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
/* Data Constellation - Enhanced FOUC Prevention */
|
||||
.data-constellation {
|
||||
opacity: var(--data-node-opacity, 0) !important;
|
||||
visibility: var(--data-node-visibility, hidden) !important;
|
||||
transition: opacity 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
/* Base Data Node Styling with Enhanced FOUC Prevention */
|
||||
.data-node {
|
||||
position: absolute;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
cursor: pointer;
|
||||
animation: nodeFloat 6s ease-in-out infinite;
|
||||
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
z-index: 5;
|
||||
|
||||
/* Ultra-strong FOUC prevention */
|
||||
opacity: var(--data-node-opacity, 0) !important;
|
||||
visibility: var(--data-node-visibility, hidden) !important;
|
||||
top: var(--data-node-position, -9999px) !important;
|
||||
left: var(--data-node-position, -9999px) !important;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
/* ===== IMPROVED NEURAL SCATTER ALGORITHM ===== */
|
||||
/* Grid-based positioning system prevents overlaps completely */
|
||||
|
||||
/* Desktop Large Screens (1200px+) - Optimal Neural Distribution */
|
||||
@media (min-width: 1200px) {
|
||||
.data-constellation {
|
||||
--data-node-opacity: 1;
|
||||
--data-node-visibility: visible;
|
||||
opacity: 1 !important;
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
.data-node[class*="node-"] {
|
||||
--data-node-opacity: 1;
|
||||
--data-node-visibility: visible;
|
||||
--data-node-position: unset;
|
||||
opacity: 1 !important;
|
||||
visibility: visible !important;
|
||||
top: unset !important;
|
||||
left: unset !important;
|
||||
}
|
||||
|
||||
/* Core Service Nodes - Primary tier, largest spacing */
|
||||
.node-ml {
|
||||
top: 15%;
|
||||
right: 45%;
|
||||
animation-delay: 0s;
|
||||
z-index: 6;
|
||||
}
|
||||
|
||||
.node-ai {
|
||||
top: 55%;
|
||||
right: 8%;
|
||||
animation-delay: 1.5s;
|
||||
z-index: 6;
|
||||
}
|
||||
|
||||
.node-analytics {
|
||||
bottom: 20%;
|
||||
right: 35%;
|
||||
animation-delay: 3s;
|
||||
z-index: 6;
|
||||
}
|
||||
|
||||
.node-automation {
|
||||
bottom: 45%;
|
||||
right: 3%;
|
||||
animation-delay: 4.5s;
|
||||
z-index: 6;
|
||||
}
|
||||
/* Industry Nodes - Secondary tier, strategic placement */
|
||||
.node-finance {
|
||||
top: 18%;
|
||||
right: 20%;
|
||||
animation-delay: 0.8s;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.node-healthcare {
|
||||
top: 75%;
|
||||
right: 18%;
|
||||
animation-delay: 2.3s;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.node-retail {
|
||||
bottom: 8%;
|
||||
right: 15%;
|
||||
animation-delay: 3.8s;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.node-manufacturing {
|
||||
top: 35%;
|
||||
right: 58%;
|
||||
animation-delay: 5.3s;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
/* Strategic Nodes - Tertiary tier, fill remaining space */
|
||||
.node-agentic {
|
||||
top: 85%;
|
||||
right: 48%;
|
||||
animation-delay: 6.8s;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.node-marketing {
|
||||
top: 25%;
|
||||
right: 2%;
|
||||
animation-delay: 7.5s;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.node-media {
|
||||
bottom: 2%;
|
||||
right: 28%;
|
||||
animation-delay: 8.2s;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.node-travel {
|
||||
top: 65%;
|
||||
right: 52%;
|
||||
animation-delay: 9s;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.node-education {
|
||||
top: 45%;
|
||||
right: 25%;
|
||||
animation-delay: 10s;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.node-technology {
|
||||
top: 92%;
|
||||
right: 8%;
|
||||
animation-delay: 11s;
|
||||
z-index: 4;
|
||||
}
|
||||
/* Extended Nodes - Fill outer regions */
|
||||
.node-predictive {
|
||||
top: 28%;
|
||||
right: 68%;
|
||||
animation-delay: 12s;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.node-supply-chain {
|
||||
top: 68%;
|
||||
right: 68%;
|
||||
animation-delay: 13s;
|
||||
z-index: 3;
|
||||
}
|
||||
.node-risk {
|
||||
top: 15%;
|
||||
right: 52%;
|
||||
animation-delay: 14s;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
/* New Upper Area Nodes - Strategic positioning below navbar safe zone */
|
||||
.node-cloud-computing {
|
||||
top: 18%;
|
||||
right: 35%;
|
||||
animation-delay: 15s;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.node-cybersecurity {
|
||||
top: 25%;
|
||||
right: 65%;
|
||||
animation-delay: 16s;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.node-iot {
|
||||
top: 22%;
|
||||
right: 8%;
|
||||
animation-delay: 17s;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.node-blockchain {
|
||||
top: 35%;
|
||||
right: 75%;
|
||||
animation-delay: 18s;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.node-quantum {
|
||||
top: 18%;
|
||||
right: 25%;
|
||||
animation-delay: 19s;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.node-robotics {
|
||||
top: 38%;
|
||||
right: 38%;
|
||||
animation-delay: 20s;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.node-nlp {
|
||||
top: 25%;
|
||||
right: 82%;
|
||||
animation-delay: 21s;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.node-computer-vision {
|
||||
top: 22%;
|
||||
right: 12%;
|
||||
animation-delay: 22s;
|
||||
z-index: 3;
|
||||
}
|
||||
/* Additional Upper Right Area Nodes - Fill space below navbar */
|
||||
.node-deep-learning {
|
||||
top: 35%;
|
||||
right: 15%;
|
||||
animation-delay: 23s;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.node-neural-networks {
|
||||
top: 38%;
|
||||
right: 8%;
|
||||
animation-delay: 24s;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.node-data-science {
|
||||
top: 42%;
|
||||
right: 12%;
|
||||
animation-delay: 25s;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.node-machine-vision {
|
||||
top: 48%;
|
||||
right: 5%;
|
||||
animation-delay: 26s;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.node-edge-computing {
|
||||
top: 52%;
|
||||
right: 15%;
|
||||
animation-delay: 27s;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.node-digital-transformation {
|
||||
top: 58%;
|
||||
right: 22%;
|
||||
animation-delay: 28s;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.node-process-optimization {
|
||||
top: 62%;
|
||||
right: 12%;
|
||||
animation-delay: 29s;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.node-smart-analytics {
|
||||
top: 68%;
|
||||
right: 5%;
|
||||
animation-delay: 30s;
|
||||
z-index: 3;
|
||||
}
|
||||
}
|
||||
|
||||
/* Desktop Standard (769px - 1199px) - Balanced Distribution */
|
||||
@media (min-width: 769px) and (max-width: 1199px) {
|
||||
.data-constellation {
|
||||
--data-node-opacity: 1;
|
||||
--data-node-visibility: visible;
|
||||
opacity: 1 !important;
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
.data-node[class*="node-"] {
|
||||
--data-node-opacity: 1;
|
||||
--data-node-visibility: visible;
|
||||
--data-node-position: unset;
|
||||
opacity: 1 !important;
|
||||
visibility: visible !important;
|
||||
top: unset !important;
|
||||
left: unset !important;
|
||||
}
|
||||
|
||||
/* Core Service Nodes */
|
||||
.node-ml {
|
||||
top: 18%;
|
||||
right: 42%;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.node-ai {
|
||||
top: 52%;
|
||||
right: 12%;
|
||||
animation-delay: 1.5s;
|
||||
}
|
||||
|
||||
.node-analytics {
|
||||
bottom: 22%;
|
||||
right: 38%;
|
||||
animation-delay: 3s;
|
||||
}
|
||||
|
||||
.node-automation {
|
||||
bottom: 45%;
|
||||
right: 8%;
|
||||
animation-delay: 4.5s;
|
||||
}
|
||||
/* Industry Nodes */
|
||||
.node-finance {
|
||||
top: 18%;
|
||||
right: 18%;
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
|
||||
.node-healthcare {
|
||||
top: 72%;
|
||||
right: 22%;
|
||||
animation-delay: 2s;
|
||||
}
|
||||
|
||||
.node-retail {
|
||||
bottom: 8%;
|
||||
right: 18%;
|
||||
animation-delay: 3.5s;
|
||||
}
|
||||
|
||||
.node-manufacturing {
|
||||
top: 38%;
|
||||
right: 52%;
|
||||
animation-delay: 5s;
|
||||
}
|
||||
|
||||
/* Strategic Nodes - Limited set for medium screens */
|
||||
.node-agentic {
|
||||
top: 82%;
|
||||
right: 45%;
|
||||
animation-delay: 6.5s;
|
||||
}
|
||||
|
||||
.node-marketing {
|
||||
top: 28%;
|
||||
right: 2%;
|
||||
animation-delay: 7.5s;
|
||||
}
|
||||
.node-media {
|
||||
bottom: 2%;
|
||||
right: 28%;
|
||||
animation-delay: 8.5s;
|
||||
} /* Selected upper area nodes for medium screens */
|
||||
.node-cloud-computing {
|
||||
top: 22%;
|
||||
right: 35%;
|
||||
animation-delay: 9s;
|
||||
}
|
||||
|
||||
.node-cybersecurity {
|
||||
top: 25%;
|
||||
right: 62%;
|
||||
animation-delay: 10s;
|
||||
}
|
||||
|
||||
.node-iot {
|
||||
top: 22%;
|
||||
right: 5%;
|
||||
animation-delay: 11s;
|
||||
}
|
||||
|
||||
.node-deep-learning {
|
||||
top: 38%;
|
||||
right: 18%;
|
||||
animation-delay: 12s;
|
||||
}
|
||||
|
||||
.node-neural-networks {
|
||||
top: 42%;
|
||||
right: 8%;
|
||||
animation-delay: 13s;
|
||||
}
|
||||
|
||||
.node-data-science {
|
||||
top: 48%;
|
||||
right: 15%;
|
||||
animation-delay: 14s;
|
||||
}
|
||||
|
||||
/* Hide extended nodes on medium screens to prevent crowding */
|
||||
.node-travel, .node-education, .node-technology,
|
||||
.node-predictive, .node-supply-chain, .node-risk,
|
||||
.node-blockchain, .node-quantum, .node-robotics,
|
||||
.node-nlp, .node-computer-vision, .node-machine-vision,
|
||||
.node-edge-computing, .node-digital-transformation,
|
||||
.node-process-optimization, .node-smart-analytics {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Tablet (481px - 768px) - Optimized Distribution */
|
||||
@media (min-width: 481px) and (max-width: 768px) {
|
||||
.data-constellation {
|
||||
--data-node-opacity: 1;
|
||||
--data-node-visibility: visible;
|
||||
opacity: 1 !important;
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
.data-node {
|
||||
width: 65px;
|
||||
height: 65px;
|
||||
--data-node-opacity: 1;
|
||||
--data-node-visibility: visible;
|
||||
--data-node-position: unset;
|
||||
opacity: 1 !important;
|
||||
visibility: visible !important;
|
||||
top: unset !important;
|
||||
left: unset !important;
|
||||
}
|
||||
|
||||
/* Core Services - Essential nodes only */
|
||||
.node-ml {
|
||||
top: 20%;
|
||||
right: 35%;
|
||||
}
|
||||
|
||||
.node-ai {
|
||||
top: 25%;
|
||||
right: 8%;
|
||||
}
|
||||
|
||||
.node-analytics {
|
||||
bottom: 22%;
|
||||
right: 32%;
|
||||
}
|
||||
|
||||
.node-automation {
|
||||
bottom: 20%;
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
/* Key Industries */
|
||||
.node-finance {
|
||||
top: 10%;
|
||||
right: 15%;
|
||||
}
|
||||
|
||||
.node-healthcare {
|
||||
bottom: 15%;
|
||||
right: 15%;
|
||||
} /* Hide less critical nodes on tablet */
|
||||
.node-retail, .node-manufacturing, .node-agentic,
|
||||
.node-marketing, .node-media, .node-travel,
|
||||
.node-education, .node-technology, .node-predictive,
|
||||
.node-supply-chain, .node-risk, .node-cloud-computing,
|
||||
.node-cybersecurity, .node-iot, .node-blockchain,
|
||||
.node-quantum, .node-robotics, .node-nlp, .node-computer-vision,
|
||||
.node-deep-learning, .node-neural-networks, .node-data-science,
|
||||
.node-machine-vision, .node-edge-computing, .node-digital-transformation,
|
||||
.node-process-optimization, .node-smart-analytics {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile (≤480px) - Minimal Essential Distribution */
|
||||
@media (max-width: 480px) {
|
||||
.data-constellation {
|
||||
--data-node-opacity: 1;
|
||||
--data-node-visibility: visible;
|
||||
opacity: 1 !important;
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
.data-node {
|
||||
width: 55px;
|
||||
height: 55px;
|
||||
--data-node-opacity: 1;
|
||||
--data-node-visibility: visible;
|
||||
--data-node-position: unset;
|
||||
opacity: 1 !important;
|
||||
visibility: visible !important;
|
||||
top: unset !important;
|
||||
left: unset !important;
|
||||
}
|
||||
|
||||
/* Core essentials only - Maximum spacing */
|
||||
.node-ml {
|
||||
top: 22%;
|
||||
right: 25%;
|
||||
}
|
||||
|
||||
.node-ai {
|
||||
top: 25%;
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
.node-analytics {
|
||||
bottom: 25%;
|
||||
right: 25%;
|
||||
}
|
||||
|
||||
.node-automation {
|
||||
bottom: 22%;
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
/* Single industry representative */
|
||||
.node-finance {
|
||||
top: 12%;
|
||||
right: 10%;
|
||||
} /* Hide all other nodes on mobile */
|
||||
.node-healthcare, .node-retail, .node-manufacturing,
|
||||
.node-agentic, .node-marketing, .node-media,
|
||||
.node-travel, .node-education, .node-technology,
|
||||
.node-predictive, .node-supply-chain, .node-risk,
|
||||
.node-cloud-computing, .node-cybersecurity, .node-iot,
|
||||
.node-blockchain, .node-quantum, .node-robotics,
|
||||
.node-nlp, .node-computer-vision, .node-deep-learning,
|
||||
.node-neural-networks, .node-data-science, .node-machine-vision,
|
||||
.node-edge-computing, .node-digital-transformation,
|
||||
.node-process-optimization, .node-smart-analytics {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== NODE VISUAL STYLING ===== */
|
||||
|
||||
.node-core {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2));
|
||||
border-radius: 50%;
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
animation: nodeCorePulse 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Industry Node Cores */
|
||||
.industry-core {
|
||||
background: linear-gradient(135deg, rgba(236, 72, 153, 0.2), rgba(59, 130, 246, 0.2)) !important;
|
||||
border: 1px solid rgba(236, 72, 153, 0.3) !important;
|
||||
width: 55px !important;
|
||||
height: 55px !important;
|
||||
}
|
||||
|
||||
.industry-core:hover {
|
||||
background: linear-gradient(135deg, rgba(236, 72, 153, 0.4), rgba(59, 130, 246, 0.4)) !important;
|
||||
box-shadow: 0 0 35px rgba(236, 72, 153, 0.5) !important;
|
||||
}
|
||||
|
||||
/* Specialty Node Core */
|
||||
.specialty-core {
|
||||
background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(59, 130, 246, 0.2)) !important;
|
||||
border: 1px solid rgba(34, 197, 94, 0.3) !important;
|
||||
width: 55px !important;
|
||||
height: 55px !important;
|
||||
}
|
||||
|
||||
.specialty-core:hover {
|
||||
background: linear-gradient(135deg, rgba(34, 197, 94, 0.4), rgba(59, 130, 246, 0.4)) !important;
|
||||
box-shadow: 0 0 35px rgba(34, 197, 94, 0.5) !important;
|
||||
}
|
||||
|
||||
.node-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 2;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.node-icon img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
|
||||
}
|
||||
|
||||
.node-label {
|
||||
position: absolute;
|
||||
bottom: -25px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
text-align: center;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
/* ===== ANIMATIONS ===== */
|
||||
|
||||
@keyframes nodeFloat {
|
||||
0%, 100% {
|
||||
transform: translateY(0px) translateX(0px);
|
||||
}
|
||||
25% {
|
||||
transform: translateY(-8px) translateX(3px);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-15px) translateX(-2px);
|
||||
}
|
||||
75% {
|
||||
transform: translateY(-10px) translateX(4px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes nodeCorePulse {
|
||||
0%, 100% {
|
||||
box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 30px rgba(139, 92, 246, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== INTERACTION EFFECTS ===== */
|
||||
|
||||
.data-node:hover {
|
||||
transform: scale(1.1);
|
||||
z-index: 15;
|
||||
}
|
||||
|
||||
.data-node:hover .node-core {
|
||||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.4), rgba(139, 92, 246, 0.4));
|
||||
box-shadow: 0 0 40px rgba(59, 130, 246, 0.6);
|
||||
}
|
||||
|
||||
.data-node:hover .node-label {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Hover glow effect */
|
||||
.data-node:hover {
|
||||
filter: drop-shadow(0 0 15px rgba(59, 130, 246, 0.6));
|
||||
}
|
||||
|
||||
/* ===== MORPHING GEOMETRIC PATTERNS ===== */
|
||||
|
||||
.geometric-morphs {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 2;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.morph-shape {
|
||||
position: absolute;
|
||||
background: linear-gradient(45deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1), rgba(236, 72, 153, 0.1));
|
||||
border-radius: 20px;
|
||||
animation: morphTransform 20s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Optimized morph positioning to avoid node collision zones */
|
||||
.morph-1 {
|
||||
top: 5%;
|
||||
left: 5%;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.morph-2 {
|
||||
top: 8%;
|
||||
left: 85%;
|
||||
width: 35px;
|
||||
height: 70px;
|
||||
animation-delay: 4s;
|
||||
}
|
||||
|
||||
.morph-3 {
|
||||
bottom: 15%;
|
||||
left: 5%;
|
||||
width: 70px;
|
||||
height: 35px;
|
||||
animation-delay: 8s;
|
||||
}
|
||||
|
||||
.morph-4 {
|
||||
bottom: 8%;
|
||||
left: 85%;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
animation-delay: 12s;
|
||||
}
|
||||
|
||||
.morph-5 {
|
||||
top: 40%;
|
||||
left: 1%;
|
||||
width: 25px;
|
||||
height: 80px;
|
||||
animation-delay: 16s;
|
||||
}
|
||||
|
||||
@keyframes morphTransform {
|
||||
0%, 100% {
|
||||
transform: rotate(0deg) scale(1);
|
||||
border-radius: 20px;
|
||||
}
|
||||
25% {
|
||||
transform: rotate(90deg) scale(1.2);
|
||||
border-radius: 50%;
|
||||
}
|
||||
50% {
|
||||
transform: rotate(180deg) scale(0.8);
|
||||
border-radius: 10px;
|
||||
}
|
||||
75% {
|
||||
transform: rotate(270deg) scale(1.1);
|
||||
border-radius: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== DATA STREAMS ===== */
|
||||
|
||||
.data-streams {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 3;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.stream {
|
||||
position: absolute;
|
||||
width: 2px;
|
||||
background: linear-gradient(to bottom,
|
||||
transparent,
|
||||
rgba(59, 130, 246, 0.6),
|
||||
rgba(139, 92, 246, 0.4),
|
||||
transparent
|
||||
);
|
||||
animation: streamFlow 8s linear infinite;
|
||||
}
|
||||
|
||||
/* Optimized stream positioning to complement node scatter */
|
||||
.stream-1 {
|
||||
left: 25%;
|
||||
height: 180px;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.stream-2 {
|
||||
left: 40%;
|
||||
height: 120px;
|
||||
animation-delay: 2s;
|
||||
}
|
||||
|
||||
.stream-3 {
|
||||
left: 70%;
|
||||
height: 160px;
|
||||
animation-delay: 4s;
|
||||
}
|
||||
|
||||
.stream-4 {
|
||||
left: 85%;
|
||||
height: 100px;
|
||||
animation-delay: 6s;
|
||||
}
|
||||
|
||||
@keyframes streamFlow {
|
||||
0% {
|
||||
top: -200px;
|
||||
opacity: 0;
|
||||
}
|
||||
10% {
|
||||
opacity: 1;
|
||||
}
|
||||
90% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
top: 100%;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== RESPONSIVE CORE ADJUSTMENTS ===== */
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.neural-network-container {
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
.node-core, .industry-core, .specialty-core {
|
||||
width: 45px !important;
|
||||
height: 45px !important;
|
||||
}
|
||||
|
||||
.node-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.node-label {
|
||||
font-size: 11px;
|
||||
bottom: -20px;
|
||||
}
|
||||
|
||||
/* Reduce morph shapes on mobile */
|
||||
.morph-shape {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.morph-1, .morph-3 {
|
||||
display: block;
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.neural-network-container {
|
||||
height: 450px;
|
||||
}
|
||||
|
||||
.node-core, .industry-core, .specialty-core {
|
||||
width: 40px !important;
|
||||
height: 40px !important;
|
||||
}
|
||||
|
||||
.node-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
} */
|
||||
457
css/style.css
457
css/style.css
@@ -80,9 +80,8 @@
|
||||
--agentic-ai-primary-hover: #db2777;--primary-color-glow: rgba(109, 40, 217, 0.5);
|
||||
--accent: #a2abff;
|
||||
--accent-rgb: 162, 171, 255;
|
||||
|
||||
/* Spacing variables */
|
||||
--section-margin: 4rem;
|
||||
/* Spacing variables */
|
||||
--section-margin: 2rem;
|
||||
--section-padding: 1rem;
|
||||
--card-padding: 25px;
|
||||
--grid-gap: 30px;
|
||||
@@ -393,19 +392,7 @@ section h2 {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tech-section-spacer {
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tech-marquee-divider {
|
||||
height: 3px;
|
||||
width: 60%;
|
||||
max-width: 800px;
|
||||
background: linear-gradient(90deg, transparent, rgba(var(--primary-color-rgb), 0.5), transparent);
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#technologies .section-heading::before {
|
||||
content: "";
|
||||
@@ -453,7 +440,7 @@ section h2 {
|
||||
.agentic-ai-header h1 {
|
||||
font-size: 3em;
|
||||
margin-bottom: 20px;
|
||||
color: var(--primary-color);
|
||||
/* Inherit the beautiful gradient and glow from main h1 styling */
|
||||
}
|
||||
|
||||
.agentic-ai-header p {
|
||||
@@ -606,7 +593,6 @@ section h2 {
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
padding: 0.3rem 1rem; /* Adjusted padding */
|
||||
border: 2px solid rgba(90, 107, 255, 0.3);
|
||||
border-radius: 10px;
|
||||
transition: all 0.3s ease;
|
||||
text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.4);
|
||||
@@ -617,7 +603,6 @@ section h2 {
|
||||
}
|
||||
|
||||
.logo:hover {
|
||||
border-color: rgba(140, 154, 255, 0.6);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(140, 154, 255, 0.2);
|
||||
}
|
||||
@@ -682,6 +667,41 @@ section h2 {
|
||||
left: 7.5%;
|
||||
}
|
||||
|
||||
/* Hamburger Menu Styles */
|
||||
.hamburger-menu {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
.hamburger-line {
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background: #ffffff;
|
||||
border-radius: 2px;
|
||||
transition: all 0.3s ease;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.hamburger-menu.active .hamburger-line:nth-child(1) {
|
||||
transform: translateY(9px) rotate(45deg);
|
||||
}
|
||||
|
||||
.hamburger-menu.active .hamburger-line:nth-child(2) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.hamburger-menu.active .hamburger-line:nth-child(3) {
|
||||
transform: translateY(-9px) rotate(-45deg);
|
||||
}
|
||||
|
||||
.hero-section,
|
||||
#automation-flows-hero {
|
||||
padding-top: 12rem;
|
||||
@@ -819,7 +839,9 @@ section h2 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
padding-top: 8rem;
|
||||
padding-top: 4rem !important;
|
||||
padding-bottom: 0 !important;
|
||||
margin-top: 0 !important;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
@@ -833,8 +855,8 @@ section h2 {
|
||||
max-width: var(--max-w);
|
||||
margin: 0 auto;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
padding: 0 4%;
|
||||
align-items: flex-start;
|
||||
padding: 10rem 4% 0 4%;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
@@ -967,13 +989,19 @@ section h2 {
|
||||
|
||||
.section-heading {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 600;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
margin: var(--gap) 0;
|
||||
letter-spacing: 0.5px;
|
||||
letter-spacing: 0.7px;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
font-family: 'Space Grotesk', sans-serif;
|
||||
background: linear-gradient(90deg, #8A9FFF 0%, #C0CFFF 40%, #FFFFFF 70%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
text-shadow: 0px 4px 10px rgba(124, 137, 255, 0.8), 0px 2px 5px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
h1,
|
||||
@@ -1018,52 +1046,30 @@ h6 {
|
||||
background: linear-gradient(90deg, #5a6bff 0%, #a2b0ff 70%, #ffffff 100%);
|
||||
}
|
||||
|
||||
/* Technology Marquee Styling */
|
||||
.tech-marquee-container {
|
||||
/* Modern Technology Cards Animation */
|
||||
.tech-cards-container {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
margin: 0 0 25px;
|
||||
padding: 30px 0;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
|
||||
backdrop-filter: blur(8px);
|
||||
transition: transform 0.5s ease-out;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.tech-marquee-reversed {
|
||||
margin-top: 0;
|
||||
margin-bottom: 40px;
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.15);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.tech-marquee {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
padding: 20px 0;
|
||||
max-width: none;
|
||||
padding: 60px 0;
|
||||
background: linear-gradient(135deg, rgba(0, 0, 0, 0.1), rgba(20, 20, 40, 0.2));
|
||||
border-radius: 20px;
|
||||
margin: 40px 0;
|
||||
box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.tech-marquee-content {
|
||||
.tech-cards-track {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
animation: scrollTech 60s linear infinite;
|
||||
animation: techCardsFlow 150s linear infinite;
|
||||
will-change: transform;
|
||||
gap: 70px; /* Further increased gap between cards */
|
||||
}
|
||||
|
||||
.tech-marquee-content-reversed {
|
||||
animation: scrollTechReversed 60s linear infinite;
|
||||
}
|
||||
|
||||
.tech-marquee-content:hover {
|
||||
.tech-cards-track:hover {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
@keyframes scrollTech {
|
||||
@keyframes techCardsFlow {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
@@ -1072,47 +1078,136 @@ h6 {
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scrollTechReversed {
|
||||
0% {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Add an expanding effect on hover to enhance full-width experience */
|
||||
.tech-marquee-container:hover {
|
||||
transform: scale(1.02);
|
||||
box-shadow: 0 15px 40px rgba(var(--primary-color-rgb), 0.3);
|
||||
}
|
||||
|
||||
.tech-marquee-item {
|
||||
.tech-card {
|
||||
flex: 0 0 auto;
|
||||
width: 240px;
|
||||
height: 220px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
transform-style: preserve-3d;
|
||||
margin: 15px 0; /* Increased top/bottom margin */
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.tech-card-inner {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(20, 25, 45, 0.7); /* Darker, more distinct background */
|
||||
border: 2px solid rgba(var(--primary-color-rgb), 0.3);
|
||||
border-radius: 16px;
|
||||
padding: 25px 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 0 35px;
|
||||
transition: transform 0.3s ease;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
backdrop-filter: blur(20px);
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow:
|
||||
0 10px 20px rgba(0, 0, 0, 0.3),
|
||||
0 4px 8px rgba(0, 0, 0, 0.2),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.tech-marquee-item:hover {
|
||||
.tech-card-inner::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(45deg,
|
||||
transparent 30%,
|
||||
rgba(var(--primary-color-rgb), 0.1) 50%,
|
||||
transparent 70%);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.tech-card:hover .tech-card-inner::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.tech-card:hover {
|
||||
transform: translateY(-10px);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.tech-icon-container {
|
||||
.tech-card:hover .tech-card-inner {
|
||||
background: linear-gradient(135deg,
|
||||
rgba(var(--primary-color-rgb), 0.2) 0%,
|
||||
rgba(255, 255, 255, 0.1) 50%,
|
||||
rgba(var(--primary-color-rgb), 0.1) 100%);
|
||||
border-color: rgba(var(--primary-color-rgb), 0.5);
|
||||
box-shadow:
|
||||
0 20px 60px rgba(var(--primary-color-rgb), 0.3),
|
||||
0 0 30px rgba(var(--primary-color-rgb), 0.2),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.tech-icon-wrapper {
|
||||
position: relative;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 12px;
|
||||
position: relative;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* Removed decorative overlay - displaying raw icons */
|
||||
.tech-icon-wrapper::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: radial-gradient(circle, rgba(var(--primary-color-rgb), 0.2) 0%, transparent 70%);
|
||||
border-radius: 50%;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.tech-icon-container:hover {
|
||||
transform: scale(1.1);
|
||||
.tech-card:hover .tech-icon-wrapper::before {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.tech-card:hover .tech-icon-wrapper {
|
||||
transform: scale(1.1) rotateY(15deg);
|
||||
}
|
||||
|
||||
.tech-card h3 {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
color: var(--fg);
|
||||
transition: all 0.3s ease;
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.tech-card:hover h3 {
|
||||
color: rgba(var(--primary-color-rgb), 1);
|
||||
text-shadow: 0 0 10px rgba(var(--primary-color-rgb), 0.5);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.tech-card p {
|
||||
font-size: 0.9rem;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
transition: all 0.3s ease;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.tech-card:hover p {
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.tech-icon:hover {
|
||||
@@ -1209,15 +1304,7 @@ h6 {
|
||||
background-color: rgba(255, 255, 255, 0.95) !important;
|
||||
}
|
||||
|
||||
.tech-marquee-item p {
|
||||
margin-top: 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
text-align: center;
|
||||
color: var(--fg);
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.5px;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
|
||||
/* Icons for each technology - Using direct image URLs from official sources */
|
||||
.tech-icon.ollama {
|
||||
@@ -1435,62 +1522,106 @@ h6 {
|
||||
|
||||
/* Removed pulse hover effect - displaying raw icons */
|
||||
|
||||
.tech-marquee-item {
|
||||
animation: float 3s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.tech-marquee-item:nth-child(odd) {
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
|
||||
.tech-marquee-item:nth-child(even) {
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
.tech-marquee-item:hover {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
/* Removed glow effects - displaying raw icons */
|
||||
|
||||
/* Custom loading animation for the technology marquee */
|
||||
@keyframes techLoading {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.tech-marquee-container {
|
||||
animation: techLoading 0.8s ease-out forwards;
|
||||
}
|
||||
|
||||
/* Add a subtle particle effect in the background */
|
||||
.tech-marquee-container::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.03) 0%, transparent 8%),
|
||||
radial-gradient(circle at 30% 50%, rgba(255, 255, 255, 0.03) 0%, transparent 8%),
|
||||
radial-gradient(circle at 70% 80%, rgba(255, 255, 255, 0.03) 0%, transparent 8%),
|
||||
radial-gradient(circle at 90% 10%, rgba(255, 255, 255, 0.03) 0%, transparent 8%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Removed highlight glow effects - displaying raw icons */
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.tech-marquee-item {
|
||||
margin: 0 15px;
|
||||
/* Hamburger menu display */
|
||||
.hamburger-menu {
|
||||
display: flex;
|
||||
}
|
||||
/* Hide nav links on mobile by default */
|
||||
.nav-links {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: rgba(10, 10, 25, 0.95);
|
||||
backdrop-filter: blur(20px);
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 2rem;
|
||||
z-index: 1000;
|
||||
transition: left 0.3s ease;
|
||||
padding-top: 80px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Mobile menu backdrop */
|
||||
.nav-links::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(135deg, rgba(10, 10, 25, 0.9) 0%, rgba(20, 20, 40, 0.95) 100%);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* Show nav links when active */
|
||||
.nav-links.active {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/* Style nav links for mobile */
|
||||
.nav-links li {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
font-size: 1.2rem;
|
||||
padding: 1rem 2rem;
|
||||
width: 100%;
|
||||
display: block;
|
||||
border-radius: 0;
|
||||
}
|
||||
/* Dropdown menu adjustments for mobile */
|
||||
.dropdown-menu {
|
||||
position: static;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: none;
|
||||
margin-top: 1rem;
|
||||
background: rgba(20, 20, 40, 0.8);
|
||||
border-radius: 8px;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.3s ease;
|
||||
width: 90%;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.dropdown-menu.show {
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
.dropdown-menu a {
|
||||
padding: 1.2rem 1.5rem;
|
||||
font-size: 1rem;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.dropdown-menu a:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* Improve dropdown icons and text layout on mobile */
|
||||
.dropdown-item-content {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.dropdown-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-right: 0;
|
||||
}
|
||||
/* Tech marquee adjustments */
|
||||
|
||||
.tech-icon {
|
||||
min-width: 35px;
|
||||
@@ -1498,17 +1629,9 @@ h6 {
|
||||
max-width: 65px;
|
||||
max-height: 65px;
|
||||
}
|
||||
|
||||
.tech-marquee-item p {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.tech-marquee-item {
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.tech-icon {
|
||||
min-width: 30px;
|
||||
min-height: 30px;
|
||||
@@ -1714,7 +1837,6 @@ h6 {
|
||||
text-align: center;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1); /* Light border */
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
/* End of Footer Styles */
|
||||
|
||||
@@ -1767,7 +1889,7 @@ h6 {
|
||||
gap: 2rem;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.contact-form-container,
|
||||
@@ -1782,16 +1904,15 @@ h6 {
|
||||
}
|
||||
|
||||
.contact-form-container {
|
||||
flex: 2;
|
||||
flex: 1;
|
||||
min-width: 300px;
|
||||
max-width: 600px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.contact-info-container {
|
||||
flex: 1;
|
||||
min-width: 250px;
|
||||
max-width: 400px;
|
||||
padding: 2rem;
|
||||
min-width: 300px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.contact-details {
|
||||
@@ -1927,11 +2048,7 @@ h6 {
|
||||
.case-studies-hero h1 {
|
||||
font-size: 2.8rem;
|
||||
margin-bottom: 1rem;
|
||||
color: #ffffff;
|
||||
text-shadow: none;
|
||||
background: none;
|
||||
-webkit-background-clip: unset;
|
||||
background-clip: unset;
|
||||
/* Inherit the beautiful gradient and glow from main h1 styling */
|
||||
font-family: 'Space Grotesk', sans-serif;
|
||||
}
|
||||
|
||||
@@ -2206,6 +2323,7 @@ h6 {
|
||||
.generative-ai-header h1 {
|
||||
font-size: 3em;
|
||||
margin-bottom: 20px;
|
||||
/* Inherit the beautiful gradient and glow from main h1 styling */
|
||||
}
|
||||
|
||||
.generative-ai-header p {
|
||||
@@ -2325,7 +2443,7 @@ h6 {
|
||||
font-family: 'Space Grotesk', sans-serif;
|
||||
font-size: 4rem;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
/* Inherit the beautiful gradient and glow from main h1 styling */
|
||||
margin-bottom: 20px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
@@ -2527,12 +2645,6 @@ h6 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.search-filter {
|
||||
|
||||
.dropdown-filter .dropdown-toggle-filter {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.search-filter {
|
||||
max-width: none;
|
||||
}
|
||||
@@ -2637,9 +2749,8 @@ h6 {
|
||||
height: 55px;
|
||||
max-width: 170px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
.logo {
|
||||
min-height: 50px;
|
||||
padding: 0.3rem 0.6rem;
|
||||
}
|
||||
}}
|
||||
}
|
||||
@@ -1,24 +0,0 @@
|
||||
# PowerShell script to fix the Education menu links in all Industry HTML files
|
||||
|
||||
# Get all HTML files in the Industries directory
|
||||
$industryFiles = Get-ChildItem -Path ".\Industries" -Filter *.html
|
||||
|
||||
foreach ($file in $industryFiles) {
|
||||
Write-Host "Processing: $($file.FullName)"
|
||||
|
||||
# Read the content of the file
|
||||
$content = Get-Content -Path $file.FullName -Raw
|
||||
|
||||
# Replace Education menu links with correct paths
|
||||
$content = $content -replace '<li><a href="#"><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>', '<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>'
|
||||
|
||||
$content = $content -replace '<li><a href="#"><div class="dropdown-item-content"><img src="../assets/indi training.png" alt="Individual Trainings Icon" class="dropdown-icon" /><div class="text-content"><span class="item-title">Individual Trainings</span>', '<li><a href="../Education/individual-trainings.html"><div class="dropdown-item-content"><img src="../assets/indi training.png" alt="Individual Trainings Icon" class="dropdown-icon" /><div class="text-content"><span class="item-title">Individual Trainings</span>'
|
||||
|
||||
$content = $content -replace '<li><a href="#"><div class="dropdown-item-content"><img src="../assets/corpo training.png" alt="Corporate Trainings Icon" class="dropdown-icon" /><div class="text-content"><span class="item-title">Corporate Trainings</span>', '<li><a href="../Education/corporate-trainings.html"><div class="dropdown-item-content"><img src="../assets/corpo training.png" alt="Corporate Trainings Icon" class="dropdown-icon" /><div class="text-content"><span class="item-title">Corporate Trainings</span>'
|
||||
|
||||
# Save the modified content back to the file
|
||||
$content | Set-Content -Path $file.FullName
|
||||
Write-Host "Fixed Education links in: $($file.FullName)"
|
||||
}
|
||||
|
||||
Write-Host "`nAll Industry pages have been updated with correct Education links."
|
||||
888
index.html
888
index.html
@@ -1,49 +1,67 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<head> <meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
|
||||
<meta http-equiv="Pragma" content="no-cache" />
|
||||
<meta http-equiv="Expires" content="0" />
|
||||
<title>Gyannetra — AI Services & Solutions</title>
|
||||
<!-- Critical FOUC Prevention - Must be first before any CSS -->
|
||||
|
||||
<link rel="stylesheet" href="css/style.css?v=202412191300" />
|
||||
<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">
|
||||
|
||||
<!-- Navbar scroll effect styles -->
|
||||
<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;
|
||||
.site-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
background: transparent !important;
|
||||
backdrop-filter: blur(0px);
|
||||
-webkit-backdrop-filter: blur(0px);
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border-bottom: 1px solid transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
/* Prevent any flash during CSS loading */
|
||||
.data-constellation {
|
||||
opacity: 0 !important;
|
||||
visibility: hidden !important;
|
||||
|
||||
.site-header.scrolled {
|
||||
background: transparent !important;
|
||||
backdrop-filter: blur(30px);
|
||||
-webkit-backdrop-filter: blur(30px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
padding: 1rem 2rem;
|
||||
max-width: none !important;
|
||||
margin: 0 !important;
|
||||
background: transparent !important;
|
||||
border-radius: 0 !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Override any existing navbar container styles */
|
||||
.site-header .navbar,
|
||||
.site-header .container,
|
||||
.navbar .container {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
/* Ensure body has top padding to account for fixed navbar */
|
||||
body {
|
||||
padding-top: 80px;
|
||||
}
|
||||
</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 -->
|
||||
<!-- Enable data nodes after all CSS is loaded -->
|
||||
<script>
|
||||
// Wait for all stylesheets to load before enabling nodes
|
||||
function enableDataNodes() {
|
||||
@@ -119,10 +137,18 @@
|
||||
<div class="overlay"></div>
|
||||
<div class="noise"></div>
|
||||
</div> <!-- NAVBAR --> <header class="site-header">
|
||||
<nav class="navbar container">
|
||||
<nav class="navbar">
|
||||
<a href="index.html" class="logo">
|
||||
<img src="assets/Company Icons/GN Name logo.svg" alt="Gyannetra Logo" class="logo-img">
|
||||
</a>
|
||||
|
||||
<!-- Hamburger menu button for mobile -->
|
||||
<button class="hamburger-menu" aria-label="Toggle menu">
|
||||
<span class="hamburger-line"></span>
|
||||
<span class="hamburger-line"></span>
|
||||
<span class="hamburger-line"></span>
|
||||
</button>
|
||||
|
||||
<ul class="nav-links">
|
||||
<li class="dropdown"><a href="#" class="nav-link">Services ▾</a>
|
||||
<ul class="dropdown-menu services-dropdown">
|
||||
@@ -158,266 +184,11 @@
|
||||
</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">
|
||||
<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 -->
|
||||
@@ -426,303 +197,273 @@
|
||||
<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">
|
||||
<!-- Tech Cards Container -->
|
||||
<div class="tech-cards-container">
|
||||
<div class="tech-cards-track">
|
||||
<!-- First row of cards -->
|
||||
<div class="tech-card" data-tech="ollama">
|
||||
<div class="tech-card-inner">
|
||||
<div class="tech-icon-wrapper">
|
||||
<div class="tech-icon ollama"></div>
|
||||
</div>
|
||||
<p>Ollama</p>
|
||||
<h3>Ollama</h3>
|
||||
<p>Local LLM deployment</p>
|
||||
</div>
|
||||
<div class="tech-marquee-item">
|
||||
<div class="tech-icon-container">
|
||||
</div>
|
||||
<div class="tech-card" data-tech="langchain">
|
||||
<div class="tech-card-inner">
|
||||
<div class="tech-icon-wrapper">
|
||||
<div class="tech-icon langchain"></div>
|
||||
</div>
|
||||
<p>LangChain</p>
|
||||
<h3>LangChain</h3>
|
||||
<p>LLM application framework</p>
|
||||
</div>
|
||||
<div class="tech-marquee-item">
|
||||
<div class="tech-icon-container">
|
||||
<div class="tech-icon chroma"></div>
|
||||
</div>
|
||||
|
||||
<div class="tech-card" data-tech="openai">
|
||||
<div class="tech-card-inner">
|
||||
<div class="tech-icon-wrapper">
|
||||
<div class="tech-icon openai"></div>
|
||||
</div>
|
||||
<p>Chroma</p>
|
||||
<h3>OpenAI</h3>
|
||||
<p>Advanced AI models</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>
|
||||
|
||||
<div class="tech-card" data-tech="pytorch">
|
||||
<div class="tech-card-inner">
|
||||
<div class="tech-icon-wrapper">
|
||||
<div class="tech-icon pytorch"></div>
|
||||
</div>
|
||||
<p>PyTorch</p>
|
||||
<h3>PyTorch</h3>
|
||||
<p>Deep learning framework</p>
|
||||
</div>
|
||||
<div class="tech-marquee-item">
|
||||
<div class="tech-icon-container">
|
||||
</div>
|
||||
|
||||
<div class="tech-card" data-tech="tensorflow">
|
||||
<div class="tech-card-inner">
|
||||
<div class="tech-icon-wrapper">
|
||||
<div class="tech-icon tensorflow"></div>
|
||||
</div>
|
||||
<p>TensorFlow</p>
|
||||
<h3>TensorFlow</h3>
|
||||
<p>ML platform</p>
|
||||
</div>
|
||||
<div class="tech-marquee-item">
|
||||
<div class="tech-icon-container">
|
||||
</div>
|
||||
|
||||
<div class="tech-card" data-tech="huggingface">
|
||||
<div class="tech-card-inner">
|
||||
<div class="tech-icon-wrapper">
|
||||
<div class="tech-icon huggingface"></div>
|
||||
</div>
|
||||
<h3>Hugging Face</h3>
|
||||
<p>ML model hub</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tech-card" data-tech="pinecone">
|
||||
<div class="tech-card-inner">
|
||||
<div class="tech-icon-wrapper">
|
||||
<div class="tech-icon pinecone"></div>
|
||||
</div>
|
||||
<h3>Pinecone</h3>
|
||||
<p>Vector database</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tech-card" data-tech="chroma">
|
||||
<div class="tech-card-inner">
|
||||
<div class="tech-icon-wrapper">
|
||||
<div class="tech-icon chroma"></div>
|
||||
</div>
|
||||
<h3>Chroma</h3>
|
||||
<p>Embedding database</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tech-card" data-tech="anthropic">
|
||||
<div class="tech-card-inner">
|
||||
<div class="tech-icon-wrapper">
|
||||
<div class="tech-icon anthropic"></div>
|
||||
</div>
|
||||
<h3>Anthropic</h3>
|
||||
<p>Claude AI models</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tech-card" data-tech="gemini">
|
||||
<div class="tech-card-inner">
|
||||
<div class="tech-icon-wrapper">
|
||||
<div class="tech-icon gemini"></div>
|
||||
</div>
|
||||
<h3>Gemini</h3>
|
||||
<p>Google AI models</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tech-card" data-tech="llama">
|
||||
<div class="tech-card-inner">
|
||||
<div class="tech-icon-wrapper">
|
||||
<div class="tech-icon llama"></div>
|
||||
</div>
|
||||
<p>Llama</p>
|
||||
<h3>Llama</h3>
|
||||
<p>Meta's LLM</p>
|
||||
</div>
|
||||
<div class="tech-marquee-item">
|
||||
<div class="tech-icon-container">
|
||||
<div class="tech-icon milvus"></div>
|
||||
</div>
|
||||
|
||||
<div class="tech-card" data-tech="mistral">
|
||||
<div class="tech-card-inner">
|
||||
<div class="tech-icon-wrapper">
|
||||
<div class="tech-icon mistral"></div>
|
||||
</div>
|
||||
<p>Milvus</p>
|
||||
<h3>Mistral AI</h3>
|
||||
<p>European AI leader</p>
|
||||
</div>
|
||||
<div class="tech-marquee-item">
|
||||
<div class="tech-icon-container">
|
||||
</div>
|
||||
|
||||
<div class="tech-card" data-tech="llamaindex">
|
||||
<div class="tech-card-inner">
|
||||
<div class="tech-icon-wrapper">
|
||||
<div class="tech-icon llamaindex"></div>
|
||||
</div>
|
||||
<h3>LlamaIndex</h3>
|
||||
<p>Data framework</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tech-card" data-tech="weaviate">
|
||||
<div class="tech-card-inner">
|
||||
<div class="tech-icon-wrapper">
|
||||
<div class="tech-icon weaviate"></div>
|
||||
</div>
|
||||
<h3>Weaviate</h3>
|
||||
<p>Vector search engine</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tech-card" data-tech="qdrant">
|
||||
<div class="tech-card-inner">
|
||||
<div class="tech-icon-wrapper">
|
||||
<div class="tech-icon qdrant"></div>
|
||||
</div>
|
||||
<h3>Qdrant</h3>
|
||||
<p>Vector similarity search</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tech-card" data-tech="docker">
|
||||
<div class="tech-card-inner">
|
||||
<div class="tech-icon-wrapper">
|
||||
<div class="tech-icon docker"></div>
|
||||
</div>
|
||||
<p>Docker</p>
|
||||
<h3>Docker</h3>
|
||||
<p>Containerization</p>
|
||||
</div>
|
||||
|
||||
<!-- Duplicated set for seamless looping -->
|
||||
<div class="tech-marquee-item">
|
||||
<div class="tech-icon-container">
|
||||
</div>
|
||||
|
||||
<div class="tech-card" data-tech="groq">
|
||||
<div class="tech-card-inner">
|
||||
<div class="tech-icon-wrapper">
|
||||
<div class="tech-icon groq"></div>
|
||||
</div>
|
||||
<h3>Groq</h3>
|
||||
<p>Lightning-fast inference</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tech-card" data-tech="vllm">
|
||||
<div class="tech-card-inner">
|
||||
<div class="tech-icon-wrapper">
|
||||
<div class="tech-icon vllm"></div>
|
||||
</div>
|
||||
<h3>vLLM</h3>
|
||||
<p>High-throughput serving</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tech-card" data-tech="rag">
|
||||
<div class="tech-card-inner">
|
||||
<div class="tech-icon-wrapper">
|
||||
<div class="tech-icon rag"></div>
|
||||
</div>
|
||||
<h3>RAG</h3>
|
||||
<p>Retrieval augmented generation</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tech-card" data-tech="spacy">
|
||||
<div class="tech-card-inner">
|
||||
<div class="tech-icon-wrapper">
|
||||
<div class="tech-icon spacy"></div>
|
||||
</div>
|
||||
<h3>spaCy</h3>
|
||||
<p>NLP library</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tech-card" data-tech="haystack">
|
||||
<div class="tech-card-inner">
|
||||
<div class="tech-icon-wrapper">
|
||||
<div class="tech-icon haystack"></div>
|
||||
</div>
|
||||
<h3>Haystack</h3>
|
||||
<p>NLP framework</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tech-card" data-tech="milvus">
|
||||
<div class="tech-card-inner">
|
||||
<div class="tech-icon-wrapper">
|
||||
<div class="tech-icon milvus"></div>
|
||||
</div>
|
||||
<h3>Milvus</h3>
|
||||
<p>Vector database</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Duplicate cards for seamless loop -->
|
||||
<div class="tech-card" data-tech="ollama">
|
||||
<div class="tech-card-inner">
|
||||
<div class="tech-icon-wrapper">
|
||||
<div class="tech-icon ollama"></div>
|
||||
</div>
|
||||
<p>Ollama</p>
|
||||
<h3>Ollama</h3>
|
||||
<p>Local LLM deployment</p>
|
||||
</div>
|
||||
<div class="tech-marquee-item">
|
||||
<div class="tech-icon-container">
|
||||
</div>
|
||||
|
||||
<div class="tech-card" data-tech="langchain">
|
||||
<div class="tech-card-inner">
|
||||
<div class="tech-icon-wrapper">
|
||||
<div class="tech-icon langchain"></div>
|
||||
</div>
|
||||
<p>LangChain</p>
|
||||
<h3>LangChain</h3>
|
||||
<p>LLM application framework</p>
|
||||
</div>
|
||||
<div class="tech-marquee-item">
|
||||
<div class="tech-icon-container">
|
||||
<div class="tech-icon chroma"></div>
|
||||
</div>
|
||||
|
||||
<div class="tech-card" data-tech="openai">
|
||||
<div class="tech-card-inner">
|
||||
<div class="tech-icon-wrapper">
|
||||
<div class="tech-icon openai"></div>
|
||||
</div>
|
||||
<p>Chroma</p>
|
||||
<h3>OpenAI</h3>
|
||||
<p>Advanced AI models</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>
|
||||
|
||||
<div class="tech-card" data-tech="pytorch">
|
||||
<div class="tech-card-inner">
|
||||
<div class="tech-icon-wrapper">
|
||||
<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>
|
||||
<h3>PyTorch</h3>
|
||||
<p>Deep learning framework</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>
|
||||
@@ -772,8 +513,8 @@
|
||||
<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-map-marker-alt"></i> Pune, Maharashtra, India</p></li>
|
||||
<li><p><i class="fas fa-phone"></i>+91 89491-35299</p></li>
|
||||
<li><p><i class="fas fa-envelope"></i> <a href="mailto:info@gyannetra.com">info@gyannetra.com</a></p></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -790,14 +531,45 @@
|
||||
<p>© 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>
|
||||
|
||||
<!-- Navbar scroll effect script -->
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const header = document.querySelector('.site-header');
|
||||
|
||||
function handleScroll() {
|
||||
const currentScrollY = window.scrollY;
|
||||
|
||||
if (currentScrollY > 30) {
|
||||
header.classList.add('scrolled');
|
||||
} else {
|
||||
header.classList.remove('scrolled');
|
||||
}
|
||||
}
|
||||
|
||||
// Throttle scroll events for better performance
|
||||
let ticking = false;
|
||||
function onScroll() {
|
||||
if (!ticking) {
|
||||
requestAnimationFrame(function() {
|
||||
handleScroll();
|
||||
ticking = false;
|
||||
});
|
||||
ticking = true;
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', onScroll, { passive: true });
|
||||
|
||||
// Initial check
|
||||
handleScroll();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,761 +0,0 @@
|
||||
/**
|
||||
* Enhanced Unified Neural Network Animation and Data Node Interactive Effects
|
||||
* This file handles both the canvas background animation and data node interactions
|
||||
* with advanced interactive elements and dynamic visual effects
|
||||
*/
|
||||
|
||||
// Neural Network Canvas Animation Class
|
||||
class NeuralNetworkAnimation {
|
||||
constructor() {
|
||||
this.canvas = document.querySelector('.mesh-canvas');
|
||||
this.ctx = this.canvas ? this.canvas.getContext('2d') : null;
|
||||
this.nodes = [];
|
||||
this.connections = [];
|
||||
this.mousePos = { x: 0, y: 0 };
|
||||
this.animationId = null;
|
||||
|
||||
if (this.ctx) {
|
||||
this.init();
|
||||
}
|
||||
}
|
||||
|
||||
init() {
|
||||
this.setupCanvas();
|
||||
this.createNodes();
|
||||
this.setupInteractions();
|
||||
this.setupResize();
|
||||
this.animate();
|
||||
}
|
||||
|
||||
setupCanvas() {
|
||||
const heroSection = document.getElementById('hero');
|
||||
if (heroSection) {
|
||||
const rect = heroSection.getBoundingClientRect();
|
||||
this.canvas.width = rect.width;
|
||||
this.canvas.height = rect.height;
|
||||
|
||||
this.canvas.style.width = '100%';
|
||||
this.canvas.style.height = '100%';
|
||||
}
|
||||
}
|
||||
|
||||
setupResize() {
|
||||
window.addEventListener('resize', () => {
|
||||
this.setupCanvas();
|
||||
this.nodes.forEach(node => {
|
||||
node.x = Math.min(node.x, this.canvas.width);
|
||||
node.y = Math.min(node.y, this.canvas.height);
|
||||
});
|
||||
});
|
||||
}
|
||||
createNodes() {
|
||||
const nodeCount = 40;
|
||||
this.nodes = [];
|
||||
|
||||
for (let i = 0; i < nodeCount; i++) {
|
||||
this.nodes.push({
|
||||
x: Math.random() * this.canvas.width,
|
||||
y: Math.random() * this.canvas.height,
|
||||
vx: (Math.random() - 0.5) * 0.5,
|
||||
vy: (Math.random() - 0.5) * 0.5,
|
||||
radius: Math.random() * 3 + 1,
|
||||
opacity: Math.random() * 0.5 + 0.2,
|
||||
pulsePhase: Math.random() * Math.PI * 2,
|
||||
energy: Math.random()
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
updateNodes() {
|
||||
this.nodes.forEach(node => {
|
||||
// Update position
|
||||
node.x += node.vx;
|
||||
node.y += node.vy;
|
||||
|
||||
// Bounce off edges
|
||||
if (node.x <= 0 || node.x >= this.canvas.width) node.vx *= -1;
|
||||
if (node.y <= 0 || node.y >= this.canvas.height) node.vy *= -1;
|
||||
|
||||
// Keep nodes in bounds
|
||||
node.x = Math.max(0, Math.min(this.canvas.width, node.x));
|
||||
node.y = Math.max(0, Math.min(this.canvas.height, node.y));
|
||||
|
||||
// Update pulse
|
||||
node.pulsePhase += 0.02;
|
||||
node.energy = 0.5 + 0.5 * Math.sin(node.pulsePhase);
|
||||
});
|
||||
}
|
||||
|
||||
drawNodes() {
|
||||
this.nodes.forEach(node => {
|
||||
const gradient = this.ctx.createRadialGradient(
|
||||
node.x, node.y, 0,
|
||||
node.x, node.y, node.radius * 3
|
||||
);
|
||||
|
||||
const alpha = node.opacity * node.energy;
|
||||
gradient.addColorStop(0, `rgba(59, 130, 246, ${alpha})`);
|
||||
gradient.addColorStop(0.5, `rgba(139, 92, 246, ${alpha * 0.7})`);
|
||||
gradient.addColorStop(1, `rgba(236, 72, 153, 0)`);
|
||||
|
||||
this.ctx.beginPath();
|
||||
this.ctx.arc(node.x, node.y, node.radius, 0, Math.PI * 2);
|
||||
this.ctx.fillStyle = gradient;
|
||||
this.ctx.fill();
|
||||
|
||||
// Core dot
|
||||
this.ctx.beginPath();
|
||||
this.ctx.arc(node.x, node.y, node.radius * 0.3, 0, Math.PI * 2);
|
||||
this.ctx.fillStyle = `rgba(255, 255, 255, ${alpha * 0.8})`;
|
||||
this.ctx.fill();
|
||||
});
|
||||
}
|
||||
|
||||
drawConnections() {
|
||||
const maxDistance = 120;
|
||||
|
||||
for (let i = 0; i < this.nodes.length; i++) {
|
||||
for (let j = i + 1; j < this.nodes.length; j++) {
|
||||
const nodeA = this.nodes[i];
|
||||
const nodeB = this.nodes[j];
|
||||
|
||||
const dx = nodeB.x - nodeA.x;
|
||||
const dy = nodeB.y - nodeA.y;
|
||||
const distance = Math.sqrt(dx * dx + dy * dy);
|
||||
|
||||
if (distance < maxDistance) {
|
||||
const opacity = (1 - distance / maxDistance) * 0.3;
|
||||
const energyBoost = (nodeA.energy + nodeB.energy) / 2;
|
||||
|
||||
// Create dynamic gradient line
|
||||
const gradient = this.ctx.createLinearGradient(
|
||||
nodeA.x, nodeA.y, nodeB.x, nodeB.y
|
||||
);
|
||||
|
||||
gradient.addColorStop(0, `rgba(59, 130, 246, ${opacity * energyBoost})`);
|
||||
gradient.addColorStop(0.5, `rgba(139, 92, 246, ${opacity * energyBoost * 0.8})`);
|
||||
gradient.addColorStop(1, `rgba(236, 72, 153, ${opacity * energyBoost * 0.6})`);
|
||||
|
||||
this.ctx.strokeStyle = gradient;
|
||||
this.ctx.lineWidth = 1;
|
||||
this.ctx.globalCompositeOperation = 'lighter';
|
||||
|
||||
this.ctx.beginPath();
|
||||
this.ctx.moveTo(nodeA.x, nodeA.y);
|
||||
this.ctx.lineTo(nodeB.x, nodeB.y);
|
||||
this.ctx.stroke();
|
||||
|
||||
this.ctx.globalCompositeOperation = 'source-over';
|
||||
|
||||
// Data pulse along connection
|
||||
if (Math.random() < 0.01) {
|
||||
this.createDataPulse(nodeA, nodeB);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
createDataPulse(nodeA, nodeB) {
|
||||
const pulse = {
|
||||
startX: nodeA.x,
|
||||
startY: nodeA.y,
|
||||
endX: nodeB.x,
|
||||
endY: nodeB.y,
|
||||
progress: 0,
|
||||
speed: 0.02,
|
||||
life: 1
|
||||
};
|
||||
|
||||
this.dataPulses = this.dataPulses || [];
|
||||
this.dataPulses.push(pulse);
|
||||
}
|
||||
|
||||
updateDataPulses() {
|
||||
if (!this.dataPulses) return;
|
||||
|
||||
this.dataPulses = this.dataPulses.filter(pulse => {
|
||||
pulse.progress += pulse.speed;
|
||||
pulse.life -= 0.01;
|
||||
|
||||
if (pulse.progress >= 1 || pulse.life <= 0) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Draw pulse
|
||||
const x = pulse.startX + (pulse.endX - pulse.startX) * pulse.progress;
|
||||
const y = pulse.startY + (pulse.endY - pulse.startY) * pulse.progress;
|
||||
|
||||
const gradient = this.ctx.createRadialGradient(x, y, 0, x, y, 6);
|
||||
gradient.addColorStop(0, `rgba(255, 255, 255, ${pulse.life})`);
|
||||
gradient.addColorStop(1, `rgba(59, 130, 246, 0)`);
|
||||
|
||||
this.ctx.beginPath();
|
||||
this.ctx.arc(x, y, 4, 0, Math.PI * 2);
|
||||
this.ctx.fillStyle = gradient;
|
||||
this.ctx.fill();
|
||||
|
||||
return true;
|
||||
});
|
||||
}
|
||||
|
||||
handleMouseMove(e) {
|
||||
const rect = this.canvas.getBoundingClientRect();
|
||||
this.mousePos.x = e.clientX - rect.left;
|
||||
this.mousePos.y = e.clientY - rect.top;
|
||||
|
||||
// Create attraction effect
|
||||
this.nodes.forEach(node => {
|
||||
const dx = this.mousePos.x - node.x;
|
||||
const dy = this.mousePos.y - node.y;
|
||||
const distance = Math.sqrt(dx * dx + dy * dy);
|
||||
|
||||
if (distance < 100) {
|
||||
const force = (100 - distance) / 100 * 0.01;
|
||||
node.vx += dx * force;
|
||||
node.vy += dy * force;
|
||||
node.energy = Math.min(1, node.energy + 0.1);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
animate() {
|
||||
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
||||
|
||||
// Add subtle background gradient
|
||||
const bgGradient = this.ctx.createRadialGradient(
|
||||
this.canvas.width / 2, this.canvas.height / 2, 0,
|
||||
this.canvas.width / 2, this.canvas.height / 2, Math.max(this.canvas.width, this.canvas.height) / 2
|
||||
);
|
||||
bgGradient.addColorStop(0, 'rgba(59, 130, 246, 0.02)');
|
||||
bgGradient.addColorStop(1, 'rgba(139, 92, 246, 0.01)');
|
||||
|
||||
this.ctx.fillStyle = bgGradient;
|
||||
this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
|
||||
|
||||
this.updateNodes();
|
||||
this.drawConnections();
|
||||
this.drawNodes();
|
||||
this.updateDataPulses();
|
||||
|
||||
this.animationId = requestAnimationFrame(() => this.animate());
|
||||
}
|
||||
|
||||
setupInteractions() {
|
||||
// Mouse interaction only - data node interactions handled by DataNodeInteractions class
|
||||
this.canvas.addEventListener('mousemove', (e) => this.handleMouseMove(e));
|
||||
}
|
||||
|
||||
destroy() {
|
||||
if (this.animationId) {
|
||||
cancelAnimationFrame(this.animationId);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Data Node Interactive Effects Class
|
||||
class DataNodeInteractions {
|
||||
constructor() {
|
||||
this.init();
|
||||
}
|
||||
init() {
|
||||
// Wait for DOM to be fully loaded
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
this.initializeInteractions();
|
||||
});
|
||||
} else {
|
||||
this.initializeInteractions();
|
||||
}
|
||||
}
|
||||
initializeInteractions() {
|
||||
this.setupTooltips();
|
||||
this.setupHoverEffects();
|
||||
this.setupClickEffects();
|
||||
this.addRequiredStyles();
|
||||
}
|
||||
setupTooltips() {
|
||||
const dataNodes = document.querySelectorAll('.data-node');
|
||||
|
||||
// First, remove any existing tooltip elements
|
||||
document.querySelectorAll('.data-node-tooltip').forEach(tooltip => {
|
||||
if (tooltip.parentNode) {
|
||||
tooltip.parentNode.removeChild(tooltip);
|
||||
}
|
||||
});
|
||||
|
||||
dataNodes.forEach((node, index) => {
|
||||
// Create tooltip element
|
||||
const tooltip = this.createTooltip(node);
|
||||
document.body.appendChild(tooltip); // Append to body instead of node for better positioning
|
||||
|
||||
// Store reference to the tooltip on the node
|
||||
node.tooltip = tooltip;
|
||||
|
||||
// Add hover events for tooltip
|
||||
node.addEventListener('mouseenter', (e) => {
|
||||
this.showTooltip(tooltip, node, e);
|
||||
this.triggerHoverEffect(node);
|
||||
});
|
||||
|
||||
node.addEventListener('mouseleave', () => {
|
||||
this.hideTooltip(tooltip);
|
||||
this.resetHoverEffect(node);
|
||||
});
|
||||
|
||||
// Update tooltip position on mouse move - only if needed
|
||||
node.addEventListener('mousemove', (e) => {
|
||||
// Only update on significant mouse movement to prevent jitter
|
||||
if (!node.lastMouseX || Math.abs(e.clientX - node.lastMouseX) > 5 ||
|
||||
!node.lastMouseY || Math.abs(e.clientY - node.lastMouseY) > 5) {
|
||||
this.updateTooltipPosition(tooltip, node, e);
|
||||
node.lastMouseX = e.clientX;
|
||||
node.lastMouseY = e.clientY;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
createTooltip(node) {
|
||||
const techType = node.getAttribute('data-tech');
|
||||
const tooltip = document.createElement('div');
|
||||
tooltip.className = 'data-node-tooltip';
|
||||
|
||||
// Enhanced concise descriptions for each technology
|
||||
const descriptions = {
|
||||
'Machine Learning': 'Building intelligent systems that learn from data to predict outcomes and automate decisions.',
|
||||
'Generative AI': 'Creating novel content from text and images to code, unlocking new creative possibilities.',
|
||||
'Data Analytics': 'Transforming raw data into actionable business insights to drive strategic decisions.',
|
||||
'Automation': 'Designing intelligent workflows that increase efficiency and free up human resources.',
|
||||
'Finance': 'Using AI for risk assessment, fraud detection, and optimized investment strategies.',
|
||||
'Healthcare': 'Enabling faster diagnoses, personalized treatments, and improved patient care.',
|
||||
'Retail': 'Powering personalized shopping experiences, inventory optimization, and demand forecasting.',
|
||||
'Manufacturing': 'Enhancing production efficiency, quality control, and supply chain optimization.',
|
||||
'Agentic AI': 'Developing autonomous AI agents that perceive environments and take goal-driven actions.',
|
||||
'Marketing': 'Creating data-driven campaigns, customer segmentation, and conversion optimization.',
|
||||
'Media & Entertainment': 'Enabling content creation, audience engagement, and personalized recommendations.',
|
||||
'Travel': 'Implementing smart pricing strategies and enhancing customer travel experiences.',
|
||||
'Education': 'Delivering personalized learning paths and educational content innovation.',
|
||||
'Technology': 'Providing cutting-edge AI development and integration services for tech companies.'
|
||||
};
|
||||
|
||||
tooltip.innerHTML = `
|
||||
<div class="tooltip-title">${techType}</div>
|
||||
<div class="tooltip-description">${descriptions[techType] || 'AI-powered solutions and innovations for business transformation.'}</div>
|
||||
<div class="tooltip-arrow"></div>
|
||||
`;
|
||||
|
||||
return tooltip;
|
||||
}
|
||||
showTooltip(tooltip, node, event) {
|
||||
// Hide any other visible tooltips first
|
||||
document.querySelectorAll('.data-node-tooltip').forEach(otherTooltip => {
|
||||
if (otherTooltip !== tooltip && otherTooltip.style.visibility === 'visible') {
|
||||
otherTooltip.style.opacity = '0';
|
||||
otherTooltip.style.visibility = 'hidden';
|
||||
otherTooltip.style.transform = 'scale(0.95)';
|
||||
}
|
||||
});
|
||||
|
||||
// Position the tooltip before showing it
|
||||
this.updateTooltipPosition(tooltip, node, event);
|
||||
|
||||
// Reset any ongoing transitions with enhanced animation
|
||||
tooltip.style.transition = 'all 0.3s cubic-bezier(0.2, 0, 0.2, 1)'; // Smoother easing
|
||||
tooltip.style.opacity = '1';
|
||||
tooltip.style.visibility = 'visible';
|
||||
tooltip.style.transform = 'scale(1)';
|
||||
|
||||
// Add a subtle animation highlight
|
||||
setTimeout(() => {
|
||||
tooltip.style.boxShadow = '0 12px 35px rgba(0, 0, 0, 0.7), 0 0 20px rgba(79, 150, 255, 0.4)';
|
||||
}, 50);
|
||||
}
|
||||
hideTooltip(tooltip) {
|
||||
// Smooth fade out
|
||||
tooltip.style.transition = 'all 0.25s cubic-bezier(0.4, 0, 1, 1)';
|
||||
tooltip.style.opacity = '0';
|
||||
tooltip.style.visibility = 'hidden';
|
||||
tooltip.style.transform = 'scale(0.95)';
|
||||
tooltip.style.boxShadow = '0 10px 30px rgba(0, 0, 0, 0.6), 0 0 15px rgba(59, 130, 246, 0.3)';
|
||||
}
|
||||
updateTooltipPosition(tooltip, node, event) {
|
||||
const rect = node.getBoundingClientRect();
|
||||
|
||||
// Ensure the tooltip has proper dimensions for calculation
|
||||
tooltip.style.visibility = 'hidden';
|
||||
tooltip.style.opacity = '0';
|
||||
tooltip.style.display = 'block';
|
||||
|
||||
const tooltipRect = tooltip.getBoundingClientRect();
|
||||
|
||||
// Position tooltip with a fixed offset from the node to avoid affecting flow
|
||||
let left = rect.left + (rect.width / 2);
|
||||
let top = rect.top - tooltipRect.height - 25; // Increased distance above node
|
||||
|
||||
// Adjust if tooltip goes off screen
|
||||
const viewport = {
|
||||
width: window.innerWidth,
|
||||
height: window.innerHeight
|
||||
};
|
||||
|
||||
// Check node position and adjust tooltip accordingly
|
||||
const isRightSide = rect.left > (viewport.width / 2);
|
||||
const isTopHalf = rect.top < (viewport.height / 2);
|
||||
|
||||
// Apply smart positioning based on quadrant location
|
||||
if (isRightSide) {
|
||||
left = Math.min(left + 20, viewport.width - tooltipRect.width - 20);
|
||||
} else {
|
||||
left = Math.max(left - 20, 20);
|
||||
}
|
||||
|
||||
// Keep the tooltip centered relative to the node
|
||||
left = rect.left + (rect.width / 2);
|
||||
|
||||
// Ensure tooltip stays within viewport bounds
|
||||
const margin = 20;
|
||||
if (left < margin) {
|
||||
left = margin;
|
||||
}
|
||||
if (left + tooltipRect.width > viewport.width - margin) {
|
||||
left = viewport.width - tooltipRect.width - margin;
|
||||
}
|
||||
|
||||
// If not enough room above, show below
|
||||
if (top < margin) {
|
||||
top = rect.bottom + 25; // Place below with distance
|
||||
tooltip.classList.add('tooltip-below');
|
||||
} else {
|
||||
tooltip.classList.remove('tooltip-below');
|
||||
}
|
||||
|
||||
// Apply the positioning
|
||||
tooltip.style.left = `${left}px`;
|
||||
tooltip.style.top = `${top}px`;
|
||||
|
||||
// Reset visibility state
|
||||
if (node.matches(':hover')) {
|
||||
tooltip.style.visibility = 'visible';
|
||||
tooltip.style.opacity = '1';
|
||||
}
|
||||
}
|
||||
|
||||
setupHoverEffects() {
|
||||
const dataNodes = document.querySelectorAll('.data-node');
|
||||
|
||||
dataNodes.forEach((node, index) => {
|
||||
node.addEventListener('mouseenter', () => {
|
||||
this.triggerHoverEffect(node);
|
||||
this.createRippleEffect(node);
|
||||
});
|
||||
|
||||
node.addEventListener('mouseleave', () => {
|
||||
this.resetHoverEffect(node);
|
||||
});
|
||||
});
|
||||
}
|
||||
triggerHoverEffect(node) {
|
||||
// Enhanced glow effect - using smaller scale to maintain scattered flow
|
||||
node.style.transform = 'scale(1.08)';
|
||||
node.style.zIndex = '1000';
|
||||
|
||||
// Add glow to node core
|
||||
const nodeCore = node.querySelector('.node-core');
|
||||
if (nodeCore) {
|
||||
nodeCore.style.boxShadow = '0 0 30px rgba(59, 130, 246, 0.8), 0 0 60px rgba(139, 92, 246, 0.6)';
|
||||
nodeCore.style.background = 'radial-gradient(circle, rgba(59, 130, 246, 0.4), rgba(139, 92, 246, 0.3))';
|
||||
}
|
||||
|
||||
// Enhance icon visibility
|
||||
const nodeIcon = node.querySelector('.node-icon img');
|
||||
if (nodeIcon) {
|
||||
nodeIcon.style.filter = 'brightness(1.2) saturate(1.3) drop-shadow(0 0 10px rgba(255, 255, 255, 0.8))';
|
||||
}
|
||||
|
||||
// Brighten label
|
||||
const nodeLabel = node.querySelector('.node-label');
|
||||
if (nodeLabel) {
|
||||
nodeLabel.style.color = '#ffffff';
|
||||
nodeLabel.style.textShadow = '0 0 10px rgba(59, 130, 246, 0.8)';
|
||||
nodeLabel.style.fontWeight = '600';
|
||||
}
|
||||
}
|
||||
|
||||
resetHoverEffect(node) {
|
||||
node.style.transform = '';
|
||||
node.style.zIndex = '';
|
||||
|
||||
const nodeCore = node.querySelector('.node-core');
|
||||
if (nodeCore) {
|
||||
nodeCore.style.boxShadow = '';
|
||||
nodeCore.style.background = '';
|
||||
}
|
||||
|
||||
const nodeIcon = node.querySelector('.node-icon img');
|
||||
if (nodeIcon) {
|
||||
nodeIcon.style.filter = '';
|
||||
}
|
||||
|
||||
const nodeLabel = node.querySelector('.node-label');
|
||||
if (nodeLabel) {
|
||||
nodeLabel.style.color = '';
|
||||
nodeLabel.style.textShadow = '';
|
||||
nodeLabel.style.fontWeight = '';
|
||||
}
|
||||
}
|
||||
|
||||
createRippleEffect(node) {
|
||||
const ripple = document.createElement('div');
|
||||
ripple.className = 'data-node-ripple';
|
||||
|
||||
const rect = node.getBoundingClientRect();
|
||||
const size = Math.max(rect.width, rect.height) * 2;
|
||||
|
||||
ripple.style.width = `${size}px`;
|
||||
ripple.style.height = `${size}px`;
|
||||
ripple.style.left = `${rect.width / 2 - size / 2}px`;
|
||||
ripple.style.top = `${rect.height / 2 - size / 2}px`;
|
||||
|
||||
node.appendChild(ripple);
|
||||
|
||||
// Remove ripple after animation
|
||||
setTimeout(() => {
|
||||
if (ripple.parentNode) {
|
||||
ripple.parentNode.removeChild(ripple);
|
||||
}
|
||||
}, 600);
|
||||
}
|
||||
|
||||
setupClickEffects() {
|
||||
const dataNodes = document.querySelectorAll('.data-node');
|
||||
|
||||
dataNodes.forEach(node => {
|
||||
node.addEventListener('click', () => {
|
||||
this.triggerClickEffect(node);
|
||||
this.createBurstEffect(node);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
triggerClickEffect(node) {
|
||||
// Create pulsating effect
|
||||
node.style.animation = 'none';
|
||||
setTimeout(() => {
|
||||
node.style.animation = 'nodeClickPulse 0.6s ease-out';
|
||||
}, 10);
|
||||
|
||||
// Reset animation after completion
|
||||
setTimeout(() => {
|
||||
node.style.animation = '';
|
||||
}, 600);
|
||||
}
|
||||
|
||||
createBurstEffect(node) {
|
||||
const particles = 8;
|
||||
const rect = node.getBoundingClientRect();
|
||||
const centerX = rect.left + rect.width / 2;
|
||||
const centerY = rect.top + rect.height / 2;
|
||||
|
||||
for (let i = 0; i < particles; i++) {
|
||||
const particle = document.createElement('div');
|
||||
particle.className = 'data-node-particle';
|
||||
|
||||
const angle = (360 / particles) * i;
|
||||
const distance = 50 + Math.random() * 30;
|
||||
|
||||
const endX = centerX + Math.cos(angle * Math.PI / 180) * distance;
|
||||
const endY = centerY + Math.sin(angle * Math.PI / 180) * distance;
|
||||
|
||||
particle.style.left = `${centerX}px`;
|
||||
particle.style.top = `${centerY}px`;
|
||||
|
||||
document.body.appendChild(particle);
|
||||
|
||||
// Animate particle
|
||||
setTimeout(() => {
|
||||
particle.style.transform = `translate(${endX - centerX}px, ${endY - centerY}px)`;
|
||||
particle.style.opacity = '0';
|
||||
}, 10);
|
||||
|
||||
// Remove particle
|
||||
setTimeout(() => {
|
||||
if (particle.parentNode) {
|
||||
document.body.removeChild(particle);
|
||||
}
|
||||
}, 800);
|
||||
}
|
||||
}
|
||||
|
||||
addRequiredStyles() {
|
||||
const styles = document.createElement('style');
|
||||
styles.textContent = ` .data-node-tooltip {
|
||||
position: fixed;
|
||||
background: rgba(15, 31, 74, 0.95); /* Darker blue background */
|
||||
color: #ffffff;
|
||||
padding: 16px 20px; /* Increased padding */
|
||||
border-radius: 10px; /* More rounded corners */
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.5;
|
||||
max-width: 300px; /* Slightly wider */
|
||||
min-width: 220px;
|
||||
z-index: 100000; /* Ensure tooltip is above everything */
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: scale(0.95);
|
||||
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); /* Smoother animation */
|
||||
backdrop-filter: blur(8px); /* Improved blur effect */
|
||||
border: 1px solid rgba(79, 150, 255, 0.4); /* Brighter border for contrast */
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 15px rgba(59, 130, 246, 0.3); /* Enhanced shadow */
|
||||
pointer-events: none;
|
||||
text-align: left; /* Left-aligned text for card style */
|
||||
transform-origin: center top;
|
||||
}
|
||||
|
||||
.tooltip-title {
|
||||
font-weight: 700;
|
||||
font-size: 1.1rem; /* Larger title */
|
||||
color: #ffffff;
|
||||
margin-bottom: 10px;
|
||||
font-family: 'Space Grotesk', sans-serif;
|
||||
letter-spacing: 0.5px;
|
||||
border-bottom: 1px solid rgba(79, 150, 255, 0.3); /* Separator line */
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.tooltip-description {
|
||||
color: rgba(255, 255, 255, 0.9); /* Brighter text */
|
||||
font-size: 0.9rem;
|
||||
font-family: 'Inter', sans-serif;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.tooltip-arrow {
|
||||
position: absolute;
|
||||
bottom: -7px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) rotate(45deg);
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: rgba(15, 31, 74, 0.95); /* Match tooltip background */
|
||||
border: 1px solid rgba(79, 150, 255, 0.4); /* Match tooltip border */
|
||||
border-top: none;
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.data-node-tooltip.tooltip-below .tooltip-arrow {
|
||||
bottom: auto;
|
||||
top: -6px;
|
||||
transform: translateX(-50%) rotate(-135deg);
|
||||
border: 1px solid rgba(79, 150, 255, 0.4); /* Match tooltip border */
|
||||
border-bottom: none;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.data-node-ripple {
|
||||
position: absolute;
|
||||
border: 2px solid rgba(59, 130, 246, 0.6);
|
||||
border-radius: 50%;
|
||||
transform: scale(0);
|
||||
animation: dataRipple 0.6s ease-out;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@keyframes dataRipple {
|
||||
to {
|
||||
transform: scale(1);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.data-node-particle {
|
||||
position: fixed;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
background: radial-gradient(circle, rgba(59, 130, 246, 0.8), rgba(139, 92, 246, 0.6));
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
@keyframes nodeClickPulse {
|
||||
0% { transform: scale(1); }
|
||||
50% { transform: scale(1.3); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
|
||||
.data-node {
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.data-node:hover {
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* Enhanced neural network container interactions */
|
||||
.neural-network-container .data-node {
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.neural-network-container .data-node:hover {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
/* Enhanced hero animation data nodes */
|
||||
.hero-animation .data-node {
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.hero-animation .data-node:hover {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
/* Card tooltip animation */
|
||||
.data-node-tooltip {
|
||||
animation: tooltipPulse 3s ease-in-out infinite;
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
.data-node:hover .data-node-tooltip {
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
@keyframes tooltipPulse {
|
||||
0%, 100% {
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 15px rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.7), 0 0 25px rgba(79, 150, 255, 0.5);
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
document.head.appendChild(styles);
|
||||
}
|
||||
}
|
||||
|
||||
// Create a singleton instance to prevent duplicate initializations
|
||||
let dataNodeInteractionsInstance = null;
|
||||
|
||||
function initializeDataNodeInteractions() {
|
||||
if (!dataNodeInteractionsInstance) {
|
||||
dataNodeInteractionsInstance = new DataNodeInteractions();
|
||||
}
|
||||
return dataNodeInteractionsInstance;
|
||||
}
|
||||
|
||||
// Initialize data node interactions when DOM is loaded
|
||||
document.addEventListener('DOMContentLoaded', initializeDataNodeInteractions);
|
||||
|
||||
// Also initialize immediately if DOM is already loaded
|
||||
if (document.readyState !== 'loading') {
|
||||
initializeDataNodeInteractions();
|
||||
}
|
||||
|
||||
// Export for potential use in other modules
|
||||
if (typeof module !== 'undefined' && module.exports) {
|
||||
module.exports = DataNodeInteractions;
|
||||
}
|
||||
@@ -1,755 +0,0 @@
|
||||
/**
|
||||
* Enhanced Unified Neural Network Animation and Data Node Interactive Effects
|
||||
* This file handles both the canvas background animation and data node interactions
|
||||
* with advanced interactive elements and dynamic visual effects
|
||||
*/
|
||||
|
||||
// Neural Network Canvas Animation Class
|
||||
class NeuralNetworkAnimation {
|
||||
constructor() {
|
||||
this.canvas = document.querySelector('.mesh-canvas');
|
||||
this.ctx = this.canvas ? this.canvas.getContext('2d') : null;
|
||||
this.nodes = [];
|
||||
this.connections = [];
|
||||
this.mousePos = { x: 0, y: 0 };
|
||||
this.animationId = null;
|
||||
|
||||
if (this.ctx) {
|
||||
this.init();
|
||||
}
|
||||
}
|
||||
|
||||
init() {
|
||||
this.setupCanvas();
|
||||
this.createNodes();
|
||||
this.setupInteractions();
|
||||
this.setupResize();
|
||||
this.animate();
|
||||
}
|
||||
|
||||
setupCanvas() {
|
||||
const heroSection = document.getElementById('hero');
|
||||
if (heroSection) {
|
||||
const rect = heroSection.getBoundingClientRect();
|
||||
this.canvas.width = rect.width;
|
||||
this.canvas.height = rect.height;
|
||||
|
||||
this.canvas.style.width = '100%';
|
||||
this.canvas.style.height = '100%';
|
||||
}
|
||||
}
|
||||
|
||||
setupResize() {
|
||||
window.addEventListener('resize', () => {
|
||||
this.setupCanvas();
|
||||
this.nodes.forEach(node => {
|
||||
node.x = Math.min(node.x, this.canvas.width);
|
||||
node.y = Math.min(node.y, this.canvas.height);
|
||||
});
|
||||
});
|
||||
}
|
||||
createNodes() {
|
||||
const nodeCount = 40;
|
||||
this.nodes = [];
|
||||
|
||||
for (let i = 0; i < nodeCount; i++) {
|
||||
this.nodes.push({
|
||||
x: Math.random() * this.canvas.width,
|
||||
y: Math.random() * this.canvas.height,
|
||||
vx: (Math.random() - 0.5) * 0.5,
|
||||
vy: (Math.random() - 0.5) * 0.5,
|
||||
radius: Math.random() * 3 + 1,
|
||||
opacity: Math.random() * 0.5 + 0.2,
|
||||
pulsePhase: Math.random() * Math.PI * 2,
|
||||
energy: Math.random()
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
updateNodes() {
|
||||
this.nodes.forEach(node => {
|
||||
// Update position
|
||||
node.x += node.vx;
|
||||
node.y += node.vy;
|
||||
|
||||
// Bounce off edges
|
||||
if (node.x <= 0 || node.x >= this.canvas.width) node.vx *= -1;
|
||||
if (node.y <= 0 || node.y >= this.canvas.height) node.vy *= -1;
|
||||
|
||||
// Keep nodes in bounds
|
||||
node.x = Math.max(0, Math.min(this.canvas.width, node.x));
|
||||
node.y = Math.max(0, Math.min(this.canvas.height, node.y));
|
||||
|
||||
// Update pulse
|
||||
node.pulsePhase += 0.02;
|
||||
node.energy = 0.5 + 0.5 * Math.sin(node.pulsePhase);
|
||||
});
|
||||
}
|
||||
|
||||
drawNodes() {
|
||||
this.nodes.forEach(node => {
|
||||
const gradient = this.ctx.createRadialGradient(
|
||||
node.x, node.y, 0,
|
||||
node.x, node.y, node.radius * 3
|
||||
);
|
||||
|
||||
const alpha = node.opacity * node.energy;
|
||||
gradient.addColorStop(0, `rgba(59, 130, 246, ${alpha})`);
|
||||
gradient.addColorStop(0.5, `rgba(139, 92, 246, ${alpha * 0.7})`);
|
||||
gradient.addColorStop(1, `rgba(236, 72, 153, 0)`);
|
||||
|
||||
this.ctx.beginPath();
|
||||
this.ctx.arc(node.x, node.y, node.radius, 0, Math.PI * 2);
|
||||
this.ctx.fillStyle = gradient;
|
||||
this.ctx.fill();
|
||||
|
||||
// Core dot
|
||||
this.ctx.beginPath();
|
||||
this.ctx.arc(node.x, node.y, node.radius * 0.3, 0, Math.PI * 2);
|
||||
this.ctx.fillStyle = `rgba(255, 255, 255, ${alpha * 0.8})`;
|
||||
this.ctx.fill();
|
||||
});
|
||||
}
|
||||
|
||||
drawConnections() {
|
||||
const maxDistance = 120;
|
||||
|
||||
for (let i = 0; i < this.nodes.length; i++) {
|
||||
for (let j = i + 1; j < this.nodes.length; j++) {
|
||||
const nodeA = this.nodes[i];
|
||||
const nodeB = this.nodes[j];
|
||||
|
||||
const dx = nodeB.x - nodeA.x;
|
||||
const dy = nodeB.y - nodeA.y;
|
||||
const distance = Math.sqrt(dx * dx + dy * dy);
|
||||
|
||||
if (distance < maxDistance) {
|
||||
const opacity = (1 - distance / maxDistance) * 0.3;
|
||||
const energyBoost = (nodeA.energy + nodeB.energy) / 2;
|
||||
|
||||
// Create dynamic gradient line
|
||||
const gradient = this.ctx.createLinearGradient(
|
||||
nodeA.x, nodeA.y, nodeB.x, nodeB.y
|
||||
);
|
||||
|
||||
gradient.addColorStop(0, `rgba(59, 130, 246, ${opacity * energyBoost})`);
|
||||
gradient.addColorStop(0.5, `rgba(139, 92, 246, ${opacity * energyBoost * 0.8})`);
|
||||
gradient.addColorStop(1, `rgba(236, 72, 153, ${opacity * energyBoost * 0.6})`);
|
||||
|
||||
this.ctx.strokeStyle = gradient;
|
||||
this.ctx.lineWidth = 1;
|
||||
this.ctx.globalCompositeOperation = 'lighter';
|
||||
|
||||
this.ctx.beginPath();
|
||||
this.ctx.moveTo(nodeA.x, nodeA.y);
|
||||
this.ctx.lineTo(nodeB.x, nodeB.y);
|
||||
this.ctx.stroke();
|
||||
|
||||
this.ctx.globalCompositeOperation = 'source-over';
|
||||
|
||||
// Data pulse along connection
|
||||
if (Math.random() < 0.01) {
|
||||
this.createDataPulse(nodeA, nodeB);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
createDataPulse(nodeA, nodeB) {
|
||||
const pulse = {
|
||||
startX: nodeA.x,
|
||||
startY: nodeA.y,
|
||||
endX: nodeB.x,
|
||||
endY: nodeB.y,
|
||||
progress: 0,
|
||||
speed: 0.02,
|
||||
life: 1
|
||||
};
|
||||
|
||||
this.dataPulses = this.dataPulses || [];
|
||||
this.dataPulses.push(pulse);
|
||||
}
|
||||
|
||||
updateDataPulses() {
|
||||
if (!this.dataPulses) return;
|
||||
|
||||
this.dataPulses = this.dataPulses.filter(pulse => {
|
||||
pulse.progress += pulse.speed;
|
||||
pulse.life -= 0.01;
|
||||
|
||||
if (pulse.progress >= 1 || pulse.life <= 0) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Draw pulse
|
||||
const x = pulse.startX + (pulse.endX - pulse.startX) * pulse.progress;
|
||||
const y = pulse.startY + (pulse.endY - pulse.startY) * pulse.progress;
|
||||
|
||||
const gradient = this.ctx.createRadialGradient(x, y, 0, x, y, 6);
|
||||
gradient.addColorStop(0, `rgba(255, 255, 255, ${pulse.life})`);
|
||||
gradient.addColorStop(1, `rgba(59, 130, 246, 0)`);
|
||||
|
||||
this.ctx.beginPath();
|
||||
this.ctx.arc(x, y, 4, 0, Math.PI * 2);
|
||||
this.ctx.fillStyle = gradient;
|
||||
this.ctx.fill();
|
||||
|
||||
return true;
|
||||
});
|
||||
}
|
||||
|
||||
handleMouseMove(e) {
|
||||
const rect = this.canvas.getBoundingClientRect();
|
||||
this.mousePos.x = e.clientX - rect.left;
|
||||
this.mousePos.y = e.clientY - rect.top;
|
||||
|
||||
// Create attraction effect
|
||||
this.nodes.forEach(node => {
|
||||
const dx = this.mousePos.x - node.x;
|
||||
const dy = this.mousePos.y - node.y;
|
||||
const distance = Math.sqrt(dx * dx + dy * dy);
|
||||
|
||||
if (distance < 100) {
|
||||
const force = (100 - distance) / 100 * 0.01;
|
||||
node.vx += dx * force;
|
||||
node.vy += dy * force;
|
||||
node.energy = Math.min(1, node.energy + 0.1);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
animate() {
|
||||
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
||||
|
||||
// Add subtle background gradient
|
||||
const bgGradient = this.ctx.createRadialGradient(
|
||||
this.canvas.width / 2, this.canvas.height / 2, 0,
|
||||
this.canvas.width / 2, this.canvas.height / 2, Math.max(this.canvas.width, this.canvas.height) / 2
|
||||
);
|
||||
bgGradient.addColorStop(0, 'rgba(59, 130, 246, 0.02)');
|
||||
bgGradient.addColorStop(1, 'rgba(139, 92, 246, 0.01)');
|
||||
|
||||
this.ctx.fillStyle = bgGradient;
|
||||
this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
|
||||
|
||||
this.updateNodes();
|
||||
this.drawConnections();
|
||||
this.drawNodes();
|
||||
this.updateDataPulses();
|
||||
|
||||
this.animationId = requestAnimationFrame(() => this.animate());
|
||||
}
|
||||
|
||||
setupInteractions() {
|
||||
// Mouse interaction only - data node interactions handled by DataNodeInteractions class
|
||||
this.canvas.addEventListener('mousemove', (e) => this.handleMouseMove(e));
|
||||
}
|
||||
|
||||
destroy() {
|
||||
if (this.animationId) {
|
||||
cancelAnimationFrame(this.animationId);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Data Node Interactive Effects Class
|
||||
class DataNodeInteractions {
|
||||
constructor() {
|
||||
this.init();
|
||||
}
|
||||
init() {
|
||||
// Wait for DOM to be fully loaded
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
this.initializeInteractions();
|
||||
});
|
||||
} else {
|
||||
this.initializeInteractions();
|
||||
}
|
||||
}
|
||||
initializeInteractions() {
|
||||
this.setupTooltips();
|
||||
this.setupHoverEffects();
|
||||
this.setupClickEffects();
|
||||
this.addRequiredStyles();
|
||||
}
|
||||
|
||||
setupTooltips() {
|
||||
const dataNodes = document.querySelectorAll('.data-node');
|
||||
|
||||
dataNodes.forEach((node, index) => {
|
||||
// Create tooltip element
|
||||
const tooltip = this.createTooltip(node);
|
||||
document.body.appendChild(tooltip); // Append to body instead of node for better positioning
|
||||
|
||||
// Store reference to the tooltip on the node
|
||||
node.tooltip = tooltip;
|
||||
|
||||
// Add hover events for tooltip
|
||||
node.addEventListener('mouseenter', (e) => {
|
||||
this.showTooltip(tooltip, node, e);
|
||||
this.triggerHoverEffect(node);
|
||||
});
|
||||
|
||||
node.addEventListener('mouseleave', () => {
|
||||
this.hideTooltip(tooltip);
|
||||
this.resetHoverEffect(node);
|
||||
});
|
||||
|
||||
// Update tooltip position on mouse move - only if needed
|
||||
node.addEventListener('mousemove', (e) => {
|
||||
// Only update on significant mouse movement to prevent jitter
|
||||
if (!node.lastMouseX || Math.abs(e.clientX - node.lastMouseX) > 5 ||
|
||||
!node.lastMouseY || Math.abs(e.clientY - node.lastMouseY) > 5) {
|
||||
this.updateTooltipPosition(tooltip, node, e);
|
||||
node.lastMouseX = e.clientX;
|
||||
node.lastMouseY = e.clientY;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
createTooltip(node) {
|
||||
const techType = node.getAttribute('data-tech');
|
||||
const tooltip = document.createElement('div');
|
||||
tooltip.className = 'data-node-tooltip';
|
||||
|
||||
// Enhanced concise descriptions for each technology
|
||||
const descriptions = {
|
||||
'Machine Learning': 'Building intelligent systems that learn from data to predict outcomes and automate decisions.',
|
||||
'Generative AI': 'Creating novel content from text and images to code, unlocking new creative possibilities.',
|
||||
'Data Analytics': 'Transforming raw data into actionable business insights to drive strategic decisions.',
|
||||
'Automation': 'Designing intelligent workflows that increase efficiency and free up human resources.',
|
||||
'Finance': 'Using AI for risk assessment, fraud detection, and optimized investment strategies.',
|
||||
'Healthcare': 'Enabling faster diagnoses, personalized treatments, and improved patient care.',
|
||||
'Retail': 'Powering personalized shopping experiences, inventory optimization, and demand forecasting.',
|
||||
'Manufacturing': 'Enhancing production efficiency, quality control, and supply chain optimization.',
|
||||
'Agentic AI': 'Developing autonomous AI agents that perceive environments and take goal-driven actions.',
|
||||
'Marketing': 'Creating data-driven campaigns, customer segmentation, and conversion optimization.',
|
||||
'Media & Entertainment': 'Enabling content creation, audience engagement, and personalized recommendations.',
|
||||
'Travel': 'Implementing smart pricing strategies and enhancing customer travel experiences.',
|
||||
'Education': 'Delivering personalized learning paths and educational content innovation.',
|
||||
'Technology': 'Providing cutting-edge AI development and integration services for tech companies.'
|
||||
};
|
||||
|
||||
tooltip.innerHTML = `
|
||||
<div class="tooltip-title">${techType}</div>
|
||||
<div class="tooltip-description">${descriptions[techType] || 'AI-powered solutions and innovations for business transformation.'}</div>
|
||||
<div class="tooltip-arrow"></div>
|
||||
`;
|
||||
|
||||
return tooltip;
|
||||
}
|
||||
|
||||
showTooltip(tooltip, node, event) {
|
||||
// Reset any ongoing transitions with enhanced animation
|
||||
tooltip.style.transition = 'all 0.3s cubic-bezier(0.2, 0, 0.2, 1)'; // Smoother easing
|
||||
tooltip.style.opacity = '1';
|
||||
tooltip.style.visibility = 'visible';
|
||||
tooltip.style.transform = 'translate(-50%, 0) scale(1)';
|
||||
|
||||
// Add a subtle animation highlight
|
||||
setTimeout(() => {
|
||||
tooltip.style.boxShadow = '0 12px 35px rgba(0, 0, 0, 0.7), 0 0 20px rgba(79, 150, 255, 0.4)';
|
||||
}, 50);
|
||||
|
||||
this.updateTooltipPosition(tooltip, node, event);
|
||||
|
||||
// Hide any other visible tooltips
|
||||
document.querySelectorAll('.data-node-tooltip').forEach(otherTooltip => {
|
||||
if (otherTooltip !== tooltip && otherTooltip.style.visibility === 'visible') {
|
||||
otherTooltip.style.opacity = '0';
|
||||
otherTooltip.style.visibility = 'hidden';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
hideTooltip(tooltip) {
|
||||
// Smooth fade out
|
||||
tooltip.style.transition = 'all 0.25s cubic-bezier(0.4, 0, 1, 1)';
|
||||
tooltip.style.opacity = '0';
|
||||
tooltip.style.visibility = 'hidden';
|
||||
tooltip.style.transform = 'translate(-50%, 12px) scale(0.95)';
|
||||
tooltip.style.boxShadow = '0 10px 30px rgba(0, 0, 0, 0.6), 0 0 15px rgba(59, 130, 246, 0.3)';
|
||||
}
|
||||
|
||||
updateTooltipPosition(tooltip, node, event) {
|
||||
const rect = node.getBoundingClientRect();
|
||||
|
||||
// Ensure the tooltip has proper dimensions for calculation
|
||||
tooltip.style.visibility = 'hidden';
|
||||
tooltip.style.opacity = '0';
|
||||
tooltip.style.display = 'block';
|
||||
|
||||
const tooltipRect = tooltip.getBoundingClientRect();
|
||||
|
||||
// Position tooltip above the node with increased distance for card style
|
||||
let left = rect.left + (rect.width / 2);
|
||||
let top = rect.top - tooltipRect.height - 20; // Distance above node
|
||||
|
||||
// Adjust if tooltip goes off screen
|
||||
const viewport = {
|
||||
width: window.innerWidth,
|
||||
height: window.innerHeight
|
||||
};
|
||||
|
||||
// Check if we're on the right side of the screen (possibly overlapping hero content)
|
||||
const isRightSide = rect.left > (viewport.width / 2);
|
||||
|
||||
// Position based on side of screen for better readability
|
||||
if (isRightSide) {
|
||||
// For nodes on right side, align to the right edge of the node
|
||||
left = rect.right - tooltipRect.width/2;
|
||||
} else {
|
||||
// For left side nodes, align to the left edge of the node
|
||||
left = rect.left + tooltipRect.width/2;
|
||||
}
|
||||
|
||||
// Ensure tooltip stays within viewport bounds with margins
|
||||
const margin = 25;
|
||||
const maxLeft = viewport.width - tooltipRect.width - margin;
|
||||
const minLeft = margin + tooltipRect.width/2;
|
||||
|
||||
left = Math.max(minLeft, Math.min(left, maxLeft));
|
||||
|
||||
// If not enough room above, show below
|
||||
if (top < margin) {
|
||||
top = rect.bottom + 20; // Place below with distance
|
||||
tooltip.classList.add('tooltip-below');
|
||||
} else {
|
||||
tooltip.classList.remove('tooltip-below');
|
||||
}
|
||||
|
||||
// Apply the positioning
|
||||
tooltip.style.left = `${left}px`;
|
||||
tooltip.style.top = `${top}px`;
|
||||
|
||||
// Reset visibility state to what it should be (it was set to hidden for calculations)
|
||||
if (node.matches(':hover')) {
|
||||
tooltip.style.visibility = 'visible';
|
||||
tooltip.style.opacity = '1';
|
||||
}
|
||||
}
|
||||
|
||||
setupHoverEffects() {
|
||||
const dataNodes = document.querySelectorAll('.data-node');
|
||||
|
||||
dataNodes.forEach((node, index) => {
|
||||
node.addEventListener('mouseenter', () => {
|
||||
this.triggerHoverEffect(node);
|
||||
this.createRippleEffect(node);
|
||||
});
|
||||
|
||||
node.addEventListener('mouseleave', () => {
|
||||
this.resetHoverEffect(node);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
triggerHoverEffect(node) {
|
||||
// Enhanced glow effect
|
||||
node.style.transform = 'scale(1.15)';
|
||||
node.style.zIndex = '1000';
|
||||
|
||||
// Add glow to node core
|
||||
const nodeCore = node.querySelector('.node-core');
|
||||
if (nodeCore) {
|
||||
nodeCore.style.boxShadow = '0 0 30px rgba(59, 130, 246, 0.8), 0 0 60px rgba(139, 92, 246, 0.6)';
|
||||
nodeCore.style.background = 'radial-gradient(circle, rgba(59, 130, 246, 0.4), rgba(139, 92, 246, 0.3))';
|
||||
}
|
||||
|
||||
// Enhance icon visibility
|
||||
const nodeIcon = node.querySelector('.node-icon img');
|
||||
if (nodeIcon) {
|
||||
nodeIcon.style.filter = 'brightness(1.2) saturate(1.3) drop-shadow(0 0 10px rgba(255, 255, 255, 0.8))';
|
||||
}
|
||||
|
||||
// Brighten label
|
||||
const nodeLabel = node.querySelector('.node-label');
|
||||
if (nodeLabel) {
|
||||
nodeLabel.style.color = '#ffffff';
|
||||
nodeLabel.style.textShadow = '0 0 10px rgba(59, 130, 246, 0.8)';
|
||||
nodeLabel.style.fontWeight = '600';
|
||||
}
|
||||
}
|
||||
|
||||
resetHoverEffect(node) {
|
||||
node.style.transform = '';
|
||||
node.style.zIndex = '';
|
||||
|
||||
const nodeCore = node.querySelector('.node-core');
|
||||
if (nodeCore) {
|
||||
nodeCore.style.boxShadow = '';
|
||||
nodeCore.style.background = '';
|
||||
}
|
||||
|
||||
const nodeIcon = node.querySelector('.node-icon img');
|
||||
if (nodeIcon) {
|
||||
nodeIcon.style.filter = '';
|
||||
}
|
||||
|
||||
const nodeLabel = node.querySelector('.node-label');
|
||||
if (nodeLabel) {
|
||||
nodeLabel.style.color = '';
|
||||
nodeLabel.style.textShadow = '';
|
||||
nodeLabel.style.fontWeight = '';
|
||||
}
|
||||
}
|
||||
|
||||
createRippleEffect(node) {
|
||||
const ripple = document.createElement('div');
|
||||
ripple.className = 'data-node-ripple';
|
||||
|
||||
const rect = node.getBoundingClientRect();
|
||||
const size = Math.max(rect.width, rect.height) * 2;
|
||||
|
||||
ripple.style.width = `${size}px`;
|
||||
ripple.style.height = `${size}px`;
|
||||
ripple.style.left = `${rect.width / 2 - size / 2}px`;
|
||||
ripple.style.top = `${rect.height / 2 - size / 2}px`;
|
||||
|
||||
node.appendChild(ripple);
|
||||
|
||||
// Remove ripple after animation
|
||||
setTimeout(() => {
|
||||
if (ripple.parentNode) {
|
||||
ripple.parentNode.removeChild(ripple);
|
||||
}
|
||||
}, 600);
|
||||
}
|
||||
|
||||
setupClickEffects() {
|
||||
const dataNodes = document.querySelectorAll('.data-node');
|
||||
|
||||
dataNodes.forEach(node => {
|
||||
node.addEventListener('click', () => {
|
||||
this.triggerClickEffect(node);
|
||||
this.createBurstEffect(node);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
triggerClickEffect(node) {
|
||||
// Create pulsating effect
|
||||
node.style.animation = 'none';
|
||||
setTimeout(() => {
|
||||
node.style.animation = 'nodeClickPulse 0.6s ease-out';
|
||||
}, 10);
|
||||
|
||||
// Reset animation after completion
|
||||
setTimeout(() => {
|
||||
node.style.animation = '';
|
||||
}, 600);
|
||||
}
|
||||
|
||||
createBurstEffect(node) {
|
||||
const particles = 8;
|
||||
const rect = node.getBoundingClientRect();
|
||||
const centerX = rect.left + rect.width / 2;
|
||||
const centerY = rect.top + rect.height / 2;
|
||||
|
||||
for (let i = 0; i < particles; i++) {
|
||||
const particle = document.createElement('div');
|
||||
particle.className = 'data-node-particle';
|
||||
|
||||
const angle = (360 / particles) * i;
|
||||
const distance = 50 + Math.random() * 30;
|
||||
|
||||
const endX = centerX + Math.cos(angle * Math.PI / 180) * distance;
|
||||
const endY = centerY + Math.sin(angle * Math.PI / 180) * distance;
|
||||
|
||||
particle.style.left = `${centerX}px`;
|
||||
particle.style.top = `${centerY}px`;
|
||||
|
||||
document.body.appendChild(particle);
|
||||
|
||||
// Animate particle
|
||||
setTimeout(() => {
|
||||
particle.style.transform = `translate(${endX - centerX}px, ${endY - centerY}px)`;
|
||||
particle.style.opacity = '0';
|
||||
}, 10);
|
||||
|
||||
// Remove particle
|
||||
setTimeout(() => {
|
||||
if (particle.parentNode) {
|
||||
document.body.removeChild(particle);
|
||||
}
|
||||
}, 800);
|
||||
}
|
||||
}
|
||||
|
||||
addRequiredStyles() {
|
||||
const styles = document.createElement('style');
|
||||
styles.textContent = `
|
||||
.data-node-tooltip {
|
||||
position: fixed;
|
||||
background: rgba(15, 31, 74, 0.95); /* Darker blue background */
|
||||
color: #ffffff;
|
||||
padding: 16px 20px; /* Increased padding */
|
||||
border-radius: 10px; /* More rounded corners */
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.5;
|
||||
max-width: 300px; /* Slightly wider */
|
||||
min-width: 220px;
|
||||
z-index: 50000;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translateY(0) scale(0.95);
|
||||
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); /* Smoother animation */
|
||||
backdrop-filter: blur(8px); /* Improved blur effect */
|
||||
border: 1px solid rgba(79, 150, 255, 0.4); /* Brighter border for contrast */
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 15px rgba(59, 130, 246, 0.3); /* Enhanced shadow */
|
||||
pointer-events: none;
|
||||
text-align: left; /* Left-aligned text for card style */
|
||||
left: 50%;
|
||||
transform-origin: bottom center;
|
||||
}
|
||||
|
||||
.tooltip-title {
|
||||
font-weight: 700;
|
||||
font-size: 1.1rem; /* Larger title */
|
||||
color: #ffffff;
|
||||
margin-bottom: 10px;
|
||||
font-family: 'Space Grotesk', sans-serif;
|
||||
letter-spacing: 0.5px;
|
||||
border-bottom: 1px solid rgba(79, 150, 255, 0.3); /* Separator line */
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.tooltip-description {
|
||||
color: rgba(255, 255, 255, 0.9); /* Brighter text */
|
||||
font-size: 0.9rem;
|
||||
font-family: 'Inter', sans-serif;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.tooltip-arrow {
|
||||
position: absolute;
|
||||
bottom: -7px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) rotate(45deg);
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: rgba(15, 31, 74, 0.95); /* Match tooltip background */
|
||||
border: 1px solid rgba(79, 150, 255, 0.4); /* Match tooltip border */
|
||||
border-top: none;
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.data-node-tooltip.tooltip-below .tooltip-arrow {
|
||||
bottom: auto;
|
||||
top: -6px;
|
||||
transform: translateX(-50%) rotate(-135deg);
|
||||
border: 1px solid rgba(79, 150, 255, 0.4); /* Match tooltip border */
|
||||
border-bottom: none;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.data-node-ripple {
|
||||
position: absolute;
|
||||
border: 2px solid rgba(59, 130, 246, 0.6);
|
||||
border-radius: 50%;
|
||||
transform: scale(0);
|
||||
animation: dataRipple 0.6s ease-out;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@keyframes dataRipple {
|
||||
to {
|
||||
transform: scale(1);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.data-node-particle {
|
||||
position: fixed;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
background: radial-gradient(circle, rgba(59, 130, 246, 0.8), rgba(139, 92, 246, 0.6));
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
@keyframes nodeClickPulse {
|
||||
0% { transform: scale(1); }
|
||||
50% { transform: scale(1.3); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
|
||||
.data-node {
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.data-node:hover {
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* Enhanced neural network container interactions */
|
||||
.neural-network-container .data-node {
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.neural-network-container .data-node:hover {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
/* Enhanced hero animation data nodes */
|
||||
.hero-animation .data-node {
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.hero-animation .data-node:hover {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
/* Card tooltip animation */
|
||||
.data-node-tooltip {
|
||||
animation: tooltipPulse 3s ease-in-out infinite;
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
.data-node:hover .data-node-tooltip {
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
@keyframes tooltipPulse {
|
||||
0%, 100% {
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 15px rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.7), 0 0 25px rgba(79, 150, 255, 0.5);
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
document.head.appendChild(styles);
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize data node interactions when DOM is loaded
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
new DataNodeInteractions();
|
||||
});
|
||||
|
||||
// Initialize when script loads
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
new DataNodeInteractions();
|
||||
});
|
||||
|
||||
// Also initialize immediately if DOM is already loaded
|
||||
if (document.readyState === 'loading') {
|
||||
// Document is still loading, wait for DOMContentLoaded
|
||||
} else {
|
||||
// Document has already loaded
|
||||
new DataNodeInteractions();
|
||||
}
|
||||
|
||||
// Export for potential use in other modules
|
||||
if (typeof module !== 'undefined' && module.exports) {
|
||||
module.exports = DataNodeInteractions;
|
||||
}
|
||||
@@ -1,273 +0,0 @@
|
||||
/**
|
||||
* Hero Animation - Neural network visualization and interactive node effects
|
||||
*/
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Initialize neural mesh canvas
|
||||
initNeuralMesh();
|
||||
|
||||
// Initialize data nodes interaction
|
||||
initDataNodes();
|
||||
|
||||
// Initialize morphing shapes animation
|
||||
initMorphingShapes();
|
||||
|
||||
// Initialize data streams animation
|
||||
initDataStreams();
|
||||
});
|
||||
|
||||
// Create neural mesh network visualization
|
||||
function initNeuralMesh() {
|
||||
const canvas = document.querySelector('.mesh-canvas');
|
||||
if (!canvas) return;
|
||||
|
||||
const ctx = canvas.getContext('2d');
|
||||
const width = canvas.width;
|
||||
const height = canvas.height;
|
||||
|
||||
// Neural network settings
|
||||
const nodeCount = 120;
|
||||
const nodes = [];
|
||||
const connections = [];
|
||||
const connectionDistance = 150;
|
||||
const nodeSize = 2;
|
||||
|
||||
// Create nodes
|
||||
for (let i = 0; i < nodeCount; i++) {
|
||||
nodes.push({
|
||||
x: Math.random() * width,
|
||||
y: Math.random() * height,
|
||||
vx: (Math.random() - 0.5) * 0.5,
|
||||
vy: (Math.random() - 0.5) * 0.5,
|
||||
size: Math.random() * nodeSize + 1,
|
||||
color: `rgba(255, 255, 255, ${Math.random() * 0.5 + 0.1})`
|
||||
});
|
||||
}
|
||||
|
||||
// Animation loop
|
||||
function animate() {
|
||||
// Clear canvas
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
|
||||
// Draw connections
|
||||
connections.length = 0;
|
||||
|
||||
for (let i = 0; i < nodes.length; i++) {
|
||||
const nodeA = nodes[i];
|
||||
|
||||
for (let j = i + 1; j < nodes.length; j++) {
|
||||
const nodeB = nodes[j];
|
||||
|
||||
const dx = nodeB.x - nodeA.x;
|
||||
const dy = nodeB.y - nodeA.y;
|
||||
const distance = Math.sqrt(dx * dx + dy * dy);
|
||||
|
||||
if (distance < connectionDistance) {
|
||||
const opacity = 1 - (distance / connectionDistance);
|
||||
connections.push({
|
||||
x1: nodeA.x,
|
||||
y1: nodeA.y,
|
||||
x2: nodeB.x,
|
||||
y2: nodeB.y,
|
||||
opacity
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Draw connections
|
||||
for (const connection of connections) {
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(connection.x1, connection.y1);
|
||||
ctx.lineTo(connection.x2, connection.y2);
|
||||
ctx.strokeStyle = `rgba(80, 200, 255, ${connection.opacity * 0.3})`;
|
||||
ctx.lineWidth = 0.5;
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
// Draw and update nodes
|
||||
for (const node of nodes) {
|
||||
ctx.beginPath();
|
||||
ctx.arc(node.x, node.y, node.size, 0, Math.PI * 2);
|
||||
ctx.fillStyle = node.color;
|
||||
ctx.fill();
|
||||
|
||||
// Update position
|
||||
node.x += node.vx;
|
||||
node.y += node.vy;
|
||||
|
||||
// Bounce off edges
|
||||
if (node.x < 0 || node.x > width) node.vx *= -1;
|
||||
if (node.y < 0 || node.y > height) node.vy *= -1;
|
||||
}
|
||||
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
|
||||
// Start animation
|
||||
animate();
|
||||
|
||||
// Add mouse interaction
|
||||
canvas.addEventListener('mousemove', function(e) {
|
||||
const rect = canvas.getBoundingClientRect();
|
||||
const mouseX = e.clientX - rect.left;
|
||||
const mouseY = e.clientY - rect.top;
|
||||
|
||||
// Add attraction to mouse position for nearby nodes
|
||||
for (const node of nodes) {
|
||||
const dx = mouseX - node.x;
|
||||
const dy = mouseY - node.y;
|
||||
const distance = Math.sqrt(dx * dx + dy * dy);
|
||||
|
||||
if (distance < 100) {
|
||||
node.x += dx * 0.02;
|
||||
node.y += dy * 0.02;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Initialize interactive data nodes
|
||||
function initDataNodes() {
|
||||
const nodes = document.querySelectorAll('.data-node');
|
||||
|
||||
nodes.forEach(node => { // Add hover effects
|
||||
node.addEventListener('mouseenter', function() {
|
||||
// Highlight node
|
||||
this.classList.add('node-hover');
|
||||
|
||||
// Create connecting lines to related nodes
|
||||
const tech = this.getAttribute('data-tech');
|
||||
const connectedTech = getRelatedTechnologies(tech);
|
||||
nodes.forEach(otherNode => {
|
||||
const otherTech = otherNode.getAttribute('data-tech');
|
||||
if (otherTech && connectedTech.includes(otherTech)) {
|
||||
otherNode.classList.add('node-connected');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Remove effects on mouse leave
|
||||
node.addEventListener('mouseleave', function() {
|
||||
// Remove highlight
|
||||
this.classList.remove('node-hover');
|
||||
|
||||
// Remove connecting lines
|
||||
nodes.forEach(otherNode => {
|
||||
otherNode.classList.remove('node-connected');
|
||||
});
|
||||
});
|
||||
|
||||
// Add click interaction
|
||||
node.addEventListener('click', function() {
|
||||
const tech = this.getAttribute('data-tech');
|
||||
if (!tech) return;
|
||||
|
||||
// Get corresponding URL for the technology
|
||||
const url = getTechnologyPageUrl(tech);
|
||||
if (url) {
|
||||
// Create click pulse effect
|
||||
const pulse = document.createElement('div');
|
||||
pulse.className = 'node-pulse';
|
||||
this.appendChild(pulse);
|
||||
|
||||
// Navigate after animation
|
||||
setTimeout(() => {
|
||||
window.location.href = url;
|
||||
}, 300);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Add pulsing animation to core nodes
|
||||
const coreNodes = document.querySelectorAll('.node-core');
|
||||
coreNodes.forEach(node => {
|
||||
setInterval(() => {
|
||||
node.classList.add('core-pulse-active');
|
||||
setTimeout(() => {
|
||||
node.classList.remove('core-pulse-active');
|
||||
}, 1500);
|
||||
}, 3000 + Math.random() * 2000); // Randomize timing for natural effect
|
||||
});
|
||||
}
|
||||
|
||||
// Map technology names to related technologies
|
||||
function getRelatedTechnologies(tech) {
|
||||
const techMap = {
|
||||
'Machine Learning': ['Data Analytics', 'Generative AI', 'Agentic AI'],
|
||||
'Generative AI': ['Machine Learning', 'Data Analytics', 'Media & Entertainment'],
|
||||
'Data Analytics': ['Machine Learning', 'Finance', 'Retail'],
|
||||
'Automation': ['Agentic AI', 'Manufacturing', 'Healthcare'],
|
||||
'Finance': ['Data Analytics', 'Machine Learning'],
|
||||
'Healthcare': ['Machine Learning', 'Automation'],
|
||||
'Retail': ['Data Analytics', 'Machine Learning'],
|
||||
'Manufacturing': ['Automation', 'Data Analytics'],
|
||||
'Agentic AI': ['Machine Learning', 'Automation'],
|
||||
'Marketing': ['Data Analytics', 'Generative AI'],
|
||||
'Media & Entertainment': ['Generative AI', 'Data Analytics'],
|
||||
'Travel': ['Data Analytics', 'Automation'],
|
||||
'Education': ['Generative AI', 'Machine Learning'],
|
||||
'Technology': ['Machine Learning', 'Agentic AI', 'Data Analytics', 'Automation']
|
||||
};
|
||||
|
||||
return techMap[tech] || [];
|
||||
}
|
||||
|
||||
// Map technology names to page URLs
|
||||
function getTechnologyPageUrl(tech) {
|
||||
const urlMap = {
|
||||
'Machine Learning': 'Services/machine-learning.html',
|
||||
'Generative AI': 'Services/generative-ai.html',
|
||||
'Data Analytics': 'Services/data-analysis.html',
|
||||
'Automation': 'Services/automation-flows.html',
|
||||
'Agentic AI': 'Services/agentic-ai.html',
|
||||
'Finance': 'Industries/finance.html',
|
||||
'Healthcare': 'Industries/healthcare.html',
|
||||
'Retail': 'Industries/retail.html',
|
||||
'Manufacturing': 'Industries/manufacturing.html',
|
||||
'Marketing': 'Industries/marketing.html',
|
||||
'Media & Entertainment': 'Industries/media-entertainment.html',
|
||||
'Travel': 'Industries/travel.html',
|
||||
'Education': 'Education/workshops.html',
|
||||
'Technology': 'about.html'
|
||||
};
|
||||
|
||||
return urlMap[tech] || null;
|
||||
}
|
||||
|
||||
// Initialize morphing geometric shapes
|
||||
function initMorphingShapes() {
|
||||
const morphShapes = document.querySelectorAll('.morph-shape');
|
||||
|
||||
morphShapes.forEach(shape => {
|
||||
// Random initial properties
|
||||
const size = Math.random() * 100 + 50;
|
||||
const opacity = Math.random() * 0.15 + 0.05;
|
||||
const rotation = Math.random() * 360;
|
||||
const duration = Math.random() * 10 + 15;
|
||||
const delay = Math.random() * 5;
|
||||
|
||||
// Set initial style
|
||||
shape.style.width = `${size}px`;
|
||||
shape.style.height = `${size}px`;
|
||||
shape.style.opacity = opacity;
|
||||
shape.style.transform = `rotate(${rotation}deg)`;
|
||||
shape.style.animationDuration = `${duration}s`;
|
||||
shape.style.animationDelay = `${delay}s`;
|
||||
});
|
||||
}
|
||||
|
||||
// Initialize data streams animation
|
||||
function initDataStreams() {
|
||||
const streams = document.querySelectorAll('.stream, .stream-horizontal, .stream-diagonal');
|
||||
|
||||
streams.forEach(stream => {
|
||||
// Random animation properties
|
||||
const duration = Math.random() * 8 + 4;
|
||||
const delay = Math.random() * 3;
|
||||
|
||||
// Apply animation with random timing
|
||||
stream.style.animationDuration = `${duration}s`;
|
||||
stream.style.animationDelay = `${delay}s`;
|
||||
});
|
||||
}
|
||||
@@ -68,7 +68,7 @@ function initSectionTransitions() {
|
||||
|
||||
// Custom cursor effects for interactive elements
|
||||
function initCursorEffects() {
|
||||
const interactiveElements = document.querySelectorAll('a, button, .data-node, .tech-marquee-item');
|
||||
const interactiveElements = document.querySelectorAll('a, button, .data-node, .tech-card');
|
||||
const body = document.body;
|
||||
|
||||
// Create custom cursor elements
|
||||
|
||||
@@ -1,6 +1,46 @@
|
||||
// Fallback: Enhance dropdowns with fade/slide effect if not handled elsewhere
|
||||
// (dropdown.js already handles logic, so this is for extra UI polish)
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Hamburger menu functionality
|
||||
const hamburgerMenu = document.querySelector('.hamburger-menu');
|
||||
const navLinks = document.querySelector('.nav-links');
|
||||
|
||||
if (hamburgerMenu && navLinks) {
|
||||
hamburgerMenu.addEventListener('click', function() {
|
||||
hamburgerMenu.classList.toggle('active');
|
||||
navLinks.classList.toggle('active');
|
||||
|
||||
// Prevent body scrolling when menu is open
|
||||
if (navLinks.classList.contains('active')) {
|
||||
document.body.style.overflow = 'hidden';
|
||||
} else {
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
});
|
||||
|
||||
// Close menu when clicking on nav links
|
||||
navLinks.addEventListener('click', function(e) {
|
||||
if (e.target.classList.contains('nav-link') && !e.target.closest('.dropdown')) {
|
||||
hamburgerMenu.classList.remove('active');
|
||||
navLinks.classList.remove('active');
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
});
|
||||
|
||||
// Handle dropdown toggles in mobile menu
|
||||
const dropdownToggles = document.querySelectorAll('.dropdown > .nav-link');
|
||||
dropdownToggles.forEach(toggle => {
|
||||
toggle.addEventListener('click', function(e) {
|
||||
if (window.innerWidth <= 768) {
|
||||
e.preventDefault();
|
||||
const dropdownMenu = this.nextElementSibling;
|
||||
dropdownMenu.classList.toggle('show');
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Original dropdown enhancement code
|
||||
document.querySelectorAll('.dropdown-menu').forEach(menu => {
|
||||
menu.addEventListener('transitionend', function() {
|
||||
if (!menu.classList.contains('show')) {
|
||||
|
||||
@@ -1,27 +1,26 @@
|
||||
// Tech Marquee Animation Enhancement
|
||||
// Tech Cards Animation Enhancement
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const techMarqueeContents = document.querySelectorAll('.tech-marquee-content');
|
||||
const techItems = document.querySelectorAll('.tech-marquee-item');
|
||||
const techCardsContainer = document.querySelector('.tech-cards-container');
|
||||
const techCards = document.querySelectorAll('.tech-card');
|
||||
|
||||
// Adjust animation speed for each marquee
|
||||
techMarqueeContents.forEach((marquee, index) => {
|
||||
const isReversed = marquee.classList.contains('tech-marquee-content-reversed');
|
||||
const marqueeItems = marquee.querySelectorAll('.tech-marquee-item');
|
||||
const itemCount = marqueeItems.length / 2; // Account for duplicated items
|
||||
// No animation delay or dancing effects
|
||||
techCards.forEach((card) => {
|
||||
// Just add basic hover interaction
|
||||
card.addEventListener('mouseenter', function() {
|
||||
this.style.transform = 'translateY(-10px)';
|
||||
});
|
||||
|
||||
// Set slightly different speeds for each marquee
|
||||
const baseSpeed = isReversed ? 65 : 60;
|
||||
const animationDuration = Math.max(30, Math.min(70, itemCount * 5)); // Between 30s and 70s
|
||||
marquee.style.animationDuration = `${baseSpeed + (index * 10)}s`;
|
||||
});
|
||||
|
||||
// Add 3D tilt effect on mouse move for each tech icon
|
||||
techItems.forEach(item => {
|
||||
const iconContainer = item.querySelector('.tech-icon-container');
|
||||
card.addEventListener('mouseleave', function() {
|
||||
this.style.transform = '';
|
||||
});
|
||||
});
|
||||
// Add 3D tilt effect on mouse move for each tech card
|
||||
techCards.forEach(card => {
|
||||
const iconWrapper = card.querySelector('.tech-icon-wrapper');
|
||||
|
||||
if (iconContainer) {
|
||||
item.addEventListener('mousemove', function(e) {
|
||||
const rect = iconContainer.getBoundingClientRect();
|
||||
if (iconWrapper) {
|
||||
card.addEventListener('mousemove', function(e) {
|
||||
const rect = iconWrapper.getBoundingClientRect();
|
||||
const x = e.clientX - rect.left;
|
||||
const y = e.clientY - rect.top;
|
||||
|
||||
@@ -31,37 +30,40 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
const tiltX = (centerX - x) / 10;
|
||||
const tiltY = (y - centerY) / 10;
|
||||
|
||||
iconContainer.style.transform = `perspective(500px) rotateX(${tiltY}deg) rotateY(${-tiltX}deg) scale3d(1.05, 1.05, 1.05)`;
|
||||
iconWrapper.style.transform = `perspective(500px) rotateX(${tiltY}deg) rotateY(${-tiltX}deg) scale3d(1.1, 1.1, 1.1)`;
|
||||
});
|
||||
|
||||
item.addEventListener('mouseleave', function() {
|
||||
iconContainer.style.transform = '';
|
||||
card.addEventListener('mouseleave', function() {
|
||||
iconWrapper.style.transform = '';
|
||||
});
|
||||
}
|
||||
});
|
||||
// Removed pulse effects functionality - displaying raw icons without glow effects
|
||||
// Add a parallax effect to create depth between the two marquees
|
||||
|
||||
// Add a parallax effect to create depth in the tech cards container
|
||||
window.addEventListener('mousemove', function(e) {
|
||||
const containers = document.querySelectorAll('.tech-marquee-container');
|
||||
|
||||
containers.forEach((container, index) => {
|
||||
const isReversed = container.classList.contains('tech-marquee-reversed');
|
||||
const depth = isReversed ? 25 : 15; // Reduced sensitivity due to full width
|
||||
if (techCardsContainer) {
|
||||
const depth = 20;
|
||||
const moveX = (e.clientX - window.innerWidth / 2) / depth;
|
||||
const moveY = (e.clientY - window.innerHeight / 2) / depth;
|
||||
|
||||
// Limit the movement for a subtler effect with the full-width design
|
||||
const maxMove = 10;
|
||||
// Limit the movement for a subtler effect
|
||||
const maxMove = 5;
|
||||
const limitedMoveX = Math.max(-maxMove, Math.min(maxMove, moveX));
|
||||
const limitedMoveY = Math.max(-maxMove, Math.min(maxMove, moveY));
|
||||
|
||||
container.style.transform = `translate(${limitedMoveX}px, ${limitedMoveY}px)`;
|
||||
});
|
||||
techCardsContainer.style.transform = `translate(${limitedMoveX}px, ${limitedMoveY}px)`;
|
||||
}
|
||||
});
|
||||
|
||||
// Add entrance animation for each tech item
|
||||
const allMarquees = document.querySelectorAll('.tech-marquee-container');
|
||||
allMarquees.forEach((marquee, marqueeIndex) => {
|
||||
marquee.style.animationDelay = `${marqueeIndex * 0.2}s`;
|
||||
});
|
||||
// Add entrance animation for the tech cards container
|
||||
if (techCardsContainer) {
|
||||
techCardsContainer.style.opacity = '0';
|
||||
techCardsContainer.style.transform = 'translateY(20px)';
|
||||
|
||||
setTimeout(() => {
|
||||
techCardsContainer.style.transition = 'opacity 0.8s ease-out, transform 0.8s ease-out';
|
||||
techCardsContainer.style.opacity = '1';
|
||||
techCardsContainer.style.transform = 'translateY(0)';
|
||||
}, 200);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -1,813 +0,0 @@
|
||||
/**
|
||||
* Enhanced Unified Neural Network Animation and Data Node Interactive Effects
|
||||
* This file provides advanced visual effects and interactive animations for the neural network and data nodes
|
||||
* with optimized performance and responsive behavior across devices
|
||||
*/
|
||||
|
||||
// Neural Network Canvas Animation Class
|
||||
class NeuralNetworkAnimation {
|
||||
constructor() {
|
||||
this.canvas = document.querySelector('.mesh-canvas');
|
||||
this.ctx = this.canvas ? this.canvas.getContext('2d') : null;
|
||||
this.nodes = [];
|
||||
this.connections = [];
|
||||
this.mousePos = { x: 0, y: 0 };
|
||||
this.animationId = null;
|
||||
|
||||
if (this.ctx) {
|
||||
this.init();
|
||||
}
|
||||
}
|
||||
|
||||
init() {
|
||||
this.setupCanvas();
|
||||
this.createNodes();
|
||||
this.setupInteractions();
|
||||
this.setupResize();
|
||||
this.animate();
|
||||
}
|
||||
|
||||
setupCanvas() {
|
||||
const heroSection = document.getElementById('hero');
|
||||
if (heroSection) {
|
||||
const rect = heroSection.getBoundingClientRect();
|
||||
this.canvas.width = rect.width;
|
||||
this.canvas.height = rect.height;
|
||||
|
||||
this.canvas.style.width = '100%';
|
||||
this.canvas.style.height = '100%';
|
||||
}
|
||||
}
|
||||
|
||||
setupResize() {
|
||||
window.addEventListener('resize', () => {
|
||||
this.setupCanvas();
|
||||
this.nodes.forEach(node => {
|
||||
node.x = Math.min(node.x, this.canvas.width);
|
||||
node.y = Math.min(node.y, this.canvas.height);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
createNodes() {
|
||||
const nodeCount = 40;
|
||||
this.nodes = [];
|
||||
|
||||
for (let i = 0; i < nodeCount; i++) {
|
||||
this.nodes.push({
|
||||
x: Math.random() * this.canvas.width,
|
||||
y: Math.random() * this.canvas.height,
|
||||
vx: (Math.random() - 0.5) * 0.5,
|
||||
vy: (Math.random() - 0.5) * 0.5,
|
||||
radius: Math.random() * 3 + 1,
|
||||
opacity: Math.random() * 0.5 + 0.2,
|
||||
pulsePhase: Math.random() * Math.PI * 2,
|
||||
energy: Math.random()
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
updateNodes() {
|
||||
this.nodes.forEach(node => {
|
||||
// Update position
|
||||
node.x += node.vx;
|
||||
node.y += node.vy;
|
||||
|
||||
// Bounce off edges
|
||||
if (node.x <= 0 || node.x >= this.canvas.width) node.vx *= -1;
|
||||
if (node.y <= 0 || node.y >= this.canvas.height) node.vy *= -1;
|
||||
|
||||
// Keep nodes in bounds
|
||||
node.x = Math.max(0, Math.min(this.canvas.width, node.x));
|
||||
node.y = Math.max(0, Math.min(this.canvas.height, node.y));
|
||||
|
||||
// Update pulse
|
||||
node.pulsePhase += 0.02;
|
||||
node.energy = 0.5 + 0.5 * Math.sin(node.pulsePhase);
|
||||
});
|
||||
}
|
||||
|
||||
drawNodes() {
|
||||
this.nodes.forEach(node => {
|
||||
const gradient = this.ctx.createRadialGradient(
|
||||
node.x, node.y, 0,
|
||||
node.x, node.y, node.radius * 3
|
||||
);
|
||||
|
||||
const alpha = node.opacity * node.energy;
|
||||
gradient.addColorStop(0, `rgba(59, 130, 246, ${alpha})`);
|
||||
gradient.addColorStop(0.5, `rgba(139, 92, 246, ${alpha * 0.7})`);
|
||||
gradient.addColorStop(1, `rgba(236, 72, 153, 0)`);
|
||||
|
||||
this.ctx.beginPath();
|
||||
this.ctx.arc(node.x, node.y, node.radius, 0, Math.PI * 2);
|
||||
this.ctx.fillStyle = gradient;
|
||||
this.ctx.fill();
|
||||
|
||||
// Core dot
|
||||
this.ctx.beginPath();
|
||||
this.ctx.arc(node.x, node.y, node.radius * 0.3, 0, Math.PI * 2);
|
||||
this.ctx.fillStyle = `rgba(255, 255, 255, ${alpha * 0.8})`;
|
||||
this.ctx.fill();
|
||||
});
|
||||
}
|
||||
|
||||
drawConnections() {
|
||||
const maxDistance = 120;
|
||||
|
||||
for (let i = 0; i < this.nodes.length; i++) {
|
||||
for (let j = i + 1; j < this.nodes.length; j++) {
|
||||
const nodeA = this.nodes[i];
|
||||
const nodeB = this.nodes[j];
|
||||
|
||||
const dx = nodeB.x - nodeA.x;
|
||||
const dy = nodeB.y - nodeA.y;
|
||||
const distance = Math.sqrt(dx * dx + dy * dy);
|
||||
|
||||
if (distance < maxDistance) {
|
||||
const opacity = (1 - distance / maxDistance) * 0.3;
|
||||
const energyBoost = (nodeA.energy + nodeB.energy) / 2;
|
||||
|
||||
// Create dynamic gradient line
|
||||
const gradient = this.ctx.createLinearGradient(
|
||||
nodeA.x, nodeA.y, nodeB.x, nodeB.y
|
||||
);
|
||||
|
||||
gradient.addColorStop(0, `rgba(59, 130, 246, ${opacity * energyBoost})`);
|
||||
gradient.addColorStop(0.5, `rgba(139, 92, 246, ${opacity * energyBoost * 0.8})`);
|
||||
gradient.addColorStop(1, `rgba(236, 72, 153, ${opacity * energyBoost * 0.6})`);
|
||||
|
||||
this.ctx.strokeStyle = gradient;
|
||||
this.ctx.lineWidth = 1;
|
||||
this.ctx.globalCompositeOperation = 'lighter';
|
||||
|
||||
this.ctx.beginPath();
|
||||
this.ctx.moveTo(nodeA.x, nodeA.y);
|
||||
this.ctx.lineTo(nodeB.x, nodeB.y);
|
||||
this.ctx.stroke();
|
||||
|
||||
this.ctx.globalCompositeOperation = 'source-over';
|
||||
|
||||
// Data pulse along connection
|
||||
if (Math.random() < 0.01) {
|
||||
this.createDataPulse(nodeA, nodeB);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
createDataPulse(nodeA, nodeB) {
|
||||
const pulse = {
|
||||
startX: nodeA.x,
|
||||
startY: nodeA.y,
|
||||
endX: nodeB.x,
|
||||
endY: nodeB.y,
|
||||
progress: 0,
|
||||
speed: 0.02,
|
||||
life: 1
|
||||
};
|
||||
|
||||
this.dataPulses = this.dataPulses || [];
|
||||
this.dataPulses.push(pulse);
|
||||
}
|
||||
|
||||
updateDataPulses() {
|
||||
if (!this.dataPulses) return;
|
||||
|
||||
this.dataPulses = this.dataPulses.filter(pulse => {
|
||||
pulse.progress += pulse.speed;
|
||||
pulse.life -= 0.01;
|
||||
|
||||
if (pulse.progress >= 1 || pulse.life <= 0) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Draw pulse
|
||||
const x = pulse.startX + (pulse.endX - pulse.startX) * pulse.progress;
|
||||
const y = pulse.startY + (pulse.endY - pulse.startY) * pulse.progress;
|
||||
|
||||
const gradient = this.ctx.createRadialGradient(x, y, 0, x, y, 6);
|
||||
gradient.addColorStop(0, `rgba(255, 255, 255, ${pulse.life})`);
|
||||
gradient.addColorStop(1, `rgba(59, 130, 246, 0)`);
|
||||
|
||||
this.ctx.beginPath();
|
||||
this.ctx.arc(x, y, 4, 0, Math.PI * 2);
|
||||
this.ctx.fillStyle = gradient;
|
||||
this.ctx.fill();
|
||||
|
||||
return true;
|
||||
});
|
||||
}
|
||||
|
||||
handleMouseMove(e) {
|
||||
const rect = this.canvas.getBoundingClientRect();
|
||||
this.mousePos.x = e.clientX - rect.left;
|
||||
this.mousePos.y = e.clientY - rect.top;
|
||||
|
||||
// Create attraction effect
|
||||
this.nodes.forEach(node => {
|
||||
const dx = this.mousePos.x - node.x;
|
||||
const dy = this.mousePos.y - node.y;
|
||||
const distance = Math.sqrt(dx * dx + dy * dy);
|
||||
|
||||
if (distance < 100) {
|
||||
const force = (100 - distance) / 100 * 0.01;
|
||||
node.vx += dx * force;
|
||||
node.vy += dy * force;
|
||||
node.energy = Math.min(1, node.energy + 0.1);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
animate() {
|
||||
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
||||
|
||||
// Add subtle background gradient
|
||||
const bgGradient = this.ctx.createRadialGradient(
|
||||
this.canvas.width / 2, this.canvas.height / 2, 0,
|
||||
this.canvas.width / 2, this.canvas.height / 2, Math.max(this.canvas.width, this.canvas.height) / 2
|
||||
);
|
||||
bgGradient.addColorStop(0, 'rgba(59, 130, 246, 0.02)');
|
||||
bgGradient.addColorStop(1, 'rgba(139, 92, 246, 0.01)');
|
||||
|
||||
this.ctx.fillStyle = bgGradient;
|
||||
this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
|
||||
|
||||
this.updateNodes();
|
||||
this.drawConnections();
|
||||
this.drawNodes();
|
||||
this.updateDataPulses();
|
||||
|
||||
this.animationId = requestAnimationFrame(() => this.animate());
|
||||
}
|
||||
|
||||
setupInteractions() {
|
||||
// Mouse interaction only - data node interactions handled by DataNodeInteractions class
|
||||
this.canvas.addEventListener('mousemove', (e) => this.handleMouseMove(e));
|
||||
}
|
||||
|
||||
destroy() {
|
||||
if (this.animationId) {
|
||||
cancelAnimationFrame(this.animationId);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Data Node Interactive Effects Class
|
||||
class DataNodeInteractions {
|
||||
constructor() {
|
||||
this.tooltips = new Map();
|
||||
this.initializeInteractions();
|
||||
this.addStyles();
|
||||
} initializeInteractions() {
|
||||
console.log('Initializing data node interactions...');
|
||||
|
||||
// Look for data nodes in both containers
|
||||
const neuralNetworkNodes = document.querySelectorAll('.neural-network-container .data-node');
|
||||
const heroAnimationNodes = document.querySelectorAll('.hero-animation .data-node');
|
||||
|
||||
console.log(`Found ${neuralNetworkNodes.length} data nodes in neural-network-container`);
|
||||
console.log(`Found ${heroAnimationNodes.length} data nodes in hero-animation`);
|
||||
|
||||
// Debug: Check computed styles and verify they're interactive
|
||||
console.log('=== NEURAL NETWORK NODES ===');
|
||||
neuralNetworkNodes.forEach((node, index) => {
|
||||
const label = node.querySelector('.node-label')?.textContent?.trim();
|
||||
const classes = node.className;
|
||||
const computedStyle = window.getComputedStyle(node);
|
||||
const zIndex = computedStyle.zIndex;
|
||||
const pointerEvents = computedStyle.pointerEvents;
|
||||
|
||||
console.log(`Neural Node ${index + 1}: "${label}" (z-index: ${zIndex}, pointer-events: ${pointerEvents})`);
|
||||
|
||||
// Add visual debug indicator for 5 seconds
|
||||
node.style.border = '3px solid red';
|
||||
node.style.boxShadow = '0 0 10px red';
|
||||
setTimeout(() => {
|
||||
node.style.border = '';
|
||||
node.style.boxShadow = '';
|
||||
}, 5000);
|
||||
});
|
||||
|
||||
console.log('=== HERO ANIMATION NODES ===');
|
||||
heroAnimationNodes.forEach((node, index) => {
|
||||
const label = node.querySelector('.node-label')?.textContent?.trim();
|
||||
const classes = node.className;
|
||||
const computedStyle = window.getComputedStyle(node);
|
||||
const zIndex = computedStyle.zIndex;
|
||||
const pointerEvents = computedStyle.pointerEvents;
|
||||
|
||||
console.log(`Hero Node ${index + 1}: "${label}" (z-index: ${zIndex}, pointer-events: ${pointerEvents})`);
|
||||
|
||||
// Add visual debug indicator for 5 seconds
|
||||
node.style.border = '3px solid blue';
|
||||
node.style.boxShadow = '0 0 10px blue';
|
||||
setTimeout(() => {
|
||||
node.style.border = '';
|
||||
node.style.boxShadow = '';
|
||||
}, 5000);
|
||||
});
|
||||
|
||||
// Combine all data nodes
|
||||
const allDataNodes = [...neuralNetworkNodes, ...heroAnimationNodes];
|
||||
console.log(`Total data nodes found: ${allDataNodes.length}`);
|
||||
|
||||
// Verify no overlapping elements are blocking the neural network nodes
|
||||
if (neuralNetworkNodes.length > 0) {
|
||||
console.log('=== CHECKING FOR BLOCKING ELEMENTS ===');
|
||||
neuralNetworkNodes.forEach((node, index) => {
|
||||
const rect = node.getBoundingClientRect();
|
||||
const centerX = rect.left + rect.width / 2;
|
||||
const centerY = rect.top + rect.height / 2;
|
||||
const elementAtPoint = document.elementFromPoint(centerX, centerY);
|
||||
|
||||
if (elementAtPoint !== node && !node.contains(elementAtPoint)) {
|
||||
console.warn(`Node ${index + 1} may be blocked by:`, elementAtPoint);
|
||||
} else {
|
||||
console.log(`Node ${index + 1} is accessible at coordinates (${centerX}, ${centerY})`);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
allDataNodes.forEach((node, index) => {
|
||||
const nodeTextElement = node.querySelector('.node-text') || node.querySelector('.node-label');
|
||||
const nodeText = nodeTextElement?.textContent?.trim();
|
||||
console.log(`Setting up interactions for node ${index + 1}: "${nodeText}"`);
|
||||
|
||||
// Create and setup tooltip
|
||||
this.setupTooltip(node);
|
||||
|
||||
// Add hover effects
|
||||
this.setupHoverEffects(node);
|
||||
|
||||
// Add click effects
|
||||
this.setupClickEffects(node);
|
||||
});
|
||||
|
||||
console.log('Data node interactions initialization complete');
|
||||
}
|
||||
setupTooltip(node) {
|
||||
// Check for both .node-text and .node-label structures
|
||||
const nodeTextElement = node.querySelector('.node-text') || node.querySelector('.node-label');
|
||||
const nodeText = nodeTextElement?.textContent?.trim();
|
||||
if (!nodeText) return;
|
||||
|
||||
// Create tooltip element
|
||||
const tooltip = document.createElement('div');
|
||||
tooltip.className = 'data-node-tooltip';
|
||||
tooltip.innerHTML = `
|
||||
<div class="tooltip-header">${nodeText}</div>
|
||||
<div class="tooltip-content">${this.getTooltipContent(nodeText)}</div>
|
||||
`;
|
||||
|
||||
document.body.appendChild(tooltip);
|
||||
this.tooltips.set(node, tooltip);
|
||||
|
||||
// Show tooltip on hover
|
||||
node.addEventListener('mouseenter', (e) => {
|
||||
this.showTooltip(node, e);
|
||||
});
|
||||
|
||||
// Update tooltip position on mouse move
|
||||
node.addEventListener('mousemove', (e) => {
|
||||
this.updateTooltipPosition(node, e);
|
||||
});
|
||||
|
||||
// Hide tooltip on leave
|
||||
node.addEventListener('mouseleave', () => {
|
||||
this.hideTooltip(node);
|
||||
});
|
||||
} getTooltipContent(nodeText) {
|
||||
const tooltipMap = {
|
||||
'ML': 'Machine Learning algorithms for pattern recognition, predictive analytics, and automated decision-making across industries.',
|
||||
'Gen AI': 'Generative AI for content creation, code generation, and innovative solutions using advanced language models.',
|
||||
'Analytics': 'Advanced analytics and business intelligence for data-driven insights and strategic decision making.',
|
||||
'Automation': 'Intelligent process automation to streamline workflows, reduce costs, and improve operational efficiency.',
|
||||
'Finance': 'AI-powered financial services including algorithmic trading, risk assessment, and fraud detection.',
|
||||
'Healthcare': 'Medical AI for diagnosis, treatment optimization, drug discovery, and personalized patient care.',
|
||||
'Retail': 'E-commerce optimization, inventory management, and personalized customer experiences.',
|
||||
'Manufacturing': 'Smart manufacturing with predictive maintenance, quality control, and supply chain optimization.',
|
||||
'Agentic AI': 'Advanced autonomous AI agents that can perform complex tasks and make decisions independently.',
|
||||
'Marketing': 'AI-powered marketing automation, customer segmentation, and campaign optimization.',
|
||||
'Media': 'Content creation, recommendation systems, and audience engagement optimization.',
|
||||
'Travel': 'Smart travel planning, booking optimization, and personalized travel experiences.',
|
||||
'Education': 'Personalized learning platforms, educational content generation, and student performance analytics.',
|
||||
'Technology': 'Cutting-edge AI technology solutions and infrastructure for modern business needs.',
|
||||
'Data Analytics': 'Advanced analytics and business intelligence for data-driven insights and strategic decision making.',
|
||||
'Predictive': 'Predictive modeling and forecasting to anticipate trends, behaviors, and future outcomes.',
|
||||
'Media & Entertainment': 'Content creation, recommendation systems, and audience engagement optimization.',
|
||||
'Supply Chain': 'AI-driven supply chain optimization, demand forecasting, and inventory management solutions.',
|
||||
'Risk Mgmt': 'Advanced risk assessment and management systems using AI to identify, analyze, and mitigate business risks.'
|
||||
};
|
||||
|
||||
return tooltipMap[nodeText] || 'Advanced AI technology solutions for modern business challenges.';
|
||||
}
|
||||
|
||||
showTooltip(node, event) {
|
||||
const tooltip = this.tooltips.get(node);
|
||||
if (!tooltip) return;
|
||||
|
||||
tooltip.style.opacity = '1';
|
||||
tooltip.style.visibility = 'visible';
|
||||
tooltip.style.pointerEvents = 'none';
|
||||
this.updateTooltipPosition(node, event);
|
||||
}
|
||||
|
||||
updateTooltipPosition(node, event) {
|
||||
const tooltip = this.tooltips.get(node);
|
||||
if (!tooltip) return;
|
||||
|
||||
const tooltipRect = tooltip.getBoundingClientRect();
|
||||
const viewport = {
|
||||
width: window.innerWidth,
|
||||
height: window.innerHeight
|
||||
};
|
||||
|
||||
let left = event.clientX + 15;
|
||||
let top = event.clientY - tooltipRect.height - 10;
|
||||
|
||||
// Adjust if tooltip goes outside viewport
|
||||
if (left + tooltipRect.width > viewport.width - 10) {
|
||||
left = event.clientX - tooltipRect.width - 15;
|
||||
}
|
||||
|
||||
if (top < 10) {
|
||||
top = event.clientY + 15;
|
||||
}
|
||||
|
||||
tooltip.style.left = `${left}px`;
|
||||
tooltip.style.top = `${top}px`;
|
||||
}
|
||||
|
||||
hideTooltip(node) {
|
||||
const tooltip = this.tooltips.get(node);
|
||||
if (!tooltip) return;
|
||||
|
||||
tooltip.style.opacity = '0';
|
||||
tooltip.style.visibility = 'hidden';
|
||||
}
|
||||
setupHoverEffects(node) {
|
||||
// Get all data nodes from both containers for the dimming effect
|
||||
const allDataNodes = [
|
||||
...document.querySelectorAll('.neural-network-container .data-node'),
|
||||
...document.querySelectorAll('.hero-animation .data-node')
|
||||
];
|
||||
|
||||
node.addEventListener('mouseenter', () => {
|
||||
// Enhanced scaling and glow
|
||||
node.style.transform = 'scale(1.15)';
|
||||
node.style.filter = 'brightness(1.2) drop-shadow(0 0 15px rgba(59, 130, 246, 0.6))';
|
||||
node.style.zIndex = '100';
|
||||
|
||||
// Enhanced icon effects
|
||||
const nodeIcon = node.querySelector('.node-icon img');
|
||||
if (nodeIcon) {
|
||||
nodeIcon.style.transform = 'scale(1.1)';
|
||||
nodeIcon.style.filter = 'brightness(1.3) saturate(1.2)';
|
||||
}
|
||||
// Enhanced text effects
|
||||
const nodeText = node.querySelector('.node-text') || node.querySelector('.node-label');
|
||||
if (nodeText) {
|
||||
nodeText.style.color = '#60a5fa';
|
||||
nodeText.style.textShadow = '0 0 8px rgba(96, 165, 250, 0.5)';
|
||||
nodeText.style.transform = 'scale(1.05)';
|
||||
}
|
||||
|
||||
// Enhanced core glow
|
||||
const nodeCore = node.querySelector('.node-core');
|
||||
if (nodeCore) {
|
||||
nodeCore.style.boxShadow = '0 0 20px rgba(59, 130, 246, 0.8), inset 0 0 20px rgba(139, 92, 246, 0.3)';
|
||||
nodeCore.style.background = 'radial-gradient(circle, rgba(59, 130, 246, 0.3), rgba(139, 92, 246, 0.2))';
|
||||
}
|
||||
// Dim other nodes for focus effect
|
||||
allDataNodes.forEach(otherNode => {
|
||||
if (otherNode !== node) {
|
||||
otherNode.style.opacity = '0.3';
|
||||
otherNode.style.filter = 'blur(1px)';
|
||||
}
|
||||
});
|
||||
|
||||
// Create ripple effect
|
||||
this.createRippleEffect(node);
|
||||
});
|
||||
|
||||
node.addEventListener('mouseleave', () => {
|
||||
// Reset node
|
||||
node.style.transform = '';
|
||||
node.style.filter = '';
|
||||
node.style.zIndex = '';
|
||||
|
||||
// Reset icon
|
||||
const nodeIcon = node.querySelector('.node-icon img');
|
||||
if (nodeIcon) {
|
||||
nodeIcon.style.transform = '';
|
||||
nodeIcon.style.filter = '';
|
||||
}
|
||||
// Reset text
|
||||
const nodeText = node.querySelector('.node-text') || node.querySelector('.node-label');
|
||||
if (nodeText) {
|
||||
nodeText.style.color = '';
|
||||
nodeText.style.textShadow = '';
|
||||
nodeText.style.transform = '';
|
||||
}
|
||||
|
||||
// Reset core
|
||||
const nodeCore = node.querySelector('.node-core');
|
||||
if (nodeCore) {
|
||||
nodeCore.style.boxShadow = '';
|
||||
nodeCore.style.background = '';
|
||||
}
|
||||
// Restore other nodes
|
||||
allDataNodes.forEach(otherNode => {
|
||||
otherNode.style.opacity = '';
|
||||
otherNode.style.filter = '';
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
createRippleEffect(node) {
|
||||
const ripple = document.createElement('div');
|
||||
const rect = node.getBoundingClientRect();
|
||||
const size = Math.max(rect.width, rect.height) * 2;
|
||||
|
||||
ripple.style.cssText = `
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(59, 130, 246, 0.3), transparent 70%);
|
||||
transform: scale(0);
|
||||
animation: rippleEffect 0.8s ease-out;
|
||||
pointer-events: none;
|
||||
z-index: 1000;
|
||||
`;
|
||||
|
||||
ripple.style.width = `${size}px`;
|
||||
ripple.style.height = `${size}px`;
|
||||
ripple.style.left = `${rect.left + rect.width/2 - size/2}px`;
|
||||
ripple.style.top = `${rect.top + rect.height/2 - size/2}px`;
|
||||
|
||||
document.body.appendChild(ripple);
|
||||
|
||||
setTimeout(() => ripple.remove(), 800);
|
||||
}
|
||||
|
||||
setupClickEffects(node) {
|
||||
node.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
// Create particle burst effect
|
||||
this.createParticleBurst(node);
|
||||
|
||||
// Enhanced click feedback
|
||||
node.style.transform = 'scale(0.95)';
|
||||
setTimeout(() => {
|
||||
node.style.transform = 'scale(1.15)';
|
||||
}, 100);
|
||||
});
|
||||
}
|
||||
|
||||
createParticleBurst(node) {
|
||||
const rect = node.getBoundingClientRect();
|
||||
const centerX = rect.left + rect.width / 2;
|
||||
const centerY = rect.top + rect.height / 2;
|
||||
|
||||
for (let i = 0; i < 12; i++) {
|
||||
const particle = document.createElement('div');
|
||||
const angle = (i / 12) * Math.PI * 2;
|
||||
const velocity = 50 + Math.random() * 30;
|
||||
|
||||
particle.style.cssText = `
|
||||
position: fixed;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
background: linear-gradient(45deg, #3b82f6, #8b5cf6);
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
z-index: 1001;
|
||||
left: ${centerX}px;
|
||||
top: ${centerY}px;
|
||||
`;
|
||||
|
||||
document.body.appendChild(particle);
|
||||
|
||||
// Animate particle
|
||||
const endX = centerX + Math.cos(angle) * velocity;
|
||||
const endY = centerY + Math.sin(angle) * velocity;
|
||||
|
||||
particle.animate([
|
||||
{ transform: 'translate(0, 0) scale(1)', opacity: 1 },
|
||||
{ transform: `translate(${endX - centerX}px, ${endY - centerY}px) scale(0)`, opacity: 0 }
|
||||
], {
|
||||
duration: 800,
|
||||
easing: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)'
|
||||
}).onfinish = () => particle.remove();
|
||||
}
|
||||
}
|
||||
|
||||
addStyles() {
|
||||
if (document.getElementById('data-node-styles')) return;
|
||||
|
||||
const styles = document.createElement('style');
|
||||
styles.id = 'data-node-styles';
|
||||
styles.textContent = `
|
||||
/* Data Node Tooltip Styles */
|
||||
.data-node-tooltip {
|
||||
position: fixed;
|
||||
background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.95));
|
||||
border: 1px solid rgba(59, 130, 246, 0.3);
|
||||
border-radius: 12px;
|
||||
padding: 12px 16px;
|
||||
max-width: 280px;
|
||||
font-size: 14px;
|
||||
color: #e2e8f0;
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
|
||||
backdrop-filter: blur(10px);
|
||||
z-index: 10000;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.3s ease, visibility 0.3s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.tooltip-header {
|
||||
font-weight: 600;
|
||||
color: #60a5fa;
|
||||
margin-bottom: 6px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.tooltip-content {
|
||||
line-height: 1.4;
|
||||
color: #cbd5e1;
|
||||
}
|
||||
|
||||
/* Ripple Effect Animation */
|
||||
@keyframes rippleEffect {
|
||||
to {
|
||||
transform: scale(1);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Enhanced Data Node Interactions */
|
||||
.data-node {
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.data-node:hover {
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* Enhanced neural network container interactions */
|
||||
.neural-network-container .data-node {
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.neural-network-container .data-node:hover {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
/* Enhanced hero animation data nodes */
|
||||
.hero-animation .data-node {
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.hero-animation .data-node:hover {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
/* Neural Network Canvas Animation Styles */
|
||||
@keyframes neuralRipple {
|
||||
to {
|
||||
transform: scale(2);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes neuralPulse {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
opacity: 0.7;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.2);
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes neuralTrailFade {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
opacity: 0.8;
|
||||
}
|
||||
100% {
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
document.head.appendChild(styles);
|
||||
}
|
||||
}
|
||||
|
||||
// Mouse Trail Effect for Neural Network
|
||||
function createNeuralTrail(x, y) {
|
||||
const trail = document.createElement('div');
|
||||
trail.style.cssText = `
|
||||
position: fixed;
|
||||
left: ${x}px;
|
||||
top: ${y}px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: radial-gradient(circle, rgba(59, 130, 246, 0.8), transparent);
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
z-index: 1000;
|
||||
animation: neuralTrailFade 1.5s ease-out forwards;
|
||||
`;
|
||||
|
||||
document.body.appendChild(trail);
|
||||
setTimeout(() => trail.remove(), 1500);
|
||||
}
|
||||
|
||||
// Global mouse trail for hero section
|
||||
document.addEventListener('mousemove', (e) => {
|
||||
const heroSection = document.querySelector('#hero');
|
||||
if (!heroSection) return;
|
||||
|
||||
const rect = heroSection.getBoundingClientRect();
|
||||
if (e.clientY >= rect.top && e.clientY <= rect.bottom) {
|
||||
if (Math.random() < 0.1) { // Reduced frequency
|
||||
createNeuralTrail(e.clientX, e.clientY);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Initialize everything when DOM is loaded
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// Add a small delay to ensure all elements are fully rendered
|
||||
setTimeout(() => {
|
||||
console.log('Initializing unified neural network and data node interactions...');
|
||||
|
||||
// Debug: Check what data nodes exist
|
||||
console.log('=== DEBUG: Checking data node structure ===');
|
||||
const neuralNodes = document.querySelectorAll('.neural-network-container .data-node');
|
||||
const heroNodes = document.querySelectorAll('.hero-animation .data-node');
|
||||
const allNodes = document.querySelectorAll('.data-node');
|
||||
|
||||
console.log(`Total .data-node elements found: ${allNodes.length}`);
|
||||
console.log(`Neural network container nodes: ${neuralNodes.length}`);
|
||||
console.log(`Hero animation nodes: ${heroNodes.length}`);
|
||||
|
||||
// Log each node's details
|
||||
allNodes.forEach((node, index) => {
|
||||
const label = node.querySelector('.node-label')?.textContent?.trim() || 'No label';
|
||||
const text = node.querySelector('.node-text')?.textContent?.trim() || 'No text';
|
||||
const container = node.closest('.neural-network-container') ? 'neural-network' :
|
||||
node.closest('.hero-animation') ? 'hero-animation' : 'other';
|
||||
console.log(`Node ${index + 1}: "${label}" (text: "${text}") in ${container}`);
|
||||
});
|
||||
console.log('=== END DEBUG ===');
|
||||
|
||||
// Initialize neural network animation
|
||||
const neuralAnimation = new NeuralNetworkAnimation();
|
||||
|
||||
// Initialize data node interactions
|
||||
const dataNodeInteractions = new DataNodeInteractions();
|
||||
|
||||
// Handle resize for neural network
|
||||
window.addEventListener('resize', () => {
|
||||
neuralAnimation.setupCanvas();
|
||||
neuralAnimation.createNodes();
|
||||
});
|
||||
|
||||
// Cleanup on page unload
|
||||
window.addEventListener('beforeunload', () => {
|
||||
neuralAnimation.destroy();
|
||||
});
|
||||
|
||||
console.log('Unified system initialized successfully');
|
||||
}, 100); // Small delay to ensure DOM is fully rendered
|
||||
});
|
||||
|
||||
// Immediate test function to verify script loading
|
||||
console.log('🚀 Unified Neural Interactions script loaded!');
|
||||
|
||||
// Test function to manually check data nodes
|
||||
window.testDataNodes = function() {
|
||||
const allNodes = document.querySelectorAll('.data-node');
|
||||
console.log(`Found ${allNodes.length} data nodes:`);
|
||||
allNodes.forEach((node, i) => {
|
||||
const label = node.querySelector('.node-label')?.textContent || 'No label';
|
||||
console.log(`${i + 1}. ${label}`);
|
||||
});
|
||||
return allNodes;
|
||||
};
|
||||
|
||||
// Export for potential use in other modules
|
||||
if (typeof module !== 'undefined' && module.exports) {
|
||||
module.exports = { NeuralNetworkAnimation, DataNodeInteractions };
|
||||
}
|
||||
@@ -1,57 +0,0 @@
|
||||
# PowerShell script to update all HTML files with new CSS and JavaScript references
|
||||
|
||||
# Get all HTML files in the workspace and subdirectories
|
||||
$htmlFiles = Get-ChildItem -Path . -Filter *.html -Recurse
|
||||
|
||||
foreach ($file in $htmlFiles) {
|
||||
Write-Host "Processing: $($file.FullName)"
|
||||
|
||||
# Read the content of the file
|
||||
$content = Get-Content -Path $file.FullName -Raw
|
||||
$modified = $false
|
||||
|
||||
# Add animations.css if not already included
|
||||
if (-not $content.Contains('animations.css')) {
|
||||
$content = $content -replace '(<link rel="stylesheet" href=".*hero-animation.css" />)', '$1
|
||||
<link rel="stylesheet" href="css/animations.css" />'
|
||||
|
||||
# Fix paths for subdirectories
|
||||
if ($file.DirectoryName -ne (Get-Location).Path) {
|
||||
$content = $content -replace 'href="css/animations.css"', 'href="../css/animations.css"'
|
||||
}
|
||||
|
||||
$modified = $true
|
||||
}
|
||||
|
||||
# Add new script references if not already included
|
||||
$newScripts = @(
|
||||
"data-node-interactions.js",
|
||||
"page-specific.js",
|
||||
"dynamic-content.js",
|
||||
"form-handler.js"
|
||||
)
|
||||
|
||||
foreach ($script in $newScripts) {
|
||||
if (-not $content.Contains($script)) {
|
||||
$content = $content -replace '(</body>)', " <script src=`"js/$script`" defer></script>`n$1"
|
||||
|
||||
# Fix paths for subdirectories
|
||||
if ($file.DirectoryName -ne (Get-Location).Path) {
|
||||
$content = $content -replace "src=`"js/$script`"", "src=`"../js/$script`""
|
||||
}
|
||||
|
||||
$modified = $true
|
||||
}
|
||||
}
|
||||
|
||||
# Save the modified content back to the file
|
||||
if ($modified) {
|
||||
$content | Set-Content -Path $file.FullName
|
||||
Write-Host "Updated: $($file.FullName)"
|
||||
}
|
||||
else {
|
||||
Write-Host "No changes needed for: $($file.FullName)"
|
||||
}
|
||||
}
|
||||
|
||||
Write-Host "`nScript update complete. All HTML files have been updated with the new CSS and JavaScript references."
|
||||
Reference in New Issue
Block a user