From accb67e8ffc3913a87f051373f1a22f5afd9cdf6 Mon Sep 17 00:00:00 2001 From: kang Date: Thu, 23 Apr 2026 21:14:48 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20DTC=20carousel=20=E2=80=94=205=20real?= =?UTF-8?q?=20codes=20with=20AI=20diagnosis,=20auto/manual=20scroll?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit New DTCCarousel section (#cases) sits between Hero and Showcase, showing five common OBD-II codes with their OBDX output: P0420 · Catalytic Converter (Civic) — Plan within 2 weeks · $400–650 P0301 · Cyl 1 Misfire (Camry) — Easy fix · $80–200 P0171 · Lean Fuel (F-150) — Easy fix · $80–220 P0442 · EVAP Small Leak (Equinox) — Easy fix · $5–120 P0700 · Trans Fault (Grand Cherokee)— Urgent · $100 diag–$3,500 rebuild Each slide has an INPUT card (DTC + vehicle + mileage, big monospaced code colored by severity) and an OUTPUT card (plain-English diagnosis + severity pill + cost / drivability / first-move triplet). UX: 6s auto-advance with linear progress bar, pause on hover & touch, prev /next arrows, 5 jump-to dots, reduced-motion aware, aria-current on dots. Co-Authored-By: Claude Opus 4.7 (1M context) --- src/App.tsx | 2 + src/components/DTCCarousel.tsx | 311 +++++++++++++++++++++++++++++++++ tsconfig.tsbuildinfo | 2 +- 3 files changed, 314 insertions(+), 1 deletion(-) create mode 100644 src/components/DTCCarousel.tsx diff --git a/src/App.tsx b/src/App.tsx index 9895a51..2aa410b 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,4 +1,5 @@ import Hero from "@/components/Hero"; +import DTCCarousel from "@/components/DTCCarousel"; import Showcase from "@/components/Showcase"; import SampleReport from "@/components/SampleReport"; import Pricing from "@/components/Pricing"; @@ -9,6 +10,7 @@ export default function App() { return (
+ diff --git a/src/components/DTCCarousel.tsx b/src/components/DTCCarousel.tsx new file mode 100644 index 0000000..307c1a6 --- /dev/null +++ b/src/components/DTCCarousel.tsx @@ -0,0 +1,311 @@ +import { motion, AnimatePresence } from "framer-motion"; +import { + ChevronLeft, + ChevronRight, + Car, + Clock, + Sparkles, +} from "lucide-react"; +import { useState, useEffect, useRef } from "react"; + +const CASES = [ + { + dtc: "P0420", + title: "Catalytic Converter Efficiency", + vehicle: "2018 Honda Civic 1.5L Turbo", + mileage: "108,432 mi", + plainEnglish: + "Your catalytic converter is past its prime. Not urgent — you have 1–2 weeks — but past 80k miles on this engine it's almost expected.", + severity: "Plan within 2 weeks", + severityColor: "#F59E0B", + cost: "$400 – $650", + drivable: "Yes, safely 1–2 weeks", + action: "Independent mechanic is fine — no dealer needed.", + }, + { + dtc: "P0301", + title: "Cylinder 1 Misfire", + vehicle: "2020 Toyota Camry 2.5L", + mileage: "64,100 mi", + plainEnglish: + "One of your 4 cylinders is firing inconsistently. Usually a spark plug or ignition coil on cylinder 1. Cheap to rule out before assuming anything bigger.", + severity: "Easy fix", + severityColor: "#10B981", + cost: "$80 – $200", + drivable: "Drive gently until fixed", + action: "Start with a $30 plug + 30 min labor. If it comes back, swap the coil.", + }, + { + dtc: "P0171", + title: "Lean Fuel Condition (Bank 1)", + vehicle: "2015 Ford F-150 5.0L V8", + mileage: "108,204 mi", + plainEnglish: + "Engine is getting too much air or not enough fuel. Usually a vacuum leak, dirty MAF sensor, or weak fuel pump — in that order of likelihood.", + severity: "Easy fix", + severityColor: "#10B981", + cost: "$80 – $220", + drivable: "Yes, but expect worse MPG", + action: "Smoke test for a vacuum leak first (~$30 at any shop).", + }, + { + dtc: "P0442", + title: "EVAP System Small Leak", + vehicle: "2019 Chevy Equinox 1.5L", + mileage: "72,800 mi", + plainEnglish: + "A small leak somewhere in your fuel vapor recovery system. 9 times out of 10 it's the gas cap — check whether it clicks when you tighten it.", + severity: "Easy fix", + severityColor: "#10B981", + cost: "$5 – $120", + drivable: "Yes, completely safe", + action: "Swap the gas cap first ($5). If it returns, check the purge hose.", + }, + { + dtc: "P0700", + title: "Transmission Control System Fault", + vehicle: "2017 Jeep Grand Cherokee 3.6L", + mileage: "94,100 mi", + plainEnglish: + "Your transmission computer detected an internal fault. P0700 is only the trigger — the specific P07xx code it stored alongside is what you actually need to read next.", + severity: "Urgent — diagnose now", + severityColor: "#EF4444", + cost: "$100 diag – $3,500 rebuild", + drivable: "Drive to a shop, not daily", + action: "Don't DIY. Dealer or a transmission specialist. Fluid change first if never serviced.", + }, +]; + +const AUTO_INTERVAL_MS = 6000; + +export default function DTCCarousel() { + const [idx, setIdx] = useState(0); + const [paused, setPaused] = useState(false); + const [direction, setDirection] = useState(1); + const reducedMotion = useRef(false); + + useEffect(() => { + const mq = window.matchMedia("(prefers-reduced-motion: reduce)"); + reducedMotion.current = mq.matches; + }, []); + + useEffect(() => { + if (paused) return; + const timer = setInterval(() => { + setDirection(1); + setIdx((prev) => (prev + 1) % CASES.length); + }, AUTO_INTERVAL_MS); + return () => clearInterval(timer); + }, [paused]); + + const current = CASES[idx]; + const goTo = (next: number) => { + setDirection(next > idx ? 1 : -1); + setIdx((next + CASES.length) % CASES.length); + }; + const goPrev = () => goTo(idx - 1); + const goNext = () => goTo(idx + 1); + + return ( +
+ {/* Header */} + + + REAL DTC LOOKUPS + +

+ Five codes. +
+ + Five plain-English answers. + +

+

+ Type a DTC into OBDX. Here's exactly what you'd get back. +

+ + + {/* Carousel container */} + setPaused(true)} + onMouseLeave={() => setPaused(false)} + onTouchStart={() => setPaused(true)} + > + {/* Slide area */} +
+ + + {/* INPUT card */} +
+
+ INPUT +
+
+
+ {current.dtc} +
+
+ {current.title} +
+
+
+
+ {current.vehicle} +
+
+ {current.mileage} +
+
+
+ + {/* OUTPUT card */} +
+
+
+ AI DIAGNOSIS +
+ + + {current.severity} + +
+ +

+ “{current.plainEnglish}” +

+ +
+
+
+ Cost estimate +
+
+ {current.cost} +
+
+
+
+ Can you drive? +
+
+ {current.drivable} +
+
+
+
+ First move +
+
+ {current.action} +
+
+
+
+ + +
+ + {/* Progress bar (auto-advance indicator) */} +
+ +
+ + {/* Controls row */} +
+
+ {CASES.map((c, i) => ( +
+ +
+ + {String(idx + 1).padStart(2, "0")} + / + {String(CASES.length).padStart(2, "0")} + + + +
+
+ + {/* Status indicator */} +
+ + {paused + ? "Paused — move mouse out to resume" + : `Auto-advancing every ${AUTO_INTERVAL_MS / 1000}s · hover to pause`} +
+ +
+ ); +} diff --git a/tsconfig.tsbuildinfo b/tsconfig.tsbuildinfo index 9eabcf6..a2418ec 100644 --- a/tsconfig.tsbuildinfo +++ b/tsconfig.tsbuildinfo @@ -1 +1 @@ -{"root":["./src/app.tsx","./src/main.tsx","./src/components/comparison.tsx","./src/components/footer.tsx","./src/components/hero.tsx","./src/components/pricing.tsx","./src/components/samplereport.tsx","./src/components/showcase.tsx","./src/lib/constants.ts"],"version":"5.9.3"} \ No newline at end of file +{"root":["./src/app.tsx","./src/main.tsx","./src/components/comparison.tsx","./src/components/dtccarousel.tsx","./src/components/footer.tsx","./src/components/hero.tsx","./src/components/pricing.tsx","./src/components/samplereport.tsx","./src/components/showcase.tsx","./src/lib/constants.ts"],"version":"5.9.3"} \ No newline at end of file