58 lines
2.7 KiB
TypeScript
58 lines
2.7 KiB
TypeScript
import { Container } from "@/components/container";
|
|
import { Heading } from "@/components/heading";
|
|
import { Subheading } from "@/components/subheading";
|
|
import { Brain, Zap, ShieldCheck, BarChart3 } from "lucide-react";
|
|
|
|
const aiFeatures = [
|
|
{
|
|
title: "AI Paint Analysis",
|
|
description: "We use computer vision to detect microscopic paint defects that the human eye misses, ensuring a 100% perfect correction.",
|
|
icon: Brain
|
|
},
|
|
{
|
|
title: "Smart Coating Tech",
|
|
description: "Our ceramic coatings utilize nano-AI particles that self-level and bond at a molecular level for extreme durability.",
|
|
icon: Zap
|
|
},
|
|
{
|
|
title: "Predictive Maintenance",
|
|
description: "Get automated alerts when your coating needs a top-up based on Cedar Rapids weather patterns and your driving habits.",
|
|
icon: BarChart3
|
|
},
|
|
{
|
|
title: "Precision Protection",
|
|
description: "AI-guided application ensures uniform thickness across every panel, maximizing protection and gloss.",
|
|
icon: ShieldCheck
|
|
}
|
|
];
|
|
|
|
export function AIFeatures() {
|
|
return (
|
|
<section className="py-24 bg-neutral-950 text-white overflow-hidden relative">
|
|
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-blue-500/10 via-transparent to-transparent opacity-50" />
|
|
<Container className="relative z-10">
|
|
<div className="text-center max-w-3xl mx-auto mb-16">
|
|
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-blue-500/20 border border-blue-500/30 text-blue-400 text-xs font-bold uppercase tracking-widest mb-4">
|
|
<Zap className="w-3 h-3" /> Next-Gen Detailing
|
|
</div>
|
|
<Heading className="text-white">The Future of Car Care</Heading>
|
|
<Subheading className="text-neutral-400 mt-4">
|
|
We've combined master craftsmanship with AI-driven technology to deliver results that were previously impossible.
|
|
</Subheading>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
|
{aiFeatures.map((feature, i) => (
|
|
<div key={i} className="p-6 rounded-2xl bg-neutral-900/50 border border-neutral-800 hover:border-blue-500/50 transition-colors group">
|
|
<div className="w-12 h-12 rounded-xl bg-blue-500/10 flex items-center justify-center mb-6 group-hover:bg-blue-500/20 transition-colors">
|
|
<feature.icon className="w-6 h-6 text-blue-500" />
|
|
</div>
|
|
<h3 className="text-xl font-bold mb-3">{feature.title}</h3>
|
|
<p className="text-neutral-400 text-sm leading-relaxed">{feature.description}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
);
|
|
}
|