Home Page

Relevant source files

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

• app/page.tsx
• app/layout.tsx
• components/Navbar.tsx
• components/CarCard.tsx
• data/fleet.ts
• components/Footer.tsx

The Home Page of the AVP Supercars application serves as the primary entry point and marketing hub for a luxury vehicle rental, sales, and sourcing service based in Monaco and the French Riviera. It is designed with a high-end "cinematic" aesthetic, utilizing motion effects and dark themes to align with the luxury automotive industry.

The page is responsible for introducing the core value propositions—Europe-wide 24/7 delivery and concierge-level service—while providing direct paths to the Fleet Page and Contact Page. It highlights a curated "Signature Collection" of vehicles to drive immediate user engagement.

Sources: app/page.tsx:21-70, app/layout.tsx:10-14

Architectural Overview

The Home Page is implemented as a Client Component in Next.js, leveraging framer-motion for advanced scroll-linked animations and parallax effects. It sits within the RootLayout, which provides global UI elements like the Navbar, Footer, and WhatsAppFloat.

Component Structure

The page is organized into several high-level functional sections:

1. Hero Section: Implements a parallax background with high-impact typography.
2. Featured Collection: Displays a filtered subset of the vehicle fleet.
3. Value Proposition (Why AVP): Detailed service benefits presented in a grid of "glass" cards.
4. Services Preview: High-level overview of Rental, Sourcing, and Event logistics.

Visual and Motion System

The Home Page utilizes framer-motion hooks to create a dynamic user experience. The useScroll and useTransform hooks are specifically used to map the vertical scroll progress to CSS properties like y (translation), scale, and opacity.

Feature	Implementation Detail	Source File
Parallax Background	Transforms bgY from 0% to 10% based on scroll progress.	app/page.tsx:32
Zoom Effect	Transforms bgScale from 1.06 to 1.12.	app/page.tsx:33
Content Fade	Transforms contentOpacity from 1 to 0 as the user scrolls down.	app/page.tsx:35
Accessibility	Uses useReducedMotion to disable parallax if the user prefers.	app/page.tsx:27, 32-35

Sources: app/page.tsx:21-40

Featured Collection Logic

The "Signature Collection" section does not display the entire fleet. Instead, it programmatically filters the centralized fleet data to show specific "featured" models.

const featured = fleet.filter((c) =>
  ["audi-r8-spyder", "ferrari-gtc4-lusso-t"].includes(c.slug)
);

Sources: app/page.tsx:23-26

Data Integration

The page imports the fleet array from @/data/fleet, which defines the Car type. This type ensures consistency between the data store and the CarCard component used to render the featured items.

Field	Type	Description
slug	string	Unique identifier used for dynamic routing.
brand	string	Vehicle manufacturer (e.g., Ferrari, Audi).
category	string	Vehicle class (e.g., Supercar, GT).
tagline	string	Short marketing description.

Sources: data/fleet.ts:1-23, components/CarCard.tsx:4-65

Navigation and CTAs

The Home Page acts as a router for the rest of the application. The Navbar provides persistent navigation, while the page content includes redundant Call to Action (CTA) buttons to maximize conversion.

Global Integration

The Home Page is wrapped in the RootLayout, which ensures that global metadata and third-party UI components are consistent.

• Metadata: Title and description are set globally in layout.tsx for SEO.
• WhatsApp Integration: A WhatsAppFloat component is present on the Home Page via the layout, providing a direct communication channel.
• Footer: The page ends with a detailed footer containing brand info, expanded navigation links, and location lists (Monaco, French Riviera, Milan, Geneva, Zurich).

Sources: app/layout.tsx:10-14, 88-95, components/Footer.tsx:4-21

Conclusion

The Home Page is a high-performance landing page that balances visual sophistication with clear functional navigation. By leveraging centralized data and modern animation libraries, it provides a cohesive introduction to the AVP Supercars service ecosystem.