feat(core): refactor navigation architecture and asset delivery system
Migrated image assets from bundled src/assets to public directory for optimized static serving. Simplified Button component by converting nested button>anchor structure to single anchor element, eliminating unnecessary DOM depth. Implemented scroll-based navigation with section IDs across pages. Added interactive hover states and transitions to navigation and action elements. Updated content configuration to reflect new section structure and navigation paths.
This commit is contained in:
parent
feee83f2f7
commit
719819e43d
Binary file not shown.
|
Before Width: | Height: | Size: 70 KiB After Width: | Height: | Size: 49 KiB |
|
|
@ -21,7 +21,7 @@ const background = props.bgImage || props.bgColor;
|
|||
|
||||
{props.hasButton && (
|
||||
<div class=" flex self-start">
|
||||
<Button class="px-6 py-3 uppercase" url="#" variant="primary" title={props.buttonLabel} />
|
||||
<Button class="px-6 py-3 uppercase" url={props.url} variant="primary" title={props.buttonLabel} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
|
|
|||
|
|
@ -12,11 +12,11 @@ import Button from "./ui/Button.astro";
|
|||
<nav
|
||||
class="flex justify-evenly gap-10 items-center uppercase text-md text-white"
|
||||
>
|
||||
<div class="flex gap-8 font-primary">
|
||||
<a href="#">Inicio</a>
|
||||
<a href="#">Somos</a>
|
||||
<a href="#">Programas</a>
|
||||
<a href="#">Noticias</a>
|
||||
<div class="flex gap-8 font-primary font-bold">
|
||||
<a class="hover:text-primary transition" href="/">Inicio</a>
|
||||
<a class="hover:text-primary transition" href="#somos">Somos</a>
|
||||
<a class="hover:text-primary transition" href="#programs">Programas</a>
|
||||
<a class="hover:text-primary transition" href="#news">Noticias</a>
|
||||
</div>
|
||||
<div class="w-50">
|
||||
<Button class="px-8 py-2 uppercase" title="Contacto" url="/contacto" variant="primary" />
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import Header from './Header.astro';
|
|||
<div class="top-16 relative mb container mx-auto">
|
||||
<Header />
|
||||
</div>
|
||||
<div class="h-screen max-h-[1080px] container bg-[url(/src/assets/hero-image.webp)] bg-no-repeat bg-contain bg-bottom mx-auto mt-16">
|
||||
<div class="h-screen max-h-[1080px] container bg-[url(/img/DRJBP-1.webp)] bg-no-repeat bg-contain bg-bottom mx-auto mt-16">
|
||||
|
||||
<div class="grid grid-cols-2 h-full">
|
||||
<div class="gap-8 flex flex-col justify-end">
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
---
|
||||
const { bgColor, titleColor, textColor, title, text } = Astro.props;
|
||||
const { bgColor, titleColor, textColor, title, text, id } = Astro.props;
|
||||
|
||||
console.log( 'Props', bgColor )
|
||||
---
|
||||
<div class={`bg-[${bgColor}] py-20`}>
|
||||
<div id={id} class={`bg-[${bgColor}] py-20`}>
|
||||
<div class="container mx-auto w-3/4">
|
||||
<h4 class={`uppercase text-lg ${titleColor} font-primary md:text-xl text-center mb-4 font-bold`}>{title}</h4>
|
||||
<p class={`text-3xl font-secondary ${textColor} text-center`}>{text}</p>
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ import jbp from "../../assets/DRJBP-1.webp";
|
|||
<li class="border-r-1 pr-2"><a href="#"><Icon name="ph:facebook-logo-thin" class="text-3xl" /></a></li>
|
||||
<li><a href="#"><Icon name="ph:youtube-logo-thin" class="text-3xl" /></a></li>
|
||||
</ul>
|
||||
<button class="bg-[#003421] px-4 py-2 text-sm hover:bg-[#EBE5D0] hover:text-[#003421] cursor-pointer">
|
||||
<button class="bg-[#003421] px-4 py-2 text-sm hover:bg-[#EBE5D0] hover:text-[#003421] cursor-pointer transition">
|
||||
Enviar
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
---
|
||||
import { Icon } from "astro-icon/components";
|
||||
|
||||
---
|
||||
<div class="bg-[#BEA48D] py-32">
|
||||
<div id="programs" class="bg-[#BEA48D] py-32">
|
||||
<div class="container mx-auto">
|
||||
<h4 class="text-lg text-center font-bold uppercase text-[#003421]">Programas y areas de acción</h4>
|
||||
<h2 class="text-6xl text-center font-bold font-secondary my-8 text-[#003421]">Formación y Capacitación</h2>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
const { title, text, initTitle, colorText, bgColor } = Astro.props;
|
||||
---
|
||||
|
||||
<div class="container mx-auto">
|
||||
<div id="somos" class="container mx-auto">
|
||||
|
||||
<div class={`grid grid-cols-12 ${bgColor}`}>
|
||||
<div class="bg-[#22523F] col-span-4 flex items-center justify-center bg-[url('/src/assets/mid-logo-2.webp')] bg-left">
|
||||
|
|
|
|||
|
|
@ -29,15 +29,16 @@ const { bgColor, titleColor, textColor, title, text } = Astro.props;
|
|||
title: 'Misión, Visión y Valores Institucionales.',
|
||||
buttonLabel: 'Leer Mas',
|
||||
hasButton: true,
|
||||
bgImage: '../src/assets/dove-bg.webp',
|
||||
bgImage: '/img/dove-bg.webp',
|
||||
hasIcon: true,
|
||||
url:'#mision',
|
||||
bgColor: '#CBA16A',
|
||||
titleColor: 'text-tertiary',
|
||||
sizeTitle: 'text-2xl',
|
||||
}} />
|
||||
</div>
|
||||
<div class="col-span-1 py-38 px-24 bg-[#21523F]">
|
||||
<img src="/img///logo-ligth.webp" alt="Logo del CPyJ">
|
||||
<img src="/img/logo-ligth.webp" alt="Logo del CPyJ">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -7,16 +7,16 @@
|
|||
|
||||
<p class="text-tertiary pt-10 text-2xl px-12">La labor del <strong>Centro del Reino de Paz y Justicia</strong> se fortalece mediante la participación de personas e instituciones alineadas con sus valores y objetivos generales. Formas de participar:</p>
|
||||
|
||||
<div class="grid grid-cols-3 w-3/4 justify-center mx-auto gap-20 my-20">
|
||||
<div class="grid grid-cols-2 w-3/4 justify-center mx-auto gap-20 my-20">
|
||||
<div class="border-1 border-white text-lg p-8 text-tertiary">
|
||||
<h5 class="font-bold mb-6">Voluntariado:</h5>
|
||||
<p>colaboración en proyectos formativos, institucionales o internacionales.</p>
|
||||
</div>
|
||||
|
||||
<div class="border-1 border-white p-8 text-tertiary">
|
||||
<!-- <div class="border-1 border-white p-8 text-tertiary">
|
||||
<h5 class="font-bold text-lg mb-6">Aportes y donaciones:</h5>
|
||||
<p>sostenimiento de programas y actividades.</p>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div class="border-1 border-white p-8 text-tertiary">
|
||||
<h5 class="font-bold text-lg mb-6">Difusión institucional:</h5>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ const { bgColor, titleColor, textColor, title, text } = Astro.props;
|
|||
|
||||
<div class="container mx-auto">
|
||||
|
||||
<div class="grid grid-cols-3 bg-white w-full">
|
||||
<div id="projection" class="grid grid-cols-3 bg-white w-full">
|
||||
<div class="row-span-2 col-span-2 p-24 text-tertiary">
|
||||
<div class="flex flex-col gap-5 md:text-lg">
|
||||
<h2 class="font-secondary text-5xl font-bold">{title}</h2>
|
||||
|
|
@ -53,7 +53,7 @@ const { bgColor, titleColor, textColor, title, text } = Astro.props;
|
|||
</div>
|
||||
</div>
|
||||
<div class="bg-[#22523F] object-cover pt-64 justify-end flex">
|
||||
<img src="/img/DRJBP-2.webp" class="h-full object-cover" />
|
||||
<img src="/img/DRJBP-1.webp" class="h-full object-cover opacity-20" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ const { variant = "primary", title = "Botón", url = "#", class: className } = A
|
|||
class?: string;
|
||||
};
|
||||
const variants = {
|
||||
primary: "bg-[#EBE6D2] text-[#22523F] hover:bg-[#EBE6D2]/90 rounded-none",
|
||||
primary: "bg-[#EBE6D2] text-[#22523F] hover:bg-[#22523F]/90 hover:text-[#EBE6D2] rounded-none",
|
||||
secondary: "bg-[#22523F] text-[#EBE6D2] hover:bg-[#22523F]/90 uppercase rounded-none",
|
||||
light: "bg-green-100",
|
||||
} as const;
|
||||
|
|
@ -15,6 +15,4 @@ type Variant = keyof typeof variants;
|
|||
|
||||
const styles = variants[variant];
|
||||
---
|
||||
<button class={`${styles} font-bold transition block text-center ${className || ''}`}>
|
||||
<a href={url} class="inline-block w-full h-full">{title}</a>
|
||||
</button>
|
||||
<a class={`${styles} font-bold transition block text-center ${className || ''}`} href={url} class="inline-block w-full h-full">{title}</a>
|
||||
|
|
|
|||
|
|
@ -9,20 +9,22 @@ export const infoboxes = [
|
|||
sizeText: 'text-xl',
|
||||
buttonLabel: 'Leer más',
|
||||
hasButton: true,
|
||||
url:'#projection',
|
||||
hasIcon: true,
|
||||
// iconColor: 'text-[#1F5349]',
|
||||
hasInput: false
|
||||
},
|
||||
{
|
||||
title: 'Diplomacia Pública y\nproyección Internacional',
|
||||
copy: 'Construcción consciente de vínculos éticos, culturales y estratégicos entre pueblos',
|
||||
title: 'Programas y áreas\nde Acción',
|
||||
copy: 'Cursos, seminarios y programas de formación dirigidos a líderes, profesionales, referentes.',
|
||||
bgColor: '#003421',
|
||||
sizeTitle: 'text-2xl',
|
||||
titleColor: 'text-[#CBA16A]',
|
||||
textColor: 'text-[#EDE9D9]',
|
||||
sizeText: 'text-xl',
|
||||
buttonLabel: 'Leer más',
|
||||
bgImage: '../src/assets/dove-bg.webp',
|
||||
bgImage: '/img/dove-bg.webp',
|
||||
url:'#programs',
|
||||
hasButton: true,
|
||||
hasIcon: true,
|
||||
// iconColor: 'text-[#CBA16A]',
|
||||
|
|
|
|||
|
|
@ -48,6 +48,7 @@ const carouselImages3 = [
|
|||
<GridSection />
|
||||
|
||||
<ColorSection
|
||||
id="mision"
|
||||
bgColor="#22523F"
|
||||
titleColor="text-[#ffffff]"
|
||||
textColor="text-[#CBA16A] font-bold"
|
||||
|
|
|
|||
Loading…
Reference in New Issue