fix: Se modificaron los textos e íconos de la sección Community del Home. Se cambió el estilo de los botones. Se cambió el estilo de los botes de esta sección y se les añadió funcionalidad. Se añadió animación wiggle al botón de 'Ver calendario'. Mejoras en la responsividad de las secciones 'Latest'.

Author: ramen-root

project.org

@@ -6,7 +6,7 @@
 *** DONE Repositorio de GitHub y Versionado
 *** DONE Contenedor
 *** IN-PROGRESS Código
-**** IN-PROGRESS Home
+**** DONE Home
 DEADLINE: <2026-03-13 Fri>
 ***** DONE Hero [100%]
 - [X] Cambiar el color de fondo por algo gris pero con degradados
@@ -236,20 +236,19 @@ export function Hero() {
   - 1 columna en small con tres tarjetas
   - 2 columnas en md con dos tarjetas por columna
   - 3 columnas en lg con 3 tarjetas
-***** NEXT LatestEvent [0%]
-- [ ] Mejorar la responsividad
-- [ ] Mejorar aspecto de los botones y tarjetas
-***** NEXT LatestBlogPost [0%]
-- [ ] Mejorar la responsividad
-- [ ] Mejorar aspecto de los botones y tarjetas
-***** NEXT LatestCourse [0%]
-- [ ] Mejorar la responsividad
-- [ ] Mejorar aspecto de los botones y tarjetas
-***** NEXT Community [%]
-- [ ] Cambiar es estilo de los botones.
-- [ ] Darte funcionalidad a los botones.
-- [ ] Textos que invite a unirse al laboratorio.
-- [ ] Cambiar imágen
+***** DONE LatestEvent [100%]
+- [X] Mejorar la responsividad
+- [X] Mejorar aspecto de los botones y tarjetas
+***** DONE LatestBlogPost [100%]
+- [X] Mejorar la responsividad
+- [X] Mejorar aspecto de los botones y tarjetas
+***** DONE LatestCourse [100%]
+- [X] Mejorar la responsividad
+- [X] Mejorar aspecto de los botones y tarjetas
+***** DONE Community [100%]
+- [X] Textos que invite a unirse al laboratorio.
+- [X] Cambiar es estilo de los botones.
+- [X] Darte funcionalidad a los botones.
 **** TODO Header [0%]
 DEADLINE: <2026-03-13 Fri>
 - [ ] Hacer un indicador para saber en que sección se está, que sea estilo "pestañas libadwaita"
@@ -444,16 +443,17 @@ DEADLINE: <2026-03-03 Tue>
 DEADLINE: <2026-03-17 Tue>
 *** TODO Optimización/Bugs/Testing/Corrección de vulnerabilidades
 DEADLINE: <2026-03-21 Sat>
+**** Tal vez sería bueno cambiar el texto de "Proyectos en desarrollo" del Home, pues hay algunas investigaciones que ya no están en curso.
 **** Añadir una "pantalla de carga" al inicio.
 **** Tema oscuro automático
 **** Hacer que los íconos sean tomados de un svg local
-en blog.tsx hay import { User, ArrowRight, Calendar, Clock } from "lucide-react";
+en blog.tsx hay import { User, ArrowRight, Calendar, Clock } from "lucide-react", etc
 **** Cuando regreso a una página anterior, que no me regrese hasta el inicio, si no que se quede en el mismo sitio antes de dar click.
 **** Mejora el script del blog.
 **** Colocar la información correcta en la fecha de inicio de los miembros.
 **** DONE CursorEffect
 Al estar en dispositivos móviles, el efecto de brillo que sigue al cursos se queda pillado.
-**** Responsibidad
+**** DONE Responsibidad
 Hay un problema con las tarjetas de "Último curso, Último post de blog" en dispositivos móviels el contenido no se ve completo.
 **** Auditoría de ciberseguridad
 ** Deploy

public/events-images/flisol-2023 (Copy).jpg

@@ -291,8 +291,8 @@ export default function App() {
               <Values />
               <FeaturedProjects />
               <LatestEvent onViewEvent={handleEventClick} onViewAllEvents={handleViewAllEvents} />
-              <LatestBlogPost onViewPost={handlePostClick} />
               <LatestCourse onViewCourse={handleCourseClick} onViewAllCourses={handleViewAllCourses} />
+              <LatestBlogPost onViewPost={handlePostClick} />
               <Community />
             </>
           )}

