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

Hotfixes from Trello, size, boxes, text, etc.
All checks were successful
Deploy NPM app / Deploy NPM (push) Successful in 56s
Details

Browse Source
This commit is contained in:
Antoni Nuñez Romeu
2026-03-20 01:05:49 +01:00
parent 445e1570b4
commit 16cb8c78ce
12 changed files with 67 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
scale_fix.mjs Normal file
View File

@@ -0,0 +1,40 @@
import fs from 'fs';
import path from 'path';
const dir = 'src/components';
const files = fs.readdirSync(dir).filter(f => f.endsWith('.tsx'));
for (const file of files) {
const filePath = path.join(dir, file);
let content = fs.readFileSync(filePath, 'utf8');
let original = content;
// Hero Section
if (file === 'HeroSection.tsx') {
content = content.replaceAll('text-5xl md:text-7xl lg:text-8xl', 'text-4xl md:text-6xl lg:text-8xl break-words');
content = content.replaceAll('text-2xl md:text-4xl font-hero', 'text-xl md:text-3xl lg:text-4xl font-hero');
} else {
// Normal Sections Big Titles
// Replace text-6xl md:text-7xl font-bold pt-4 pb-10 leading-[1.8] text-gradient
content = content.replace(/text-6xl md:text-7xl/g, 'text-4xl md:text-5xl lg:text-7xl break-words');
content = content.replace(/text-5xl md:text-6xl/g, 'text-3xl md:text-4xl lg:text-6xl break-words');
// Smaller sizes
content = content.replace(/text-5xl pt-3 pb-6/g, 'text-3xl md:text-4xl lg:text-5xl pt-3 pb-6 break-words');
content = content.replace(/text-4xl pt-3 pb-5/g, 'text-2xl md:text-3xl lg:text-4xl pt-3 pb-5');
content = content.replace(/text-3xl pt-3 pb-5/g, 'text-xl md:text-2xl lg:text-3xl pt-3 pb-5');
// Footer / Nav
content = content.replace(/text-4xl py-4/g, 'text-2xl md:text-3xl lg:text-4xl py-4');
content = content.replace(/text-4xl py-2/g, 'text-2xl md:text-3xl lg:text-4xl py-2');
content = content.replace(/text-2xl py-2/g, 'text-lg md:text-xl lg:text-2xl py-2');
}
// General overflow catch-all: Ensure .container has overflow-hidden just in case?
// No, adding break-words is better.
if (original !== content) {
fs.writeFileSync(filePath, content);
console.log(`Fixed responsive sizes in ${file}`);
}
}

2
src/components/AboutSection.tsx
View File

