Hotfixes on height, staff section & carrousel
This commit is contained in:
Antoni Nuñez Romeu
@@ -1,6 +1,6 @@
|
||||
import { motion } from "framer-motion";
|
||||
import { STAFF } from "@/data/event-data";
|
||||
import { Instagram, User } from "lucide-react";
|
||||
import { Instagram, User, ChevronLeft, ChevronRight } from "lucide-react";
|
||||
|
||||
/** Colores de badge por rol */
|
||||
const roleBadgeClass: Record<string, string> = {
|
||||
@@ -9,81 +9,148 @@ const roleBadgeClass: Record<string, string> = {
|
||||
Organizador: "bg-accent text-accent-foreground",
|
||||
};
|
||||
|
||||
const StaffSection = () => (
|
||||
<section id="staff" className="section-padding bg-background">
|
||||
<div className="container mx-auto">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
className="text-center mb-12"
|
||||
>
|
||||
<h2 className="font-display text-4xl md:text-5xl font-bold text-gradient mb-4">
|
||||
Staff del Evento
|
||||
</h2>
|
||||
<p className="text-muted-foreground max-w-2xl mx-auto">
|
||||
Conoce a los artistas e instructores que harán de este festival una experiencia inolvidable.
|
||||
</p>
|
||||
</motion.div>
|
||||
const StaffSection = () => {
|
||||
// simple ref + helpers for horizontal scroll
|
||||
const onPrev = () => {
|
||||
const scroller = document.getElementById("staff-scroller");
|
||||
if (!scroller) return;
|
||||
const card = scroller.querySelector("[data-staff-card]") as HTMLElement | null;
|
||||
const delta = card ? card.offsetWidth + 24 : 320; // 24 ~ gap-x-6
|
||||
scroller.scrollBy({ left: -delta, behavior: "smooth" });
|
||||
};
|
||||
const onNext = () => {
|
||||
const scroller = document.getElementById("staff-scroller");
|
||||
if (!scroller) return;
|
||||
const card = scroller.querySelector("[data-staff-card]") as HTMLElement | null;
|
||||
const delta = card ? card.offsetWidth + 24 : 320;
|
||||
scroller.scrollBy({ left: delta, behavior: "smooth" });
|
||||
};
|
||||
|
||||
<div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{STAFF.map((member, i) => (
|
||||
<motion.div
|
||||
key={member.id}
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: i * 0.1 }}
|
||||
className="bg-card rounded-2xl overflow-hidden shadow-card hover:shadow-elevated transition-shadow group"
|
||||
return (
|
||||
<section id="staff" className="section-padding bg-background">
|
||||
<div className="container mx-auto">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
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-4xl md:text-5xl font-bold text-gradient mb-2">
|
||||
Staff del Evento
|
||||
</h2>
|
||||
<p className="text-muted-foreground max-w-2xl mx-auto md:mx-0">
|
||||
Conoce a los artistas e instructores que harán de este festival una experiencia inolvidable.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Arrows (desktop) */}
|
||||
<div className="hidden md:flex items-center gap-2 shrink-0">
|
||||
<button
|
||||
aria-label="Anterior"
|
||||
onClick={onPrev}
|
||||
className="h-10 w-10 rounded-full bg-card border border-input text-foreground hover:bg-accent hover:text-accent-foreground grid place-items-center shadow-sm"
|
||||
>
|
||||
<ChevronLeft className="h-5 w-5" />
|
||||
</button>
|
||||
<button
|
||||
aria-label="Siguiente"
|
||||
onClick={onNext}
|
||||
className="h-10 w-10 rounded-full bg-card border border-input text-foreground hover:bg-accent hover:text-accent-foreground grid place-items-center shadow-sm"
|
||||
>
|
||||
<ChevronRight className="h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* 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
|
||||
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"
|
||||
>
|
||||
{/* Foto */}
|
||||
<div className="aspect-square bg-muted flex items-center justify-center overflow-hidden">
|
||||
{member.image ? (
|
||||
<img
|
||||
src={member.image}
|
||||
alt={member.name}
|
||||
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
|
||||
/>
|
||||
) : (
|
||||
<User className="w-16 h-16 text-muted-foreground/40" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="p-5">
|
||||
{/* Badge de rol */}
|
||||
<span
|
||||
className={`inline-block text-xs font-semibold px-3 py-1 rounded-full mb-3 ${
|
||||
roleBadgeClass[member.role] || "bg-muted text-muted-foreground"
|
||||
}`}
|
||||
{STAFF.map((member, i) => (
|
||||
<motion.div
|
||||
key={member.id}
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: i * 0.05 }}
|
||||
data-staff-card
|
||||
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"
|
||||
>
|
||||
{member.role}
|
||||
</span>
|
||||
{/* Foto */}
|
||||
<div className="aspect-square bg-muted flex items-center justify-center overflow-hidden">
|
||||
{member.image ? (
|
||||
<img
|
||||
src={member.image}
|
||||
alt={member.name}
|
||||
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
|
||||
/>
|
||||
) : (
|
||||
<User className="w-16 h-16 text-muted-foreground/40" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
<h3 className="font-display text-lg font-bold text-foreground mb-2">
|
||||
{member.name}
|
||||
</h3>
|
||||
<p className="text-sm text-muted-foreground mb-4">
|
||||
{member.description}
|
||||
</p>
|
||||
<div className="p-5">
|
||||
{/* Badge de rol */}
|
||||
<span
|
||||
className={`inline-block text-xs font-semibold px-3 py-1 rounded-full mb-3 ${
|
||||
roleBadgeClass[member.role] || "bg-muted text-muted-foreground"
|
||||
}`}
|
||||
>
|
||||
{member.role}
|
||||
</span>
|
||||
|
||||
{/* Redes sociales */}
|
||||
{member.socials?.instagram && (
|
||||
<a
|
||||
href={member.socials.instagram}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-1.5 text-sm text-primary hover:text-primary/80 transition-colors"
|
||||
>
|
||||
<Instagram className="w-4 h-4" />
|
||||
Instagram
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
<h3 className="font-display text-lg font-bold text-foreground mb-2">
|
||||
{member.name}
|
||||
</h3>
|
||||
<p className="text-sm text-muted-foreground mb-4">
|
||||
{member.description}
|
||||
</p>
|
||||
|
||||
{/* Redes sociales */}
|
||||
{member.socials?.instagram && (
|
||||
<a
|
||||
href={member.socials.instagram}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-1.5 text-sm text-primary hover:text-primary/80 transition-colors"
|
||||
>
|
||||
<Instagram className="w-4 h-4" />
|
||||
Instagram
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Arrows (mobile overlay) */}
|
||||
<div className="md:hidden absolute inset-y-1/2 -translate-y-1/2 left-1 right-1 flex items-center justify-between pointer-events-none">
|
||||
<button
|
||||
aria-label="Anterior"
|
||||
onClick={onPrev}
|
||||
className="pointer-events-auto h-9 w-9 rounded-full bg-card/90 backdrop-blur border border-input text-foreground hover:bg-accent hover:text-accent-foreground grid place-items-center shadow"
|
||||
>
|
||||
<ChevronLeft className="h-5 w-5" />
|
||||
</button>
|
||||
<button
|
||||
aria-label="Siguiente"
|
||||
onClick={onNext}
|
||||
className="pointer-events-auto h-9 w-9 rounded-full bg-card/90 backdrop-blur border border-input text-foreground hover:bg-accent hover:text-accent-foreground grid place-items-center shadow"
|
||||
>
|
||||
<ChevronRight className="h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default StaffSection;
|
||||
|
||||
Reference in New Issue
Block a user