feat: add Google Analytics integration and standardize organization branding

- Integrate Google Analytics using astro-google-analytics package
- Add `text-[#003421]` color classes to improve text visibility across components
- Refactor Swiper carousel initialization to use modules pattern with Navigation, Pagination, and Scrollbar
- Add background styling to modal form labels for better UX
- Standardize organization name from "CPyJ" to full "Centro del Reino de Paz y Justicia (CRPJ)" across all content sections

package-lock.json

@@ -13,6 +13,7 @@
         "@unpic/astro": "^1.0.2",
         "astro": "^5.17.1",
         "astro-embed": "^0.12.0",
+        "astro-google-analytics": "^1.0.3",
         "astro-icon": "^1.1.5",
         "dayjs": "^1.11.19",
         "swiper": "^12.1.0",
@@ -2608,6 +2609,12 @@
         "astro": "^5.0.0 || ^6.0.0-alpha"
       }
     },
+    "node_modules/astro-google-analytics": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/astro-google-analytics/-/astro-google-analytics-1.0.3.tgz",
+      "integrity": "sha512-5bD7jA15yxVaUFVVEFG6KKMphYJ4AKP4+HSqCVBpTBnqh8LL0giTdAHpG9KJs3JaFbGQUTWP5Pqt8+twz7f55Q==",
+      "license": "ISC"
+    },
     "node_modules/astro-icon": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/astro-icon/-/astro-icon-1.1.5.tgz",

package.json

@@ -15,6 +15,7 @@
     "@unpic/astro": "^1.0.2",
     "astro": "^5.17.1",
     "astro-embed": "^0.12.0",
+    "astro-google-analytics": "^1.0.3",
     "astro-icon": "^1.1.5",
     "dayjs": "^1.11.19",
     "swiper": "^12.1.0",

src/components/BaseHead.astro

@@ -1,4 +1,5 @@
 ---
+import { GoogleAnalytics } from 'astro-google-analytics';
 const { title = "Centro del Reino de Paz y Justicia", description = "" } =
   Astro.props;
 ---
@@ -9,6 +10,7 @@ const { title = "Centro del Reino de Paz y Justicia", description = "" } =
   <link rel="icon" href="/favicon.ico" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta name="generator" content={Astro.generator} />
+   <GoogleAnalytics id="G-26KM3HWW9J" />
   <title>{title}</title>
   <meta name="description" content={description} />
 </head>

src/components/Modal.astro

@@ -16,37 +16,37 @@ const { id, title } = Astro.props;
 
         <form id="voluteenFrom" class="flex flex-col gap-2 place-items-center" action="">
 
-            <label class="input rounded-none">
+            <label class="input rounded-none bg-white">
                 <span>Nombres <span class="text-error">*</span></span>
                 <input id="name" 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">
+            <label class="input rounded-none bg-white">
                 <span>Apellidos <span class="text-error">*</span></span>
                 <input id="lastname" 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">
+            <label class="input rounded-none bg-white">
                 <span>País</span>
                 <input id="country" type="text" placeholder="Pais" class="w-full max-w-xs rounded-none" />
             </label>
 
-            <label class="input rounded-none">
+            <label class="input rounded-none bg-white">
                 <span>Lugar</span>
                 <input id="place" type="text" placeholder="Lugar" class="w-full max-w-xs rounded-none" />
             </label>
 
-            <label class="input rounded-none">
+            <label class="input rounded-none bg-white">
                 <span>Dirección</span>
                 <input id="address" type="text" placeholder="Dirección" class="w-full max-w-xs rounded-none" />
             </label>
 
-            <label class="input rounded-none">
+            <label class="input rounded-none bg-white">
                 <span>Teléfono <span class="text-error">*</span></span>
                 <input id="phone" 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">
+            <label class="input validator rounded-none bg-white">
                 <span>Email <span class="text-error">*</span></span>
                 <input id="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>

src/components/cards/NewsCard.astro

@@ -7,7 +7,7 @@ const { data } = Astro.props;
 const nicedate = dayjs(data.data.date).format("D MMMM YYYY");
 ---
 
-<div class="bg-[#EBE5D0] p-10">
+<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">
     {data.data.city}, {data.data.country}<br />({nicedate}):

src/components/section/CarouselSection.astro

@@ -36,24 +36,23 @@ const { images } = Astro.props;
 
 <script>
   import Swiper from "swiper";
-  const swiper = new Swiper(".swiper", {
+  import { Navigation, Pagination, Scrollbar } from 'swiper/modules';
-    // Optional parameters
+  
+const swiper = new Swiper('.swiper', {
+  modules: [Navigation, Pagination, Scrollbar],
   loop: true,
 
-    // If we need pagination
-    pagination: {
-      el: ".swiper-pagination",
-    },
-
-    // Navigation arrows
   navigation: {
-      nextEl: ".swiper-button-next",
+    nextEl: '.swiper-button-next',
-      prevEl: ".swiper-button-prev",
+    prevEl: '.swiper-button-prev',
   },
 
-    // And if we need scrollbar
+  pagination: {
-    scrollbar: {
+    el: '.swiper-pagination',
-      el: ".swiper-scrollbar",
   },
-  });
+
+  scrollbar: {
+    el: '.swiper-scrollbar',
+  },
+});
 </script>

src/components/section/FormationSection.astro

@@ -5,11 +5,11 @@ import { Icon } from "astro-icon/components";
     <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]">El <strong>CPyJ desarrolla cursos, seminarios y programas de formación</strong> dirigidos a líderes, profesionales, referentes institucionales y actores con responsabilidad pública.</p>
