// Semantic color usage
<div className="bg-primary text-primary-foreground">Primary button</div>
<div className="bg-muted text-muted-foreground">Secondary content</div>
<div className="border-border">Border color</div>
<div className="bg-destructive text-white">Error state</div>

// Direct CSS variable access
style={{ backgroundColor: 'var(--primary)' }}

import { Button } from "@/components/ui/button"

// Basic usage
<Button>Click me</Button>

// With variants
<Button variant="outline" size="lg">Large Outline</Button>

// With icons
<Button>
  <SearchIcon data-icon="inline-start" />
  Search
</Button>

// Icon only
<Button size="icon" variant="ghost">
  <XIcon />
</Button>

import { Input } from "@/components/ui/input"
import { InputGroup, InputGroupAddon, InputGroupInput } from "@/components/ui/input-group"

// Basic input
<Input placeholder="Enter text" />

// Input with icon
<InputGroup>
  <InputGroupAddon align="inline-start">
    <MailIcon className="size-4" />
  </InputGroupAddon>
  <InputGroupInput placeholder="Email" />
</InputGroup>

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@/components/ui/card"

<Card>
  <CardHeader>
    <CardTitle>Title</CardTitle>
    <CardDescription>Description</CardDescription>
  </CardHeader>
  <CardContent>Content goes here</CardContent>
  <CardFooter>
    <Button>Action</Button>
  </CardFooter>
</Card>

import { Badge } from "@/components/ui/badge"

<Badge>Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="outline">Outline</Badge>

import { Field, FieldLabel, FieldDescription, FieldError } from "@/components/ui/field"

<Field>
  <FieldLabel htmlFor="email">Email</FieldLabel>
  <Input id="email" placeholder="john@example.com" />
  <FieldDescription>We'll never share your email.</FieldDescription>
</Field>

// With error
<Field>
  <FieldLabel htmlFor="email">Email</FieldLabel>
  <Input id="email" aria-invalid="true" />
  <FieldError>Please enter a valid email.</FieldError>
</Field>

// Import path for vehicle illustrations
const imagePath = "/wmx/CARS SUV 4WD.png";

// Usage in Next.js Image component
import Image from "next/image";

<Image 
  src="/wmx/CARS SUV 4WD.png"
  alt="Cars, SUV's & 4WD's"
  width={400}
  height={250}
  className="object-contain"
/>

// Available files in /public/wmx/:
// - BUSES TRUCKS.png
// - CARAVANS CAMPERVANS.png  
// - CARS SUV 4WD.png
// - FORKLIFTS.png
// - GENERAL FRIEGHT CONTAINERS.png
// - JETSKIS BOATS.png
// - MINING HEAVY MACHINERY.png
// - MOTORBIKES.png
// - OTHER.png
// - SALAVAGE.png
// - TRAILERS.png
// - VANS 4WD.png

/* Entrance animations */
.animate-fade-in-up { animation: fadeInUp 0.8s ease-out forwards; }
.animate-fade-in-scale { animation: fadeInScale 0.5s ease-out 0.3s forwards; }
.animate-slide-in-left { animation: slideInLeft 0.5s ease-out forwards; }
.animate-slide-in-right { animation: slideInRight 0.5s ease-out forwards; }
.animate-slide-in-down { animation: slideInDown 0.5s ease-out 0.1s forwards; }

/* Continuous animations */
.animate-bounce-slow { animation: bounce 2s ease-in-out infinite; }
.animate-marquee { animation: marquee 30s linear infinite; }

/* Special effects */
.btn-liquid-border::before { animation: liquidMetalShine 20s ease-in-out infinite; }