Moving props to json file

src/components/HeroHome.astro

@@ -1,6 +1,9 @@
 ---
 import Header from './Header.astro';
 import { Icon } from 'astro-icon/components';
+
+import { createTranslator } from '../i18n';
+const tl = createTranslator(Astro.currentLocale);
 ---
 
 <div class="font-secondary">
@@ -18,11 +21,11 @@ import { Icon } from 'astro-icon/components';
                     />
                 <div class="text-colorPrimary font-semibold font-secondary sm:mb-24 mt-8">
                     <h1 class="text-3xl md:text-6xl sm:mb-8">
-                        Dr. José Benjamín<br /> Pérez Matos
+                        {tl("hero.name")}
                     </h1>
                     <div class="flex items-center ">
                         <Icon name="ph:minus" class="text-xl mr-2" />
-                        <h6 class="font-primary font-light uppercase text-white">LÍDER FUNDADOR</h6>
+                        <h6 class="font-primary font-light uppercase text-white uppercase">{tl("hero.title")}</h6>
 
                     </div>
                 </div>
@@ -31,11 +34,7 @@ import { Icon } from 'astro-icon/components';
                 <div
                     class="md:w-1/2 font-primary font-medium text-2xl text-colorPrimary gap-8 flex flex-col justify-end mb-24"
                 >
-                    <h2 class="text-[#EAE6D2] text-lg py-8">
+                    <h2 class="text-[#EAE6D2] text-lg py-8">{tl("hero.body")}</h2>
-                        “El sueño de mi vida es ver cumplida la visión de los
-                        profetas: un mundo de justicia y paz para el bien de
-                        Israel y de toda la humanidad.”
-                    </h2>
                     <div class="w-16 self-end md:mt-64">
                         <img
                             src="/img/white-dove.webp"

src/components/section/AuthoritySection.astro

@@ -1,12 +1,14 @@
 ---
-const { title, titleColor, description, descColor, bgColor } = Astro.props;
+import { createTranslator } from '../../i18n';
+const tl = createTranslator(Astro.currentLocale);
+
 ---
 
-<div class={`container mx-auto ${bgColor}`}>
+<div class="container mx-auto bg-[#003421]">
     <div class="grid grid-cols-3 relative">
-        <div class={`col-span-3 sm:col-span-2 p-12 lg:p-24 lg:h-82 ${descColor}`}>
+        <div class="col-span-3 sm:col-span-2 p-12 lg:p-24 lg:h-82 text-[#EBE6D2]">
-            <h2 class={`${titleColor} text-2xl`}><strong>Autoridades</strong> | Centro del Reino de Paz y Justicia</h2>
+            <h2 class="text-colorSecondary text-2xl" set:html={tl("authority.title")}></h2>
-            <p>El <strong>Dr. José Benjamín Pérez Matos</strong> es el <strong>fundador y único referente del Centro del Reino de Paz y Justicia.</strong> Su liderazgo articula visión espiritual, formación intelectual, acción pública y proyección internacional.</p>
+            <p set:html={tl("authority.body")} />
         </div>
         <div class="hidden sm:flex col-span-1 bg-[#CBA16A] items-end self-end justify-center h-82 overflow-visible">
             <img src="/img/DRJBP-1.webp" class="w-48 sm:w-64 lg:w-76 object-contain absolute bottom-0" alt="">

src/components/section/IdentitySection.astro

@@ -1,21 +1,23 @@
 ---
-const { title, text, initTitle, colorText, bgColor } = Astro.props;
+const { colorText, bgColor } = Astro.props;
+
+import { createTranslator } from '../../i18n';
+const tl = createTranslator(Astro.currentLocale);
+
 ---
 
 <div id="somos" class="container mx-auto">
 
-    <div class={`grid grid-cols-1 md:grid-cols-3 ${bgColor}`}>
+    <div class="grid grid-cols-1 md:grid-cols-3 bg-white">
         <div class="bg-[#22523F] col-span-1 flex items-center justify-center bg-[url('/src/assets/mid-logo-2.webp')] bg-no-repeat bg-right md:bg-left">
