This project is a replica of the iPhone 15 Pro landing page from Apple's website. It is built using React, Three.js, GSAP, TypeScript, Vite, and Tailwind CSS to create a visually stunning and interactive user experience.
- Realistic 3D Model: Utilizes Three.js to render a lifelike 3D model of the iPhone 15 Pro, allowing users to explore the device from different angles.
- Smooth Animations: GSAP (GreenSock Animation Platform) is employed to create smooth and fluid animations throughout the landing page, enhancing user engagement.
- Responsive Design: Tailwind CSS ensures that the landing page is fully responsive, providing an optimal viewing experience across various devices and screen sizes.
- Interactive Elements: Users can interact with the page through intuitive gestures and animations, making the experience interactive and engaging.
- React: Used as the primary JavaScript library for building the user interface and managing component-based architecture. Three.js: Empowered the creation of the 3D model of the iPhone 15 Pro, offering powerful rendering capabilities within the browser.
- GSAP: Provided advanced animation tools and methods to create dynamic and fluid animations that enhance the visual appeal of the landing page.
- TypeScript: Employed for static type-checking, ensuring code reliability and maintainability by catching errors during development.
- Vite: Utilized as the build tool to provide fast and efficient development and bundling capabilities, enhancing developer productivity.
- Tailwind CSS: Leveraged for rapid UI development and styling, offering a utility-first approach for creating responsive and customizable designs.
- Clone the Repository:
git clone https://github.com/ViraMesha/apple
- Install Dependencies:
cd apple npm install
- Run the Development Server:
npm run dev
- Open the Application:
Visit http://localhost:5173/ in your web browser to view the landing page.