+        <p class="text-lg w-2/3 mx-auto mb-20 text-[#003421]">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>
 
-        <div class="grid xl:grid-cols-3 gap-20">
+        <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" />
+                <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>
 
                 <p class="text-lg">
@@ -23,12 +23,12 @@ import { Icon } from "astro-icon/components";
                 </p>
 
                 <div class="bottom-12 right-12 absolute">
-                    <Icon name="icon_formation_1"  class="text-8xl" />
+                    <Icon name="icon_formation_1"  class="text-8xl text-[#003421]" />
                 </div>
             </div>
 
-            <div class="bg-[#EBE5D0] p-12 relative pb-40">
+            <div class="bg-[#EBE5D0] text-[#003421] p-12 relative pb-40">
-                <Icon name="ph:arrow-circle-down-thin" class="text-6xl mb-12" />
+                <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>
 
                 <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>
@@ -38,8 +38,8 @@ import { Icon } from "astro-icon/components";
                 </div>
             </div>
 
-            <div class="bg-[#EBE5D0] p-12 relative pb-40">
+            <div class="bg-[#EBE5D0] text-[#003421] p-12 relative pb-40">
-                <Icon name="ph:arrow-circle-down-thin" class="text-6xl mb-12" />
+                <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>
 
                 <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 lide- razgos locales con visión internacional.</p>

src/components/section/IdentitySection.astro

@@ -6,14 +6,14 @@ const { title, text, initTitle, colorText, bgColor } = Astro.props;
 
     <div class={`grid grid-cols-1 md:grid-cols-3 ${bgColor}`}>
         <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 CPyJ" class="w-1/4 my-8 md:w-1/2" />
+            <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" />
         </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"><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 CPyJ.</p>
+            <p class="text-lg font-primary leading-relaxed"><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">El Centro cuenta con presencia activa en distintos continentes, 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">El CPyJ 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">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">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>

src/components/section/InfoSection.astro

@@ -17,10 +17,10 @@ const { bgColor, titleColor, textColor, title, text } = Astro.props;
             <div class="grid gap-8">
                 <h2 class="font-secondary text-2xl lg:text-5xl font-bold">{title}</h2>
                 <Icon name="ph:minus" class="text-tertiary text-4xl" />
-                <p class="text-lg">El <b>Centro del Reino de Paz y Justicia (CPyJ)</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">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>
             </div>
             <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 text-lg leading-relaxed">
-                <p>El CPyJ 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>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>
             </div>
         </div>
@@ -38,7 +38,7 @@ const { bgColor, titleColor, textColor, title, text } = Astro.props;
             }} />
         </div>
         <div class="col-span-1 py-38 lg:px-24 bg-[#21523F]">
-            <img src="/img/logo-ligth.webp" alt="Logo del CPyJ" class="w-1/3 lg:w-100 mx-auto">
+            <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">
         </div>
     </div>
 </div>

src/components/section/ParticipateSection.astro

@@ -20,7 +20,7 @@
 
         <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 CPyJ en espacios públicos.</p>
+            <p>amplificación de la misión y acciones del Centro del Reino de Paz y Justicia (CRPJ) en espacios públicos.</p>
         </div>
     </div>
     <div class="flex justify-center">

src/components/section/ProjectionSection.astro

@@ -15,14 +15,14 @@ const { bgColor, titleColor, textColor, title, text } = Astro.props;
                 <h2 class="font-secondary text-3xl lg:text-5xl font-bold">{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 CPyJ impulsa:</strong></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 CPyJ 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>
+                <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>
             <div class="grid xl:grid-cols-2 gap-16 mt-12">
                 <GridCard props={{
@@ -49,7 +49,7 @@ const { bgColor, titleColor, textColor, title, text } = Astro.props;
                     bgColor: '#CBA16A',
                 }} />
                 <div class="absolute -bottom-[8rem] z-10 w-full">
-                    <img src="/img/logo-ligth.webp" class="w-1/2 mx-auto" alt="Logo del CPyJ">
+                    <img src="/img/logo-ligth.webp" class="w-1/2 mx-auto" alt="Logo del Centro del Reino de Paz y Justicia (CRPJ)">
                 </div>
             </div>
             <div class="hidden lg:flex bg-[#22523F] object-cover pt-64 justify-end ">

src/pages/news/[id].astro

@@ -30,7 +30,7 @@ const { Content } = await render(post);
   <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">
+      <div class="md:col-span-7 bg-white p-8 md:p-20 prose-p:mb-4 text-black">
         <Content />
       </div>
       <div class="md:col-span-3 bg-tertiary">