-            <img src="/img/logo-metalico.webp" alt="Imagen de identidad del Centro del Reino de Paz y Justicia (CRPJ)" class="w-1/4 my-8 md:w-1/2" />
+            <img src="/img/logo-metalico.webp" alt="" class="w-1/4 my-8 md:w-1/2" />
+        </div>
+        <div class={`flex flex-col text-tertiary col-span-2 gap-8 py-8 md:py-16 lg:py-24 px-8 sm:px-16 lg:px-32`}>
+            <h2 class="font-primary text-xl md:text-3xl font-bold">{tl("identity.initTitle")}</h2>
+            <h2 class="font-secondary text-3xl md:text-5xl  font-bold">{tl("identity.title")}</h2>
+            <div class="prose-p:text-lg prose-p:font-primary prose-p:leading-relaxed prose-p:text-justify prose-p:mb-4">
+                <p set:html={tl("identity.body")} />
             </div>
-        <div class={`flex flex-col ${colorText} col-span-2 gap-8 py-8 md:py-16 lg:py-24 px-8 sm:px-16 lg:px-32`}>
-            <h2 class="font-primary text-xl md:text-3xl font-bold">{initTitle}</h2>
-            <h2 class="font-secondary text-3xl md:text-5xl  font-bold">{title}</h2>
-            <p class="text-lg font-primary leading-relaxed text-justify"><b>El Centro del Reino de Paz y Justicia</b> es una organización internacional conformada por <b>miles de voluntarios distribuidos en numerosos países</b>, que actúan de manera coordinada bajo el liderazgo y la guía del <b>Dr. José Benjamín Pérez Matos</b>, único referente del Centro del Reino de Paz y Justicia (CRPJ).</p>
-            <p class="text-lg font-primary leading-relaxed text-justify">El Centro cuenta con <strong>presencia activa en distintos continentes</strong>, articulando personas, líderes, comunidades e instituciones que comparten una visión común: llevar los valores del Reino al espacio público y afrontar, con responsabilidad y convicción, los desafíos que atraviesa el mundo actual.</p>
-            <p class="text-lg font-primary leading-relaxed text-justify">El Centro del Reino de Paz y Justicia (CRPJ) nace con una misión clara: <b>tender puentes entre la fe y la acción en el ámbito público</b>, integrando reflexión espiritual, formación intelectual y compromiso práctico, con el objetivo de preparar el camino hacia una nueva era, marcada por un orden más justo, una paz verdadera y un mundo mejor, conforme a la visión profética.</p>
-            <p class="text-lg font-primary leading-relaxed text-justify">Su mirada es estratégica, internacional y orientada al futuro, consciente de los conflictos emergentes, las tensiones culturales, los desafíos geopolíticos y la necesidad de liderazgos sólidos capaces de actuar con claridad en tiempos de transformación global.</p>
-            
         </div>
     </div>
 

src/components/section/InfoSection.astro

@@ -1,41 +1,31 @@
 ---
-import { infoboxes } from "../../data/content/infosection.js";
 import BoxContainer from "../BoxContainer.astro";
 import { Icon } from "astro-icon/components";
 
-const { bgColor, titleColor, textColor, title, text } = Astro.props;
+import { createTranslator } from '../../i18n';
+const tl = createTranslator(Astro.currentLocale);
 ---
 
 <div class="container mx-auto">
     <div class="grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-3">
