98 lines
4.5 KiB
TypeScript
98 lines
4.5 KiB
TypeScript
"use client";
|
|
import { Container } from "@/components/container";
|
|
import { Heading } from "@/components/heading";
|
|
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 (
|
|
<BackgroundBeamsWithCollision className="h-auto py-20 md:py-32">
|
|
<Container>
|
|
<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>
|
|
</BackgroundBeamsWithCollision>
|
|
);
|
|
}
|