Modern iPhone 15 inspired website using Three.js and GSAP animations.

:notebook_with_decorative_cover: Table of Contents

• Folder Structure
• Getting Started
• Screenshots
• Tech Stack
• Stats
• Contribute
• Acknowledgements
• Buy Me a Coffee
• Follow Me
• Learn More
• Deploy on Netlify
• Give A Star
• Star History
• Give A Star

:bangbang: Folder Structure

Here is the folder structure of this app.

apple-clone/
  |- public/
  |- src/
    |-- assets/
    |-- components/
      |--- Features.jsx
      |--- Footer.jsx
      |--- Hero.jsx
      |--- Highlights.jsx
      |--- HowItWorks.jsx
      |--- IPhone.jsx
      |--- Lights.jsx
      |--- Loader.jsx
      |--- Model.jsx
      |--- ModelView.jsx
      |--- Navbar.jsx
      |--- VideoCarousel.jsx
    |-- constants/
      |--- index.js
    |-- utils/
      |--- animations.js
    |-- App.jsx
    |-- index.css
    |-- main.jsx
  |- .eslintrc.json
  |- .gitignore
  |- bun.lock
  |- index.html
  |- netlify.toml
  |- package.json
  |- postcss.config.js
  |- tailwind.config.js
  |- vite.config.js

:toolbox: Getting Started

1. Make sure Git and NodeJS is installed.
2. Clone this repository to your local computer.
3. Install project dependencies using npm install --legacy-peer-deps or yarn install --legacy-peer-deps
4. Now app is fully configured 👍 and you can start using this app using either one of npm run dev or yarn dev.

NOTE: Please make sure to keep your API keys and configuration values secure and do not expose them publicly.

:camera: Screenshots

:gear: Tech Stack

:wrench: Stats

:raised_hands: Contribute

You might encounter some bugs while using this app. You are more than welcome to contribute. Just submit changes via pull request and I will review them before merging. Make sure you follow community guidelines.

:gem: Acknowledgements

Useful resources and dependencies that are used in Apple Clone.

• @gsap/react: ^2.1.2
• @react-three/drei: ^10.7.7
• @react-three/eslint-plugin: ^0.1.2
• @react-three/fiber: ^9.6.1
• @types/react: ^19.2.15
• @types/react-dom: ^19.2.3
• @vitejs/plugin-react: ^6.0.2
• autoprefixer: ^10.5.0
• eslint: ^10.4.0
• eslint-config-prettier: ^10.1.8
• eslint-config-standard: ^17.1.0
• eslint-plugin-import: ^2.32.0
• eslint-plugin-react: ^7.37.5
• eslint-plugin-react-hooks: ^7.1.1
• eslint-plugin-react-refresh: ^0.5.2
• eslint-plugin-tailwindcss: ^3.18.3
• gsap: ^3.15.0
• postcss: ^8.5.15
• prettier: ^3.8.3
• react: ^19.2.6
• react-dom: ^19.2.6
• tailwindcss: ^3.4.17
• three: ^0.184.0
• three-stdlib: ^2.36.1
• vite: ^8.0.13

:coffee: Buy Me a Coffee

[

](https://www.buymeacoffee.com/sanidhy "Buy me a Coffee")

:rocket: Follow Me

:books: Learn More

To deepen your understanding of React.js and Netlify, explore the following resources:

• React.js Documentation - delve into React.js features, concepts, and API.
• React Official Tutorial - an interactive tutorial to get hands-on experience with React.

For Netlify-specific information:

• Netlify Documentation - learn about Netlify's features, deployment options, and more.
• Getting Started with Netlify and React - a guide on deploying React applications on Netlify.

You're encouraged to contribute and provide feedback on Netlify's GitHub repository.

:page_with_curl: Deploy on Netlify

The simplest way to deploy your React.js app is to use the Netlify Platform - a powerful platform for modern web projects.

Explore the Netlify deployment documentation for step-by-step instructions on deploying your React.js app on Netlify.

Happy coding, and feel free to share your thoughts and improvements with the Netlify community!

:star: Give A Star

You can also give this repository a star to show more people and they can use this repository.

:star2: Star History