61 lines
2.9 KiB
TypeScript
61 lines
2.9 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";
|
|
|
|
export default function Home() {
|
|
return (
|
|
<main>
|
|
<Hero />
|
|
|
|
<section className="py-20 border-y border-neutral-100 dark:border-neutral-800">
|
|
<Container>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
|
|
<div className="relative">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1520340356584-f9917d1eea6f?q=80&w=2000&auto=format&fit=crop"
|
|
alt="Young entrepreneurs working"
|
|
className="rounded-3xl shadow-2xl"
|
|
/>
|
|
<div className="absolute -bottom-6 -right-6 bg-blue-600 text-white p-6 rounded-2xl shadow-xl hidden md:block">
|
|
<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">
|
|
We started Apex Young Detailers because we wanted to earn our own money and we love cars. We're 13 years old, but we take this seriously.
|
|
</Subheading>
|
|
<p className="text-neutral-600 dark:text-neutral-400 mb-6">
|
|
While other kids are playing video games, we're out here learning how to run a business and providing a service our neighbors can rely on. We treat every car like it's our own (or like it's the car we're saving up to buy!).
|
|
</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>
|
|
We bring our own 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>
|
|
);
|
|
}
|