diff --git a/components/hero.tsx b/components/hero.tsx
new file mode 100644
index 0000000..8442e34
--- /dev/null
+++ b/components/hero.tsx
@@ -0,0 +1,48 @@
+"use client";
+import { Container } from "@/components/container";
+import { Heading } from "@/components/heading";
+import { Subheading } from "@/components/subheading";
+import { Button } from "@/components/ui/button";
+import Image from "next/image";
+
+export function Hero() {
+  return (
+    <section className="relative w-full py-20 md:py-32 overflow-hidden bg-stone-50">
+      <Container className="relative z-10">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+          <div>
+            <Heading className="text-5xl md:text-7xl font-serif text-stone-900 leading-tight">
+              The Essence of <span className="text-amber-700">Colombian Coffee</span>
+            </Heading>
+            <Subheading className="mt-6 text-lg text-stone-600 max-w-xl">
+              Directly from the heart of Quindío. Experience 30 years of tradition, 
+              sustainability, and the finest hand-selected beans delivered to your doorstep in the USA.
+            </Subheading>
+            <div className="flex flex-wrap gap-4 mt-10">
+              <Button size="lg" className="bg-amber-800 hover:bg-amber-900 text-white px-8">
+                Shop Now
+              </Button>
+              <Button size="lg" variant="outline" className="border-stone-300 text-stone-700">
+                Our Heritage
+              </Button>
+            </div>
+          </div>
+          <div className="relative h-[400px] md:h-[500px] rounded-2xl overflow-hidden shadow-2xl">
+            <Image 
+              src="https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?q=80&w=2070&auto=format&fit=crop"
+              alt="Fresh Colombian Coffee"
+              fill
+              className="object-cover"
+              priority
+            />
+          </div>
+        </div>
+      </Container>
+      <div className="absolute top-0 right-0 -z-0 opacity-10">
+        <svg width="400" height="400" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+          <path fill="#78350f" d="M44.7,-76.4C58.1,-69.2,69.2,-58.1,76.4,-44.7C83.7,-31.3,87.1,-15.7,85.8,-0.7C84.5,14.2,78.6,28.5,69.8,40.8C61,53.1,49.3,63.5,35.8,70.8C22.3,78.1,7,82.3,-8.5,80.8C-24,79.3,-39.7,72.1,-52.8,61.4C-65.9,50.7,-76.4,36.5,-81.4,20.7C-86.4,4.9,-85.9,-12.5,-79.8,-27.9C-73.7,-43.3,-62,-56.7,-48.2,-64.1C-34.4,-71.5,-18.5,-72.9,-1.9,-69.6C14.7,-66.3,29.4,-58.3,44.7,-76.4Z" transform="translate(100 100)" />
+        </svg>
+      </div>
+    </section>
+  );
+}