prime-engineer

byEshwar Kumar

Act as a Senior Front-End Engineer and Lead UI/UX Designer. Your task is to build a high-fidelity, interactive, and fully responsive Front-End for "GariGo", a premium P2P car rental marketplace for Pakistan. The focus is on a world-class user interface, fluid animations, and a sophisticated aesthetic that rivals Turo and Airbnb. Technical Stack (Front-End): Framework: Next.js 14+ (App Router). Styling: Tailwind CSS (Custom Theme). Icons: Lucide-React or Phosphor Icons. Animations: Framer Motion (for smooth transitions and list staggers). Components: Shadcn/UI (customized for the dark theme). Form Handling: React Hook Form with Zod validation. UI/UX & Branding Logic: Theme Name: "Pakistani Heritage Luxe." Primary Color: Deep Emerald/Forest Green (#064E3B). Secondary Color: Rich Burnt Sienna/Brown (#451A03). Backgrounds: Gradient-rich Dark Mode (Deep Charcoal to Black). Accents: Gold/Champagne (#D4AF37) for premium badges and rating stars. Visual Style: Glassmorphism, high-contrast typography, and 16px border-radius on all cards and buttons. Page-by-Page Detailed Requirements: High-Conversion Landing Page: Hero Section: Full-width atmospheric car video or high-res image background. A floating, glassmorphic search bar allowing users to input: [Location], [Pickup Date], and [Return Date]. Dynamic Featured Categories: Horizontal scroll for "Luxury," "Budget," "SUVs," and "Inter-city." Trust Bar: Statistics (e.g., "500+ Verified Cars in Karachi"). Advanced Search & Filter Interface (The "Turo" Experience): Dual View: Toggle between a "Grid View" and a "Split Map View" (using a Mapbox/Google Maps placeholder). Filters: Sticky top-bar with dropdowns for Price Range, Transmission (Auto/Manual), Fuel Type, and Brand. Car Cards: Hover-sensitive image carousels, instant "Instant Book" badges, and price-per-day prominent display. Vehicle Detail Page (PDP): Media Gallery: A professional grid-style gallery (1 large image, 4 small). Host Profile Section: Minimalist card showing Host photo, rating, and "Joined Date." Booking Widget: A sticky right-side sidebar that calculates totals in real-time as dates are selected. Feature Grid: Custom icons for AC, Bluetooth, Sunroof, Car Tracker, and Insurance. Host Dashboard (The "Showroom" View): Analytics Overview: Visual cards for "Monthly Earnings," "Active Rentals," and "Vehicle Health." Listing Manager: A table view of all owned cars with "Status" toggles (Available/Rented/Maintenance). Multi-step Listing Form: Smooth "Framer Motion" transitions between steps (Vehicle Info -> Upload Photos -> Pricing). User/Guest Portal: Trip History: Tabbed view for "Upcoming," "In Progress," and "Past" trips. Verification Status: A visual UI tracker for CNIC and License approval progress. Interaction Design & Animations: Micro-interactions: Buttons should have a subtle scale-down effect on click. Loading States: Skeleton screens for car cards and search results. Page Transitions: Fade-in and slide-up effects for page entry. Technical Constraints (Front-End Only): Mock Data: Use a robust constants/mockData.ts file containing Pakistani car models (Civic, Sportage, Fortuner, etc.) and cities (Lahore, Karachi, Islamabad). Responsive Logic: Mobile-specific bottom navigation bar for quick access to Search, Bookings, and Profile. No Heavy Libraries: Keep the bundle small; prioritize CSS-based animations where possible. Output Expectations: A complete, production-ready Next.js project structure. Fully commented Tailwind configurations for the custom color palette. Reusable UI components (Buttons, Inputs, Cards, Modals). No broken links; all navigation must work using Next/Link.