Layout & Global Styles
Relevant source files
The following files were used as context for generating this wiki page:
The Layout & Global Styles system provides the structural foundation and visual identity for the AVP Supercars web application. It utilizes Next.js App Router conventions to maintain a persistent user interface across all routes, integrating global navigation, a unified footer, and specialized floating action components. The styling is driven by Tailwind CSS, emphasizing a "dark mode" aesthetic suitable for a luxury brand.
Core Architecture
The application's structural integrity is maintained via the RootLayout component, which wraps all page content. This layout ensures that essential branding and navigation elements are consistently available to the user.
Root Layout Composition
The RootLayout serves as the entry point for the HTML document. It defines the language attribute and applies a consistent background and text color to the body.
The diagram shows the hierarchical nesting of components within the main application layout.
Sources: app/layout.tsx:11-14, app/layout.tsx:83-87
Component Inventory
| Component | Responsibility | File Path |
|---|---|---|
RootLayout | Top-level wrapper, metadata provider, and global state container. | app/layout.tsx |
Navbar | Responsive navigation links and brand logo. | components/Navbar.tsx |
Footer | Links to secondary pages (Privacy, FAQ) and contact info. | components/Footer.tsx |
WhatsAppFloat | Persistent floating contact button for immediate user support. | components/WhatsAppFloat.tsx |
Sources: app/layout.tsx:1-4, components/Navbar.tsx:15-19, components/Footer.tsx:3-5, components/WhatsAppFloat.tsx:3-5
Navigation System
The Navbar component handles route transitions and visual feedback for the current active page. It implements a scroll-listening mechanism to change its appearance (transparency vs. blurred background) based on the user's scroll position.
Scroll and Active State Logic
- Scroll Detection: Uses
useEffectto monitorwindow.scrollY. If the value exceeds 12px, thescrolledstate is set to true, triggering a CSS transition from transparent tobg-black/70 backdrop-blur-xl. - Route Highlighting: Uses
usePathnameanduseMemoto determine which navigation link matches the current URL, applying a white underline to active links.
This sequence illustrates how the navigation bar reacts to user interaction and routing events.
Sources: components/Navbar.tsx:24-30, components/Navbar.tsx:36-39, components/Navbar.tsx:44-50
Global Styling & Theming
The project uses Tailwind CSS (v4) for styling, configured with a primary dark theme. Global variables are defined in app/globals.css and mapped to Tailwind's theme system.
CSS Variables and Tailwind Integration
The application defaults to a dark aesthetic regardless of system preferences, though it provides specific overrides for dark mode.
| Variable | Default Value | Dark Mode Override | Description |
|---|---|---|---|
--background | #ffffff | #0a0a0a | Main background color. |
--foreground | #171717 | #ededed | Primary text color. |
Sources: app/globals.css:3-17, package.json:17-18
Typography
The project utilizes the Geist font family (Sans and Mono) via the @theme inline directive in Tailwind. The body tag defaults to a standard sans-serif stack as a fallback.
Sources: app/globals.css:10-11, app/globals.css:20-24
Persistent Footer & CTA
The application includes two footer-like structures: one embedded directly in app/layout.tsx for visual richness (radial gradients and grids) and a separate Footer.tsx component.
Layout Footer Features
- Branding: Displays "AVP SUPERCARS" with sub-tracking.
- Navigation Grid: Organized into Navigation, Locations, and Request columns.
- Dynamic Year: Automatically updates the copyright year using
new Date().getFullYear(). - Radial Gradient: Uses
bg-[radial-gradient(circle_at_50%_0%,rgba(255,255,255,0.05),transparent_60%)]for a cinematic top-light effect on the footer border.
Sources: app/layout.tsx:18-20, app/layout.tsx:25-33, app/layout.tsx:75-77
Conclusion
The "Layout & Global Styles" module ensures a high-end, responsive, and consistent user experience. By centralizing navigation logic in the Navbar and structural styling in the RootLayout, the system provides a performant foundation that supports the project's luxury branding and real-time interaction requirements, such as the WhatsApp integration.