Merge pull request #16 from IEEE-ESTl/proximosCambios

Proximos cambios

config.json

@@ -4,6 +4,7 @@
     "socialNetworks": {
         "instagram": "https://www.instagram.com/ieee.estl/",
         "linkedin": "https://www.linkedin.com/company/ieee-estl",
-        "github": "https://github.com/IEEE-ESTl/IEEE-ESTl-Student-Web-Hub"
+        "github": "https://github.com/IEEE-ESTl/IEEE-ESTl-Student-Web-Hub",
+        "facebook": "https://www.facebook.com/share/EMND6vTrEyrmhkYP/?mibextid=LQQJ4d"
     }
 }

src/components/Carousel.astro

@@ -5,13 +5,18 @@ import "./cssInicio/navInicio.css";
 import "./cssInicio/variables.css";
 
 import branchLogo from "/public/Inicio/ieeelogo1.png";
-
 import ieeeLogo from "/public/Inicio/ieeelogo2.png";
 import csocietyLogo from "/public/Inicio/csociety_logo.png";
 import uaehLogo from "/public/Inicio/uaeh_logo_color.png";
 import estlLogo from "/public/Inicio/logoESTL.png";
 
-const Logos = [branchLogo, ieeeLogo, csocietyLogo, uaehLogo, estlLogo];
+const Logos = [
+  { src: branchLogo, alt: 'Branch Logo' },
+  { src: ieeeLogo, alt: 'IEEE Logo' },
+  { src: csocietyLogo, alt: 'Computer Society Logo' },
+  { src: uaehLogo, alt: 'UAEH Logo' },
+  { src: estlLogo, alt: 'ESTL Logo' },
+];
 ---
 
 <div>
