# 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.