From d69e9755ce3eb6473ba2bbcc625669d269c19e70 Mon Sep 17 00:00:00 2001 From: RockENZO Date: Fri, 20 Sep 2024 23:56:58 +0930 Subject: [PATCH] readme file update --- README.md | 38 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 38 insertions(+) diff --git a/README.md b/README.md index f768e33..3d4f86c 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,7 @@ +# Apple Replica Website + +This project is a replica of the Apple website, built using React and Tailwind CSS. It features a dynamic and interactive user interface that showcases various Apple products, particularly the iPhone 15 Pro. The project includes components for navigation, hero sections, highlights, and a video carousel, all designed to provide a seamless and engaging user experience. + # React + Vite This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. @@ -6,3 +10,37 @@ Currently, two official plugins are available: - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh + +## Features + +- **Responsive Design**: Utilizes Tailwind CSS to ensure the website is fully responsive and looks great on all devices. +- **Dynamic Video Carousel**: A GSAP-powered video carousel that plays highlight videos of the iPhone 15 Pro, complete with progress indicators and playback controls. +- **Interactive Hero Section**: Features a hero section with a video background that adapts based on screen size, and includes smooth animations for text and call-to-action buttons. +- **Navigation Bar**: A sleek and minimalistic navigation bar that includes links to various sections of the website and icons for search and shopping bag. +- **Highlights Section**: Displays key features and highlights of the iPhone 15 Pro with smooth animations and links to watch related videos. + +## Installation +Install dependencies: + + ```sh + npm install + ``` + +## Usage + +1. Start the development server: + ```sh + npm run dev + ``` +2. Open your browser and navigate to `http://localhost:5173/` to view the website. + +## Code Overview + +### VideoCarousel Component + +The `VideoCarousel` component is designed to provide a seamless video playback experience within a carousel interface. Key features include: + +- **Video Playback Control**: The component can play and pause videos based on user interactions and application state. +- **Progress Bar Animation**: Utilizes GSAP to animate a progress bar that reflects the current playback position of the video. +- **State Management**: Manages video playback state, including handling when videos end and transitioning to the next video in the carousel. +