A clone of the Apple website built using modern web technologies such as JavaScript, GSAP, ReactJS, TailwindCSS, and ThreeJS. This project replicates the sleek and interactive design of the Apple website, showcasing animations, responsive layouts, and 3D visual elements.
- Dynamic Animations: Powered by GSAP for smooth and engaging transitions.
- 3D Graphics: Created using ThreeJS for an immersive user experience, including an interactive iPhone viewer where users can rotate the iPhone, view different colors, and explore various models.
- Responsive Design: Styled with TailwindCSS to ensure compatibility across all devices.
- Component-Based Architecture: Built with ReactJS for modular and reusable components.
Homepage
Product Section
3D Animation
- ReactJS: For building the user interface.
- TailwindCSS: For styling and responsive design.
- GSAP (GreenSock Animation Platform): For smooth animations.
- ThreeJS: For rendering 3D graphics.
- JavaScript: Core programming language.
Follow these steps to set up the project locally:
Ensure you have the following installed:
- Node.js (v16 or higher)
- npm or yarn
-
Clone the repository:
git clone https://github.com/AleRzendee/iPhone15page.git
-
Navigate to the project directory:
cd iPhone15page -
Install dependencies:
npm install
Or if you use yarn:
yarn install
Or if you use pnpm:
pnpm add
-
Start the development server:
npm run dev
Or with yarn:
yarn run dev
Or with pnpm:
pnpm run dev
-
Open your browser and navigate to:
http://localhost:5173The link to localhost may differ, ensure you check the terminal and follow the link that is displayed.
Contributions are welcome! Feel free to open an issue or submit a pull request if you have any suggestions or improvements.
- Apple for their inspiring design.
- JavaScirpt Mastery for teaching these concepts in a very smooth fashion.
- The creators of ReactJS, TailwindCSS, GSAP, and ThreeJS for their incredible tools.