🚗 Porsche-Inspired React Website

A premium, modern, and fully responsive React website inspired by the design and user experience of the official Porsche website.

---

✨ Features

• 🎨 Light & Dark Theme

  • Fully functional theme toggle
  • Persistent theme using localStorage
  • Smooth transitions between modes

• 🖼️ High-Quality Visual Design

  • Fullscreen hero section with cinematic imagery
  • Luxury-focused UI with minimal layout
  • Responsive image handling

• 🚘 Car Models Showcase

  • Interactive cards with hover animations
  • Clean presentation of different models

• 🎬 Smooth Animations

  • Powered by Framer Motion
  • Scroll-based animations
  • Elegant transitions

• 📱 Fully Responsive

  • Optimized for mobile, tablet, and desktop

• ⚡ Performance Optimized

  • Lazy loading images
  • Clean and scalable component structure

---

🛠️ Tech Stack

• React – Frontend library
• Tailwind CSS – Styling
• Framer Motion – Animations
• JavaScript (ES6+)

---

📁 Project Structure

src/
│── components/
│   ├── Navbar.jsx
│   ├── Hero.jsx
│   ├── CarCard.jsx
│   ├── Footer.jsx
│
│── sections/
│   ├── Models.jsx
│   ├── Discover.jsx
│   ├── Features.jsx
│
│── context/
│   ├── ThemeContext.jsx
│
│── App.jsx
│── main.jsx

---

🚀 Getting Started

1. Clone the repository

git clone https://github.com/your-username/porsche-react.git
cd porsche-react

2. Install dependencies

npm install

3. Run the development server

npm run dev

---

🌗 Theme Functionality

• Toggle between light and dark mode using the UI switch
• Theme preference is saved in localStorage
• Applied globally using React Context + Tailwind classes

---

🖼️ Image Guidelines

• Use high-resolution automotive images
• Prefer .webp or optimized .jpg
• Add overlays for readability in hero sections
• Ensure responsiveness using Tailwind utilities

---

🎯 Design Goals

• Minimal and elegant interface
• Focus on visual storytelling
• Smooth, premium interactions
• Clean and scalable codebase

---

⚠️ Disclaimer

This project is for educational purposes only. It is inspired by the design of the Porsche AG website and is not affiliated with or endorsed by Porsche.

---

🙌 Acknowledgements

• Design inspiration: Porsche AG
• Animation library: Framer Motion
• Styling: Tailwind CSS

---

📬 Contact

Feel free to reach out for feedback or collaboration!

---