Apple Website Showcase

A pixel-perfect replica of Apple's website with advanced interactions and features built with React, Vite, and Tailwind CSS. This project showcases cutting-edge web development techniques and interactive user experiences.

🚀 Features

Core Features

• Pixel-perfect design matching Apple's official website
• Responsive layout that works on all device sizes
• Performance optimized with lazy loading and code splitting
• Interactive 3D iPhone models using Three.js and React Three Fiber

Advanced Custom Features

• Dynamic Island–Style Navigation - A floating, animated navigation bar inspired by iPhone's Dynamic Island that expands/contracts with user interactions
• "Try in AR" Mock Feature - Simulated AR experience that allows users to view iPhone 16 models in 3D space
• AI-Based Recommendation Section - Personalized product recommendations based on user browsing behavior
• Interactive Comparison Tool - Side-by-side comparison of iPhone models with interactive category selection
• Personalized Product Showcase - Uses localStorage to remember user preferences
• Siri-Like Voice Assistant - Voice command interface for navigating the website using the Web Speech API
• Next-Level Animations - Smooth, high-quality animations using GSAP and Framer Motion
• Accessibility Excellence - ARIA support, semantic HTML, and keyboard navigation

🛠️ Technologies Used

• React - UI component library
• Vite - Fast build tool and development server
• Tailwind CSS - Utility-first CSS framework
• GSAP - Professional-grade animation library
• Framer Motion - Animation library for React
• Three.js - 3D rendering library
• React Three Fiber - React renderer for Three.js
• Web Speech API - Voice recognition and synthesis

📱 Screenshots

🚀 Getting Started

Prerequisites

• Node.js 18+ installed
• npm or yarn

Installation

1. Clone the repository

   git clone https://github.com/Vishal141014/Apple-Website-Showcase
   cd apple-website-showcase
   

2. Install dependencies

   npm install
   # or
   yarn
   

3. Start the development server

   npm run dev
   # or
   yarn dev
   

4. Open your browser and navigate to http://localhost:5173

🏗️ Project Structure

/
├── public/              # Static files
│   ├── models/          # 3D model files
│   └── assets/          # Images and other assets
├── src/
│   ├── components/      # React components
│   │   ├── DynamicIslandNav.jsx
│   │   ├── ARViewer.jsx
│   │   ├── AIRecommendations.jsx
│   │   ├── PhoneComparison.jsx
│   │   ├── VoiceAssistant.jsx
│   │   └── ...
│   ├── constants/       # Constants and configuration
│   ├── utils/           # Utility functions
│   ├── App.jsx          # Main application component
│   └── main.jsx         # Application entry point
├── index.html           # HTML template
└── package.json         # Project dependencies

✨ Performance Optimizations

• Lazy Loading - Images and components are loaded as needed
• Code Splitting - JavaScript is split into smaller chunks for faster load times
• Image Optimization - Images are served in appropriate sizes and formats
• Caching - User preferences are stored in localStorage

🎯 Focus on Accessibility

• Semantic HTML - Properly structured HTML for better screen reader support
• ARIA Attributes - Enhanced accessibility for interactive elements
• Keyboard Navigation - Full support for keyboard-only users
• Reduced Motion Option - Considerations for users who prefer reduced motion
• Color Contrast - WCAG-compliant color contrast ratios

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Apple Inc. for the design inspiration
• Three.js community for the amazing 3D rendering capabilities
• The React ecosystem for making interactive UIs so approachable