Ichitux/lambada-fiesta-live
1
0
Fork 0
mirror of https://github.com/Ichitux/lambada-fiesta-live.git synced 2026-05-15 17:32:21 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

Warmer style for the entire website + shapes

Browse Source
This commit is contained in:
Antoni Nuñez Romeu
2026-03-19 16:27:03 +01:00
parent 71b2c5f2ed
commit 3f0618829f
5 changed files with 70 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/AboutSection.tsx
View File

@@ -6,7 +6,7 @@ import { Music, Users, Sparkles, PartyPopper } from "lucide-react";
const iconMap = [Music, Users, Sparkles, PartyPopper];
const AboutSection = () => (
<section id="about" className="section-padding bg-background">
<section id="about" className="section-padding bg-background relative z-10 -mt-[50px] pt-[100px]">
<div className="container mx-auto">
<div className="grid md:grid-cols-2 gap-12 items-center">
{/* Imagen */}

5
src/components/HeroSection.tsx
View File

@@ -34,7 +34,10 @@ const HeroSection = () => {
];
return (
<section className="relative min-h-screen flex items-center justify-center overflow-hidden">
<section
className="relative min-h-[calc(100vh+50px)] flex items-center justify-center overflow-hidden z-20 pb-[50px]"
style={{ clipPath: "polygon(0 0, 100% 0, 100% calc(100% - 50px), 50% 100%, 0 calc(100% - 50px))" }}
>
{/* Background image */}
<div
className="absolute inset-0 bg-cover bg-center"

7
src/components/OrgSection.tsx
View File

@@ -3,8 +3,13 @@ import { ABOUT_ORG } from "@/data/event-data";
import communityImg from "@/assets/community.jpg";
import { Instagram, Facebook, Youtube } from "lucide-react";
const maskStyle = "radial-gradient(491.93px at 50% 660px,#000 99%,#0000 101%) calc(50% - 440px) 0/880px 100%, radial-gradient(491.93px at 50% -440px,#0000 99%,#000 101%) 50% 220px/880px 100% repeat-x";
const OrgSection = () => (
<section className="section-padding bg-card py-20 md:py-28">
<section
className="section-padding bg-card pb-20 md:pb-28 pt-[200px] md:pt-[240px] -mt-[80px] relative z-20"
style={{ WebkitMask: maskStyle, mask: maskStyle }}
>
<div className="container mx-auto">
<div className="grid md:grid-cols-2 gap-12 items-center">
{/* Texto */}

114
src/index.css
View File

@@ -12,85 +12,85 @@
@layer base {
:root {
/* Paleta: Egyptian Blue, Slate Indigo, Baby Blue Ice, Dark Amethyst, Dusty Grape */
--background: 225 30% 96%;
--foreground: 260 32% 24%;
/* Paleta: Beachy, Sandy, Warm Orange */
--background: 40 40% 94%; /* Sandy beach */
--foreground: 25 40% 25%; /* Warm dark brown/orange */
--card: 225 25% 94%;
--card-foreground: 260 32% 24%;
--card: 40 50% 98%; /* Light sand */
--card-foreground: 25 40% 25%;
--popover: 0 0% 100%;
--popover-foreground: 260 32% 24%;
--popover: 40 50% 98%;
--popover-foreground: 25 40% 25%;
/* Primary: Egyptian Blue */
--primary: 231 66% 37%;
/* Primary: Vibrant Orange */
--primary: 20 90% 55%;
--primary-foreground: 0 0% 100%;
/* Secondary: Slate Indigo */
--secondary: 225 34% 48%;
/* Secondary: Golden Orange */
--secondary: 35 90% 50%;
--secondary-foreground: 0 0% 100%;
/* Accent: Baby Blue Ice */
--accent: 220 81% 75%;
--accent-foreground: 260 32% 24%;
/* Accent: Warm Peach */
--accent: 25 80% 80%;
--accent-foreground: 25 40% 25%;
--muted: 225 20% 90%;
--muted-foreground: 227 20% 42%;
--muted: 40 30% 85%;
--muted-foreground: 25 30% 45%;
--destructive: 0 84% 60%;
--destructive-foreground: 0 0% 100%;
--border: 225 20% 85%;
--input: 225 20% 85%;
--ring: 231 66% 37%;
--border: 40 25% 82%;
--input: 40 25% 82%;
--ring: 20 90% 55%;
--radius: 0.75rem;
/* Custom tokens */
--gradient-tropical: linear-gradient(135deg, hsla(28.2, 80.4%, 44.1%, 0.91), hsla(27.1, 88.4%, 37.3%, 0.76), hsl(22.3, 95.5%, 56.9%));
--gradient-warm: linear-gradient(180deg, hsl(225 30% 96%), hsl(225 25% 92%));
--shadow-glow: 0 0 40px hsl(231 66% 37% / 0.3);
--shadow-card: 0 8px 30px hsl(260 32% 24% / 0.08);
--shadow-elevated: 0 20px 50px hsl(260 32% 24% / 0.12);
--gradient-tropical: linear-gradient(135deg, hsla(15, 90%, 55%, 0.9), hsla(30, 90%, 55%, 0.8), hsl(45, 90%, 50%));
--gradient-warm: linear-gradient(180deg, hsl(40 40% 94%), hsl(40 30% 85%));
--shadow-glow: 0 0 40px hsl(20 90% 55% / 0.3);
--shadow-card: 0 8px 30px hsl(25 40% 25% / 0.08);
--shadow-elevated: 0 20px 50px hsl(25 40% 25% / 0.12);
/* Sidebar (unused but required) */
--sidebar-background: 0 0% 98%;
--sidebar-foreground: 240 5.3% 26.1%;
--sidebar-primary: 240 5.9% 10%;
--sidebar-primary-foreground: 0 0% 98%;
--sidebar-accent: 240 4.8% 95.9%;
--sidebar-accent-foreground: 240 5.9% 10%;
--sidebar-border: 220 13% 91%;
--sidebar-ring: 217.2 91.2% 59.8%;
--sidebar-background: 40 50% 98%;
--sidebar-foreground: 25 40% 25%;
--sidebar-primary: 20 90% 55%;
--sidebar-primary-foreground: 0 0% 100%;
--sidebar-accent: 40 30% 90%;
--sidebar-accent-foreground: 25 40% 25%;
--sidebar-border: 40 25% 82%;
--sidebar-ring: 20 90% 55%;
}
.dark {
--background: 260 30% 8%;
--foreground: 220 81% 90%;
--card: 260 28% 12%;
--card-foreground: 220 81% 90%;
--popover: 260 28% 12%;
--popover-foreground: 220 81% 90%;
--primary: 220 81% 75%;
--primary-foreground: 260 32% 24%;
--secondary: 225 34% 48%;
--secondary-foreground: 0 0% 100%;
--accent: 231 66% 45%;
--accent-foreground: 0 0% 100%;
--muted: 260 20% 18%;
--muted-foreground: 225 20% 65%;
--background: 35 25% 12%; /* Dark beach night */
--foreground: 30 50% 96%;
--card: 35 20% 15%;
--card-foreground: 30 50% 96%;
--popover: 35 20% 15%;
--popover-foreground: 30 50% 96%;
--primary: 20 90% 60%;
--primary-foreground: 30 90% 10%;
--secondary: 35 90% 55%;
--secondary-foreground: 30 90% 10%;
--accent: 25 60% 30%;
--accent-foreground: 30 50% 96%;
--muted: 35 20% 22%;
--muted-foreground: 30 30% 70%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 100%;
--border: 260 15% 20%;
--input: 260 15% 20%;
--ring: 220 81% 75%;
--sidebar-background: 240 5.9% 10%;
--sidebar-foreground: 240 4.8% 95.9%;
--sidebar-primary: 224.3 76.3% 48%;
--sidebar-primary-foreground: 0 0% 100%;
--sidebar-accent: 240 3.7% 15.9%;
--sidebar-accent-foreground: 240 4.8% 95.9%;
--sidebar-border: 240 3.7% 15.9%;
--sidebar-ring: 217.2 91.2% 59.8%;
--border: 35 20% 25%;
--input: 35 20% 25%;
--ring: 20 90% 60%;
--sidebar-background: 35 20% 15%;
--sidebar-foreground: 30 50% 96%;
--sidebar-primary: 20 90% 60%;
--sidebar-primary-foreground: 30 90% 10%;
--sidebar-accent: 35 20% 22%;
--sidebar-accent-foreground: 30 50% 96%;
--sidebar-border: 35 20% 25%;
--sidebar-ring: 20 90% 60%;
}
}