A visually stunning, fully responsive clone of the iPhone 15 website, designed to provide an immersive and engaging user experience. Built with React, Tailwind CSS, GSAP animations, and Three.js for 3D effects.
iPhone's Original Website for 16 :- https://www.apple.com/in/iphone-16-pro/
My website :- Suvam-iPhone Website
Responsive Design: Seamlessly adapts to different screen sizes.
Smooth Animations: Animated transitions powered by GSAP.
3D Interactions: Integrated Three.js for a realistic, interactive experience.
Error Monitoring: Sentry integration for real-time bug tracking.
Clone the repository and install the required dependencies.
# Clone the repository
git clone https://github.com/your-username/iphone15-website-clone.git
# Navigate to the project directory
cd iphone15-website-clone
# Initialize a new Vite project with React
npm create vite@latest my-project -- --template react
# Navigate to the new project directory
cd my-project
# Install base dependencies
npm install
# Install Tailwind CSS and its required plugins
npm install -D tailwindcss postcss autoprefixer
# Initialize Tailwind CSS configuration
npx tailwindcss init -p
Update tailwind.config.js In tailwind.config.js, update the content array as follows to ensure Tailwind scans your files correctly:
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
]
To create smooth animations and interactive 3D models, install the following libraries:
# GSAP and GSAP React for animations
npm install gsap @gsap/react
# Three.js with helper libraries for easier 3D object handling in React
npm install three @react-three/drei @react-three/fiber
# Install Sentry's React SDK for error tracking
npm install --save @sentry/react
# Install Sentry CLI for project configuration
npm install -g @sentry/wizard@latest
React - JavaScript library for building user interfaces
Vite - Next-generation frontend tool
Tailwind CSS - Utility-first CSS framework for rapid UI development
GSAP - JavaScript library for creating high-performance animations
Three.js - JavaScript 3D library
Sentry - Real-time error tracking for monitoring issues
To run the project locally:
# Start the development server
npm run dev
This project is licensed under the MIT License. See the LICENSE file for details.