diff --git a/components/hero.tsx b/components/hero.tsx
new file mode 100644
index 0000000..78a2abc
--- /dev/null
+++ b/components/hero.tsx
@@ -0,0 +1,86 @@
+"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 { ArrowRight, Sparkles } from "lucide-react";
+
+export function Hero() {
+  return (
+    <section className="relative pt-32 pb-20 md:pt-48 md:pb-32 overflow-hidden">
+      {/* Premium Background Elements */}
+      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full -z-10 overflow-hidden">
+        <div className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-blue-400/20 blur-[120px] rounded-full animate-pulse" />
+        <div className="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-purple-400/20 blur-[120px] rounded-full animate-pulse delay-700" />
+      </div>
+
+      <Container>
+        <div className="flex flex-col items-center text-center max-w-5xl mx-auto">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6 }}
+            className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-blue-50 border border-blue-100 text-blue-700 text-sm font-medium mb-8 shadow-sm"
+          >
+            <Sparkles className="w-4 h-4" />
+            <span>Expert Growth Strategy for B2B SaaS</span>
+          </motion.div>
+
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6, delay: 0.1 }}
+          >
+            <Heading as="h1" className="text-6xl md:text-8xl font-extrabold tracking-tight text-black leading-[1.1]">
+              Scale Your Revenue <br />
+              <span className="bg-clip-text text-transparent bg-gradient-to-r from-blue-600 via-indigo-600 to-purple-600">
+                Without the Guesswork
+              </span>
+            </Heading>
+          </motion.div>
+          
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6, delay: 0.2 }}
+          >
+            <Subheading className="mt-8 text-xl md:text-2xl text-neutral-600 max-w-3xl leading-relaxed">
+              I help founders build high-performance growth engines using data-driven strategies that actually move the needle.
+            </Subheading>
+          </motion.div>
+
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6, delay: 0.3 }}
+            className="mt-12 flex flex-col sm:flex-row gap-6"
+          >
+            <Button size="lg" className="bg-neutral-900 hover:bg-neutral-800 text-white px-10 h-14 text-lg rounded-full group transition-all hover:scale-105 shadow-xl" onClick={() => document.getElementById('book')?.scrollIntoView({ behavior: 'smooth' })}>
+              Book a Strategy Call
+              <ArrowRight className="ml-2 w-5 h-5 group-hover:translate-x-1 transition-transform" />
+            </Button>
+            <Button variant="outline" size="lg" className="px-10 h-14 text-lg rounded-full border-2 hover:bg-neutral-50 transition-all" onClick={() => document.getElementById('services')?.scrollIntoView({ behavior: 'smooth' })}>
+              Explore Services
+            </Button>
+          </motion.div>
+          
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 1, delay: 0.6 }}
+            className="mt-24 w-full"
+          >
+            <p className="text-sm font-bold uppercase tracking-[0.2em] text-neutral-400 mb-8">Trusted by Industry Leaders</p>
+            <div className="flex flex-wrap justify-center gap-12 md:gap-20 opacity-40 grayscale hover:grayscale-0 transition-all duration-500">
+              <span className="text-2xl font-black tracking-tighter">ACME CORP</span>
+              <span className="text-2xl font-black tracking-tighter">GLOBEX</span>
+              <span className="text-2xl font-black tracking-tighter">SOYLENT</span>
+              <span className="text-2xl font-black tracking-tighter">INITECH</span>
+            </div>
+          </motion.div>
+        </div>
+      </Container>
+    </section>
+  );
+}