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

src/data/event-data.ts

@@ -17,13 +17,15 @@ import pablolena from "@/assets/staff/pablolena.jpg";
 import djbiel from "@/assets/staff/djbiel.jpg";
 import djwinx from "@/assets/staff/djwinx.jpg";
 import djklebynho from "@/assets/staff/djklebynho.jpg";
+import letialex from "@/assets/staff/letialex.jpg";
+import djcathie from "@/assets/staff/djcathie.jpg";
 
 
 
 // ---- INFORMACIÓN GENERAL DEL EVENTO ----
 export const EVENT_INFO = {
   name: "ZoukLambadaBCN Beach Festival",
-  subtitle: "by ZoukLambadaBCN",
+  subtitle: "Edición 2026",
   /** Fecha del evento — formato ISO para el countdown */
   date: "2026-09-04T12:00:00",
   /** Fecha legible para mostrar */
@@ -75,10 +77,13 @@ export const ABOUT_EVENT = {
 // ---- SOBRE ZOUKLAMBADABCN ----
 export const ABOUT_ORG = {
   title: "ZoukLambadaBCN",
-  history: `[Historia del grupo organizador. Cuándo se fundó, 
-  cómo empezó, qué han logrado hasta ahora.]`,
-  philosophy: `[Filosofía del grupo. Qué valores defienden, 
-  qué quieren aportar a la comunidad de baile.]`,
+  history: `Este año 2026 se celebra el 18º Beach Festival de ZoukLambada, donde profesores, artistas y DJs de todo el mundo se reúnen para compartir su pasión por el baile en un ambiente único y especial.
+  Compartimos nuestro amor por la lambada, nuestra raíz, nacida en la década de 1980 en Brasil. Con los años ha ido evolucionando sus movimientos fluídos siguiendo la musicalidad
+  de esta bonita danza y creando diferentes estilos.`,
+  philosophy: `Durante el evento Beach Festival ZoukLambada Bcn podrás disfrutar de diferentes estilos, sentirás la evolución de esta danza y la mágia que desprende.
+  De viernes a domingo podrás disfrutar de workshops, parties, shows y mucho más.
+  Sin olvidarnos del lunes y su fiesta de blanco.
+  Puedes ver el programa completo en la sección "Programa" y reservar tu pase en la sección "Reservar", así como reservar tu habitaciń en la sección "Alojamiento", ¡¡no te quedes sin!!`,
   socials: {
     instagram: "https://instagram.com/zouklambadabcn",
     facebook: "https://facebook.com/zouklambadabcn",
@@ -178,14 +183,25 @@ export const STAFF = [
   },
   {
     id: "9",
-    name: "[Nombre Special Guest]",
-    role: "Special Guest" as const,
-    description: "[Breve biografía del invitado especial]",
-    image: "",
+    name: "[Leticia & Alex]",
+    role: "Instructor" as const,
+    description: "[Breve biografía del instructor]",
+    image: letialex,
     socials: {
       instagram: "",
     },
   },
+  {
+    id: "10",
+    name: "[DJ Cathie]",
+    role: "DJ" as const,
+    description: "[Breve biografía del DJ]",
+    image: djcathie,
+    socials: {
+      instagram: "",
+      soundcloud: "",
+    },
+  },
 ];
 
 // ---- PROGRAMA DEL EVENTO ----

src/index.css

@@ -138,6 +138,7 @@
   /* Card shadow */
   .shadow-card {
     box-shadow: var(--shadow-card);
+    background-color: hsl(40, 40%, 94%);
   }
 
   .shadow-elevated {
@@ -148,4 +149,12 @@
   .section-padding {
     @apply px-4 py-16 md:px-8 md:py-24 lg:px-16;
   }
+
+  .bg-background-white {
+    background-color: hsla(40, 40%, 94.1%, 0.2);
+  }
+
+  .text-black {
+    color: hsla(0, 0%, 0%, 0.8);
+  }
 }