fix: correcciones en locales (pr, rw, es), nombre país y estilos UI

- Añadida fecha 2026-05-20 para locales pr y rw
- Imágenes corregidas para noticias en locale es
- Nombre país ajustado: Salvador → El Salvador
- Eliminada altura fija del carrusel
- Posición de fecha corregida dentro del texto

package.json

@@ -23,6 +23,7 @@
     "@iconify/vue": "^5.0.0",
     "@prisma/client": "^6.19.2",
     "@tailwindcss/vite": "^4.1.18",
+    "@tinacms/cli": "^2.2.2",
     "@unpic/astro": "^1.0.2",
     "astro": "^5.17.1",
     "astro-embed": "^0.12.0",
@@ -33,11 +34,11 @@
     "prisma": "^6.19.2",
     "react": "^19.2.5",
     "react-dom": "^19.2.5",
+    "sharp": "^0.34.5",
     "swiper": "^12.1.0",
     "tailwindcss": "^4.1.18",
-    "vue": "^3.5.28",
+    "tinacms": "^2.2.2",
-    "@tinacms/cli": "^2.2.2",
+    "vue": "^3.5.28"
-    "tinacms": "^2.2.2"
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.19",

pnpm-lock.yaml

@@ -83,6 +83,9 @@ importers:
       react-dom:
         specifier: ^19.2.5
         version: 19.2.6(react@19.2.6)
+      sharp:
+        specifier: ^0.34.5
+        version: 0.34.5
       swiper:
         specifier: ^12.1.0
         version: 12.1.4
@@ -8689,8 +8692,7 @@ snapshots:
     dependencies:
       react: 19.2.6
 
-  '@img/colour@1.1.0':
+  '@img/colour@1.1.0': {}
-    optional: true
 
   '@img/sharp-darwin-arm64@0.34.5':
     optionalDependencies:
@@ -15108,7 +15110,6 @@ snapshots:
       '@img/sharp-win32-arm64': 0.34.5
       '@img/sharp-win32-ia32': 0.34.5
       '@img/sharp-win32-x64': 0.34.5
-    optional: true
 
   shebang-command@2.0.0:
     dependencies:

src/components/Header.astro

@@ -10,53 +10,64 @@ const allNews = await getCollection("news");
 const tl = createTranslator(Astro.currentLocale);
 const currentLocale = Astro.currentLocale;
 const currentPath = Astro.url.pathname;
