Newer staff members, white party fixings and staff tags

src/components/MixedBookingSection.tsx

@@ -254,7 +254,7 @@ const MixedBookingSection = () => {
               <div className="px-6 pt-8 pb-4 text-center relative min-h-[160px] flex flex-col justify-center">
                 <div className="absolute inset-0 bg-white/70 backdrop-blur-sm" />
                 <div className="relative z-10">
-                  <h3 className="font-display text-3xl md:text-4xl font-black text-slate-800 mb-2">
+                  <h3 className="font-display text-3xl md:text-4xl font-normal text-slate-800 mb-2">
                     WHITE PARTY
                   </h3>
                   <p className="text-slate-700 text-sm font-medium">

src/components/StaffSection.tsx

@@ -4,21 +4,31 @@ import { STAFF } from "@/data/event-data";
 import { Instagram, User, ChevronLeft, ChevronRight } from "lucide-react";
 import { useTranslation } from "react-i18next";
 
-/** Colores de badge por rol */
+/** Colores de badge por rol (variantes naranjas) */
 const roleBadgeClass: Record<string, string> = {
-  Teacher: "bg-primary text-primary-foreground",
-  DJ: "bg-secondary text-secondary-foreground",
+  Teacher: "bg-[hsla(20,90%,55%,1)] text-white",
+  DJ: "bg-[hsla(45,90%,50%,1)] text-white",
+  Specials: "bg-[hsla(15,85%,55%,1)] text-white",
   Organizador: "bg-accent text-accent-foreground",
 };
 
+/** Variantes naranjas para el filtro activo por tag */
+const filterActiveClass: Record<string, string> = {
+  all: "bg-[hsla(37,93%,53%,1)] text-primary-foreground border-[hsla(37,93%,53%,1)] shadow-md",
+  teachers: "bg-[hsla(20,90%,55%,1)] text-primary-foreground border-[hsla(20,90%,55%,1)] shadow-md",
+  djs: "bg-[hsla(45,90%,50%,1)] text-primary-foreground border-[hsla(45,90%,50%,1)] shadow-md",
+  specials: "bg-[hsla(15,85%,55%,1)] text-primary-foreground border-[hsla(15,85%,55%,1)] shadow-md",
+};
+
 const StaffSection = () => {
   const { t } = useTranslation();
-  const [filter, setFilter] = useState<"all" | "teachers" | "djs">("all");
+  const [filter, setFilter] = useState<"all" | "teachers" | "djs" | "specials">("all");
 
   const filteredStaff = STAFF.filter((member) => {
     if (filter === "all") return true;
     if (filter === "teachers") return member.role === "Teacher";
     if (filter === "djs") return member.role === "DJ";
+    if (filter === "specials") return member.role === "Specials";
     return true;
   });
   // simple ref + helpers for horizontal scroll
@@ -90,6 +100,7 @@ const StaffSection = () => {
               { id: "all", labelKey: "staff.filters.all" },
               { id: "teachers", labelKey: "staff.filters.teachers" },
               { id: "djs", labelKey: "staff.filters.djs" },
+              { id: "specials", labelKey: "staff.filters.specials" },
             ] as const
           ).map(({ id, labelKey }) => (
             <button
@@ -97,7 +108,7 @@ const StaffSection = () => {
               onClick={() => setFilter(id)}
               className={`px-6 py-2 rounded-full text-sm font-semibold transition-all duration-300 border ${
                 filter === id
-                  ? "bg-primary text-primary-foreground border-primary shadow-md"
+                  ? filterActiveClass[id]
                   : "bg-card text-foreground border-border hover:border-primary/50"
               }`}
             >
@@ -142,9 +153,13 @@ const StaffSection = () => {
                 </div>
 
                 <div className="p-5">
+                  <h3 className="font-display text-xl md:text-2xl lg:text-3xl pt-3 pb-5 leading-[1.6] font-bold text-foreground mb-1">
+                    {member.name}
+                  </h3>
+
                   {/* Badge de rol */}
                   <span
-                    className={`inline-block text-xs font-semibold px-3 py-1 rounded-full mb-3 ${
+                    className={`inline-block text-xs font-semibold px-3 py-1 rounded-full ${
                       roleBadgeClass[member.role] || "bg-muted text-muted-foreground"
                     }`}
                   >
@@ -154,34 +169,12 @@ const StaffSection = () => {
                           ? "teacher"
                           : member.role === "DJ"
                             ? "dj"
-                            : member.role === "Organizador"
-                              ? "organizer"
+                            : member.role === "Specials"
+                              ? "specials"
                               : undefined;
                       return roleLabelKey ? t(`staff.${roleLabelKey}`) : member.role;
                     })()}
                   </span>
-
-                  <h3 className="font-display text-xl md:text-2xl lg:text-3xl pt-3 pb-5 leading-[1.6] font-bold text-foreground mb-1">
-                    {member.name}
-                  </h3>
-                  <p className="text-sm text-muted-foreground mb-4">
-                    {member.description?.trim().startsWith("[") && member.description?.trim().endsWith("]")
-                      ? t("staff.placeholder")
-                      : 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" />
-                      {t("staff.socials.instagram")}
-                    </a>
-                  )}
                 </div>
               </motion.div>
             ))}