Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vinod-mane3021/apple-landing-page
This is landing page of apple website
https://github.com/vinod-mane3021/apple-landing-page
Last synced: 20 days ago
JSON representation
This is landing page of apple website
- Host: GitHub
- URL: https://github.com/vinod-mane3021/apple-landing-page
- Owner: Vinod-Mane3021
- Created: 2024-06-25T17:52:17.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-07-16T14:10:50.000Z (6 months ago)
- Last Synced: 2024-07-16T17:08:53.302Z (6 months ago)
- Language: TypeScript
- Homepage: https://apple-landing-page-omega.vercel.app
- Size: 37.3 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## 📋 Table of Contents
1. 🤖 [Introduction](#introduction)
2. ⚙️ [Tech Stack](#tech-stack)
3. 🔋 [Features](#features)
4. 🤸 [Quick Start](#quick-start)
This project is a replica of Apple's iPhone 15 Pro website built with Next.js and TailwindCSS. It showcases smooth animations using GSAP and interactive 3D models of the iPhone 15 Pro in different colors and shapes with Three.js.
- React.js
- Three.js
- React Three Fiber
- React Three Drei
- GSAP (Greensock)
- Vite
- Tailwind CSS
## 🚀 Features
* good first impression of product, giving options to buy
* Custom Video Carousel
* Product Highlights with animated progress tracking bars
* Rendering 3D model with different colors and sizes
* Completely Responsive
## 🤸 Quick Start
Follow these steps to set up the project locally on your machine.
**Prerequisites**
Make sure you have the following installed on your machine:
- [Git](https://git-scm.com/)
- [Node.js](https://nodejs.org/en)
- [npm](https://www.npmjs.com/)
**Cloning the Repository**
```bash
$ git clone https://github.com/Vinod-Mane3021/apple-landing-page.git
$ cd apple-landing-page
```
First, run the development server:
```bash
$ pnpm dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.