🏎️ Arihant Auto Mobiles - Premium Automotive Dashboard & Cabin

A bespoke, state-of-the-art web storefront and interactive driver cluster engineered for Arihant Auto Mobiles, a leading global distributor of precision-engineered automotive parts and custom fabrication systems. The entire platform has been designed to look, feel, and perform like the digital cabin of a high-octane performance vehicle.

---

🚀 Premium Features

🚥 Dynamic Interactive Cockpit HUD (Auth Cabin)

• Live Tachometer (RPM Dial): An interactive circular gauge whose needle sweeps dynamically in real-time as users type inputs and shifts between Drive (Login) and Sport (Signup) modes.
• Boost Gauge (PSI Meter): Accurately calculates simulated mechanical pressure depending on credentials completeness.
• Dashboard Status Lights: Automotive alert bulbs that turn from amber-warning to green-safe once credentials satisfy secure check conditions.
• Dual-Theme Seamless Integration: Integrates into the central styling variables to match dark/light theme switching with a transparent-to-solid gradient overlay.

🧭 High-Octane Speedometer 404 Route

• Interactive Redline Sweeper: A custom 404 Page Not Found interface disguised as a sports car dashboard.
• Stable Peak Hold: Sweeps from 0 to a peak speed of 404 MPH / Error Code using high-fidelity GSAP physics on load, then locks stably at the limit.
• Immersive Visuals: Features background tire-drift tracks, carbon fiber weave overlays, a blinking warning diagnostic light, and premium tactical button controls.

🔩 Dynamic Part Compatibility Engine

• Ignition Part Search: Interactive Year $\rightarrow$ Make $\rightarrow$ Model vertical and horizontal stacking selector grids.
• Premium Storefront & Catalog: Clean, modern cards highlighting alloy rims, steering wheels, brake calipers, and custom fabrication components with micro-animations.

🎨 Fully Responsive Custom Design System

• Testimonials Mobile Overhaul: Employs advanced CSS Grid layouts to adapt a 3-column desktop carousel into a neat stacked layout on mobile screens, positioning navigator arrows bottom-center to ensure cards retain 100% reading width.
• Dual Light/Dark Mode: Full-palette transition mappings across all sections, including custom About and Services layouts, tying them directly to system tokens (var(--bg-body), var(--bg-white), var(--text-primary), etc.).

---

🛠️ Technology Stack

• Client Engine: React 19
• Build Pipeline: Vite (supercharged with HMR)
• Animation Core: GSAP (GreenSock Animation Platform) & CSS Custom Keyframes
• Icon Set: Lucide React (Compass, Wrench, RotateCcw, ShieldAlert, Globe, Award, etc.)
• Styling Framework: Pure, high-performance Vanilla CSS variables (No tailwind bloat, maximizing styling control and loading speeds)

---

📁 System Architecture

A high-level blueprint of the cockpit code structure:

ArihantAutoMobiles/
├── Frontend/
│   ├── public/              # Static mechanical assets
│   ├── src/
│   │   ├── components/      # UI Dashboard Units
│   │   │   ├── AboutPage.jsx         # Story, Missions, and Stats Cards
│   │   │   ├── ServicesPage.jsx      # Fabrication & Global Logistics panels
│   │   │   ├── LoginSignupPage.jsx   # Tachometer & Boost HUD Console
│   │   │   ├── NotFoundPage.jsx      # Animated Redline 404 Speedometer
│   │   │   ├── Navbar.jsx            # Dynamic links and theme switch triggers
│   │   │   └── Footer.jsx            # Multi-channel bottom panel links
│   │   ├── context/         # Central State Engines (Toast & Themes)
│   │   ├── utils/           # Auxiliary helpers and validators
│   │   ├── index.css        # Core custom tokens and media query blocks
│   │   └── App.jsx          # Route registry
│   ├── vercel.json          # Production single page routing rewrites
│   ├── package.json         # Directives and dependencies
│   └── vite.config.js       # Bundling parameters

---

⚙️ Local Development Guide

To start the engine and launch the local environment:

1. Install cockpit dependencies:

   cd Frontend
   npm install

2. Ignite the local development server:

   npm run dev

3. Open the browser: Navigate to http://localhost:5173 to explore the driver console in real-time.

4. Verify the production bundle:

   npm run build

---

☁️ Production Deployment on Vercel

To ensure the single-page application (SPA) client routes (/about, /services, /shop) do not conflict with static host server lookups, a bespoke rewrite rules configuration is defined in the root vercel.json:

{
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/index.html"
    }
  ]
}

This intercepts path requests, routes them to index.html, and lets React Router handle URL transitions seamlessly without showing Vercel's default 404 pages.

---

Designed and engineered to bring high-octane performance to the automotive supply chain.
Copyright © 2026 Arihant Auto Mobiles. All Rights Reserved.