Website Pages and Layout
Relevant source files
The following files were used as context for generating this wiki page:
- apps/website/src/app/layout.tsx
- apps/website/src/app/page.tsx
- apps/website/src/app/terms/page.tsx
- apps/website/src/app/credits/page.tsx
- apps/website/src/app/media/page.tsx
- apps/website/src/app/privacy/page.tsx
- apps/website/src/components/auction-site.tsx
- apps/website/src/components/site-header.tsx
- apps/website/src/components/site-footer.tsx
- apps/website/src/app/globals.css
The The Driving Fly website serves as the primary interface for an autonomous driving experiment featuring a simulated fruit fly. The site provides a real-time auction platform where users purchase advertising placements on a 3D simulated Mini Cooper.
This module encompasses the Next.js application structure, including the root layout, the main auction interface, supplemental legal and informational pages, and the CSS framework that defines the project's visual identity.
Sources: apps/website/src/app/layout.tsx, apps/website/src/components/auction-site.tsx:48-77, apps/website/src/app/terms/page.tsx:8-12
Core Application Structure
The application follows the Next.js App Router pattern. The root layout provides a consistent structure across all pages, while specific routes handle unique features such as the auction, media library, and legal disclosures.
Root Layout
The RootLayout component defines the global HTML structure, including font loading and metadata for social previews. It applies a smooth scroll behavior to the html element and wraps all children in the body.
Sources: apps/website/src/app/layout.tsx:64-73
Global Navigation and Footer
Standard site-wide components provide navigation and brand identification:
- SiteHeader: Displays the "The Driving Fly" wordmark and links to the auction, leaderboard, how-it-works, media, and experiment sections.
- SiteFooter: Contains social links, legal page links (Terms, Privacy, Credits), and vehicle attribution.
Sources: apps/website/src/components/site-header.tsx:10-38, apps/website/src/components/site-footer.tsx:3-48
The diagram shows the hierarchical relationship between the root layout and specific page components.
Auction Home Page
The home page (/) serves as the central hub for the advertising experiment. It uses the AuctionSite component to manage real-time updates and interactive 3D elements.
Hero Section
The hero section captures user attention with high-level statistics and the interactive car viewer:
- Live Indicator: Shows the connection status and current number of users online.
- Hero Stats: Displays total funds raised, percentage toward the goal ($100,000 target), claimed spots, and the highest current bid.
- Car Viewer: A 3D interactive component (rendered client-side) that allows users to orbit the vehicle and view ad placements.
Sources: apps/website/src/components/auction-site.tsx:162-282
Auction Table and Filters
The auction-section allows users to browse and search for specific ad spots:
- Filters: Users can filter by vehicle side (Front, Rear, Left, Right, Top) or availability.
- Search: An input field filters the table based on brand name, slot ID, or message content.
- Spots Table: Lists each available placement with details on the current owner, location on the car, dimensions, and the current bid amount.
Sources: apps/website/src/components/auction-site.tsx:327-463
Information and Media Pages
Dedicated routes provide technical context and historical data for the experiment.
Media and Field Notes (/media)
The media page hosts "Field Notes" detailing the progress of the simulated fly driver.
- Media Entries: Maps through
mediaEntriesto display films, screenshots, and notebook data. - Downloads: Provides links to download experiment videos (MP4) and screenshots (JPG).
- Data Links: Links to GitHub repositories containing raw run data.
Sources: apps/website/src/app/media/page.tsx:40-142
Legal and Credits Pages
The site includes standardized pages for project transparency:
| Page | Content Focus |
|---|---|
Terms (/terms) | Rules for the live auction, placement duration, and refund policies. |
Privacy (/privacy) | Data retention, public disclosures, and third-party processing (Stripe/Cloudflare). |
Credits (/credits) | Technical attributions for vehicle geometry (CARLA 0.9.16) and software (Three.js, Next.js). |
Sources: apps/website/src/app/terms/page.tsx, apps/website/src/app/privacy/page.tsx, apps/website/src/app/credits/page.tsx
Styling and Layout Configuration
The site's visual design is managed through a central CSS framework defined in globals.css.
Visual Variables
The project uses CSS variables for consistent branding:
--ink: Primary text color (#20211f).--green: Accent color for brand and progress indicators (#488443).--line: Border and separator color (#e8e9e5).--font: "DM Sans Variable" font stack.
Sources: apps/website/src/app/globals.css:1-10
Responsive Design
The layout adapts to multiple screen sizes using media queries:
- Desktop (>1500px): Enhanced hero scaling and larger car viewer heights (680px).
- Tablet/Small Laptop (<1200px): Adjusts section margins and navigation spacing.
- Mobile (<640px): Collapses the site header into a wrapping layout, hides secondary navigation, and simplifies the auction table (hiding location cells).
This diagram illustrates how the global CSS variables provide the visual foundation for the interactive React components.
Summary
The "Website Pages and Layout" module facilitates the intersection of a real-time financial auction and a technical simulation. By utilizing Next.js for routing, Three.js for visualization, and a robust CSS variable system, the project delivers a responsive platform for users to engage with the Driving Fly experiment across desktop and mobile devices.
Sources: apps/website/README.md, apps/website/src/components/auction-site.tsx:507-515