From d34d79730bdd089648f32267fdbdd617516954df Mon Sep 17 00:00:00 2001
From: kleap-admin <admin@kleap.co>
Date: Fri, 16 Jan 2026 17:09:40 +0000
Subject: [PATCH] Update components/hero.tsx

---
 components/hero.tsx | 105 ++++++++++++++++++++++++++++++++++----------
 1 file changed, 82 insertions(+), 23 deletions(-)

diff --git a/components/hero.tsx b/components/hero.tsx
index 3d2a17e..ad4c191 100644
--- a/components/hero.tsx
+++ b/components/hero.tsx
@@ -5,34 +5,93 @@ import { Subheading } from "@/components/subheading";
 import { Button } from "@/components/ui/button";
 import Link from "next/link";
 import { Badge } from "@/components/badge";
+import { motion } from "framer-motion";
+import { BackgroundBeamsWithCollision } from "@/components/ui/background-beams-with-collision";
+import { CardBody, CardContainer, CardItem } from "@/components/ui/3d-card";
 
 export function Hero() {
   return (
-    <section className="relative pt-24 pb-20 overflow-hidden bg-white dark:bg-neutral-950">
+    <BackgroundBeamsWithCollision className="h-auto py-20 md:py-32">
       <Container>
-        <div className="max-w-3xl mx-auto text-center">
-          <Badge variant="outline" className="mb-6 border-blue-500 text-blue-600 dark:text-blue-400">
-            100% Real Human Effort • No AI, Just Hard Work
-          </Badge>
-          <Heading className="text-4xl md:text-6xl font-black tracking-tight">
-            Cedar Rapids' Most <span className="text-blue-600">Hardworking</span> 13-Year-Old Detailers
-          </Heading>
-          <Subheading className="mt-6 text-lg text-neutral-600 dark:text-neutral-400">
-            We're two 13-year-olds with a passion for cars and a serious work ethic. We don't use fancy AI—just high-quality soaps, real elbow grease, and a commitment to making your car look brand new.
-          </Subheading>
-          <div className="flex flex-col sm:flex-row justify-center gap-4 mt-10">
-            <Button size="lg" className="bg-blue-600 hover:bg-blue-700 text-white h-14 px-8 text-lg" asChild>
-              <Link href="/contact">Book a Detail</Link>
-            </Button>
-            <Button size="lg" variant="outline" className="h-14 px-8 text-lg" asChild>
-              <Link href="#services">See Our Work</Link>
-            </Button>
-          </div>
-          <p className="mt-6 text-sm text-neutral-500 italic">
-            "We're saving up for our first cars and college. Thanks for supporting local young entrepreneurs!"
-          </p>
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+          <motion.div 
+            initial={{ opacity: 0, x: -20 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ duration: 0.6 }}
+            className="text-left"
+          >
+            <Badge variant="outline" className="mb-6 border-blue-500 text-blue-600 dark:text-blue-400">
+              100% Real Human Effort • No AI, Just Hard Work
+            </Badge>
+            <Heading className="text-4xl md:text-6xl font-black tracking-tight">
+              Cedar Rapids' Most <span className="text-blue-600">Hardworking</span> 13-Year-Old Detailer
+            </Heading>
+            <Subheading className="mt-6 text-lg text-neutral-600 dark:text-neutral-400">
+              I'm a 13-year-old entrepreneur with a passion for cars and a serious work ethic. I've invested in professional-grade equipment to ensure your car gets a better-than-pro finish.
+            </Subheading>
+            <div className="flex flex-col sm:flex-row gap-4 mt-10">
+              <Button size="lg" className="bg-blue-600 hover:bg-blue-700 text-white h-14 px-8 text-lg" asChild>
+                <Link href="/contact">Book a Detail</Link>
+              </Button>
+              <Button size="lg" variant="outline" className="h-14 px-8 text-lg" asChild>
+                <Link href="#services">See Our Work</Link>
+              </Button>
+            </div>
+            <p className="mt-6 text-sm text-neutral-500 italic">
+              "I'm saving up for my first car and college. Thanks for supporting local young entrepreneurs!"
+            </p>
+          </motion.div>
+
+          <motion.div
+            initial={{ opacity: 0, scale: 0.9 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{ duration: 0.6, delay: 0.2 }}
+          >
+            <CardContainer className="inter-var">
+              <CardBody className="bg-gray-50 relative group/card dark:hover:shadow-2xl dark:hover:shadow-blue-500/[0.1] dark:bg-black dark:border-white/[0.2] border-black/[0.1] w-auto sm:w-[30rem] h-auto rounded-xl p-6 border">
+                <CardItem
+                  translateZ="50"
+                  className="text-xl font-bold text-neutral-600 dark:text-white"
+                >
+                  Professional Grade Equipment
+                </CardItem>
+                <CardItem
+                  as="p"
+                  translateZ="60"
+                  className="text-neutral-500 text-sm max-w-sm mt-2 dark:text-neutral-300"
+                >
+                  I use high-pressure washers and industrial vacuums for a spotless finish.
+                </CardItem>
+                <CardItem translateZ="100" className="w-full mt-4">
+                  <img
+                    src="https://images.unsplash.com/photo-1520340356584-f9917d1eea6f?q=80&w=2000&auto=format&fit=crop"
+                    height="1000"
+                    width="1000"
+                    className="h-60 w-full object-cover rounded-xl group-hover/card:shadow-xl"
+                    alt="Car detailing equipment"
+                  />
+                </CardItem>
+                <div className="flex justify-between items-center mt-20">
+                  <CardItem
+                    translateZ={20}
+                    className="px-4 py-2 rounded-xl text-xs font-normal dark:text-white"
+                  >
+                    Better than pro →
+                  </CardItem>
+                  <CardItem
+                    translateZ={20}
+                    as={Link}
+                    href="/contact"
+                    className="px-4 py-2 rounded-xl bg-blue-600 text-white text-xs font-bold"
+                  >
+                    Book Now
+                  </CardItem>
+                </div>
+              </CardBody>
+            </CardContainer>
+          </motion.div>
         </div>
       </Container>
-    </section>
+    </BackgroundBeamsWithCollision>
   );
 }