69 lines
2.8 KiB
TypeScript
69 lines
2.8 KiB
TypeScript
import { Hero } from "@/components/hero";
|
|
import { Features } from "@/components/features";
|
|
import { Footer } from "@/components/footer";
|
|
import { MiamiGallery } from "@/components/miami-gallery";
|
|
import { Container } from "@/components/container";
|
|
import { Heading } from "@/components/heading";
|
|
import { KleapForm } from "@/components/kleap-form";
|
|
|
|
export default function Home() {
|
|
const contactFields = [
|
|
{ name: "name", label: "Full Name", type: "text" as const, required: true },
|
|
{ name: "email", label: "Email Address", type: "email" as const, required: true },
|
|
{ name: "phone", label: "Phone Number", type: "tel" as const, required: true },
|
|
{
|
|
name: "service",
|
|
label: "Interested Service",
|
|
type: "select" as const,
|
|
options: ["Personal Training", "Performance Coaching", "Group Sessions"],
|
|
required: true
|
|
},
|
|
{ name: "message", label: "Tell us about your goals", type: "textarea" as const, required: true },
|
|
];
|
|
|
|
return (
|
|
<main className="min-h-screen bg-white">
|
|
<Hero />
|
|
<Features />
|
|
<MiamiGallery />
|
|
|
|
<section className="py-24 relative overflow-hidden">
|
|
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full bg-cyan-50/50 -z-10" />
|
|
<Container>
|
|
<div className="max-w-5xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
|
|
<div>
|
|
<Heading className="text-4xl md:text-6xl font-black mb-6 leading-tight">
|
|
READY TO <br />
|
|
<span className="text-cyan-500">LEVEL UP?</span>
|
|
</Heading>
|
|
<p className="text-neutral-600 text-xl mb-8">
|
|
Don't wait for Monday. Start your transformation today in the heart of Miami.
|
|
</p>
|
|
<div className="space-y-4">
|
|
{["Custom Nutrition Plans", "Elite Performance Tracking", "Beach & Gym Access"].map((item, i) => (
|
|
<div key={i} className="flex items-center gap-3">
|
|
<div className="w-6 h-6 rounded-full bg-pink-500 flex items-center justify-center text-white text-xs">✓</div>
|
|
<span className="font-bold text-neutral-800">{item}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="bg-white p-10 rounded-[2rem] border shadow-2xl relative">
|
|
<div className="absolute -top-6 -right-6 w-24 h-24 bg-pink-500 rounded-full flex items-center justify-center text-white font-black text-center leading-tight -rotate-12 shadow-xl">
|
|
FREE <br /> TRIAL
|
|
</div>
|
|
<KleapForm
|
|
formId="contact-coaching"
|
|
title="Coaching Inquiry"
|
|
fields={contactFields}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
|
|
<Footer />
|
|
</main>
|
|
);
|
|
}
|