Locations Page
Relevant source files
The following files were used as context for generating this wiki page:
The Locations Page serves as a specialized landing area dedicated to the logistics and delivery aspects of the AVP Supercars service. It highlights the platform's ability to provide Europe-wide delivery with a primary base in Monaco. The page is designed to inform users about the range of delivery points—including airports, villas, and yachts—and the operational procedures for requesting a vehicle at a specific location.
This page works in conjunction with the Fleet Page and Services Page to provide a complete overview of the user journey, from vehicle selection to physical handover.
Sources: app/locations/page.tsx:1-12, app/layout.tsx:28-40
Page Architecture and User Experience
The page is implemented as a Client Component using Next.js and Framer Motion for high-end visual transitions. It utilizes several scroll-linked animations to create a "parallax" effect, intended to reflect the premium nature of the service.
Technical Implementation of Visuals
The page uses the useScroll and useTransform hooks from framer-motion to manipulate background scales, positions, and opacity based on the user's scroll progress.
const { scrollYProgress } = useScroll({
target: heroRef,
offset: ["start start", "end start"],
});
const bgY = useTransform(scrollYProgress, [0, 1], ["0%", prefersReducedMotion ? "0%" : "12%"]);
const bgScale = useTransform(scrollYProgress, [0, 1], [1.06, prefersReducedMotion ? 1.06 : 1.14]);
Sources: app/locations/page.tsx:14-25
Component Structure
The page is divided into four main functional sections:
- Hero Section: Visual introduction and primary Call-to-Action (CTA) for requesting delivery or exploring the fleet.
- Coverage Split: A breakdown of geographic regions served (Monaco, French Riviera, Italy, Switzerland, etc.).
- Glass Panel Features: High-level categorization of specific drop-off points (Airports, Villas, Hotels).
- Process Timeline: A three-step guide on how the delivery service operates.
Sources: app/locations/page.tsx:29-160
Delivery Logistics and Coverage
The system defines specific geographic "core routes" while maintaining the flexibility for custom Europe-wide requests. Logistics are coordinated with "Monaco-level precision."
Geographic Regions
| Region Type | Locations Mentioned |
|---|---|
| Core Base | Monaco, Monte-Carlo |
| French Riviera | Nice, Cannes, Saint-Tropez |
| Italy | Milan, Lake Como |
| Switzerland | Geneva, Zurich |
| Other | Paris, Ibiza |
Sources: app/locations/page.tsx:103-111, app/layout.tsx:55-63
Drop-off Categories
Specific delivery interfaces are defined via the GlassItem component to showcase the versatility of the logistics engine:
- Airports: Specific support for Nice (NCE), Milan, Geneva, and Paris.
- Private Assets: Coordination for handover at private villas, yachts, and marinas.
- Luxury Hospitality: Direct delivery to premium hotels and resorts.
Sources: app/locations/page.tsx:139-144
Data Flow and Service Interaction
The Locations Page directs users toward the booking system. The following diagram illustrates the flow from location discovery to a formal delivery request.
The diagram shows how the Locations Page acts as a funnel toward the RequestForm component, which requires car, dates, and specific delivery location data.
Sources: app/locations/page.tsx:146-150, components/RequestForm.tsx:28-45
Delivery Process Workflow
The page outlines a standardized "How it Works" timeline for logistics, which is mirrored in the Services Page.
Step-by-Step Execution
- Request (01): User provides vehicle choice, dates, and delivery location via the UI.
- Confirm (02): The service verifies availability, calculates delivery fees based on distance/timing, and confirms deposit requirements.
- Handover (03): Direct delivery to the user with 24/7 support throughout the rental period.
Implementation Details
Reusable UI Components
The Locations Page utilizes local functional components to maintain a consistent "Glassmorphism" aesthetic:
GlassItem: A card component with a backdrop blur and border, used for listing delivery sites.Step: A numbered card component used for the procedural timeline.
function Step({ number, title, text }: { number: string; title: string; text: string }) {
return (
<div className="rounded-3xl border border-white/10 bg-white/5 p-8 text-left hover:bg-white/10 transition">
<div className="text-xs tracking-[0.35em] text-white/60">{number}</div>
<div className="mt-4 text-xl font-semibold">{title}</div>
<div className="mt-3 text-white/70 text-sm leading-relaxed">{text}</div>
</div>
);
}
Sources: app/locations/page.tsx:210-218
Integration with Global Layout
The page is wrapped in the RootLayout, ensuring that the Navbar (with the "Delivery" link) and Footer are always present. The Navbar highlights the "Delivery" label when the user is on the /locations path.
Sources: app/layout.tsx:11-15, components/Navbar.tsx:13-19
Summary
The Locations Page is a critical component of the AVP Supercars platform, bridging the gap between digital vehicle selection and physical service fulfillment. By detailing geographic coverage—from its Monaco base to broader European destinations—and providing a clear three-step delivery process, it establishes the operational transparency required for high-end automotive logistics.
Sources: app/locations/page.tsx:1-220