diff --git a/app/globals.css b/app/globals.css
index 3e198dc..7c80661 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -10,58 +10,66 @@
       "Noto Color Emoji";
     --font-display: "Space Grotesk", var(--font-sans);
 
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
+    /* Tropical Cosmic Theme - Light Mode */
+    --background: 195 100% 99%; /* Very light cyan */
+    --foreground: 245 50% 15%; /* Deep cosmic blue */
     --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
+    --card-foreground: 245 50% 15%;
     --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
+    --popover-foreground: 245 50% 15%;
+    --primary: 280 85% 65%; /* Cosmic purple */
+    --primary-foreground: 0 0% 100%;
+    --secondary: 175 70% 65%; /* Tropical cyan */
+    --secondary-foreground: 245 50% 15%;
+    --muted: 195 30% 95%;
+    --muted-foreground: 245 25% 45%;
+    --accent: 30 90% 65%; /* Sunset orange */
+    --accent-foreground: 245 50% 15%;
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 210 40% 98%;
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
-    --radius: 0.5rem;
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
+    --border: 195 30% 90%;
+    --input: 195 30% 90%;
+    --ring: 280 85% 65%;
+    --radius: 0.75rem;
+    
+    /* Custom colors for tropical/cosmic theme */
+    --cosmic-purple: 280 85% 65%;
+    --deep-space: 245 50% 15%;
+    --tropical-cyan: 175 70% 65%;
+    --sunset-orange: 30 90% 65%;
+    --cloud-white: 0 0% 98%;
+    --freedom-gradient: linear-gradient(135deg, hsl(280 85% 65%), hsl(175 70% 65%), hsl(30 90% 65%));
   }
 
   .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
+    /* Tropical Cosmic Theme - Dark Mode */
+    --background: 245 50% 8%; /* Deep space background */
+    --foreground: 0 0% 98%;
+    --card: 245 40% 12%;
+    --card-foreground: 0 0% 98%;
+    --popover: 245 40% 12%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 280 85% 65%; /* Cosmic purple */
+    --primary-foreground: 0 0% 100%;
+    --secondary: 175 70% 65%; /* Tropical cyan */
+    --secondary-foreground: 245 50% 15%;
+    --muted: 245 30% 20%;
+    --muted-foreground: 195 20% 70%;
+    --accent: 30 90% 65%; /* Sunset orange */
+    --accent-foreground: 245 50% 15%;
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 210 40% 98%;
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 212.7 26.8% 83.9%;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
+    --border: 245 30% 25%;
+    --input: 245 30% 25%;
+    --ring: 280 85% 65%;
+    
+    /* Custom colors for tropical/cosmic theme */
+    --cosmic-purple: 280 85% 65%;
+    --deep-space: 245 50% 8%;
+    --tropical-cyan: 175 70% 65%;
+    --sunset-orange: 30 90% 65%;
+    --cloud-white: 0 0% 98%;
+    --freedom-gradient: linear-gradient(135deg, hsl(280 85% 65%), hsl(175 70% 65%), hsl(30 90% 65%));
   }
 }
 
@@ -149,3 +157,60 @@
     @apply text-sm leading-normal;
   }
 }
+
+@layer utilities {
+  /* Gradient text effect */
+  .gradient-text {
+    @apply bg-clip-text text-transparent;
+    background-image: var(--freedom-gradient);
+  }
+
+  /* Glow effect */
+  .glow {
+    text-shadow: 0 0 20px hsl(var(--primary) / 0.5), 
+                 0 0 40px hsl(var(--primary) / 0.3);
+  }
+
+  /* Cloud animation */
+  @keyframes float {
+    0%, 100% { transform: translateY(0px); }
+    50% { transform: translateY(-20px); }
+  }
+
+  .float-animation {
+    animation: float 6s ease-in-out infinite;
+  }
+
+  /* Pulse animation for cosmic elements */
+  @keyframes cosmic-pulse {
+    0%, 100% { opacity: 0.8; transform: scale(1); }
+    50% { opacity: 1; transform: scale(1.05); }
+  }
+
+  .cosmic-pulse {
+    animation: cosmic-pulse 4s ease-in-out infinite;
+  }
+
+  /* Gradient background animation */
+  @keyframes gradient-shift {
+    0% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
+  }
+
+  .animated-gradient {
+    background-size: 400% 400%;
+    animation: gradient-shift 15s ease infinite;
+  }
+
+  /* Glass effect */
+  .glass {
+    @apply backdrop-blur-md bg-white/10 border border-white/20;
+  }
+
+  /* Tropical blur effect */
+  .tropical-blur {
+    backdrop-filter: blur(10px) saturate(200%);
+    background-color: hsl(var(--background) / 0.8);
+  }
+}
diff --git a/app/page.tsx b/app/page.tsx
index bf904e1..ad3689e 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,5 +1,17 @@
+import AboutSection from "@/components/about/AboutSection";
+import ContactSection from "@/components/contact/ContactSection";
+import EventsSection from "@/components/events/EventsSection";
 import Hero from "@/components/hero";
