diff --git a/components/hero.tsx b/components/hero.tsx
new file mode 100644
index 0000000..18e0b16
--- /dev/null
+++ b/components/hero.tsx
@@ -0,0 +1,70 @@
+"use client";
+import { Container } from "@/components/container";
+import { Heading } from "@/components/heading";
+import { Subheading } from "@/components/subheading";
+import { Button } from "@/components/ui/button";
+import { motion } from "framer-motion";
+import Image from "next/image";
+
+export function Hero() {
+  return (
+    <section className="relative min-h-[90vh] flex items-center pt-20 pb-16 overflow-hidden">
+      {/* Background Image with Overlay */}
+      <div className="absolute inset-0 z-0">
+        <Image
+          src="https://images.unsplash.com/photo-1617372591383-ebc27a6d0866?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wyOTY1MDl8MHwxfHNlYXJjaHwxfHxtaWFtaSUyMGJlYWNoJTIwZml0bmVzcyUyMHNwb3J0cyUyMHRyYWluaW5nJTIwb3V0ZG9vciUyMGd5bXxlbnwwfDB8fHwxNzY4MzEyMjA3fDA&ixlib=rb-4.1.0&q=80&w=1080"
+          alt="Miami Beach Fitness"
+          fill
+          className="object-cover"
+          priority
+        />
+        <div className="absolute inset-0 bg-black/60" />
+      </div>
+
+      <Container className="relative z-10">
+        <div className="max-w-4xl mx-auto text-center flex flex-col items-center">
+          <motion.div
+            initial={{ opacity: 0, y: -20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6 }}
+            className="flex flex-col items-center"
+          >
+            <div className="inline-block px-4 py-1.5 mb-6 text-sm font-bold tracking-wider text-white uppercase bg-pink-600 rounded-full">
+              Miami's #1 Elite Coaching
+            </div>
+            <Heading as="h1" className="text-5xl md:text-8xl font-black tracking-tighter mb-6 text-white leading-none">
+              TRAIN IN <br />
+              <span className="text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-pink-500">
+                PARADISE
+              </span>
+            </Heading>
+          </motion.div>
+          
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6, delay: 0.2 }}
+            className="flex flex-col items-center"
+          >
+            <Subheading className="text-xl md:text-2xl text-neutral-200 mb-10 max-w-2xl font-medium text-center">
+              Experience world-class training under the Miami sun. From South Beach to Brickell, we bring elite performance to your doorstep.
+            </Subheading>
+          </motion.div>
+
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6, delay: 0.4 }}
+          >
+            <Button size="lg" className="text-lg px-12 py-8 bg-cyan-500 hover:bg-cyan-600 text-white border-none shadow-[0_0_30px_rgba(6,182,212,0.5)] transition-all hover:scale-105">
+              Book a Session
+            </Button>
+          </motion.div>
+        </div>
+      </Container>
+
+      {/* Decorative Elements */}
+      <div className="absolute bottom-0 right-0 w-1/3 h-1/2 bg-gradient-to-t from-pink-500/20 to-transparent blur-3xl -z-10" />
+    </section>
+  );
+}