Feature/hamburger menu

src/components/ContactCard.astro

@@ -2,16 +2,18 @@
 import { Image } from 'astro:assets';
 
 interface props {
+  id: string;
   title: string;
   image: ImageMetadata;
   redirectTo: string;
   textButton: string;
 }
 
-const { title, image, redirectTo, textButton } = Astro.props as props;
+const { id, title, image, redirectTo, textButton } = Astro.props as props;
 ---
 
 <article
+  id={id}
   class="flex max-w-[400px] flex-col items-center gap-3 px-5 py-0 text-center"
 >
   <Image src={image} class="aspect-square w-[100%] object-cover" alt={title} />

src/components/Navbar.astro

@@ -1,19 +1,118 @@
 ---
 import Logo from './icons/ScesiBgDark.astro';
+import Menu from './icons/MenuIcon.astro';
+import Close from './icons/CloseIcon.astro';
 ---
 
 <div
   class="fixed top-0 z-30 flex w-screen items-center justify-between bg-[#202020] px-5 py-3 md:px-12"
 >
-  <Logo />
-
-  <!-- <ul>
-    <li>
+  <a href="#"> <Logo /></a>
+  <input class="boxcheck" type="checkbox" id="check" />
+  <label class="icons" for="check">
+    <i class="menu" id="menu-icon"><Menu /></i>
+    <i class="close" id="close-icon"><Close /></i>
+  </label>
+  <div class="navbar">
+    <ul class="gap-3 sm:flex lg:mr-2 lg:gap-8">
+      <!-- <li>
       <a
         href="#postulaciones"
         class="text-poppins rounded-[6px] bg-[#D83746] px-3 py-2 font-medium text-white"
         >Postulaciones 2024</a
       >
-    </li>
-  </ul> -->
+    </li> -->
+      <li>
+        <a href="#capuchino" class="navegation">Capuchino</a>
+      </li>
+      <li>
+        <a href="#comunidad" class="navegation">Comunidad</a>
+      </li>
+      <li>
+        <a href="#blogs" class="navegation">Blogs</a>
+      </li>
+    </ul>
+  </div>
 </div>
+<style>
+  .navegation {
+    position: relative;
+    text-decoration: none;
+    color: rgb(140, 140, 140);
+    font-size: 16px;
+    font-weight: 600;
+    letter-spacing: 0.5px;
+    padding: 0 5px;
+  }
+  .navegation::after {
+    content: '';
+    position: absolute;
+    background-color: white;
+    height: 3px;
+    width: 0;
+    left: 0;
+    bottom: -15px;
+    transition: 0.3s;
+  }
+  .navegation:hover {
+    color: white;
+  }
+  .navegation:hover::after {
+    width: 100%;
+  }
+  #check {
+    display: none;
+  }
+
+  @media (max-width: 1024px) {
+    .navegation {
+      font-size: 16px;
+      padding: 0 5px;
+    }
+  }
+  @media (max-width: 640px) {
+    .icons {
+      display: inline-flex;
+    }
+    #check:checked ~ .icons #menu-icon {
+      display: none;
+    }
+    .icons #close-icon {
+      display: none;
+    }
+
+    #check:checked ~ .icons #close-icon {
+      display: block;
+    }
+    .navbar {
+      position: absolute;
+      top: 100%;
+      left: 0;
+      width: 100%;
+      height: 0px;
+      background: rgba(0, 0, 0, 0.9);
+      transition: 0.5s;
+      overflow: hidden;
+    }
+    #check:checked ~ .navbar {
+      height: 170px;
+    }
+    .navbar a {
+      display: block;
+      font-size: 16px;
+      margin: 24px;
+      text-align: center;
+    }
+
+    .boxcheck {
+      position: absolute;
+      right: 7%;
+    }
+  }
+
+  @media (min-width: 640px) {
+    .icons {
+      display: none;
+    }
+  }
+</style>

src/components/icons/CloseIcon.astro

@@ -0,0 +1,21 @@
+<svg
+  width="44px"
+  height="44px"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  ><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g
+    id="SVGRepo_tracerCarrier"
+    stroke-linecap="round"
+    stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier">
+    <g id="Menu / Close_SM">
+      <path
+        id="Vector"
+        d="M16 16L12 12M12 12L8 8M12 12L16 8M12 12L8 16"
+        stroke="#ffffff"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"></path>
+    </g>
+  </g></svg
+>

src/components/icons/MenuIcon.astro

@@ -0,0 +1,23 @@
+<svg
+  fill="#ffffff"
+  width="40px"
+  height="40px"
+  viewBox="-2.4 -2.4 28.80 28.80"
+  id="menu"
+  data-name="Flat Line"
+  xmlns="http://www.w3.org/2000/svg"
+  class="icon flat-line"
+  transform="matrix(1, 0, 0, 1, 0, 0)rotate(0)"
+  ><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g
+    id="SVGRepo_tracerCarrier"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke="#CCCCCC"
+    stroke-width="0.24000000000000005"></g><g id="SVGRepo_iconCarrier"
+    ><path
+      id="primary"
+      d="M3,12H21M9,18H21M3,6H15"
+      style="fill: none; stroke: #ffffff; stroke-linecap: round; stroke-linejoin: round; stroke-width:2.16;"
+    ></path></g
+  ></svg
+>

src/components/sections/Capuchino.astro

@@ -5,7 +5,7 @@ import myModel from '../../assets/images/capuchino.png';
 import CapuchinoIcon from '../icons/charm_coffee.astro';
 ---
 
-<section class="grid w-full grid-cols-1 md:grid-cols-2">
+<section class="grid w-full grid-cols-1 md:grid-cols-2" id="capuchino">
   <div class="bg-scesi-dark-blue px-5 py-12">
     <div class="mx-auto grid h-full max-w-[400px] content-center gap-3">
       <CapuchinoIcon class="mx-auto md:h-12 md:w-12" />

src/components/sections/ContactWithUs.astro

@@ -14,6 +14,7 @@ import visit_blog_image from '../../assets/images/visit_blog_image.png';
     class="flex flex-col items-center gap-6 lg:flex-row lg:items-start lg:justify-evenly lg:px-24"
   >
     <ContactCard
+      id="comunidad"
       title="Únete a nuestro canal de noticias!"
       image={news_channel_image}
       textButton="Entrar al canal de whatsapp"
@@ -28,6 +29,7 @@ import visit_blog_image from '../../assets/images/visit_blog_image.png';
     <div class="hidden h-[60vh] w-[0.2px] bg-gray-600 xl:flex"></div>
 
     <ContactCard
+      id="blogs"
       title="Aprende con el blog de la SCESI"
       image={visit_blog_image}
       textButton="Ir al blog"