Ichitux/lambada-fiesta-live
1
0
Fork 0
mirror of https://github.com/Ichitux/lambada-fiesta-live.git synced 2026-05-15 18:52:20 +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 iconMap = [Music, Users, Sparkles, PartyPopper];
const AboutSection = () => ( 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="container mx-auto">
<div className="grid md:grid-cols-2 gap-12 items-center"> <div className="grid md:grid-cols-2 gap-12 items-center">
{/* Imagen */} {/* Imagen */}

5
src/components/HeroSection.tsx
View File

@@ -34,7 +34,10 @@ const HeroSection = () => {
]; ];
return ( 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 */} {/* Background image */}
<div <div
className="absolute inset-0 bg-cover bg-center" 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 communityImg from "@/assets/community.jpg";
import { Instagram, Facebook, Youtube } from "lucide-react"; 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 = () => ( 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="container mx-auto">
<div className="grid md:grid-cols-2 gap-12 items-center"> <div className="grid md:grid-cols-2 gap-12 items-center">
{/* Texto */} {/* Texto */}

114
src/index.css
View File

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

4
tailwind.config.ts
View File

@@ -14,7 +14,7 @@ export default {
}, },
extend: { extend: {
fontFamily: { fontFamily: {
display: ['"Playfair Display"', "Georgia", "serif"], display: ['"Noto"', "system-ui", "sans-serif"],
body: ['"Inter"', "system-ui", "sans-serif"], body: ['"Inter"', "system-ui", "sans-serif"],
}, },
colors: { colors: {
@@ -24,7 +24,7 @@ export default {
background: "hsl(var(--background))", background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))", foreground: "hsl(var(--foreground))",
primary: { primary: {
DEFAULT: "hsl(230.5, 57.6%, 74.1%)", DEFAULT: "hsla(37, 93%, 53%, 1.00)",
foreground: "hsl(var(--primary-foreground))", foreground: "hsl(var(--primary-foreground))",
}, },
secondary: { secondary: {