🧠 Brainwave - AI Landing Page

A cutting-edge AI-powered landing page built with React, GSAP, and react-just-parallax. Experience stunning animations, parallax effects, and modern UI/UX design showcasing the future of artificial intelligence.

🌐 Live Demo | 📂 Repository

🚀 Features

1. 🤖 AI-Focused Design: Modern landing page showcasing AI capabilities
2. ✨ Smooth Animations: Powered by GSAP for fluid transitions and micro-interactions
3. 🎭 Parallax Scrolling: Immersive scrolling experience with react-just-parallax
4. 📱 Fully Responsive: Optimized for all devices and screen sizes
5. ⚡ Lightning Fast: Built with Vite for optimal performance
6. 🎨 Modern UI/UX: Clean, intuitive design with gradient backgrounds
7. 🔧 Reusable Components: Modular component architecture

🌐 Live Demo

Check out the live version: brainwave-lilac.vercel.app

🛠️ Tech Stack

1. ⚛️ Frontend: React 18, HTML5, CSS3
2. 🎬 Animations: GSAP (GreenSock Animation Platform)
3. 🌊 Parallax Effects: react-just-parallax
4. ⚙️ Build Tool: Vite
5. 🚀 Deployment: Vercel
6. 📦 Package Manager: npm

🖼️ Screenshots

Home

Benifits

Collaboration

Services

Pricing

RoadMap

Footer

📁 Project Structure

Brainwave/
├── src/
│   ├── assets/                    # Static assets (images, icons, etc.)
│   ├── components/                # React components
│   │   ├── design/               # Design-related components
│   │   │   ├── Benefits.jsx      # Benefits showcase section
│   │   │   ├── Button.jsx        # Reusable button component
│   │   │   ├── Collaboration.jsx # Collaboration features
│   │   │   ├── CompanyLogos.jsx  # Company logos carousel
│   │   │   ├── Footer.jsx        # Footer component
│   │   │   ├── Generating.jsx    # AI generation animation
│   │   │   ├── Header.jsx        # Navigation header
│   │   │   ├── Heading.jsx       # Section headings
│   │   │   ├── Hero.jsx          # Hero landing section
│   │   │   ├── Notification.jsx  # Notification components
│   │   │   ├── Pricing.jsx       # Pricing section
│   │   │   ├── PricingList.jsx   # Pricing plans list
│   │   │   ├── Roadmap.jsx       # Development roadmap
│   │   │   ├── Section.jsx       # Section wrapper
│   │   │   ├── Services.jsx      # Services showcase
│   │   │   └── Tagline.jsx       # Tagline component
│   ├── constants/                # Application constants
│   │   └── index.js              # Constants and configuration
│   ├── utils/                    # Utility functions
│   │   └── animation.js          # GSAP animation utilities
│   ├── App.jsx                   # Main App component
│   ├── index.css                 # Global styles
│   └── main.jsx                  # Application entry point
├── public/                       # Public assets
├── index.html                    # HTML template
├── package.json                  # Dependencies and scripts
├── vite.config.js               # Vite configuration
├── eslint.config.js             # ESLint configuration
├── .gitignore                   # Git ignore rules
└── README.md                    # Project documentation

📦 Getting Started

🔧 Prerequisites

• Node.js (v16 or later)
• npm or yarn package manager
• Git

📥 Installation

1. Clone the repository:

   git clone https://github.com/10Pratik01/Brainwave.git
   cd Brainwave

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Open your browser and navigate to:

   http://localhost:5173

🎨 Key Sections

• Hero Section: Eye-catching landing with AI-themed animations
• Benefits: Showcase of AI capabilities and advantages
• Collaboration: Team collaboration features with interactive elements
• Services: AI services with parallax scrolling effects
• Pricing: Flexible pricing plans with hover animations
• Roadmap: Development timeline with scroll-triggered reveals
• Company Logos: Trusted partners carousel

⚡ Animation Features

• GSAP Timelines: Complex animation sequences and staggered effects
• ScrollTrigger: Scroll-based animations and reveals
• Parallax Scrolling: Multi-layered depth effects
• Hover Interactions: Button and card hover animations
• Loading States: Smooth page and component transitions
• Micro-interactions: Subtle UI feedback animations

📜 Available Scripts

• npm run dev – Start development server with hot reload
• npm run build – Build optimized production bundle
• npm run preview – Preview production build locally
• npm run lint – Run ESLint for code quality

🎯 Code Examples

GSAP Animation Implementation:

import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);
// Hero section fade-in animation
gsap.timeline()
.from('.hero-title', {
duration: 1.2,
y: 100,
opacity: 0,
ease: 'power3.out'
})
.from('.hero-subtitle', {
duration: 1,
y: 50,
opacity: 0,
ease: 'power2.out'
}, '-=0.5');

Parallax Scrolling:

import { Parallax } from 'react-just-parallax';

🌟 Performance Optimizations

• Code Splitting: Dynamic imports for better loading
• Asset Optimization: Compressed images and lazy loading
• Animation Cleanup: Proper GSAP timeline management
• Bundle Analysis: Optimized build size
• Caching Strategy: Efficient resource caching

📱 Browser Support

• ✅ Chrome (latest)
• ✅ Firefox (latest)
• ✅ Safari (latest)
• ✅ Edge (latest)
• ✅ Mobile browsers (iOS Safari, Chrome Mobile)

🚀 Deployment

This project is deployed on Vercel. To deploy your own version:

1. Fork this repository
2. Connect your Vercel account to GitHub
3. Import your forked repository
4. Configure build settings (Vite preset)
5. Deploy! 🎉

🤝 Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository
2. Create your feature branch: git checkout -b feature/AmazingFeature
3. Commit your changes: git commit -m 'Add some AmazingFeature'
4. Push to the branch: git push origin feature/AmazingFeature
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

👨‍💻 Author

Pratik - GitHub Profile

⭐ Show Your Support

If you like this project, please consider giving it a ⭐ on GitHub! Your support helps me create more amazing projects.

📬 Contact

Have questions or suggestions? Feel free to reach out or open an issue on GitHub!