diff --git a/src/app/page.tsx b/src/app/page.tsx
index b431f55..4a49873 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -28,13 +28,22 @@ export default function HomePage() {
             { name: "About", id: "about" },
           ]}
           button={{
-            text: "Buy Tickets",
-            href: "events",
-          }}
+            text: "Buy Tickets",            href: "events"}}
           animateOnLoad={true}
         />
       </div>
 
+      <div id="hero" data-section="hero" className="min-h-screen flex items-center justify-center bg-gradient-to-b from-[var(--primary-cta)] via-[var(--surface)] to-[var(--background)] text-[var(--foreground)] px-4">
+        <div className="mx-auto max-w-6xl text-center">
+          <h1 className="text-5xl md:text-7xl font-bold mb-6 tracking-tight">SUBMUNDO808</h1>
+          <p className="text-xl md:text-2xl mb-8 opacity-90 max-w-2xl mx-auto">Experience the authentic underground funk movement. Live DJ sets, exclusive events, and limited-edition merchandise.</p>
+          <div className="flex flex-col sm:flex-row gap-4 justify-center">
+            <button className="px-8 py-3 bg-[var(--primary-cta)] text-[var(--primary-cta-text)] font-semibold rounded-full hover:opacity-90 transition-opacity">Buy Tickets</button>
+            <button className="px-8 py-3 border-2 border-[var(--primary-cta)] text-[var(--primary-cta)] font-semibold rounded-full hover:bg-[var(--primary-cta)] hover:text-[var(--primary-cta-text)] transition-all">Explore Events</button>
+          </div>
+        </div>
+      </div>
+
       <div id="footer" data-section="footer" className="bg-[var(--primary-cta)] text-[var(--primary-cta-text)] py-16">
         <div className="mx-auto px-4 md:px-6 max-w-6xl">
           <div className="grid grid-cols-1 md:grid-cols-3 gap-12 mb-12">