Fixing es translation usage

Adding font weights to poppins.

src/components/section/ProjectionSection.astro

@@ -1,31 +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";
 
-import { createTranslator } from '../../i18n';
+import { createTranslator, t } from '../../i18n';
 const tl = createTranslator(Astro.currentLocale);
-
-const { bgColor, titleColor, textColor, title, text } = Astro.props;
 ---
 
 <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="row-span-2 lg:col-span-2 p-12 lg:p-24">
-            <div class="flex flex-col gap-5 md:text-lg text-justify">
+            <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">{title}</h2>
+                <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 set:html={tl("projection.text1")} class="text-lg"></p>
+                <div class="prose" set:html={tl('projection.text')}></div>
-                <p set:html={tl("projection.text2")}></p>
-                <ul class="list-disc list-inside text-lg">
-                    <li set:html={tl("projection.list1")}></li>
-                    <li set:html={tl("projection.list2")}></li>
-                    <li set:html={tl("projection.list3")}></li>
-                    <li set:html={tl("projection.list4")}></li>
-                </ul>
-                <p set:html={tl("projection.text3")}></p>
             </div>
             <div class="grid xl:grid-cols-2 gap-16 mt-12">
                 <GridCard props={{

src/i18n/es.json

@@ -136,6 +136,7 @@
             "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.",
 
@@ -146,23 +147,20 @@
 
     "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.text1":"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.",
+    "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.text2": "<strong>A través de encuentros, giras internacionales, foros y relaciones institucionales, el Centro del Reino de Paz y Justicia (CRPJ) impulsa:</strong>",
-    "projection.list1": "El diálogo interreligioso e intercultural desde valores firmes.",
-    "projection.list2": "La defensa de la justicia y la paz en escenarios internacionales.",
-    "projection.list3": "La vinculación con líderes políticos, académicos y sociales.",
-    "projection.list4": "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.",
-    "projection.text3": "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."
-
 
 }

src/layouts/MainLayout.astro

@@ -2,7 +2,10 @@
 import BaseHead from "../components/BaseHead.astro";
 import Footer from "../components/Footer.astro";
 import "../styles/global.css";
-import '@fontsource/poppins';
+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/index.astro

@@ -67,7 +67,7 @@ const carouselImages3 = [
 
   <ColumnsSection />
 
-  <ProjectionSection title="Diplomacia Pública y Proyección Internacional" />
+  <ProjectionSection />
 
   <FormationSection />