iPhone 15 Website using React.js and Tailwind CSS

by React

iPhone 15 Website

this project aims to recreate the Apple iPhone 15 Pro website using React.js and TailwindCSS, with a focus on implementing smooth animations using GSAP (Greensock Animations) and rendering 3D models of the iPhone 15 Pro in different colors and sizes using Three.js and its related libraries (React Three Fiber and React Three Drei).

View Demo View Github

Tech Stack

  • React.js
  • Three.js
  • React Three Fiber
  • React Three Drei
  • GSAP (Greensock)
  • Vite
  • Tailwind CSS

Features

  1. Beautiful Subtle Smooth Animations using GSAP: Enhancing the user experience with seamless and captivating animations powered by the GSAP library.
  2. 3D Model Rendering with Different Colors and Sizes: Allowing users to explore the iPhone 15 Pro from various angles with dynamic 3D rendering, offering different color and size options.
  3. Custom Video Carousel (made with GSAP): Engaging users with a unique and interactive video carousel developed using GSAP for a personalized browsing experience.
  4. Completely Responsive: Ensuring consistent access and optimal viewing on any device with a fully responsive design that adapts to different screen sizes.
  5. Code Architecture and Reusability: Implementing a well-structured and reusable codebase for maintainability and future enhancements.