Update components/ai-features.tsx

2026-01-16 16:28:12 +00:00 · 2026-01-16 16:28:12 +00:00 · 62719cd198
parent 0a18d2a26a
commit 62719cd198
1 changed files with 57 additions and 0 deletions
--- a/components/ai-features.tsx
+++ b/components/ai-features.tsx
@ -0,0 +1,57 @@
+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>
+  );
+}