public/events-images/flisol-2023.jpg

@@ -1,31 +1,45 @@
 import { Button } from "./ui/button";
 import { ImageWithFallback } from "./figma/ImageWithFallback";
-import { MessageSquare, Calendar, BookOpen } from "lucide-react";
+import { Pickaxe, BookCheck, Users, ArrowRight } from "lucide-react";
 import { useLanguage } from "./LanguageProvider";
+import { useTheme } from "./ThemeProvider";
 
 export function Community() {
   const { language } = useLanguage();
+  const { theme } = useTheme();
+
+  const glowDark = {
+    default: "0 0 15px rgba(28,113,216,0.15), 0 0 30px rgba(28,113,216,0.1), 0 0 50px rgba(28,113,216,0.08), 0 0 75px rgba(28,113,216,0.05)",
+    hover: "0 0 20px rgba(28,113,216,0.25), 0 0 40px rgba(28,113,216,0.2), 0 0 60px rgba(28,113,216,0.15), 0 0 90px rgba(28,113,216,0.1)"
+  };
+
+  const glowLight = {
+    default: "0 0 20px rgba(28,113,216,0.4), 0 0 40px rgba(28,113,216,0.3), 0 0 70px rgba(28,113,216,0.2), 0 0 100px rgba(28,113,216,0.15)",
+    hover: "0 0 30px rgba(28,113,216,0.5), 0 0 60px rgba(28,113,216,0.4), 0 0 90px rgba(28,113,216,0.3), 0 0 120px rgba(28,113,216,0.2)"
+  };
+
+  const currentGlow = theme === "dark" ? glowDark : glowLight;
 
   const t = {
     title: { en: "Join the Community", es: "Únete a la comunidad" },
     description: {
-      en: "Connect with developers, designers, and free software enthusiasts from around the world. Whether you're a beginner or an expert, there's a place for you here.",
+      en: "Connect with free‑software enthusiasts.",
       es: "Conéctate con entusiastas del software libre."
     },
-    ongoingProjects: { en: "Ongoing Projects", es: "Proyectos en curso" },
-    ongoingProjectsDesc: {
-      en: "You can contribute to ongoing projects",
-      es: "Puedes contribuir a los proyectos en curso"
+    servicioSocial: { en: "Do your social service here", es: "Libera tu servicio social aquí" },
+    servicioSocialDesc: {
+      en: "If you are a student of Computer Engineering at the FI UNAM, you can complete your social service with us, starting from the third semester.",
+      es: "Si eres estudiante de Ingeniería en Computación de la FI UNAM puedes liberar tu servicio social con nosotros, a partir del tercer semestre."
     },
-    eventsHackathons: { en: "Events", es: "Eventos y Reuniones" },
-    eventsHackathonsDesc: {
-      en: "Participate in events",
-      es: "Participa en eventos"
+    events: { en: "Join events and courses", es: "Participa en eventos y cursos" },
+    eventsDesc: {
+      en: "We seek to promote and drive research and development of technologies through projects, courses, conferences, and installation events.",
+      es: "Buscamos promover e impulsar la investigación y desarrollo de tecnologías a través de cursos, conferencias y eventos de instalación."
     },
-    learningResources: { en: "Learning Resources", es: "Libera tu servicio social" },
+    learningResources: { en: "Collaborate on Projects", es: "Colabora en proyectos" },
     learningResourcesDesc: {
-      en: "Access tutorials, guides, and mentorship programs",
-      es: " Si eres estudiante de Ingeniería en Computación de la FI UNAM puedes liberar tu servicio social con nosotros, a partir de tercer semestre"
+      en: "Join active initiatives to strengthen your skills and apply your knowledge. You can become part of frontend, backend, and infrastructure teams, contributing to the development of real, high‑impact solutions.",
+      es: "Únete a los proyectos en marcha para desarrollar tus habilidades y aplicar tus conocimientos. Podrás integrarte en equipos de frontend, backend e infraestructura, contribuyendo al desarrollo de soluciones reales y de alto impacto."
     },
     telegram: { en: "Telegram", es: "Telegram" },
     viewCalendar: { en: "View Calendar", es: "Ver calendario" },
@@ -39,7 +53,7 @@ export function Community() {
           <div className="order-2 lg:order-1">
             <div className="rounded-3xl overflow-hidden shadow-lg border border-primary-foreground/10">
               <ImageWithFallback
-                src="/home/julio-lopez-hqJJPke16kQ-unsplash.jpg"
+                src="/home/gabo-romay-j7Xs-riThbU-unsplash.jpg"
                 alt="Collaboration workspace"
                 className="w-full h-full object-cover"
               />
@@ -57,27 +71,27 @@ export function Community() {
             <div className="space-y-4">
               <div className="flex items-start gap-4">
                 <div className="w-12 h-12 bg-primary-foreground/10 rounded-2xl flex items-center justify-center flex-shrink-0 border border-primary-foreground/20">
-                  <MessageSquare className="h-6 w-6" />
+                  <BookCheck className="h-6 w-6" />
                 </div>
                 <div>
-                  <h3 className="text-xl mb-1">{t.ongoingProjects[language]}</h3>
-                  <p className="text-primary-foreground/80">{t.ongoingProjectsDesc[language]}</p>
+                  <h3 className="text-xl mb-1">{t.servicioSocial[language]}</h3>
+                  <p className="text-primary-foreground/80">{t.servicioSocialDesc[language]}</p>
                 </div>
               </div>
 
               <div className="flex items-start gap-4">
                 <div className="w-12 h-12 bg-primary-foreground/10 rounded-2xl flex items-center justify-center flex-shrink-0 border border-primary-foreground/20">
-                  <Calendar className="h-6 w-6" />
+                  <Users className="h-6 w-6" />
                 </div>
                 <div>
-                  <h3 className="text-xl mb-1">{t.eventsHackathons[language]}</h3>
-                  <p className="text-primary-foreground/80">{t.eventsHackathonsDesc[language]}</p>
+                  <h3 className="text-xl mb-1">{t.events[language]}</h3>
+                  <p className="text-primary-foreground/80">{t.eventsDesc[language]}</p>
                 </div>
               </div>
 
               <div className="flex items-start gap-4">
                 <div className="w-12 h-12 bg-primary-foreground/10 rounded-2xl flex items-center justify-center flex-shrink-0 border border-primary-foreground/20">
-                  <BookOpen className="h-6 w-6" />
+                  <Pickaxe className="h-6 w-6" />
                 </div>
                 <div>
                   <h3 className="text-xl mb-1">{t.learningResources[language]}</h3>
@@ -87,11 +101,18 @@ export function Community() {
             </div>
 
             <div className="flex flex-wrap gap-4 pt-4">
-              <Button size="lg" variant="secondary">
-                {t.telegram[language]}
+              <Button size="lg" variant="secondary" className="gap-2 border-2 transition-all duration-300"
+                style={{ animation: "wiggle 1s ease-in-out infinite", boxShadow: currentGlow.default }}
+                onMouseEnter={(e) => { e.currentTarget.style.boxShadow = currentGlow.hover; }}
+                onMouseLeave={(e) => { e.currentTarget.style.boxShadow = currentGlow.default; }}
+                onClick={() => window.location.hash = "#events"}
+              >
+                {t.viewCalendar[language]} <ArrowRight className="h-4 w-4" />
               </Button>
-              <Button size="lg" variant="outline" className="border-2">
-                {t.viewCalendar[language]}
+              <Button size="lg" variant="outline" asChild>
+                <a href="https://t.me/lidsol" target="_blank" rel="noopener noreferrer">
+                  {t.telegram[language]}
+                </a>
               </Button>
             </div>
           </div>

src/App.tsx

@@ -23,7 +23,7 @@ export function LatestBlogPost({ onViewPost, showHeader = true, showViewAll = tr
     viewPost: { en: "Read Full Article", es: "Leer Artículo Completo" },
     viewAll: { en: "View All Posts", es: "Ver Todos los Posts" },
     readTime: { en: "min read", es: "min de lectura" },
-    new: { en: "New", es: "Nuevo" },
+    new: { en: "Last", es: "Último" },
   };
 
   const title = latestPost.title[language] || latestPost.title.es || '';
@@ -83,23 +83,26 @@ export function LatestBlogPost({ onViewPost, showHeader = true, showViewAll = tr
                   ))}
                 </div>
               </div>
-              <Button
-                className="gap-2"
-                onClick={() => onViewPost(latestPost.id)}
-              >
-                {t.viewPost[language]} <ArrowRight className="h-4 w-4" />
-              </Button>
+              <div className="flex flex-col md:flex-row gap-3">
+                <Button
+                  className="gap-2 flex-1"
+                  onClick={() => onViewPost(latestPost.id)}
+                >
+                  {t.viewPost[language]} <ArrowRight className="h-4 w-4" />
+                </Button>
+                {showViewAll && (
+                  <Button
+                    variant="outline"
+                    className="gap-2"
+                    onClick={() => window.location.hash = "#blog"}
+                  >
+                    {t.viewAll[language]}
+                  </Button>
+                )}
+              </div>
             </div>
           </div>
         </Card>
-
-        {showViewAll && (
-          <div className="text-center mt-16">
-            <Button size="lg" variant="outline" className="gap-2" onClick={() => window.location.hash = "#blog"}>
-              {t.viewAll[language]} <ArrowRight className="h-4 w-4" />
-            </Button>
-          </div>
-        )}
       </div>
     </section>
   );

src/components/Community.tsx

@@ -89,7 +89,7 @@ export function LatestCourse({ onViewCourse, onViewAllCourses }: LatestCoursePro
                   </div>
                 </div>
               </div>
-              <div className="flex gap-3">
+              <div className="flex flex-col md:flex-row gap-3">
                 <Button 
                   className="gap-2 flex-1"
                   onClick={() => onViewCourse(latestCourse.id)}

src/components/LatestBlogPost.tsx

@@ -13,7 +13,7 @@ interface LatestEventProps {
 
 export function LatestEvent({ onViewEvent, onViewAllEvents }: LatestEventProps) {
   const { language } = useLanguage();
-  
+
   // Get the first upcoming event
   const latestEvent = events.find(e => e.status === "upcoming") || events[0];
 
@@ -32,8 +32,8 @@ export function LatestEvent({ onViewEvent, onViewAllEvents }: LatestEventProps)
 
         <Card className="overflow-hidden hover:shadow-xl transition-all duration-300 border-border/60 max-w-5xl mx-auto">
           <div className="grid md:grid-cols-2 gap-0">
-            <div 
-              className="aspect-video md:aspect-auto relative overflow-hidden cursor-pointer" 
+            <div
+              className="aspect-video md:aspect-auto relative overflow-hidden cursor-pointer"
               onClick={() => onViewEvent(latestEvent.id)}
             >
               <ImageWithFallback
@@ -71,15 +71,15 @@ export function LatestEvent({ onViewEvent, onViewAllEvents }: LatestEventProps)
                   </div>
                 </div>
               </div>
-              <div className="flex gap-3">
-                <Button 
+              <div className="flex flex-col md:flex-row gap-3">
+                <Button
                   className="gap-2 flex-1"
                   onClick={() => onViewEvent(latestEvent.id)}
                 >
                   {t.viewMore[language]} <ArrowRight className="h-4 w-4" />
                 </Button>
-                <Button 
-                  variant="outline" 
+                <Button
+                  variant="outline"
                   className="gap-2"
                   onClick={onViewAllEvents}
                 >