File size: 9,392 Bytes
81b4246 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CarDentIQ — AI Vehicle Damage Detection</title>
<meta name="description" content="Detect and classify vehicle damage in seconds with a fine-tuned YOLOv11 model — built for insurance claims and used-car inspections.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/landing.css">
</head>
<body>
<header class="navbar">
<div class="container navbar-inner">
<a href="index.html" class="brand">
<span class="brand-mark" aria-hidden="true">
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 12.5 4.6 8a2 2 0 0 1 1.9-1.4h11a2 2 0 0 1 1.9 1.4L21 12.5" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/>
<rect x="2.4" y="12.5" width="19.2" height="5.2" rx="1.6" stroke="currentColor" stroke-width="1.7"/>
<circle cx="6.6" cy="17.7" r="1.6" fill="currentColor"/>
<circle cx="17.4" cy="17.7" r="1.6" fill="currentColor"/>
</svg>
</span>
<span class="brand-name">CarDentIQ</span>
</a>
<nav class="nav-links" id="navLinks">
<a href="#how-it-works">How it works</a>
<a href="#damage-classes">Damage Classes</a>
<a href="https://github.com/parthmax2/car-damage-detection" target="_blank" rel="noopener">GitHub</a>
</nav>
<div class="navbar-actions">
<a href="workspace.html" class="btn-primary btn-sm">Launch App</a>
<button class="nav-toggle" id="navToggle" aria-label="Toggle navigation">☰</button>
</div>
</div>
</header>
<main>
<!-- Hero -->
<section class="hero">
<span class="glow-orb orb-1"></span>
<span class="glow-orb orb-2"></span>
<div class="container hero-grid">
<div class="hero-copy">
<span class="eyebrow"><span class="dot"></span> POWERED BY FINE-TUNED YOLOV11</span>
<h1 class="hero-title">Detect vehicle<br>damage <span class="gradient-text">in seconds,</span><br>not hours.</h1>
<p class="hero-subtitle">CarDentIQ localises and classifies eight types of vehicle damage in a single photo — built for insurance claims processing and used-car inspections, with confidence scores and exportable labels.</p>
<div class="hero-ctas">
<a href="workspace.html" class="btn-primary">Start Free Scan</a>
<a href="#how-it-works" class="btn-secondary">See how it works</a>
</div>
</div>
<div class="hero-visual glass-card reveal">
<div class="scan-frame">
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 12.5 4.6 8a2 2 0 0 1 1.9-1.4h11a2 2 0 0 1 1.9 1.4L21 12.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
<rect x="2.4" y="12.5" width="19.2" height="5.2" rx="1.6" stroke="currentColor" stroke-width="1.2"/>
<circle cx="6.6" cy="17.7" r="1.4" fill="currentColor"/>
<circle cx="17.4" cy="17.7" r="1.4" fill="currentColor"/>
</svg>
<div class="scan-line"></div>
<div class="scan-box box-1"><span class="scan-box-label">dent 0.91</span></div>
<div class="scan-box box-2"><span class="scan-box-label">paint scratch 0.87</span></div>
</div>
<div class="hero-stat-float"><span class="stat-dot"></span> 2 issues found · Minor severity</div>
</div>
</div>
</section>
<!-- Stats -->
<section class="container">
<div class="stats-strip reveal-group">
<div class="stat-card glass-card reveal">
<div class="stat-value mono"><span data-count-to="8">0</span></div>
<div class="stat-label">Damage classes detected</div>
</div>
<div class="stat-card glass-card reveal">
<div class="stat-value mono"><span data-count-to="77.6" data-count-suffix="%">0%</span></div>
<div class="stat-label">mAP@0.5 on held-out test set</div>
</div>
<div class="stat-card glass-card reveal">
<div class="stat-value mono"><100ms</div>
<div class="stat-label">Target inference latency</div>
</div>
<div class="stat-card glass-card reveal">
<div class="stat-value mono">YOLOv11</div>
<div class="stat-label">Fine-tuned detection backbone</div>
</div>
</div>
</section>
<!-- How it works -->
<section class="section" id="how-it-works">
<div class="container">
<div class="section-header reveal">
<span class="eyebrow">WORKFLOW</span>
<h2>From photo to report in three steps</h2>
<p>No manual measurement, no guesswork — upload a photo and get a structured damage report back immediately.</p>
</div>
<div class="steps-grid reveal-group">
<div class="step-card glass-card reveal">
<span class="step-index mono">STEP 01</span>
<div class="step-icon">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 15V4m0 0 4 4m-4-4-4 4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/><path d="M4 16v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
<h3>Upload a photo</h3>
<p>Drag and drop a vehicle image — JPG, PNG or WebP. Adjust detection sensitivity per damage class if you need finer control.</p>
</div>
<div class="step-card glass-card reveal">
<span class="step-index mono">STEP 02</span>
<div class="step-icon">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 3v3m0 12v3m9-9h-3M6 12H3m14.5-6.5-2.1 2.1M8.6 15.4l-2.1 2.1m0-11 2.1 2.1m8.8 8.8 2.1 2.1" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/><circle cx="12" cy="12" r="3.5" stroke="currentColor" stroke-width="1.8"/></svg>
</div>
<h3>AI analyzes</h3>
<p>A fine-tuned YOLOv11 model localises and classifies damage in a single forward pass, with test-time augmentation for subtle defects.</p>
</div>
<div class="step-card glass-card reveal">
<span class="step-index mono">STEP 03</span>
<div class="step-icon">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 3h9l5 5v13a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="M9 13h6M9 17h6M9 9h2" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
</div>
<h3>Get instant report</h3>
<p>Review a severity score, per-class findings, and the annotated image — then export CSV or YOLO-format labels.</p>
</div>
</div>
</div>
</section>
<!-- Damage classes -->
<section class="section" id="damage-classes">
<div class="container">
<div class="section-header reveal">
<span class="eyebrow">DETECTION COVERAGE</span>
<h2>Eight damage classes, one pass</h2>
<p>Trained on ~4,900 curated images across three sources, with a dedicated no-damage class to anchor true negatives.</p>
</div>
<div class="classes-grid reveal-group" id="classesGrid">
<!-- populated by landing.js from /api/classes, with static fallback -->
</div>
</div>
</section>
<!-- CTA banner -->
<section class="container">
<div class="cta-banner glass-card reveal">
<span class="glow-orb"></span>
<h2>Ready to see it in action?</h2>
<p>Upload a vehicle photo and get a full damage report in seconds — no signup required.</p>
<a href="workspace.html" class="btn-primary">Start Free Scan →</a>
</div>
</section>
</main>
<footer class="footer">
<div class="container footer-inner">
<div class="footer-brand">
<span class="brand-mark" aria-hidden="true" style="width:26px;height:26px;">
<svg viewBox="0 0 24 24" width="14" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="2.4" y="12.5" width="19.2" height="5.2" rx="1.6" stroke="currentColor" stroke-width="1.8"/></svg>
</span>
CarDentIQ · Built by Saksham Pathak
</div>
<div class="footer-links">
<a href="https://github.com/parthmax2/car-damage-detection" target="_blank" rel="noopener">GitHub</a>
<a href="workspace.html">Launch App</a>
</div>
</div>
</footer>
<script src="js/ui.js"></script>
<script src="js/landing.js"></script>
</body>
</html>
|