Contact Page
Relevant source files
The following files were used as context for generating this wiki page:
The Contact Page serves as the primary intake point for luxury car rental requests and general inquiries within the AVP Supercars platform. It provides users with multiple communication channels, including a structured request form, direct contact details (phone and email), and integrated WhatsApp messaging for high-priority concierge services.
The page is designed to facilitate "Monaco-level" service by streamlining the collection of essential rental data such as vehicle selection, dates, and Europe-wide delivery locations. It integrates closely with the Fleet Module by allowing users to pre-fill car details when navigating from specific vehicle pages.
Sources: app/contact/page.tsx:5-10, app/layout.tsx:10-15, components/RequestForm.tsx:56-60
Architecture and Components
The Contact Page is implemented as a functional React component in Next.js, acting as a container for specialized interaction components.
Page Structure
The main layout is split into two primary sections using a grid system:
- Request Column: Occupies the majority of the horizontal space (
lg:col-span-3) and hosts theRequestFormcomponent for structured data entry. - Direct Contact Column: Occupies the remaining space (
lg:col-span-2) and displays static contact information and service highlights.
Sources: app/contact/page.tsx:13-33
Key Components
| Component | Description | Source File |
|---|---|---|
RequestForm | A client-side form that captures user details and generates deep links for WhatsApp and Email. | components/RequestForm.tsx |
WhatsAppFloat | A globally available floating button providing a shortcut to direct messaging. | components/WhatsAppFloat.tsx |
Navbar | Provides navigation links to the Contact page and a specialized "Request" CTA. | components/Navbar.tsx |
Request Form Logic
The RequestForm component is the core interactive element. It utilizes React's useState for local state management and useMemo to generate communication deep links efficiently without unnecessary recalculations.
Data Model
The form tracks several specific fields to ensure all necessary rental information is captured for the concierge team.
type FormState = {
name: string;
phone: string;
email: string;
car: string;
startDate: string;
endDate: string;
location: string;
message: string;
};
Sources: components/RequestForm.tsx:5-14
Communication Integration
The system does not process form data through a backend API. Instead, it transforms user input into pre-formatted messages for external communication protocols:
- WhatsApp Integration: Uses
encodeURIComponentto build a multi-line message string sent viawa.me. - Email Integration: Constructs a
mailto:URI including subject and body parameters.
The following diagram illustrates the data flow from user input to the external application hand-off:
The diagram shows how local state is transformed into URI-encoded strings for external protocol handlers.
Sources: components/RequestForm.tsx:32-54
External Access Points
The contact functionality is accessible from multiple entry points throughout the application, ensuring a low-friction path to booking.
- Fleet Detail Pre-fill: When a user clicks "Request this car" on a specific fleet page (e.g.,
app/fleet/[slug]/page.tsx), the application can pass the car name as a URL parameter to pre-populate the "Car" field in the form. - Floating WhatsApp: A
WhatsAppFloatcomponent is mounted in theRootLayout, providing persistent access to the concierge. - Navbar and Footer: Both global navigation elements include direct links to the
/contactroute and "Request" CTAs.
Sources: app/fleet/[slug]/page.tsx:26-30, app/layout.tsx:43-100, components/WhatsAppFloat.tsx:3-15
Contact Information Table
| Channel | Identifier | Description |
|---|---|---|
| Phone | [XXX_PHONE] | Direct voice line for inquiries. |
[XXX_WHATSAPP] | Primary channel for "Fastest reply" and concierge coordination. | |
[XXX_EMAIL] | Asynchronous channel for detailed requests. | |
| Base | Monaco / French Riviera | Physical location of operations. |
| Delivery | Europe-wide | Scope of vehicle logistics service. |
Sources: app/contact/page.tsx:22-28, components/RequestForm.tsx:102-105
Technical Implementation Details
The page leverages Next.js "use client" directive for interactivity and Framer Motion for UI transitions (as seen in the Navbar and other page layouts).
Pre-filling Logic
The RequestForm accepts a defaultCar prop. This allows the system to bridge the gap between browsing the fleet and initiating a contact request.
export default function RequestForm({
defaultCar = "",
}: {
defaultCar?: string;
}) {
const [s, setS] = useState<FormState>({
// ... other fields
car: defaultCar,
});
Sources: components/RequestForm.tsx:17-25
Conclusion
The Contact Page is a critical conversion module designed for high-touch service. By utilizing client-side state and protocol deep-linking (WhatsApp/Mailto), the system avoids complex backend dependencies while providing immediate, personalized communication between the client and the luxury vehicle concierge.