kangwan/obdx-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

polish: Testimonials + FAQ sections, 4-card Hero features, OG tags

Browse Source 
New sections:
  • Testimonials (#reviews) — 3 persona quotes (DIY owner / shop owner /
    dad) with star rating, 3 social-proof stats (4.9/5, 12k+ reports,
    98% recommend), middle card on dark for rhythm
  • FAQ (#faq) — 8 questions answered, accordion with first item open,
    mailto helper link at the bottom

Hero features:
  • Expanded from 2 to 4 cards (col-span 6 → 3): Vehicle-Specific +
    Plain English + No App + Any Scanner. Covers more value props in
    the same vertical space.

Footer:
  • Killed the placeholder href="#" links. Product now points to real
    sections (added Sample report + FAQ); Company/Legal collapsed to
    real mailto links. No more dead anchors.

index.html:
  • Full OG tags + Twitter summary_large_image using scene-done 16x9
    as preview image
  • theme-color for mobile browser chrome
  • <link rel=preload> for the LCP mascot JPG

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
kang
2026-04-23 22:03:00 +08:00
parent c14d17f81f
commit 6fa79157dc
7 changed files with 402 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
src/components/Hero.tsx
View File

@@ -171,25 +171,24 @@ export default function Hero() {
))}
</motion.div>
{/* Feature preview bento row */}
{/* Feature preview bento row — 4 cards */}
<motion.div
id="features"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, delay: 0.3 }}
className="md:col-span-6 rounded-[28px] bg-[#FAFAF7] border border-black/5 p-6 md:p-7 min-h-[200px] flex flex-col justify-between scroll-mt-6"
className="md:col-span-3 rounded-[28px] bg-[#FAFAF7] border border-black/5 p-6 md:p-7 min-h-[200px] flex flex-col justify-between scroll-mt-6"
>
<div className="flex items-center gap-2 text-xs font-mono text-[#1A1A1A]/40 tracking-wider">
<div className="flex items-center gap-2 text-[10px] font-mono text-[#1A1A1A]/40 tracking-widest">
<Gauge size={13} />
VEHICLE-SPECIFIC
</div>
<div>
<h3 className="text-2xl md:text-3xl font-bold text-[#1A1A1A]">
Not generic code lookup.
<h3 className="text-xl md:text-2xl font-bold text-[#1A1A1A]">
Not generic lookup.
</h3>
<p className="text-sm text-[#1A1A1A]/60 mt-2 max-w-sm">
OBDX knows your exact model &amp; engine variant. P0301 on a Civic
≠ P0301 on an F-150.
<p className="text-xs md:text-sm text-[#1A1A1A]/60 mt-2">
P0301 on a Civic ≠ P0301 on an F-150. OBDX knows the difference.
</p>
</div>
</motion.div>
@@ -198,20 +197,58 @@ export default function Hero() {
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, delay: 0.35 }}
className="md:col-span-6 rounded-[28px] bg-[#2563EB] text-white p-6 md:p-7 min-h-[200px] flex flex-col justify-between relative overflow-hidden"
className="md:col-span-3 rounded-[28px] bg-[#2563EB] text-white p-6 md:p-7 min-h-[200px] flex flex-col justify-between relative overflow-hidden"
>
<div className="flex items-center gap-2 text-xs font-mono text-white/60 tracking-wider">
<div className="flex items-center gap-2 text-[10px] font-mono text-white/60 tracking-widest">
<Sparkles size={13} />
PLAIN ENGLISH
</div>
<div className="relative z-10">
<h3 className="text-2xl md:text-3xl font-bold">
No jargon.
<br />
Just what's wrong &amp; how much.
<h3 className="text-xl md:text-2xl font-bold">
No jargon. Just what's wrong.
</h3>
</div>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, delay: 0.4 }}
className="md:col-span-3 rounded-[28px] bg-[#1A1A1A] text-white p-6 md:p-7 min-h-[200px] flex flex-col justify-between relative overflow-hidden"
>
<div className="flex items-center gap-2 text-[10px] font-mono text-white/40 tracking-widest">
<Sparkles size={13} />
NO APP
</div>
<div>
<h3 className="text-xl md:text-2xl font-bold">
Scan QR. Open browser. Done.
</h3>
<p className="text-xs md:text-sm text-white/55 mt-2">
No install, no login, no Play Store review queue.
</p>
</div>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, delay: 0.45 }}
className="md:col-span-3 rounded-[28px] bg-[#FAFAF7] border border-black/5 p-6 md:p-7 min-h-[200px] flex flex-col justify-between relative overflow-hidden"
>
<div className="flex items-center gap-2 text-[10px] font-mono text-[#1A1A1A]/40 tracking-widest">
<Gauge size={13} />
ANY SCANNER
</div>
<div>
<h3 className="text-xl md:text-2xl font-bold text-[#1A1A1A]">
$10 Bluetooth. $15 Wi-Fi.
</h3>
<p className="text-xs md:text-sm text-[#1A1A1A]/60 mt-2">
Any OBD-II from the last 5 years. No locked brand required.
</p>
</div>
</motion.div>
</div>
</section>
);