@@ -30,7 +30,7 @@ const AboutSection = () => (
viewport={{ once: false, amount: 0.15 }} viewport={{ once: false, amount: 0.15 }}
transition={{ duration: 0.6 }} transition={{ duration: 0.6 }}
> >
<h2 className="font-display text-6xl md:text-7xl font-bold pt-4 pb-6 leading-normal mb-6 text-gradient"> <h2 className="font-display text-4xl md:text-5xl lg:text-7xl break-words font-bold pt-4 pb-6 leading-normal mb-6 text-gradient">
{ABOUT_EVENT.title} {ABOUT_EVENT.title}
</h2> </h2>
<p className="text-muted-foreground mb-6 leading-relaxed whitespace-pre-line"> <p className="text-muted-foreground mb-6 leading-relaxed whitespace-pre-line">

4
src/components/BookingSection.tsx
View File

@@ -161,7 +161,7 @@ const BookingSection = () => {
className="max-w-lg mx-auto text-center bg-card rounded-2xl p-10 shadow-elevated" className="max-w-lg mx-auto text-center bg-card rounded-2xl p-10 shadow-elevated"
> >
<CheckCircle className="w-16 h-16 text-primary mx-auto mb-4" /> <CheckCircle className="w-16 h-16 text-primary mx-auto mb-4" />
<h3 className="font-display text-4xl pt-3 pb-5 leading-[1.6] font-bold text-foreground mb-2"> <h3 className="font-display text-2xl md:text-3xl lg:text-4xl pt-3 pb-5 leading-[1.6] font-bold text-foreground mb-2">
¡Reserva recibida! ¡Reserva recibida!
</h3> </h3>
<p className="text-muted-foreground"> <p className="text-muted-foreground">
@@ -186,7 +186,7 @@ const BookingSection = () => {
viewport={{ once: false, amount: 0.15 }} viewport={{ once: false, amount: 0.15 }}
className="text-center mb-10" className="text-center mb-10"
> >
<h2 className="font-display text-6xl md:text-7xl font-bold pt-4 pb-10 leading-[1.8] text-gradient"> <h2 className="font-display text-4xl md:text-5xl lg:text-7xl break-words font-bold pt-4 pb-10 leading-[1.8] text-gradient">
Reserva tu pase Reserva tu pase
</h2> </h2>
<p className="text-muted-foreground"> <p className="text-muted-foreground">

6
src/components/FooterSection.tsx
View File

@@ -17,7 +17,7 @@ const FooterSection = () => (
<div className="grid md:grid-cols-3 gap-8 mb-8"> <div className="grid md:grid-cols-3 gap-8 mb-8">
{/* Brand */} {/* Brand */}
<div> <div>
<h3 className="font-display text-5xl pt-3 pb-6 leading-[1.6] font-bold mb-2">ZoukLambadaBCN</h3> <h3 className="font-display text-3xl md:text-4xl lg:text-5xl pt-3 pb-6 break-words leading-[1.6] font-bold mb-2">ZoukLambadaBCN</h3>
<p className="text-primary-foreground/70 text-sm"> <p className="text-primary-foreground/70 text-sm">
<img src={hacecalor} alt="Hacecalor" className="inline-block w-auto h-12 mr-1" /> <img src={hacecalor} alt="Hacecalor" className="inline-block w-auto h-12 mr-1" />
<img src={activat} alt="Activat" className="inline-block w-auto h-12 mr-1" /> <img src={activat} alt="Activat" className="inline-block w-auto h-12 mr-1" />
@@ -26,7 +26,7 @@ const FooterSection = () => (
{/* Contacto */} {/* Contacto */}
<div> <div>
<h4 className="font-display text-3xl pt-3 pb-5 leading-[1.6] font-semibold mb-2">Contacto</h4> <h4 className="font-display text-xl md:text-2xl lg:text-3xl pt-3 pb-5 leading-[1.6] font-semibold mb-2">Contacto</h4>
<a <a
href={`mailto:${FOOTER.email}`} href={`mailto:${FOOTER.email}`}
className="flex items-center gap-2 text-sm text-primary-foreground/70 hover:text-primary transition-colors" className="flex items-center gap-2 text-sm text-primary-foreground/70 hover:text-primary transition-colors"
@@ -38,7 +38,7 @@ const FooterSection = () => (
{/* Redes */} {/* Redes */}
<div> <div>
<h4 className="font-display text-3xl pt-3 pb-5 leading-[1.6] font-semibold mb-2">Síguenos</h4> <h4 className="font-display text-xl md:text-2xl lg:text-3xl pt-3 pb-5 leading-[1.6] font-semibold mb-2">Síguenos</h4>
<div className="flex gap-3"> <div className="flex gap-3">
{ABOUT_ORG.socials.instagram && ( {ABOUT_ORG.socials.instagram && (
<a href={ABOUT_ORG.socials.instagram} target="_blank" rel="noopener noreferrer" aria-label="Instagram" <a href={ABOUT_ORG.socials.instagram} target="_blank" rel="noopener noreferrer" aria-label="Instagram"

2
src/components/GallerySection.tsx
View File

@@ -15,7 +15,7 @@ const GallerySection = () => (
viewport={{ once: false, amount: 0.15 }} viewport={{ once: false, amount: 0.15 }}
className="text-center mb-12" className="text-center mb-12"
> >
<h2 className="font-display text-6xl md:text-7xl font-bold pt-4 pb-10 leading-[1.8] text-gradient"> <h2 className="font-display text-4xl md:text-5xl lg:text-7xl break-words font-bold pt-4 pb-10 leading-[1.8] text-gradient">
Galería Galería
</h2> </h2>
</motion.div> </motion.div>

4
src/components/HeroSection.tsx
View File

@@ -60,7 +60,7 @@ const HeroSection = () => {
initial={{ opacity: 0, y: 30 }} initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.4 }} transition={{ delay: 0.4 }}
className="font-hero text-5xl md:text-7xl lg:text-8xl font-black text-primary-foreground mb-4 leading-tight" className="font-hero text-4xl md:text-6xl lg:text-8xl break-words font-black text-primary-foreground mb-4 leading-tight"
> >
{EVENT_INFO.name} {EVENT_INFO.name}
</motion.h1> </motion.h1>
@@ -84,7 +84,7 @@ const HeroSection = () => {
{countdownItems.map((item) => ( {countdownItems.map((item) => (
<div key={item.label} className="text-center"> <div key={item.label} className="text-center">
<div className="bg-primary-foreground/10 backdrop-blur-sm border border-primary-foreground/20 rounded-lg px-4 py-3 md:px-6 md:py-4 min-w-[60px] md:min-w-[80px]"> <div className="bg-primary-foreground/10 backdrop-blur-sm border border-primary-foreground/20 rounded-lg px-4 py-3 md:px-6 md:py-4 min-w-[60px] md:min-w-[80px]">
<span className="text-2xl md:text-4xl font-hero font-bold text-primary-foreground"> <span className="text-xl md:text-3xl lg:text-4xl font-hero font-bold text-primary-foreground">
{String(item.value).padStart(2, "0")} {String(item.value).padStart(2, "0")}
</span> </span>
</div> </div>

4
src/components/HotelSection.tsx
View File

@@ -16,7 +16,7 @@ const HotelSection = () => (
viewport={{ once: false, amount: 0.15 }} viewport={{ once: false, amount: 0.15 }}
className="text-center mb-12" className="text-center mb-12"
> >
<h2 className="font-display text-6xl md:text-7xl font-bold pt-4 pb-10 leading-[1.8] text-gradient"> <h2 className="font-display text-4xl md:text-5xl lg:text-7xl break-words font-bold pt-4 pb-10 leading-[1.8] text-gradient">
Alojamiento Alojamiento
</h2> </h2>
<p className="text-muted-foreground max-w-2xl mx-auto"> <p className="text-muted-foreground max-w-2xl mx-auto">
@@ -44,7 +44,7 @@ const HotelSection = () => (
</div> </div>
<div className="p-5"> <div className="p-5">
<h3 className="font-display text-3xl pt-3 pb-5 leading-[1.6] font-bold text-foreground mb-1"> <h3 className="font-display text-xl md:text-2xl lg:text-3xl pt-3 pb-5 leading-[1.6] font-bold text-foreground mb-1">
{room.name} {room.name}
</h3> </h3>
<p className="text-primary font-bold text-xl mb-2">{room.price}</p> <p className="text-primary font-bold text-xl mb-2">{room.price}</p>

2
src/components/Navbar.tsx
View File

@@ -83,7 +83,7 @@ const Navbar = () => {
exit={{ opacity: 0, y: 30 }} exit={{ opacity: 0, y: 30 }}
transition={{ delay: 0.1 * i }} transition={{ delay: 0.1 * i }}
onClick={() => setMenuOpen(false)} onClick={() => setMenuOpen(false)}
className="text-5xl pt-3 pb-6 leading-[1.6] font-display font-medium text-foreground hover:text-primary transition-colors" className="text-3xl md:text-4xl lg:text-5xl pt-3 pb-6 break-words leading-[1.6] font-display font-medium text-foreground hover:text-primary transition-colors"
> >
{link.label} {link.label}
</motion.a> </motion.a>

6
src/components/OrgSection.tsx
View File

@@ -3,11 +3,11 @@ 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 maskStyle = "radial-gradient(196.7px at 50% 264px, rgb(0, 0, 0) 99%, rgba(0, 0, 0, 0) 101%) calc(50% - 176px) 0px / 352px 100%, radial-gradient(196.7px at 50% -176px, rgba(0, 0, 0, 0) 99%, rgb(0, 0, 0) 101%) 50% 78px / 352px 100% repeat-x";
const OrgSection = () => ( const OrgSection = () => (
<section <section
className="section-padding bg-card pb-20 md:pb-28 pt-[200px] md:pt-[240px] -mt-[80px] relative z-20" className="section-padding bg-card pb-20 md:pb-28 pt-[80px] md:pt-[100px] -mt-[32px] relative z-20"
style={{ WebkitMask: maskStyle, mask: maskStyle }} style={{ WebkitMask: maskStyle, mask: maskStyle }}
> >
<div className="container mx-auto"> <div className="container mx-auto">
@@ -19,7 +19,7 @@ const OrgSection = () => (
viewport={{ once: false, amount: 0.15 }} viewport={{ once: false, amount: 0.15 }}
transition={{ duration: 0.6 }} transition={{ duration: 0.6 }}
> >
<h2 className="font-display text-6xl md:text-7xl font-bold pt-4 pb-6 leading-normal mb-6 text-gradient"> <h2 className="font-display text-4xl md:text-5xl lg:text-7xl break-words font-bold pt-4 pb-6 leading-normal mb-6 text-gradient">
{ABOUT_ORG.title} {ABOUT_ORG.title}
</h2> </h2>
<div className="space-y-4 text-muted-foreground leading-relaxed"> <div className="space-y-4 text-muted-foreground leading-relaxed">

6
src/components/PracticalSection.tsx
View File

@@ -15,7 +15,7 @@ const PracticalSection = () => (
viewport={{ once: false, amount: 0.15 }} viewport={{ once: false, amount: 0.15 }}
className="text-center mb-12" className="text-center mb-12"
> >
<h2 className="font-display text-6xl md:text-7xl font-bold pt-4 pb-6 leading-normal text-gradient mb-4"> <h2 className="font-display text-4xl md:text-5xl lg:text-7xl break-words font-bold pt-4 pb-6 leading-normal text-gradient mb-4">
Información Práctica Información Práctica
</h2> </h2>
</motion.div> </motion.div>
@@ -57,7 +57,7 @@ const PracticalSection = () => (
> >
{/* Aeropuertos */} {/* Aeropuertos */}
<div> <div>
<h3 className="font-display text-4xl pt-3 pb-5 leading-[1.6] font-bold text-foreground mb-2 flex items-center gap-2"> <h3 className="font-display text-2xl md:text-3xl lg:text-4xl pt-3 pb-5 leading-[1.6] font-bold text-foreground mb-2 flex items-center gap-2">
<Plane className="w-5 h-5 text-primary" /> Aeropuertos Cercanos <Plane className="w-5 h-5 text-primary" /> Aeropuertos Cercanos
</h3> </h3>
<div className="space-y-3"> <div className="space-y-3">
@@ -72,7 +72,7 @@ const PracticalSection = () => (
{/* Cómo llegar */} {/* Cómo llegar */}
<div> <div>
<h3 className="font-display text-4xl pt-3 pb-5 leading-[1.6] font-bold text-foreground mb-2 flex items-center gap-2"> <h3 className="font-display text-2xl md:text-3xl lg:text-4xl pt-3 pb-5 leading-[1.6] font-bold text-foreground mb-2 flex items-center gap-2">
<Train className="w-5 h-5 text-primary" /> Cómo Llegar <Train className="w-5 h-5 text-primary" /> Cómo Llegar
</h3> </h3>
<div className="space-y-3"> <div className="space-y-3">

4
src/components/ScheduleSection.tsx
View File

@@ -29,7 +29,7 @@ const ScheduleSection = () => (
viewport={{ once: false, amount: 0.15 }} viewport={{ once: false, amount: 0.15 }}
className="text-center mb-12" className="text-center mb-12"
> >
<h2 className="font-display text-6xl md:text-7xl font-bold pt-4 pb-10 leading-[1.8] text-gradient"> <h2 className="font-display text-4xl md:text-5xl lg:text-7xl break-words font-bold pt-4 pb-10 leading-[1.8] text-gradient">
Programa Programa
</h2> </h2>
<p className="text-muted-foreground max-w-2xl mx-auto"> <p className="text-muted-foreground max-w-2xl mx-auto">
@@ -46,7 +46,7 @@ const ScheduleSection = () => (
viewport={{ once: false, amount: 0.15 }} viewport={{ once: false, amount: 0.15 }}
transition={{ delay: di * 0.15 }} transition={{ delay: di * 0.15 }}
> >
<h3 className="font-display text-4xl pt-3 pb-5 leading-[1.6] font-bold text-foreground mb-4 pb-3 border-b-2 border-primary"> <h3 className="font-display text-2xl md:text-3xl lg:text-4xl pt-3 pb-5 leading-[1.6] font-bold text-foreground mb-4 pb-3 border-b-2 border-primary">
{day.day} {day.day}
</h3> </h3>
<div className="space-y-3"> <div className="space-y-3">

14
src/components/StaffSection.tsx
View File

@@ -40,7 +40,7 @@ const StaffSection = () => {
className="flex items-end justify-between gap-4 mb-6 md:mb-8" className="flex items-end justify-between gap-4 mb-6 md:mb-8"
> >
<div className="text-center md:text-left w-full"> <div className="text-center md:text-left w-full">
<h2 className="font-display text-6xl md:text-7xl font-bold pt-4 pb-6 leading-normal text-gradient mb-2"> <h2 className="font-display text-4xl md:text-5xl lg:text-7xl break-words font-bold pt-4 pb-6 leading-normal text-gradient mb-2">
Staff del Evento Staff del Evento
</h2> </h2>
<p className="text-muted-foreground max-w-2xl mx-auto md:mx-0"> <p className="text-muted-foreground max-w-2xl mx-auto md:mx-0">
@@ -70,12 +70,12 @@ const StaffSection = () => {
{/* Carousel scroller */} {/* Carousel scroller */}
<div className="relative"> <div className="relative">
{/* gradient edges */} {/* gradient edges */}
<div className="pointer-events-none absolute inset-y-0 left-0 w-8 bg-gradient-to-r from-background to-transparent rounded-l-2xl" /> <div className="hidden md:block pointer-events-none absolute inset-y-0 left-0 w-8 bg-gradient-to-r from-background to-transparent rounded-l-2xl z-20" />
<div className="pointer-events-none absolute inset-y-0 right-0 w-8 bg-gradient-to-l from-background to-transparent rounded-r-2xl" /> <div className="hidden md:block pointer-events-none absolute inset-y-0 right-0 w-8 bg-gradient-to-l from-background to-transparent rounded-r-2xl z-20" />
<div <div
id="staff-scroller" id="staff-scroller"
className="flex gap-6 overflow-x-auto snap-x snap-mandatory scroll-smooth pb-2 -mx-4 px-4 md:mx-0 md:px-0" className="flex gap-6 overflow-x-auto overflow-y-hidden snap-x snap-mandatory scroll-smooth pb-8 pt-6 -mx-4 px-4 md:mx-0 md:px-0"
> >
{STAFF.map((member, i) => ( {STAFF.map((member, i) => (
<motion.div <motion.div
@@ -88,12 +88,12 @@ const StaffSection = () => {
className="snap-start shrink-0 w-4/5 sm:w-1/2 lg:w-1/3 xl:w-1/4 bg-card rounded-2xl overflow-hidden shadow-card hover:shadow-elevated transition-shadow group" className="snap-start shrink-0 w-4/5 sm:w-1/2 lg:w-1/3 xl:w-1/4 bg-card rounded-2xl overflow-hidden shadow-card hover:shadow-elevated transition-shadow group"
> >
{/* Foto */} {/* Foto */}
<div className="bg-muted flex items-center justify-center overflow-hidden"> <div className="bg-muted flex items-center justify-center overflow-hidden w-full aspect-[4/5]">
{member.image ? ( {member.image ? (
<img <img
src={member.image} src={member.image}
alt={member.name} alt={member.name}
className="w-full h-auto object-contain object-center group-hover:scale-105 transition-transform duration-500 bg-muted" className="w-full h-full object-cover object-top group-hover:scale-105 transition-transform duration-500 bg-muted"
/> />
) : ( ) : (
<User className="w-16 h-16 text-muted-foreground/40" /> <User className="w-16 h-16 text-muted-foreground/40" />
@@ -110,7 +110,7 @@ const StaffSection = () => {
{member.role} {member.role}
</span> </span>
<h3 className="font-display text-3xl pt-3 pb-5 leading-[1.6] font-bold text-foreground mb-1"> <h3 className="font-display text-xl md:text-2xl lg:text-3xl pt-3 pb-5 leading-[1.6] font-bold text-foreground mb-1">
{member.name} {member.name}
</h3> </h3>
<p className="text-sm text-muted-foreground mb-4"> <p className="text-sm text-muted-foreground mb-4">