From 29165abbaa748e205fa31ec6bdccc36080228aae Mon Sep 17 00:00:00 2001 From: ectasy663 Date: Mon, 26 May 2025 17:40:17 +0530 Subject: [PATCH] Complete website optimization: Color scheme standardization and hero page enhancement - STANDARDIZED COLOR SCHEMES: Unified all service pages to use consistent purple theme (#6d28d9) - Removed theme-specific body classes from automation-flows.html and agentic-ai.html - Removed inline CSS color overrides from machine-learning.html, generative-ai.html, and data-analysis.html - Updated 15+ instances of hardcoded border colors to use rgba(var(--primary-color-rgb), 0.3) - Updated 5+ hover effects to use rgba(var(--primary-color-rgb), 0.4) for consistent glow colors - All service pages now maintain visual consistency with the main website - ENHANCED HERO PAGE: Improved data node scattering for better organic distribution - Repositioned core service nodes (ML, AI, Analytics, Automation) for natural scatter pattern - Enhanced industry nodes positioning with organic right-side distribution - Improved strategic nodes placement across right quadrant for better visual balance - Added varied animation delays and floating patterns for different node groups - Implemented micro-positioning adjustments for more natural appearance - Created size variations and rotation effects for enhanced organic feel - NEW FEATURES ADDED: - Enhanced CSS animations with varied floating patterns - Improved node interaction effects with staggered hover animations - Better responsive design for mobile devices - New documentation files for color standardization completion - TECHNICAL IMPROVEMENTS: - Updated hero-animation.css with enhanced organic scatter positioning - Maintained all existing functionality while improving visual aesthetics - Ensured cross-browser compatibility and mobile responsiveness --- COLOR_SCHEME_STANDARDIZATION_COMPLETE.md | 156 +++ COLOR_STANDARDIZATION_COMPLETE.md | 152 +++ DYNAMIC_FEATURES.md | 104 ++ Education/corporate-trainings.html | 184 ++- Education/individual-trainings.html | 224 +++- Education/workshops.html | 172 ++- Industries/case-studies.html | 34 +- Industries/finance.html | 189 ++- Industries/healthcare.html | 83 +- Industries/manufacturing.html | 82 +- Industries/marketing.html | 111 +- Industries/media-entertainment.html | 84 +- Industries/retail.html | 77 +- Industries/travel.html | 75 +- ...CE_PAGES_COLOR_STANDARDIZATION_COMPLETE.md | 0 Services/agentic-ai.html | 142 +- Services/automation-flows.html | 148 ++- Services/data-analysis.html | 94 +- Services/generative-ai.html | 90 +- Services/machine-learning.html | 142 +- about.html | 18 +- assets/Company Icons/GN Name logo.svg | 20 + assets/Company Icons/GN logo white.svg | 1 + assets/Company Icons/GN logo with banner.svg | 49 + assets/tech-icons/Anthropic Ai.svg | 12 + assets/tech-icons/Chroma.svg | 9 + assets/tech-icons/Google Ai Gemini.svg | 114 ++ assets/tech-icons/Groq Ai Icon.svg | 1 + assets/tech-icons/Hugging Face.svg | 67 + assets/tech-icons/Llamaindex.svg | 22 + assets/tech-icons/Milvus.svg | 7 + assets/tech-icons/Mistral AI.svg | 1 + assets/tech-icons/Ollama Language Model.svg | 7 + assets/tech-icons/Pinecone Database.svg | 24 + assets/tech-icons/Qdrant.svg | 24 + assets/tech-icons/Weaviate.svg | 102 ++ assets/tech-icons/anthropic claude.png | Bin 0 -> 1664 bytes assets/tech-icons/docker.png | Bin 0 -> 1674 bytes assets/tech-icons/faiss.svg | 0 assets/tech-icons/haystack.svg | 0 assets/tech-icons/langchain.svg | 0 assets/tech-icons/meta-color.svg | 1 + assets/tech-icons/openai.svg | 1 + assets/tech-icons/pytorch.svg | 1 + assets/tech-icons/rag.svg | 0 assets/tech-icons/spacy.svg | 0 assets/tech-icons/tensorflow.svg | 1 + assets/tech-icons/transformers.svg | 0 assets/tech-icons/vectordb.svg | 0 assets/tech-icons/vllm.svg | 0 contact.html | 15 +- css/animations.css | 339 +++++ css/benefits-cards.css | 106 ++ css/hero-animation.css | 1139 +++++++++++++++++ css/style.css | 929 ++++++++++++-- fix-education-links.ps1 | 24 + index.html | 331 ++++- js/data-node-interactions.js | 761 +++++++++++ js/data-node-interactions.js.new | 755 +++++++++++ js/dynamic-content.js | 364 ++++++ js/form-handler.js | 311 +++++ js/form-subscribe.js | 1 + js/hero-animation-new.js | 273 ++++ js/main.js | 137 ++ js/menu-dropdown.js | 14 + js/page-specific.js | 289 +++++ js/tech-marquee.js | 32 +- js/unified-neural-interactions.js | 813 ++++++++++++ update-scripts.ps1 | 57 + 69 files changed, 8685 insertions(+), 830 deletions(-) create mode 100644 COLOR_SCHEME_STANDARDIZATION_COMPLETE.md create mode 100644 COLOR_STANDARDIZATION_COMPLETE.md create mode 100644 DYNAMIC_FEATURES.md create mode 100644 SERVICE_PAGES_COLOR_STANDARDIZATION_COMPLETE.md create mode 100644 assets/Company Icons/GN Name logo.svg create mode 100644 assets/Company Icons/GN logo white.svg create mode 100644 assets/Company Icons/GN logo with banner.svg create mode 100644 assets/tech-icons/Anthropic Ai.svg create mode 100644 assets/tech-icons/Chroma.svg create mode 100644 assets/tech-icons/Google Ai Gemini.svg create mode 100644 assets/tech-icons/Groq Ai Icon.svg create mode 100644 assets/tech-icons/Hugging Face.svg create mode 100644 assets/tech-icons/Llamaindex.svg create mode 100644 assets/tech-icons/Milvus.svg create mode 100644 assets/tech-icons/Mistral AI.svg create mode 100644 assets/tech-icons/Ollama Language Model.svg create mode 100644 assets/tech-icons/Pinecone Database.svg create mode 100644 assets/tech-icons/Qdrant.svg create mode 100644 assets/tech-icons/Weaviate.svg create mode 100644 assets/tech-icons/anthropic claude.png create mode 100644 assets/tech-icons/docker.png create mode 100644 assets/tech-icons/faiss.svg create mode 100644 assets/tech-icons/haystack.svg create mode 100644 assets/tech-icons/langchain.svg create mode 100644 assets/tech-icons/meta-color.svg create mode 100644 assets/tech-icons/openai.svg create mode 100644 assets/tech-icons/pytorch.svg create mode 100644 assets/tech-icons/rag.svg create mode 100644 assets/tech-icons/spacy.svg create mode 100644 assets/tech-icons/tensorflow.svg create mode 100644 assets/tech-icons/transformers.svg create mode 100644 assets/tech-icons/vectordb.svg create mode 100644 assets/tech-icons/vllm.svg create mode 100644 css/animations.css create mode 100644 css/benefits-cards.css create mode 100644 css/hero-animation.css create mode 100644 fix-education-links.ps1 create mode 100644 js/data-node-interactions.js create mode 100644 js/data-node-interactions.js.new create mode 100644 js/dynamic-content.js create mode 100644 js/form-handler.js create mode 100644 js/hero-animation-new.js create mode 100644 js/page-specific.js create mode 100644 js/unified-neural-interactions.js create mode 100644 update-scripts.ps1 diff --git a/COLOR_SCHEME_STANDARDIZATION_COMPLETE.md b/COLOR_SCHEME_STANDARDIZATION_COMPLETE.md new file mode 100644 index 0000000..d5328a0 --- /dev/null +++ b/COLOR_SCHEME_STANDARDIZATION_COMPLETE.md @@ -0,0 +1,156 @@ +# 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 `` 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. diff --git a/COLOR_STANDARDIZATION_COMPLETE.md b/COLOR_STANDARDIZATION_COMPLETE.md new file mode 100644 index 0000000..dca0fc8 --- /dev/null +++ b/COLOR_STANDARDIZATION_COMPLETE.md @@ -0,0 +1,152 @@ +# 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 + + + + + +``` + +### 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. diff --git a/DYNAMIC_FEATURES.md b/DYNAMIC_FEATURES.md new file mode 100644 index 0000000..89b7813 --- /dev/null +++ b/DYNAMIC_FEATURES.md @@ -0,0 +1,104 @@ +# 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. diff --git a/Education/corporate-trainings.html b/Education/corporate-trainings.html index c4b3225..0e07aa8 100644 --- a/Education/corporate-trainings.html +++ b/Education/corporate-trainings.html @@ -5,6 +5,7 @@ Corporate Trainings - Gyannetra +