More staff pictures & styling

src/components/StaffSection.tsx

@@ -1,4 +1,5 @@
-import { motion } from "framer-motion";
+import { useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
 import { STAFF } from "@/data/event-data";
 import { Instagram, User, ChevronLeft, ChevronRight } from "lucide-react";
 
@@ -10,6 +11,14 @@ const roleBadgeClass: Record<string, string> = {
 };
 
 const StaffSection = () => {
+  const [filter, setFilter] = useState<string>("All");
+
+  const filteredStaff = STAFF.filter((member) => {
+    if (filter === "All") return true;
+    if (filter === "Instructors") return member.role === "Instructor";
+    if (filter === "DJs") return member.role === "DJ";
+    return true;
+  });
   // simple ref + helpers for horizontal scroll
   const onPrev = () => {
     const scroller = document.getElementById("staff-scroller");
@@ -67,6 +76,28 @@ const StaffSection = () => {
           </div>
         </motion.div>
 
+        {/* Filters */}
+        <motion.div 
+          initial={{ opacity: 0, y: 10 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: false, amount: 0.15 }}
+          className="flex flex-wrap gap-3 mb-8 justify-center md:justify-start"
+        >
+          {["All", "Instructors", "DJs"].map((role) => (
+            <button
+              key={role}
+              onClick={() => setFilter(role)}
+              className={`px-6 py-2 rounded-full text-sm font-semibold transition-all duration-300 border ${
+                filter === role
+                  ? "bg-primary text-primary-foreground border-primary shadow-md"
+                  : "bg-card text-foreground border-border hover:border-primary/50"
+              }`}
+            >
+              {role === "All" ? "Todos" : role}
+            </button>
+          ))}
+        </motion.div>
+
         {/* Carousel scroller */}
         <div className="relative">
           {/* gradient edges */}
@@ -75,18 +106,20 @@ const StaffSection = () => {
 
           <div
             id="staff-scroller"
-            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"
+            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 min-h-[400px]"
           >
-            {STAFF.map((member, i) => (
-              <motion.div
-                key={member.id}
-                initial={{ opacity: 0, y: 30 }}
-                whileInView={{ opacity: 1, y: 0 }}
-                viewport={{ once: false, amount: 0.15 }}
-                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"
-              >
+            <AnimatePresence mode="popLayout">
+              {filteredStaff.map((member, i) => (
+                <motion.div
+                  key={member.id}
+                  layout
+                  initial={{ opacity: 0, scale: 0.9 }}
+                  animate={{ opacity: 1, scale: 1 }}
+                  exit={{ opacity: 0, scale: 0.9 }}
+                  transition={{ duration: 0.3, 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"
+                >
                 {/* Foto */}
                 <div className="bg-muted flex items-center justify-center overflow-hidden w-full aspect-[4/5]">
                   {member.image ? (
@@ -132,6 +165,7 @@ const StaffSection = () => {
                 </div>
               </motion.div>
             ))}
+            </AnimatePresence>
           </div>
 
           {/* Arrows (mobile overlay) */}