-        { infoboxes.map((box) => (
+        { tl("info.boxes").map((box) => (
             <BoxContainer props={box} />    
         ))}
     </div>
     <div class="grid grid-cols-1 lg:grid-cols-3 h-auto bg-white w-full">
         <div class="lg:col-span-2 row-span-2 p-8 lg:p-24 text-tertiary grid gap-8 ">
             <div class="grid gap-8">
-                <h2 class="font-secondary text-2xl lg:text-5xl font-bold">{title}</h2>
+                <h2 class="font-secondary text-2xl lg:text-5xl font-bold">{tl('info.title')}</h2>
                 <Icon name="ph:minus" class="text-tertiary text-4xl" />
-                <p class="text-lg text-justify">El <b>Centro del Reino de Paz y Justicia (CRPJ)</b> es una organización de alcance <b>internacional dedicada a la formación, el diálogo estratégico y la acción pública, orientada a promover la justicia y la paz</b> conforme a los valores eternos proclamados por los profetas, con un compromiso explícito y permanente con Israel y su lugar central en la historia y el destino del mundo.</p>
+                <p class="text-lg text-justify" set:html={tl("info.copy1")} />
             </div>
             <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 text-lg leading-relaxed text-justify">
-                <p>El Centro del Reino de Paz y Justicia (CRPJ) desarrolla iniciativas educativas, espacios de reflexión profunda y acciones concretas en el ámbito público, integrando principios espirituales, responsabilidad institucional y liderazgo ético. Su labor se inscribe en el campo de la diplomacia pública, entendida como una herramienta legítima para influir en la conversación global, fortalecer vínculos entre naciones y defender valores fundamentales frente a los desafíos del presente y del futuro.</p>
+                <p set:html={tl("info.copy_column1")} />
-                <p>La paz no es concebida como una consigna abstracta ni como un ideal ingenuo, sino como el resultado de decisiones firmes, liderazgo con valores y compromiso sostenido con propósitos claros, que reconocen el rol insustituible de Israel en la construcción de un orden justo y estable para toda la humanidad.</p>
+                <p set:html={tl("info.copy_column2")} />
             </div>
         </div>
         <div class="col-span-1 h-full bg-[#CBA16A]">
-            <BoxContainer props={{
+            <BoxContainer props={tl("info.endbox")} />
-                title: 'Misión, Visión y Valores Institucionales.',
-                buttonLabel: 'LEER MÁS',
-                hasButton: true,
-                bgImage: 'https://ik.imagekit.io/crpy/tr:o-20/dove.webp?updatedAt=1770966556158',
-                hasIcon: true,
-                url:'#mision',
-                bgColor: '#CBA16A',
-                titleColor: 'text-tertiary',
-                sizeTitle: 'text-2xl',
-            }} />
         </div>
         <div class="col-span-1 py-38 lg:px-24 bg-[#21523F]">
             <img src="/img/logo-ligth.webp" alt="Logo del Centro del Reino de Paz y Justicia (CRPJ)" class="w-1/3 lg:w-100 mx-auto">

src/i18n/es.json

@@ -4,5 +4,87 @@
     "nav.about": "Somos",
     "nav.news": "Noticias",
     "nav.programs": "Programas",
-    "nav.contact": "Contacto"
+    "nav.contact": "Contacto",
+
+    "hero.name": "Dr. José Benjamín Pérez Matos",
+    "hero.title": "Líder fundador",
+    "hero.body": "“El sueño de mi vida es ver cumplida la visión de los profetas: un mundo de justicia y paz para el bien de Israel y de toda la humanidad.”",
+
+    "info.title": "Construyendo el mundo soñado por los profetas: justicia y paz para Israel y toda la humanidad",
+    "info.boxes": [
+        {
+            "title": "Diplomacia Pública y proyección Internacional",
+            "copy": "Construcción consciente de vínculos éticos, culturales y estratégicos entre pueblos",
+            "buttonLabel": "Leer más",
+            "bgColor": "#CBA16A",
+            "sizeTitle": "text-2xl",
+            "titleColor": "text-[#1F5349]",
+            "textColor": "text-[#003421]",
+            "sizeText": "text-xl",
+            "hasButton": true,
+            "url":"#projection",
+            "hasIcon": true,
+            "hasInput": false
+        },
+        {
+            "title": "Programas y áreas de Acción",
+            "copy": "Cursos, seminarios y programas de formación dirigidos a líderes, profesionales, referentes.",
+            "buttonLabel": "Leer más",
+            "bgColor": "#003421",
+            "sizeTitle": "text-2xl",
+            "titleColor": "text-[#CBA16A]",
+            "textColor": "text-[#EDE9D9]",
+            "sizeText": "text-xl",
+            "bgImage": "https://ik.imagekit.io/crpy/tr:o-20/dove.webp?updatedAt=1770966556158",
+            "url": "#programs",
+            "hasButton": true,
+            "hasIcon": true,
+            "hasInput": false
+        },
+        {
+            "title": "Quiero postularme como Voluntario",
+            "copy": "Sumarse es asumir un compromiso con propósito",
+            "bgColor": "#EBE6D2",
+            "buttonLabel": "Registrarse",
+            "sizeTitle": "text-2xl",
+            "titleColor": "text-[#CBA16A]",
+            "textColor": "text-[#003421]",
+            "sizeText": "text-xl",
+            "hasButton": false,
+            "hasIcon": true,
+            "hasInput": true
+        }
+    ],
+    "info.copy1": "El <b>Centro del Reino de Paz y Justicia (CRPJ)</b>es una organización de alcance <b>internacional dedicada a la formación, el diálogo estratégico y la acción pública, orientada a promover la justicia y la paz</b> conforme a los valores eternos proclamados por los profetas, con un compromiso explícito y permanente con Israel y su lugar central en la historia y el destino del mundo.",
+    "info.copy_column1": "El Centro del Reino de Paz y Justicia (CRPJ) desarrolla iniciativas educativas, espacios de reflexión profunda y acciones concretas en el ámbito público, integrando principios espirituales, responsabilidad institucional y liderazgo ético. Su labor se inscribe en el campo de la diplomacia pública, entendida como una herramienta legítima para influir en la conversación global, fortalecer vínculos entre naciones y defender valores fundamentales frente a los desafíos del presente y del futuro.",
+    "info.copy_column2": "La paz no es concebida como una consigna abstracta ni como un ideal ingenuo, sino como el resultado de decisiones firmes, liderazgo con valores y compromiso sostenido con propósitos claros, que reconocen el rol insustituible de Israel en la construcción de un orden justo y estable para toda la humanidad.",
+    "info.endbox": {
+        "title": "Misión, Visión y Valores Institucionales.",
+        "buttonLabel": "LEER MÁS",
+        "hasButton": true,
+        "bgImage": "https://ik.imagekit.io/crpy/tr:o-20/dove.webp?updatedAt=1770966556158",
+        "hasIcon": true,
+        "url":"#mision",
+        "bgColor": "#CBA16A",
+        "titleColor": "text-tertiary",
+        "sizeTitle": "text-2xl"
+    },
+
+    "carousel1.images": [
+        {
+            "image": "https://ik.imagekit.io/crpy/tr:w-1920,h-1080,cm-extract,x-0,y-1730/lonely-african-american-male-praying-with-his-hands-bible-with-his-head-down.webp",
+            "text": "Justicia"
+        },
+        {
+                "image": "https://ik.imagekit.io/crpy/amigos-bn.webp",
+                "text": "Paz"
+        }
+    ],
+
+    "identity.initTitle": "Identidad Institucional",
+    "identity.title": "El Centro del Reino de Paz y Justicia",
+    "identity.body": "<p><b>El Centro del Reino de Paz y Justicia</b> es una organización internacional conformada por <b>miles de voluntarios distribuidos en numerosos países</b>, que actúan de manera coordinada bajo el liderazgo y la guía del <b>Dr. José Benjamín Pérez Matos</b>, único referente del Centro del Reino de Paz y Justicia (CRPJ).</p><p>El Centro cuenta con <strong>presencia activa en distintos continentes</strong>, articulando personas, líderes, comunidades e instituciones que comparten una visión común: llevar los valores del Reino al espacio público y afrontar, con responsabilidad y convicción, los desafíos que atraviesa el mundo actual.</p><p>El Centro del Reino de Paz y Justicia (CRPJ) nace con una misión clara: <b>tender puentes entre la fe y la acción en el ámbito público</b>, integrando reflexión espiritual, formación intelectual y compromiso práctico, con el objetivo de preparar el camino hacia una nueva era, marcada por un orden más justo, una paz verdadera y un mundo mejor, conforme a la visión profética.</p><p>Su mirada es estratégica, internacional y orientada al futuro, consciente de los conflictos emergentes, las tensiones culturales, los desafíos geopolíticos y la necesidad de liderazgos sólidos capaces de actuar con claridad en tiempos de transformación global.</p>",
+
+    "authority.title": "<strong>Autoridades</strong> | Centro del Reino de Paz y Justicia",
+    "authority.body": "El <strong>Dr. José Benjamín Pérez Matos</strong> es el <strong>fundador y único referente del Centro del Reino de Paz y Justicia.</strong> Su liderazgo articula visión espiritual, formación intelectual, acción pública y proyección internacional."
 }

src/i18n/index.ts

@@ -21,7 +21,7 @@ export function t(
   // fallback chain: requested locale -> default locale -> key itself
   const template =
     dictionaries[l][key] ??
-    dictionaries.it[key] ??
+    dictionaries.es[key] ??
     String(key);
 
   if (!vars) return template;

src/pages/index.astro

@@ -11,7 +11,6 @@ import IdentitySection from "../components/section/IdentitySection.astro";
 import AuthoritySection from "../components/section/AuthoritySection.astro";
 import ProjectionSection from "../components/section/ProjectionSection.astro";
 
-import { infoboxes } from "../data/content/infosection.js";
 import ColorSection from "../components/section/ColorSection.astro";
 import TitleSection from "../components/section/TitleSection.astro";
 import GridSection from "../components/section/GridSection.astro";
@@ -19,16 +18,8 @@ import ColumnsSection from "../components/section/ColumnsSection.astro";
 import FormationSection from "../components/section/FormationSection.astro";
 import FooterSection from "../components/section/FooterSection.astro";
 
-const carouselImages2 = [
+import { createTranslator } from '../i18n';
-  {
+const tl = createTranslator(Astro.currentLocale);
-    image: "https://ik.imagekit.io/crpy/tr:w-1920,h-1080,cm-extract,x-0,y-1730/lonely-african-american-male-praying-with-his-hands-bible-with-his-head-down.webp",
-    text: "Justicia",
-  },
-  {
-    image: "https://ik.imagekit.io/crpy/amigos-bn.webp",
-    text: "Paz",
-  },
-];
 
 const carouselImages3 = [
   {
@@ -45,13 +36,13 @@ const carouselImages3 = [
 <MainLayout>
   <HeroHome />
 
-  <InfoSection bgColor="bg-white" title="Construyendo el mundo soñado por los profetas: justicia y paz para Israel y toda la humanidad" data={infoboxes} />
+  <InfoSection />
 
-  <CarouselSection class="object-cover" images={carouselImages3} />
+  <CarouselSection images={tl("carousel1.images")} />
 
-  <IdentitySection bgColor="bg-white" colorText="text-[#003421]" initTitle="Identidad Institucional" title="El Centro del Reino de Paz y Justicia" />
+  <IdentitySection />
 
-  <AuthoritySection bgColor="bg-[#003421]" titleColor="text-colorSecondary" descColor="text-[#EBE6D2]" />
+  <AuthoritySection />
 
   <TitleSection title="Dr. José Benjamín Pérez Matos | Trayectoria" />
 
@@ -80,7 +71,7 @@ const carouselImages3 = [
 
   <FormationSection />
 
-  <CarouselSection images={carouselImages2} />
+  <CarouselSection images={tl("carousel1.images")} />
 
   <NewsSection />