feat: add new homepage sections and enhance visual design

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);
+  }
+}

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>
+  );
 }

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>
+  );
+}