Update components/hero.tsx
This commit is contained in:
parent
0a2e560bc1
commit
d34d79730b
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue