Visual changes and missing info

src/components/StaffSection.tsx

@@ -6,18 +6,18 @@ import { useTranslation } from "react-i18next";
 
 /** Colores de badge por rol */
 const roleBadgeClass: Record<string, string> = {
-  Instructor: "bg-primary text-primary-foreground",
+  Teacher: "bg-primary text-primary-foreground",
   DJ: "bg-secondary text-secondary-foreground",
   Organizador: "bg-accent text-accent-foreground",
 };
 
 const StaffSection = () => {
   const { t } = useTranslation();
-  const [filter, setFilter] = useState<"all" | "instructors" | "djs">("all");
+  const [filter, setFilter] = useState<"all" | "teachers" | "djs">("all");
 
   const filteredStaff = STAFF.filter((member) => {
     if (filter === "all") return true;
-    if (filter === "instructors") return member.role === "Instructor";
+    if (filter === "teachers") return member.role === "Teacher";
     if (filter === "djs") return member.role === "DJ";
     return true;
   });
@@ -88,7 +88,7 @@ const StaffSection = () => {
           {(
             [
               { id: "all", labelKey: "staff.filters.all" },
-              { id: "instructors", labelKey: "staff.filters.instructors" },
+              { id: "teachers", labelKey: "staff.filters.teachers" },
               { id: "djs", labelKey: "staff.filters.djs" },
             ] as const
           ).map(({ id, labelKey }) => (
@@ -150,8 +150,8 @@ const StaffSection = () => {
                   >
                     {(() => {
                       const roleLabelKey =
-                        member.role === "Instructor"
-                          ? "instructor"
+                        member.role === "Teacher"
+                          ? "teacher"
                           : member.role === "DJ"
                             ? "dj"
                             : member.role === "Organizador"