This project is a landing page created for the iPhone 15 using React. It includes an animated 3D model of the iPhone 15 that users can interact with. It uses modern web technologies and design principles to showcase the phone in an engaging way.
-
The knowledge and inspiration for this project were derived from Build awesome 3D landing page.
-
3D Model Used In This project Information:
- Title: Apple iPhone 15 Pro Max Black
- Source: Apple iPhone 15 Pro Max Black - Sketchfab
- Author: polyman (polyman - Sketchfab)
- Model License: License Type: CC-BY-4.0 (Creative Commons Attribution 4.0 International)
This work is based on "Apple iPhone 15 Pro Max Black" (https://sketchfab.com/3d-models/apple-iphone-15-pro-max-black-df17520841214c1792fb8a44c6783ee7) by polyman (https://sketchfab.com/Polyman_3D) licensed under CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)
This gif shows a brief overview of the project, and it may take a while to load!
- Animated 3D model of the iPhone 15 rendered using Three.js and animated using GSAP
- Users can rotate the model, and change the color
- Responsive design adapting to different screen sizes
- Color picker component built from scratch
To run this application locally, follow these steps:
- Clone the repository: git clone https://github.com/mohammedamcs/3d-landing-page.git
- Navigate to the project directory: cd 3d-landing-page
- Install the dependencies and run: npm install && npm start
- Open your web browser and visit: http://localhost:3000
Make sure you have Node.js and npm (Node Package Manager) installed on your machine before running these commands.