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.

src/components/BoxContainer.astro

@@ -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>
     )}
 

src/components/Header.astro

@@ -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">
+      <div class="flex gap-8 font-primary font-bold">
-        <a href="#">Inicio</a>
+        <a class="hover:text-primary transition" href="/">Inicio</a>
-        <a href="#">Somos</a>
+        <a class="hover:text-primary transition" href="#somos">Somos</a>
-        <a href="#">Programas</a>
+        <a class="hover:text-primary transition" href="#programs">Programas</a>
-        <a href="#">Noticias</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" />

src/components/HeroHome.astro

@@ -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">

src/components/section/ColorSection.astro

@@ -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>

src/components/section/FooterSection.astro

@@ -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>

src/components/section/FormationSection.astro

@@ -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>

src/components/section/IdentitySection.astro

@@ -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">

src/components/section/InfoSection.astro

@@ -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>

src/components/section/ParticipateSection.astro

@@ -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>

src/components/section/ProjectionSection.astro

@@ -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>
         

src/components/ui/Button.astro

@@ -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 class={`${styles} font-bold transition block text-center ${className || ''}`} href={url} class="inline-block w-full h-full">{title}</a>
-    <a href={url} class="inline-block w-full h-full">{title}</a>
-</button>

src/data/content/infosection.js

@@ -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',
+    title: 'Programas y áreas\nde Acción',
-    copy: 'Construcción consciente de vínculos éticos, culturales y estratégicos entre pueblos',
+    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]',

src/pages/index.astro

@@ -48,6 +48,7 @@ const carouselImages3 = [
   <GridSection />
 
   <ColorSection
+    id="mision"
     bgColor="#22523F"
     titleColor="text-[#ffffff]"
     textColor="text-[#CBA16A] font-bold"