From 0ca50ce0810c05d835b669bc9a70aed602bbf265 Mon Sep 17 00:00:00 2001 From: Manuel Pastor Ringuelet Date: Tue, 22 Jul 2025 22:23:36 +0200 Subject: [PATCH] feat: add new homepage sections and enhance visual design --- app/globals.css | 151 ++++++++---- app/page.tsx | 14 +- components/about/AboutSection.tsx | 130 +++++++++++ components/contact/ContactSection.tsx | 281 +++++++++++++++++++++++ components/events/EventsSection.tsx | 208 +++++++++++++++++ components/hero.tsx | 83 ++++++- components/hero/CloudAnimation.tsx | 76 ++++++ components/hero/CosmicBackground.tsx | 96 ++++++++ components/music/MusicSection.tsx | 173 ++++++++++++++ components/press-kit/PerformanceList.tsx | 2 + 10 files changed, 1160 insertions(+), 54 deletions(-) create mode 100644 components/about/AboutSection.tsx create mode 100644 components/contact/ContactSection.tsx create mode 100644 components/events/EventsSection.tsx create mode 100644 components/hero/CloudAnimation.tsx create mode 100644 components/hero/CosmicBackground.tsx create mode 100644 components/music/MusicSection.tsx 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 ; + return ( +
+ + + + + +
+ ); } 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 ( +
+
+
+

About the Journey

+

+ Exploring the cosmic connection between tropical vibes and + progressive soundscapes +

+
+ + {/* Main About Content */} +
+
+ {/* Portrait/Image Placeholder */} +
+
+
+ 🎧 +
+
+
+ ✨ +
+
+ ☁️ +
+
+ + {/* About Text */} +
+

MARADOCA

+
+

+ Born from a passion for cosmic exploration and tropical + freedom, Maradoca creates soundscapes that transport listeners + on journeys through both inner and outer space. +

+

+ 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. +

+ {isExpanded && ( +
+

+ "I like NUBES" - this simple phrase captures the + essence of the music: light, floating, ever-changing, yet + always grounded in the freedom of expression. +

+

+ From intimate club settings to festival main stages, + Maradoca creates experiences that unite dancers in a + shared journey toward musical freedom. +

+
+ )} +
+ +
+
+
+ + {/* Music Philosophy */} +
+
+
🌴
+

Tropical

+

+ Warm, inviting sounds that capture the essence of freedom and + escape +

+
+
+
🌌
+

Cosmic

+

+ Deep, expansive journeys through space and consciousness +

+
+
+
🎯
+

Progressive

+

+ Evolving soundscapes that build emotion and tell stories +

+
+
+ + {/* Stats */} +
+
+
125
+
BPM Sweet Spot
+
+
+
∞
+
+ Creative Possibilities +
+
+
+
24/7
+
+ Music in the Mind +
+
+
+
1
+
+ Journey to Freedom +
+
+
+
+
+ ); +} 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 ( +
+
+
+

Connect & Collaborate

+

+ Ready to embark on a musical journey together? Let's create + something cosmic. +

+
+ +
+ {/* Contact Form */} +
+

Get In Touch

+ + {isSubmitted ? ( +
+
✨
+

+ Message Sent! +

+

+ Thank you for reaching out. You'll hear back soon on this + cosmic journey. +

+
+ ) : ( +
+
+
+ + +
+
+ + +
+
+ +
+ + +
+ +
+ +