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",
+  Teacher: "bg-[hsla(20,90%,55%,1)] text-white",
-  DJ: "bg-secondary text-secondary-foreground",
+  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"
+                            : member.role === "Specials"
-                              ? "organizer"
+                              ? "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>
             ))}

src/data/event-data.ts

@@ -27,6 +27,9 @@ import brazromi from "@/assets/staff/braz_romi.jpg";
 import emanoel from "@/assets/staff/emanoel.jpg";
 import didipatri from "@/assets/staff/didipatri.jpg";
 import djhique from "@/assets/staff/djhique.jpg";
+import djgg from "@/assets/staff/djgg.jpg";
+import djgalzo from "@/assets/staff/djgalzo.jpg";
+import aiysha from "@/assets/staff/aiysha.jpg";
 
 import gal1 from "@/assets/gallery/gal1.jpg";
 import gal2 from "@/assets/gallery/gal2.jpg";
@@ -186,6 +189,24 @@ export const STAFF = [
     role: "DJ" as const,
     image: djhique,
   },
+  {
+    id: "17",
+    name: "DJ GG",
+    role: "DJ" as const,
+    image: djgg,
+  },
+  {
+    id: "18",
+    name: "DJ Galzo",
+    role: "DJ" as const,
+    image: djgalzo,
+  },
+  {
+    id: "19",
+    name: "Aiysha",
+    role: "Specials" as const,
+    image: aiysha,
+  }
 ];
 
 // ---- PROGRAMA DEL EVENTO ----

src/locales/en.json

@@ -44,11 +44,13 @@
     "teacher": "Teacher",
     "dj": "DJ",
     "organizer": "Organizer",
+    "specials": "Special Guests",
     "placeholder": "[Teacher biography]",
     "filters": {
       "all": "All",
       "teachers": "Teachers",
-      "djs": "DJs"
+      "djs": "DJs",
+      "specials": "Special Guests"
     },
     "socials": {
       "instagram": "Instagram"
@@ -154,9 +156,9 @@
     "fullFeatures": "All workshops|All social dances|Live shows|DJ sets",
     "partyDescription": "Price for each party individually, even pool parties.",
     "partyFeatures": "Friday party|Saturday party|Sunday farewell party|DJ sets",
-    "whitepartyDescription": "Closing party in Sala Vivaldi, with an elegant and exclusive atmosphere.",
+    "whitepartyDescription": "Closing party in Sala Vivaldi, come to end the beach festival with style.",
-    "whitepartyFeatures": "Dress code: White|Amazing DJ",
+    "whitepartyFeatures": "Dress code: White|Best music",
-    "whitepartyNotIncluded": "Not included in Full Pass - Separate payment required",
+    "whitepartyNotIncluded": "Not included in Full Pass - Paid separately",
     "whitepartyTime": "21h to 1h",
     "whitepartyDate": "Monday 7 September",
     "goToReservations": "Go to reservations",

src/locales/es.json

@@ -44,11 +44,13 @@
     "teacher": "Profesor",
     "dj": "DJ",
     "organizer": "Organizador",
+    "specials": "Artistas Invitados",
     "placeholder": "[Breve biografía del profesor]",
     "filters": {
       "all": "Todos",
       "teachers": "Profesores",
-      "djs": "DJs"
+      "djs": "DJs",
+      "specials": "Artistas Invitados"
     },
     "socials": {
       "instagram": "Instagram"
@@ -154,9 +156,9 @@
     "fullFeatures": "Todos los workshops|Todas las social dances|Shows en vivo|DJ sets",
     "partyDescription": "Precio individual por cada fiesta, incluso las pool parties.",
     "partyFeatures": "Fiesta del viernes|Fiesta del sábado|Fiesta despedida del domingo|DJ sets",
-    "whitepartyDescription": "Fiesta de clausura en la Sala Vivaldi, con un ambiente elegante y exclusivo.",
+    "whitepartyDescription": "Fiesta de clausura en la Sala Vivaldi, ven a terminar el beach festival con estilo.",
-    "whitepartyFeatures": "Código de vestimenta: Blanco|DJ Inigualable",
+    "whitepartyFeatures": "Código de vestimenta: Blanco|La mejor música",
-    "whitepartyNotIncluded": "No incluido en Full Pass - Pago separado requerido",
+    "whitepartyNotIncluded": "No incluido en Full Pass - Se paga a parte",
     "whitepartyTime": "21h a 1h",
     "whitepartyDate": "Lunes 7 de Septiembre",
     "goToReservations": "Ir a reservas",

vite.config.ts

@@ -6,7 +6,7 @@ import { componentTagger } from "lovable-tagger";
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => ({
   server: {
-    origin: "http://0.0.0.0:8080",
+    host: "::",
     port: 8080,
     hmr: {
       overlay: false,