Responsive en celular, aplicado segun las sugerencias hechas

Author: DavidVargas-Ctrl

src/components/home/sections/members.tsx

@@ -14,13 +14,16 @@ export function Members() {
     const [selectedMember, setSelectedMember] = useState<Member | null>(null);
     const [isModalOpen, setIsModalOpen] = useState(false);
 
-    const { data: members, isLoading } = useQuery({
+    const { data: members, isLoading } = useQuery<Member[]>({
         queryKey: ['members'],
         queryFn: async () => {
             return await getMembers()
         }
     });
 
+    // Garantizar que `membersList` siempre sea un arreglo para evitar errores al usar .filter/.map
+    const membersList: Member[] = Array.isArray(members) ? members : [];
+
     const handleMemberClick = (member: Member) => {
         setSelectedMember(member);
         setIsModalOpen(true);
@@ -49,7 +52,7 @@ export function Members() {
                         <p className="text-gray-500">Cargando miembros...</p>
                     </div>
                 )}
-                {!isLoading && members.filter(member => member.active).map((member) => (
+                {!isLoading && membersList.filter(member => member.active).map((member) => (
                     <MemberCard
                         key={member._id}
                         member={member}

src/components/members/inactive-members.tsx

@@ -6,7 +6,7 @@ import { InactiveMembersTimeline } from "./sections/timeline";
 
 const InactiveMembers = () => {
 
-    const { data: members, isLoading } = useQuery({
+    const { data: members, isLoading } = useQuery<Member[]>({
         queryKey: ['members'],
         queryFn: async () => {
             const members : Member[] = await getMembers();
@@ -17,9 +17,12 @@ const InactiveMembers = () => {
         }
     });
 
+    // Asegurar que `membersList` sea siempre un arreglo
+    const membersList: Member[] = Array.isArray(members) ? members : [];
+
 
     // Group and sort members by period
-    const grouped = isLoading ? {} as Record<string, Member[]> : members.reduce(
+    const grouped = isLoading ? {} as Record<string, Member[]> : membersList.reduce(
         (acc, m) => {
             const period = m.memberSince || "Sin periodo";
             (acc[period] = acc[period] || []).push(m);

src/components/shared/footer.tsx

@@ -71,16 +71,20 @@ export default function Footer() {
   return (
     <footer className="w-full px-6 py-8 bg-white/80 dark:bg-gray-900/80 backdrop-blur-sm shadow-lg border-t border-gray-200/20 dark:border-gray-700/20 mt-auto">
       <div className="max-w-7xl mx-auto">
-        <div className="grid grid-cols-3 items-center">
+        {/*
+          Responsive
+        */}
+        <div className="grid grid-cols-1 md:grid-cols-3 items-center gap-4 md:gap-0 text-center md:text-left">
           {/* Información izquierda */}
-          <div className="flex items-center justify-self-start whitespace-nowrap">
+          <div className="flex items-center justify-center md:justify-start whitespace-nowrap">
             <span className="font-montserrat text-lg md:text-lg text-[--azul-noche] dark:text-white">
               Capítulo Javeriano
             </span>
-            <span className="ml-2 md:text-xl font-semibold text-[--azul-noche] dark:text-white" style={{"fontFamily": "'bc-liguria', sanserif"}}>
+            <span className="ml-2 md:text-xl font-semibold text-[--azul-noche] dark:text-white" style={{ fontFamily: "'bc-liguria', sanserif" }}>
               ACM
             </span>
           </div>
+
           {/* Contribuidores del proyecto en el centro*/}
           <div className="flex justify-center relative z-0">
             <AnimatedTooltip
@@ -90,8 +94,8 @@ export default function Footer() {
             />
           </div>
 
-          {/* Redes sociales a la derecha */}
-          <div className="flex items-center justify-self-end gap-3 md:gap-4">
+          {/* Redes sociales a la derecha*/}
+          <div className="flex items-center justify-center md:justify-end gap-3 md:gap-4">
             <a
               href="https://www.linkedin.com/company/capitulo-javeriano-acm/"
               target="_blank"

src/components/shared/ui/tooltip.tsx

@@ -99,6 +99,12 @@ function AnimatedTooltipComponent({
           onMouseEnter={() => setHoveredIndex(item.id)}
           onMouseLeave={() => setHoveredIndex(null)}
         >
+          {/* */}
+          <div className="flex md:hidden justify-center mb-1">
+            <span className="w-14 text-center text-[5px] font-montserrat from-neutral-500 dark:text-white truncate">
+              {item.name}
+            </span>
+          </div>
           <AnimatePresence>
             {hoveredIndex === item.id && isClient && (
               <motion.div
@@ -176,7 +182,7 @@ function AnimatedTooltipComponent({
   );
 }
 
-// Export dinamico para evitar problemas de SSR
+
 const AnimatedTooltip = dynamic(() => Promise.resolve(AnimatedTooltipComponent), {
   ssr: false,
   loading: () => (