70 lines
3.4 KiB
TypeScript
70 lines
3.4 KiB
TypeScript
import { Hero } from "@/components/hero";
|
|
import { Testimonials } from "@/components/testimonials";
|
|
import { Services } from "@/components/services";
|
|
import { Container } from "@/components/container";
|
|
import { Heading } from "@/components/heading";
|
|
import { Subheading } from "@/components/subheading";
|
|
import { Badge } from "@/components/badge";
|
|
import { Chatbot } from "@/components/chatbot";
|
|
import { CardBody, CardContainer, CardItem } from "@/components/ui/3d-card";
|
|
|
|
export default function Home() {
|
|
return (
|
|
<main>
|
|
<Hero />
|
|
<Chatbot />
|
|
|
|
<section className="py-20 border-y border-neutral-100 dark:border-neutral-800 overflow-hidden">
|
|
<Container>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
|
|
<div className="relative">
|
|
<CardContainer className="py-0">
|
|
<CardBody className="w-full h-auto">
|
|
<CardItem translateZ="100" className="w-full">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1520340356584-f9917d1eea6f?q=80&w=2000&auto=format&fit=crop"
|
|
alt="Young entrepreneur working"
|
|
className="rounded-3xl shadow-2xl w-full"
|
|
/>
|
|
</CardItem>
|
|
</CardBody>
|
|
</CardContainer>
|
|
<div className="absolute -bottom-6 -right-6 bg-blue-600 text-white p-6 rounded-2xl shadow-xl hidden md:block z-10">
|
|
<p className="text-2xl font-bold">13 Years Old</p>
|
|
<p className="text-sm opacity-90">And working hard!</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<Badge className="mb-4 bg-blue-100 text-blue-700 hover:bg-blue-100 border-none">Our Story</Badge>
|
|
<Heading className="text-3xl mb-6">Real Hustle, Real Results</Heading>
|
|
<Subheading className="text-lg mb-6">
|
|
I started Apex Young Detailers to build something of my own. I'm 13 years old and I've invested in professional-grade equipment—from high-pressure washers to industrial vacuums—to ensure your car gets a better-than-pro finish.
|
|
</Subheading>
|
|
<p className="text-neutral-600 dark:text-neutral-400 mb-6">
|
|
While other kids are playing video games, I'm out here learning how to run a business and providing a service my neighbors can rely on. I treat every car like it's my own.
|
|
</p>
|
|
<ul className="space-y-3 text-neutral-700 dark:text-neutral-300 font-medium">
|
|
<li className="flex items-center gap-2">
|
|
<div className="h-5 w-5 rounded-full bg-green-500 flex items-center justify-center text-white text-[10px]">✓</div>
|
|
Neighborhood Approved
|
|
</li>
|
|
<li className="flex items-center gap-2">
|
|
<div className="h-5 w-5 rounded-full bg-green-500 flex items-center justify-center text-white text-[10px]">✓</div>
|
|
I bring my own professional supplies
|
|
</li>
|
|
<li className="flex items-center gap-2">
|
|
<div className="h-5 w-5 rounded-full bg-green-500 flex items-center justify-center text-white text-[10px]">✓</div>
|
|
100% Satisfaction Guaranteed
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
|
|
<Services />
|
|
<Testimonials />
|
|
</main>
|
|
);
|
|
}
|