A modern, interactive Apple MacBook Pro showcase website built with cutting-edge web technologies. Experience the power of the M4 chip through stunning 3D visuals and smooth animations.

View Live Website

• 3D Product Visualization: Interactive MacBook Pro models with smooth transitions
• Smooth Animations: GSAP-powered scroll-triggered animations
• Responsive Design: Optimized for all device sizes
• Modern UI/UX: Clean, Apple-inspired design language
• Performance Optimized: Built with Next.js 15 and React 19
• TypeScript: Full type safety throughout the application

• Hero Section: Dynamic video background with product introduction
• Product Viewer: Interactive 3D MacBook models (14" and 16")
• Performance Showcase: M4 chip capabilities and benchmarks
• Feature Highlights: Apple Intelligence and key features
• Responsive Navigation: Clean, modern navigation bar

• Node.js 18+
• npm or yarn

1. Clone the repository

   git clone https://github.com/your-username/apple-website.git
   cd apple-website

2. Install dependencies

   npm install
   # or
   yarn install

3. Run the development server

   npm run dev
   # or
   yarn dev

4. Open your browser Navigate to http://localhost:3000

npm run build
npm start

apple-website/
├── src/
│   ├── app/
│   │   ├── (root)/
│   │   │   ├── Hero.tsx
│   │   │   ├── ProductViewer.tsx
│   │   │   ├── Showcase.tsx
│   │   │   ├── Performance.tsx
│   │   │   ├── Features.tsx
│   │   │   ├── Highlights.tsx
│   │   │   └── page.tsx
│   │   ├── layout.tsx
│   │   └── globals.css
│   ├── components/
│   │   ├── NavBar.tsx
│   │   ├── Footer.tsx
│   │   ├── models/
│   │   └── three/
│   ├── constants/
│   └── store/
├── public/
│   ├── models/
│   ├── videos/
│   └── fonts/
└── package.json

The project includes high-quality 3D MacBook Pro models:

• MacBook Pro 14" (Space Black)
• MacBook Pro 16" (Space Black)
• Optimized GLB files for web performance

• Next.js 15: React framework with App Router
• React 19: Latest React features and concurrent rendering
• Three.js: 3D graphics library
• React Three Fiber: React renderer for Three.js
• GSAP: Professional-grade animations
• Tailwind CSS: Utility-first CSS framework
• TypeScript: Type-safe JavaScript
• Zustand: Lightweight state management

The website is fully responsive and optimized for:

• Desktop (1920x1080+)
• Tablet (768px - 1024px)
• Mobile (320px - 767px)

This project is deployed on Vercel and automatically builds from the main branch.

Important Notice

This project is for educational purposes only. Apple, MacBook Pro, and related trademarks are property of Apple Inc.

Disclaimer: This is not an official Apple website. All Apple trademarks, logos, and product names are the property of Apple Inc. and are used here for educational demonstration purposes only.