Tech Superhero 3D Website 🦸‍♂️

A cutting-edge, modern website featuring stunning 3D animations and superhero-themed tech products.

✨ Features

• 3D Product Animations - Interactive 3D models using Three.js and React Three Fiber
• Modern Design - Cyberpunk-inspired UI with neon colors and glowing effects
• Smooth Animations - Framer Motion for buttery-smooth transitions
• Responsive - Fully responsive design that works on all devices
• Performance Optimized - Lazy loading and code splitting for fast load times

🚀 Tech Stack

• Framework: Next.js 14 (App Router)
• 3D Engine: React Three Fiber + Three.js + Drei
• Animation: Framer Motion
• Styling: TailwindCSS
• Icons: Lucide React
• Language: TypeScript

🎨 Design Features

• Cyberpunk color palette (Electric Blue, Neon Purple, Cyber Pink, Cyber Green)
• Glowing text effects and neon borders
• Animated 3D product showcase
• Parallax scrolling effects
• Interactive hover states
• Scanline effects for retro-futuristic feel

📦 Installation

# Install dependencies
npm install

# Run development server
npm run dev

# Build for production
npm run build

# Start production server
npm start

🌐 Development

Open http://localhost:3000 in your browser to see the website.

📁 Project Structure

├── app/
│   ├── layout.tsx       # Root layout
│   ├── page.tsx         # Home page
│   └── globals.css      # Global styles
├── components/
│   ├── Scene3D.tsx      # 3D canvas setup
│   ├── Product3D.tsx    # 3D product model
│   ├── Hero.tsx         # Hero section
│   └── ProductShowcase.tsx  # Product cards
└── public/              # Static assets

🎯 Key Components

• Scene3D: Main 3D canvas with lighting and camera setup
• Product3D: Animated 3D product with floating spheres and orbiting rings
• Hero: Landing section with animated text and CTAs
• ProductShowcase: Grid of product cards with stats and animations

🎨 Color Palette

• Cyber Blue: #00f0ff
• Cyber Purple: #b026ff
• Cyber Pink: #ff006e
• Cyber Green: #39ff14

📝 License

MIT