🌟 3D Landing Page Template

A modern, performance-focused template for creating stunning 3D landing pages using React, Three.js, and GSAP.

✨ Features

• 🎯 Single Page Focus - Clean, focused 3D landing page
• 🎨 3D Interactions - Scroll-based 3D animations and scenes
• ⚡ Performance Optimized - Efficient 3D rendering and animations
• 📱 Responsive Design - Works beautifully on all devices
• 🌙 Dark/Light Theme - Built-in theme switching
• 🎭 GSAP Animations - Smooth, professional animations
• 🔧 TypeScript - Full type safety
• 🎨 Tailwind CSS - Utility-first styling

🏗️ What's Included

Core Components

• HomePage - Main landing page with 3D sections
• LandingHero - Hero section with 3D background
• ScrollScene - Scroll-triggered 3D animations
• AdvancedScene - Interactive 3D scenes
• MinimalLayout - Clean navigation layout

3D Features

• Three.js integration with React Three Fiber
• GSAP scroll animations
• Interactive 3D models
• Performance-optimized rendering
• Responsive 3D scenes

Developer Experience

• TypeScript for type safety
• ESLint + Prettier for code quality
• Hot reload development
• Production-ready build

🚀 Quick Start

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

📁 Project Structure

src/
├── components/
│   ├── 3d/           # 3D components and scenes
│   ├── layout/       # Layout components
│   └── sections/     # Page sections
├── hooks/            # Custom React hooks
├── context/          # React context (theme, etc.)
├── types/            # TypeScript type definitions
├── utils/            # Utility functions
├── styles/           # Global styles
└── pages/
    └── HomePage.tsx  # Main landing page

🎨 Customization

This template is designed to be easily customizable:

1. 3D Models - Replace models in /public/models/
2. Styling - Modify Tailwind classes or global CSS
3. Animations - Adjust GSAP animations in 3D components
4. Content - Update text and sections in HomePage.tsx
5. Theme - Customize colors in theme context

🔧 Technologies

• React 18 - Modern React with hooks
• TypeScript - Type-safe development
• Three.js - 3D graphics library
• React Three Fiber - React renderer for Three.js
• GSAP - Professional animations
• Tailwind CSS - Utility-first CSS
• Vite - Fast build tool

📝 License

MIT License - feel free to use for personal and commercial projects.

---

Perfect for: Portfolio sites, product showcases, creative agencies, and any project that needs stunning 3D visuals.