Added initial json files for translations - Adding example nav translations - Modified header to use translations.

src/components/Header.astro

@@ -1,22 +1,25 @@
 ---
 import Button from "./ui/Button.astro";
 import { Icon } from "astro-icon/components";
+
+import { createTranslator } from "../i18n/index.ts";
+const tl = createTranslator(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="/">{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="#somos">{tl("nav.about")}</a>
-        <a class="hover:text-colorPrimary transition" href="#programs">Programas</a>
+        <a class="hover:text-colorPrimary transition" href="#programs">{tl("nav.programs")}</a>
-        <a class="hover:text-colorPrimary transition" href="#news">Noticias</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 +34,24 @@ 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="#somos">{tl("nav.about")}</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="#programs">{tl("nav.programs")}</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="#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>
           </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-8 py-2 uppercase" title={tl("nav.contact")} url="#contact" variant="primary" />
       </div>
     </nav>
   </div>

src/i18n/en.json

@@ -0,0 +1,8 @@
+{
+    "nav.logo_line1": "Centro del Reino",
+    "nav.logo_line2": "de Paz y Justicia",
+    "nav.about": "About",
+    "nav.news": "News",
+    "nav.programs": "Programs",
+    "nav.contact": "Contact"
+}

src/i18n/es.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/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.it[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/pages/[locale]/index.astro

@@ -0,0 +1,94 @@
+---
+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 { 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";
+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;
+
+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",
+  },
+];
+
+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: "Justicia",
+  },
+  {
+    image: "https://ik.imagekit.io/crpy/amigos-bn.webp",
+    text: "Paz",
+  },
+];
+---
+
+<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} />
+
+  <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="Dr. José Benjamín Pérez Matos | Trayectoria" />
+
+  <GridSection />
+
+  <ColorSection
+    id="mision"
+    bgColor="#22523F"
+    titleColor="text-[#ffffff]"
+    textColor="text-[#CBA16A] font-bold"
+    title="Misión"
+    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." />
+
+  <ColorSection
+    bgColor="#CBA16A"
+    titleColor="text-[#ffffff]"
+    textColor="text-[#ffffff] font-bold"
+    title="Visión"
+    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." />
+
+  <TitleSection title="Valores Intitucionales" />
+
+  <ColumnsSection />
+
+  <ProjectionSection title="Diplomacia Pública y Proyección Internacional" />
+
+  <FormationSection />
+
+  <CarouselSection images={carouselImages2} />
+
+  <NewsSection />
+
+  <ParticipateSection />
+
+  <FooterSection />
+
+</MainLayout>