Dreams Market - Modern Animated Landing Page

A stunning, modern landing page for Dreams Market - a revolutionary trading platform on Solana where trading dreams become reality. This project showcases cutting-edge web technologies, smooth animations, and immersive 3D experiences.

✨ Features

• 🎬 Immersive Hero Section - Video background with smooth animations
• 🚗 Car Landing Section - Interactive car showcase with video transitions
• 🎨 3D Product Visualization - Interactive 3D MacBook models using Three.js
• 📊 Performance Metrics - Animated statistics and achievements
• 🎯 Feature Showcase - Beautifully designed feature highlights
• ✨ Smooth Animations - GSAP-powered scroll-triggered animations
• 📱 Fully Responsive - Optimized for all devices and screen sizes
• 🎭 Modern UI/UX - Clean, minimalist design with gradient accents
• 📧 Waitlist Integration - Email collection for early access
• 🔗 Wallet Connection - Connect wallet button with smooth hover effects

🛠️ Tech Stack

Core Technologies

• React 19 - Latest React with modern hooks and features
• Vite - Lightning-fast build tool and dev server
• Tailwind CSS 4 - Utility-first CSS framework
• GSAP - Professional-grade animation library
• Three.js - 3D graphics library for WebGL
• React Three Fiber - React renderer for Three.js
• Zustand - Lightweight state management

Key Libraries

• @react-three/drei - Useful helpers for React Three Fiber
• @gsap/react - GSAP hooks for React
• react-responsive - Media queries for React
• clsx - Utility for constructing className strings

🚀 Getting Started

Prerequisites

• Node.js (v18 or higher recommended)
• npm or yarn package manager

Installation

1. Clone the repository

git clone https://github.com/yourusername/animated-landing-page-dreams-market.git
cd animated-landing-page-dreams-market

2. Install dependencies

npm install
# or
yarn install

3. Start the development server

npm run dev
# or
yarn dev

4. Open your browser and navigate to http://localhost:5173

Build for Production

npm run build
# or
yarn build

The production-ready files will be in the dist directory.

Preview Production Build

npm run preview
# or
yarn preview

📁 Project Structure

animated-landing-page-dreams-market/
├── public/
│   ├── 3d-images/          # 3D model textures and images
│   ├── car-assets/         # Car showcase videos
│   ├── car-images/         # Car gallery images
│   ├── fonts/              # Custom font files
│   ├── models/             # 3D GLB model files
│   ├── videos/             # Hero and feature videos
│   └── logo.png            # Brand logo
├── src/
│   ├── components/         # React components
│   │   ├── Animated3DSection.jsx
│   │   ├── BannerSection.jsx
│   │   ├── CarLandingSection.jsx
│   │   ├── Features.jsx
│   │   ├── Footer.jsx
│   │   ├── Hero.jsx
│   │   ├── Highlights.jsx
│   │   ├── NavBar.jsx
│   │   ├── Performance.jsx
│   │   ├── ProductViewer.jsx
│   │   ├── Showcase.jsx
│   │   ├── Waitlist.jsx
│   │   └── models/         # 3D model components
│   ├── constants/          # Configuration and constants
│   ├── store/              # Zustand state management
│   ├── App.jsx             # Main application component
│   ├── index.css           # Global styles and Tailwind config
│   └── main.jsx            # Application entry point
├── index.html              # HTML template
├── vite.config.js          # Vite configuration
└── package.json            # Project dependencies

🎨 Key Components

NavBar

Modern navigation bar with smooth logo animation and connect wallet button with elegant hover effects.

Hero Section

Immersive hero section with video background and compelling call-to-action.

Car Landing Section

Interactive car showcase featuring McLaren supercars with smooth video transitions and carousel navigation.

Animated 3D Section

Interactive 3D MacBook models that users can rotate and explore, showcasing product details in an engaging way.

Performance Section

Animated metrics and statistics demonstrating platform achievements and capabilities.

Features Section

Beautifully designed feature cards highlighting key platform benefits.

Waitlist Section

Email collection form for early access signups with smooth animations and success states.

🎯 Performance Optimizations

• Code Splitting - Optimized bundle sizes with Vite
• Lazy Loading - 3D models and heavy assets loaded on demand
• Video Optimization - Compressed video files for faster loading
• Image Optimization - Optimized image formats and sizes
• Smooth Animations - Hardware-accelerated CSS and GSAP animations

🌈 Design Highlights

• Modern Gradient Accents - Beautiful gradient colors throughout the UI
• Smooth Transitions - Seamless animations between sections
• Dark Theme - Elegant dark background with vibrant accents
• Typography - Custom fonts for a unique brand identity
• Micro-interactions - Delightful hover and click effects

📝 Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

This project is private and proprietary.

👨‍💻 Author

Allan - Senior Fullstack Developer

Built with passion and attention to detail, showcasing modern web development best practices and cutting-edge technologies.

---

Dreams Market - Where Trading Dreams Become Reality on Solana 🚀