Introduction to AVP Demo
Relevant source files
The following files were used as context for generating this wiki page:
AVP Demo is a high-end web application built with Next.js designed for a luxury car rental, sales, and sourcing business based in Monaco. The platform serves as a digital showroom and concierge interface, facilitating luxury vehicle requests across Europe with a focus on high-performance brands like Ferrari, Porsche, and Aston Martin.
The system prioritizes a "concierge-level" user experience, utilizing modern web technologies to provide smooth visual transitions and a "WhatsApp-first" communication strategy for rapid client engagement.
Sources: README.md:1-5, app/page.tsx:145-155, app/about/page.tsx:32-36
System Architecture
The application is built on the Next.js 16 framework using the App Router architecture. It utilizes React 19 and is written in TypeScript to ensure type safety across the fleet data models and component props.
Tech Stack Overview
| Technology | Purpose |
|---|---|
| Next.js 16 | Core framework for SSR and routing |
| React 19 | UI library for component-based architecture |
| Tailwind CSS 4 | Utility-first styling with PostCSS support |
| Framer Motion | Advanced animations and parallax effects |
| TypeScript | Static typing and data modeling |
Sources: package.json:11-25, tsconfig.json:3-15
Component Relationship Flow
The following diagram illustrates how the core layout components wrap the application pages and how data flows from the static fleet definitions into the UI components.
The RootLayout ensures that the Navbar, Footer, and a persistent WhatsAppFloat button are available on every page. Data is centrally managed in data/fleet.ts and consumed by various views to maintain consistency.
Sources: app/layout.tsx:11-25, app/fleet/page.tsx:16-25
Data Modeling
The core of the application is the fleet data structure, which defines the attributes of the luxury vehicles available for rent or sourcing.
Vehicle Data Structure
The Car type defines the following schema:
| Field | Type | Description |
|---|---|---|
slug | string | Unique identifier for URL routing |
brand | string | Car manufacturer (e.g., Ferrari) |
model | string | Specific vehicle model |
category | string | Classification (GT, Supercar, SUV) |
tagline | string | Marketing description |
images | CarImage[] | Array of image sources and alt text |
bullets | string[] | Key selling points or rental terms |
highlights | CarHighlight[] | Technical specs (Engine, Power, 0-100) |
Sources: data/fleet.ts:18-27
Core Features & Modules
1. Interactive Fleet Explorer
The Fleet page implements a real-time filtering system using the FleetFilters component. Users can search by keyword (brand, model, or tagline) and filter by category. The filtering logic uses useMemo for performance and an useEffect hook to synchronize the filtered results with the parent state.
Sources: components/FleetFilters.tsx:22-40, app/fleet/page.tsx:19-25
2. Concierge Request System
The application bypasses traditional complex checkout flows in favor of a direct request system. The RequestForm component generates pre-formatted messages for both WhatsApp and Email.
The whatsappText is dynamically generated using a useMemo hook to encode form state into a readable message format for the concierge team.
Sources: components/RequestForm.tsx:40-66
3. Dynamic Routing
Individual vehicle pages are generated using dynamic routes (app/fleet/[slug]/page.tsx). The system uses the slug parameter to find the matching car in the fleet array. If no car is found, it triggers the Next.js notFound() function.
Sources: app/fleet/[slug]/page.tsx:11-17
User Interface & Experience
The UI uses a "Cinematic Dark" theme defined in app/globals.css, utilizing a black background (#0a0a0a) with white text.
Visual Effects
- Parallax Scrolling: The Home and Locations pages use
framer-motion'suseScrollanduseTransformto create depth effects on hero images. - Motion Reduction: The application respects user preferences by using the
useReducedMotionhook to disable or simplify animations. - Glassmorphism: High-level service details are presented in "Glass" cards using
backdrop-blur-xland semi-transparent borders.
Sources: app/page.tsx:18-35, app/locations/page.tsx:128-132, app/globals.css:16-20
Conclusion
The AVP Demo project is a specialized Next.js application that prioritizes luxury branding and efficient lead generation. By centralizing vehicle data and leveraging a "WhatsApp-first" contact strategy, it provides a high-touch concierge experience while maintaining a modern, high-performance technical architecture.