56 lines
2.7 KiB
Plaintext
56 lines
2.7 KiB
Plaintext
---
|
|
import Button from "./ui/Button.astro";
|
|
import { Icon } from "astro-icon/components";
|
|
---
|
|
|
|
<div>
|
|
<div class="flex justify-between px-8 md:px-0 md:py-4">
|
|
<div class="border-l-4 border-colorPrimary pl-4">
|
|
<p class="font-secondary text-colorPrimary font-bold leading-none py-2 text-2xl md:text-lg">
|
|
<a href="/">Centro del Reino<br /> De Paz y Justicia</a>
|
|
</p>
|
|
</div>
|
|
<nav
|
|
class="flex justify-evenly gap-10 items-center uppercase text-md text-white"
|
|
>
|
|
<div class="hidden md:flex gap-8 font-primary font-bold">
|
|
<a class="hover:text-colorPrimary transition" href="#somos">Somos</a>
|
|
<a class="hover:text-colorPrimary transition" href="#programs">Programas</a>
|
|
<a class="hover:text-colorPrimary transition" href="#news">Noticias</a>
|
|
</div>
|
|
<div class="drawer lg:hidden">
|
|
<input id="my-drawer-1" type="checkbox" class="drawer-toggle" />
|
|
<div class="drawer-content">
|
|
<!-- Page content here -->
|
|
<label for="my-drawer-1" class="btn-ghost drawer-button"><Icon name="ph:list" class="text-white text-4xl font-bold" /></label>
|
|
</div>
|
|
<div class="drawer-side">
|
|
<label for="my-drawer-1" aria-label="close sidebar" class="drawer-overlay"></label>
|
|
<ul class="menu min-h-full w-80 p-4 bg-[url(/img/mid-logo-2.webp)] bg-no-repeat bg-contain bg-center bg-[#22523F] text-white">
|
|
<!-- Sidebar content here -->
|
|
<div class="flex gap-2 justify-center items-center mb-8 mt-8">
|
|
<img class="w-1/3 object-contain" src="/img/logo-metalico.webp" alt="Logo Centro del Reino de Paz y Justicia" />
|
|
<p class="font-secondary text-colorPrimary font-bold leading-none py-2 text-lg ">
|
|
<a href="/">Centro del Reino<br /> De Paz y Justicia</a>
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<div class="font-primary font-bold flex flex-col gap-1 text-lg p-0">
|
|
<li><a><a class="hover:text-colorPrimary transition" href="#somos">Somos</a></a></li>
|
|
<li><a><a class="hover:text-colorPrimary transition" href="#programs">Programas</a></a></li>
|
|
<li><a><a class="hover:text-colorPrimary transition" href="#news">Noticias</a></a></li>
|
|
</div>
|
|
<div class="w-50">
|
|
<Button class="px-8 py-2 uppercase text-lg mt-8" title="Contacto" url="#contact" variant="primary" />
|
|
</div>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="w-50 hidden md:block">
|
|
<Button class="px-8 py-2 uppercase" title="Contacto" url="#contact" variant="primary" />
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</div>
|