Add Workshops section

Author: pablonoya

src/assets/images/workshops/Angel-Bulnes.jpg

@@ -41,6 +41,10 @@ import header from "../assets/images/header.png"
       <ul
         class="flex flex-col p-4 md:p-0 mt-4 font-medium border md:flex-row md:space-x-8 md:mt-0 md:border-0 bg-black md:bg-black border-gray text-white"
       >
+        <li class="flex justify-center items-center">
+          <a href="/#talleres" class="block py-1 px-4">Talleres previos</a>
+        </li>
+
         <li class="flex justify-center items-center">
           <a href="/#organizadores" class="block py-1 px-4">Equipo</a>
         </li>

src/assets/images/workshops/Julio-Colque.jpg

@@ -0,0 +1,64 @@
+---
+import angel from "../assets/images/workshops/Angel-Bulnes.jpg"
+import julio from "../assets/images/workshops/Julio-Colque.jpg"
+
+const workshops = [
+  {
+    date: "Vie. 19 abril 2024",
+    details: [
+      {
+        time: "20:00 (GMT-4)",
+        title: "Inteligencia Artificial, ética y herramientas de apoyo",
+        img: julio,
+        speaker: "Julio Jhonathan Colque Alcón 🇧🇴",
+        position: "Ingeniero de sistemas",
+      },
+      {
+        time: "20:30 (GMT-4)",
+        title: "Beyond Code: Qué hacer cuando no estás programando y construyes un producto",
+        img: angel,
+        speaker: "Angel Bulnes 🇭🇳",
+        position: "Senior mobile developer",
+      },
+    ],
+  },
+]
+
+import { Image } from "astro:assets"
+---
+
+<div id="talleres" class="bg-black text-white">
+  <div class="max-w-screen-xl mx-auto px-4 py-16 space-y-4">
+    <h2 class="text-2xl sm:text-3xl font-bold mx-auto">Talleres previos</h2>
+
+    {
+      workshops.map(({ date, details }) => (
+        <div class="space-y-4">
+          <div class="flex items-center space-x-4">
+            <span class="w-60 md:w-fit text-nowrap font-bold md:text-xl md:text">{date}</span>
+            <hr class="w-full border-blue-400" />
+          </div>
+
+          {details?.map(({ time, title, img, speaker, position }) => (
+            <div class="flex flex-col space-y-1 md:flex-row md:space-x-4">
+              <div class="w-full md:w-28 bg-blue-500 flex items-center p-1">
+                <p class="font-medium md:text-xl mx-auto text-center">{time}</p>
+              </div>
+
+              <div class="space-y-2 pb-2">
+                <h3 class="text-lg md:text-2xl font-bold leading-tight">{title}</h3>
+                <div class="flex space-x-4 items-start">
+                  <Image src={img} alt={speaker} width="60" height="60" />
+                  <div class="leading-tight">
+                    <p class="font-medium md:text-lg">{speaker}</p>
+                    <p class="md:text-lg">{position}</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      ))
+    }
+  </div>
+</div>

src/components/Navbar.astro

@@ -3,6 +3,7 @@ import Navbar from "components/Navbar.astro"
 import Banner from "../components/Banner.astro"
 import Layout from "../layouts/Layout.astro"
 import AboutUs from "../components/AboutUs.astro"
+import Workshops from "components/Workshops.astro"
 import Organizers from "../components/organizers/Organizers.astro"
 ---
 
@@ -11,6 +12,7 @@ import Organizers from "../components/organizers/Organizers.astro"
   <main>
     <Banner />
     <AboutUs />
+    <Workshops />
     <Organizers />
   </main>
 </Layout>