Footer Component
Relevant source files
The following files were used as context for generating this wiki page:
The Footer component serves as the global navigational and informational baseline for the AVP Supercars application. It provides users with essential brand information, quick links to internal pages, service locations, and legal disclaimers. The component is designed with a premium aesthetic, utilizing a dark theme with semi-transparent white text and borders to align with the luxury branding of the project.
In the current implementation, the footer functionality is duplicated or split between a standalone Footer component and a hardcoded <footer> element within the RootLayout. Both versions provide contact information, navigation links, and a copyright notice.
Component Architecture and Integration
The application integrates footer elements at the lowest level of the DOM tree within the main layout to ensure persistence across all sub-pages.
The diagram shows the placement of footer elements within the application's root layout.
Implementation Variations
The codebase contains two distinct implementations of the footer:
- Standalone Component (
components/Footer.tsx): A simplified version focusing on brand naming ("AVP SUPERCARS"), core services (Source, Rent, Sales), a phone number, and minimal links (Privacy, About, FAQ). - Layout-Integrated Footer (
app/layout.tsx): A more robust, multi-column grid layout that includes brand descriptions, expanded navigation, a list of delivery locations (Monaco, Milan, Geneva, etc.), and a Call-to-Action (CTA) button for availability requests.
Sources: components/Footer.tsx:3-23, app/layout.tsx:21-105
Content Structure
The footer information is organized into logical groups to facilitate quick access to support and navigation.
Information Modules
| Module | Description | Key Elements |
|---|---|---|
| Brand Identity | High-level business overview and headquarters info. | "AVP SUPERCARS", Monaco-based description. |
| Navigation | Direct links to primary application routes. | Fleet, Services, About, Delivery, Contact. |
| Locations | Geographical areas serviced by the business. | Monaco, French Riviera, Milan, Geneva, Zurich. |
| Request CTA | High-visibility prompt for user conversion. | "Request availability" button linking to /contact. |
| Legal/Bottom | Regulatory information and dynamic dates. | Copyright year, Privacy link, FAQ link. |
Sources: app/layout.tsx:29-100, components/Footer.tsx:7-21
Visual Design and Styling
The footer utilizes Tailwind CSS for a "luxury" aesthetic, characterized by dark backgrounds and subtle gradients.
- Borders and Separators: Top borders use
border-white/10to create a thin, subtle separation from the main content. - Typography: The branding uses
font-semiboldandtracking-wide. Supporting text usestext-white/60ortext-white/40for visual hierarchy. - Background Effects: The layout footer includes an absolute-positioned div with a radial gradient:
bg-[radial-gradient(circle_at_50%_0%,rgba(255,255,255,0.05),transparent_60%)]. - Spacing: Large vertical padding (
py-10topy-20) and top margins (mt-16tomt-20) are used to give the component significant visual weight.
Sources: components/Footer.tsx:5-6, app/layout.tsx:22-25
Functional Logic
Dynamic Year Rendering
The footer in the layout automatically updates the copyright year using the JavaScript Date object to ensure the legal notice remains current.
<div>
© {new Date().getFullYear()} AVP Supercars. All rights reserved.
</div>
Sources: app/layout.tsx:94-96
Navigation and Routing
Navigation within the footer uses standard <a> tags in the layout and Next.js <Link> components in the standalone file to manage client-side routing.
| Link Destination | Purpose |
|---|---|
/fleet | Access to the car collection. |
/services | Overview of rental and sourcing options. |
/privacy | Legal and data protection terms. |
/contact | Lead generation form access. |
Sources: components/Footer.tsx:15-17, app/layout.tsx:44-50
Placement Across Pages
The footer is consistently positioned at the bottom of the viewport across different functional areas of the site, often appearing after large CTA sections.
- Home Page: Appears after the "Services Preview" section.
- Services Page: Follows the "Final CTA" section.
- Locations Page: Positioned after the "Ready to plan delivery?" section.
Sources: app/page.tsx:320, app/services/page.tsx:173, app/locations/page.tsx:178
Summary
The Footer component is a vital part of the AVP Supercars user interface, consolidating navigation, branding, and contact points. Its design emphasizes the premium nature of the service through subtle styling and clear information hierarchy, ensuring that users always have a path to request car availability or view legal disclosures regardless of their position within the application.