Ichitux/lambada-fiesta-live
1
0
Fork 0
mirror of https://github.com/Ichitux/lambada-fiesta-live.git synced 2026-05-15 16:52:21 +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

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"
>
<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
</h2>
<p className="text-muted-foreground max-w-2xl mx-auto md:mx-0">
@@ -70,12 +70,12 @@ const StaffSection = () => {
{/* Carousel scroller */}
<div className="relative">
{/* 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="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 left-0 w-8 bg-gradient-to-r from-background to-transparent rounded-l-2xl z-20" />
<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
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) => (
<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"
>
{/* 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 ? (
<img
src={member.image}
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" />
@@ -110,7 +110,7 @@ const StaffSection = () => {
{member.role}
</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}
</h3>
<p className="text-sm text-muted-foreground mb-4">