+const { locale } = Astro.params;
+
+const languages = [
+    { code: "es", icon: "icon_flag_es", label: "Español" },
+    { code: "en", icon: "icon_flag_uk", label: "English" },
+    { code: "he", icon: "flagpack--il", label: "עברית" },
+    { code: "pt", icon: "flagpack--br", label: "Português" },
+    { code: "fr", icon: "flagpack--fr", label: "Français" },
+    { code: "ru", icon: "flagpack--ru", label: "Русский" },
+    { code: "rw", icon: "flagpack--rw", label: "Kinyarwanda" },
+    { code: "kr", icon: null, label: "Kreole" },
+];
+
+const navItems = [
+    { href: "#somos", key: "nav.about" },
+    { href: "#programs", key: "nav.programs" },
+    { href: "#news", key: "nav.news" },
+];
+
+const sidebarNavItems = [
+    { href: `/`, key: "nav.home" },
+    { href: "#somos", key: "nav.about" },
+    { href: "#programs", key: "nav.programs" },
+    { href: "#news", key: "nav.news" },
+];
 
 function translatePath(newLocale: string) {
     const segments = currentPath.split("/").filter(Boolean);
-
     if (segments.length === 0) return `/${newLocale}`;
-
     const remainingSegments = segments.slice(1);
     const newsRouteNames = Object.values(routeTranslations.news);
-
     const translatedSegments = remainingSegments.map((segment) => {
         for (const key in routeTranslations) {
             const translations =
                 routeTranslations[key as keyof typeof routeTranslations];
             if (Object.values(translations).includes(segment)) {
-        return translations[newLocale as keyof typeof translations] || segment;
+                return (
+                    translations[newLocale as keyof typeof translations] ||
+                    segment
+                );
             }
         }
         return segment;
     });
-
-  // Lógica para noticias
     if (segments.length >= 2 && newsRouteNames.includes(segments[1])) {
-    const isDetail = segments.length >= 3;
+        if (segments.length >= 3) {
-
-    if (isDetail) {
             const currentId = segments[segments.length - 1];
             const baseId = currentId.split("/").pop();
-
             const exists = allNews.some(
-        (post) => post.id.endsWith(baseId!) && post.data.locale === newLocale
+                (post) =>
+                    post.id.endsWith(baseId!) && post.data.locale === newLocale,
             );
-
+            if (!exists) return `/${newLocale}/${translatedSegments[0]}`;
-      if (!exists) {
+            return `/${newLocale}/${translatedSegments[0]}/${newLocale}/${baseId}`;
-        // Redirigir al home de noticias si no existe la traducción
-        return `/${newLocale}/${translatedSegments[0]}`;
-      }
-
-      // Reconstruir ID con el nuevo locale
-      const newId = `${newLocale}/${baseId}`;
-      return `/${newLocale}/${translatedSegments[0]}/${newId}`;
         }
     }
-
     return `/${[newLocale, ...translatedSegments].join("/")}`;
 }
-
-const { locale } = Astro.params;
 ---
 
 <div>
@@ -66,38 +77,35 @@ const { locale } = Astro.params;
                 class="font-secondary text-colorPrimary font-bold leading-none py-2 text-2xl md:text-lg"
             >
                 <a href={`/${currentLocale}`}
-          >{tl("nav.logo_line1")}<br />{tl("nav.logo_line2")}
+                    >{tl("nav.logo_line1")}<br />{tl("nav.logo_line2")}</a
-        </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">
+                {
+                    navItems.map((item) => (
                         <a
                             class="hover:text-colorPrimary transition"
-          href={`/${currentLocale}#somos`}
+                            href={`/${currentLocale}${item.href}`}
-          >{tl("nav.about")}
+                        >
-        </a>
+                            {tl(item.key)}
-        <a
-          class="hover:text-colorPrimary transition"
-          href={`/${currentLocale}#programs`}
-          >{tl("nav.programs")}
-        </a>
-        <a
-          class="hover:text-colorPrimary transition"
-          href={`/${currentLocale}#news`}
-          >{tl("nav.news")}
                         </a>
+                    ))
+                }
                 <!-- <a class="hover:text-colorPrimary transition" href={`/${currentLocale}/archive`}>{tl("nav.archive")}</a>
         <a class="hover:text-colorPrimary transition" href={`/${currentLocale}/nations`}>{tl("nav.nations")}</a> -->
             </div>
             <div class="drawer lg:hidden">
                 <input id="my-drawer-1" type="checkbox" class="drawer-toggle" />
                 <div class="drawer-content">
-          <!-- Page content here -->
+                    <label for="my-drawer-1" class="btn-ghost drawer-button">
-          <label for="my-drawer-1" class="btn-ghost drawer-button"
+                        <Icon
-            ><Icon name="ph:list" class="text-white text-4xl font-bold" />
+                            name="ph:list"
+                            class="text-white text-4xl font-bold"
+                        />
                     </label>
                 </div>
                 <div class="drawer-side">
@@ -108,8 +116,9 @@ const { locale } = Astro.params;
                     <ul
                         class="menu min-h-full w-80 p-4 bg-[url(/img/opacity-logo.png)] bg-no-repeat bg-contain bg-center bg-[#22523F] text-white"
                     >
-            <!-- Sidebar content here -->
+                        <div
-            <div class="flex gap-2 justify-center items-center mb-8 mt-8">
+                            class="flex gap-2 justify-center items-center mb-8 mt-8"
+                        >
                             <img
                                 class="w-1/3 object-contain"
                                 src="/img/logo-metalico.webp"
@@ -119,27 +128,27 @@ const { locale } = Astro.params;
                                 class="font-secondary text-colorPrimary font-bold leading-none py-2 text-lg"
                             >
                                 <a href="/"
-                  >{tl("nav.logo_line1")}<br />{tl("nav.logo_line2")}
+                                    >{tl("nav.logo_line1")}<br />{
-                </a>
+                                        tl("nav.logo_line2")
+                                    }</a
+                                >
                             </p>
                         </div>
-
+                        <ul
-            <ul class="font-primary font-bold flex flex-col gap-1 text-lg p-0">
+                            class="font-primary font-bold flex flex-col gap-1 text-lg p-0"
+                        >
+                            {
+                                sidebarNavItems.map((item) => (
                                     <li>
-                <a class="hover:text-colorPrimary transition" href="#somos"
+                                        <a
-                  >{tl("nav.about")}
+                                            class="hover:text-colorPrimary transition"
-                </a>
+                                            href={`/${currentLocale}${item.href}`}
-              </li>
+                                        >
-              <li>
+                                            {tl(item.key)}
-                <a class="hover:text-colorPrimary transition" href="#programs"
-                  >{tl("nav.programs")}
-                </a>
-              </li>
-              <li>
-                <a class="hover:text-colorPrimary transition" href="#news"
-                  >{tl("nav.news")}
                                         </a>
                                     </li>
+                                ))
+                            }
                         </ul>
                         <div class="w-50">
                             <Button
@@ -161,42 +170,18 @@ const { locale } = Astro.params;
                                 tabindex="-1"
                                 class="dropdown-content text-tertiary text-lg bg-colorPrimary menu z-1 w-52 p-2 shadow-sm"
                             >
+                                {
+                                    languages.map((lang) => (
                                         <li>
-                  <a href={translatePath("es")}
+                                            <a href={translatePath(lang.code)}>
-                    ><Icon name="icon_flag_es" /> Español</a
+                                                {lang.icon && (
-                  >
+                                                    <Icon name={lang.icon} />
+                                                )}{" "}
+                                                {lang.label}
+                                            </a>
                                         </li>
-                <li>
+                                    ))
-                  <a href={translatePath("en")}
+                                }
-                    ><Icon name="icon_flag_uk" /> English</a
-                  >
-                </li>
-                <li>
-                  <a href={translatePath("he")}
-                    ><Icon name="flagpack--il" /> עברית</a
-                  >
-                </li>
-                <li>
-                  <a href={translatePath("pt")}
-                    ><Icon name="flagpack--br" /> Português</a
-                  >
-                </li>
-                <li>
-                  <a href={translatePath("fr")}
-                    ><Icon name="flagpack--fr" /> Français</a
-                  >
-                </li>
-                <li>
-                  <a href={translatePath("ru")}
-                    ><Icon name="flagpack--ru" /> Русский</a
-                  >
-                </li>
-                <li>
-                  <a href={translatePath("rw")}
-                    ><Icon name="flagpack--rw" /> Kinyarwanda</a
-                  >
-                </li>
-                <li><a href={translatePath("kr")}>Kreole</a></li>
                             </ul>
                         </div>
                     </ul>
@@ -211,47 +196,27 @@ const { locale } = Astro.params;
                 />
             </div>
             <div class="dropdown dropdown-end lg:block hidden">
-        <div tabindex="0" role="button" class="btn-ghost m-1 cursor-pointer">
+                <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"
                 >
+                    {
+                        languages.map((lang) => (
                             <li>
-            <a href={translatePath("es")}
+                                <a href={translatePath(lang.code)}>
-              ><Icon name="icon_flag_es" /> Español</a
+                                    {lang.icon && <Icon name={lang.icon} />}{" "}
-            >
+                                    {lang.label}
+                                </a>
                             </li>
-          <li>
+                        ))
-            <a href={translatePath("en")}
+                    }
-              ><Icon name="icon_flag_uk" /> English</a
-            >
-          </li>
-          <li>
-            <a href={translatePath("he")}><Icon name="flagpack--il" /> עברית</a>
-          </li>
-          <li>
-            <a href={translatePath("pt")}
-              ><Icon name="flagpack--br" /> Português</a
-            >
-          </li>
-          <li>
-            <a href={translatePath("fr")}
-              ><Icon name="flagpack--fr" /> Français</a
-            >
-          </li>
-          <li>
-            <a href={translatePath("ru")}
-              ><Icon name="flagpack--ru" /> Русский</a
-            >
-          </li>
-          <li>
-            <a href={translatePath("rw")}
-              ><Icon name="flagpack--rw" /> Kinyarwanda</a
-            >
-          </li>
-          <li><a href={translatePath("kr")}>Kreole</a></li>
                 </ul>
             </div>
         </nav>

src/components/cards/GridCard.astro

@@ -29,7 +29,7 @@ const imageUrl = props.image || ''
 { props.type === 'imgText' && (
     <div class={`flex flex-col justify-between h-full bg-[${props.bgColor}]`}>
         <div class="grid grid-cols-1 gap-0 p-8 font-bold">
-            <div class="px-12 py-10">
+            <div class="md:px-10 md:py-10">
                 <Icon name={props.icon} class="text-3xl" />
                 <p class={`font-primary text-xl text-[${textColor}]`}>{props.text}</p>
             </div>

src/components/cards/NewsCard.astro

@@ -10,9 +10,10 @@ import "dayjs/locale/ru";
 import "dayjs/locale/rw";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
-import { getLocalizedRoute } from "../../i18n";
+import { getLocalizedRoute, createTranslator } from "../../i18n";
 
 const locale = Astro.currentLocale || "es";
+const tl = createTranslator(locale);
 const regionNames = new Intl.DisplayNames([locale], { type: 'region' });
 dayjs.extend(utc);
 dayjs.locale(locale);
@@ -27,17 +28,27 @@ locationArray.filter(Boolean).join(', ');
 
 <div class="bg-[#EBE5D0] text-[#003421] p-10">
   <Icon name="ph:arrow-circle-down-thin" class="text-8xl mb-8" />
-  <p class="font-light text-2xl mb-8">
+  <p class="font-light md:text-2xl text-lg md:mb-8 mb-3">
     {locationArray.filter(Boolean).join(', ')}<br />
     ({nicedate}):
   </p>
-  <h3 class="text-2xl font-bold mb-8"><a href={`/${locale}/${getLocalizedRoute('news', locale)}/${data.id}`}>{data.data.title}</a></h3>
+  <h3 class="md:text-2xl text-lg mb-4 font-bold md:mb-8 hover:underline"><a href={`/${locale}/${getLocalizedRoute('news', locale)}/${data.id}`}>{data.data.title}</a></h3>
 
-  <div>
+  <div class="overflow-hidden">
+      <a href={`/${locale}/${getLocalizedRoute('news', locale)}/${data.id}`}>
     <Image
       src={data.data.thumbnail}
       alt={data.data.title}
-      class="aspect-square object-cover"
+      class="aspect-square object-cover transition-transform duration-300 hover:scale-110"
         />
+    </a>
   </div>
+
+  <div class="mt-8">
+      <a href={`/${locale}/${getLocalizedRoute('news', locale)}/${data.id}`} class="inline-flex items-center gap-2 px-6 py-3 bg-white text-[#22523F] hover:bg-[#22523F] hover:text-[#EBE6D2] hover:underline font-bold transition text-sm rounded-none uppercase">
+          {tl("news.fullnew")}
+          <Icon name="ph:arrow-right" class="transform group-hover:translate-x-1 transition-transform" />
+      </a>
+  </div>
+
 </div>

src/components/cards/NewsList.astro

@@ -21,99 +21,46 @@ dayjs.locale(locale);
 
 const { data, content } = Astro.props;
 const nicedate = dayjs.utc(data.data.date).format("D MMMM YYYY");
-const countryName = data?.data?.country
+const countryName = data?.data?.country ? regionNames.of(data.data.country) : "";
-    ? regionNames.of(data.data.country)
-    : "";
 
-const locationArray = [data.data.city, data.data.state, countryName];
+const location = [data.data.city, data.data.state, countryName].filter(Boolean).join(", ");
-const location = locationArray.filter(Boolean).join(", ");
 
 const newsUrl = `/${locale}/${getLocalizedRoute("news", locale)}/${data.id}`;
 
 const rawContent = content?.body || "";
-const plainText = rawContent
+const plainText = rawContent.replace(/^#.*$/gm, "").replace(/^###.*$/gm, "").replace(/\*\*([^*]+)\*\*/g, "$1").replace(/\*([^*]+)\*/g, "$1").replace(/_([^_]+)_/g, "$1").replace(/\[([^\]]+)\]\([^)]+\)/g, "$1").replace(/^>.*$/gm, "").replace(/`[^`]+`/g, "").replace(/^[-*]\s+/gm, "").trim();
-    .replace(/^#.*$/gm, "")
+const words = plainText.split(/\s+/).filter((w) => w.length > 0).slice(0, 40);
-    .replace(/^###.*$/gm, "")
-    .replace(/\*\*([^*]+)\*\*/g, "$1")
-    .replace(/\*([^*]+)\*/g, "$1")
-    .replace(/_([^_]+)_/g, "$1")
-    .replace(/\[([^\]]+)\]\([^)]+\)/g, "$1")
-    .replace(/^>.*$/gm, "")
-    .replace(/`[^`]+`/g, "")
-    .replace(/^[-*]\s+/gm, "")
-    .trim();
-const words = plainText
-    .split(/\s+/)
-    .filter((w) => w.length > 0)
-    .slice(0, 40);
 const excerpt = words.join(" ") + (words.length === 40 ? "..." : "");
 ---
 
 <a href={newsUrl} class="block group">
-    <article
+    <article class="flex flex-col md:flex-row gap-6 md:gap-8 p-4 md:p-6 border-b border-tertiary/20 hover:bg-tertiary/5 transition-colors">
-        class="flex flex-col md:flex-row gap-6 md:gap-8 p-4 md:p-6 border-b border-tertiary/20 hover:bg-tertiary/5 transition-colors"
+        <div class="md:w-1/3 flex-shrink-0 overflow-hidden justify-center items-center flex">
-    >
+            <Image src={data.data.thumbnail_square || data.data.thumbnail} alt={data.data.title} width={480} class="w-full h-auto object-contain transform group-hover:scale-105 transition-transform duration-300" />
-        <div
-            class="md:w-1/3 flex-shrink-0 overflow-hidden justify-center items-center flex"
-        >
-            <Image
-                src={data.data.thumbnail_square || data.data.thumbnail}
-                alt={data.data.title}
-                width={480}
-                class="w-full h-auto object-contain transform group-hover:scale-105 transition-transform duration-300"
-            />
         </div>
 
         <div class="md:w-2/3 flex flex-col">
             <div class="flex items-center gap-2 mb-2">
-                <span class="font-normal font-primary text-sm text-tertiary/70"
+                <span class="font-normal font-primary text-sm text-tertiary/70">{nicedate}</span>
-                    >{nicedate}
+                {location && <><span class="text-tertiary/40">|</span><span class="font-normal font-primary text-sm text-tertiary/70">{location}</span></>}
-                </span>
-                {
-                    location && (
-                        <>
-                            <span class="text-tertiary/40">|</span>
-                            <span class="font-normal font-primary text-sm text-tertiary/70">
-                                {location}
-                            </span>
-                        </>
-                    )
-                }
             </div>
 
-            <h3
+            <h3 class="text-xl md:text-2xl font-bold font-secondary text-tertiary group-hover:text-tertiary/80 transition-colors mb-2">{data.data.title}</h3>
-                class="text-xl md:text-2xl font-bold font-secondary text-tertiary group-hover:text-tertiary/80 transition-colors mb-2"
-            >
-                {data.data.title}
-            </h3>
 
-            <p
+            <p class="font-primary text-base text-tertiary/80 mb-4 line-clamp-3">{excerpt}</p>
-                class="font-primary text-base text-tertiary/80 mb-4 line-clamp-3"
-            >
-                {excerpt}
-            </p>
 
-            {
+            {data.data.tags && data.data.tags.length > 0 && (
-                data.data.tags && data.data.tags.length > 0 && (
                 <div class="flex flex-nowrap md:flex-wrap gap-2 overflow-x-auto md:overflow-visible pb-2 md:pb-0 mb-4">
                     {data.data.tags.map((tag: string) => (
-                            <span class="badge rounded-none bg-[#EBE6D2] border-none text-[#003421] whitespace-nowrap">
+                        <span class="badge rounded-none bg-[#EBE6D2] border-none text-[#003421] whitespace-nowrap">{tag}</span>
-                                {tag}
-                            </span>
                     ))}
                 </div>
-                )
+            )}
-            }
 
             <div class="mt-auto">
-                <span
+                <span class="inline-flex items-center gap-1 text-sm font-primary text-tertiary font-semibold group-hover:underline">
-                    class="inline-flex items-center gap-1 text-sm font-primary text-tertiary font-semibold group-hover:underline"
-                >
                     {tl("news.seemore")}
-                    <Icon
+                    <Icon name="ph:arrow-right" class="transform group-hover:translate-x-1 transition-transform" />
-                        name="ph:arrow-right"
-                        class="transform group-hover:translate-x-1 transition-transform"
-                    />
                 </span>
             </div>
         </div>

src/components/section/CarouselSection.astro

@@ -1,15 +1,14 @@
 ---
-import { Image } from "astro:assets";
 import "swiper/css";
 import "swiper/css/navigation";
 import "swiper/css/pagination";
 import { Icon } from "astro-icon/components";
 
 const isHebrew = Astro.currentLocale === "he";
-const { images, class: className } = Astro.props;
+const { images, class: className, imgClass } = Astro.props;
 ---
 
-<div class="bg-white">
+<div class={`bg-white ${className || ''}`}>
   <div class="mx-auto">
     <div class="swiper">
       <div class="swiper-wrapper">
@@ -23,7 +22,7 @@ const { images, class: className } = Astro.props;
                   </div>
                 )}
                 <img
-                  class="w-full"
+                  class={`w-full ${imgClass || ''}`}
                   src={image.image}
                   alt={image.text}
                 />

src/components/section/InfoSection.astro

@@ -27,7 +27,7 @@ const tl = createTranslator(Astro.currentLocale);
         <div class="col-span-1 h-full bg-[#CBA16A]">
             <BoxContainer props={tl("info.endbox")} />
         </div>
-        <div class="col-span-1 py-38 lg:px-24 bg-[#21523F]">
+        <div class="col-span-1 py-10 lg:px-24 bg-[#21523F]">
             <img src="/img/logo-new-white.png" alt="Logo del Centro del Reino de Paz y Justicia (CRPJ)" class="w-1/3 lg:w-100 mx-auto">
         </div>
     </div>

src/components/section/TitleSection.astro

@@ -5,7 +5,7 @@ const { title } = Astro.props;
 ---
 <div class="md:py-16 p-4 bg-white">
     <div class="container mx-auto">
-        <div class="flex justify-between px-4">
+        <div class="flex justify-between px-4 align-center items-center">
             <h2 id="article-title" class="text-tertiary font-secondary text-xl sm:text-2xl md:text-3xl lg:text-5xl font-bold">{title}</h2>
             <img class="md:w-20 md:h-20 w-10 h-10" src="/img/lion.svg" alt="Leon">
         </div>

src/content/news/es/2026-04-26.md

@@ -6,7 +6,7 @@ slug: 2026-04-26-dr-jose-benjamin-perez-matos-destaca-el-liderazgo-de-nayib-buke
 country: SV
 city: San Salvador
 place: Palacio de los Deportes
-thumbnail: 'https://ik.imagekit.io/crpy/tr:w-1280/2026_04_26_1_JBP_la_ultima_visitacion_o_manifestacion_del_espiritu.webp'
+thumbnail: 'https://ik.imagekit.io/crpy/tr:cm-extract,x-0,y-1800,fo--30/2026_04_26_1_JBP_la_ultima_visitacion_o_manifestacion_del_espiritu.jpg'
 tags: [Colombia, El Salvador]
 gallery: [
     {

src/i18n/en.json

@@ -1,6 +1,7 @@
 {
   "nav.logo_line1": "Kingdom of Peace",
   "nav.logo_line2": "and Justice Center",
+  "nav.home": "Home",
   "nav.about": "About",
   "nav.news": "News",
   "nav.archive": "Archive",
@@ -170,6 +171,7 @@
   "news.text3": "This page brings together the main events, awards, and undertakings of the Kingdom of Peace and Justice Center and its founder.",
   "news.buttonLable": "See More News",
   "news.seemore": "See More",
+  "news.fullnew": "Read Complete Article",
   "news.all": "All",
   "news.allYears": "All years",
   "participate.title": "Participate | Collaborate",

src/i18n/es.json

@@ -1,6 +1,7 @@
 {
   "nav.logo_line1": "Centro del Reino",
   "nav.logo_line2": "de Paz y Justicia",
+  "nav.home": "Inicio",
   "nav.about": "Somos",
   "nav.news": "Noticias",
   "nav.programs": "Programas",
@@ -170,6 +171,7 @@
   "news.text3": "Esta página reúne las principales actividades, reconocimientos y acciones del Centro del Reino de Paz y Justicia y de su fundador.",
   "news.buttonLable": "Ver Más Noticias",
   "news.seemore": "Ver Más",
+  "news.fullnew": "Leer Noticia Completa",
   "news.all": "Todas",
   "news.allYears": "Todos los años",
   "participate.title": "Participa | Colabora",

src/i18n/fr.json

@@ -1,6 +1,7 @@
 {
   "nav.logo_line1": "Le Centre du Royaume",
   "nav.logo_line2": "de Paix et de Justice",
+  "nav.home": "Accueil",
   "nav.about": "Qui sommes-nous",
   "nav.news": "Informations",
   "nav.programs": "Programmes",
@@ -168,8 +169,9 @@
   "news.text": "Actualité institutionnelle et projection internationale",
   "news.text2": "Cette section réunit les principales activités, prix et actions du Centre du Royaume de Paix et de Justice et de son fondateur.",
   "news.text3": "Esta página reúne las principales actividades, reconocimientos y acciones del Centro del Reino de Paz y Justicia y de su fundador.",
-    "news.buttonLable": "Voir Plus D’InformATIONS",
+  "news.buttonLable": "Voir Plus D'Informations",
-    "news.seemore": "Voir Plus D’InformATIONS",
+  "news.seemore": "Voir Plus D'Informations",
+  "news.fullnew": "Lire l'Article Complète",
   "news.all": "Todas",
   "news.allYears": "Todos los años",
   "participate.title": "Participez | Collaborez",

src/i18n/he.json

@@ -2,6 +2,7 @@
   "nav.logo_line1": "מרכז הממלכה ",
   "nav.logo_line2": "לשלום ולצדק",
   "nav.about": "מי אנחנו",
+  "nav.home": "דף הבית",
   "nav.news": "חדשות",
   "nav.programs": "תוכניות",
   "nav.contact": "צור קשר",

src/i18n/pt.json

@@ -1,6 +1,7 @@
 {
   "nav.logo_line1": "Centro do Reino",
   "nav.logo_line2": "de Paz e Justiça",
+  "nav.home": "home",
   "nav.about": "Sobre nós",
   "nav.news": "Notícias",
   "nav.programs": "Programas",
@@ -170,6 +171,7 @@
   "news.text3": "Esta página reúne las principales actividades, reconocimientos y acciones del Centro del Reino de Paz y Justicia y de su fundador.",
   "news.buttonLable": "Ver Mais notícias",
   "news.seemore": "Ver Mais",
+  "news.fullnew": "Ler o Artigo Completo",
   "news.all": "Todos",
   "news.allYears": "Todos os anos",
   "participate.title": "Participe | Colabore",

src/i18n/ru.json

@@ -1,6 +1,7 @@
 {
   "nav.logo_line1": "Центр Царства за ",
   "nav.logo_line2": "мир и справедливость",
+  "nav.home": "Главная",
   "nav.about": "О нас",
   "nav.news": "Новости",
   "nav.programs": "Программы",

src/i18n/rw.json

@@ -1,6 +1,7 @@
 {
   "nav.logo_line1": "Centro del Reino",
   "nav.logo_line2": "de Paz y Justicia",
+  "nav.home": "Home",
   "nav.about": "Abo turi bo",
   "nav.news": "Amakuru",
   "nav.programs": "Porogaramu",
@@ -170,6 +171,7 @@
   "news.text3": "Esta página reúne las principales actividades, reconocimientos y acciones del Centro del Reino de Paz y Justicia y de su fundador.",
   "news.buttonLable": "Reba andi makuru",
   "news.seemore": "Reba byinshi",
+  "news.fullnew": "Read Complete Article",
   "news.all": "byose",
   "news.allYears": "Amaezi yose",
   "participate.title": "Uruhare rwawe | Imikoranire",

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

@@ -90,12 +90,12 @@ const dateISO = `${y}-${m}-${d}`;
     <Header />
   </div>
 
-  <a href={`/${locale}/${news_slug}/${post.id}`} class="block">
+  <a class="block">
     <TitleSection title={post.data.title} />
   </a>
 
   <div class="container mx-auto">
-    <a href={`/${locale}/${news_slug}/${post.id}`} class="block">
+    <a class="block">
       {
         post.data.gallery?.length ? (
           <CarouselSection images={post.data.gallery} />

src/pages/[locale]/[news_slug]/index.astro

@@ -52,7 +52,7 @@ const allYears = [...new Set(
     <div class="container mx-auto mt-4">
         <div class="flex flex-col lg:w-1/2 items-center mx-auto py-8">
             <h1 class="text-white text-2xl uppercase font-bold text-center mb-4 font-primary md:mt-20 mt-10">{tl("news.title")}</h1>
-        <h2 class="text-white text-3xl lg:text-5xl font-bold text-center font-secondary mb-4">{tl("news.text")}</h2>
+        <h2 class="text-white text-3xl lg:text-5xl font-bold text-center font-secondary mb-4 md:p-0 px-2">{tl("news.text")}</h2>
     </div>
 
 

src/pages/[locale]/index.astro

@@ -52,7 +52,9 @@ const carouselImages3 = [
 
   <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} />
+  <div class="carousel-full md:h-[110vh] h-[30vh]">
+    <CarouselSection class="h-full" images={carouselImages3} imgClass="object-cover w-full h-full" />
+  </div>
 
   <IdentitySection bgColor="bg-white" colorText="text-[#003421]" initTitle="Identidad Institucional" title="El Centro del Reino de Paz y Justicia" />
 
@@ -85,7 +87,9 @@ const carouselImages3 = [
 
   <FormationSection />
 
-  <CarouselSection images={carouselImages2} />
+  <div class="carousel-full md:h-[110vh] h-[30vh]">
+    <CarouselSection class="h-full" images={carouselImages2} imgClass="object-cover w-full h-full" />
+  </div>
 
   <NewsSection />
 
@@ -94,3 +98,13 @@ const carouselImages3 = [
   <FooterSection />
 
 </MainLayout>
+
+<style>
+  .carousel-full :global(.mx-auto),
+  .carousel-full :global(.swiper),
+  .carousel-full :global(.swiper-wrapper),
+  .carousel-full :global(.swiper-slide),
+  .carousel-full :global(.swiper-slide > div) {
+    height: 100%;
+  }
+</style>

src/pages/index.astro

@@ -18,33 +18,49 @@ 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: "Justicia",
+    text: tl("carousel.text1"),
   },
   {
     image: "https://ik.imagekit.io/crpy/amigos-bn.webp",
-    text: "Paz",
+    text: tl("carousel.text2"),
   },
 ];
 ---
 
 <MainLayout>
+
   <HeroHome />
 
-  <InfoSection />
+  <InfoSection bgColor="bg-white" title="Construyendo el mundo soñado por los profetas: justicia y paz para Israel y toda la humanidad" />
 
-  <CarouselSection images={tl("carousel1.images")} />
+  <div class="carousel-full md:h-[110vh] h-[30vh]">
+    <CarouselSection class="h-full" images={carouselImages3} imgClass="object-cover w-full h-full" />
+  </div>
 
-  <IdentitySection />
+  <IdentitySection bgColor="bg-white" colorText="text-[#003421]" initTitle="Identidad Institucional" title="El Centro del Reino de Paz y Justicia" />
 
-  <AuthoritySection />
+  <AuthoritySection bgColor="bg-[#003421]" titleColor="text-colorSecondary" descColor="text-[#EBE6D2]" />
 
-  <TitleSection title="Dr. José Benjamín Pérez Matos | Trayectoria" />
+  <TitleSection title={tl("title1.title")} />
 
   <GridSection />
 
@@ -53,25 +69,27 @@ const carouselImages3 = [
     bgColor="#22523F"
     titleColor="text-[#ffffff]"
     textColor="text-[#CBA16A] font-bold"
-    title="Misión"
+    title={tl("color1.title")}
-    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." />
+    text={tl("color1.text")} />
 
   <ColorSection
     bgColor="#CBA16A"
     titleColor="text-[#ffffff]"
     textColor="text-[#ffffff] font-bold"
-    title="Visión"
+    title={tl("color2.title")}
-    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." />
+    text={tl("color2.text")} />
 
-  <TitleSection title="Valores Intitucionales" />
+  <TitleSection title={tl("title2.title")} />
 
   <ColumnsSection />
 
-  <ProjectionSection />
+  <ProjectionSection title={tl("projection.title")} />
 
   <FormationSection />
 
-  <CarouselSection images={tl("carousel1.images")} />
+  <div class="carousel-full md:h-[110vh] h-[30vh]">
+    <CarouselSection class="h-full" images={carouselImages2} imgClass="object-cover w-full h-full" />
+  </div>
 
   <NewsSection />
 
@@ -80,3 +98,13 @@ const carouselImages3 = [
   <FooterSection />
 
 </MainLayout>
+
+<style>
+  .carousel-full :global(.mx-auto),
+  .carousel-full :global(.swiper),
+  .carousel-full :global(.swiper-wrapper),
+  .carousel-full :global(.swiper-slide),
+  .carousel-full :global(.swiper-slide > div) {
+    height: 100%;
+  }
+</style>