+import MusicSection from "@/components/music/MusicSection";
 
 export default function Home() {
-  return <Hero />;
+  return (
+    <main className="min-h-screen bg-gradient-to-b from-background to-muted">
+      <Hero />
+      <MusicSection />
+      <EventsSection />
+      <AboutSection />
+      <ContactSection />
+    </main>
+  );
 }
diff --git a/components/about/AboutSection.tsx b/components/about/AboutSection.tsx
new file mode 100644
index 0000000..8cc081b
--- /dev/null
+++ b/components/about/AboutSection.tsx
@@ -0,0 +1,130 @@
+"use client";
+
+import { useState } from "react";
+
+export default function AboutSection() {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  return (
+    <section className="py-20 px-6 bg-gradient-to-b from-card to-muted">
+      <div className="max-w-4xl mx-auto">
+        <div className="text-center mb-16">
+          <h2 className="h2 gradient-text mb-4">About the Journey</h2>
+          <p className="text-xl text-muted-foreground">
+            Exploring the cosmic connection between tropical vibes and
+            progressive soundscapes
+          </p>
+        </div>
+
+        {/* Main About Content */}
+        <div className="glass rounded-3xl p-8 md:p-12 mb-12">
+          <div className="grid md:grid-cols-2 gap-12 items-center">
+            {/* Portrait/Image Placeholder */}
+            <div className="relative">
+              <div className="aspect-square rounded-2xl bg-gradient-to-br from-primary via-secondary to-accent p-1">
+                <div className="w-full h-full rounded-2xl bg-card flex items-center justify-center text-6xl">
+                  🎧
+                </div>
+              </div>
+              <div className="absolute -top-4 -right-4 text-4xl cosmic-pulse">
+                ✨
+              </div>
+              <div className="absolute -bottom-4 -left-4 text-3xl float-animation">
+                ☁️
+              </div>
+            </div>
+
+            {/* About Text */}
+            <div className="space-y-6">
+              <h3 className="h3 mb-4">MARADOCA</h3>
+              <div className="space-y-4 text-muted-foreground leading-relaxed">
+                <p>
+                  Born from a passion for cosmic exploration and tropical
+                  freedom, Maradoca creates soundscapes that transport listeners
+                  on journeys through both inner and outer space.
+                </p>
+                <p>
+                  Blending progressive house with deep techno elements, each set
+                  is crafted to tell a story - from the gentle waves of tropical
+                  shores to the infinite expanse of the cosmos.
+                </p>
+                {isExpanded && (
+                  <div className="space-y-4">
+                    <p>
+                      &quot;I like NUBES&quot; - this simple phrase captures the
+                      essence of the music: light, floating, ever-changing, yet
+                      always grounded in the freedom of expression.
+                    </p>
+                    <p>
+                      From intimate club settings to festival main stages,
+                      Maradoca creates experiences that unite dancers in a
+                      shared journey toward musical freedom.
+                    </p>
+                  </div>
+                )}
+              </div>
+              <button
+                onClick={() => setIsExpanded(!isExpanded)}
+                className="text-primary hover:text-accent transition-colors font-medium"
+              >
+                {isExpanded ? "Read less" : "Read more"} →
+              </button>
+            </div>
+          </div>
+        </div>
+
+        {/* Music Philosophy */}
+        <div className="grid md:grid-cols-3 gap-8 mb-12">
+          <div className="text-center p-8 glass rounded-2xl">
+            <div className="text-4xl mb-4">🌴</div>
+            <h4 className="font-semibold mb-3">Tropical</h4>
+            <p className="text-sm text-muted-foreground">
+              Warm, inviting sounds that capture the essence of freedom and
+              escape
+            </p>
+          </div>
+          <div className="text-center p-8 glass rounded-2xl">
+            <div className="text-4xl mb-4">🌌</div>
+            <h4 className="font-semibold mb-3">Cosmic</h4>
+            <p className="text-sm text-muted-foreground">
+              Deep, expansive journeys through space and consciousness
+            </p>
+          </div>
+          <div className="text-center p-8 glass rounded-2xl">
+            <div className="text-4xl mb-4">🎯</div>
+            <h4 className="font-semibold mb-3">Progressive</h4>
+            <p className="text-sm text-muted-foreground">
+              Evolving soundscapes that build emotion and tell stories
+            </p>
+          </div>
+        </div>
+
+        {/* Stats */}
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-8 glass rounded-2xl p-8">
+          <div className="text-center">
+            <div className="text-3xl font-bold text-primary mb-2">125</div>
+            <div className="text-sm text-muted-foreground">BPM Sweet Spot</div>
+          </div>
+          <div className="text-center">
+            <div className="text-3xl font-bold text-secondary mb-2">∞</div>
+            <div className="text-sm text-muted-foreground">
+              Creative Possibilities
+            </div>
+          </div>
+          <div className="text-center">
+            <div className="text-3xl font-bold text-accent mb-2">24/7</div>
+            <div className="text-sm text-muted-foreground">
+              Music in the Mind
+            </div>
+          </div>
+          <div className="text-center">
+            <div className="text-3xl font-bold gradient-text mb-2">1</div>
+            <div className="text-sm text-muted-foreground">
+              Journey to Freedom
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/components/contact/ContactSection.tsx b/components/contact/ContactSection.tsx
new file mode 100644
index 0000000..11f0992
--- /dev/null
+++ b/components/contact/ContactSection.tsx
@@ -0,0 +1,281 @@
+"use client";
+
+import { useState } from "react";
+
+export default function ContactSection() {
+  const [formData, setFormData] = useState({
+    name: "",
+    email: "",
+    type: "general",
+    message: "",
+  });
+
+  const [isSubmitted, setIsSubmitted] = useState(false);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    // This would normally send to an API endpoint
+    console.log("Form submitted:", formData);
+    setIsSubmitted(true);
+    setTimeout(() => setIsSubmitted(false), 3000);
+  };
+
+  const handleChange = (
+    e: React.ChangeEvent<
+      HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
+    >
+  ) => {
+    setFormData((prev) => ({
+      ...prev,
+      [e.target.name]: e.target.value,
+    }));
+  };
+
+  return (
+    <section className="py-20 px-6 bg-gradient-to-b from-muted to-background">
+      <div className="max-w-6xl mx-auto">
+        <div className="text-center mb-16">
+          <h2 className="h2 gradient-text mb-4">Connect & Collaborate</h2>
+          <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
+            Ready to embark on a musical journey together? Let&apos;s create
+            something cosmic.
+          </p>
+        </div>
+
+        <div className="grid md:grid-cols-2 gap-12">
+          {/* Contact Form */}
+          <div className="glass rounded-3xl p-8">
+            <h3 className="h3 mb-6">Get In Touch</h3>
+
+            {isSubmitted ? (
+              <div className="text-center py-12">
+                <div className="text-6xl mb-4">✨</div>
+                <h4 className="font-semibold mb-2 text-primary">
+                  Message Sent!
+                </h4>
+                <p className="text-muted-foreground">
+                  Thank you for reaching out. You&apos;ll hear back soon on this
+                  cosmic journey.
+                </p>
+              </div>
+            ) : (
+              <form onSubmit={handleSubmit} className="space-y-6">
+                <div className="grid md:grid-cols-2 gap-4">
+                  <div>
+                    <label
+                      htmlFor="name"
+                      className="block text-sm font-medium mb-2"
+                    >
+                      Name
+                    </label>
+                    <input
+                      type="text"
+                      id="name"
+                      name="name"
+                      required
+                      value={formData.name}
+                      onChange={handleChange}
+                      className="w-full px-4 py-3 rounded-lg border border-border bg-background focus:ring-2 focus:ring-primary focus:border-transparent"
+                      placeholder="Your name"
+                    />
+                  </div>
+                  <div>
+                    <label
+                      htmlFor="email"
+                      className="block text-sm font-medium mb-2"
+                    >
+                      Email
+                    </label>
+                    <input
+                      type="email"
+                      id="email"
+                      name="email"
+                      required
+                      value={formData.email}
+                      onChange={handleChange}
+                      className="w-full px-4 py-3 rounded-lg border border-border bg-background focus:ring-2 focus:ring-primary focus:border-transparent"
+                      placeholder="your@email.com"
+                    />
+                  </div>
+                </div>
+
+                <div>
+                  <label
+                    htmlFor="type"
+                    className="block text-sm font-medium mb-2"
+                  >
+                    Inquiry Type
+                  </label>
+                  <select
+                    id="type"
+                    name="type"
+                    value={formData.type}
+                    onChange={handleChange}
+                    className="w-full px-4 py-3 rounded-lg border border-border bg-background focus:ring-2 focus:ring-primary focus:border-transparent"
+                  >
+                    <option value="general">General Inquiry</option>
+                    <option value="booking">Booking Request</option>
+                    <option value="collaboration">Collaboration</option>
+                    <option value="press">Press & Media</option>
+                  </select>
+                </div>
+
+                <div>
+                  <label
+                    htmlFor="message"
+                    className="block text-sm font-medium mb-2"
+                  >
+                    Message
+                  </label>
+                  <textarea
+                    id="message"
+                    name="message"
+                    required
+                    value={formData.message}
+                    onChange={handleChange}
+                    rows={5}
+                    className="w-full px-4 py-3 rounded-lg border border-border bg-background focus:ring-2 focus:ring-primary focus:border-transparent resize-none"
+                    placeholder="Tell me about your cosmic vision..."
+                  />
+                </div>
+
+                <button
+                  type="submit"
+                  className="w-full py-4 bg-primary text-primary-foreground rounded-lg hover:bg-primary/80 transition-colors font-medium"
+                >
+                  Send Message to the Cosmos ✨
+                </button>
+              </form>
+            )}
+          </div>
+
+          {/* Contact Info */}
+          <div className="space-y-8">
+            {/* Social Media */}
+            <div className="glass rounded-2xl p-6">
+              <h4 className="font-semibold mb-4">Follow the Journey</h4>
+              <div className="space-y-3">
+                <a
+                  href="https://soundcloud.com/maradoca"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="flex items-center gap-3 p-3 rounded-lg hover:bg-white/5 transition-colors"
+                >
+                  <div className="w-8 h-8 bg-orange-500 rounded-full flex items-center justify-center">
+                    <svg
+                      className="w-4 h-4 text-white"
+                      fill="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15H8v-6h2v6zm0-8H8V7h2v2zm4 8h-2V9h2v8zm0-10h-2V7h2v2z" />
+                    </svg>
+                  </div>
+                  <div>
+                    <div className="font-medium">SoundCloud</div>
+                    <div className="text-sm text-muted-foreground">
+                      Latest mixes & tracks
+                    </div>
+                  </div>
+                </a>
+
+                <a
+                  href="https://instagram.com/maradoca"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="flex items-center gap-3 p-3 rounded-lg hover:bg-white/5 transition-colors"
+                >
+                  <div className="w-8 h-8 bg-gradient-to-br from-purple-500 to-pink-500 rounded-full flex items-center justify-center">
+                    <svg
+                      className="w-4 h-4 text-white"
+                      fill="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" />
+                    </svg>
+                  </div>
+                  <div>
+                    <div className="font-medium">Instagram</div>
+                    <div className="text-sm text-muted-foreground">
+                      Behind the scenes
+                    </div>
+                  </div>
+                </a>
+
+                <a
+                  href="https://open.spotify.com/artist/maradoca"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="flex items-center gap-3 p-3 rounded-lg hover:bg-white/5 transition-colors"
+                >
+                  <div className="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center">
+                    <svg
+                      className="w-4 h-4 text-white"
+                      fill="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 14.5c-.17 0-.33-.09-.43-.25-1.09-1.33-2.5-2-4.21-2s-3.12.67-4.21 2c-.1.16-.26.25-.43.25-.33 0-.59-.27-.59-.59 0-.14.05-.27.15-.37 1.39-1.69 3.18-2.54 5.08-2.54s3.69.85 5.08 2.54c.1.1.15.23.15.37 0 .32-.26.59-.59.59z" />
+                    </svg>
+                  </div>
+                  <div>
+                    <div className="font-medium">Spotify</div>
+                    <div className="text-sm text-muted-foreground">
+                      Curated playlists
+                    </div>
+                  </div>
+                </a>
+              </div>
+            </div>
+
+            {/* Booking Info */}
+            <div className="glass rounded-2xl p-6">
+              <h4 className="font-semibold mb-4">Professional Inquiries</h4>
+              <div className="space-y-3 text-sm">
+                <div className="flex items-start gap-3">
+                  <div className="w-5 h-5 text-primary mt-0.5">📧</div>
+                  <div>
+                    <div className="font-medium">General</div>
+                    <div className="text-muted-foreground">
+                      hello@maradoca.com
+                    </div>
+                  </div>
+                </div>
+                <div className="flex items-start gap-3">
+                  <div className="w-5 h-5 text-primary mt-0.5">🎵</div>
+                  <div>
+                    <div className="font-medium">Bookings</div>
+                    <div className="text-muted-foreground">
+                      booking@maradoca.com
+                    </div>
+                  </div>
+                </div>
+                <div className="flex items-start gap-3">
+                  <div className="w-5 h-5 text-primary mt-0.5">📰</div>
+                  <div>
+                    <div className="font-medium">Press & Media</div>
+                    <div className="text-muted-foreground">
+                      press@maradoca.com
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Location */}
+            <div className="glass rounded-2xl p-6">
+              <h4 className="font-semibold mb-4">Based In</h4>
+              <div className="flex items-center gap-3">
+                <div className="text-2xl">🌍</div>
+                <div>
+                  <div className="font-medium">Leipzig, Germany</div>
+                  <div className="text-sm text-muted-foreground">
+                    Available worldwide
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/components/events/EventsSection.tsx b/components/events/EventsSection.tsx
new file mode 100644
index 0000000..f4bdedb
--- /dev/null
+++ b/components/events/EventsSection.tsx
@@ -0,0 +1,208 @@
+"use client";
+
+import { useState } from "react";
+
+type EventStatus = "upcoming" | "past";
+
+const events = {
+  upcoming: [
+    {
+      id: 1,
+      title: "Freedom Festival 2024",
+      venue: "Leipzig Warehouse",
+      date: "2024-08-15",
+      time: "22:00",
+      type: "Festival",
+      description: "Main stage progressive house set",
+      ticketUrl: "https://example.com/tickets/1",
+      image: "🌅",
+    },
+    {
+      id: 2,
+      title: "Cosmic Nights",
+      venue: "Berlin Underground",
+      date: "2024-09-02",
+      time: "23:30",
+      type: "Club Night",
+      description: "Deep techno journey through space",
+      ticketUrl: "https://example.com/tickets/2",
+      image: "🌌",
+    },
+    {
+      id: 3,
+      title: "Tropical Waves",
+      venue: "Hamburg Beach Club",
+      date: "2024-09-20",
+      time: "20:00",
+      type: "Beach Party",
+      description: "Sunset tropical progressive set",
+      ticketUrl: "https://example.com/tickets/3",
+      image: "🏖️",
+    },
+  ],
+  past: [
+    {
+      id: 4,
+      title: "Journey to Freedom Tour",
+      venue: "Munich Electronic Festival",
+      date: "2024-06-10",
+      time: "21:00",
+      type: "Festival",
+      description: "Headlining set with new tracks",
+      image: "🎭",
+    },
+    {
+      id: 5,
+      title: "Deep Space Exploration",
+      venue: "Dresden Techno Club",
+      date: "2024-05-25",
+      time: "01:00",
+      type: "Club Night",
+      description: "4-hour deep techno journey",
+      image: "🚀",
+    },
+  ],
+};
+
+export default function EventsSection() {
+  const [activeTab, setActiveTab] = useState<EventStatus>("upcoming");
+
+  const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleDateString("en-US", {
+      weekday: "short",
+      month: "short",
+      day: "numeric",
+    });
+  };
+
+  return (
+    <section className="py-20 px-6 bg-gradient-to-b from-background to-card">
+      <div className="max-w-6xl mx-auto">
+        <div className="text-center mb-16">
+          <h2 className="h2 gradient-text mb-4">Live Events</h2>
+          <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
+            Join me on the dance floor as we explore freedom through music
+          </p>
+        </div>
+
+        {/* Event Tabs */}
+        <div className="flex justify-center mb-12">
+          <div className="glass rounded-full p-2 flex">
+            <button
+              onClick={() => setActiveTab("upcoming")}
+              className={`px-8 py-3 rounded-full font-medium transition-all duration-300 ${
+                activeTab === "upcoming"
+                  ? "bg-primary text-primary-foreground shadow-lg"
+                  : "text-foreground/70 hover:text-foreground hover:bg-white/10"
+              }`}
+            >
+              Upcoming Shows
+            </button>
+            <button
+              onClick={() => setActiveTab("past")}
+              className={`px-8 py-3 rounded-full font-medium transition-all duration-300 ${
+                activeTab === "past"
+                  ? "bg-primary text-primary-foreground shadow-lg"
+                  : "text-foreground/70 hover:text-foreground hover:bg-white/10"
+              }`}
+            >
+              Past Events
+            </button>
+          </div>
+        </div>
+
+        {/* Events Grid */}
+        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+          {events[activeTab].map((event) => (
+            <div
+              key={event.id}
+              className="glass rounded-2xl p-6 hover:scale-105 transition-all duration-300 hover:shadow-2xl"
+            >
+              {/* Event Image/Icon */}
+              <div className="text-6xl mb-4 text-center">{event.image}</div>
+
+              {/* Event Details */}
+              <div className="space-y-3">
+                <div className="flex items-center justify-between">
+                  <span className="text-sm font-medium text-primary bg-primary/10 px-2 py-1 rounded-full">
+                    {event.type}
+                  </span>
+                  {activeTab === "upcoming" && (
+                    <span className="text-sm text-muted-foreground">
+                      {formatDate(event.date)}
+                    </span>
+                  )}
+                </div>
+
+                <h3 className="font-bold text-lg">{event.title}</h3>
+                <p className="text-sm text-muted-foreground">{event.venue}</p>
+                <p className="text-sm">{event.description}</p>
+
+                <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                  <svg
+                    className="w-4 h-4"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+                    />
+                  </svg>
+                  {event.time}
+                </div>
+
+                {activeTab === "upcoming" &&
+                  "ticketUrl" in event &&
+                  event.ticketUrl && (
+                    <a
+                      href={event.ticketUrl}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="block w-full text-center py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/80 transition-colors mt-4"
+                    >
+                      Get Tickets
+                    </a>
+                  )}
+
+                {activeTab === "past" && (
+                  <div className="text-sm text-muted-foreground">
+                    {formatDate(event.date)}
+                  </div>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {/* Booking CTA */}
+        <div className="mt-20 text-center">
+          <div className="glass rounded-3xl p-12 max-w-2xl mx-auto">
+            <h3 className="h3 mb-4">Book Maradoca</h3>
+            <p className="text-lg text-muted-foreground mb-8">
+              Ready to bring the cosmic journey to your venue? Let&apos;s create
+              an unforgettable experience together.
+            </p>
+            <div className="flex flex-col sm:flex-row gap-4 justify-center">
+              <a
+                href="mailto:booking@maradoca.com"
+                className="px-8 py-3 bg-primary text-primary-foreground rounded-full hover:bg-primary/80 transition-colors font-medium"
+              >
+                Contact for Booking
+              </a>
+              <a
+                href="/press-kit"
+                className="px-8 py-3 border border-primary text-primary rounded-full hover:bg-primary/10 transition-colors font-medium"
+              >
+                Download Press Kit
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/components/hero.tsx b/components/hero.tsx
index 4d6d175..aff701c 100644
--- a/components/hero.tsx
+++ b/components/hero.tsx
@@ -6,7 +6,8 @@ import { cn } from "@/lib/utils";
 import { Space_Grotesk } from "next/font/google";
 import { useEffect, useState } from "react";
 import BackgroundVideo from "./hero/BackgroundVideo";
-import Content from "./hero/Content";
+import CloudAnimation from "./hero/CloudAnimation";
+import CosmicBackground from "./hero/CosmicBackground";
 
 const spaceGrotesk = Space_Grotesk({
   subsets: ["latin"],
@@ -57,17 +58,79 @@ export default function Hero() {
   return (
     <div
       className={cn(
-        "h-full w-full bg-black text-white overflow-hidden",
-        spaceGrotesk.variable,
+        "relative h-screen w-full overflow-hidden",
+        spaceGrotesk.variable
       )}
     >
-      <BackgroundVideo
-        isMuted={isMuted}
-        onToggleMute={() => setIsMuted(!isMuted)}
-        desktopVideoId={heroData?.backgroundVideo?.desktop}
-        mobileVideoId={heroData?.backgroundVideo?.mobile}
-      />
-      <Content heroData={heroData} />
+      {/* Cosmic Background */}
+      <CosmicBackground />
+
+      {/* Background Video with lower opacity */}
+      <div className="absolute inset-0 opacity-40">
+        <BackgroundVideo
+          isMuted={isMuted}
+          onToggleMute={() => setIsMuted(!isMuted)}
+          desktopVideoId={heroData?.backgroundVideo?.desktop}
+          mobileVideoId={heroData?.backgroundVideo?.mobile}
+        />
+      </div>
+
+      {/* Cloud Animations */}
+      <CloudAnimation />
+
+      {/* Content */}
+      <div className="relative z-10 flex h-full items-center justify-center">
+        <div className="text-center px-6">
+          <h1 className="brand-title gradient-text mb-4 animate-fade-in">
+            MARADOCA
+          </h1>
+          <p className="text-xl md:text-2xl text-foreground/80 mb-8 font-light">
+            Tropical • Cosmic • Deep • Progressive
+          </p>
+          <div className="space-y-4">
+            <p className="text-3xl md:text-5xl font-display glow text-white animate-pulse">
+              Join me on my journey to FREEDOM!
+            </p>
+            <p className="text-lg md:text-xl text-foreground/70 italic">
+              &quot;I like NUBES&quot; ☁️
+            </p>
+          </div>
+
+          {/* Social Links */}
+          <div className="flex justify-center gap-6 mt-12">
+            {heroData?.socialLinks?.map((link) => (
+              <a
+                key={link.platform}
+                href={link.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-primary hover:text-accent transition-colors duration-300 transform hover:scale-110"
+              >
+                <span className="sr-only">{link.platform}</span>
+                <div
+                  className="w-8 h-8"
+                  dangerouslySetInnerHTML={{ __html: link.icon }}
+                />
+              </a>
+            ))}
+          </div>
+
+          {/* Scroll Indicator */}
+          <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce">
+            <svg
+              className="w-6 h-6 text-foreground/50"
+              fill="none"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
+            </svg>
+          </div>
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/components/hero/CloudAnimation.tsx b/components/hero/CloudAnimation.tsx
new file mode 100644
index 0000000..482f05c
--- /dev/null
+++ b/components/hero/CloudAnimation.tsx
@@ -0,0 +1,76 @@
+"use client";
+
+export default function CloudAnimation() {
+  const clouds = Array.from({ length: 8 }, (_, i) => ({
+    id: i,
+    delay: i * 1.5,
+    scale: 0.6 + Math.random() * 0.8,
+    opacity: 0.3 + Math.random() * 0.4,
+    duration: 6 + Math.random() * 4,
+  }));
+
+  return (
+    <div className="absolute inset-0 pointer-events-none overflow-hidden">
+      {clouds.map((cloud) => (
+        <div
+          key={cloud.id}
+          className="absolute text-white/20"
+          style={{
+            left: `${Math.random() * 100}%`,
+            top: `${Math.random() * 100}%`,
+            transform: `scale(${cloud.scale})`,
+            opacity: cloud.opacity,
+            animationDelay: `${cloud.delay}s`,
+            animationDuration: `${cloud.duration}s`,
+          }}
+        >
+          <div className="float-animation">
+            <svg
+              width="80"
+              height="60"
+              viewBox="0 0 80 60"
+              fill="currentColor"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path d="M64 40c8.837 0 16-7.163 16-16s-7.163-16-16-16c-1.026 0-2.024.096-3 .278C58.748 2.828 53.1 0 46.667 0 37.508 0 30.028 7.48 30.028 16.667c0 .642.036 1.275.107 1.899C27.748 17.434 25.028 16.667 22.111 16.667 11.626 16.667 3.111 25.181 3.111 35.667S11.626 54.667 22.111 54.667h41.889C72.837 54.667 80 47.504 80 38.667S72.837 22.667 64 22.667z" />
+            </svg>
+          </div>
+        </div>
+      ))}
+
+      {/* Larger feature clouds */}
+      <div className="absolute top-20 left-10 opacity-30">
+        <div className="float-animation" style={{ animationDuration: "8s" }}>
+          <svg
+            width="120"
+            height="90"
+            viewBox="0 0 80 60"
+            fill="currentColor"
+            className="text-white/10"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path d="M64 40c8.837 0 16-7.163 16-16s-7.163-16-16-16c-1.026 0-2.024.096-3 .278C58.748 2.828 53.1 0 46.667 0 37.508 0 30.028 7.48 30.028 16.667c0 .642.036 1.275.107 1.899C27.748 17.434 25.028 16.667 22.111 16.667 11.626 16.667 3.111 25.181 3.111 35.667S11.626 54.667 22.111 54.667h41.889C72.837 54.667 80 47.504 80 38.667S72.837 22.667 64 22.667z" />
+          </svg>
+        </div>
+      </div>
+
+      <div className="absolute bottom-32 right-16 opacity-20">
+        <div
+          className="float-animation"
+          style={{ animationDuration: "10s", animationDelay: "2s" }}
+        >
+          <svg
+            width="100"
+            height="75"
+            viewBox="0 0 80 60"
+            fill="currentColor"
+            className="text-white/15"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path d="M64 40c8.837 0 16-7.163 16-16s-7.163-16-16-16c-1.026 0-2.024.096-3 .278C58.748 2.828 53.1 0 46.667 0 37.508 0 30.028 7.48 30.028 16.667c0 .642.036 1.275.107 1.899C27.748 17.434 25.028 16.667 22.111 16.667 11.626 16.667 3.111 25.181 3.111 35.667S11.626 54.667 22.111 54.667h41.889C72.837 54.667 80 47.504 80 38.667S72.837 22.667 64 22.667z" />
+          </svg>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/components/hero/CosmicBackground.tsx b/components/hero/CosmicBackground.tsx
new file mode 100644
index 0000000..b21db75
--- /dev/null
+++ b/components/hero/CosmicBackground.tsx
@@ -0,0 +1,96 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+
+export default function CosmicBackground() {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+
+    const stars: Array<{
+      x: number;
+      y: number;
+      size: number;
+      speed: number;
+      opacity: number;
+    }> = [];
+
+    // Create stars
+    for (let i = 0; i < 200; i++) {
+      stars.push({
+        x: Math.random() * canvas.width,
+        y: Math.random() * canvas.height,
+        size: Math.random() * 2,
+        speed: Math.random() * 0.5 + 0.1,
+        opacity: Math.random() * 0.8 + 0.2,
+      });
+    }
+
+    function animate() {
+      if (!ctx || !canvas) return;
+
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+      // Create gradient background
+      const gradient = ctx.createLinearGradient(
+        0,
+        0,
+        canvas.width,
+        canvas.height
+      );
+      gradient.addColorStop(0, "hsl(280, 85%, 20%)");
+      gradient.addColorStop(0.5, "hsl(245, 50%, 15%)");
+      gradient.addColorStop(1, "hsl(175, 70%, 20%)");
+      ctx.fillStyle = gradient;
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+      // Draw and animate stars
+      stars.forEach((star) => {
+        ctx.beginPath();
+        ctx.arc(star.x, star.y, star.size, 0, Math.PI * 2);
+        ctx.fillStyle = `rgba(255, 255, 255, ${star.opacity})`;
+        ctx.fill();
+
+        // Move star
+        star.y -= star.speed;
+
+        // Reset star position if it goes off screen
+        if (star.y < -star.size) {
+          star.y = canvas.height + star.size;
+          star.x = Math.random() * canvas.width;
+        }
+      });
+
+      requestAnimationFrame(animate);
+    }
+
+    animate();
+
+    const handleResize = () => {
+      canvas.width = window.innerWidth;
+      canvas.height = window.innerHeight;
+    };
+
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  return (
+    <canvas
+      ref={canvasRef}
+      className="absolute inset-0 w-full h-full"
+      style={{
+        background:
+          "linear-gradient(135deg, hsl(280, 85%, 15%), hsl(175, 70%, 15%))",
+      }}
+    />
+  );
+}
diff --git a/components/music/MusicSection.tsx b/components/music/MusicSection.tsx
new file mode 100644
index 0000000..0797831
--- /dev/null
+++ b/components/music/MusicSection.tsx
@@ -0,0 +1,173 @@
+"use client";
+
+import { useState } from "react";
+
+type PlaylistCategory = "progressive" | "deep" | "techno";
+
+const playlists = {
+  progressive: {
+    title: "Progressive House",
+    bpm: "~125 BPM",
+    description: "Melodic journeys that build and evolve",
+    embedId: "1234567890", // This would be real SoundCloud embed ID
+    gradient: "from-purple-500 to-pink-500",
+  },
+  deep: {
+    title: "Deep & Cosmic",
+    bpm: "120-125 BPM",
+    description: "Deep spaces and cosmic explorations",
+    embedId: "0987654321",
+    gradient: "from-blue-500 to-teal-500",
+  },
+  techno: {
+    title: "Techno & Trance",
+    bpm: "130-140 BPM",
+    description: "High energy cosmic adventures",
+    embedId: "1122334455",
+    gradient: "from-orange-500 to-red-500",
+  },
+};
+
+export default function MusicSection() {
+  const [activePlaylist, setActivePlaylist] =
+    useState<PlaylistCategory>("progressive");
+
+  return (
+    <section className="py-20 px-6 bg-gradient-to-b from-muted to-background">
+      <div className="max-w-6xl mx-auto">
+        <div className="text-center mb-16">
+          <h2 className="h2 gradient-text mb-4">Musical Journey</h2>
+          <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
+            Explore different dimensions of sound - from tropical progressive to
+            deep cosmic techno
+          </p>
+        </div>
+
+        {/* Category Tabs */}
+        <div className="flex justify-center mb-12">
+          <div className="glass rounded-full p-2 flex gap-2">
+            {(Object.keys(playlists) as PlaylistCategory[]).map((category) => (
+              <button
+                key={category}
+                onClick={() => setActivePlaylist(category)}
+                className={`px-6 py-3 rounded-full font-medium transition-all duration-300 ${
+                  activePlaylist === category
+                    ? "bg-primary text-primary-foreground shadow-lg transform scale-105"
+                    : "text-foreground/70 hover:text-foreground hover:bg-white/10"
+                }`}
+              >
+                {playlists[category].title}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Active Playlist */}
+        <div className="max-w-4xl mx-auto">
+          <div
+            className={`bg-gradient-to-r ${playlists[activePlaylist].gradient} p-1 rounded-2xl shadow-2xl`}
+          >
+            <div className="bg-card rounded-2xl p-8">
+              <div className="grid md:grid-cols-2 gap-8 items-center">
+                <div>
+                  <h3 className="h3 mb-4">{playlists[activePlaylist].title}</h3>
+                  <div className="space-y-3">
+                    <div className="flex items-center gap-2">
+                      <span className="text-sm font-semibold text-primary">
+                        BPM:
+                      </span>
+                      <span className="text-lg">
+                        {playlists[activePlaylist].bpm}
+                      </span>
+                    </div>
+                    <p className="text-muted-foreground">
+                      {playlists[activePlaylist].description}
+                    </p>
+                  </div>
+
+                  {/* Social Links */}
+                  <div className="flex gap-4 mt-8">
+                    <a
+                      href="https://soundcloud.com/maradoca"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="flex items-center gap-2 px-4 py-2 bg-orange-500 text-white rounded-lg hover:bg-orange-600 transition-colors"
+                    >
+                      <svg
+                        className="w-5 h-5"
+                        fill="currentColor"
+                        viewBox="0 0 24 24"
+                      >
+                        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15H8v-6h2v6zm0-8H8V7h2v2zm4 8h-2V9h2v8zm0-10h-2V7h2v2z" />
+                      </svg>
+                      SoundCloud
+                    </a>
+                    <a
+                      href="https://open.spotify.com/artist/maradoca"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="flex items-center gap-2 px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors"
+                    >
+                      <svg
+                        className="w-5 h-5"
+                        fill="currentColor"
+                        viewBox="0 0 24 24"
+                      >
+                        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 14.5c-.17 0-.33-.09-.43-.25-1.09-1.33-2.5-2-4.21-2s-3.12.67-4.21 2c-.1.16-.26.25-.43.25-.33 0-.59-.27-.59-.59 0-.14.05-.27.15-.37 1.39-1.69 3.18-2.54 5.08-2.54s3.69.85 5.08 2.54c.1.1.15.23.15.37 0 .32-.26.59-.59.59z" />
+                      </svg>
+                      Spotify
+                    </a>
+                  </div>
+                </div>
+
+                {/* SoundCloud Embed Placeholder */}
+                <div className="bg-muted rounded-xl p-8 text-center">
+                  <div className="space-y-4">
+                    <div className="w-16 h-16 bg-primary/20 rounded-full mx-auto flex items-center justify-center">
+                      <svg
+                        className="w-8 h-8 text-primary"
+                        fill="currentColor"
+                        viewBox="0 0 24 24"
+                      >
+                        <path d="M8 5v14l11-7z" />
+                      </svg>
+                    </div>
+                    <h4 className="font-semibold">SoundCloud Player</h4>
+                    <p className="text-sm text-muted-foreground">
+                      Connect to SoundCloud to play{" "}
+                      {playlists[activePlaylist].title} playlist
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Latest Releases */}
+        <div className="mt-20">
+          <h3 className="h3 text-center mb-12">Latest Releases</h3>
+          <div className="grid md:grid-cols-3 gap-8">
+            {[1, 2, 3].map((i) => (
+              <div
+                key={i}
+                className="glass rounded-2xl p-6 hover:scale-105 transition-transform duration-300"
+              >
+                <div className="aspect-square bg-gradient-to-br from-primary to-secondary rounded-lg mb-4 flex items-center justify-center">
+                  <div className="text-4xl">♫</div>
+                </div>
+                <h4 className="font-semibold mb-2">Cosmic Journey #{i}</h4>
+                <p className="text-sm text-muted-foreground mb-4">
+                  Progressive House • 125 BPM
+                </p>
+                <button className="w-full py-2 bg-primary/10 text-primary rounded-lg hover:bg-primary/20 transition-colors">
+                  Play Track
+                </button>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/components/press-kit/PerformanceList.tsx b/components/press-kit/PerformanceList.tsx
index 34d1d34..03c6787 100644
--- a/components/press-kit/PerformanceList.tsx
+++ b/components/press-kit/PerformanceList.tsx
@@ -12,6 +12,8 @@ export function PerformanceList({
   pastGigs,
   contactEmail,
 }: PerformanceListProps) {
+  console.log("upcomingGigs", upcomingGigs);
+  console.log("pastGigs", pastGigs);
   return (
     <>
       {/* Upcoming section with prominent styling */}