iPhone 15 Pro Clone

A responsive Apple-style iPhone 15 Pro landing page built with React, Vite, Three.js, GSAP, and Tailwind CSS. The project combines product videos, scroll-based storytelling, animated transitions, and an interactive 3D iPhone model with color and size controls.

Product-page clone with video storytelling, 3D interaction, and smooth motion.

Features

• Responsive hero section with desktop and mobile video sources
• Animated navigation, headings, and call-to-action content with GSAP
• Highlights video carousel with play, pause, replay, and progress indicators
• Interactive 3D iPhone model powered by React Three Fiber and Drei
• Orbit controls for rotating the product model
• Color selection for Natural, Blue, White, and Black Titanium finishes
• Size switcher for 6.1 inch and 6.7 inch model views
• Explore section with titanium product imagery and scroll-triggered reveal animations
• A17 Pro chip section with framed gameplay video
• Footer with Apple-style shopping, legal, and policy links
• Tailwind CSS utility styling with a dark product-focused layout

Tech Stack

Tool	Purpose
React	Component-based UI
Vite	Fast development and build tooling
Three.js	3D rendering
React Three Fiber	React renderer for Three.js
Drei	Useful helpers for React Three Fiber
GSAP	Timeline and scroll animations
Tailwind CSS	Utility-first styling

Getting Started

Prerequisites

Make sure you have Node.js installed on your machine.

Installation

Clone the repository and install dependencies:

git clone <your-repository-url>
cd iphone-clone
npm install

Development

Start the local development server:

npm run dev

Open the local URL shown in your terminal, usually:

http://localhost:5173

Build

Create a production build:

npm run build

Preview

Preview the production build locally:

npm run preview

Project Structure

src/
  components/
    Hero/              Hero video section
    Highlights/        Product highlights section
    VideoCarousel/     Animated video carousel
    Model/             3D model section and controls
    ModelView/         Drei View wrapper for model sizes
    Iphone/            GLTF iPhone model component
    Feutures/          Explore/story section
    Chip/              A17 Pro chip section
    Navbar/            Top navigation
    Footer/            Footer links and shop information
  constants/           Navigation, video, color, and size data
  utils/               Asset imports
  animate.js           Shared GSAP animation helpers
  App.jsx              Main page composition
  main.jsx             React entry point
public/
  assets/              Images and videos
  models/              3D model files

Notes

• The 3D model is loaded from public/models/scene.glb.
• Product images and videos are stored in public/assets.
• The iPhone model component was generated with gltfjsx.
• The original 3D model credit is included in src/components/Iphone/index.jsx.
• The feature section folder is currently named Feutures in the codebase.
• The footer component is imported from a folder named ّFooter.

Scripts

npm run dev      # Start the Vite dev server
npm run build    # Build the app for production
npm run preview  # Preview the production build
npm run lint     # Run ESLint

Credits

3D model source: Apple iPhone 15 Pro Max Black by Polyman_3D on Sketchfab

This project is for learning and portfolio purposes.