This is a clone of Apple's iPhone 15 Pro website using React.js and TailwindCSS. It highlights the effective use of GSAP (Greensock Animations) and Three.js for displaying iPhone 15 Pro models in various colors and shapes.
- React.js
- Three.js
- React Three Fiber
- React Three Drei
- GSAP (Greensock)
- Vite
- Tailwind CSS
👉 Beautiful Subtle Smooth Animations using GSAP: Enhanced user experience with seamless and captivating animations powered by GSAP.
👉 3D Model Rendering with Different Colors and Sizes: Explore the iPhone 15 Pro from every angle with dynamic 3D rendering, offering various color and size options.
👉 Custom Video Carousel (made with GSAP): Engage users with a unique and interactive video carousel developed using GSAP for a personalized browsing experience.
👉 Completely Responsive: Consistent access and optimal viewing on any device with a fully responsive design that adapts to different screen sizes.
...and many more, including code architecture and reusability.
- Hero: Designed to grab attention and provide a seamless introduction to the site's content. It features stunning animations powered by GSAP, ensuring an engaging first impression.
- Highlights: Showcases the key aspects of the iPhone, emphasizing its standout features through elegant design and smooth transitions.
- iPhone Model: Offers a 3D model of the iPhone, allowing users to interact with it. The 3D camera integration provides a realistic view, enhancing the user experience by enabling them to explore the device from all angles.
- Features: Delves deeper into the iPhone's capabilities, presenting detailed information through interactive elements and clean, responsive layouts facilitated by Tailwind CSS.
- How it Works: Guides users through the functionalities and features of the iPhone, making use of GSAP animations for an immersive experience.
Contributions are welcome! If you have suggestions for improvements or want to add new features, please follow these steps:
- Fork the repository.
- Create your feature branch (
git checkout -b feature/AmazingFeature). - Commit your changes (
git commit -m 'Add some AmazingFeature'). - Push to the branch (
git push origin feature/AmazingFeature). - Open a pull request.
Syed Mustafa Hassan - LinkedIn