90 lines
3.1 KiB
TypeScript
90 lines
3.1 KiB
TypeScript
import { motion } from "framer-motion";
|
|
import { STAFF } from "@/data/event-data";
|
|
import { Instagram, User } from "lucide-react";
|
|
|
|
/** Colores de badge por rol */
|
|
const roleBadgeClass: Record<string, string> = {
|
|
Instructor: "bg-primary text-primary-foreground",
|
|
DJ: "bg-secondary text-secondary-foreground",
|
|
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>
|
|
|
|
<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"
|
|
>
|
|
{/* 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"
|
|
}`}
|
|
>
|
|
{member.role}
|
|
</span>
|
|
|
|
<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>
|
|
</div>
|
|
</section>
|
|
);
|
|
|
|
export default StaffSection;
|