🍎 Apple Web Clone

A modern, responsive clone of Apple's website built with React, Vite, and Tailwind CSS. Features pixel-perfect UI components, smooth animations, and protected images.

✨ Features

• 🎨 Pixel-Perfect Design - Matches Apple's aesthetic with precise spacing, typography, and colors
• 📱 Fully Responsive - Optimized for all screen sizes from mobile to 4K displays
• 🖼️ Protected Images - Anti-drag, anti-download, and anti-right-click image protection
• ⚡ Lightning Fast - Built with Vite for instant hot module replacement
• 🎭 Smooth Animations - Hover effects, transitions, and transforms
• 🧩 Component-Based - Modular, reusable React components
• 🎯 Modern Footer - Comprehensive footer with all Apple sections and legal text
• 🌈 Product Grid - Modern card-based product showcase with shadows and hover effects

🚀 Quick Start

Prerequisites

• Node.js 16.x or higher
• npm or yarn package manager

Installation

1. Clone the repository

   git clone https://github.com/ChamathDilshanC/Apple-Web-Clone.git
   cd Apple-Web-Clone

2. Install dependencies

   npm install

3. Start development server

   npm run dev

4. Open your browser Navigate to http://localhost:5173

Build for Production

npm run build

The optimized production build will be in the dist/ folder.

Preview Production Build

npm run preview

📁 Project Structure

Apple-Web-Clone/
├── public/               # Static assets
│   ├── Iphone17pro.png
│   ├── Iphone17Air.png
│   ├── MacBook-Air-M3-2.png
│   ├── MacBook_Air_15.png
│   ├── MacBook-Air-M3-1.png
│   └── ...
├── src/
│   ├── components/       # React components
│   │   ├── Header.jsx    # Navigation bar
│   │   ├── Hero.jsx      # iPhone 17 Pro hero section
│   │   ├── IPhoneAirSection.jsx  # iPhone Air showcase
│   │   ├── MacBookProSection.jsx # MacBook with decorative images
│   │   ├── ProductGrid.jsx       # Modern product cards
│   │   └── Footer.jsx    # Comprehensive footer
│   ├── assets/           # Additional assets
│   ├── App.jsx           # Main app component
│   ├── main.jsx          # App entry point
│   └── index.css         # Global styles + Tailwind
├── index.html
├── vite.config.js
├── tailwind.config.cjs
├── postcss.config.cjs
└── package.json

🛠️ Tech Stack

• Frontend Framework: React 18.x
• Build Tool: Vite 5.x
• Styling: Tailwind CSS 3.x
• Language: JavaScript (ES6+)
• Package Manager: npm

🎨 Components Overview

Header

Modern navigation bar with Apple logo and menu items. Sticky positioning for seamless scrolling.

Hero Section

Full-width hero featuring the iPhone 17 Pro with responsive typography and call-to-action buttons.

iPhone Air Section

Showcase section with side-positioned image and descriptive text. Features protected image implementation.

MacBook Pro Section

Multi-image display with center MacBook flanked by decorative left/right images using absolute positioning.

Product Grid

Responsive 2-column grid (1 column on mobile) featuring:

• Modern card design with rounded corners
• Box shadows and hover scale effects
• Protected images with event handlers
• Alternating light/dark themes

Footer

Comprehensive footer matching Apple.com with:

• Legal disclaimers and trade-in information
• Five-column navigation (responsive)
• Shop and Learn, Account, Entertainment sections
• Apple Store, Business, Education, Healthcare, Government
• Apple Values and About Apple
• Bottom bar with legal links and country selector

🔒 Image Protection

All product images include multiple protection layers:

// Protection container
onContextMenu={(e) => e.preventDefault()}
onDragStart={(e) => e.preventDefault()}

// Protected image
className="protected-image"
draggable="false"

CSS classes provide cross-browser compatibility:

• protected-image-container - Wrapper protection
• protected-image - Image-level protection with vendor prefixes

🎯 Key Features Implementation

Responsive Breakpoints

• Mobile: < 640px
• Tablet: 640px - 768px
• Desktop: 768px - 1024px
• Large Desktop: 1024px - 1280px
• XL Desktop: 1280px+

Apple Color Palette

• Background: #f5f5f7, #fbfbfd
• Black: #000000, #1d1d1f
• Text Gray: #6e6e73, #86868b
• Link Blue: #06c
• Border: #d2d2d7

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the project
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📝 License

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

👨‍💻 Author

Chamath Dilshan C

• GitHub: @ChamathDilshanC

🙏 Acknowledgments

• Design inspiration from Apple.com
• Built as an educational project to practice modern web development
• Special thanks to the React and Tailwind CSS communities

📞 Support

If you have any questions or run into issues, please open an issue on GitHub.

---

Made with ❤️ and ☕