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