Merge pull request #16 from scesi/fix/about-us

Fix/about us

Author: Richixs

public/hacklab.png

@@ -1,44 +1,59 @@
-<section class="about-us">
+<section id="sobre-nosotros" class="about-us section-block scroll-mt-28">
   <h2 class="title">Conoce a los organizadores</h2>
   <div class="cards">
     <!-- Card SCESI -->
     <div class="card">
-      <img src="/scesi.png" alt="SCESI UMSS" class="logo-img" />
+      <a href="https://www.scesi.org/" target="_blank" rel="noopener noreferrer">
+        <img src="/scesi.svg" alt="SCESI UMSS" class="logo-img" />
+      </a>
       <div class="socials">
-        <a href="https://www.instagram.com/scesiumss"><img src="https://api.iconify.design/mdi/instagram.svg" alt="Instagram" width="24" /></a>
-        <a href="https://www.linkedin.com/company/scesi/?originalSubdomain=bo"><img src="https://api.iconify.design/mdi/linkedin.svg" alt="LinkedIn" width="24" /></a>
-        <a href="https://www.facebook.com/scesi/"><img src="https://api.iconify.design/mdi/facebook.svg" alt="Facebook" width="24" /></a>
+        <a href="https://www.instagram.com/scesiumss"
+          ><img src="https://api.iconify.design/mdi/instagram.svg" alt="Instagram" width="24" /></a
+        >
+        <a href="https://www.linkedin.com/company/scesi/?originalSubdomain=bo"
+          ><img src="https://api.iconify.design/mdi/linkedin.svg" alt="LinkedIn" width="24" /></a
+        >
+        <a href="https://www.facebook.com/scesi/"
+          ><img src="https://api.iconify.design/mdi/facebook.svg" alt="Facebook" width="24" /></a
+        >
+        <a href="https://www.tiktok.com/@scesiumss"
+          ><img src="/tiktok.svg" alt="TikTok" width="24" /></a
+        >
       </div>
     </div>
 
     <!-- Card Hacklab -->
     <div class="card">
-      <img src="/hacklab.png" alt="Hacklab" class="logo-img" />
+      <img src="/hacklab.svg" alt="Hacklab" class="logo-img" />
       <div class="socials">
-        <a href="https://www.instagram.com/hacklabbrickheads/"><img src="https://api.iconify.design/mdi/instagram.svg" alt="Instagram" width="24" /></a>
-        <a href="https://www.linkedin.com/company/hacklab-brickheads-cochabamba"><img src="https://api.iconify.design/mdi/linkedin.svg" alt="LinkedIn" width="24" /></a>
-        <a href="https://www.facebook.com/HackLabBrickHeads/"><img src="https://api.iconify.design/mdi/facebook.svg" alt="Facebook" width="24" /></a>
+        <a href="https://www.instagram.com/hacklabbrickheads/"
+          ><img src="https://api.iconify.design/mdi/instagram.svg" alt="Instagram" width="24" /></a
+        >
+        <a href="https://www.linkedin.com/company/hacklab-brickheads-cochabamba"
+          ><img src="https://api.iconify.design/mdi/linkedin.svg" alt="LinkedIn" width="24" /></a
+        >
+        <a href="https://www.facebook.com/HackLabBrickHeads/"
+          ><img src="https://api.iconify.design/mdi/facebook.svg" alt="Facebook" width="24" /></a
+        >
       </div>
     </div>
   </div>
 </section>
 
 <style>
-    .logo-img {
+  .logo-img {
     height: 80px;
     width: auto;
     display: block;
     margin: 0 auto 1.5rem auto;
     object-fit: contain;
   }
   .about-us {
-  text-align: center;
-  padding: 3rem 1.5rem;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 2rem;
-}
+    text-align: center;
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+    gap: 2rem;
+  }
 
   .title {
     font-size: 2.5rem;
@@ -47,21 +62,9 @@
     margin-bottom: 2rem;
   }
 
-  .cards {
-    display: flex;
-    gap: 2rem;
-    flex-wrap: wrap;
-    justify-content: center;
-  }
+  .cards { display: flex; gap: 2rem; flex-wrap: wrap; justify-content: center; }
 
-  .card {
-    background: #1b8f52;
-    padding: 2rem;
-    border-radius: 0.75rem;
-    width: 250px;
-    text-align: center;
-    transition: transform 0.3s ease;
-  }
+  .card { background:#1b8f52; padding:2rem; border-radius:0.75rem; width:250px; text-align:center; transition:transform .3s ease; }
 
   .card:hover {
     transform: translateY(-5px);
@@ -80,7 +83,7 @@
   }
 
   .socials img {
-    filter: invert(1); /* hace los íconos blancos */
+    filter: invert(1);
     transition: filter 0.2s;
   }
 

public/hacklab.svg

@@ -20,7 +20,7 @@ const {
   sponsors = [],
 } = Astro.props as Props;
 ---
-<section id={id} class="scroll-mt-28 py-16 sm:py-20 md:py-24" aria-labelledby={`${id}-title`}>
+<section id={id} class="scroll-mt-28 section-block" aria-labelledby={`${id}-title`}>
   <div class="mx-4 sm:mx-6 md:mx-10 rounded-2xl p-6 sm:p-8 md:p-10 lg:p-12">
     <div class="max-w-7xl mx-auto text-center text-white">
       <h2 id={`${id}-title`} class="text-2xl sm:text-3xl md:text-4xl font-extrabold">

public/scesi.png

@@ -0,0 +1,45 @@
+---
+import Layout from '../layouts/Layout.astro';
+import ScheduleComponent from '../components/Schedule.astro';
+
+const daySchedule = [
+  {
+    date: '24 de Octubre - Viernes',
+    activities: [
+      {
+        hour: '12:45 - 2:15',
+        name: 'Nombre de actividad',
+        ubication: 'Ubicación',
+        description: 'Descripción de la actividad',
+      },
+      {
+        hour: '14:30 - 15:30',
+        name: 'Otra actividad',
+        ubication: 'Auditorio',
+        description: 'Descripción de la segunda actividad',
+      },
+    ],
+  },
+  {
+    date: '25 de Octubre - Sábado',
+    activities: [
+      {
+        hour: '09:00 - 10:00',
+        name: 'Apertura',
+        ubication: 'Hall Principal',
+        description: 'Bienvenida y presentación del evento',
+      },
+      {
+        hour: '10:15 - 12:00',
+        name: 'Workshop',
+        ubication: 'Sala 3',
+        description: 'Taller práctico para los participantes',
+      },
+    ],
+  },
+];
+---
+
+<Layout>
+  <ScheduleComponent id="cronograma" schedule={daySchedule} />
+</Layout>

public/tiktok.svg

@@ -4,3 +4,24 @@ body {
   min-height: 100vh;
   background: linear-gradient(135deg, #38c76e, #2b9453);
 }
+
+.section-block {
+  min-height: 70vh;
+  padding-top: 5rem;
+  padding-bottom: 5rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+@media (min-width: 640px) {
+  .section-block {
+    padding-top: 6rem;
+    padding-bottom: 6rem;
+  }
+}
+@media (min-width: 768px) {
+  .section-block {
+    padding-top: 7rem;
+    padding-bottom: 7rem;
+  }
+}