iPhone 15 Pro Website Clone 📱

📋 Table of Contents

1. 🤖 Introduction
2. ⚙️ Tech Stack
3. 🔋 Features
4. 🤸 Quick Start
   • Prerequisites
   • Cloning the Repository
   • Installation
   • Running the Project
5. 🔗 Links
6. 🚀 More

🤖 Introduction

This project is a clone of Apple's iPhone 15 Pro website, built using React.js and TailwindCSS. It showcases advanced animations and 3D model rendering using GSAP (Greensock Animations) and Three.js, giving users an immersive and engaging browsing experience.

⚙️ Tech Stack

Technology	Purpose
React.js	Frontend framework for building the user interface
Three.js	3D rendering library for displaying iPhone models
React Three Fiber	Integrates Three.js with React
React Three Drei	Helper components for React Three Fiber
GSAP (Greensock)	Advanced animations for UI elements
Vite	Fast and modern development server
Tailwind CSS	Utility-first CSS framework for styling

🔋 Features

• 👉 Beautiful Subtle Smooth Animations using GSAP: Experience enhanced, seamless animations that elevate the UI interaction.
• 👉 3D Model Rendering with Different Colors and Sizes: View the iPhone 15 Pro in various colors and sizes with interactive 3D models.
• 👉 Custom Video Carousel (made with GSAP): A unique, interactive video carousel that keeps users engaged.
• 👉 Completely Responsive: A fully responsive design that ensures optimal performance and display on any device.
• 👉 Code Architecture and Reusability: Organized code structure promoting maintainability and reusability.

🤸 Quick Start

Here is how to git-started(sorry🥲) by setting up the project on your local environment.

Prerequisites

Ensure you have the following installed:

• Git
• Node.js
• npm (Node Package Manager)

Cloning the Repository

Clone the repository using:

git clone https://github.com/JavaScript-Mastery-Pro/iphone-doc.git
cd iphone-doc

Installation

Install the project dependencies with:

npm install

Running the Project

Start the development server with:

npm run dev

Visit http://localhost:5173 in your browser to view the project.

🔗 Links

Sarthak Sachdev

• Website - Sarthak Sachdev
• LinkedIn - Sarthak Sachdev
• Twitter - @sarthak_sach69

🚀 More

Stay tuned for upcoming features, enhancements, and more! Would love to setup contributions in future if anyone is interested!!

Happy coding! 😊🚀