Project Structure

Relevant source files

The following files were used as context for generating this wiki page:

• package.json
• app/layout.tsx
• app/page.tsx
• data/fleet.ts
• components/Navbar.tsx
• tsconfig.json
• components/RequestForm.tsx

AVP Supercars is a modern web application built using the Next.js Framework, specifically utilizing the App Router architecture. The project is designed as a luxury car rental, sales, and sourcing platform, focusing on high-performance vehicles and concierge services across Europe. It leverages TypeScript for type safety and Tailwind CSS for a high-end, dark-themed visual aesthetic.

The application follows a component-based architecture where global layouts define the UI shell, static data files manage the vehicle inventory, and dynamic routes handle specific car details and user interactions. The tech stack includes React 19, Framer Motion for animations, and Next.js 16.

Sources: package.json:1-25, app/layout.tsx:1-10, README.md:1-10

Core Architecture and Framework

The project is a standard Next.js 16 application using the /app directory structure. This structure separates the routing logic and page layouts from reusable UI components and data models.

Project Organization

The repository is organized into several key directories:

• app/: Contains the routing logic, page components, and global layouts.
• components/: Houses reusable UI elements such as the Navbar, Footer, CarCard, and RequestForm.
• data/: Stores static data used to populate the site, specifically the vehicle fleet information.
• public/: Stores static assets like images and brand logos.

Sources: tsconfig.json:1-32, app/layout.tsx:1-5, app/page.tsx:1-10

Technical Stack

Technology	Description
Next.js 16.1.6	The core React framework for routing and rendering.
React 19.2.3	UI library for building components.
TypeScript 5	Programming language for type-safe code.
Tailwind CSS 4	Utility-first CSS framework for styling.
Framer Motion	Animation library used for parallax and transitions.

Sources: package.json:11-25, app/globals.css:1-10

Component Hierarchy and Navigation

The application uses a RootLayout to maintain a consistent user experience across all pages. This layout includes the Navbar, Footer, and a WhatsAppFloat component for persistent communication options.

Navigation Logic

The Navbar component handles client-side routing and visual feedback for the active state. It uses the usePathname hook to determine which link should be highlighted.

Nav Item	Path	Purpose
Fleet	/fleet	Display all available vehicles.
Services	/services	Overview of rental, sourcing, and events.
About	/about	Company background and values.
Delivery	/locations	Information on European coverage.
Contact	/contact	Lead generation form.

Sources: components/Navbar.tsx:13-35, app/layout.tsx:44-52

Data Modeling and State

The vehicle inventory is decoupled from the UI components. It is defined in a central TypeScript file that ensures consistency in vehicle attributes across the platform.

Fleet Data Schema

The data/fleet.ts file defines the Car type, which includes technical specifications, imagery, and marketing copy.

Request Handling

User interactions are captured via the RequestForm. This component manages a local FormState and generates deep links for WhatsApp and Email protocols to facilitate lead capture without a complex backend.

State Field	Type	Description
name	string	User's full name.
phone	string	Contact phone number.
car	string	Selected vehicle model.
startDate	string	Rental start date.
location	string	Delivery destination.

Sources: components/RequestForm.tsx:5-30, components/RequestForm.tsx:56-78

Page Layout and Flow

The application flow is designed to lead users from vehicle exploration to a direct request.

Configuration and Deployment

The project is configured for a Vercel-centric deployment pipeline, as evidenced by the package.json scripts and the inclusion of Next.js specific plugins in tsconfig.json.

• Compiler Options: The project uses ES2017 target with bundler module resolution for optimal performance in modern browsers.
• Path Aliases: The @/* alias is configured to point to the root directory, allowing for clean imports like import { fleet } from "@/data/fleet".
• Scripts: Standard Next.js scripts for dev, build, and start are provided.

Sources: tsconfig.json:1-25, package.json:5-10

Conclusion

The project structure of AVP Supercars follows modern React and Next.js best practices, utilizing a modular component architecture and a centralized data strategy. By leveraging the App Router and TypeScript, the system maintains a clear separation between layout, routing, and business data, resulting in a performant and maintainable luxury service platform.