Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sudhanshu-ambastha/apple-website
A visually rich and interactive Apple product showcase built with Reactjs, Vitejs, TailwindCSS, GSAP, and Three.js.
https://github.com/sudhanshu-ambastha/apple-website
apple-website gsap nodejs reactjs tailwindcss three-js vitejs
Last synced: 3 months ago
JSON representation
A visually rich and interactive Apple product showcase built with Reactjs, Vitejs, TailwindCSS, GSAP, and Three.js.
- Host: GitHub
- URL: https://github.com/sudhanshu-ambastha/apple-website
- Owner: Sudhanshu-Ambastha
- Created: 2024-07-06T08:18:24.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-07-06T14:29:36.000Z (6 months ago)
- Last Synced: 2024-10-11T22:20:23.880Z (3 months ago)
- Topics: apple-website, gsap, nodejs, reactjs, tailwindcss, three-js, vitejs
- Language: JavaScript
- Homepage: https://66c60b3895967f277083ffcb--beautiful-genie-77bd72.netlify.app/
- Size: 63.8 MB
- Stars: 8
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Apple Website
A visually rich and interactive Apple product showcase built with React, Vite, TailwindCSS, GSAP, and Three.js.
## Preview
## Technologies Used
- [TailwindCSS](https://tailwindcss.com/docs/guides/vite)
- [GSAP](https://gsap.com/)
- [Threejs](https://threejs.org/)
## Project Structure
```
applewebsite/
├── public/
│ ├── index.html
├── src/
│ ├── assets/
│ │ ├── images/
│ │ ├── videos/
│ ├── components/
│ │ ├── Footer.jsx
│ │ ├── Hero.jsx
│ │ ├── Highlights.jsx
│ │ ├── HowItWorks.jsx
│ │ ├── Loader.jsx
│ │ ├── Model.jsx
│ │ ├── ModelView.jsx
│ │ ├── Navbar.jsx
│ │ ├── VideoCarousel.jsx
│ ├── constants/
│ │ ├── index.js
│ ├── utils/
│ │ ├── animations.js
│ │ ├── index.js
│ ├── App.jsx
│ ├── index.css
│ ├── main.jsx
├── package.json
├── vite.config.js
```
## Installation
To set up and run this project locally, follow these steps:
Step 1: Clone the repository
```
git clone https://github.com/Sudhanshu-Ambastha/Apple-Website.git
```
```
cd applewebsite
```
Step 2: Install dependencies
```
npm install
```
Step 3: Install additional packages
```
npm install gsap @gsap/react
```
```
npm install three @react-three/drei @react-three/fiber
```
## Running the Project
After following the installation steps, you can run the project using the command `npm run dev` and open it in your browser to see the Apple website in action.
```
npm run dev
```