add components vue footer form contact / modal register

Adding font weights to poppins.

package-lock.json

@@ -10,8 +10,14 @@
         "@astrojs/markdoc": "^0.15.10",
         "@astrojs/node": "^9.5.3",
         "@astrojs/vue": "^5.1.4",
+        "@coreui/icons": "^3.0.1",
         "@dotenvx/dotenvx": "^1.52.0",
+        "@fontsource-variable/kameron": "^5.2.8",
+        "@fontsource-variable/kreon": "^5.2.8",
+        "@fontsource-variable/rokkitt": "^5.2.8",
+        "@fontsource/poppins": "^5.2.7",
         "@iconify-json/ph": "^1.2.2",
+        "@iconify/vue": "^5.0.0",
         "@tailwindcss/vite": "^4.1.18",
         "@unpic/astro": "^1.0.2",
         "astro": "^5.17.1",
@@ -870,6 +876,12 @@
         "node": ">=18"
       }
     },
+    "node_modules/@coreui/icons": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@coreui/icons/-/icons-3.0.1.tgz",
+      "integrity": "sha512-u9UKEcRMyY9pa4jUoLij8pAR03g5g6TLWV33/Mx2ix8sffyi0eO4fLV8DSTQljDCw938zt7KYog5cVKEAJUxxg==",
+      "license": "MIT"
+    },
     "node_modules/@dotenvx/dotenvx": {
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/@dotenvx/dotenvx/-/dotenvx-1.52.0.tgz",
@@ -1357,6 +1369,42 @@
         "node": ">=18"
       }
     },
