Update app/page.tsx

app/page.tsx

@@ -0,0 +1,68 @@
+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>
+  );
+}