Changes

src/components/StaffSection.tsx

@@ -0,0 +1,89 @@
+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;