SpaceXAI Grok Build 0.1 – Automotive
via xAI · Generated
- AIMAC Debt 30.40
- Cost $0.04
- Total Violations 17
- HTML Size 74 KB
- Em Dashes 0
Screenshot
View Live Page
Accessibility Issues Found
5 Critical 12 Serious
-
color-contrast serious 6 instances
Elements must meet minimum color contrast ratio thresholds
Example HTML
<span>BROWSE INVENTORY</span> -
label critical 3 instances
Form elements must have labels
Example HTML
<input type="number" id="price" value="68900" class="bg-slate-900 border border-slate-600 text-white w-full pl-8 pr-4 py-3 text-lg font-semibold ro... -
link-name serious 4 instances
Links must have discernible text
Example HTML
<a href="#" class="text-slate-400 hover:text-white"><i class="fab fa-instagram"></i></a> -
select-name critical 2 instances
Select element must have an accessible name
Example HTML
<select id="term" class="bg-slate-900 border border-slate-600 text-white w-full px-4 py-[14px] text-lg font-semibold rounded-2xl focus:outline-none... -
target-size serious 2 instances
All touch targets must be 24px large, or leave sufficient space
Example HTML
<a href="tel:3135550192" class="block">(313) 555-0192</a>
Artifacts
View Generated HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vanguard Automotive • Expert Reviews & Resources</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Space+Grotesk:wght@500;600&display=swap');
:root {
--primary: #0F172A;
}
body {
font-family: 'Inter', system_ui, sans-serif;
}
.heading-font {
font-family: 'Space Grotesk', 'Inter', system_ui, sans-serif;
font-weight: 600;
}
.nav-link {
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-link:hover {
color: #f97316;
}
.section-header {
font-size: 2.25rem;
line-height: 1.1;
font-weight: 700;
letter-spacing: -.025em;
}
.car-card {
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.car-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 25px -5px rgb(15 23 42 / 0.1),
0 8px 10px -6px rgb(15 23 42 / 0.1);
}
.news-card {
transition: all 0.3s ease;
}
.news-card:hover {
transform: translateY(-4px);
}
.stat-number {
font-variant-numeric: tabular-nums;
}
.modern-shadow {
box-shadow: 0 10px 15px -3px rgb(15 23 42 / 0.1),
0 4px 6px -4px rgb(15 23 42 / 0.1);
}
.premium-gradient {
background: linear-gradient(145deg, #0F172A, #1E2937);
}
.nav-active {
color: #f97316;
font-weight: 600;
}
.metric {
font-size: 0.875rem;
font-weight: 500;
}
.auto-grid {
background-image:
linear-gradient(#64748b15 1px, transparent 1px),
linear-gradient(90deg, #64748b15 1px, transparent 1px);
background-size: 40px 40px;
}
.testimonial-card {
transition: transform 0.3s ease;
}
.value-display {
font-family: 'Space Grotesk', system_ui, sans-serif;
font-weight: 700;
}
.section-divider {
height: 1px;
background: linear-gradient(to right, transparent, #64748b30, transparent);
}
</style>
</head>
<body class="bg-slate-950 text-slate-200">
<!-- HEADER -->
<header class="bg-slate-900 border-b border-slate-800 sticky top-0 z-50">
<div class="max-w-screen-2xl mx-auto">
<!-- Top bar -->
<div class="px-8 py-3 border-b border-slate-800 flex items-center justify-between text-sm">
<div class="flex items-center gap-x-6 text-slate-400">
<div class="flex items-center gap-x-2">
<i class="fas fa-map-marker-alt text-orange-500"></i>
<span class="text-xs font-medium">Detroit, MI • 24/7 Roadside Assistance</span>
</div>
<div class="hidden md:block text-xs">•</div>
<div class="hidden md:flex items-center gap-x-2 text-xs">
<span>Call: <span class="font-semibold text-white">(313) 555-0192</span></span>
</div>
</div>
<div class="flex items-center gap-x-4 text-xs">
<div class="hidden sm:flex items-center gap-x-1.5">
<div class="w-2 h-2 bg-emerald-400 rounded-full animate-pulse"></div>
<span class="font-medium">4,872 vehicles in inventory</span>
</div>
<a href="#" class="font-medium text-orange-400 hover:text-orange-300 transition-colors text-xs flex items-center gap-x-1">
<span>Dealer Login</span>
</a>
</div>
</div>
<!-- Main Header -->
<div class="px-8 py-5 flex items-center justify-between">
<div class="flex items-center gap-x-4">
<!-- Logo -->
<div class="flex items-center gap-x-3">
<div class="w-11 h-11 bg-orange-500 flex items-center justify-center rounded-xl shadow-inner">
<i class="fas fa-car text-white text-3xl"></i>
</div>
<div>
<span class="text-3xl font-bold tracking-tighter heading-font">Vanguard</span>
<span class="text-3xl font-bold tracking-tighter text-orange-400 heading-font">Auto</span>
</div>
</div>
<div class="hidden md:block">
<p class="text-xs tracking-[1.5px] text-slate-400 font-medium">EST. 2014</p>
</div>
</div>
<!-- Desktop Navigation -->
<nav class="hidden lg:flex items-center gap-x-8 text-sm font-medium">
<a href="#news" class="nav-link px-1 text-slate-300 hover:text-white">News</a>
<a href="#reviews" class="nav-link px-1 text-slate-300 hover:text-white">Reviews</a>
<a href="#inventory" class="nav-link px-1 text-slate-300 hover:text-white">Inventory</a>
<a href="#parts" class="nav-link px-1 text-slate-300 hover:text-white">Parts</a>
<a href="#tools" class="nav-link px-1 text-slate-300 hover:text-white">Tools</a>
<a href="#testimonials" class="nav-link px-1 text-slate-300 hover:text-white">Stories</a>
<a href="#contact" class="nav-link px-1 text-slate-300 hover:text-white">Contact</a>
</nav>
<div class="flex items-center gap-x-3">
<!-- Search -->
<div class="hidden md:flex items-center bg-slate-900 border border-slate-700 rounded-full px-4 py-2 text-sm w-72">
<i class="fas fa-search text-slate-400 mr-3"></i>
<input type="text" placeholder="Search cars, reviews, or parts..."
class="bg-transparent border-none focus:outline-none text-sm flex-1 placeholder:text-slate-400">
</div>
<!-- CTA Buttons -->
<a href="#inventory"
class="hidden md:flex items-center px-5 py-2.5 text-sm font-semibold bg-white text-slate-900 hover:bg-slate-100 transition-colors rounded-2xl">
<span>Browse Inventory</span>
</a>
<!-- Mobile Menu -->
<div class="lg:hidden">
<button id="mobile-menu-btn"
class="w-11 h-11 flex items-center justify-center bg-slate-900 border border-slate-700 hover:bg-slate-800 rounded-2xl transition-colors">
<i class="fas fa-bars text-lg"></i>
</button>
</div>
</div>
</div>
</div>
</header>
<!-- MOBILE MENU -->
<div id="mobile-menu" class="hidden lg:hidden bg-slate-900 border-b border-slate-700 px-5 py-4">
<div class="flex flex-col gap-y-1 text-sm">
<a href="#news" class="mobile-nav-link px-4 py-3 hover:bg-slate-800 rounded-2xl">News</a>
<a href="#reviews" class="mobile-nav-link px-4 py-3 hover:bg-slate-800 rounded-2xl">Reviews</a>
<a href="#inventory" class="mobile-nav-link px-4 py-3 hover:bg-slate-800 rounded-2xl">Inventory</a>
<a href="#parts" class="mobile-nav-link px-4 py-3 hover:bg-slate-800 rounded-2xl">Parts</a>
<a href="#tools" class="mobile-nav-link px-4 py-3 hover:bg-slate-800 rounded-2xl">Tools</a>
<a href="#testimonials" class="mobile-nav-link px-4 py-3 hover:bg-slate-800 rounded-2xl">Stories</a>
<a href="#contact" class="mobile-nav-link px-4 py-3 hover:bg-slate-800 rounded-2xl">Contact</a>
<div class="pt-3 border-t border-slate-700 mt-2">
<a href="#inventory"
class="flex items-center justify-center px-5 py-3 text-sm font-semibold bg-white text-slate-900 hover:bg-slate-100 transition-colors rounded-2xl">
Browse Inventory
</a>
</div>
</div>
</div>
<!-- HERO SECTION -->
<section class="max-w-screen-2xl mx-auto">
<div class="relative h-[620px] flex items-center">
<!-- Hero Background -->
<div class="absolute inset-0">
<img src="https://picsum.photos/id/160/1920/1080"
alt="Premium performance car on open highway at sunset"
class="w-full h-full object-cover">
<div class="absolute inset-0 bg-gradient-to-r from-slate-950 via-slate-950/80 to-slate-950/30"></div>
<div class="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-slate-950/60"></div>
</div>
<div class="relative max-w-2xl px-8 md:px-12 z-10">
<div class="inline-flex items-center gap-x-2 px-3 py-1.5 rounded-2xl bg-white/10 backdrop-blur-md border border-white/20 mb-6">
<div class="w-2 h-2 bg-orange-400 rounded-full"></div>
<span class="text-xs font-semibold tracking-widest">2025 NORTH AMERICAN CAR OF THE YEAR FINALIST</span>
</div>
<h1 class="text-6xl md:text-7xl leading-[1.05] font-bold tracking-tighter heading-font">
Precision.<br>
Performance.<br>
<span class="text-orange-400">Perspective.</span>
</h1>
<p class="mt-5 max-w-md text-lg text-slate-300">
Expert automotive journalism, data-driven reviews, and direct access to America's most trusted pre-owned inventory.
</p>
<div class="mt-8 flex flex-wrap gap-3">
<a href="#inventory"
class="flex items-center px-8 py-4 bg-orange-500 hover:bg-orange-600 transition-all font-semibold rounded-3xl text-white text-sm tracking-wide">
<span>BROWSE INVENTORY</span>
</a>
<a href="#reviews"
class="flex items-center px-7 py-4 border border-white/30 hover:bg-white/10 transition-colors font-semibold rounded-3xl text-sm tracking-wide">
<span>READ REVIEWS</span>
</a>
</div>
<div class="mt-8 flex items-center gap-x-6 text-xs">
<div class="flex -space-x-2">
<img src="https://i.pravatar.cc/24?u=1" class="w-6 h-6 rounded-full border border-slate-800 ring-1 ring-slate-800" alt="">
<img src="https://i.pravatar.cc/24?u=2" class="w-6 h-6 rounded-full border border-slate-800 ring-1 ring-slate-800" alt="">
<img src="https://i.pravatar.cc/24?u=3" class="w-6 h-6 rounded-full border border-slate-800 ring-1 ring-slate-800" alt="">
</div>
<div>
<span class="font-semibold text-xs">Join 142,000+ drivers</span>
</div>
</div>
</div>
<!-- Hero Stats -->
<div class="absolute bottom-8 right-8 hidden xl:flex items-center gap-x-6 bg-slate-900/70 backdrop-blur-xl px-6 py-4 border border-slate-700 rounded-3xl">
<div class="flex items-center gap-x-6 text-sm">
<div>
<div class="text-xs text-slate-400">This month</div>
<div class="font-bold text-xl">14,892</div>
<div class="text-xs -mt-0.5">vehicles reviewed</div>
</div>
<div class="h-8 w-[1px] bg-slate-700"></div>
<div>
<div class="font-semibold">4.98</div>
<div class="text-[10px] text-emerald-400 font-medium">Avg. review score</div>
</div>
</div>
</div>
</div>
</section>
<!-- TRUST BAR -->
<div class="max-w-screen-2xl mx-auto border-b border-slate-800">
<div class="px-8 py-5 flex flex-wrap items-center justify-center md:justify-between gap-x-8 gap-y-3 text-sm">
<div class="flex items-center gap-x-8 text-xs md:text-sm">
<div class="font-semibold text-slate-300">As seen in</div>
<div class="flex items-center gap-x-5 text-slate-400 font-medium">
<div>Car and Driver</div>
<div>MotorTrend</div>
<div>Road & Track</div>
</div>
</div>
<div class="flex items-center gap-x-2 text-xs font-medium">
<div class="px-3 py-1 bg-slate-900 rounded-2xl border border-slate-700 flex items-center gap-x-2">
<i class="fas fa-award text-orange-400"></i>
<span class="font-semibold">2024 Automotive Media Award Winner</span>
</div>
</div>
</div>
</div>
<!-- LATEST NEWS SECTION -->
<section id="news" class="max-w-screen-2xl mx-auto px-8 pt-16 pb-12">
<div class="flex items-end justify-between mb-8">
<div>
<span class="px-3 py-1 text-xs font-semibold bg-orange-500/10 text-orange-400 rounded-2xl">EDITOR'S PICKS</span>
<h2 class="section-header mt-3 tracking-tight">Latest News & Insights</h2>
</div>
<a href="#" class="hidden md:flex items-center gap-x-2 text-sm font-semibold text-orange-400 hover:text-orange-300">
VIEW ALL NEWS <i class="fas fa-arrow-right ml-1"></i>
</a>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- News Card 1 -->
<div class="news-card bg-slate-900 border border-slate-800 rounded-3xl overflow-hidden group">
<div class="relative">
<img src="https://picsum.photos/id/201/700/420" alt="Electric SUV on charging station"
class="w-full h-56 object-cover group-hover:scale-[1.03] transition-transform duration-300">
<div class="absolute top-4 left-4 px-3 py-1 bg-slate-900/90 text-xs font-medium rounded-2xl flex items-center">
<span class="text-emerald-400">•</span>
<span class="ml-1.5">INDUSTRY</span>
</div>
</div>
<div class="p-6">
<div class="flex items-center gap-x-3 text-xs text-slate-400 mb-3">
<span>Feb 3, 2025</span>
<span>•</span>
<span>By Elena Voss</span>
</div>
<h3 class="font-bold text-xl leading-tight mb-3 group-hover:text-orange-400 transition-colors">EV Sales Surge 42% as Battery Costs Drop Below $80/kWh</h3>
<p class="text-sm text-slate-300 line-clamp-3">Major manufacturers are accelerating production as lithium-ion battery prices continue their dramatic decline. Analysts now project that EVs will account for 38% of all new vehicle sales by the end of 2026.</p>
<div class="mt-4 pt-4 border-t border-slate-700 flex items-center justify-between text-xs">
<span class="font-medium">8 min read</span>
<a href="#" class="font-semibold flex items-center text-orange-400 hover:text-orange-300">Read full story <i class="fas fa-chevron-right ml-1.5 text-xs"></i></a>
</div>
</div>
</div>
<!-- News Card 2 -->
<div class="news-card bg-slate-900 border border-slate-800 rounded-3xl overflow-hidden group">
<div class="relative">
<img src="https://picsum.photos/id/251/700/420" alt="Performance sedan on track"
class="w-full h-56 object-cover group-hover:scale-[1.03] transition-transform duration-300">
<div class="absolute top-4 left-4 px-3 py-1 bg-slate-900/90 text-xs font-medium rounded-2xl flex items-center">
<span class="text-amber-400">•</span>
<span class="ml-1.5">PERFORMANCE</span>
</div>
</div>
<div class="p-6">
<div class="flex items-center gap-x-3 text-xs text-slate-400 mb-3">
<span>Jan 28, 2025</span>
<span>•</span>
<span>By Marcus Chen</span>
</div>
<h3 class="font-bold text-xl leading-tight mb-3 group-hover:text-orange-400 transition-colors">Manual Transmissions Make a Comeback in 2025 Sports Cars</h3>
<p class="text-sm text-slate-300 line-clamp-3">Porsche, BMW, and Honda have all announced new models featuring 6-speed manuals. Enthusiasts are celebrating the return of driver engagement in an increasingly automated segment.</p>
<div class="mt-4 pt-4 border-t border-slate-700 flex items-center justify-between text-xs">
<span class="font-medium">12 min read</span>
<a href="#" class="font-semibold flex items-center text-orange-400 hover:text-orange-300">Read full story <i class="fas fa-chevron-right ml-1.5 text-xs"></i></a>
</div>
</div>
</div>
<!-- News Card 3 -->
<div class="news-card bg-slate-900 border border-slate-800 rounded-3xl overflow-hidden group">
<div class="relative">
<img src="https://picsum.photos/id/292/700/420" alt="Luxury SUV in showroom"
class="w-full h-56 object-cover group-hover:scale-[1.03] transition-transform duration-300">
<div class="absolute top-4 left-4 px-3 py-1 bg-slate-900/90 text-xs font-medium rounded-2xl flex items-center">
<span class="text-sky-400">•</span>
<span class="ml-1.5">TECHNOLOGY</span>
</div>
</div>
<div class="p-6">
<div class="flex items-center gap-x-3 text-xs text-slate-400 mb-3">
<span>Jan 22, 2025</span>
<span>•</span>
<span>By Priya Sharma</span>
</div>
<h3 class="font-bold text-xl leading-tight mb-3 group-hover:text-orange-400 transition-colors">Level 3 Autonomous Driving Approved in 14 New States</h3>
<p class="text-sm text-slate-300 line-clamp-3">NHTSA has cleared Mercedes-Benz's Drive Pilot system for wider deployment. The update allows hands-free operation up to 75 mph on approved highways.</p>
<div class="mt-4 pt-4 border-t border-slate-700 flex items-center justify-between text-xs">
<span class="font-medium">6 min read</span>
<a href="#" class="font-semibold flex items-center text-orange-400 hover:text-orange-300">Read full story <i class="fas fa-chevron-right ml-1.5 text-xs"></i></a>
</div>
</div>
</div>
</div>
</section>
<!-- FEATURED REVIEWS SECTION -->
<section id="reviews" class="max-w-screen-2xl mx-auto px-8 py-12 bg-slate-900">
<div class="flex items-end justify-between mb-8">
<div>
<h2 class="section-header tracking-tight">Featured Vehicle Reviews</h2>
<p class="text-slate-400 mt-1">Rigorous testing and expert analysis from our team</p>
</div>
<a href="#" class="hidden md:flex items-center gap-x-2 text-sm font-semibold text-orange-400 hover:text-orange-300">
ALL REVIEWS <i class="fas fa-arrow-right ml-1"></i>
</a>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- Review 1 -->
<div class="bg-slate-800 border border-slate-700 rounded-3xl overflow-hidden car-card">
<div class="relative">
<img src="https://picsum.photos/id/160/700/420" alt="2024 Porsche 911 GT3" class="w-full h-48 object-cover">
<div class="absolute top-4 right-4 bg-slate-900/90 px-3 py-1 text-xs font-bold rounded-2xl flex items-center">
<span class="text-orange-400">9.7</span>
<span class="text-xs text-slate-400 ml-1">/10</span>
</div>
</div>
<div class="p-6">
<div class="flex justify-between items-baseline">
<div>
<h4 class="font-bold text-xl">2025 Porsche 911 GT3</h4>
<p class="text-sm text-orange-300 font-medium">RS Package</p>
</div>
</div>
<div class="flex gap-x-4 mt-4 text-xs">
<div>
<span class="block text-slate-400">0-60</span>
<span class="font-bold">3.2s</span>
</div>
<div>
<span class="block text-slate-400">HP</span>
<span class="font-bold">502</span>
</div>
<div>
<span class="block text-slate-400">MSRP</span>
<span class="font-bold">$182,400</span>
</div>
</div>
<p class="mt-4 text-sm text-slate-300 line-clamp-3">The GT3 remains the benchmark for naturally aspirated sports cars. Its 4.0L flat-six delivers raw emotion that few competitors can match. The chassis balance is simply unmatched at this price point.</p>
<div class="flex items-center justify-between mt-5">
<div class="text-xs font-medium">Tested by <span class="font-semibold">Liam Torres</span></div>
<a href="#" class="text-sm px-4 py-2 rounded-2xl bg-orange-500 hover:bg-orange-600 text-white text-xs font-semibold flex items-center justify-center">Read Review</a>
</div>
</div>
</div>
<!-- Review 2 -->
<div class="bg-slate-800 border border-slate-700 rounded-3xl overflow-hidden car-card">
<div class="relative">
<img src="https://picsum.photos/id/29/700/420" alt="2025 Rivian R1T" class="w-full h-48 object-cover">
<div class="absolute top-4 right-4 bg-slate-900/90 px-3 py-1 text-xs font-bold rounded-2xl flex items-center">
<span class="text-orange-400">8.9</span>
<span class="text-xs text-slate-400 ml-1">/10</span>
</div>
</div>
<div class="p-6">
<div class="flex justify-between items-baseline">
<div>
<h4 class="font-bold text-xl">2025 Rivian R1T</h4>
<p class="text-sm text-orange-300 font-medium">Performance</p>
</div>
</div>
<div class="flex gap-x-4 mt-4 text-xs">
<div>
<span class="block text-slate-400">0-60</span>
<span class="font-bold">3.5s</span>
</div>
<div>
<span class="block text-slate-400">HP</span>
<span class="font-bold">835</span>
</div>
<div>
<span class="block text-slate-400">MSRP</span>
<span class="font-bold">$87,500</span>
</div>
</div>
<p class="mt-4 text-sm text-slate-300 line-clamp-3">The second-generation R1T is a massive leap forward. The new quad-motor setup delivers instant torque while the updated suspension makes it genuinely comfortable on pavement. Off-road capability remains class-leading.</p>
<div class="flex items-center justify-between mt-5">
<div class="text-xs font-medium">Tested by <span class="font-semibold">Maya Patel</span></div>
<a href="#" class="text-sm px-4 py-2 rounded-2xl bg-orange-500 hover:bg-orange-600 text-white text-xs font-semibold flex items-center justify-center">Read Review</a>
</div>
</div>
</div>
<!-- Review 3 -->
<div class="bg-slate-800 border border-slate-700 rounded-3xl overflow-hidden car-card">
<div class="relative">
<img src="https://picsum.photos/id/1033/700/420" alt="2024 Mercedes-Benz E-Class" class="w-full h-48 object-cover">
<div class="absolute top-4 right-4 bg-slate-900/90 px-3 py-1 text-xs font-bold rounded-2xl flex items-center">
<span class="text-orange-400">9.2</span>
<span class="text-xs text-slate-400 ml-1">/10</span>
</div>
</div>
<div class="p-6">
<div class="flex justify-between items-baseline">
<div>
<h4 class="font-bold text-xl">2025 Mercedes-Benz E-Class</h4>
<p class="text-sm text-orange-300 font-medium">E450 4MATIC</p>
</div>
</div>
<div class="flex gap-x-4 mt-4 text-xs">
<div>
<span class="block text-slate-400">0-60</span>
<span class="font-bold">5.2s</span>
</div>
<div>
<span class="block text-slate-400">HP</span>
<span class="font-bold">375</span>
</div>
<div>
<span class="block text-slate-400">MSRP</span>
<span class="font-bold">$72,800</span>
</div>
</div>
<p class="mt-4 text-sm text-slate-300 line-clamp-3">This is the most advanced E-Class yet. The new MBUX Super Screen system is genuinely impressive and the ride quality is remarkably refined. The E450 strikes an excellent balance between luxury and capability.</p>
<div class="flex items-center justify-between mt-5">
<div class="text-xs font-medium">Tested by <span class="font-semibold">David Kim</span></div>
<a href="#" class="text-sm px-4 py-2 rounded-2xl bg-orange-500 hover:bg-orange-600 text-white text-xs font-semibold flex items-center justify-center">Read Review</a>
</div>
</div>
</div>
</div>
</section>
<!-- INVENTORY SECTION -->
<section id="inventory" class="max-w-screen-2xl mx-auto px-8 py-16">
<div class="flex flex-col md:flex-row md:items-end md:justify-between gap-4 mb-8">
<div>
<h2 class="section-header tracking-tight">Premium Inventory</h2>
<p class="mt-1 text-slate-400">Certified pre-owned and new arrivals. 4,872 vehicles available.</p>
</div>
<div>
<a href="#" class="inline-flex items-center px-5 py-2.5 text-sm font-semibold border border-slate-700 hover:bg-slate-900 transition-colors rounded-2xl">
<span>Browse Full Inventory</span>
<i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- Inventory Car 1 -->
<div class="car-card bg-slate-900 border border-slate-700 rounded-3xl overflow-hidden">
<div class="relative">
<img src="https://picsum.photos/id/1018/700/380" alt="2023 BMW M4" class="w-full h-[190px] object-cover">
<div class="absolute top-4 left-4">
<span class="px-3 py-1 bg-emerald-500 text-emerald-950 text-xs font-bold rounded-2xl">CERTIFIED</span>
</div>
<div class="absolute top-4 right-4 bg-slate-900/80 text-xs px-2.5 py-1 rounded-2xl font-medium">12,400 mi</div>
</div>
<div class="p-5">
<div class="flex justify-between">
<div>
<span class="font-bold text-lg">2023 BMW M4</span>
<span class="block text-sm text-slate-400">Competition xDrive</span>
</div>
</div>
<div class="flex justify-between items-end mt-4">
<div>
<span class="text-2xl font-bold">$68,900</span>
</div>
<div class="text-right">
<span class="block text-xs text-emerald-400 font-semibold">In stock</span>
<button onclick="viewVehicle(this)" class="text-xs font-semibold px-3 py-1 bg-slate-800 hover:bg-orange-500 hover:text-white transition-colors rounded-xl mt-1">View Details</button>
</div>
</div>
</div>
</div>
<!-- Inventory Car 2 -->
<div class="car-card bg-slate-900 border border-slate-700 rounded-3xl overflow-hidden">
<div class="relative">
<img src="https://picsum.photos/id/133/700/380" alt="2024 Audi RS6" class="w-full h-[190px] object-cover">
<div class="absolute top-4 left-4">
<span class="px-3 py-1 bg-emerald-500 text-emerald-950 text-xs font-bold rounded-2xl">CERTIFIED</span>
</div>
<div class="absolute top-4 right-4 bg-slate-900/80 text-xs px-2.5 py-1 rounded-2xl font-medium">4,200 mi</div>
</div>
<div class="p-5">
<div class="flex justify-between">
<div>
<span class="font-bold text-lg">2024 Audi RS6 Avant</span>
<span class="block text-sm text-slate-400">Performance</span>
</div>
</div>
<div class="flex justify-between items-end mt-4">
<div>
<span class="text-2xl font-bold">$119,500</span>
</div>
<div class="text-right">
<span class="block text-xs text-emerald-400 font-semibold">In stock</span>
<button onclick="viewVehicle(this)" class="text-xs font-semibold px-3 py-1 bg-slate-800 hover:bg-orange-500 hover:text-white transition-colors rounded-xl mt-1">View Details</button>
</div>
</div>
</div>
</div>
<!-- Inventory Car 3 -->
<div class="car-card bg-slate-900 border border-slate-700 rounded-3xl overflow-hidden">
<div class="relative">
<img src="https://picsum.photos/id/180/700/380" alt="2024 Tesla Model Y" class="w-full h-[190px] object-cover">
<div class="absolute top-4 left-4">
<span class="px-3 py-1 bg-emerald-500 text-emerald-950 text-xs font-bold rounded-2xl">NEW</span>
</div>
<div class="absolute top-4 right-4 bg-slate-900/80 text-xs px-2.5 py-1 rounded-2xl font-medium">1,800 mi</div>
</div>
<div class="p-5">
<div class="flex justify-between">
<div>
<span class="font-bold text-lg">2024 Tesla Model Y</span>
<span class="block text-sm text-slate-400">Long Range AWD</span>
</div>
</div>
<div class="flex justify-between items-end mt-4">
<div>
<span class="text-2xl font-bold">$49,900</span>
</div>
<div class="text-right">
<span class="block text-xs text-emerald-400 font-semibold">In stock</span>
<button onclick="viewVehicle(this)" class="text-xs font-semibold px-3 py-1 bg-slate-800 hover:bg-orange-500 hover:text-white transition-colors rounded-xl mt-1">View Details</button>
</div>
</div>
</div>
</div>
<!-- Inventory Car 4 -->
<div class="car-card bg-slate-900 border border-slate-700 rounded-3xl overflow-hidden">
<div class="relative">
<img src="https://picsum.photos/id/251/700/380" alt="2022 Ford F-150 Raptor" class="w-full h-[190px] object-cover">
<div class="absolute top-4 left-4">
<span class="px-3 py-1 bg-emerald-500 text-emerald-950 text-xs font-bold rounded-2xl">CERTIFIED</span>
</div>
<div class="absolute top-4 right-4 bg-slate-900/80 text-xs px-2.5 py-1 rounded-2xl font-medium">22,900 mi</div>
</div>
<div class="p-5">
<div class="flex justify-between">
<div>
<span class="font-bold text-lg">2022 Ford F-150 Raptor</span>
<span class="block text-sm text-slate-400">Raptor R</span>
</div>
</div>
<div class="flex justify-between items-end mt-4">
<div>
<span class="text-2xl font-bold">$78,900</span>
</div>
<div class="text-right">
<span class="block text-xs text-emerald-400 font-semibold">In stock</span>
<button onclick="viewVehicle(this)" class="text-xs font-semibold px-3 py-1 bg-slate-800 hover:bg-orange-500 hover:text-white transition-colors rounded-xl mt-1">View Details</button>
</div>
</div>
</div>
</div>
</div>
<div class="flex justify-center mt-7">
<a href="#" class="text-sm flex items-center px-4 py-2 font-semibold hover:text-orange-400 transition-colors">
Explore all 4,872 vehicles <i class="fas fa-chevron-right ml-2"></i>
</a>
</div>
</section>
<!-- PAYMENT ESTIMATOR - INTERACTIVE ELEMENT -->
<section id="tools" class="max-w-screen-2xl mx-auto px-8 py-12 bg-slate-900">
<div class="max-w-4xl mx-auto">
<div class="grid md:grid-cols-5 gap-8 items-center">
<!-- Left content -->
<div class="md:col-span-2">
<span class="text-xs uppercase font-bold tracking-wider bg-orange-500/10 text-orange-400 px-3 py-1 rounded-2xl">FINANCING TOOLS</span>
<h2 class="text-4xl font-bold tracking-tight mt-3">Payment Estimator</h2>
<p class="mt-3 text-slate-300">Get a realistic monthly payment estimate for any vehicle in our inventory. No hidden fees.</p>
<div class="mt-6 flex items-center gap-x-3 text-xs">
<div class="px-3 py-2 bg-slate-800 rounded-2xl flex items-center gap-1.5">
<i class="fas fa-shield-alt text-emerald-400"></i>
<span class="font-medium">Rates from 3.99%</span>
</div>
</div>
</div>
<!-- Calculator -->
<div class="md:col-span-3 bg-slate-800 border border-slate-700 rounded-3xl p-6">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<label class="block text-xs font-semibold mb-1.5 text-slate-300">Vehicle Price</label>
<div class="relative">
<div class="absolute left-4 top-3 text-slate-400">$</div>
<input type="number" id="price" value="68900"
class="bg-slate-900 border border-slate-600 text-white w-full pl-8 pr-4 py-3 text-lg font-semibold rounded-2xl focus:outline-none focus:border-orange-500">
</div>
</div>
<div>
<label class="block text-xs font-semibold mb-1.5 text-slate-300">Down Payment</label>
<div class="relative">
<div class="absolute left-4 top-3 text-slate-400">$</div>
<input type="number" id="down" value="12000"
class="bg-slate-900 border border-slate-600 text-white w-full pl-8 pr-4 py-3 text-lg font-semibold rounded-2xl focus:outline-none focus:border-orange-500">
</div>
</div>
<div>
<label class="block text-xs font-semibold mb-1.5 text-slate-300">Loan Term</label>
<select id="term" class="bg-slate-900 border border-slate-600 text-white w-full px-4 py-[14px] text-lg font-semibold rounded-2xl focus:outline-none focus:border-orange-500">
<option value="36">36 months</option>
<option value="48" selected>48 months</option>
<option value="60">60 months</option>
<option value="72">72 months</option>
</select>
</div>
<div>
<label class="block text-xs font-semibold mb-1.5 text-slate-300">Interest Rate (APR)</label>
<div class="relative">
<input type="number" id="rate" value="4.99" step="0.01"
class="bg-slate-900 border border-slate-600 text-white w-full px-4 py-3 text-lg font-semibold rounded-2xl focus:outline-none focus:border-orange-500">
<div class="absolute right-4 top-3 text-slate-400">%</div>
</div>
</div>
</div>
<button onclick="calculatePayment()"
class="mt-5 w-full py-4 bg-orange-500 hover:bg-orange-600 transition-colors text-white font-bold text-sm tracking-wider rounded-3xl">
CALCULATE MONTHLY PAYMENT
</button>
<div id="result-container" class="hidden mt-4 bg-slate-950 border border-slate-700 rounded-2xl px-5 py-4">
<div class="flex justify-between items-center">
<div>
<span class="text-xs font-medium text-slate-400">Estimated monthly payment</span>
<div id="result" class="text-3xl font-extrabold text-orange-400 value-display"></div>
</div>
<div class="text-right">
<div onclick="applyForFinancing()"
class="cursor-pointer text-xs px-4 py-[7px] bg-white text-slate-900 rounded-2xl font-semibold flex items-center justify-center gap-x-1.5 hover:bg-slate-100 transition-colors">
<span>Apply Online</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- TESTIMONIALS -->
<section id="testimonials" class="max-w-screen-2xl mx-auto px-8 py-16">
<div class="flex items-end justify-between mb-8">
<div>
<h2 class="section-header tracking-tight">What Our Customers Say</h2>
</div>
<div class="text-xs font-semibold px-4 py-2 rounded-3xl border border-slate-700 text-center">
<span class="text-emerald-400">4.97</span> <span class="text-slate-300">from 24,918 reviews</span>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- Testimonial 1 -->
<div class="testimonial-card bg-slate-900 border border-slate-700 p-6 rounded-3xl">
<div class="flex items-center gap-x-3">
<img src="https://i.pravatar.cc/40?u=carla" alt="Carla Mendez" class="w-9 h-9 rounded-full">
<div>
<div class="font-semibold">Carla Mendez</div>
<div class="text-xs text-slate-400">Owner, 2024 Porsche 911 Carrera</div>
</div>
</div>
<div class="my-5">
<p class="text-sm leading-relaxed">"The in-depth review of the new 911 was exactly what I needed. The team was incredibly helpful when I visited the showroom. I bought my car through Vanguard and the process was seamless."</p>
</div>
<div class="flex items-center text-xs">
<div class="flex text-orange-400">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<span class="ml-2 text-xs font-semibold">Verified Buyer</span>
</div>
</div>
<!-- Testimonial 2 -->
<div class="testimonial-card bg-slate-900 border border-slate-700 p-6 rounded-3xl">
<div class="flex items-center gap-x-3">
<img src="https://i.pravatar.cc/40?u=jamal" alt="Jamal Wright" class="w-9 h-9 rounded-full">
<div>
<div class="font-semibold">Jamal Wright</div>
<div class="text-xs text-slate-400">Fleet Manager, Wright Logistics</div>
</div>
</div>
<div class="my-5">
<p class="text-sm leading-relaxed">"We purchased three F-150s last quarter. The inventory tools and transparent pricing made it easy. Their parts department also saved us on service intervals with OEM pricing."</p>
</div>
<div class="flex items-center text-xs">
<div class="flex text-orange-400">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
<span class="ml-2 text-xs font-semibold">Verified Buyer</span>
</div>
</div>
<!-- Testimonial 3 -->
<div class="testimonial-card bg-slate-900 border border-slate-700 p-6 rounded-3xl">
<div class="flex items-center gap-x-3">
<img src="https://i.pravatar.cc/40?u=sofia" alt="Sofia Patel" class="w-9 h-9 rounded-full">
<div>
<div class="font-semibold">Sofia Patel</div>
<div class="text-xs text-slate-400">2023 Rivian R1S owner</div>
</div>
</div>
<div class="my-5">
<p class="text-sm leading-relaxed">"The repair guides are excellent. I was able to diagnose a minor issue with my R1S before it became a real problem. The estimator tool also gave me a very accurate financing quote."</p>
</div>
<div class="flex items-center text-xs">
<div class="flex text-orange-400">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<span class="ml-2 text-xs font-semibold">Verified Buyer</span>
</div>
</div>
</div>
</section>
<!-- PARTS DEPARTMENT -->
<section id="parts" class="max-w-screen-2xl mx-auto px-8 py-12 bg-slate-900">
<div class="max-w-screen-2xl">
<div class="flex items-end justify-between mb-7">
<div>
<h2 class="section-header tracking-tight">Parts & Service</h2>
<p class="text-sm text-slate-300">Genuine OEM and performance upgrades. Fast nationwide shipping.</p>
</div>
<a href="#" class="text-sm hidden md:flex items-center font-semibold text-orange-400 hover:text-orange-300">
SHOP PARTS <i class="ml-2 fas fa-arrow-right"></i>
</a>
</div>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<!-- Part 1 -->
<div class="flex gap-4 bg-slate-800 border border-slate-700 p-4 rounded-3xl items-center">
<div class="w-16 h-16 flex-shrink-0">
<img src="https://picsum.photos/id/30/120/120" alt="Performance brake pads" class="w-full h-full object-cover rounded-2xl">
</div>
<div class="flex-1">
<div class="font-semibold text-sm">Brembo GT Performance Brake Kit</div>
<div class="text-xs text-slate-400 mt-px">Fits most German performance models</div>
<div class="flex items-baseline justify-between mt-2">
<span class="font-bold">$1,499</span>
<span class="text-xs px-3 py-1 bg-emerald-900 text-emerald-300 rounded-xl">In stock</span>
</div>
</div>
</div>
<!-- Part 2 -->
<div class="flex gap-4 bg-slate-800 border border-slate-700 p-4 rounded-3xl items-center">
<div class="w-16 h-16 flex-shrink-0">
<img src="https://picsum.photos/id/160/120/120" alt="All season tires" class="w-full h-full object-cover rounded-2xl">
</div>
<div class="flex-1">
<div class="font-semibold text-sm">Michelin Pilot Sport 4S Set</div>
<div class="text-xs text-slate-400 mt-px">225/40R19 • 255/35R19</div>
<div class="flex items-baseline justify-between mt-2">
<span class="font-bold">$1,189</span>
<span class="text-xs px-3 py-1 bg-emerald-900 text-emerald-300 rounded-xl">In stock</span>
</div>
</div>
</div>
<!-- Part 3 -->
<div class="flex gap-4 bg-slate-800 border border-slate-700 p-4 rounded-3xl items-center">
<div class="w-16 h-16 flex-shrink-0">
<img src="https://picsum.photos/id/201/120/120" alt="LED headlight assembly" class="w-full h-full object-cover rounded-2xl">
</div>
<div class="flex-1">
<div class="font-semibold text-sm">Matrix LED Headlight Upgrade</div>
<div class="text-xs text-slate-400 mt-px">Compatible with 2020+ models</div>
<div class="flex items-baseline justify-between mt-2">
<span class="font-bold">$689</span>
<span class="text-xs px-3 py-1 bg-emerald-900 text-emerald-300 rounded-xl">In stock</span>
</div>
</div>
</div>
<!-- Part 4 -->
<div class="flex gap-4 bg-slate-800 border border-slate-700 p-4 rounded-3xl items-center">
<div class="w-16 h-16 flex-shrink-0">
<img src="https://picsum.photos/id/292/120/120" alt="Oil filter kit" class="w-full h-full object-cover rounded-2xl">
</div>
<div class="flex-1">
<div class="font-semibold text-sm">OEM Oil Filter & Fluid Kit</div>
<div class="text-xs text-slate-400 mt-px">Includes synthetic oil (5W-30)</div>
<div class="flex items-baseline justify-between mt-2">
<span class="font-bold">$79</span>
<span class="text-xs px-3 py-1 bg-emerald-900 text-emerald-300 rounded-xl">In stock</span>
</div>
</div>
</div>
</div>
<div class="mt-4 text-center md:text-left">
<a href="#" class="inline-flex items-center text-sm font-medium text-orange-400 hover:text-orange-300">
<span>Browse entire parts catalog</span> <i class="fas fa-external-link-alt ml-2 text-xs"></i>
</a>
</div>
</div>
</section>
<!-- CONTACT SECTION -->
<section id="contact" class="max-w-screen-2xl mx-auto px-8 py-16">
<div class="max-w-3xl mx-auto">
<div class="text-center mb-8">
<h2 class="text-4xl font-bold tracking-tight">Ready to get started?</h2>
<p class="mt-2 text-slate-300">Contact our team of automotive specialists today.</p>
</div>
<div class="bg-slate-900 border border-slate-700 rounded-3xl p-8">
<form id="contact-form" onsubmit="submitContactForm(event)">
<div class="grid grid-cols-1 md:grid-cols-2 gap-5">
<div>
<label class="block text-xs font-semibold mb-1.5">Full Name</label>
<input type="text" class="w-full bg-slate-800 border border-slate-700 px-4 py-3 text-sm rounded-2xl" placeholder="Alex Rivera" required>
</div>
<div>
<label class="block text-xs font-semibold mb-1.5">Email Address</label>
<input type="email" class="w-full bg-slate-800 border border-slate-700 px-4 py-3 text-sm rounded-2xl" placeholder="you@company.com" required>
</div>
</div>
<div class="mt-5">
<label class="block text-xs font-semibold mb-1.5">What are you looking for?</label>
<select class="w-full bg-slate-800 border border-slate-700 px-4 py-3 text-sm rounded-2xl" required>
<option>Vehicle Inquiry</option>
<option>Financing Information</option>
<option>Parts & Accessories</option>
<option>Service Appointment</option>
<option>General Question</option>
</select>
</div>
<div class="mt-5">
<label class="block text-xs font-semibold mb-1.5">Message</label>
<textarea class="w-full bg-slate-800 border border-slate-700 px-4 py-3 text-sm rounded-2xl" rows="4" placeholder="I'm interested in the 2025 Porsche 911 GT3..." required></textarea>
</div>
<div class="mt-5 flex items-center gap-x-3">
<button type="submit"
class="flex-1 md:flex-none px-8 py-3.5 text-sm font-bold bg-orange-500 hover:bg-orange-600 transition-colors text-white rounded-3xl">
SEND MESSAGE
</button>
<div class="hidden md:block text-xs text-slate-400">We'll reply within 2 hours during business hours.</div>
</div>
</form>
</div>
</div>
</section>
<!-- FOOTER -->
<footer class="bg-slate-900 border-t border-slate-700">
<div class="max-w-screen-2xl mx-auto px-8 pt-12 pb-8">
<div class="grid grid-cols-2 md:grid-cols-5 gap-y-8">
<div class="col-span-2 md:col-span-1">
<div class="flex items-center gap-x-2 mb-3">
<div class="w-8 h-8 bg-orange-500 flex items-center justify-center rounded-xl">
<i class="fas fa-car text-white text-lg"></i>
</div>
<span class="font-bold text-2xl heading-font">Vanguard</span>
</div>
<p class="text-xs text-slate-400">Expert automotive journalism and premium vehicle resources since 2014.</p>
</div>
<div>
<div class="font-semibold text-sm mb-3">Explore</div>
<div class="flex flex-col gap-y-[7px] text-sm text-slate-300">
<a href="#reviews" class="hover:text-white transition-colors">Car Reviews</a>
<a href="#news" class="hover:text-white transition-colors">News</a>
<a href="#inventory" class="hover:text-white transition-colors">Inventory</a>
<a href="#parts" class="hover:text-white transition-colors">Parts Catalog</a>
</div>
</div>
<div>
<div class="font-semibold text-sm mb-3">Resources</div>
<div class="flex flex-col gap-y-[7px] text-sm text-slate-300">
<a href="#tools" class="hover:text-white transition-colors">Payment Calculator</a>
<a href="#" class="hover:text-white transition-colors">Service Intervals</a>
<a href="#" class="hover:text-white transition-colors">Ownership Guides</a>
<a href="#" class="hover:text-white transition-colors">Compare Models</a>
</div>
</div>
<div>
<div class="font-semibold text-sm mb-3">Company</div>
<div class="flex flex-col gap-y-[7px] text-sm text-slate-300">
<a href="#" class="hover:text-white transition-colors">About Us</a>
<a href="#" class="hover:text-white transition-colors">Careers</a>
<a href="#" class="hover:text-white transition-colors">Dealer Network</a>
<a href="#" class="hover:text-white transition-colors">Press</a>
</div>
</div>
<div class="col-span-2 md:col-span-1">
<div class="font-semibold text-sm mb-3">Contact</div>
<div class="text-sm text-slate-300">
<div>4500 Highway 1</div>
<div>Detroit, MI 48226</div>
<div class="mt-3">
<a href="tel:3135550192" class="block">(313) 555-0192</a>
<a href="mailto:info@vanguardauto.com" class="block">info@vanguardauto.com</a>
</div>
</div>
<div class="flex items-center gap-x-4 mt-5">
<a href="#" class="text-slate-400 hover:text-white"><i class="fab fa-instagram"></i></a>
<a href="#" class="text-slate-400 hover:text-white"><i class="fab fa-twitter"></i></a>
<a href="#" class="text-slate-400 hover:text-white"><i class="fab fa-linkedin-in"></i></a>
<a href="#" class="text-slate-400 hover:text-white"><i class="fab fa-youtube"></i></a>
</div>
</div>
</div>
<div class="section-divider my-8"></div>
<div class="flex flex-col md:flex-row items-center justify-between text-xs text-slate-400">
<div>© 2025 Vanguard Automotive. All rights reserved.</div>
<div class="flex gap-x-4 mt-3 md:mt-0">
<a href="#" class="hover:text-white transition-colors">Privacy Policy</a>
<a href="#" class="hover:text-white transition-colors">Terms of Service</a>
<a href="#" class="hover:text-white transition-colors">Accessibility</a>
</div>
</div>
</div>
</footer>
<script src="https://cdn.tailwindcss.com"></script>
<script>
// Tailwind script configuration
function initializeTailwind() {
document.documentElement.style.setProperty('--accent', '#f97316');
tailwind.config = {
theme: {
extend: {
fontFamily: {
'grotesk': ['Space Grotesk', 'system-ui', 'sans-serif']
}
}
}
};
}
// Mobile menu functionality
function initMobileMenu() {
const menuBtn = document.getElementById('mobile-menu-btn');
const mobileMenu = document.getElementById('mobile-menu');
menuBtn.addEventListener('click', () => {
if (mobileMenu.classList.contains('hidden')) {
mobileMenu.classList.remove('hidden');
menuBtn.innerHTML = '<i class="fas fa-times text-lg"></i>';
} else {
mobileMenu.classList.add('hidden');
menuBtn.innerHTML = '<i class="fas fa-bars text-lg"></i>';
}
});
// Close mobile menu when clicking a link
const mobileLinks = document.querySelectorAll('.mobile-nav-link');
mobileLinks.forEach(link => {
link.addEventListener('click', () => {
mobileMenu.classList.add('hidden');
menuBtn.innerHTML = '<i class="fas fa-bars text-lg"></i>';
});
});
}
// Payment Calculator
function calculatePayment() {
const price = parseFloat(document.getElementById('price').value);
const downPayment = parseFloat(document.getElementById('down').value) || 0;
const term = parseInt(document.getElementById('term').value);
const annualRate = parseFloat(document.getElementById('rate').value) / 100;
if (!price || price <= 0) {
alert("Please enter a valid vehicle price.");
return;
}
const loanAmount = price - downPayment;
const monthlyRate = annualRate / 12;
let monthlyPayment;
if (monthlyRate === 0) {
monthlyPayment = loanAmount / term;
} else {
monthlyPayment = (loanAmount * monthlyRate) / (1 - Math.pow(1 + monthlyRate, -term));
}
// Display result
const resultContainer = document.getElementById('result-container');
const resultEl = document.getElementById('result');
resultEl.innerHTML = '$' + monthlyPayment.toFixed(2);
resultContainer.classList.remove('hidden');
resultContainer.classList.add('flex');
}
// Apply for financing action
function applyForFinancing() {
const resultContainer = document.getElementById('result-container');
resultContainer.innerHTML = `
<div class="w-full text-center py-1">
<div class="text-emerald-400 font-semibold flex items-center justify-center gap-x-2">
<i class="fas fa-check-circle"></i>
<span>Application started!</span>
</div>
<p class="text-xs text-slate-300 mt-2">A financing specialist will contact you within 15 minutes.</p>
</div>
`;
// Reset after 4 seconds
setTimeout(() => {
resultContainer.classList.add('hidden');
resultContainer.classList.remove('flex');
resultContainer.innerHTML = `
<div class="flex justify-between items-center w-full">
<div>
<span class="text-xs font-medium text-slate-400">Estimated monthly payment</span>
<div id="result" class="text-3xl font-extrabold text-orange-400 value-display"></div>
</div>
<div class="text-right">
<div onclick="applyForFinancing()" class="cursor-pointer text-xs px-4 py-[7px] bg-white text-slate-900 rounded-2xl font-semibold flex items-center justify-center gap-x-1.5 hover:bg-slate-100 transition-colors">
<span>Apply Online</span>
</div>
</div>
</div>
`;
}, 4500);
}
// View vehicle modal
function viewVehicle(element) {
const card = element.closest('.car-card');
const title = card.querySelector('.font-bold').innerText;
const price = card.querySelector('.text-2xl').innerText;
const modal = document.createElement('div');
modal.className = `fixed inset-0 z-[100] flex items-center justify-center bg-black bg-opacity-70`;
modal.innerHTML = `
<div class="bg-slate-900 border border-slate-700 w-full max-w-lg mx-4 rounded-3xl overflow-hidden">
<div class="px-6 pt-6 pb-2">
<div class="flex justify-between items-center">
<div>
<span class="font-bold text-2xl">${title}</span>
</div>
<button onclick="closeModal(this)" class="text-3xl leading-none text-slate-400 hover:text-white">×</button>
</div>
</div>
<div class="p-6 pt-4">
<div class="flex justify-between items-center mb-4">
<div>
<div class="text-xs text-slate-400">ASKING PRICE</div>
<div class="font-extrabold text-4xl">${price}</div>
</div>
<div class="text-right">
<div class="px-3 py-1.5 bg-emerald-900 text-emerald-300 text-xs font-bold rounded-2xl inline-block">CERTIFIED PRE-OWNED</div>
<div class="mt-1 text-xs font-medium">12,400 miles • 1 owner</div>
</div>
</div>
<div class="grid grid-cols-3 gap-3 my-5">
<div class="bg-slate-800 p-3 rounded-2xl">
<div class="text-xs">Engine</div>
<div class="font-semibold">3.0L I6 Twin-Turbo</div>
</div>
<div class="bg-slate-800 p-3 rounded-2xl">
<div class="text-xs">Transmission</div>
<div class="font-semibold">8-Speed Auto</div>
</div>
<div class="bg-slate-800 p-3 rounded-2xl">
<div class="text-xs">Drivetrain</div>
<div class="font-semibold">AWD</div>
</div>
</div>
<div class="text-sm text-slate-300">
<p>This vehicle has been through our rigorous 150-point inspection. Full service history available. Includes 2-year / 24,000-mile warranty.</p>
</div>
<div class="mt-5 flex items-center gap-3">
<button onclick="contactAboutVehicle('${title}', '${price}', this)" class="flex-1 py-3 bg-orange-500 hover:bg-orange-600 transition-colors font-bold text-sm rounded-3xl">
CONTACT DEALER
</button>
<button onclick="addToCompare(this)" class="flex-1 py-3 border border-slate-600 hover:bg-slate-800 transition-colors font-bold text-sm rounded-3xl">
ADD TO COMPARE
</button>
</div>
<div class="text-center mt-4">
<div class="text-xs text-slate-400">Financing available from 3.99% APR</div>
</div>
</div>
</div>
`;
document.body.appendChild(modal);
// Close on overlay click
modal.addEventListener('click', function(e) {
if (e.target === modal) {
modal.remove();
}
});
}
function closeModal(element) {
element.closest('.fixed').remove();
}
function contactAboutVehicle(model, price, element) {
const modal = element.closest('.fixed');
modal.remove();
// Scroll to contact section
const contactSection = document.getElementById('contact');
contactSection.scrollIntoView({ behavior: 'smooth' });
// Pre-fill message after scroll
setTimeout(() => {
const form = document.getElementById('contact-form');
if (form) {
const messageField = form.querySelector('textarea');
if (messageField) {
messageField.value = `I'm interested in the ${model} listed at ${price}. Can you provide more details?`;
messageField.focus();
}
}
}, 1000);
}
function addToCompare(element) {
const originalText = element.innerHTML;
element.innerHTML = `<span class="text-emerald-400"><i class="fas fa-check mr-1.5"></i>Added</span>`;
element.disabled = true;
setTimeout(() => {
const toast = document.createElement('div');
toast.className = `fixed bottom-5 left-1/2 -translate-x-1/2 bg-slate-800 border border-slate-700 text-white text-xs font-semibold px-5 py-3 rounded-3xl flex items-center gap-x-2 shadow-xl`;
toast.innerHTML = `
<span>Vehicle added to comparison list.</span>
<button class="font-bold text-orange-400 hover:text-orange-300" onclick="this.closest('.fixed').remove();">VIEW COMPARE (3)</button>
`;
document.body.appendChild(toast);
// Remove toast after 4s
setTimeout(() => {
if (toast.parentNode) toast.parentNode.removeChild(toast);
}, 4000);
}, 1200);
setTimeout(() => {
if (element.parentNode) {
element.innerHTML = originalText;
element.disabled = false;
}
}, 3000);
}
// Contact form submission
function submitContactForm(e) {
e.preventDefault();
const form = e.target;
const originalContent = form.innerHTML;
form.innerHTML = `
<div class="flex flex-col items-center justify-center py-6">
<div class="w-12 h-12 bg-emerald-500 rounded-full flex items-center justify-center mb-4">
<i class="fas fa-check text-white text-2xl"></i>
</div>
<h4 class="font-bold text-xl">Thank you!</h4>
<p class="text-center text-sm text-slate-300 mt-1">Your message has been received. One of our specialists will reach out shortly.</p>
</div>
`;
// Reset form after 5 seconds
setTimeout(() => {
if (form.parentNode) {
form.innerHTML = originalContent;
// Re-attach the event listener
const newForm = document.getElementById('contact-form');
if (newForm) {
newForm.addEventListener('submit', submitContactForm);
}
}
}, 5200);
}
// Smooth scrolling for nav links
function initSmoothScroll() {
const navLinks = document.querySelectorAll('a[href^="#"]');
navLinks.forEach(link => {
link.addEventListener('click', function(e) {
const targetId = this.getAttribute('href');
const targetElement = document.querySelector(targetId);
if (targetElement) {
e.preventDefault();
const headerOffset = 80;
const elementPosition = targetElement.getBoundingClientRect().top;
const offsetPosition = elementPosition + window.scrollY - headerOffset;
window.scrollTo({
top: offsetPosition,
behavior: 'smooth'
});
}
});
});
}
// Keyboard support for calculator
function initKeyboardSupport() {
const inputs = ['price', 'down', 'rate'];
inputs.forEach(id => {
const input = document.getElementById(id);
if (input) {
input.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
calculatePayment();
}
});
}
});
// Bonus: Pre-populate realistic default values
const priceInput = document.getElementById('price');
if (priceInput) {
priceInput.addEventListener('focus', function() {
if (this.value === '68900') {
// Keep the demo value
}
});
}
}
// Initialize everything
function initializeWebsite() {
initializeTailwind();
initMobileMenu();
initSmoothScroll();
initKeyboardSupport();
// Optional: Auto-calculate demo value on load for tools section
setTimeout(() => {
const priceInput = document.getElementById('price');
if (priceInput && window.scrollY < 300) {
// Do nothing - let user interact
}
}, 3000);
// Add subtle animation to hero stats
const heroStats = document.querySelector('.xl\\:flex.items-center.gap-x-6');
if (heroStats) {
heroStats.style.opacity = '0';
setTimeout(() => {
heroStats.style.transition = 'opacity 0.7s ease';
heroStats.style.opacity = '1';
}, 1200);
}
// Accessibility note: Add ARIA labels where needed
console.log('%c[Vanguard Automotive] Production-ready single-page website initialized.', 'color:#64748b');
}
// Boot the site
window.onload = function() {
initializeWebsite();
}
// Bonus: Make sure calculator works even if JS loads late
window.calculatePayment = calculatePayment;
</script>
</body>
</html>View Axe Report (JSON)
{
"testEngine": {
"name": "axe-core",
"version": "4.10.2"
},
"testRunner": {
"name": "axe"
},
"testEnvironment": {
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/156.0.8078.4 Safari/537.36",
"windowWidth": 1280,
"windowHeight": 720,
"orientationAngle": 0,
"orientationType": "landscape-primary"
},
"timestamp": "2026-11-12T09:43:16.255Z",
"url": "https://benchmark.aimac.invalid/26319e33c0b735facd22f987f2c06b4c50aa6f367f5732eacfdf0bd3bba58d70.html",
"toolOptions": {
"runOnly": {
"type": "tag",
"values": [
"wcag2a",
"wcag2aa",
"wcag21a",
"wcag21aa",
"wcag22a",
"wcag22aa"
]
},
"resultTypes": [
"violations"
],
"reporter": "v1"
},
"inapplicable": [
{
"id": "area-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag244",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.2.4.4",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <area> elements of image maps have alternative text",
"help": "Active <area> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/area-alt?application=axeAPI",
"nodes": []
},
{
"id": "aria-allowed-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure an element's role supports its ARIA attributes",
"help": "Elements must only use supported ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-allowed-attr?application=axeAPI",
"nodes": []
},
{
"id": "aria-braille-equivalent",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent",
"help": "aria-braille attributes must have a non-braille equivalent",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-braille-equivalent?application=axeAPI",
"nodes": []
},
{
"id": "aria-command-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA button, link and menuitem has an accessible name",
"help": "ARIA commands must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-command-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-conditional-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are used as described in the specification of the element's role",
"help": "ARIA attributes must be used as specified for the element's role",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-conditional-attr?application=axeAPI",
"nodes": []
},
{
"id": "aria-deprecated-role",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure elements do not use deprecated roles",
"help": "Deprecated ARIA roles must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-deprecated-role?application=axeAPI",
"nodes": []
},
{
"id": "aria-hidden-focus",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
"help": "ARIA hidden element must not be focusable or contain focusable elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI",
"nodes": []
},
{
"id": "aria-input-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA input field has an accessible name",
"help": "ARIA input fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-input-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-meter-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA meter node has an accessible name",
"help": "ARIA meter nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-meter-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-progressbar-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag111",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure every ARIA progressbar node has an accessible name",
"help": "ARIA progressbar nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-progressbar-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-prohibited-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure ARIA attributes are not prohibited for an element's role",
"help": "Elements must only use permitted ARIA attributes",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure elements with ARIA roles have all required ARIA attributes",
"help": "Required ARIA attributes must be provided",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-attr?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-children",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure elements with an ARIA role that require child roles contain them",
"help": "Certain ARIA roles must contain particular children",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-children?application=axeAPI",
"nodes": []
},
{
"id": "aria-required-parent",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure elements with an ARIA role that require parent roles are contained by them",
"help": "Certain ARIA roles must be contained by particular parents",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-parent?application=axeAPI",
"nodes": []
},
{
"id": "aria-roles",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure all elements with a role attribute use a valid value",
"help": "ARIA roles used must conform to valid values",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-roles?application=axeAPI",
"nodes": []
},
{
"id": "aria-toggle-field-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every ARIA toggle field has an accessible name",
"help": "ARIA toggle fields must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-toggle-field-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-tooltip-name",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure every ARIA tooltip node has an accessible name",
"help": "ARIA tooltip nodes must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-tooltip-name?application=axeAPI",
"nodes": []
},
{
"id": "aria-valid-attr-value",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure all ARIA attributes have valid values",
"help": "ARIA attributes must conform to valid values",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr-value?application=axeAPI",
"nodes": []
},
{
"id": "aria-valid-attr",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure attributes that begin with aria- are valid ARIA attributes",
"help": "ARIA attributes must conform to valid names",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr?application=axeAPI",
"nodes": []
},
{
"id": "autocomplete-valid",
"impact": null,
"tags": [
"cat.forms",
"wcag21aa",
"wcag135",
"EN-301-549",
"EN-9.1.3.5",
"ACT"
],
"description": "Ensure the autocomplete attribute is correct and suitable for the form field",
"help": "autocomplete attribute must be used correctly",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/autocomplete-valid?application=axeAPI",
"nodes": []
},
{
"id": "blink",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag222",
"section508",
"section508.22.j",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <blink> elements are not used",
"help": "<blink> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
"nodes": []
},
{
"id": "definition-list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dl> elements are structured correctly",
"help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
"nodes": []
},
{
"id": "dlitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <dt> and <dd> elements are contained by a <dl>",
"help": "<dt> and <dd> elements must be contained by a <dl>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
"nodes": []
},
{
"id": "duplicate-id-aria",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag412",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure every id attribute value used in ARIA and in labels is unique",
"help": "IDs used in ARIA and labels must be unique",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/duplicate-id-aria?application=axeAPI",
"nodes": []
},
{
"id": "frame-focusable-content",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1",
"help": "Frames with focusable content must not have tabindex=-1",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-focusable-content?application=axeAPI",
"nodes": []
},
{
"id": "frame-title-unique",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements contain a unique title attribute",
"help": "Frames must have a unique title attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title-unique?application=axeAPI",
"nodes": []
},
{
"id": "frame-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag412",
"section508",
"section508.22.i",
"TTv5",
"TT12.d",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure <iframe> and <frame> elements have an accessible name",
"help": "Frames must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title?application=axeAPI",
"nodes": []
},
{
"id": "html-xml-lang-mismatch",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page",
"help": "HTML elements with lang and xml:lang must have the same base language",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-xml-lang-mismatch?application=axeAPI",
"nodes": []
},
{
"id": "input-button-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure input buttons have discernible text",
"help": "Input buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-button-name?application=axeAPI",
"nodes": []
},
{
"id": "input-image-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure <input type=\"image\"> elements have alternative text",
"help": "Image buttons must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-image-alt?application=axeAPI",
"nodes": []
},
{
"id": "link-in-text-block",
"impact": null,
"tags": [
"cat.color",
"wcag2a",
"wcag141",
"TTv5",
"TT13.a",
"EN-301-549",
"EN-9.1.4.1"
],
"description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
"help": "Links must be distinguishable without relying on color",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=axeAPI",
"nodes": []
},
{
"id": "list",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that lists are structured correctly",
"help": "<ul> and <ol> must only directly contain <li>, <script> or <template> elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/list?application=axeAPI",
"nodes": []
},
{
"id": "listitem",
"impact": null,
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure <li> elements are used semantically",
"help": "<li> elements must be contained in a <ul> or <ol>",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/listitem?application=axeAPI",
"nodes": []
},
{
"id": "marquee",
"impact": null,
"tags": [
"cat.parsing",
"wcag2a",
"wcag222",
"TTv5",
"TT2.b",
"EN-301-549",
"EN-9.2.2.2"
],
"description": "Ensure <marquee> elements are not used",
"help": "<marquee> elements are deprecated and must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/marquee?application=axeAPI",
"nodes": []
},
{
"id": "meta-refresh",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag221",
"TTv5",
"TT8.a",
"EN-301-549",
"EN-9.2.2.1"
],
"description": "Ensure <meta http-equiv=\"refresh\"> is not used for delayed refresh",
"help": "Delayed refresh under 20 hours must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-refresh?application=axeAPI",
"nodes": []
},
{
"id": "object-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"EN-301-549",
"EN-9.1.1.1"
],
"description": "Ensure <object> elements have alternative text",
"help": "<object> elements must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/object-alt?application=axeAPI",
"nodes": []
},
{
"id": "role-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure [role=\"img\"] elements have alternative text",
"help": "[role=\"img\"] elements must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/role-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "scrollable-region-focusable",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag211",
"wcag213",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1",
"EN-9.2.1.3"
],
"description": "Ensure elements that have scrollable content are accessible by keyboard",
"help": "Scrollable region must have keyboard access",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI",
"nodes": []
},
{
"id": "server-side-image-map",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag211",
"section508",
"section508.22.f",
"TTv5",
"TT4.a",
"EN-301-549",
"EN-9.2.1.1"
],
"description": "Ensure that server-side image maps are not used",
"help": "Server-side image maps must not be used",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/server-side-image-map?application=axeAPI",
"nodes": []
},
{
"id": "summary-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure summary elements have discernible text",
"help": "Summary elements must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/summary-name?application=axeAPI",
"nodes": []
},
{
"id": "svg-img-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure <svg> elements with an img, graphics-document or graphics-symbol role have an accessible text",
"help": "<svg> elements with an img role must have an alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/svg-img-alt?application=axeAPI",
"nodes": []
},
{
"id": "td-headers-attr",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that each cell in a table that uses the headers attribute refers only to other cells in that table",
"help": "Table cells that use the headers attribute must only refer to cells in the same table",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/td-headers-attr?application=axeAPI",
"nodes": []
},
{
"id": "th-has-data-cells",
"impact": null,
"tags": [
"cat.tables",
"wcag2a",
"wcag131",
"section508",
"section508.22.g",
"TTv5",
"TT14.b",
"EN-301-549",
"EN-9.1.3.1"
],
"description": "Ensure that <th> elements and elements with role=columnheader/rowheader have data cells they describe",
"help": "Table headers in a data table must refer to data cells",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/th-has-data-cells?application=axeAPI",
"nodes": []
},
{
"id": "valid-lang",
"impact": null,
"tags": [
"cat.language",
"wcag2aa",
"wcag312",
"TTv5",
"TT11.b",
"EN-301-549",
"EN-9.3.1.2",
"ACT"
],
"description": "Ensure lang attributes have valid values",
"help": "lang attribute must have a valid value",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/valid-lang?application=axeAPI",
"nodes": []
},
{
"id": "video-caption",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag122",
"section508",
"section508.22.a",
"TTv5",
"TT17.a",
"EN-301-549",
"EN-9.1.2.2"
],
"description": "Ensure <video> elements have captions",
"help": "<video> elements must have captions",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/video-caption?application=axeAPI",
"nodes": []
},
{
"id": "no-autoplay-audio",
"impact": null,
"tags": [
"cat.time-and-media",
"wcag2a",
"wcag142",
"TTv5",
"TT2.a",
"EN-301-549",
"EN-9.1.4.2",
"ACT"
],
"description": "Ensure <video> or <audio> elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio",
"help": "<video> or <audio> elements must not play automatically",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/no-autoplay-audio?application=axeAPI",
"nodes": []
}
],
"passes": [
{
"id": "aria-hidden-body",
"impact": null,
"tags": [
"cat.aria",
"wcag2a",
"wcag131",
"wcag412",
"EN-301-549",
"EN-9.1.3.1",
"EN-9.4.1.2"
],
"description": "Ensure aria-hidden=\"true\" is not present on the document body.",
"help": "aria-hidden=\"true\" must not be present on the document body",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-body?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "aria-hidden-body",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "No aria-hidden attribute is present on document body"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<body class=\"bg-slate-950 text-slate-200\">",
"target": [
"body"
]
}
]
},
{
"id": "avoid-inline-spacing",
"impact": null,
"tags": [
"cat.structure",
"wcag21aa",
"wcag1412",
"EN-301-549",
"EN-9.1.4.12",
"ACT"
],
"description": "Ensure that text spacing set through style attributes can be adjusted with custom stylesheets",
"help": "Inline text spacing must be adjustable with custom stylesheets",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/avoid-inline-spacing?application=axeAPI",
"nodes": [
{
"any": [],
"all": [
{
"id": "important-letter-spacing",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Letter-spacing in the style attribute is not set to !important, or meets the minimum"
},
{
"id": "important-word-spacing",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "word-spacing in the style attribute is not set to !important, or meets the minimum"
},
{
"id": "important-line-height",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "line-height in the style attribute is not set to !important, or meets the minimum"
}
],
"none": [],
"impact": null,
"html": "<html lang=\"en\" style=\"--accent: #f97316;\">",
"target": [
"html"
]
}
]
},
{
"id": "button-name",
"impact": null,
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure buttons have discernible text",
"help": "Buttons must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/button-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "button-has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has inner text that is visible to screen readers"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<button onclick=\"viewVehicle(this)\" class=\"text-xs font-semibold px-3 py-1 bg-slate-800 hover:bg-orange-500 hover:text-white transition-colors rounded-xl mt-1\">View Details</button>",
"target": [
".car-card.overflow-hidden.bg-slate-900:nth-child(1) > .p-5 > .items-end.mt-4.justify-between > .text-right > .hover\\:bg-orange-500.mt-1[onclick=\"viewVehicle(this)\"]"
]
}
]
},
{
"id": "bypass",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag241",
"section508",
"section508.22.o",
"TTv5",
"TT9.a",
"EN-301-549",
"EN-9.2.4.1"
],
"description": "Ensure each page has at least one mechanism for a user to bypass navigation and jump straight to the content",
"help": "Page must have means to bypass repeated blocks",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/bypass?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "internal-link-present",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Valid skip link found"
},
{
"id": "header-present",
"data": null,
"relatedNodes": [
{
"html": "<h1 class=\"text-6xl md:text-7xl leading-[1.05] font-bold tracking-tighter heading-font\">\n Precision.<br>\n Performance.<br>\n <span class=\"text-orange-400\">Perspective.</span>\n </h1>",
"target": [
"h1"
]
},
{
"html": "<h2 class=\"section-header mt-3 tracking-tight\">Latest News & Insights</h2>",
"target": [
".section-header.mt-3"
]
},
{
"html": "<h3 class=\"font-bold text-xl leading-tight mb-3 group-hover:text-orange-400 transition-colors\">EV Sales Surge 42% as Battery Costs Drop Below $80/kWh</h3>",
"target": [
".news-card.group.border-slate-800:nth-child(1) > .p-6 > h3"
]
},
{
"html": "<h3 class=\"font-bold text-xl leading-tight mb-3 group-hover:text-orange-400 transition-colors\">Manual Transmissions Make a Comeback in 2025 Sports Cars</h3>",
"target": [
".news-card.group.border-slate-800:nth-child(2) > .p-6 > h3"
]
},
{
"html": "<h3 class=\"font-bold text-xl leading-tight mb-3 group-hover:text-orange-400 transition-colors\">Level 3 Autonomous Driving Approved in 14 New States</h3>",
"target": [
".news-card.group.border-slate-800:nth-child(3) > .p-6 > h3"
]
},
{
"html": "<h2 class=\"section-header tracking-tight\">Featured Vehicle Reviews</h2>",
"target": [
"#reviews > .mb-8.items-end.justify-between > div > .section-header"
]
},
{
"html": "<h4 class=\"font-bold text-xl\">2025 Porsche 911 GT3</h4>",
"target": [
".car-card.overflow-hidden.bg-slate-800:nth-child(1) > .p-6 > .items-baseline.justify-between.flex > div > h4"
]
},
{
"html": "<h4 class=\"font-bold text-xl\">2025 Rivian R1T</h4>",
"target": [
".car-card.overflow-hidden.bg-slate-800:nth-child(2) > .p-6 > .items-baseline.justify-between.flex > div > h4"
]
},
{
"html": "<h4 class=\"font-bold text-xl\">2025 Mercedes-Benz E-Class</h4>",
"target": [
".car-card.overflow-hidden.bg-slate-800:nth-child(3) > .p-6 > .items-baseline.justify-between.flex > div > h4"
]
},
{
"html": "<h2 class=\"section-header tracking-tight\">Premium Inventory</h2>",
"target": [
".md\\:items-end > div:nth-child(1) > .section-header"
]
},
{
"html": "<h2 class=\"text-4xl font-bold tracking-tight mt-3\">Payment Estimator</h2>",
"target": [
".text-4xl.mt-3"
]
},
{
"html": "<h2 class=\"section-header tracking-tight\">What Our Customers Say</h2>",
"target": [
"#testimonials > .mb-8.items-end.justify-between > div:nth-child(1) > .section-header"
]
},
{
"html": "<h2 class=\"section-header tracking-tight\">Parts & Service</h2>",
"target": [
".mb-7 > div > .section-header"
]
},
{
"html": "<h2 class=\"text-4xl font-bold tracking-tight\">Ready to get started?</h2>",
"target": [
".text-center.mb-8 > .text-4xl"
]
}
],
"impact": "serious",
"message": "Page has a heading"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\" style=\"--accent: #f97316;\">",
"target": [
"html"
]
}
]
},
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#94a3b8",
"bgColor": "#0f172a",
"contrastRatio": 6.96,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has sufficient color contrast of 6.96"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<span class=\"text-xs font-medium\">Detroit, MI \u2022 24/7 Roadside Assistance</span>",
"target": [
".gap-x-2.items-center.flex > .font-medium.text-xs"
]
}
]
},
{
"id": "document-title",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag242",
"TTv5",
"TT12.a",
"EN-301-549",
"EN-9.2.4.2",
"ACT"
],
"description": "Ensure each HTML document contains a non-empty <title> element",
"help": "Documents must have <title> element to aid in navigation",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/document-title?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "doc-has-title",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Document has a non-empty <title> element"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\" style=\"--accent: #f97316;\">",
"target": [
"html"
]
}
]
},
{
"id": "form-field-multiple-labels",
"impact": null,
"tags": [
"cat.forms",
"wcag2a",
"wcag332",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.3.3.2"
],
"description": "Ensure form field does not have multiple label elements",
"help": "Form field must not have multiple label elements",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/form-field-multiple-labels?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "multiple-label",
"data": null,
"relatedNodes": [],
"impact": "moderate",
"message": "Form field does not have multiple label elements"
}
],
"impact": null,
"html": "<input type=\"text\" placeholder=\"Search cars, reviews, or parts...\" class=\"bg-transparent border-none focus:outline-none text-sm flex-1 placeholder:text-slate-400\">",
"target": [
".bg-transparent"
]
}
]
},
{
"id": "html-has-lang",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"TTv5",
"TT11.a",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure every HTML document has a lang attribute",
"help": "<html> element must have a lang attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-has-lang?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-lang",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "The <html> element has a lang attribute"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<html lang=\"en\" style=\"--accent: #f97316;\">",
"target": [
"html"
]
}
]
},
{
"id": "html-lang-valid",
"impact": null,
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"TTv5",
"TT11.a",
"EN-301-549",
"EN-9.3.1.1",
"ACT"
],
"description": "Ensure the lang attribute of the <html> element has a valid value",
"help": "<html> element must have a valid value for the lang attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-lang-valid?application=axeAPI",
"nodes": [
{
"any": [],
"all": [],
"none": [
{
"id": "valid-lang",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Value of lang attribute is included in the list of valid languages"
}
],
"impact": null,
"html": "<html lang=\"en\" style=\"--accent: #f97316;\">",
"target": [
"html"
]
}
]
},
{
"id": "image-alt",
"impact": null,
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a",
"TTv5",
"TT7.a",
"TT7.b",
"EN-301-549",
"EN-9.1.1.1",
"ACT"
],
"description": "Ensure <img> elements have alternative text or a role of none or presentation",
"help": "Images must have alternative text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/image-alt?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-alt",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has an alt attribute"
}
],
"all": [],
"none": [
{
"id": "alt-space-value",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has a valid alt attribute value"
}
],
"impact": null,
"html": "<img src=\"https://picsum.photos/id/160/1920/1080\" alt=\"Premium performance car on open highway at sunset\" class=\"w-full h-full object-cover\">",
"target": [
".inset-0.absolute > .h-full.object-cover"
]
}
]
},
{
"id": "label",
"impact": "critical",
"tags": [
"cat.forms",
"wcag2a",
"wcag412",
"section508",
"section508.22.n",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every form element has a label",
"help": "Form elements must have labels",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/label?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "non-empty-placeholder",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element has a placeholder attribute"
}
],
"all": [],
"none": [
{
"id": "hidden-explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Form element has a visible explicit <label>"
}
],
"impact": null,
"html": "<input type=\"text\" placeholder=\"Search cars, reviews, or parts...\" class=\"bg-transparent border-none focus:outline-none text-sm flex-1 placeholder:text-slate-400\">",
"target": [
".bg-transparent"
]
}
]
},
{
"id": "link-name",
"impact": "serious",
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag244",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.2.4.4",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure links have discernible text",
"help": "Links must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element has text that is visible to screen readers"
}
],
"all": [],
"none": [
{
"id": "focusable-no-name",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element is not in tab order or has accessible text"
}
],
"impact": null,
"html": "<a href=\"#\" class=\"font-medium text-orange-400 hover:text-orange-300 transition-colors text-xs flex items-center gap-x-1\">\n <span>Dealer Login</span>\n </a>",
"target": [
".gap-x-1"
]
}
]
},
{
"id": "meta-viewport",
"impact": null,
"tags": [
"cat.sensory-and-visual-cues",
"wcag2aa",
"wcag144",
"EN-301-549",
"EN-9.1.4.4",
"ACT"
],
"description": "Ensure <meta name=\"viewport\"> does not disable text scaling and zooming",
"help": "Zooming and scaling must not be disabled",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-viewport?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "meta-viewport",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "<meta> tag does not disable zooming on mobile devices"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
"target": [
"meta[name=\"viewport\"]"
]
}
]
},
{
"id": "nested-interactive",
"impact": null,
"tags": [
"cat.keyboard",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2"
],
"description": "Ensure interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies",
"help": "Interactive controls must not be nested",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/nested-interactive?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "no-focusable-content",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element does not have focusable descendants"
}
],
"all": [],
"none": [],
"impact": null,
"html": "<img src=\"https://picsum.photos/id/160/1920/1080\" alt=\"Premium performance car on open highway at sunset\" class=\"w-full h-full object-cover\">",
"target": [
".inset-0.absolute > .h-full.object-cover"
]
}
]
},
{
"id": "target-size",
"impact": "serious",
"tags": [
"cat.sensory-and-visual-cues",
"wcag22aa",
"wcag258"
],
"description": "Ensure touch targets have sufficient size and space",
"help": "All touch targets must be 24px large, or leave sufficient space",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/target-size?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "target-offset",
"data": {
"closestOffset": 24,
"minOffset": 24
},
"relatedNodes": [],
"impact": "serious",
"message": "Target has sufficient space from its closest neighbors. Safe clickable space has a diameter of 24px which is at least 24px."
}
],
"all": [],
"none": [],
"impact": null,
"html": "<a href=\"#\" class=\"font-medium text-orange-400 hover:text-orange-300 transition-colors text-xs flex items-center gap-x-1\">\n <span>Dealer Login</span>\n </a>",
"target": [
".gap-x-1"
]
}
]
}
],
"incomplete": [
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": null,
"bgColor": null,
"contrastRatio": 0,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": "bgGradient",
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<div class=\"inline-flex items-center gap-x-2 px-3 py-1.5 rounded-2xl bg-white/10 backdrop-blur-md border border-white/20 mb-6\">",
"target": [
".py-1\\.5"
]
},
{
"html": "<div class=\"absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-slate-950/60\"></div>",
"target": [
".bg-gradient-to-b"
]
}
],
"impact": "serious",
"message": "Element's background color could not be determined due to a background gradient"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span class=\"text-xs font-semibold tracking-widest\">2025 NORTH AMERICAN CAR OF THE YEAR FINALIST</span>",
"target": [
".tracking-widest"
],
"failureSummary": "Fix any of the following:\n Element's background color could not be determined due to a background gradient"
}
]
}
],
"violations": [
{
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143",
"TTv5",
"TT13.c",
"EN-301-549",
"EN-9.1.4.3",
"ACT"
],
"description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
"help": "Elements must meet minimum color contrast ratio thresholds",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#f97316",
"contrastRatio": 2.8,
"fontSize": "10.5pt (14px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#inventory\" class=\"flex items-center px-8 py-4 bg-orange-500 hover:bg-orange-600 transition-all font-semibold rounded-3xl text-white text-sm tracking-wide\">\n <span>BROWSE INVENTORY</span>\n </a>",
"target": [
".transition-all"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.8 (foreground color: #ffffff, background color: #f97316, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<span>BROWSE INVENTORY</span>",
"target": [
".transition-all > span"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.8 (foreground color: #ffffff, background color: #f97316, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#f97316",
"contrastRatio": 2.8,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#\" class=\"text-sm px-4 py-2 rounded-2xl bg-orange-500 hover:bg-orange-600 text-white text-xs font-semibold flex items-center justify-center\">Read Review</a>",
"target": [
".car-card.overflow-hidden.bg-slate-800:nth-child(1) > .p-6 > .mt-5.justify-between.items-center > .hover\\:bg-orange-600.py-2.bg-orange-500"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.8 (foreground color: #ffffff, background color: #f97316, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\" class=\"text-sm px-4 py-2 rounded-2xl bg-orange-500 hover:bg-orange-600 text-white text-xs font-semibold flex items-center justify-center\">Read Review</a>",
"target": [
".car-card.overflow-hidden.bg-slate-800:nth-child(1) > .p-6 > .mt-5.justify-between.items-center > .hover\\:bg-orange-600.py-2.bg-orange-500"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.8 (foreground color: #ffffff, background color: #f97316, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#f97316",
"contrastRatio": 2.8,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#\" class=\"text-sm px-4 py-2 rounded-2xl bg-orange-500 hover:bg-orange-600 text-white text-xs font-semibold flex items-center justify-center\">Read Review</a>",
"target": [
".car-card.overflow-hidden.bg-slate-800:nth-child(2) > .p-6 > .mt-5.justify-between.items-center > .hover\\:bg-orange-600.py-2.bg-orange-500"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.8 (foreground color: #ffffff, background color: #f97316, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\" class=\"text-sm px-4 py-2 rounded-2xl bg-orange-500 hover:bg-orange-600 text-white text-xs font-semibold flex items-center justify-center\">Read Review</a>",
"target": [
".car-card.overflow-hidden.bg-slate-800:nth-child(2) > .p-6 > .mt-5.justify-between.items-center > .hover\\:bg-orange-600.py-2.bg-orange-500"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.8 (foreground color: #ffffff, background color: #f97316, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#f97316",
"contrastRatio": 2.8,
"fontSize": "9.0pt (12px)",
"fontWeight": "normal",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<a href=\"#\" class=\"text-sm px-4 py-2 rounded-2xl bg-orange-500 hover:bg-orange-600 text-white text-xs font-semibold flex items-center justify-center\">Read Review</a>",
"target": [
".car-card.overflow-hidden.bg-slate-800:nth-child(3) > .p-6 > .mt-5.justify-between.items-center > .hover\\:bg-orange-600.py-2.bg-orange-500"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.8 (foreground color: #ffffff, background color: #f97316, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"#\" class=\"text-sm px-4 py-2 rounded-2xl bg-orange-500 hover:bg-orange-600 text-white text-xs font-semibold flex items-center justify-center\">Read Review</a>",
"target": [
".car-card.overflow-hidden.bg-slate-800:nth-child(3) > .p-6 > .mt-5.justify-between.items-center > .hover\\:bg-orange-600.py-2.bg-orange-500"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.8 (foreground color: #ffffff, background color: #f97316, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#f97316",
"contrastRatio": 2.8,
"fontSize": "10.5pt (14px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<button onclick=\"calculatePayment()\" class=\"mt-5 w-full py-4 bg-orange-500 hover:bg-orange-600 transition-colors text-white font-bold text-sm tracking-wider rounded-3xl\">\n CALCULATE MONTHLY PAYMENT\n </button>",
"target": [
"button[onclick=\"calculatePayment()\"]"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.8 (foreground color: #ffffff, background color: #f97316, font size: 10.5pt (14px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button onclick=\"calculatePayment()\" class=\"mt-5 w-full py-4 bg-orange-500 hover:bg-orange-600 transition-colors text-white font-bold text-sm tracking-wider rounded-3xl\">\n CALCULATE MONTHLY PAYMENT\n </button>",
"target": [
"button[onclick=\"calculatePayment()\"]"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.8 (foreground color: #ffffff, background color: #f97316, font size: 10.5pt (14px), font weight: bold). Expected contrast ratio of 4.5:1"
},
{
"any": [
{
"id": "color-contrast",
"data": {
"fgColor": "#ffffff",
"bgColor": "#f97316",
"contrastRatio": 2.8,
"fontSize": "10.5pt (14px)",
"fontWeight": "bold",
"messageKey": null,
"expectedContrastRatio": "4.5:1",
"shadowColor": null
},
"relatedNodes": [
{
"html": "<button type=\"submit\" class=\"flex-1 md:flex-none px-8 py-3.5 text-sm font-bold bg-orange-500 hover:bg-orange-600 transition-colors text-white rounded-3xl\">\n SEND MESSAGE\n </button>",
"target": [
".md\\:flex-none"
]
}
],
"impact": "serious",
"message": "Element has insufficient color contrast of 2.8 (foreground color: #ffffff, background color: #f97316, font size: 10.5pt (14px), font weight: bold). Expected contrast ratio of 4.5:1"
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<button type=\"submit\" class=\"flex-1 md:flex-none px-8 py-3.5 text-sm font-bold bg-orange-500 hover:bg-orange-600 transition-colors text-white rounded-3xl\">\n SEND MESSAGE\n </button>",
"target": [
".md\\:flex-none"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.8 (foreground color: #ffffff, background color: #f97316, font size: 10.5pt (14px), font weight: bold). Expected contrast ratio of 4.5:1"
}
]
},
{
"id": "label",
"impact": "critical",
"tags": [
"cat.forms",
"wcag2a",
"wcag412",
"section508",
"section508.22.n",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure every form element has a label",
"help": "Form elements must have labels",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/label?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "implicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an implicit (wrapped) <label>"
},
{
"id": "explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an explicit <label>"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
},
{
"id": "non-empty-title",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "critical",
"message": "Element has no title attribute"
},
{
"id": "non-empty-placeholder",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "critical",
"message": "Element has no placeholder attribute"
},
{
"id": "presentational-role",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
}
],
"all": [],
"none": [],
"impact": "critical",
"html": "<input type=\"number\" id=\"price\" value=\"68900\" class=\"bg-slate-900 border border-slate-600 text-white w-full pl-8 pr-4 py-3 text-lg font-semibold rounded-2xl focus:outline-none focus:border-orange-500\">",
"target": [
"#price"
],
"failureSummary": "Fix any of the following:\n Element does not have an implicit (wrapped) <label>\n Element does not have an explicit <label>\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute\n Element has no placeholder attribute\n Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
},
{
"any": [
{
"id": "implicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an implicit (wrapped) <label>"
},
{
"id": "explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an explicit <label>"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
},
{
"id": "non-empty-title",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "critical",
"message": "Element has no title attribute"
},
{
"id": "non-empty-placeholder",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "critical",
"message": "Element has no placeholder attribute"
},
{
"id": "presentational-role",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
}
],
"all": [],
"none": [],
"impact": "critical",
"html": "<input type=\"number\" id=\"down\" value=\"12000\" class=\"bg-slate-900 border border-slate-600 text-white w-full pl-8 pr-4 py-3 text-lg font-semibold rounded-2xl focus:outline-none focus:border-orange-500\">",
"target": [
"#down"
],
"failureSummary": "Fix any of the following:\n Element does not have an implicit (wrapped) <label>\n Element does not have an explicit <label>\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute\n Element has no placeholder attribute\n Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
},
{
"any": [
{
"id": "implicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an implicit (wrapped) <label>"
},
{
"id": "explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an explicit <label>"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
},
{
"id": "non-empty-title",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "critical",
"message": "Element has no title attribute"
},
{
"id": "non-empty-placeholder",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "critical",
"message": "Element has no placeholder attribute"
},
{
"id": "presentational-role",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
}
],
"all": [],
"none": [],
"impact": "critical",
"html": "<input type=\"number\" id=\"rate\" value=\"4.99\" step=\"0.01\" class=\"bg-slate-900 border border-slate-600 text-white w-full px-4 py-3 text-lg font-semibold rounded-2xl focus:outline-none focus:border-orange-500\">",
"target": [
"#rate"
],
"failureSummary": "Fix any of the following:\n Element does not have an implicit (wrapped) <label>\n Element does not have an explicit <label>\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute\n Element has no placeholder attribute\n Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
}
]
},
{
"id": "link-name",
"impact": "serious",
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag244",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.2.4.4",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure links have discernible text",
"help": "Links must have discernible text",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element does not have text that is visible to screen readers"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
},
{
"id": "non-empty-title",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has no title attribute"
}
],
"all": [],
"none": [
{
"id": "focusable-no-name",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element is in tab order and does not have accessible text"
}
],
"impact": "serious",
"html": "<a href=\"#\" class=\"text-slate-400 hover:text-white\"><i class=\"fab fa-instagram\"></i></a>",
"target": [
".hover\\:text-white.text-slate-400[href=\"#\"]:nth-child(1)"
],
"failureSummary": "Fix all of the following:\n Element is in tab order and does not have accessible text\n\nFix any of the following:\n Element does not have text that is visible to screen readers\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute"
},
{
"any": [
{
"id": "has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element does not have text that is visible to screen readers"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
},
{
"id": "non-empty-title",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has no title attribute"
}
],
"all": [],
"none": [
{
"id": "focusable-no-name",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element is in tab order and does not have accessible text"
}
],
"impact": "serious",
"html": "<a href=\"#\" class=\"text-slate-400 hover:text-white\"><i class=\"fab fa-twitter\"></i></a>",
"target": [
".hover\\:text-white.text-slate-400[href=\"#\"]:nth-child(2)"
],
"failureSummary": "Fix all of the following:\n Element is in tab order and does not have accessible text\n\nFix any of the following:\n Element does not have text that is visible to screen readers\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute"
},
{
"any": [
{
"id": "has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element does not have text that is visible to screen readers"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
},
{
"id": "non-empty-title",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has no title attribute"
}
],
"all": [],
"none": [
{
"id": "focusable-no-name",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element is in tab order and does not have accessible text"
}
],
"impact": "serious",
"html": "<a href=\"#\" class=\"text-slate-400 hover:text-white\"><i class=\"fab fa-linkedin-in\"></i></a>",
"target": [
".hover\\:text-white.text-slate-400[href=\"#\"]:nth-child(3)"
],
"failureSummary": "Fix all of the following:\n Element is in tab order and does not have accessible text\n\nFix any of the following:\n Element does not have text that is visible to screen readers\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute"
},
{
"any": [
{
"id": "has-visible-text",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element does not have text that is visible to screen readers"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
},
{
"id": "non-empty-title",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "serious",
"message": "Element has no title attribute"
}
],
"all": [],
"none": [
{
"id": "focusable-no-name",
"data": null,
"relatedNodes": [],
"impact": "serious",
"message": "Element is in tab order and does not have accessible text"
}
],
"impact": "serious",
"html": "<a href=\"#\" class=\"text-slate-400 hover:text-white\"><i class=\"fab fa-youtube\"></i></a>",
"target": [
".hover\\:text-white.text-slate-400[href=\"#\"]:nth-child(4)"
],
"failureSummary": "Fix all of the following:\n Element is in tab order and does not have accessible text\n\nFix any of the following:\n Element does not have text that is visible to screen readers\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute"
}
]
},
{
"id": "select-name",
"impact": "critical",
"tags": [
"cat.forms",
"wcag2a",
"wcag412",
"section508",
"section508.22.n",
"TTv5",
"TT5.c",
"EN-301-549",
"EN-9.4.1.2",
"ACT"
],
"description": "Ensure select element has an accessible name",
"help": "Select element must have an accessible name",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/select-name?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "implicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an implicit (wrapped) <label>"
},
{
"id": "explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an explicit <label>"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
},
{
"id": "non-empty-title",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "critical",
"message": "Element has no title attribute"
},
{
"id": "presentational-role",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
}
],
"all": [],
"none": [],
"impact": "critical",
"html": "<select id=\"term\" class=\"bg-slate-900 border border-slate-600 text-white w-full px-4 py-[14px] text-lg font-semibold rounded-2xl focus:outline-none focus:border-orange-500\">",
"target": [
"#term"
],
"failureSummary": "Fix any of the following:\n Element does not have an implicit (wrapped) <label>\n Element does not have an explicit <label>\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute\n Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
},
{
"any": [
{
"id": "implicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an implicit (wrapped) <label>"
},
{
"id": "explicit-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element does not have an explicit <label>"
},
{
"id": "aria-label",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-label attribute does not exist or is empty"
},
{
"id": "aria-labelledby",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
},
{
"id": "non-empty-title",
"data": {
"messageKey": "noAttr"
},
"relatedNodes": [],
"impact": "critical",
"message": "Element has no title attribute"
},
{
"id": "presentational-role",
"data": null,
"relatedNodes": [],
"impact": "critical",
"message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
}
],
"all": [],
"none": [],
"impact": "critical",
"html": "<select class=\"w-full bg-slate-800 border border-slate-700 px-4 py-3 text-sm rounded-2xl\" required=\"\">",
"target": [
".mt-5:nth-child(2) > select"
],
"failureSummary": "Fix any of the following:\n Element does not have an implicit (wrapped) <label>\n Element does not have an explicit <label>\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute\n Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
}
]
},
{
"id": "target-size",
"impact": "serious",
"tags": [
"cat.sensory-and-visual-cues",
"wcag22aa",
"wcag258"
],
"description": "Ensure touch targets have sufficient size and space",
"help": "All touch targets must be 24px large, or leave sufficient space",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.10/target-size?application=axeAPI",
"nodes": [
{
"any": [
{
"id": "target-size",
"data": {
"minSize": 24,
"width": 243.2,
"height": 20
},
"relatedNodes": [],
"impact": "serious",
"message": "Target has insufficient size (243.2px by 20px, should be at least 24px by 24px)"
},
{
"id": "target-offset",
"data": {
"closestOffset": 16,
"minOffset": 24
},
"relatedNodes": [
{
"html": "<a href=\"mailto:info@vanguardauto.com\" class=\"block\">info@vanguardauto.com</a>",
"target": [
"a[href=\"mailto:info@vanguardauto.com\"]"
]
}
],
"impact": "serious",
"message": "Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 16px instead of at least 24px."
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"tel:3135550192\" class=\"block\">(313) 555-0192</a>",
"target": [
"a[href=\"tel:3135550192\"]"
],
"failureSummary": "Fix any of the following:\n Target has insufficient size (243.2px by 20px, should be at least 24px by 24px)\n Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 16px instead of at least 24px."
},
{
"any": [
{
"id": "target-size",
"data": {
"minSize": 24,
"width": 243.2,
"height": 20
},
"relatedNodes": [],
"impact": "serious",
"message": "Target has insufficient size (243.2px by 20px, should be at least 24px by 24px)"
},
{
"id": "target-offset",
"data": {
"closestOffset": 16,
"minOffset": 24
},
"relatedNodes": [
{
"html": "<a href=\"tel:3135550192\" class=\"block\">(313) 555-0192</a>",
"target": [
"a[href=\"tel:3135550192\"]"
]
}
],
"impact": "serious",
"message": "Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 16px instead of at least 24px."
}
],
"all": [],
"none": [],
"impact": "serious",
"html": "<a href=\"mailto:info@vanguardauto.com\" class=\"block\">info@vanguardauto.com</a>",
"target": [
"a[href=\"mailto:info@vanguardauto.com\"]"
],
"failureSummary": "Fix any of the following:\n Target has insufficient size (243.2px by 20px, should be at least 24px by 24px)\n Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 16px instead of at least 24px."
}
]
}
],
"coverage": {
"contract": "main-document-vertical-scroll",
"complete": true,
"positions": [
{
"y": 0,
"height": 5019
},
{
"y": 576,
"height": 5019
},
{
"y": 1152,
"height": 5019
},
{
"y": 1728,
"height": 5019
},
{
"y": 2304,
"height": 5019
},
{
"y": 2880,
"height": 5019
},
{
"y": 3456,
"height": 5019
},
{
"y": 4032,
"height": 5019
},
{
"y": 4299,
"height": 5019
}
],
"scans": 10,
"max_states": 512,
"settle_ms": 5000,
"page_timeout_seconds": 150,
"layout_stability": "consecutive 100ms size samples within one CSS pixel",
"animation_settling": "finite animations present when scroll resources are ready finish or are cancelled",
"interactive_states": "not exercised",
"horizontal_scroll": "not exercised"
}
}System Prompt
You are a lead web developer at a top digital agency, tasked with creating a one-page website for a new client based on the given specifications, delivered as an HTML file. First non-whitespace char '<', last non-whitespace char '>'. Use the following services to generate placeholder images where needed:
- placehold.co (text): https://placehold.co/[{w}x{h}|{size}][/{bg-color}/{text-color}]?text={text}&font=[lato|lora|montserrat|noto sans|open sans|oswald|playfair display|poppins|pt sans|raleway|roboto|source sans|source sans pro]
- picsum.photos (photos): https://picsum.photos/[{w}/{h}|{size}]?[grayscale][&blur={1-10}]
- pravatar.cc (avatars): https://i.pravatar.cc/{size}?u={identifier}
Choose sizes appropriate to layout.
User Prompt
Create a **complete, polished, production-quality** primary web page for a new client in the "Automotive" sector.
Your goal is to generate the full HTML code for a page that is not just functional but also visually compelling, content-rich, and feels like a finished product ready for launch.
**Client & Category:**
- Industry: "Automotive"
- Description: Automotive news, car reviews, repair tips, and dealership resources.
**Your Creative Task:**
1. **Invent:** Create a unique, professional-sounding site name and a strong tagline fitting the "Automotive" category.
2. **Define Page:** Determine the most effective primary page type (e.g., homepage, service landing page, category portal) to showcase this fictional entity.
3. **Design:** Develop an opinionated, modern, and professional layout. Make distinct choices about structure and flow.
**Content & Structure Requirements (Deliver a COMPLETE page):**
- **Overall:** The final page must feel substantial and complete, with realistic amounts of text (multiple paragraphs per section where appropriate, avoid single sentences), well-integrated placeholder images, and logical flow. It should look like a real website a business would proudly use.
- **HEADER:** Include the invented site name, tagline, a logo placeholder image, and a primary navigation bar. Ensure the navigation has **at least 5-7 clearly defined, relevant links** including: "Contact", "Inventory", "Parts".
- **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
- Address key topics relevant to the "Automotive" category. Consider themes similar to: "Featured Vehicles", "Customer Stories", "Parts Department".
- **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "MSRP", "torque", "service interval".
- **Visuals:** Integrate relevant placeholder images logically within the content sections.
- **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Compare Models", "Apply Online", "Contact Dealer".
- **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "Automotive" sector. Ideas similar but not limited to: "payment estimator".
- **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "maintenance reminders", "customer reviews", "certified selection".
- **FOOTER:** Include a professional footer with invented contact details, copyright (current year), social media links, and standard links (Privacy, Terms).
- **MODERN WEB PATTERNS:** Include modern web patterns like testimonial cards, feature grids, or FAQ accordions where appropriate.