diff --git a/components/hero.tsx b/components/hero.tsx
new file mode 100644
index 0000000..9cc56a7
--- /dev/null
+++ b/components/hero.tsx
@@ -0,0 +1,113 @@
+"use client";
+
+import Balancer from "react-wrap-balancer";
+import { Button } from "./ui/button";
+import { HiArrowRight } from "react-icons/hi2";
+import { Badge } from "./badge";
+import { motion } from "framer-motion";
+
+import Image from "next/image";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+
+export const Hero = () => {
+  const router = useRouter();
+  return (
+    <div className="flex flex-col min-h-screen pt-20 md:pt-40 relative overflow-hidden">
+      <motion.div
+        initial={{
+          y: 40,
+          opacity: 0,
+        }}
+        animate={{
+          y: 0,
+          opacity: 1,
+        }}
+        transition={{
+          ease: "easeOut",
+          duration: 0.5,
+        }}
+        className="flex justify-center"
+      >
+        <Badge onClick={() => router.push("/blog/top-5-llm-of-all-time")}>
+          {/* removed badge */}
+        </Badge>
+      </motion.div>
+      <motion.h1
+        initial={{
+          y: 40,
+          opacity: 0,
+        }}
+        animate={{
+          y: 0,
+          opacity: 1,
+        }}
+        transition={{
+          ease: "easeOut",
+          duration: 0.5,
+        }}
+        className="text-2xl md:text-4xl lg:text-8xl font-semibold max-w-6xl mx-auto text-center mt-6 relative z-10 text-black dark:text-white"
+      >
+        <Balancer>We build your predictable outbound engine. You only show up to close.</Balancer>
+      </motion.h1>
+      <motion.p
+        initial={{
+          y: 40,
+          opacity: 0,
+        }}
+        animate={{
+          y: 0,
+          opacity: 1,
+        }}
+        transition={{
+          ease: "easeOut",
+          duration: 0.5,
+          delay: 0.2,
+        }}
+        className="text-center mt-6 text-base md:text-xl text-muted dark:text-muted-dark max-w-3xl mx-auto relative z-10"
+      >
+        <Balancer>
+          R3venue books qualified sales calls for B2B SaaS and service businesses using hyper-personalized cold email and Clay-style enrichment. No spray and pray. Just high-intent pipeline.
+        </Balancer>
+      </motion.p>
+      <motion.div
+        initial={{
+          y: 80,
+          opacity: 0,
+        }}
+        animate={{
+          y: 0,
+          opacity: 1,
+        }}
+        transition={{
+          ease: "easeOut",
+          duration: 0.5,
+          delay: 0.4,
+        }}
+        className="flex items-center gap-4 justify-center mt-6 relative z-10"
+      >
+        <Button className="bg-black dark:bg-white text-white dark:text-black hover:bg-gray-800 dark:hover:bg-gray-200">
+          Book a Call
+        </Button>
+        <Button
+          variant="ghost"
+          asChild
+          className="text-black dark:text-white hover:bg-gray-100 dark:hover:bg-gray-800"
+        >
+          <Link href="/contact" className="flex space-x-2 items-center group">
+            <span>Free ICP + Copy Audit</span>
+            <HiArrowRight className="text-muted group-hover:translate-x-1 stroke-[1px] h-3 w-3 transition-transform duration-200 dark:text-muted-dark" />
+          </Link>
+        </Button>
+      </motion.div>
+      <div className="p-4 border border-neutral-200 bg-neutral-100 dark:bg-neutral-800 dark:border-neutral-700 rounded-[32px] mt-20 relative">
+        <div className="absolute inset-x-0 bottom-0 h-40 w-full bg-gradient-to-b from-transparent via-white to-white dark:via-black/50 dark:to-black scale-[1.1] pointer-events-none" />
+        <div className="p-2 bg-white dark:bg-black dark:border-neutral-700 border border-neutral-200 rounded-[24px]">
+          <div className="mt-20 rounded-[20px] bg-gradient-to-br from-blue-600 to-purple-700 aspect-video w-full max-w-5xl mx-auto shadow-2xl flex items-center justify-center text-white text-2xl font-bold">
+          Predictable Pipeline Engine
+        </div>
+        </div>
+      </div>
+    </div>
+  );
+};