| <!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> |
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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"> |
| |
| </div> |
| </div> |
| </section> |
|
|
| |
| <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> |
|
|
