More staff pictures & styling

src/components/FloatingButton.tsx

@@ -47,10 +47,10 @@ const FloatingButton = () => {
           </Button>
           <button
             onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
-            className="self-center bg-foreground/20 backdrop-blur-sm p-2 rounded-full hover:bg-foreground/30 transition-colors"
+            className="self-center bg-gray-500 text-white p-2 rounded-full hover:bg-gray-600 transition-colors shadow"
             aria-label="Volver arriba"
           >
-            <ChevronUp className="w-4 h-4 text-foreground" />
+            <ChevronUp className="w-5 h-5" />
           </button>
         </motion.div>
       )}

src/components/HeroSection.tsx

@@ -60,7 +60,7 @@ const HeroSection = () => {
           initial={{ opacity: 0, y: 30 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ delay: 0.4 }}
-          className="font-hero text-4xl md:text-6xl lg:text-8xl break-words font-black text-primary-foreground mb-4 leading-tight"
+          className="font-hero text-4xl md:text-7xl lg:text-8xl font-bold text-primary-foreground mb-4 leading-tight"
         >
           {EVENT_INFO.name}
         </motion.h1>
@@ -84,7 +84,7 @@ const HeroSection = () => {
           {countdownItems.map((item) => (
             <div key={item.label} className="text-center">
               <div className="bg-primary-foreground/10 backdrop-blur-sm border border-primary-foreground/20 rounded-lg px-4 py-3 md:px-6 md:py-4 min-w-[60px] md:min-w-[80px]">
-                <span className="text-xl md:text-3xl lg:text-4xl font-hero font-bold text-primary-foreground">
+                <span className="text-2xl md:text-4xl font-hero font-bold text-primary-foreground">
                   {String(item.value).padStart(2, "0")}
                 </span>
               </div>

src/components/Navbar.tsx

@@ -32,7 +32,7 @@ const Navbar = () => {
       className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
         scrolled
           ? "bg-background shadow-card"
-          : "bg-background"
+          : "bg-background-white"
       }`}
     >
       <div className="container mx-auto flex items-center justify-between px-4 py-3 relative z-50">
@@ -47,7 +47,7 @@ const Navbar = () => {
             <a
               key={link.href}
               href={link.href}
-              className="text-sm font-medium text-foreground/80 hover:text-primary transition-colors"
+              className="text-sm font-medium text-black/80 hover:text-primary transition-colors"
             >
               {link.label}
             </a>

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) */}