diff --git a/components/hero.tsx b/components/hero.tsx
new file mode 100644
index 0000000..003b5f0
--- /dev/null
+++ b/components/hero.tsx
@@ -0,0 +1,92 @@
+"use client";
+import { Container } from "@/components/container";
+import { Heading } from "@/components/heading";
+import { Subheading } from "@/components/subheading";
+import { Button } from "@/components/ui/button";
+import { Sparkles, Video, Zap } from "lucide-react";
+
+export function Hero() {
+  return (
+    <section className="relative py-20 md:py-32 overflow-hidden">
+      {/* Background gradient */}
+      <div className="absolute inset-0 bg-gradient-to-br from-purple-50 via-white to-blue-50 dark:from-purple-950/20 dark:via-neutral-950 dark:to-blue-950/20" />
+      
+      {/* Animated background elements */}
+      <div className="absolute top-20 left-10 w-72 h-72 bg-purple-300 dark:bg-purple-600 rounded-full mix-blend-multiply dark:mix-blend-soft-light filter blur-xl opacity-20 animate-blob" />
+      <div className="absolute top-40 right-10 w-72 h-72 bg-blue-300 dark:bg-blue-600 rounded-full mix-blend-multiply dark:mix-blend-soft-light filter blur-xl opacity-20 animate-blob animation-delay-2000" />
+      <div className="absolute -bottom-8 left-1/2 w-72 h-72 bg-pink-300 dark:bg-pink-600 rounded-full mix-blend-multiply dark:mix-blend-soft-light filter blur-xl opacity-20 animate-blob animation-delay-4000" />
+      
+      <Container className="relative z-10">
+        <div className="flex flex-col items-center text-center space-y-8">
+          {/* Badge */}
+          <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-purple-100 dark:bg-purple-900/30 border border-purple-200 dark:border-purple-800">
+            <Sparkles className="w-4 h-4 text-purple-600 dark:text-purple-400" />
+            <span className="text-sm font-medium text-purple-900 dark:text-purple-300">
+              AI-Powered Video Editing
+            </span>
+          </div>
+
+          {/* Main heading */}
+          <Heading className="max-w-4xl">
+            Turn Raw Clips Into{" "}
+            <span className="bg-gradient-to-r from-purple-600 to-blue-600 bg-clip-text text-transparent">
+              Viral Reels
+            </span>{" "}
+            in Minutes
+          </Heading>
+
+          {/* Subheading */}
+          <Subheading className="max-w-2xl">
+            Upload your video, describe your vision, and let AI handle the editing.
+            Fast cuts, music sync, text overlays, and professional transitions—all automated.
+          </Subheading>
+
+          {/* CTA buttons */}
+          <div className="flex flex-col sm:flex-row gap-4 mt-8">
+            <Button size="lg" className="bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700 text-white shadow-lg shadow-purple-500/30">
+              <Video className="w-5 h-5 mr-2" />
+              Start Editing Free
+            </Button>
+            <Button size="lg" variant="outline" className="border-2">
+              <Zap className="w-5 h-5 mr-2" />
+              See Examples
+            </Button>
+          </div>
+
+          {/* Stats */}
+          <div className="flex flex-wrap justify-center gap-8 mt-12 pt-8 border-t border-neutral-200 dark:border-neutral-800">
+            <div className="text-center">
+              <div className="text-3xl font-bold text-neutral-900 dark:text-white">10M+</div>
+              <div className="text-sm text-neutral-600 dark:text-neutral-400">Videos Edited</div>
+            </div>
+            <div className="text-center">
+              <div className="text-3xl font-bold text-neutral-900 dark:text-white">2.5x</div>
+              <div className="text-sm text-neutral-600 dark:text-neutral-400">Faster Editing</div>
+            </div>
+            <div className="text-center">
+              <div className="text-3xl font-bold text-neutral-900 dark:text-white">98%</div>
+              <div className="text-sm text-neutral-600 dark:text-neutral-400">Satisfaction Rate</div>
+            </div>
+          </div>
+        </div>
+      </Container>
+
+      <style jsx>{`
+        @keyframes blob {
+          0%, 100% { transform: translate(0, 0) scale(1); }
+          33% { transform: translate(30px, -50px) scale(1.1); }
+          66% { transform: translate(-20px, 20px) scale(0.9); }
+        }
+        .animate-blob {
+          animation: blob 7s infinite;
+        }
+        .animation-delay-2000 {
+          animation-delay: 2s;
+        }
+        .animation-delay-4000 {
+          animation-delay: 4s;
+        }
+      `}</style>
+    </section>
+  );
+}