@@ -20,11 +25,12 @@ const Logos = [branchLogo, ieeeLogo, csocietyLogo, uaehLogo, estlLogo];
             <div>
                 <ul>
                     {
-                        Logos.map((logo, index) => (
-                            <li>
-                                <img src={logo.src} />
-                            </li>
+                       Logos.map((logo, index) => (
+                        <li>
+                            <img src={logo.src.src} alt={logo.alt} />
+                        </li>
                         ))
+
                     }
                 </ul>
             </div>
@@ -33,7 +39,7 @@ const Logos = [branchLogo, ieeeLogo, csocietyLogo, uaehLogo, estlLogo];
                     {
                         Logos.map((logo, index) => (
                             <li>
-                                <img src={logo.src} />
+                                <img src={logo.src.src} alt={logo.alt}/>
                             </li>
                         ))
                     }
@@ -67,6 +73,7 @@ const Logos = [branchLogo, ieeeLogo, csocietyLogo, uaehLogo, estlLogo];
         animation-play-state: paused;
     }
 
+
     div {
         width: 100%;
     }
@@ -88,7 +95,7 @@ const Logos = [branchLogo, ieeeLogo, csocietyLogo, uaehLogo, estlLogo];
 
     @media (max-width: 1030px) {
         article {
-            animation: carouselMove 30s linear infinite;
+            animation: carouselMove 30s ease-in-out infinite;
             margin-top: 50px;
 
             & img {
@@ -98,11 +105,8 @@ const Logos = [branchLogo, ieeeLogo, csocietyLogo, uaehLogo, estlLogo];
     }
 
     @keyframes carouselMove {
-        0% {
-            transform: translateX(0);
-        }
-        100% {
-            transform: translateX(-50%);
-        }
+        0% { transform: translateX(0); }
+        50% { transform: translateX(-50%); }
+        100% { transform: translateX(0); }
     }
 </style>

src/components/Events.tsx

@@ -2,6 +2,10 @@ import { EffectCards } from "swiper/modules";
 
 import Git from "../../public/Events/Git.jpeg";
 import WelcomeBack from "../../public/Events/WelcomeBack.jpeg";
+import PostgreSQL from "../../public/Events/PostgreSQL.jpeg";
+import CloudWeekend from "../../public/Events/CloudWeekend.jpeg";
+import TalentLand2024 from "../../public/Events/TalentLand2024.jpeg";
+
 
 type Card = {
   src: string;
@@ -10,6 +14,21 @@ type Card = {
 };
 
 const card: Card[] = [
+  {
+    src: TalentLand2024.src,
+    name: "Talent Land 2024",
+    description: "Talend World | Conferencia",
+  },
+  {
+    src: PostgreSQL.src,
+    name: "IEEE - ESTl Student Workshops",
+    description: "Taller: PostgreSQL desde Cero",
+  },
+  {
+    src: CloudWeekend.src,
+    name: "Cloud Weekend",
+    description: "",
+  },
   {
     src: Git.src,
     name: "IEEE - ESTl Student Workshops",
@@ -40,7 +59,7 @@ const buildStyle = ({ animation }: { animation?: string }) => {
 export default function App() {
   return (
     <>
-      <div className="container">
+      <div className="container ">
         <h2 className="events">
           <span className="span-events" data-content="Conferecias">
             Conferecias
@@ -71,7 +90,7 @@ export default function App() {
             <SwiperSlide key={index}>
               <h1 className="eventName">{Card.name}</h1>
               <p className="eventDescription">{Card.description}</p>
-              <img src={Card.src} alt={Card.name} />
+              <img src={Card.src} alt={Card.name} style={{ maxHeight: "270px" }} />
             </SwiperSlide>
           ))}
         </Swiper>

src/components/Header.astro

@@ -12,6 +12,9 @@ import InstagramIcon from "./icons/Instagram.astro";
 import LinkedInIcon from "./icons/LinkedIn.astro";
 
 import GitHubIcon from "./icons/GitHub.astro";
+
+import FacebookIcon from "./icons/Facebook.astro";
+
 ---
 
 <div class="menuInicio">
@@ -64,5 +67,18 @@ import GitHubIcon from "./icons/GitHub.astro";
         </a>
       )
     }
+
+    {
+      config.socialNetworks.facebook && (
+        <a
+          class="socialNetwoks"
+          href={config.socialNetworks.facebook}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <FacebookIcon />
+        </a>
+      )
+    }
   </div>
 </div>

src/components/Inicio.astro

@@ -40,10 +40,10 @@ import "@fontsource/open-sauce-sans/600.css";
           </div>
         </div>
         <div class="imagenesbienvenida">
-          <img class="imgarriba" src={imageMosaic.src} />
+          <img class="imgarriba" src={imageMosaic.src} alt="IEEEWelcomeBack1"/>
           <div>
-            <img class="imgabajo" src={imageMosaic2.src} />
-            <img class="imgabajo" src={imageMosaic3.src} />
+            <img class="imgabajo" src={imageMosaic2.src} alt="IEEEWelcomeBack2"/>
+            <img class="imgabajo" src={imageMosaic3.src} alt="IEEEWelcomeBack3"/>
           </div>
         </div>
       </div>

src/components/Soon.tsx

@@ -7,26 +7,30 @@ import { EffectCoverflow, Pagination } from "swiper/modules";
 
 import comingSoon from "/public/Inicio/undraw_programming_re_kg9v.svg";
 
+import AIWeekend from "/public/SoonEvents/AIWeekend.jpeg";
+
 type Card = {
   src: string;
+  alt: string;
 };
 
-const card: Card[] = [];
+const card: Card[] = [
+  {
+    src: AIWeekend.src,
+    alt: "IEEEAIWeekend",
+  },
+];
 
 export default function App() {
   return (
     <>
-
       {" "}
       {card.length === 0 && (
         <div style={{ textAlign: "center" }}>
           <img src={comingSoon.src} style={{ width: "300px" }} />
-          <h1
-            style={{ color: "#035B98" }}
-          >Proximamente...</h1>
+          <h1 style={{ color: "#035B98" }}>Proximamente...</h1>
         </div>
       )}
-
       {card.length !== 0 && (
         <Swiper
           effect={"coverflow"}
@@ -46,12 +50,11 @@ export default function App() {
         >
           {card.map((Card, index) => (
             <SwiperSlide key={index}>
-              <img src={Card.src} />
+              <img src={Card.src} alt={Card.alt} />
             </SwiperSlide>
           ))}
         </Swiper>
       )}
-
     </>
   );
 }

src/components/Unete.astro

@@ -28,9 +28,9 @@ import welcome from "/public/Inicio/undraw_welcome_cats_thqn.svg"
 </div>
 <div class="botones">
 
-  <img class="welcome " src={welcome.src} alt="welcome" />
+  <img class="welcome " src={welcome.src} alt="Welcome" />
 
-  <a class="links" href="">Unirse</a>
+  <a class="links" href="https://docs.google.com/forms/d/e/1FAIpQLSfTQC_cl7JRfrJLyvSOz-qasyBQZPDVEQXpw2olWcJv7DAx4Q/viewform">Unirse</a>
 
 </div>
 </section>
@@ -48,4 +48,4 @@ import welcome from "/public/Inicio/undraw_welcome_cats_thqn.svg"
     width: 300px;
   }
 
-  </style>
+  </style>

src/components/cssInicio/contenedorBienvenida.css

@@ -24,13 +24,19 @@ h1 {
 .textobienvenida {
   width: 45%;
   padding: 35px;
-  padding-left: 6vw;
-  color: #0371A4;
+  padding-left: 3vw;
+  color: #0371a4;
   font-size: 3rem;
+  font-family: "Open Sauce ";
+}
+
+.textobienvenida h1 {
+  padding-left: 1vw;
+  letter-spacing: 1px;
+  word-spacing: 2px;
 }
 
 .textobienvenida p {
-  padding-left: 3px;
   text-align: justify;
   color: black;
   margin-bottom: 10px;
@@ -40,17 +46,16 @@ h1 {
   letter-spacing: 0.5px;
   color: black;
   font-size: 1.2rem;
+  padding-left: 3vw;
 }
 
-
 @media (max-width: 1330px) {
   .textobienvenida {
     width: auto;
     font-size: 2.4rem;
   }
 
   .textobienvenida p {
-    padding-left: 3px;
     text-align: justify;
     color: black;
     margin-bottom: 10px;
@@ -60,7 +65,7 @@ h1 {
     letter-spacing: 0.5px;
     color: black;
     font-size: 1rem;
-    padding-right: 50px;
+    padding-right: 3vw;
   }
 }
 
@@ -71,18 +76,15 @@ h1 {
 }
 
 @media (max-width: 668px) {
-
   .textobienvenida {
     padding: 0px;
-    padding-left: 4px;
-    padding-right: 4px;
+    padding-right: 3vw;
     font-size: 1.8rem;
   }
 
   .textobienvenida p {
-    font-size: .8rem;
-    padding-left: 4px;
-    padding-right: 4px;
+    font-size: 0.8rem;
+    padding-right: 3vw;
   }
 }
 
@@ -129,12 +131,11 @@ h1 {
 }
 
 @media (max-width: 1030px) {
-
   .Contactar1,
   .Contactar2 {
     padding-left: 10px;
     padding-right: 10px;
-    font-size: .9rem;
+    font-size: 0.9rem;
   }
 }
 
@@ -190,4 +191,4 @@ h1 {
 a {
   text-decoration: none;
   color: black;
-}
+}

src/components/cssInicio/fondo.css

@@ -12,11 +12,10 @@ body {
   justify-content: center;
 }
 
-
 .filtroInicio {
   width: 100%;
   background: #fff;
   border-radius: 0px;
   z-index: 10;
   padding: 6px;
-}
+}