Vehicle Card Component

Relevant source files

The following files were used as context for generating this wiki page:

• components/CarCard.tsx
• data/fleet.ts
• app/fleet/page.tsx
• app/page.tsx
• components/FleetFilters.tsx

The Vehicle Card Component (CarCard.tsx) is a core UI element used to display individual automobile listings within the AVP Supercars platform. It serves as a visual gateway, providing high-level specifications and imagery for luxury vehicles, such as Ferraris and Porsches, before navigating the user to a detailed view.

This component is primarily utilized in the "Signature Collection" on the home page and the searchable grid on the fleet page. It is designed with a premium aesthetic, featuring Framer Motion animations, cinematic overlays, and responsive layouts to align with the luxury branding of the project.

Architecture and Data Flow

The component follows a unidirectional data flow, receiving vehicle data via props and rendering a linked card. It relies on a standardized Car type definition to ensure data consistency across the application.

Data Structure

The component consumes a Car object, which contains essential metadata for rendering.

Field	Type	Description
slug	string	Unique identifier used for routing.
brand	string	Vehicle manufacturer (e.g., "Ferrari").
model	string	Specific model name (e.g., "Portofino").
category	string	Vehicle classification (e.g., "GT", "Supercar").
tagline	string	Short marketing description.
images	CarImage[]	Array of image objects containing src and alt.

Sources: data/fleet.ts:16-25, components/CarCard.tsx:4-5

Component Relationship

The CarCard is a child component used by various page-level containers. On the fleet page, it is often wrapped in a motion.div to provide staggered entrance animations.

This diagram illustrates how vehicle data flows from the static data source through parent pages into the CarCard component.
Sources: app/page.tsx:64-66, app/fleet/page.tsx:88-96, components/CarCard.tsx:7-10

Visual and Interaction Design

The CarCard implementation focuses on a "cinematic" user experience through CSS-in-JS and animation libraries.

Key Visual Features

• Image Scaling: Uses a transition duration of 700ms to scale the background image by 1.05x on hover.
• Light Sweep Effect: An animated gradient overlay that "sweeps" across the card when the user hovers, achieved via a hidden translate-x transition.
• Badges: Displays the vehicle's category and an "On request" status badge using absolute positioning and backdrop blurs.
• Cinematic Overlays: Includes a radial gradient and a bottom-to-top black gradient to ensure text readability over vehicle images.

Sources: components/CarCard.tsx:14-43

Animation Flow

When integrated into the fleet grid, the cards utilize framer-motion for entrance effects.

The fleet page applies a staggered delay (i * 0.03) to these cards for a smooth loading sequence.
Sources: app/fleet/page.tsx:88-93

Integration and Implementation

The component is strictly typed using TypeScript, ensuring that any page passing a car object adheres to the fleet.ts schema.

Code Snippet: Component Structure

export default function CarCard({ car }: { car: Car }) {
  return (
    <Link
      href={`/fleet/${car.slug}`}
      className="group block overflow-hidden rounded-3xl border border-white/10 bg-white/5 hover:bg-white/10 transition"
    >
      {/* Image and Badges */}
      <div className="relative aspect-[16/10] overflow-hidden">
        <img src={car.images?.[0]?.src} alt={`${car.brand} ${car.model}`} ... />
        <div className="absolute top-4 left-4 flex items-center gap-2">
           <span ...>{car.category}</span>
        </div>
      </div>

      {/* Content Section */}
      <div className="p-5">
        <div className="text-lg font-semibold">{car.brand} {car.model}</div>
        <div className="mt-1 text-sm text-white/70 line-clamp-2">{car.tagline}</div>
      </div>
    </Link>
  );
}

Sources: components/CarCard.tsx:4-53

Filtering Context

While CarCard is a display component, it is often the target of the FleetFilters system. Users filter by category or search by brand and model, which dynamically updates the list of CarCard components rendered in the grid.

Sources: components/FleetFilters.tsx:21-31, app/fleet/page.tsx:23-25

Summary

The Vehicle Card Component is a vital reusable piece of the AVP Supercars UI. It combines static data from the fleet configuration with dynamic interactions provided by Framer Motion and Next.js routing. By centralizing the vehicle preview logic, the project maintains a consistent "luxury concierge" visual language across both the landing page and the functional fleet explorer.