This project is a clone of the Apple website, designed as a single page application with animations and interactive components.
This Apple website clone replicates the sleek design and animations of the official Apple website. Built with Next.js, Three.js, GSAP, React, and Tailwind CSS. It is responsive and works seamlessly on any device size. Vite is used for the build process, and Sentry is integrated for error tracking.
- Hero Section: An engaging hero section with smooth animations.
- Features: Display of key features in an attractive layout.
- Highlights: Showcase of product highlights.
- iPhone Model: 3D model of an iPhone using Three.js.
- Navbar Video Carousel: Interactive video carousel in the navigation bar.
- Footer: A comprehensive footer section.
- Responsive Design: Ensures compatibility across various device sizes.
- Framework: Next.js + React
- Animations: GSAP
- 3D Rendering: Three.js
- CSS Framework: Tailwind CSS
- Build Tool: Vite
- Error Tracking: Sentry
##Some Images
To set up the project locally, follow these steps:
-
Clone the repository:
**Clone the Repo** cd apple_website
-
Install dependencies:
npm install
-
Start the development server:
npm run dev
-
Open your browser and navigate to:
http://localhost
This website is create using a tutorial on youtube. Reference/Credit: https://www.youtube.com/watch?v=RbxHZwFtRT4&t=32101s