This project is a React.js and TailwindCSS-based clone of Apple's iPhone 15 Pro website, showcasing the seamless integration of GSAP (Greensock Animations) and Three.js. The website effectively displays the iPhone 15 Pro models in various colors and shapes, delivering an engaging and interactive user experience.
Live demo : https://myapplestore.vercel.app/
Libraries:
Frameworks:
🔹 Beautiful, Subtle, and Smooth Animations with GSAP
Elevate the user experience with fluid, captivating animations powered by GSAP. These animations contribute to a polished and professional feel, ensuring that every interaction is seamless.
🔹 Dynamic 3D Model Rendering
Explore the iPhone 15 Pro in all its glory with dynamic 3D rendering. Users can effortlessly view the model from various angles, and explore different colors and sizes, offering a truly immersive experience.
🔹 Interactive Custom Video Carousel
Engage your audience with a custom video carousel crafted using GSAP. This unique feature offers a personalized and interactive browsing experience that keeps users captivated.
🔹 Fully Responsive Design
Guarantee a consistent and optimized viewing experience across all devices. The design adapts flawlessly to different screen sizes, ensuring that the site looks great whether on mobile, tablet, or desktop.
🔹 Clean Code Architecture and Reusability
Take advantage of a well-structured codebase that promotes scalability and reusability. This approach ensures efficient development processes and simplifies maintenance for future updates.
Follow these steps to set up the project locally on your machine.
Prerequisites
Make sure you have the following installed on your machine:
-
Git
-
Node.js
-
npm (Node Package Manager)
Cloning the Repository
git clone https://github.com/Cirilplackal/apple-clone.git
npm install apple-clone
cd apple-cloneInstall the project dependencies using npm:
npm installRunning the Project
npm run devOpen http://localhost:5173 in your browser to view the project.