+    "node_modules/@fontsource-variable/kameron": {
+      "version": "5.2.8",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/kameron/-/kameron-5.2.8.tgz",
+      "integrity": "sha512-Q2wjV3qZ62H54rl2k3QUopvPutXBjOU+gy2aqTz4iZYKPW2w0LTvY+UmQLSaWmTXV3MTCHKemr8HRxObQZjx3A==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@fontsource-variable/kreon": {
+      "version": "5.2.8",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/kreon/-/kreon-5.2.8.tgz",
+      "integrity": "sha512-QSRKN9LwxoUIMjA1utIBRu5kMg5I2nmHTRJ6/+vstlnjW+eaMCxjPdpL5+NM3cFhUwyFXu/U52NmJmINrXEG1g==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@fontsource-variable/rokkitt": {
+      "version": "5.2.8",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/rokkitt/-/rokkitt-5.2.8.tgz",
+      "integrity": "sha512-/1yuWZ0YdvzD5UgayFmISjubAhqkDC5/RZyd583XCXBS9Yck3t0IYGN37+qEZtA8iQ8AypoVc2CfTRmz6L5mHQ==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@fontsource/poppins": {
+      "version": "5.2.7",
+      "resolved": "https://registry.npmjs.org/@fontsource/poppins/-/poppins-5.2.7.tgz",
+      "integrity": "sha512-6uQyPmseo4FgI97WIhA4yWRlNaoLk4vSDK/PyRwdqqZb5zAEuc+Kunt8JTMcsHYUEGYBtN15SNkMajMdqUSUmg==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
     "node_modules/@iconify-json/ph": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/@iconify-json/ph/-/ph-1.2.2.tgz",
@@ -1458,6 +1506,21 @@
         "mlly": "^1.7.4"
       }
     },
+    "node_modules/@iconify/vue": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@iconify/vue/-/vue-5.0.0.tgz",
+      "integrity": "sha512-C+KuEWIF5nSBrobFJhT//JS87OZ++QDORB6f2q2Wm6fl2mueSTpFBeBsveK0KW9hWiZ4mNiPjsh6Zs4jjdROSg==",
+      "license": "MIT",
+      "dependencies": {
+        "@iconify/types": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/cyberalien"
+      },
+      "peerDependencies": {
+        "vue": ">=3"
+      }
+    },
     "node_modules/@img/colour": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.0.0.tgz",

package.json

@@ -12,8 +12,14 @@
     "@astrojs/markdoc": "^0.15.10",
     "@astrojs/node": "^9.5.3",
     "@astrojs/vue": "^5.1.4",
+    "@coreui/icons": "^3.0.1",
     "@dotenvx/dotenvx": "^1.52.0",
+    "@fontsource-variable/kameron": "^5.2.8",
+    "@fontsource-variable/kreon": "^5.2.8",
+    "@fontsource-variable/rokkitt": "^5.2.8",
+    "@fontsource/poppins": "^5.2.7",
     "@iconify-json/ph": "^1.2.2",
+    "@iconify/vue": "^5.0.0",
     "@tailwindcss/vite": "^4.1.18",
     "@unpic/astro": "^1.0.2",
     "astro": "^5.17.1",

src/components/BoxContainer.astro

@@ -28,7 +28,7 @@ const background = props.bgImage || props.bgColor;
 
     {props.hasInput && (
         <div class="flex gap-2 w-full mt-5">
-            <RegisterModal client:load />
+            <RegisterModal client:load locale={Astro.currentLocale} />
         </div>
     )}
     </div>

src/components/Header.astro

@@ -1,22 +1,26 @@
 ---
 import Button from "./ui/Button.astro";
 import { Icon } from "astro-icon/components";
+
+import { createTranslator } from "../i18n/index.ts";
+const tl = createTranslator(Astro.currentLocale);
+const currentLocale = Astro.currentLocale;
 ---
 
 <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>
+        <a href={`/${currentLocale}`}>{tl("nav.logo_line1")}<br/>{tl("nav.logo_line2")}</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>
+        <a class="hover:text-colorPrimary transition" href="#somos">{tl("nav.about")}</a>
+        <a class="hover:text-colorPrimary transition" href="#programs">{tl("nav.programs")}</a>
+        <a class="hover:text-colorPrimary transition" href="#news">{tl("nav.news")}</a>
       </div>
       <div class="drawer lg:hidden">
         <input id="my-drawer-1" type="checkbox" class="drawer-toggle" />
@@ -31,24 +35,38 @@ import { Icon } from "astro-icon/components";
              <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>
+                  <a href="/">{tl("nav.logo_line1")}<br/>{tl("nav.logo_line2")}</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>
+                <li><a><a class="hover:text-colorPrimary transition" href="#somos">{tl("nav.about")}</a></a></li>
+                <li><a><a class="hover:text-colorPrimary transition" href="#programs">{tl("nav.programs")}</a></a></li>
+                <li><a><a class="hover:text-colorPrimary transition" href="#news">{tl("nav.news")}</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" />
+              <Button class="px-8 py-2 uppercase text-lg mt-8" title={tl("nav.contact")} url="#contact" variant="primary" />
             </div>
+            <div class="dropdown mt-10">
+            <div tabindex="0" role="button" class="btn-ghost m-1 cursor-pointer"><Icon name="ph:translate" class="text-2xl" /></div>
+            <ul tabindex="-1" class="dropdown-content text-tertiary text-lg bg-colorPrimary menu z-1 w-52 p-2 shadow-sm">
+              <li><a href="/es">🇪🇸 Espanol</a></li>
+              <li><a href="/en">🇬🇧 English</a></li>
+            </ul>
+          </div>
           </ul>
         </div>
       </div>
       <div class="w-50 hidden md:block">
-        <Button class="px-8 py-2 uppercase" title="Contacto" url="#contact" variant="primary" />
+        <Button class="px-4 py-2 uppercase" title={tl("nav.contact")} url="#contact" variant="primary" />
+      </div>
+      <div class="dropdown dropdown-end lg:block hidden">
+        <div tabindex="0" role="button" class="btn-ghost m-1 cursor-pointer"><Icon name="ph:translate" class="text-2xl" /></div>
+        <ul tabindex="-1" class="dropdown-content text-tertiary text-lg bg-colorPrimary menu z-1 w-52 p-2 shadow-sm">
+          <li><a href="/es">🇪🇸 Espanol</a></li>
+          <li><a href="/en">🇬🇧 English</a></li>
+        </ul>
       </div>
     </nav>
   </div>

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">
-                        “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>
+                    <h2 class="text-[#EAE6D2] text-lg py-8">{tl("hero.body")}</h2>
                     <div class="w-16 self-end md:mt-64">
                         <img
                             src="/img/white-dove.webp"

src/components/RegisterModal.vue

@@ -1,8 +1,15 @@
 <script setup>
-import { ref } from "vue";
+import { ref} from "vue";
+import { Icon } from '@iconify/vue'
+const props = defineProps({
+  locale: String
+})
+import { createTranslator, t } from "../i18n";
+const tl = createTranslator(props.locale);
 
 const loading = ref(false);
 const modalRef = ref(null);
+const isFormPendiente = ref(false);
 
 const openModal = () => {
     modalRef.value?.showModal();
@@ -38,106 +45,137 @@ const handleSubmit = async (e) => {
 </script>
 
 <template>
-<button
-  @click="openModal"
-  class="btn rounded-none p-7 bg-[#22523F] text-[#EBE6D2] border-0 hover:bg-[#EBE6D2]/90 hover:text-tertiary uppercase text-lg"
->
-  Registrate
-</button>
+  <template v-if="isFormPendiente">
 
-  <dialog ref="modalRef" id="my_modal_5" class="modal modal-bottom sm:modal-middle p-8">
-    <div class="modal-box bg-[#EBE6D2] text-[#22523F] rounded-none p-8">
+    <button
+      @click="openModal"
+      class="btn rounded-none p-7 bg-[#22523F] text-[#EBE6D2] border-0 hover:bg-[#EBE6D2]/90 hover:text-tertiary uppercase text-lg"
+    >
+      {{ tl("info.register") }}
+    </button>
 
-      <form method="dialog">
+
+    <dialog
+      ref="modalRef"
+      class="modal modal-bottom sm:modal-middle p-8"
+    >
+      <div class="modal-box bg-[#EBE6D2] text-[#22523F] rounded-none p-8">
+
+        <!-- Botón cerrar -->
         <button
-        v-on:click="closeModal"
-        type="button"
-        class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
+          type="button"
+          @click="closeModal"
+          class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
         >
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="w-6 h-6"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-        >
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-            d="M6 18L18 6M6 6l12 12" />
-        </svg>
+          <Icon icon="ph:x" class="text-2xl" />
         </button>
-      </form>
 
-      <h3 class="text-lg font-bold lg:text-2xl font-secondary text-center">
-        Formulario de Registro
-      </h3>
+        <!-- Título -->
+        <h3 class="text-lg font-bold lg:text-2xl font-secondary text-center uppercase">
+          {{ tl("info.modal.title") }}
+        </h3>
 
-      <div class="form py-4 mt-6 ">
+        <!-- Texto -->
+        <p class="text-lg font-primary text-center mt-10">
+          {{ tl("info.modal.text") }}
+        </p>
 
-        <form
-          id="voluteenFrom"
-          action="/api/emailPostulacion/send"
-          method="post"
-          @submit="handleSubmit"
-          class="flex flex-col gap-2 place-items-center">
+      </div>
+    </dialog>
+  </template>
+  <template v-else>
+    <button
+    @click="openModal"
+    class="btn rounded-none p-7 bg-[#22523F] text-[#EBE6D2] border-0 hover:bg-[#EBE6D2]/90 hover:text-tertiary uppercase text-lg"
+  >
+    {{ tl("info.register") }}
+  </button>
 
-          <label class="input rounded-none bg-white">
-            <span>Nombres <span class="text-error">*</span></span>
-            <input name="nombres" type="text" placeholder="Nombres"
-              class="w-full max-w-xs rounded-none invalid:border-error focus:invalid:border-error"
-              required />
-          </label>
-
-          <label class="input rounded-none bg-white">
-            <span>Apellidos <span class="text-error">*</span></span>
-            <input name="apellidos" type="text" placeholder="Apellidos"
-              class="w-full max-w-xs rounded-none invalid:border-error focus:invalid:border-error"
-              required />
-          </label>
-
-          <label class="input rounded-none bg-white">
-            <span>País</span>
-            <input name="pais" type="text" placeholder="Pais"
-              class="w-full max-w-xs rounded-none" />
-          </label>
-
-          <label class="input rounded-none bg-white">
-            <span>Lugar</span>
-            <input name="lugar" type="text" placeholder="Lugar"
-              class="w-full max-w-xs rounded-none" />
-          </label>
-
-          <label class="input rounded-none bg-white">
-            <span>Dirección</span>
-            <input name="direccion" type="text" placeholder="Dirección"
-              class="w-full max-w-xs rounded-none" />
-          </label>
-
-          <label class="input rounded-none bg-white">
-            <span>Teléfono <span class="text-error">*</span></span>
-            <input name="telefono" type="text" placeholder="Teléfono"
-              class="w-full max-w-xs rounded-none invalid:border-error focus:invalid:border-error"
-              required />
-          </label>
-
-          <label class="input validator rounded-none bg-white">
-            <span>Email <span class="text-error">*</span></span>
-            <input name="email" type="email"
-              placeholder="Ingresa Correo Electrónico"
-              class="w-full max-w-xs rounded-none invalid:border-error focus:invalid:border-error"
-              required />
-          </label>
+    <dialog ref="modalRef" id="my_modal_5" class="modal modal-bottom sm:modal-middle p-8">
+      <div class="modal-box bg-[#EBE6D2] text-[#22523F] rounded-none p-8">
 
+        <form method="dialog">
           <button
-            type="submit"
-            :disabled="loading"
-            class="btn mt-4 bg-[#22523F] text-[#EBE6D2] border-0 hover:bg-[#EBE6D2]/90 hover:text-tertiary uppercase rounded-none">
-
-            {{ loading ? "Enviando..." : "Enviar" }}
-
+            v-on:click="closeModal"
+            type="button"
+            class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
+          >
+            <Icon icon="ph:x" class="w-6 h-6" />
           </button>
         </form>
 
+        <h3 class="text-lg font-bold lg:text-2xl font-secondary text-center">
+          Formulario de Registro
+        </h3>
+
+        <div class="form py-4 mt-6 ">
+
+          <form
+            id="voluteenFrom"
+            action="/api/emailPostulacion/send"
+            method="post"
+            @submit="handleSubmit"
+            class="flex flex-col gap-2 place-items-center">
+
+            <label class="input rounded-none bg-white">
+              <span>Nombres <span class="text-error">*</span></span>
+              <input name="nombres" type="text" placeholder="Nombres"
+                class="w-full max-w-xs rounded-none invalid:border-error focus:invalid:border-error"
+                required />
+            </label>
+
+            <label class="input rounded-none bg-white">
+              <span>Apellidos <span class="text-error">*</span></span>
+              <input name="apellidos" type="text" placeholder="Apellidos"
+                class="w-full max-w-xs rounded-none invalid:border-error focus:invalid:border-error"
+                required />
+            </label>
+
+            <label class="input rounded-none bg-white">
+              <span>País</span>
+              <input name="pais" type="text" placeholder="Pais"
+                class="w-full max-w-xs rounded-none" />
+            </label>
+
+            <label class="input rounded-none bg-white">
+              <span>Lugar</span>
+              <input name="lugar" type="text" placeholder="Lugar"
+                class="w-full max-w-xs rounded-none" />
+            </label>
+
+            <label class="input rounded-none bg-white">
+              <span>Dirección</span>
+              <input name="direccion" type="text" placeholder="Dirección"
+                class="w-full max-w-xs rounded-none" />
+            </label>
+
+            <label class="input rounded-none bg-white">
+              <span>Teléfono <span class="text-error">*</span></span>
+              <input name="telefono" type="text" placeholder="Teléfono"
+                class="w-full max-w-xs rounded-none invalid:border-error focus:invalid:border-error"
+                required />
+            </label>
+
+            <label class="input validator rounded-none bg-white">
+              <span>Email <span class="text-error">*</span></span>
+              <input name="email" type="email"
+                placeholder="Ingresa Correo Electrónico"
+                class="w-full max-w-xs rounded-none invalid:border-error focus:invalid:border-error"
+                required />
+            </label>
+
+            <button
+              type="submit"
+              :disabled="loading"
+              class="btn mt-4 bg-[#22523F] text-[#EBE6D2] border-0 hover:bg-[#EBE6D2]/90 hover:text-tertiary uppercase rounded-none">
+
+              {{ loading ? "Enviando..." : "Enviar" }}
+
+            </button>
+          </form>
+
+        </div>
       </div>
-    </div>
-  </dialog>
-</template>
+    </dialog>
+    </template>
+  </template>

src/components/cards/NewsCard.astro

@@ -4,8 +4,9 @@ import { Icon } from "astro-icon/components";
 import "dayjs/locale/es";
 import dayjs from "dayjs";
 const regionNames = new Intl.DisplayNames(['es'], { type: 'region' });
+const { locale } = Astro.params;
 
-dayjs.locale("es");
+dayjs.locale(locale);
 
 const { data } = Astro.props;
 const nicedate = dayjs(data.data.date).format("D MMMM YYYY");
@@ -18,7 +19,7 @@ const countryName = regionNames.of(data.data.country);
   <p class="font-light text-2xl mb-8">
     {data.data.city}, {countryName}<br />({nicedate}):
   </p>
-  <h3 class="text-2xl font-bold mb-8"><a href={`/news/${data.id}`}>{data.data.title}</a></h3>
+  <h3 class="text-2xl font-bold mb-8"><a href={`/${locale}/news/${data.id}`}>{data.data.title}</a></h3>
 
   <div>
     <Image

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}`}>
-            <h2 class={`${titleColor} text-2xl`}><strong>Autoridades</strong> | Centro del Reino de Paz y Justicia</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>
+        <div class="col-span-3 sm:col-span-2 p-12 lg:p-24 lg:h-82 text-[#EBE6D2]">
+            <h2 class="text-colorSecondary text-2xl" set:html={tl("authority.title")}></h2>
+            <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/ColumnsSection.astro

@@ -1,14 +1,17 @@
 ---
 import { Icon } from "astro-icon/components";
 
+import { createTranslator } from '../../i18n';
+const tl = createTranslator(Astro.currentLocale);
+
 const { props } = Astro.props;
 ---
 <div class="container mx-auto">
     <div class="grid md:grid-cols-2 min-h-100">
         <div class="bg-[#EBE5D0] p-12 md:p-24 grid lg:grid-cols-2">
             <div class="leftcol flex justify-between flex-col min-h-full">
-                <h2 class="text-5xl font-secondary text-tertiary font-bold">Justicia</h2>
-                <p  class="text-lg text-tertiary">Compromiso activo con un orden justo, basado en principios morales, respeto por la dignidad humana y defensa de valores permanentes.</p>
+                <h2 class="text-5xl font-secondary text-tertiary font-bold">{tl("values.justice.title")}</h2>
+                <p  class="text-lg text-tertiary">{tl("values.justice.text")}</p>
             </div>
             <div class="rightcol flex justify-end align-bottom min-h-full ">
                 <Icon name="icon_justice_1" class="text-9xl text-tertiary self-end" />
@@ -16,8 +19,8 @@ const { props } = Astro.props;
         </div>
         <div class="bg-tertiary p-12 md:p-24 grid lg:grid-cols-2">
             <div class="leftcol flex justify-between flex-col min-h-full">
-                <h2 class="text-5xl font-secondary font-bold text-[#CBA16A]">Integridad</h2>
-                <p class="text-[#CBA16A] text-lg">Coherencia entre pensamiento, palabra y acción; transparencia institucional y responsabilidad en el espacio público.</p>
+                <h2 class="text-5xl font-secondary font-bold text-[#CBA16A]">{tl("values.integrity.title")}</h2>
+                <p class="text-[#CBA16A] text-lg">{tl("values.integrity.text")}</p>
             </div>
             <div class="rightcol flex justify-end align-bottom min-h-full ">
                 <Icon name="icon_justice_2" class="text-[#EBE5D0] text-9xl self-end" />
@@ -26,16 +29,16 @@ const { props } = Astro.props;
     </div>
     <div class="grid lg:grid-cols-3">
         <div class="bg-tertiary p-12 xl:p-20 2xl:p-24 flex justify-between flex-col min-h-full lg:aspect-square">
-            <h2 class="text-3xl xl:text-5xl font-secondary font-bold text-white">Servicio con Propósito</h2>
-            <p class="text-xl text-[#EBE5D0]">Vocación de acompañamiento y acción orientada a objetivos claros y trascendentes.</p>
+            <h2 class="text-3xl xl:text-5xl font-secondary font-bold text-white">{tl("values.service.title")}</h2>
+            <p class="text-xl text-[#EBE5D0]">{tl("values.service.text")}</p>
         </div>
         <div class="bg-[#BEA48D] p-12 xl:p-20 2xl:p-24 flex justify-between flex-col min-h-full lg:aspect-square">
-            <h2 class="text-3xl xl:text-5xl font-secondary font-bold text-tertiary">Excelencia</h2>
-            <p class="text-xl text-tertiary">Rigor intelectual, profesionalismo y mejora constante en todas las áreas de trabajo.</p>
+            <h2 class="text-3xl xl:text-5xl font-secondary font-bold text-tertiary">{tl("values.excellence.title")}</h2>
+            <p class="text-xl text-tertiary">{tl("values.excellence.text")}</p>
         </div>
         <div class="bg-[#22523F] p-12 xl:p-20 2xl:p-24 flex justify-between flex-col min-h-full lg:aspect-square">
-            <h2 class="text-3xl xl:text-5xl font-secondary font-bold text-white">Diálogo Estratégico</h2>
-            <p class="text-white text-xl">Apertura al intercambio entre culturas, naciones y credos, sin renunciar a convicciones ni principios fundamentales.</p>
+            <h2 class="text-3xl xl:text-5xl font-secondary font-bold text-white">{tl("values.dialogue.title")}</h2>
+            <p class="text-white text-xl">{tl("values.dialogue.text")}</p>
         </div>
     </div>
 </div>

src/components/section/FooterSection.astro

@@ -2,6 +2,9 @@
 import { Icon } from "astro-icon/components";
 import { Image } from "astro:assets";
 import jbp from "../../assets/DRJBP-1.webp";
+import FormContact from "./FormContact.vue";
+import { createTranslator, t } from '../../i18n';
+const tl = createTranslator(Astro.currentLocale);
 ---
 
 <div id="contact" class="bg-[#22523F]">
@@ -11,97 +14,23 @@ import jbp from "../../assets/DRJBP-1.webp";
       <Image src={jbp} alt="Centro del Reino de Paz y Justicia" />
     </div>
 
-    <h4 class="text-lg text-center font-bold uppercase">Contacto</h4>
-    <h2 class="text-2xl lg:text-5xl text-center font-bold font-secondary my-8">
-      Conectemos con visión y propósito
+    <h4 class="text-lg text-center font-bold uppercase" set:html={tl("footer.title")}></h4>
+    <h2 class="text-2xl lg:text-5xl text-center font-bold font-secondary my-8" set:html={tl("footer.subtitle")}>
     </h2>
 
     <div class="px-12 lg:px-4 lg:w-2/5 mx-auto">
 
-      <p class="text-lg font-light mb-10">
-        El <strong>Centro del Reino de Paz y Justicia</strong> dispone de canales
-        directos para consultas institucionales, participación en programas y
-        actividades internacionales.
-      </p>
+      <p class="text-lg font-light mb-10" set:html={tl("footer.text")}></p>
 
-      <p class="text-lg font-light mb-10 break-words">
-        Correo electrónico:
-        <strong>developer@centrodelreinodepazyjusticia.com</strong><br />
-        Redes sociales: actualizaciones permanentes sobre actividades y convocatorias.
-      </p>
+      <p class="text-lg font-light mb-10 break-words" set:html={tl("footer.text2")}></p>
 
-      <!-- FORMULARIO -->
-      <form method="POST" action="/api/emailInfo/send" class="flex flex-col gap-4">
-
-        <fieldset>
-
-          <input
-            name="nombre"
-            type="text"
-            placeholder="Nombre y Apellido"
-            required
-            class="bg-[#EBE5D0] w-full py-2 px-4 mb-2 text-[#303335] placeholder:text-[#303335] focus:outline-none"
-          />
-
-          <input
-            name="email"
-            type="email"
-            placeholder="E-Mail"
-            required
-            class="bg-[#EBE5D0] w-full py-2 px-4 mb-2 text-[#303335] placeholder:text-[#303335] focus:outline-none"
-          />
-
-          <textarea
-            name="mensaje"
-            placeholder="Escriba su mensaje"
-            rows="5"
-            required
-            class="bg-[#EBE5D0] w-full py-2 px-4 mb-2 text-[#303335] placeholder:text-[#303335] focus:outline-none"
-          ></textarea>
-
-        </fieldset>
-
-        <div class="flex flex-row justify-between items-center mt-4">
-
-          <ul class="flex flex-row gap-2">
-            <li class="border-r pr-2">
-              <a href="https://x.com/CRPazYJusticia" target="_blank">
-                <Icon name="ph:x-logo-thin" class="text-3xl" />
-              </a>
-            </li>
-            <li class="border-r pr-2">
-              <a href="https://www.instagram.com/centrodelreinodepazyjusticia/" target="_blank">
-                <Icon name="ph:instagram-logo-thin" class="text-3xl" />
-              </a>
-            </li>
-            <li class="border-r pr-2">
-              <a href="https://www.facebook.com/Centrodelreinodepazyjusticia" target="_blank">
-                <Icon name="ph:facebook-logo-thin" class="text-3xl" />
-              </a>
-            </li>
-            <li>
-              <a href="https://www.youtube.com/@CentrodelReinodePazyJusticia" target="_blank">
-                <Icon name="ph:youtube-logo-thin" class="text-3xl" />
-              </a>
-            </li>
-          </ul>
-
-          <button
-            type="submit"
-            class="bg-[#003421] px-6 py-2 text-sm hover:bg-[#EBE5D0] hover:text-[#003421] cursor-pointer transition duration-300"
-          >
-            Enviar
-          </button>
-
-        </div>
-      </form>
+      <FormContact client:load locale ={Astro.currentLocale}/>
       
     </div>
 
     <div class="flex lg:justify-between mt-10 lg:mt-0 align-center justify-center">
-      <p class="px-4 order-1 text-sm text-white lg:self-end text-center lg:text-left">
-        ©2026. Todos los Derechos Reservados. All Rights Reserved.
-        Centro del Reino de Paz y Justicia
+      <p class="px-4 order-1 text-sm font-normal text-white lg:self-end text-center lg:text-left">
+        {tl("footer.reserved")}
       </p>
       <img class="w-24 lg:order-1 z-10 pl-6 object-contain" src="/img/logo-metalico.webp" alt="Logo Metalico">
     </div>

src/components/section/FormContact.vue

@@ -0,0 +1,102 @@
+<script setup>
+import { Icon } from "@iconify/vue";
+import { createTranslator } from "../../i18n";
+
+const props = defineProps({
+  locale: String
+});
+
+const tl = createTranslator(props.locale);
+
+const handleSubmit = async (e) => {
+  const formData = new FormData(e.target);
+
+  try {
+    const response = await fetch("/api/emailInfo/send", {
+      method: "POST",
+      body: formData,
+    });
+
+    e.target.reset();
+    
+    if (!response.ok)
+        throw new Error();
+  } catch (error) {
+    console.error(error);
+  }
+};
+</script>
+
+<template>
+  <form
+    @submit.prevent="handleSubmit"
+    class="flex flex-col gap-4"
+  >
+    <fieldset>
+
+      <input
+        name="nombre"
+        type="text"
+        :placeholder="tl('footer.form.name')"
+        required
+        class="bg-[#EBE5D0] w-full py-2 px-4 mb-2 text-[#303335] placeholder:text-[#303335] focus:outline-none"
+      />
+
+      <input
+        name="email"
+        type="email"
+        placeholder="E-Mail"
+        required
+        class="bg-[#EBE5D0] w-full py-2 px-4 mb-2 text-[#303335] placeholder:text-[#303335] focus:outline-none"
+      />
+
+      <textarea
+        name="mensaje"
+        :placeholder="tl('footer.form.mesagge')"
+        rows="5"
+        required
+        class="bg-[#EBE5D0] w-full py-2 px-4 mb-2 text-[#303335] placeholder:text-[#303335] focus:outline-none"
+      ></textarea>
+
+    </fieldset>
+
+    <div class="flex flex-row justify-between items-center mt-4">
+
+      <!-- Social Icons -->
+      <ul class="flex flex-row gap-2">
+        <li class="border-r pr-2">
+          <a href="https://x.com/CRPazYJusticia" target="_blank">
+            <Icon icon="ph:x-logo-thin" class="text-3xl" />
+          </a>
+        </li>
+
+        <li class="border-r pr-2">
+          <a href="https://www.instagram.com/centrodelreinodepazyjusticia/" target="_blank">
+            <Icon icon="ph:instagram-logo-thin" class="text-3xl" />
+          </a>
+        </li>
+
+        <li class="border-r pr-2">
+          <a href="https://www.facebook.com/Centrodelreinodepazyjusticia" target="_blank">
+            <Icon icon="ph:facebook-logo-thin" class="text-3xl" />
+          </a>
+        </li>
+
+        <li>
+          <a href="https://www.youtube.com/@CentrodelReinodePazyJusticia" target="_blank">
+            <Icon icon="ph:youtube-logo-thin" class="text-3xl" />
+          </a>
+        </li>
+      </ul>
+
+      <!-- Submit -->
+      <button
+        type="submit"
+        class="bg-[#003421] px-6 py-2 text-sm hover:bg-[#EBE5D0] hover:text-[#003421] cursor-pointer transition duration-300"
+      >
+        {{ tl("footer.form.button") }}
+      </button>
+
+    </div>
+  </form>
+</template>

src/components/section/FormationSection.astro

@@ -1,26 +1,21 @@
 ---
 import { Icon } from "astro-icon/components";
+
+import { createTranslator, t } from '../../i18n';
+const tl = createTranslator(Astro.currentLocale);
 ---
 <div id="programs" class="bg-[#BEA48D] py-16 lg:py-32">
     <div class="container mx-auto">
-        <h4 class="text-lg text-center font-bold uppercase text-[#003421]">Programas y Área de Acción</h4>
-        <h2 class="text-3xl lg:text-5xl text-center font-bold font-secondary my-8 text-[#003421]">Formación y Capacitación</h2>
-        <p class="text-lg w-2/3 mx-auto mb-20 text-[#003421] text-justify">El <strong>Centro del Reino de Paz y Justicia (CRPJ) desarrolla cursos, seminarios y programas de formación</strong> dirigidos a líderes, profesionales, referentes institucionales y actores con responsabilidad pública.</p>
+        <h4 class="text-lg text-center uppercase text-[#003421]">{tl("formation.subtitle")}</h4>
+        <h2 class="text-3xl lg:text-5xl text-center font-bold font-secondary my-8 text-[#003421]">{tl("formation.title")}</h2>
+        <p class="text-lg w-2/3 mx-auto mb-20 text-[#003421] text-justify" set:html={tl("formation.text")}></p>
 
         <div class="grid xl:grid-cols-3 text-[#003421] gap-20">
             <div class="bg-[#EBE5D0] p-12 relative pb-40">
                 <Icon name="ph:arrow-circle-down-thin" class="text-6xl mb-12 text-[#003421]" />
-                <h4 class="text-[#003421] font-bold text-2xl mb-12">Area de Formación</h4>
+                <h4 class="text-[#003421] text-2xl mb-12">{tl("formation.area.title")}</h4>
 
-                <p class="text-lg">
-                    <ul class="text-lg list-disc list-inside">
-                        <li class="mb-8">Liderazgo ético y estratégico.</li>
-                        <li class="mb-8">Mediación y resolución responsable de conflictos.</li>
-                        <li class="mb-8">Fe, valores y acción en el espacio público.</li>
-                        <li class="mb-8">Análisis de escenarios internacionales y desafíos contemporáneos.</li>
-                        <li class="mb-8">Fundamentos para la construcción de una paz sólida y duradera, con eje en Israel.</li>
-                    </ul>
-                </p>
+                <ul class="text-lg list-disc font-normal list-inside leading-8" set:html={tl("formation.area.text")}></ul>
 
                 <div class="bottom-12 right-12 absolute">
                     <Icon name="icon_formation_1"  class="text-8xl text-[#003421]" />
@@ -29,9 +24,9 @@ import { Icon } from "astro-icon/components";
 
             <div class="bg-[#EBE5D0] text-[#003421] p-12 relative pb-40">
                 <Icon name="ph:arrow-circle-down-thin" class="text-6xl mb-12 text-[#003421]" />
-                <h4 class="text-[#003421] font-bold text-2xl mb-12">Asesoría y Consultoría</h4>
+                <h4 class="text-[#003421] text-2xl mb-12">{tl("formation.consulting.title")}</h4>
 
-                <p class="text-lg">Acompañamiento estratégico a organizaciones e instituciones que buscan diseñar e implementar iniciativas de impacto, alineadas con valores claros, objetivos transversales y una visión de largo plazo.</p>
+                <p class="text-lg font-normal">{tl("formation.consulting.text")}</p>
 
                 <div class="bottom-12 right-12 absolute">
                     <Icon name="icon_formation_2"  class="text-8xl" />
@@ -40,9 +35,9 @@ import { Icon } from "astro-icon/components";
 
             <div class="bg-[#EBE5D0] text-[#003421] p-12 relative pb-40">
                 <Icon name="ph:arrow-circle-down-thin" class="text-6xl mb-12 text-[#003421]" />
-                <h4 class="text-[#003421] font-bold text-2xl mb-12">Proyectos de Acción</h4>
+                <h4 class="text-[#003421] text-2xl mb-12" set:html={tl("formation.action.title")}></h4>
 
-                <p class="text-lg">Desarrollo de iniciativas concretas en distintos territorios, orientadas a la formación, la prevención de conflictos y el fortalecimiento de liderazgos locales con visión internacional.</p>
+                <p class="text-lg font-normal" set:html={tl("formation.action.text")}></p>
 
                 <div class="bottom-12 right-12 absolute">
                     <Icon name="icon_formation_3" class="text-8xl" />

src/components/section/GridSection.astro

@@ -1,6 +1,9 @@
 ---
 import GridCard from "../cards/GridCard.astro"
 
+import { createTranslator } from '../../i18n';
+const tl = createTranslator(Astro.currentLocale);
+
 const cards = [
     {
         type: 'text',
@@ -52,7 +55,7 @@ const cards = [
     <div class="container mx-auto">
         <div class="grid grid-cols-2 md:grid-cols-4">
             {
-                cards.map(card =>(
+                tl("grid.cards").map((card) => (
                     <GridCard props={card} />
                 ))
             }

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 ${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 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>
     </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>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_column1")} />
+                <p set:html={tl("info.copy_column2")} />
             </div>
         </div>
         <div class="col-span-1 h-full bg-[#CBA16A]">
-            <BoxContainer props={{
-                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',
-            }} />
+            <BoxContainer props={tl("info.endbox")} />
         </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/components/section/NewsSection.astro

@@ -1,14 +1,21 @@
 ---
 import { getCollection, getEntry } from "astro:content";
 import NewsCard from "../cards/NewsCard.astro";
-const newsItems = await getCollection("news");
+const newsItems = await getCollection("news", (post)=>{
+    //Filter by locale
+    const currentLocale = Astro.currentLocale;
+    return post.data.locale == currentLocale
+});
+
+import { createTranslator, t } from '../../i18n';
+const tl = createTranslator(Astro.currentLocale);
 ---
 <div id="news" class="bg-[#22523F] py-12 lg:py-20">
     <div class="container mx-auto">
     <div class="flex flex-col lg:w-1/2 items-center mx-auto py-8">
-        <h4 class="text-white text-2xl uppercase font-bold text-center mb-4 font-primary">Noticias</h4>
-    <h2 class="text-white text-3xl lg:text-5xl font-bold text-center font-secondary mb-4">Actualidad institucional y proyección internacional</h2>
-    <p class="text-white text-xl text-center">Esta sección reúne las principales actividades, reconocimientos y acciones del Centro del Reino de Paz y Justicia y de su fundador.</p>
+        <h4 class="text-white text-2xl uppercase font-bold text-center mb-4 font-primary">{tl("news.title")}</h4>
+    <h2 class="text-white text-3xl lg:text-5xl font-bold text-center font-secondary mb-4">{tl("news.text")}</h2>
+    <p class="text-white text-xl text-center">{tl("news.text2")}</p>
     </div>
     
 

src/components/section/ParticipateSection.astro

@@ -1,16 +1,18 @@
 ---
+import { createTranslator, t } from '../../i18n';
+const tl = createTranslator(Astro.currentLocale);
 ---
 <div class="bg-[#CBA16A] py-12 lg:py-20">
     <div class="container mx-auto">
-    <h4 class="text-tertiary text-2xl uppercase font-bold text-center mb-8 font-primary">Participa | Colabora</h4>
-    <h2 class="text-tertiary text-3xl lg:text-5xl font-bold lg:text-center font-secondary mb-4 text-center">Sumarse es asumir un compromiso con propósito</h2>
+    <h4 class="text-tertiary text-2xl uppercase font-bold text-center mb-8 font-primary">{tl("participate.title")}</h4>
+    <h2 class="text-tertiary text-3xl lg:text-5xl font-bold lg:text-center font-secondary mb-4 text-center">{tl("participate.text")}</h2>
 
-    <p class="text-tertiary pt-10 text-2xl px-12 text-center">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>
+    <p class="text-tertiary font-normal pt-10 text-2xl px-12 text-center" set:html={tl("participate.text2")} />
 
     <div class="grid md: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>
+            <h5 class="font-bold mb-6">{tl("participate.box1.title")}</h5>
+            <p class="font-normal">{tl("participate.box1.text")}</p>
         </div>
 
         <!-- <div class="border-1 border-white p-8 text-tertiary">
@@ -19,12 +21,12 @@
         </div> -->
 
         <div class="border-1 border-white p-8 text-tertiary">
-            <h5 class="font-bold text-lg mb-6">Difusión institucional:</h5>
-            <p>amplificación de la misión y acciones del Centro del Reino de Paz y Justicia (CRPJ) en espacios públicos.</p>
+            <h5 class="font-bold text-lg mb-6">{tl("participate.box2.title")}</h5>
+            <p class="font-normal">{tl("participate.box2.text")}</p>
         </div>
     </div>
     <div class="flex justify-center">
-            <p class="text-tertiary text-xl px-12 font-bold mx-auto">La paz se construye mediante decisiones responsables, liderazgo comprometido y acción sostenida.</p>
+            <p class="text-tertiary text-xl px-12 font-bold mx-auto">{tl("participate.text3")}</p>
 
     </div>
 </div>

src/components/section/ProjectionSection.astro

@@ -1,28 +1,20 @@
 ---
-import { infoboxes } from "../../data/content/infosection.js";
 import GridCard from "../cards/GridCard.astro";
 import BoxContainer from "../BoxContainer.astro";
 import { Icon } from "astro-icon/components";
 
-const { bgColor, titleColor, textColor, title, text } = Astro.props;
+import { createTranslator, t } from '../../i18n';
+const tl = createTranslator(Astro.currentLocale);
 ---
 
 <div class="container mx-auto">
 
     <div id="projection" class="grid lg:grid-cols-3 bg-white w-full">
-        <div class="row-span-2 lg:col-span-2 p-12 lg:p-24 text-tertiary">
-            <div class="flex flex-col gap-5 md:text-lg text-justify">
-                <h2 class="font-secondary text-3xl lg:text-5xl font-bold">{title}</h2>
+        <div class="row-span-2 lg:col-span-2 p-12 lg:p-24">
+            <div class="flex flex-col gap-5 md:text-lg text-tertiary text-justify prose-p:mb-4 prose-ul:text-tertiary prose-p:text-tertiary prose-strong:text-tertiary prose-strong:font-bold ">
+                <h2 class="font-secondary text-3xl lg:text-5xl font-bold">{tl('projection.title')}</h2>
                 <Icon name="ph:minus" class="text-tertiary text-4xl" />
-                <p class="text-lg">El <strong>Centro del Reino de Paz y Justicia</strong> lleva adelante una activa política de diplomacia pública, entendida como la construcción consciente de vínculos éticos, culturales y estratégicos entre pueblos, instituciones y liderazgos globales.</p>
-                <p><strong>A través de encuentros, giras internacionales, foros y relaciones institucionales, el Centro del Reino de Paz y Justicia (CRPJ) impulsa:</strong></p>
-                <ul class="list-disc list-inside text-lg">
-                    <li>El diálogo interreligioso e intercultural desde valores firmes.</li>
-                    <li>La defensa de la justicia y la paz en escenarios internacionales.</li>
-                    <li>La vinculación con líderes políticos, académicos y sociales.</li>
-                    <li>El <strong>apoyo claro y permanente al pueblo judío y al Estado de Israel</strong>, reconociendo su centralidad histórica, espiritual y geopolítica.</li>
-                </ul>
-                <p>Esta proyección internacional posiciona al Centro del Reino de Paz y Justicia (CRPJ) como un <strong>actor relevante en el debate global sobre el futuro del mundo</strong>, la estabilidad internacional y la vigencia de los valores proféticos.</p>
+                <div class="prose" set:html={tl('projection.text')}></div>
             </div>
             <div class="grid xl:grid-cols-2 gap-16 mt-12">
                 <GridCard props={{
@@ -30,7 +22,7 @@ const { bgColor, titleColor, textColor, title, text } = Astro.props;
                     bgColor: '#BEA48D',
                     icon: 'ph:minus',
                     image: 'https://ik.imagekit.io/crpy/JBP-MBM.webp',
-                    text: 'La vinculación con líderes políticos, académicos y sociales.'
+                    text: tl("projection.card1")
 
                 }} />
                 <GridCard props={{
@@ -38,7 +30,7 @@ const { bgColor, titleColor, textColor, title, text } = Astro.props;
                         type: 'imgText',
                         image: 'https://ik.imagekit.io/crpy/pueblo-judio.webp',
                         icon: 'ph:minus',
-                        text: 'Apoyo claro y permanente al pueblo judío y al Estado de Israel'
+                        text: tl("projection.card2")
                     }} />
             </div>
         </div>

src/content.config.js

@@ -3,8 +3,9 @@ import { glob, file } from 'astro/loaders';
 import { z } from 'astro/zod';
 
 const news = defineCollection({
-    loader: glob({ pattern: "**/*.md", base: "./src/data/news" }),
+    loader: glob({ pattern: "**/*.md", base: "./src/content/news" }),
     schema: z.object({
+        locale: z.string(),
         title: z.string(),
         date: z.date(),
         place: z.string().optional(),

src/content/news/en/1.md

@@ -0,0 +1,11 @@
+---
+locale: en
+title: 'A news article in english'
+date: 2025-09-18
+slug: 2025-09-18-a-news-article-in-english
+place: The basement
+city: Cota
+country: CO
+thumbnail: https://ik.imagekit.io/crpy/tr:w-600/Condecoracion-JBP-congreso-18-sep-2025_-15-scaled.jpg
+---
+Some dummy news content in here

src/content/news/es/1.md

@@ -1,4 +1,5 @@
 ---
+locale: es
 title: 'La democracia se vistió de gala: el Congreso de Colombia honra al Dr. José Benjamín Pérez Matos'
 date: 2025-09-18
 slug: 2025-09-18-la-democracia-se-vistio-de-gala

src/content/news/es/2.md

@@ -1,4 +1,5 @@
 ---
+locale: es
 title: 'Un nuevo hijo para Jacareí: el homenaje al Dr. José Benjamín Pérez Matos'
 date: 2025-08-29
 slug: 2025-08-29-un-nuevo-hijo-para-jacarei

src/content/news/es/3.md

@@ -1,4 +1,5 @@
 ---
+locale: es
 title: 'Condecoración al Dr. José Benjamín Pérez Matos en el Congreso de Colombia'
 date: 2025-05-08
 slug: 2025-05-08-condecoracion-al-dr-jose-benjamin-perez-matos

src/content/news/es/4.md

@@ -1,4 +1,5 @@
 ---
+locale: es
 title: 'San Juan Chamula, corazón indígena, congrega a miles en jornada espiritual'
 date: 2024-10-04
 slug: 2024-10-04-san-juan-chamula-corazon-indigena

src/data/content/infosection.js

@@ -1,54 +0,0 @@
-export const infoboxes = [
-  {
-    title: 'Diplomacia Pública y\nproyección Internacional',
-    copy: 'Construcción consciente de vínculos éticos, culturales y estratégicos entre pueblos',
-    bgColor: '#CBA16A',
-    sizeTitle: 'text-2xl',
-    titleColor: 'text-[#1F5349]',
-    textColor: 'text-[#003421]',
-    sizeText: 'text-xl',
-    buttonLabel: 'Leer más',
-    hasButton: true,
-    url:'#projection',
-    hasIcon: true,
-    // iconColor: 'text-[#1F5349]',
-    hasInput: false
-  },
-  {
-    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: 'https://ik.imagekit.io/crpy/tr:o-20/dove.webp?updatedAt=1770966556158',
-    url:'#programs',
-    hasButton: true,
-    hasIcon: true,
-    // iconColor: 'text-[#CBA16A]',
-    hasInput: false
-  },
-  {
-    title: 'Quiero postularme\ncomo Voluntario',
-    copy: 'Sumarse es asumir un compromiso con propósito',
-    bgColor: '#EBE6D2',
-    sizeTitle: 'text-2xl',
-    titleColor: 'text-[#CBA16A]',
-    textColor: 'text-[#003421]',
-    sizeText: 'text-xl',
-    buttonLabel: 'Registrarse',
-    hasButton: false,
-    hasIcon: true,
-    // iconColor: 'text-[#CBA16A]',
-    hasInput: true
-  },
-]
-
-// bg
-// heading color
-// text color
-// hasButton = boolean
-// hasInput = boolean
-// bgImage

src/i18n/en.json

@@ -0,0 +1,200 @@
+{
+    "nav.logo_line1": "Kingdom of Peace",
+    "nav.logo_line2": "and Justice Center",
+    "nav.about": "About",
+    "nav.news": "News",
+    "nav.programs": "Programs",
+    "nav.contact": "Contact",
+    "hero.name": "Dr. José Benjamín Pérez Matos",
+    "hero.title": "Founding Leader",
+    "hero.body": "“My life’s dream is to see the prophets’ vision fulfilled: a world of justice and peace for the good of Israel and all mankind.”",
+
+    "info.title": "Building the world dreamed of by the prophets: justice and peace for Israel and all humanity",
+    "info.register": "Register",
+    "info.modal.title": "Form available soon",
+    "info.modal.text": "We are finalizing details to enable the volunteer form. You will be able to complete your registration from this section very soon.",
+    "carousel.text1": "Peace",
+    "carousel.text2": "Justice",
+    "info.boxes": [
+        {
+            "title": "Public Diplomacy and International Projection",
+            "copy": "Conscious construction of ethical, cultural, and strategic links between peoples",
+            "buttonLabel": "Read More",
+            "bgColor": "#CBA16A",
+            "sizeTitle": "text-2xl",
+            "titleColor": "text-[#1F5349]",
+            "textColor": "text-[#003421]",
+            "sizeText": "text-xl",
+            "hasButton": true,
+            "url":"#projection",
+            "hasIcon": true,
+            "hasInput": false
+        },
+        {
+            "title": "Programs and Areas of Action",
+            "copy": "Courses, seminars and training programs aimed at leaders, professionals and reference persons.",
+            "buttonLabel": "Read More",
+            "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": "I want to apply as a volunteer",
+            "copy": "Joining means making a commitment with purpose.",
+            "bgColor": "#EBE6D2",
+            "buttonLabel": "Register",
+            "sizeTitle": "text-2xl",
+            "titleColor": "text-[#CBA16A]",
+            "textColor": "text-[#003421]",
+            "sizeText": "text-xl",
+            "hasButton": false,
+            "hasIcon": true,
+            "hasInput": true
+        }
+    ],
+    "info.copy1": "The <b>Kingdom of Peace and Justice Center (KPJC)</b>is an international organization dedicated to leadership development, strategic dialogue, and public action, to advance justice and peace according to the eternal values proclaimed by the prophets, with an explicit and unwavering commitment to Israel and its central role in the history and destiny of the world.",
+    "info.copy_column1": "The (KPJC) develops educational initiatives, spaces for deep reflection and concrete actions in the public sphere, integrating spiritual principles, institutional responsibility, and ethical leadership. Its work is anchored in the field of <strong>public diplomacy</strong>, deemed a legitimate tool to shape the global conversation, strengthen ties between nations, and defend fundamental values against the challenges of the present and the future.",
+    "info.copy_column2": "Peace is not conceived as an abstract slogan nor a naive ideal, but as the result of resolute decisions, values-driven leadership, and a sustained commitment to clear goals, recognizing Israel’s irreplaceable role in building a just and stable order for all mankind.",
+    "info.endbox": {
+        "title": "Mission, Vision and Institutional Values.",
+        "buttonLabel": "READ MORE",
+        "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": "Justice"
+        },
+        {
+                "image": "https://ik.imagekit.io/crpy/amigos-bn.webp",
+                "text": "Peace"
+        }
+    ],
+
+    "identity.initTitle": "Institutional Identity",
+    "identity.title": "Kingdom of Peace and Justice Center",
+    "identity.body": "<p><b>The Kingdom of Peace and Justice Center</b> is an international organization made up of <b>thousands of volunteers throughout numerous countries</b>, who act in alignment under the leadership and guidance of <b>Dr. José Benjamín Pérez Matos</b>, the sole point of reference of the KPJC.</p><p>The KPJC has an active <strong>presence in different continents</strong>,bringing together individuals, leaders, communities, and institutions that share a common vision: to bring the values of the Kingdom into the public sphere and to meet the challenges that the world is currently facing with responsibility and conviction.</p><p>The KPJC was created with a clear mission: <b>to build bridges between faith and action in the public sphere</b>, integrating spiritual reflection, intellectual development, and actionable commitment, to pave the way for a new era marked by a more just order, true peace, and a better world, according to the prophetic vision.</p><p>Its vision is strategic, international, and forward-looking, mindful of emerging conflicts, cultural tensions, geopolitical challenges, and the need for steadfast leadership capable of acting with clarity in times of global transformation.</p>",
+
+    "authority.title": "<strong>Authority</strong> | Kingdom of Peace and Justice Center",
+    "authority.body": "<strong>Dr. José Benjamín Pérez Matos</strong> is the <strong>founder and sole leader of the Kingdom of Peace and Justice Center.</strong> His leadership combines spiritual vision, intellectual development, public action, and global reach.",
+
+    "title1.title": "Dr. José Benjamín Pérez Matos | Trajectory",
+
+    "grid.cards" : [
+        {
+        "type": "text",
+        "icon": "ph:arrow-circle-down-thin",
+        "text": "Administration Of La Gran Carpa Catedral. Puerto Rico",
+        "bgColor": "#EBE5D0",
+        "textColor": "#003421"
+    },
+    {
+        "type": "image",
+        "image": "https://ik.imagekit.io/crpy/grid_image_1.webp"
+    },
+    {
+        "type": "text",
+        "icon": "ph:arrow-circle-right-thin",
+        "text": "Active involment in international scenarios.",
+        "textColor": "#003421",
+        "bgColor": "#BEA48D"
+    },
+    {
+        "type": "image",
+        "image": "https://ik.imagekit.io/crpy/grid_image_2.webp"
+    },
+    {
+        "type": "image",
+        "image": "https://ik.imagekit.io/crpy/grid_image_3.webp"
+    },
+    {
+        "type": "text",
+        "icon": "ph:arrow-circle-up-thin",
+        "text": "Biblical teaching applied to the analysis of the contemporary world.",
+        "textColor": "#EBE5D0",
+        "bgColor": "#003421"
+    },
+    {
+        "type": "image",
+        "image": "https://ik.imagekit.io/crpy/grid_image_4.webp"
+    },
+    {
+        "type": "text",
+        "icon": "ph:arrow-circle-left-thin",
+        "text": "Public commitment in defense, justice and peace of Israel.",
+        "textColor": "#003421",
+        "bgColor": "#EBE5D0"
+    }
+    ],
+    
+    "color1.title": "Mission",
+    "color1.text": "To form leaders, promote educational initiatives, and encourage public actions in pursuit of justice and peace, based on a firm ethical and spiritual foundation, with an explicit commitment to Israel and a responsibility to contribute to the well-being and stability of mankind as a whole.",
+
+    "color2.title": "Vision",
+    "color2.text": "To position ourselves as an international benchmark in leadership development, public diplomacy, and institutional outreach, recognized for our consistency, clear values, and tangible contribution to building a world aligned with the prophetic vision of justice and peace.",
+
+    "title2.title": "Institutional Values",
+
+    "values.justice.title": "Justice",
+    "values.justice.text": "An active commitment to a just order grounded in moral principles, respect for human dignity, and the defense of enduring values.",
+    "values.integrity.title": "Integrity",
+    "values.integrity.text": "Alignment of thought, word, and deed; institutional transparency and accountability in the public sphere.",
+    "values.service.title": "Service with purpose",
+    "values.service.text": "A calling to accompany others and act in pursuit of clear and transcendent goals.",
+    "values.excellence.title": "Excellence",
+    "values.excellence.text": "Intellectual rigor, professionalism, and continuous improvement in all work areas.",
+    "values.dialogue.title": "Strategic dialogue",
+    "values.dialogue.text": "Openness to exchange across cultures, nations, and faiths, while upholding fundamental convictions and principles.",
+
+    "projection.title": "Public Diplomacy and International Projection",
+    "projection.text": "<p>The <strong>Kingdom of Peace and Justice Center</strong> pursues an active policy of public diplomacy, defined as the intentional building of ethical, cultural, and strategic bonds between peoples, institutions, and global leaders.</p><p><strong>Through meetings, international missions, forums, and institutional relations, the KPJC promotes:</strong></p><p><ul><li>Interreligious and intercultural dialogue based on steadfast values.</li><li>The advocacy of justice and peace in international settings.</li><li>Partnership with political, academic, and social leaders.</li><li>El <strong>Clear and unwavering support for the Jewish people and the State of Israel, recognizing its historical, spiritual, and geopolitical significance.</li></ul></p><p>This global reach positions the KPJC as a stakeholder in the global discourse on the future of the world, international stability, and the enduring relevance of prophetic values.</p>",
+    "projection.card1": "The connection with political, academic and social leaders.",
+    "projection.card2": "Clear and permanent support for the Jewish people and the State of Israel",
+
+    "formation.title": "Training and Development",
+    "formation.subtitle": "Programs and Areas of Action",
+    "formation.text": "The KPJC develops courses, seminars, and training programs for leaders, professionals, institutional management, and public stakeholders.",
+    "formation.area.title": "Training areas",
+    "formation.area.text": "<li>Ethical and strategic leadership.</li> <li>MMediation and responsible conflict resolution.</li> <li>Faith, values, and action in the public sphere.</li> <li>Analysis of global scenarios and contemporary challenges.</li> <li>Foundations for building a solid and lasting peace, with a focus on Israel.</li>",
+    "formation.consulting.title": "Advisory and Consulting",
+    "formation.consulting.text": "Strategic support for organizations and institutions seeking to design and implement impactful initiatives aligned with clear values, overarching objectives, and a long-term vision.",
+    "formation.action.title": "Action Projects",
+    "formation.action.text": "The advancement of tangible initiatives in different areas, focused on development, conflict prevention, and empowerment of local leadership with a global vision.",
+
+    "news.title": "News",
+    "news.text": "Institutional updates and global reach",
+    "news.text2": "This section brings together the main events, awards, and undertakings of the Kingdom of Peace and Justice Center and its founder.",
+
+    "participate.title": "Participate | Collaborate",
+    "participate.text": "Joining means making a commitment with purpose",
+    "participate.text2": "The work of KPJC is strengthened by the participation of individuals and institutions aligned with its values and overarching objectives:",
+    "participate.box1.title": "Volunteering:",
+    "participate.box1.text": "participation in educational, institutional, or international projects.",
+    "participate.box2.title": "Institutional outreach:",
+    "participate.box2.text": "amplify the KPJC’s mission and activities in the public sphere.",
+    "participate.text3": "Peace is built through responsible decisions, committed leadership, and sustained action.",
+    
+    "footer.title": "Contact",
+    "footer.subtitle": "Let’s connect with vision and purpose",
+    "footer.text": "The Kingdom of Peace and Justice Center has direct channels for institutional inquiries and participation in international programs and events.",
+    "footer.text2": "Email: <br> <strong>developer@centrodelreinodepazyjusticia.com</strong><br /> Social media: regular updates on events and announcements.",
+    "footer.form.name": "Name and Lastname",
+    "footer.form.mesagge": "Write a message",
+    "footer.form.button": "Enviar",
+    "footer.reserved": "©2026 All Rights Reserved. Kingdom of Peace and Justice Center"
+
+}

src/i18n/es.json

@@ -0,0 +1,207 @@
+{
+    "nav.logo_line1": "Centro del Reino",
+    "nav.logo_line2": "de Paz y Justicia",
+    "nav.about": "Somos",
+    "nav.news": "Noticias",
+    "nav.programs": "Programas",
+    "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.”",
+
+    "carousel.text1": "Paz",
+    "carousel.text2": "Justicia",
+
+    "info.title": "Construyendo el mundo soñado por los profetas: justicia y paz para Israel y toda la humanidad",
+    "info.register": "Registrarse",
+    "info.modal.title": "Formulario disponible próximamente",
+    "info.modal.text": "Estamos ultimando detalles para habilitar el formulario de voluntariado. Muy pronto podrás completar tu inscripción desde esta sección.",
+    "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.",
+
+    "title1.title": "Dr. José Benjamín Pérez Matos | Trayectoria",
+
+    "grid.cards" : [
+        {
+            "type": "text",
+            "icon": "ph:arrow-circle-down-thin",
+            "text": "Dirección de La Gran Carpa Catedral. Puerto Rico",
+            "bgColor": "#EBE5D0",
+            "textColor": "#003421"
+        },
+        {
+            "type": "image",
+            "image": "https://ik.imagekit.io/crpy/grid_image_1.webp"
+        },
+        {
+            "type": "text",
+            "icon": "ph:arrow-circle-right-thin",
+            "text": "Participación activa en escenarios internacionales.",
+            "textColor": "#003421",
+            "bgColor": "#BEA48D"
+        },
+        {
+            "type": "image",
+            "image": "https://ik.imagekit.io/crpy/grid_image_2.webp"
+        },
+        {
+            "type": "image",
+            "image": "https://ik.imagekit.io/crpy/grid_image_3.webp"
+        },
+        {
+            "type": "text",
+            "icon": "ph:arrow-circle-up-thin",
+            "text": "Enseñanza bíblica aplicada al análisis del mundo contemporáneo.",
+            "textColor": "#EBE5D0",
+            "bgColor": "#003421"
+        },
+        {
+            "type": "image",
+            "image": "https://ik.imagekit.io/crpy/grid_image_4.webp"
+        },
+        {
+            "type": "text",
+            "icon": "ph:arrow-circle-left-thin",
+            "text": "Compromiso público en la defensa de Israel, la justicia y la paz.",
+            "textColor": "#003421",
+            "bgColor": "#EBE5D0"
+        }
+    ],
+
+    "color1.title": "Misión",
+    "color1.text": "Formar líderes, impulsar iniciativas educativas y promover acciones públicas orientadas a la justicia y la paz, desde una base ética y espiritual firme, con un compromiso explícito con Israel y con la responsabilidad de contribuir al bienestar y la estabilidad de la humanidad en su conjunto.",
+
+    "color2.title": "Visión",
+    "color2.text": "Consolidarse como un actor internacional de referencia en formación de liderazgo, diplomacia pública y proyección institucional, reconocido por su coherencia, su claridad de valores y su contribución concreta a la construcción de un mundo alineado con la visión profética de justicia y paz.",
+
+    "title2.title": "Valores Institucionales",
+
+    "values.justice.title": "Justicia",
+    "values.justice.text": "Compromiso activo con un orden justo, basado en principios morales, respeto por la dignidad humana y defensa de valores permanentes.",
+
+    "values.integrity.title": "Integridad",
+    "values.integrity.text": "Coherencia entre pensamiento, palabra y acción; transparencia institucional y responsabilidad en el espacio público.",
+
+    "values.service.title": "Servicio",
+    "values.service.text": "Vocación de acompañamiento y acción orientada a objetivos claros y trascendentes.",
+
+    "values.excellence.title": "Excelencia",
+    "values.excellence.text": "Rigor intelectual, profesionalismo y mejora constante en todas las áreas de trabajo.",
+
+    "values.dialogue.title": "Diálogo Estratégico",
+    "values.dialogue.text": "Apertura al intercambio entre culturas, naciones y credos, sin renunciar a convicciones ni principios fundamentales.",
+
+    "projection.title": "Diplomacia Pública y Proyección Internacional",
+    "projection.text": "<p>El <strong>Centro del Reino de Paz y Justicia</strong> lleva adelante una activa política de diplomacia pública, entendida como la construcción consciente de vínculos éticos, culturales y estratégicos entre pueblos, instituciones y liderazgos globales.</p><p><strong>A través de encuentros, giras internacionales, foros y relaciones institucionales, el Centro del Reino de Paz y Justicia (CRPJ) impulsa:</strong></p><p><ul><li>El diálogo interreligioso e intercultural desde valores firmes.</li><li>La defensa de la justicia y la paz en escenarios internacionales.</li><li>La vinculación con líderes políticos, académicos y sociales.</li><li>El <strong>apoyo claro y permanente al pueblo judío y al Estado de Israel</strong>, reconociendo su centralidad histórica, espiritual y geopolítica.</li></ul></p><p>Esta proyección internacional posiciona al Centro del Reino de Paz y Justicia (CRPJ) como un <strong>actor relevante en el debate global sobre el futuro del mundo</strong>, la estabilidad internacional y la vigencia de los valores proféticos.</p>",
+    "projection.card1": "La vinculación con líderes políticos, académicos y sociales.",
+    "projection.card2": "Apoyo claro y permanente al pueblo judío y al Estado de Israel.",
+
+    "formation.title": "Formación y Capacitación",
+    "formation.subtitle": "Programas y Área de Acción",
+    "formation.text": "El <strong>Centro del Reino de Paz y Justicia (CRPJ) desarrolla cursos, seminarios y programas de formación</strong> dirigidos a líderes, profesionales, referentes institucionales y actores con responsabilidad pública.",
+    "formation.area.title": "Area de Formación",
+    "formation.area.text": "<li>Liderazgo ético y estratégico.</li> <li>Mediación y resolución responsable de conflictos.</li> <li>Fe, valores y acción en el espacio público.</li> <li>Análisis de escenarios internacionales y desafíos contemporáneos.</li> <li>Fundamentos para la construcción de una paz sólida y duradera, con eje en Israel.</li>",
+    "formation.consulting.title": "Asesoría y Consultoría",
+    "formation.consulting.text": "Acompañamiento estratégico a organizaciones e instituciones que buscan diseñar e implementar iniciativas de impacto, alineadas con valores claros, objetivos transversales y una visión de largo plazo.",
+    "formation.action.title": "Proyectos de Acción",
+    "formation.action.text": "Desarrollo de iniciativas concretas en distintos territorios, orientadas a la formación, la prevención de conflictos y el fortalecimiento de liderazgos locales con visión internacional.",
+
+    "news.title": "Noticias",
+    "news.text": "Actualidad institucional y proyección internacional",
+    "news.text2": "Esta sección reúne las principales actividades, reconocimientos y acciones del Centro del Reino de Paz y Justicia y de su fundador.",
+
+    "participate.title": "Participa | Colabora",
+    "participate.text": "Sumarse es asumir un compromiso con propósito",
+    "participate.text2": "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:",
+    "participate.box1.title": "Voluntariado:",
+    "participate.box1.text": "colaboración en proyectos formativos, institucionales o internacionales.",
+    "participate.box2.title": "Difusión institucional:",
+    "participate.box2.text": "amplificación de la misión y acciones del Centro del Reino de Paz y Justicia (CRPJ) en espacios públicos.",
+    "participate.text3": "La paz se construye mediante decisiones responsables, liderazgo comprometido y acción sostenida.",
+
+    "footer.title": "Contacto",
+    "footer.subtitle": "Conectemos con visión y propósito ",
+    "footer.text": "El <strong>Centro del Reino de Paz y Justicia</strong> dispone de canales directos para consultas institucionales, participación en programas y actividades internacionales. ",
+    "footer.text2": "Correo electrónico:<br> <strong>developer@centrodelreinodepazyjusticia.com</strong><br /> Redes sociales: actualizaciones permanentes sobre actividades y convocatorias.",
+    "footer.form.name": "Nombre y Apellido",
+    "footer.form.mesagge": "Escriba su mensaje",
+    "footer.form.button": "Enviar",
+    "footer.reserved": "©2026. Todos los Derechos Reservados. Centro del Reino de Paz y Justicia"
+
+
+}

src/i18n/fr.json

@@ -0,0 +1,8 @@
+{
+    "nav.logo_line1": "Centro del Reino",
+    "nav.logo_line2": "de Paz y Justicia",
+    "nav.about": "À propos",
+    "nav.news": "Nouvelles",
+    "nav.programs": "Programmes",
+    "nav.contact": "Contactez"
+}

src/i18n/he.json

@@ -0,0 +1,8 @@
+{
+    "nav.logo_line1": "Centro del Reino",
+    "nav.logo_line2": "de Paz y Justicia",
+    "nav.about": "À propos",
+    "nav.news": "Nouvelles",
+    "nav.programs": "Programmes",
+    "nav.contact": "Contactez"
+}

src/i18n/index.ts

@@ -0,0 +1,39 @@
+import es from "./es.json";
+import en from "./en.json";
+import fr from "./fr.json";
+import he from "./he.json";
+import uk from "./uk.json";
+import pt from "./pt.json";
+
+const dictionaries = { es, en, fr, he, uk, pt } as const;
+export type Locale = keyof typeof dictionaries;
+
+// Optional: type-safe keys from the default dictionary
+export type I18nKey = keyof typeof es;
+
+export function t(
+  locale: string | undefined,
+  key: I18nKey,
+  vars?: Record<string, string | number>
+) {
+  const l = (locale in dictionaries ? locale : "es") as Locale;
+
+  // fallback chain: requested locale -> default locale -> key itself
+  const template =
+    dictionaries[l][key] ??
+    dictionaries.es[key] ??
+    String(key);
+
+  if (!vars) return template;
+
+  // simple interpolation: "Hello {name}"
+  return template.replace(/\{(\w+)\}/g, (_, name) =>
+    vars[name] === undefined ? `{${name}}` : String(vars[name])
+  );
+}
+
+export function createTranslator(locale: string | undefined) {
+  return function tl(key: I18nKey, vars?: Record<string, string | number>) {
+    return t(locale, key, vars);
+  };
+}

src/i18n/pt.json

@@ -0,0 +1,8 @@
+{
+    "nav.logo_line1": "Centro del Reino",
+    "nav.logo_line2": "de Paz y Justicia",
+    "nav.about": "Somos",
+    "nav.news": "Noticias",
+    "nav.programs": "Programas",
+    "nav.contact": "Contacto"
+}

src/i18n/uk.json

@@ -0,0 +1,8 @@
+{
+    "nav.logo_line1": "Centro del Reino",
+    "nav.logo_line2": "de Paz y Justicia",
+    "nav.about": "Somos",
+    "nav.news": "Noticias",
+    "nav.programs": "Programas",
+    "nav.contact": "Contacto"
+}

src/layouts/MainLayout.astro

@@ -1,8 +1,13 @@
 ---
-import Header from "../components/Header.astro";
 import BaseHead from "../components/BaseHead.astro";
 import Footer from "../components/Footer.astro";
 import "../styles/global.css";
+import '@fontsource/poppins/100.css';
+import '@fontsource/poppins/400.css';
+import '@fontsource/poppins/500.css';
+import '@fontsource/poppins/700.css';
+import '@fontsource-variable/kameron';
+
 const { title } = Astro.props;
 ---
 

src/pages/[locale]/index.astro

@@ -0,0 +1,96 @@
+---
+import "../../styles/global.css";
+
+import MainLayout from "../../layouts/MainLayout.astro";
+import HeroHome from "../../components/HeroHome.astro";
+import NewsSection from "../../components/section/NewsSection.astro";
+import ParticipateSection from "../../components/section/ParticipateSection.astro";
+import CarouselSection from "../../components/section/CarouselSection.astro";
+import InfoSection from "../../components/section/InfoSection.astro";
+import IdentitySection from "../../components/section/IdentitySection.astro";
+import AuthoritySection from "../../components/section/AuthoritySection.astro";
+import ProjectionSection from "../../components/section/ProjectionSection.astro";
+
+import ColorSection from "../../components/section/ColorSection.astro";
+import TitleSection from "../../components/section/TitleSection.astro";
+import GridSection from "../../components/section/GridSection.astro";
+import ColumnsSection from "../../components/section/ColumnsSection.astro";
+import FormationSection from "../../components/section/FormationSection.astro";
+import FooterSection from "../../components/section/FooterSection.astro";
+
+const { locale } = Astro.params;
+
+import { createTranslator } from '../../i18n';
+const tl = createTranslator(Astro.currentLocale);
+
+const carouselImages2 = [
+  {
+    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: tl("carousel.text1"),
+  },
+  {
+    image: "https://ik.imagekit.io/crpy/amigos-bn.webp",
+    text: tl("carousel.text2"),
+  },
+];
+
+const carouselImages3 = [
+  {
+    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: tl("carousel.text1"),
+  },
+  {
+    image: "https://ik.imagekit.io/crpy/amigos-bn.webp",
+    text: tl("carousel.text2"),
+  },
+];
+---
+
+<MainLayout>
+  
+  <HeroHome />
+
+  <InfoSection bgColor="bg-white" title="Construyendo el mundo soñado por los profetas: justicia y paz para Israel y toda la humanidad" />
+
+  <CarouselSection class="object-cover" images={carouselImages3} />
+
+  <IdentitySection bgColor="bg-white" colorText="text-[#003421]" initTitle="Identidad Institucional" title="El Centro del Reino de Paz y Justicia" />
+
+  <AuthoritySection bgColor="bg-[#003421]" titleColor="text-colorSecondary" descColor="text-[#EBE6D2]" />
+
+  <TitleSection title={tl("title1.title")} />
+
+  <GridSection />
+
+  <ColorSection
+    id="mision"
+    bgColor="#22523F"
+    titleColor="text-[#ffffff]"
+    textColor="text-[#CBA16A] font-bold"
+    title={tl("color1.title")}
+    text={tl("color1.text")} />
+
+  <ColorSection
+    bgColor="#CBA16A"
+    titleColor="text-[#ffffff]"
+    textColor="text-[#ffffff] font-bold"
+    title={tl("color2.title")}
+    text={tl("color2.text")} />
+
+  <TitleSection title={tl("title2.title")} />
+
+  <ColumnsSection />
+
+  <ProjectionSection title={tl("projection.title")} />
+
+  <FormationSection />
+
+  <CarouselSection images={carouselImages2} />
+
+  <NewsSection />
+
+  <ParticipateSection />
+
+  <FooterSection />
+
+</MainLayout>

src/pages/[locale]/news/[id].astro

@@ -0,0 +1,54 @@
+---
+import { YouTube } from 'astro-embed';
+import MainLayout from "../../../layouts/MainLayout.astro";
+import Header from "../../../components/Header.astro";
+import CarouselSection from "../../../components/section/CarouselSection.astro";
+import { Image } from "@unpic/astro";
+import { getCollection, render } from "astro:content";
+import TitleSection from "../../../components/section/TitleSection.astro";
+import FooterSection from '../../../components/section/FooterSection.astro';
+export const prerender = true;
+// 1. Generate a new path for every collection entry
+export async function getStaticPaths() {
+  const posts = await getCollection("news");
+  return posts.map((post) => ({
+    params: { id: post.id, locale: post.data.locale },
+    props: { post },
+  }));
+}
+// 2. For your template, you can get the entry directly from the prop
+const { post } = Astro.props;
+const { Content } = await render(post);
+---
+
+<MainLayout>
+  <div class="container mx-auto py-16">
+    <Header />
+  </div>
+
+  <TitleSection title={post.data.title} />
+
+  <div class="container mx-auto">
+    {post.data.gallery && <CarouselSection images={post.data.gallery} />}
+    <div class="grid md:grid-cols-10">
+        <div class="md:col-span-7 bg-white p-8 md:p-20 prose-p:mb-4 text-[#003421]">
+          <Content />
+        </div>
+      <div class="md:col-span-3 bg-tertiary md:sticky top-0 h-fit">
+        { post.data.youtube && (
+          <YouTube id={post.data.youtube} />
+
+        )}
+
+        {post.data.gallery && (
+          post.data.gallery.map(galleryImage => (
+            <Image src={galleryImage.image} alt={galleryImage.text} />
+          ))
+        )}
+
+	    </div>
+    </div>
+  </div>
+</MainLayout>
+
+<FooterSection />

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 = [
-  {
-    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",
-  },
-];
+import { createTranslator } from '../i18n';
+const tl = createTranslator(Astro.currentLocale);
 
 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" />
 
@@ -76,11 +67,11 @@ const carouselImages3 = [
 
   <ColumnsSection />
 
-  <ProjectionSection title="Diplomacia Pública y Proyección Internacional" />
+  <ProjectionSection />
 
   <FormationSection />
 
-  <CarouselSection images={carouselImages2} />
+  <CarouselSection images={tl("carousel1.images")} />
 
   <NewsSection />
 

src/styles/global.css

@@ -4,7 +4,7 @@
 
 @theme {
     --font-primary: "Poppins", sans-serif;
-    --font-secondary: "Rockwell", sans-serif;
+    --font-secondary: "Kameron Variable", sans-serif;
 
     --color-colorPrimary: #EBE6D2;
     --color-colorSecondary: #CBA16A;