From 43833fee364bcb3f3153fd6f9157a61aa4d2e6f5 Mon Sep 17 00:00:00 2001
From: Emanuel Palestino <75344407+Emanuel-Palestino@users.noreply.github.com>
Date: Thu, 24 Oct 2024 00:52:03 +0200
Subject: [PATCH] I18n (#14)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* i18n iniciado

* Botón para cambiar de idioma modificado

* Footer traducido al inglés

* Página de inicio traducida al inglés

* Página de nosotros traducida al inglés

* Traducción de la pagina nosotros terminada

* Página de servicios traducida al inglés

* Pequeños cambios

* Página de tecnología traducida al inglés

* intento de traducir página 404
---
 astro.config.mjs                         |  11 ++
 package.json                             |   3 +-
 src/components/Footer.astro              |  31 ++--
 src/components/Header.astro              |  79 +++++++---
 src/components/Nosotros.astro            |  66 ++++++++
 src/components/Servicios.astro           | 121 +++++++++++++++
 src/components/Tecnologia.astro          | 120 ++++++++++++++
 src/components/inicio/Banner.astro       |   6 +-
 src/components/inicio/Media.astro        |   8 +-
 src/components/inicio/Objetives.astro    |  21 +--
 src/components/inicio/Sections.astro     |  21 +--
 src/components/inicio/Testimonials.astro |  34 ++--
 src/i18n/ui.ts                           | 189 +++++++++++++++++++++++
 src/i18n/utils.ts                        |  12 ++
 src/layouts/Layout.astro                 |   7 +-
 src/pages/404.astro                      |  11 +-
 src/pages/en/index.astro                 |  18 +++
 src/pages/en/nosotros.astro              |  10 ++
 src/pages/en/servicios.astro             |   9 ++
 src/pages/en/tecnologia.astro            |   8 +
 src/pages/nosotros.astro                 |  76 +--------
 src/pages/servicios.astro                | 133 +---------------
 src/pages/tecnologia.astro               | 141 +----------------
 23 files changed, 709 insertions(+), 426 deletions(-)
 create mode 100644 src/components/Nosotros.astro
 create mode 100644 src/components/Servicios.astro
 create mode 100644 src/components/Tecnologia.astro
 create mode 100644 src/i18n/ui.ts
 create mode 100644 src/i18n/utils.ts
 create mode 100644 src/pages/en/index.astro
 create mode 100644 src/pages/en/nosotros.astro
 create mode 100644 src/pages/en/servicios.astro
 create mode 100644 src/pages/en/tecnologia.astro

diff --git a/astro.config.mjs b/astro.config.mjs
index 41e7dd6..988e217 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -6,4 +6,15 @@ import tailwind from "@astrojs/tailwind";
 export default defineConfig({
   integrations: [tailwind()],
   site: 'https://lacamara.mx',
+  i18n: {
+    defaultLocale: 'es',
+    locales: ['es', 'en'],
+    fallback: {
+      en: 'es',
+    },
+    routing: {
+      prefixDefaultLocale: false,
+      fallbackType: 'rewrite',
+    }
+  }
 });
\ No newline at end of file
diff --git a/package.json b/package.json
index e080e24..618f8a9 100644
--- a/package.json
+++ b/package.json
@@ -17,5 +17,6 @@
     "lite-youtube-embed": "^0.3.3",
     "tailwindcss": "^3.4.13",
     "typescript": "^5.6.2"
-  }
+  },
+  "packageManager": "pnpm@9.8.0+sha512.8e4c3550fb500e808dbc30bb0ce4dd1eb614e30b1c55245f211591ec2cdf9c611cabd34e1364b42f564bd54b3945ed0f49d61d1bbf2ec9bd74b866fcdc723276"
 }
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index d5ff39c..af07139 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -4,6 +4,10 @@ import FacebookIcon from "../icons/FacebookIcon.astro";
 import XIcon from "../icons/XIcon.astro";
 import { Image } from "astro:assets";
 import logoImage from "../images/logo_pch_blanco.png";
+import { getLangFromUrl, useTranslations } from "../i18n/utils";
+
+const lang = getLangFromUrl(Astro.currentLocale as string);
+const t = useTranslations(lang);
 ---
 
 <footer class="bg-footer py-3 text-white">
@@ -16,7 +20,7 @@ import logoImage from "../images/logo_pch_blanco.png";
                 width="42"
                 height="42"
             />
-            <p>Cámara de la Gente</p>
+            <p>{t('footer.company')}</p>
         </picture>
 
         <!-- Sección principal del footer -->
@@ -24,39 +28,38 @@ import logoImage from "../images/logo_pch_blanco.png";
             class="flex flex-col md:flex-row gap-8 border-t border-gray-200 pt-8 px-4"
         >
             <nav class="hidden md:block basis-1/3">
-                <p class="text-lg font-semibold mb-2">Inicio</p>
-                <p class="text-lg font-semibold mb-2">Nosotros</p>
-                <p class="text-lg font-semibold mb-2">Servicios</p>
-                <p class="text-lg font-semibold mb-2">Tecnología</p>
-                <p class="text-lg font-semibold mb-2">Eventos</p>
+                <p class="text-lg font-semibold mb-2">{t('nav.home')}</p>
+                <p class="text-lg font-semibold mb-2">{t('nav.about')}</p>
+                <p class="text-lg font-semibold mb-2">{t('nav.services')}</p>
+                <p class="text-lg font-semibold mb-2">{t('nav.technology')}</p>
+                <p class="text-lg font-semibold mb-2">{t('nav.events')}</p>
             </nav>
 
             <div>
                 <h2 class="text-lg font-semibold mb-4 center">
-                    INFORMACIÓN DE CONTACTO
+                    {t('footer.contactInfo')}
                 </h2>
                 <p class="mb-4">
-                    Xochicalco 55, Benito Juárez, CDMX, 03020, MÉXICO
+                    {t('footer.address')}
                 </p>
             </div>
 
             <div>
                 <h2 class="text-lg font-semibold mb-4 center">
-                    MANTENTE INFORMADO
+                    {t('footer.stayInTouch')}
                 </h2>
                 <p class="mb-4">
-                    Indica tu email para recibir actualizaciones de La Cámara de
-                    la Gente
+                    {t('footer.stayInTouchText')}
                 </p>
                 <form class="flex flex-col gap-4">
                     <input
                         type="email"
-                        placeholder="Ingresa tu email"
+                        placeholder={t('footer.email')}
                         class="p-3 rounded bg-gray-100 text-gray-900"
                     />
                     <button
                         class="bg-blue p-3 rounded bg-primary text-white hover:bg-secondary"
-                        >Suscribirse</button
+                        >{t('footer.subscribe')}</button
                     >
                 </form>
             </div>
@@ -66,7 +69,7 @@ import logoImage from "../images/logo_pch_blanco.png";
             class="flex flex-col-reverse md:flex-row gap-2 justify-between items-center border-t border-gray-200 mt-6 pt-3 px-2"
         >
             <p class="text-gray-300 text-sm">
-                &copy; 2024 Cámara de la Gente. Todos los derechos reservados.
+                &copy; {t('footer.copy')}
             </p>
             <div class="flex space-x-6 items-center">
                 <a
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 0ba028e..e83e7ab 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -2,6 +2,11 @@
 import EarthIcon from "../icons/EarthIcon.astro";
 import { Image } from "astro:assets";
 import logoImage from "../images/logo_pch_blanco.png";
+import { getLangFromUrl, useTranslations } from "../i18n/utils";
+import { getRelativeLocaleUrl } from "astro:i18n";
+
+const lang = getLangFromUrl(Astro.currentLocale as string);
+const t = useTranslations(lang);
 ---
 
 <header
@@ -19,10 +24,14 @@ import logoImage from "../images/logo_pch_blanco.png";
 				height="52"
 				loading="eager"
 			/>
-			<p class="block md:hidden lg:block">Cámara de la Gente</p>
+			<p class="block md:hidden lg:block">{t("header.company")}</p>
 		</picture>
 
-		<button id="header_burger" class="flex flex-col gap-[6px] md:hidden" aria-label="menú desplegable">
+		<button
+			id="header_burger"
+			class="flex flex-col gap-[6px] md:hidden"
+			aria-label="menú desplegable"
+		>
 			<span class="w-[30px] h-[3px] rounded-full bg-white block"></span>
 			<span class="w-[30px] h-[3px] rounded-full bg-white block"></span>
 			<span class="w-[30px] h-[3px] rounded-full bg-white block"></span>
@@ -32,39 +41,57 @@ import logoImage from "../images/logo_pch_blanco.png";
 			class="flex items-center gap-8 pt-20 flex-col absolute top-0 bottom-0 left-[110vw] w-screen h-screen bg-primary py-6 md:py-0 md:bg-inherit md:w-auto md:h-auto md:static md:flex-row md:pt-0"
 		>
 			<nav>
-				<ul
-					class="flex flex-col gap-2 items-center md:flex-row lg:gap-4"
-				>
+				<ul class="flex flex-col gap-2 items-center md:flex-row lg:gap-4">
 					<li>
-						<a href="/" class="relative block px-2 py-1">Inicio</a>
+						<a
+							href={getRelativeLocaleUrl(lang)}
+							class="relative block px-2 py-1">{t("nav.home")}</a
+						>
 					</li>
 					<li>
-						<a href="/nosotros" class="relative block px-2 py-1"
-							>Nosotros</a
+						<a
+							href={getRelativeLocaleUrl(lang, "nosotros")}
+							class="relative block px-2 py-1">{t("nav.about")}</a
 						>
 					</li>
 					<li>
-						<a href="/servicios" class="relative block px-2 py-1"
-							>Servicios</a
+						<a
+							href={getRelativeLocaleUrl(lang, "servicios")}
+							class="relative block px-2 py-1">{t("nav.services")}</a
 						>
 					</li>
 					<li>
-						<a href="/tecnologia" class="relative block px-2 py-1"
-							>Tecnología</a
+						<a
+							href={getRelativeLocaleUrl(lang, "tecnologia")}
+							class="relative block px-2 py-1">{t("nav.technology")}</a
 						>
 					</li>
 					<li>
-						<a href="/eventos" class="relative block px-2 py-1"
-							>Eventos</a
+						<a
+							href={getRelativeLocaleUrl(lang, "eventos")}
+							class="relative block px-2 py-1">{t("nav.events")}</a
 						>
 					</li>
 				</ul>
 			</nav>
 
-			<button role="button" class="flex gap-1 items-center">
-				<EarthIcon width="1.2rem" height="1.2rem" />
-				<p class="pt-[1px]">ES</p>
-			</button>
+			<label for="lang" class="relative">
+				<span class="block absolute text-white mt-[5px] left-1">
+					<EarthIcon width="1rem" height="1rem" />
+				</span>
+				<select
+					name="lang"
+					id="lang"
+					class="py-1 px-6 pr-4 cursor-pointer bg-transparent"
+				>
+					<option value="es" class="text-black" selected={lang === "es"}
+						>ES</option
+					>
+					<option value="en" class="text-black" selected={lang === "en"}
+						>EN</option
+					>
+				</select>
+			</label>
 		</div>
 	</section>
 </header>
@@ -79,7 +106,7 @@ import logoImage from "../images/logo_pch_blanco.png";
 		header.style.setProperty("--header-opacity", "0.95");
 	}
 
-	if(header && !isHomePage){
+	if (header && !isHomePage) {
 		header.style.setProperty("--header-opacity", "0.95");
 	}
 
@@ -105,6 +132,18 @@ import logoImage from "../images/logo_pch_blanco.png";
 		});
 	}
 
-	const curretAnchor = document.querySelector(`#header nav a[href="${window.location.pathname}"]`);
+	const curretAnchor = document.querySelector(
+		`#header nav a[href="${window.location.pathname}"]`,
+	);
 	curretAnchor?.classList.add("active");
+
+	const langSelect = document.getElementById("lang");
+	langSelect?.addEventListener("change", (e) => {
+		const target = e.target as HTMLSelectElement;
+		if (window.location.replace) {
+			window.location.replace(`/${target.value}${window.location.pathname}`);
+		} else {
+			window.location.href = `/${target.value}${window.location.pathname}`;
+		}
+	});
 </script>
diff --git a/src/components/Nosotros.astro b/src/components/Nosotros.astro
new file mode 100644
index 0000000..790553f
--- /dev/null
+++ b/src/components/Nosotros.astro
@@ -0,0 +1,66 @@
+---
+import { Image } from "astro:assets";
+import one from "../images/gallery_six.jpg";
+import two from "../images/gallery_seven.webp";
+import three from "../images/gallery_four.webp";
+import { getLangFromUrl, useTranslations } from "../i18n/utils";
+
+const lang = getLangFromUrl(Astro.currentLocale as string);
+const t = useTranslations(lang);
+
+---
+
+  <section class="mx-auto w-full max-w-7xl px-5 py-16 md:px-10 md:py-20">
+    <div class="grid gap-10 lg:grid-cols-2 lg:gap-12 my-32">
+      <Image
+        src={one}
+        alt="img"
+        class="h-full w-full object-cover rounded-lg overflow-hidden"
+      />
+      <div class="flex flex-col gap-5 rounded-lg shadow-2xl p-10 sm:p-20">
+        <h2 class="font-bold md:text-5xl">{t('home.about.1.title')}</h2>
+        <p class="text-sm text-gray-500 sm:text-base">
+          {t('home.about.1.text.1')}
+          <br /><br />
+          {t('home.about.1.text.2')}
+        </p>
+      </div>
+    </div>
+
+    <div class="grid gap-10 lg:grid-cols-2 lg:gap-12 my-32">
+      <div class="flex flex-col gap-5 rounded-lg shadow-2xl p-10 sm:p-20">
+        <h2 class="font-bold md:text-5xl">{t('home.about.2.title')}</h2>
+        <p class="text-sm text-gray-500 sm:text-base">
+          {t('home.about.2.text.1')}
+          <br /><br />
+          {t('home.about.2.text.2')}
+          <br /><br />
+          {t('home.about.2.text.3')}
+        </p>
+      </div>
+
+      <Image
+        src={two}
+        alt="img"
+        class="h-full w-full object-cover rounded-lg overflow-hidden"
+      />
+    </div>
+
+    <div class="grid gap-10 lg:grid-cols-2 lg:gap-12 my-32">
+      <Image
+        src={three}
+        alt="img"
+        class="h-full w-full object-cover rounded-lg overflow-hidden"
+      />
+      <div class="flex flex-col gap-5 rounded-lg shadow-2xl p-10 sm:p-20">
+        <h2 class="font-bold md:text-5xl">{t('home.about.3.title')}</h2>
+        <p class="text-sm text-gray-500 sm:text-base">
+          {t('home.about.3.text.1')}
+          <br /><br />
+          {t('home.about.3.text.2')}
+          <br /><br />
+          {t('home.about.3.text.3')}
+        </p>
+      </div>
+    </div>
+  </section>
\ No newline at end of file
diff --git a/src/components/Servicios.astro b/src/components/Servicios.astro
new file mode 100644
index 0000000..9178a94
--- /dev/null
+++ b/src/components/Servicios.astro
@@ -0,0 +1,121 @@
+---
+import { Image } from "astro:assets";
+import imgOne from "../images/mobile_pay.svg";
+import imgTwo from "../images/codigo_qr.png";
+import imgThree from "../images/chat_bot.svg";
+import imgFour from "../images/services.svg";
+import imgFive from "../images/nfc.png";
+import { getLangFromUrl, useTranslations } from "../i18n/utils";
+
+const lang = getLangFromUrl(Astro.currentLocale as string);
+const t = useTranslations(lang);
+---
+
+<section class="my-32 sm:pb-20 mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
+	<h2
+		class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl text-center px-2"
+	>
+		{t("useCases.title")}
+	</h2>
+	<p class="my-5 text-lg/7 font-medium text-gray-950 text-center">
+		{t("useCases.text")}
+	</p>
+	<div class="grid log:grid-cols-3 gap-4 mt-10">
+		<div
+			class="lg:row-span-2 bg-white rounded-lg shadow ring-1 ring-black/5 lg:rounded-tl-[2rem]"
+		>
+			<div class="px-8 pb-3 pt-8 sm:px-10 sm:pb-0 sm:pt-10">
+				<p class="mt-2 text-lg/7 font-medium text-gray-950 max-lg:text-center">
+					{t("useCases.1.title")}
+				</p>
+				<p class="mt-2 max-w-lg text-gray-600 max-lg:text-center">
+					{t("useCases.1.text")}
+				</p>
+				<Image
+					src={imgOne}
+					alt="Red para Ahorro y Crédito Popular"
+					loading="eager"
+					class="h-full w-full my-10"
+				/>
+			</div>
+		</div>
+		<div class="bg-white rounded-lg shadow ring-1 ring-black/5">
+			<div class="px-8 pb-3 pt-8 sm:px-10 sm:pb-0 sm:pt-10">
+				<p class="mt-2 text-lg/7 font-medium text-gray-950 max-lg:text-center">
+					{t("useCases.2.title")}
+				</p>
+				<p class="mt-2 max-w-lg text-gray-600 max-lg:text-center">
+					{t("useCases.2.text")}
+				</p>
+
+				<div class="flex justify-center sm:justify-start">
+					<Image
+						src={imgTwo}
+						alt="Red para Ahorro y Crédito Popular"
+						loading="eager"
+						class="h-20 w-20 my-7"
+					/>
+				</div>
+			</div>
+		</div>
+		<div
+			class="lg:row-span-2 bg-white rounded-lg shadow ring-1 ring-black/5 lg:rounded-tr-[2rem]"
+		>
+			<div class="px-8 pb-3 pt-8 sm:px-10 sm:pb-0 sm:pt-10">
+				<p class="mt-2 text-lg/7 font-medium text-gray-950 max-lg:text-center">
+					{t("useCases.3.title")}
+				</p>
+				<p class="mt-2 max-w-lg text-gray-600 max-lg:text-center">
+					{t("useCases.3.text")}
+				</p>
+				<Image
+					src={imgFour}
+					alt="Red para Ahorro y Crédito Popular"
+					loading="eager"
+					class="h-full w-full mt-20"
+				/>
+			</div>
+		</div>
+		<div class="bg-white rounded-lg shadow ring-1 ring-black/5">
+			<div class="px-8 pb-3 pt-8 sm:px-10 sm:pb-0 sm:pt-10">
+				<p class="mt-2 text-lg/7 font-medium text-gray-950 max-lg:text-center">
+					{t("useCases.4.title")}
+				</p>
+				<p class="mt-2 max-w-lg text-gray-600 max-lg:text-center">
+					{t("useCases.4.text")}
+				</p>
+				<div class="flex justify-center sm:justify-start">
+					<Image
+						src={imgFive}
+						alt="Red para Ahorro y Crédito Popular"
+						loading="eager"
+						class="h-20 w-20 my-7"
+					/>
+				</div>
+			</div>
+		</div>
+
+		<div
+			class="lg:col-span-3 bg-white rounded-lg shadow ring-1 ring-black/5 lg:rounded-b-[2rem]"
+		>
+			<div class="px-8 pt-8 grid lg:grid-cols-2 gap-32 pb-10">
+				<div>
+					<p
+						class="mt-2 text-lg/7 font-medium text-gray-950 max-lg:text-center"
+					>
+						{t("useCases.5.title")}
+					</p>
+					<p class="mt-2 max-w-lg text-gray-600 max-lg:text-center">
+						{t("useCases.5.text")}
+					</p>
+				</div>
+				<Image
+					src={imgThree}
+					alt="Red para Ahorro y Crédito Popular"
+					loading="eager"
+					class="h-44 w-auto"
+				/>
+			</div>
+		</div>
+	</div>
+</section>
diff --git a/src/components/Tecnologia.astro b/src/components/Tecnologia.astro
new file mode 100644
index 0000000..1903105
--- /dev/null
+++ b/src/components/Tecnologia.astro
@@ -0,0 +1,120 @@
+---
+import { Image } from "astro:assets";
+import diagramOne from "../images/diagram_1.jpg";
+import diagramTwo from "../images/diagram_2.jpg";
+import diagramThree from "../images/diagram_3.jpg";
+import { getLangFromUrl, useTranslations } from "../i18n/utils";
+
+const lang = getLangFromUrl(Astro.currentLocale as string);
+const t = useTranslations(lang);
+---
+
+<section class="mx-auto max-w-7xl my-16 md:px-10 md:py-20">
+	<h2 class="font-bold md:text-5xl my-5 text-center">{t('tech.title')}</h2>
+	<p class="text-s sm:text-base text-center">
+		{t('tech.text')}
+	</p>
+
+	<div class="grid lg:grid-cols-3 items-center mt-20 gap-5">
+		<div class="p-10 rounded-md border-t-8 border-primary shadow-md">
+			<h2 class="text-2xl font-bold">{t('tech.1.title')}</h2>
+			<p class="text-sm text-gray-500 sm:text-base">
+				{t('tech.1.text.2')}
+				<br /><br />
+				{t('tech.1.text.2')}
+				<br /><br />
+				{t('tech.1.text.3')}
+			</p>
+		</div>
+		<div class="rounded-3xl bg-white p-2 shadow-2xl col-span-2">
+			<p>
+				<Image
+					src={diagramOne}
+					alt="img"
+					class="h-full w-full object-cover overflow-hidden"
+				/>
+			</p>
+		</div>
+	</div>
+
+	<div class="grid lg:grid-cols-3 items-center mt-32 gap-5">
+		<div class="rounded-3xl bg-white p-2 shadow-2xl col-span-2">
+			<p>
+				<Image
+					src={diagramTwo}
+					alt="img"
+					class="h-full w-full object-cover overflow-hidden"
+				/>
+			</p>
+		</div>
+
+		<div class="p-10 rounded-md border-t-8 border-primary shadow-md">
+			<h2 class="text-2xl font-bold">{t('tech.2.title')}</h2>
+			<p class="text-sm text-gray-500 sm:text-base">
+				{t('tech.2.text.1')}
+				<br /><br />
+				{t('tech.2.text.2')}
+				<br /><br />
+				{t('tech.2.text.3')}
+			</p>
+		</div>
+	</div>
+
+	<div class="grid lg:grid-cols-3 items-center mt-32 gap-2 rounded-2xl mb-2">
+		<div class="p-10 rounded-md border-t-8 border-primary shadow-md">
+			<h2 class="text-2xl font-bold">{t('tech.3.title')}</h2>
+			<p class="text-sm text-gray-500 sm:text-base">
+				{t('tech.3.text.1')}
+				<br /><br />
+				{t('tech.3.text.2')}
+			</p>
+		</div>
+
+		<div class="rounded-3xl text-center col-span-2 py-3">
+			<div class="grid grid-cols-3 gap-2">
+				<div class="shadow-md rounded-md p-5">
+					<h2 class="font-bold">{t('tech.4.1.title')}</h2>
+					<p class="text-sm text-gray-500 sm:text-base">
+						{t('tech.4.1.text')}
+					</p>
+				</div>
+				<div class="shadow-md rounded-md p-5">
+					<h2 class="font-bold">{t('tech.4.2.title')}</h2>
+					<p class="text-sm text-gray-500 sm:text-base">
+						{t('tech.4.2.text')}
+					</p>
+				</div>
+				<div class="shadow-md rounded-md p-5">
+					<h2 class="font-bold">{t('tech.4.3.title')}</h2>
+					<p class="text-sm text-gray-500 sm:text-base">
+						{t('tech.4.3.text')}
+					</p>
+				</div>
+			</div>
+			<div class="grid grid-cols-2 mt-5 gap-2">
+				<div class="shadow-md rounded-md p-5">
+					<h2 class="font-bold">{t('tech.4.4.title')}</h2>
+					<p class="text-sm text-gray-500 sm:text-base">
+						{t('tech.4.4.text')}
+					</p>
+				</div>
+				<div class="shadow-md rounded-md p-5">
+					<h2 class="font-bold">{t('tech.4.5.title')}</h2>
+					<p class="text-sm text-gray-500 sm:text-base">
+						{t('tech.4.5.text')}
+					</p>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="rounded-3xl bg-white p-2 shadow-2xl">
+		<p>
+			<Image
+				src={diagramThree}
+				alt="img"
+				class="h-full w-full object-cover overflow-hidden"
+			/>
+		</p>
+	</div>
+</section>
diff --git a/src/components/inicio/Banner.astro b/src/components/inicio/Banner.astro
index 5f05e47..d2ca51c 100644
--- a/src/components/inicio/Banner.astro
+++ b/src/components/inicio/Banner.astro
@@ -1,6 +1,10 @@
 ---
 import { Image } from "astro:assets";
 import bannerImage from "../../images/banner.webp";
+import { getLangFromUrl, useTranslations } from "../../i18n/utils";
+
+const lang = getLangFromUrl(Astro.currentLocale as string);
+const t = useTranslations(lang);
 ---
 
 <section class="w-full h-[650px] relative mb-20 lg:mb-40" id="banner">
@@ -13,7 +17,7 @@ import bannerImage from "../../images/banner.webp";
 	<div id="filter" class="-z-10 absolute inset-0 bg-gradient"></div>
 	<div class="container m-auto z-30 h-full flex items-center">
 		<h1 class="hidden sm:block sm:text-6xl md:text-7xl text-white font-bold w-full sm:w-2/5 text-balance pl-2">
-			Cámara de la Gente
+			{t('header.company')}
 		</h1>
 	</div>
 </section>
diff --git a/src/components/inicio/Media.astro b/src/components/inicio/Media.astro
index c47f5ba..5841dd0 100644
--- a/src/components/inicio/Media.astro
+++ b/src/components/inicio/Media.astro
@@ -6,6 +6,10 @@ import three from "../../images/gallery_three.webp";
 import four from "../../images/gallery_four.webp";
 import five from "../../images/gallery_five.webp";
 import "lite-youtube-embed/src/lite-yt-embed.css"
+import { getLangFromUrl, useTranslations } from "../../i18n/utils";
+
+const lang = getLangFromUrl(Astro.currentLocale as string);
+const t = useTranslations(lang);
 ---
 <script is:inline src="/scripts/lite-yt-embed.js"></script>
 
@@ -20,9 +24,9 @@ import "lite-youtube-embed/src/lite-yt-embed.css"
 
     <div class="rounded-lg overflow-hidden shadow-lg">
       <lite-youtube
-        videoid="1J3SqW7Lia4"
+        videoid={t('home.media.video.id')}
         playlabel="Reproducir: Introducción a La cámara de la gente"
-        title="Introducción a la cámara de la gente"
+        title={t('home.media.title')}
         class="w-full h-full"
       ></lite-youtube>
     </div>
diff --git a/src/components/inicio/Objetives.astro b/src/components/inicio/Objetives.astro
index a5f0b20..910c5eb 100644
--- a/src/components/inicio/Objetives.astro
+++ b/src/components/inicio/Objetives.astro
@@ -2,6 +2,10 @@
 import BillIcon from "../../icons/BillIcon.astro";
 import RocketIcon from "../../icons/RocketIcon.astro";
 import CommentsIcon from "../../icons/CommentsIcon.astro";
+import { getLangFromUrl, useTranslations } from "../../i18n/utils";
+
+const lang = getLangFromUrl(Astro.currentLocale as string);
+const t = useTranslations(lang);
 ---
 
 <section
@@ -10,39 +14,36 @@ import CommentsIcon from "../../icons/CommentsIcon.astro";
   <h2
     class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl text-center"
   >
-    Nuestros Objetivos
+  {t('home.goals.title')}
   </h2>
   <div class="container mx-auto px-16 lg:px-10 lg:pl-14 flex flex-col lg:flex-row gap-12">
     <div class="basis-1/3">
       <p class="text-base font-semibold leading-7 text-gray-900">
         <CommentsIcon width="2.5rem" height="2.5rem" />
-        Poder colectivo
+        {t('home.goals.1.title')}
       </p>
       <p class="mt-2 text-base leading-7 text-gray-900">
-        Construir una red de pagos digitales del sector ahorro y crédito popular
-        y cooperativo, que obedezca a los intereses estratégicos del sector.
+        {t('home.goals.1.text')}
       </p>
     </div>
 
     <div class="basis-1/3">
       <p class="text-base font-semibold leading-7 text-gray-900">
         <BillIcon width="2.5rem" height="2.5rem" />
-        Poder inclusivo
+        {t('home.goals.2.title')}
       </p>
       <p class="mt-2 text-base leading-7 text-gray-900">
-        Beneficiar a los millones de socios y clientes de las entidades del
-        sector, con soluciones de pago rápidas, sencillas y accesibles.
+        {t('home.goals.2.text')}
       </p>
     </div>
 
     <div class="basis-1/3">
       <p class="text-base font-semibold leading-7 text-gray-900">
         <RocketIcon width="2.5rem" height="2.5rem" />
-        Poder estratégico
+        {t('home.goals.3.title')}
       </p>
       <p class="mt-2 text-base leading-7 text-gray-900">
-        Fomentar el dinamismo del sector, para permanecer competitivos en el
-        mundo Fintech, sin dejar a nadie atrás.
+        {t('home.goals.3.text')}
       </p>
     </div>
   </div>
diff --git a/src/components/inicio/Sections.astro b/src/components/inicio/Sections.astro
index 03fe86f..dc8d078 100644
--- a/src/components/inicio/Sections.astro
+++ b/src/components/inicio/Sections.astro
@@ -3,13 +3,17 @@ import { Image } from "astro:assets";
 import sectionOne from "../../images/world.svg";
 import sectionTwo from "../../images/transfer.svg";
 import sectionThree from "../../images/pay_online.svg";
+import { getLangFromUrl, useTranslations } from "../../i18n/utils";
+
+const lang = getLangFromUrl(Astro.currentLocale as string);
+const t = useTranslations(lang);
 ---
 
 <section class="mb-20 lg:mb-40">
     <h2
         class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl text-center px-2"
     >
-        Soluciones Tecnológicas para Entidades Financieras Populares y Cooperativas
+        {t('home.sections.title')}
     </h2>
     <div
         class="flex items-center flex-wrap flex-row justify-center gap-10 mt-10"
@@ -24,11 +28,10 @@ import sectionThree from "../../images/pay_online.svg";
                 class="h-60 w-60"
             />
             <h3 class="text-xl font-semibold text-center">
-                Red de pagos para el Sector
+                {t('home.sections.1.title')}
             </h3>
             <p class="text-center md:text-left">
-                La Cámara de la Gente es una red transaccional para las
-                entidades del sector ahorro y crédito popular y cooperativo, adaptada a sus clientes y socios.
+                {t('home.sections.1.text')}
             </p>
         </div>
         <div
@@ -41,12 +44,10 @@ import sectionThree from "../../images/pay_online.svg";
                 class="h-60 w-60"
             />
             <h3 class="text-xl font-semibold text-center">
-                Transferencias en Tiempo Real
+                {t('home.sections.2.title')}
             </h3>
             <p class="text-center md:text-left">
-                Los socios y clientes de tu entidad podrán utilizar su teléfono
-                celular para enviar y recibir fondos en tiempo real hacia/desde otras entidades
-                financieras.
+                {t('home.sections.2.text')}
             </p>
         </div>
         <div
@@ -58,9 +59,9 @@ import sectionThree from "../../images/pay_online.svg";
                 loading="eager"
                 class="h-60 w-60"
             />
-            <h3 class="text-xl font-semibold text-center">Remesas internacionales y SPEI</h3>
+            <h3 class="text-xl font-semibold text-center">{t('home.sections.3.title')}</h3>
             <p class="text-center md:text-left">
-                Tus clientes y socios podrán recibir remesas en tiempo real, conectarse al SPEI, cobrar servicios y tiempo aire.
+                {t('home.sections.3.text')}
             </p>
         </div>
     </div>
diff --git a/src/components/inicio/Testimonials.astro b/src/components/inicio/Testimonials.astro
index 4177d9b..22b3d25 100644
--- a/src/components/inicio/Testimonials.astro
+++ b/src/components/inicio/Testimonials.astro
@@ -4,10 +4,14 @@ import elviraConcheiroPhoto from "../../images/elvira_concheiro_photo.jpg";
 import rocioMejiaPhoto from "../../images/rocio_mejia_photo.jpg";
 import brianaMarbury from "../../images/briana_marbury_photo.jpg";
 import QuoteLeftIcon from "../../icons/QuoteLeftIcon.astro";
+import { getLangFromUrl, useTranslations } from "../../i18n/utils";
+
+const lang = getLangFromUrl(Astro.currentLocale as string);
+const t = useTranslations(lang);
 ---
 
 <section id="testimonios" class="w-full mb-20 lg:mb-40 container m-auto">
-	<h2 class="text-4xl font-bold text-center mb-6">Testimonios</h2>
+	<h2 class="text-4xl font-bold text-center mb-6">{t('home.testimonials.title')}</h2>
 
 	<article class="max-w-[60rem] m-auto flex flex-col md:flex-row gap-6 md:gap-16 items-center mb-14 md:mb-2 px-4 md:px-2">
 		<picture class="flex flex-col flex-shrink-0 relative">
@@ -30,16 +34,13 @@ import QuoteLeftIcon from "../../icons/QuoteLeftIcon.astro";
 		<div>
 			<blockquote>
 				<p class="text-lg text-center md:text-left md:text-balance">
-					No existe en la práctica ningún esfuerzo como el que aquí saludamos,
-					que es el de la Cámara de la Gente, que tenemos un combate común que
-					hacer por, efectivamente, hacerse de esos medios de pago o de
-					recaudación.
+					{t('home.testimonials.1.text')}
 				</p>
 			</blockquote>
 
 			<p class="font-bold text-primary mt-2 text-center md:text-left">
-				Elvira Concheiro <cite class="text-black font-normal"
-					>- Tesorera de la Federación</cite
+				{t('home.testimonials.1.author')} <cite class="text-black font-normal"
+					>- {t('home.testimonials.1.position')}</cite
 				>
 			</p>
 		</div>
@@ -66,17 +67,13 @@ import QuoteLeftIcon from "../../icons/QuoteLeftIcon.astro";
 		<div>
 			<blockquote>
 				<p class="text-lg md:text-balance text-center md:text-right">
-					Queremos poner a su disposición nuestra infraestructura para que
-					puedan utilizar nuestros canales para que podamos servir como agente
-					comercial, como corresponsal, para que en todos los lugares donde
-					estemos podamos recibir las remesas y entregarlas directamente a los
-					socios y a las socias de la Cámara de la Gente.
+					{t('home.testimonials.2.text')}
 				</p>
 			</blockquote>
 
 			<p class="font-bold text-primary mt-2 text-center md:text-right">
-				Rocío Mejía <cite class="text-black font-normal"
-					>- Directora General de la Financiera para el Bienestar</cite
+				{t('home.testimonials.2.author')} <cite class="text-black font-normal"
+					>- {t('home.testimonials.2.position')}</cite
 				>
 			</p>
 		</div>
@@ -103,16 +100,13 @@ import QuoteLeftIcon from "../../icons/QuoteLeftIcon.astro";
 		<div>
 			<blockquote>
 				<p class="text-lg text-center md:text-left md:text-balance">
-					El esfuerzo que la Cámara de la Gente está liderando en México nos
-					parece una ruta estratégica que otras regiones del mundo pueden seguir
-					para democratizar sus sistemas de pagos en comunidades que aún deben
-					ser debidamente atendidas.
+					{t('home.testimonials.3.text')}
 				</p>
 			</blockquote>
 
 			<p class="font-bold text-primary mt-2 text-center md:text-left">
-				Briana Marbury <cite class="text-black font-normal"
-					>- Directora General de la Fundación Interledger</cite
+				{t('home.testimonials.3.author')} <cite class="text-black font-normal"
+					>- {t('home.testimonials.3.position')}</cite
 				>
 			</p>
 		</div>
diff --git a/src/i18n/ui.ts b/src/i18n/ui.ts
new file mode 100644
index 0000000..498fd97
--- /dev/null
+++ b/src/i18n/ui.ts
@@ -0,0 +1,189 @@
+export const languages = {
+	es: 'Español',
+	en: 'Inglés',
+};
+
+export const defaultLang = 'es';
+
+export const ui = {
+	es: {
+		'header.company': 'Cámara de la Gente',
+		'nav.home': 'Inicio',
+		'nav.about': 'Nosotros',
+		'nav.services': 'Servicios',
+		'nav.technology': 'Tecnología',
+		'nav.events': 'Eventos',
+		'nav.help': 'Ayuda',
+		'footer.company': 'Cámara de la Gente',
+		'footer.contactInfo': 'INFORMACIÓN DE CONTACTO',
+		'footer.address': 'Xochicalco 55, Benito Juárez, CDMX, 03020, MÉXICO',
+		'footer.stayInTouch': 'MANTENTE INFORMADO',
+		'footer.stayInTouchText': 'Indica tu email para recibir actualizaciones de la Cámara de la Gente',
+		'footer.email': 'Ingresa tu email',
+		'footer.subscribe': 'Suscribirse',
+		'footer.copy': '2024 Cámara de la Gente. Todos los derechos reservados.',
+		'home.sections.title': 'Soluciones Tecnológicas para Entidades Financieras Populares y Cooperativas',
+		'home.sections.1.title': 'Red de pagos para el Sector',
+		'home.sections.1.text': 'La Cámara de la Gente es una red transaccional para las entidades del sector ahorro y crédito popular y cooperativo, adaptada a sus clientes y socios.',
+		'home.sections.2.title': 'Transferencias en Tiempo Real',
+		'home.sections.2.text': 'Los socios y clientes de tu entidad podrán utilizar su teléfono celular para enviar y recibir fondos en tiempo real hacia/desde otras entidades financieras.',
+		'home.sections.3.title': 'Transferencias en Tiempo Real',
+		'home.sections.3.text': 'Tus clientes y socios podrán recibir remesas en tiempo real, conectarse al SPEI, cobrar servicios y tiempo aire.',
+		'home.media.title': 'Introducción a la cámara de la gente',
+		'home.media.video.id': '1J3SqW7Lia4',
+		'home.goals.title': 'Nuestros Objetivos',
+		'home.goals.1.title': 'Poder colectivo',
+		'home.goals.1.text': 'Construir una red de pagos digitales del sector ahorro y crédito popular y cooperativo, que obedezca a los intereses estratégicos del sector.',
+		'home.goals.2.title': 'Poder inclusivo',
+		'home.goals.2.text': 'Beneficiar a los millones de socios y clientes de las entidades del sector, con soluciones de pago rápidas, sencillas y accesibles.',
+		'home.goals.3.title': 'Poder estratégico',
+		'home.goals.3.text': 'Fomentar el dinamismo del sector, para permanecer competitivos en el mundo Fintech, sin dejar a nadie atrás.',
+		'home.testimonials.title': 'Testimonios',
+		'home.testimonials.1.text': 'No existe en la práctica ningún esfuerzo como el que aquí saludamos, que es el de la Cámara de la Gente, que tenemos un combate común que hacer por, efectivamente, hacerse de esos medios de pago o de recaudación.',
+		'home.testimonials.1.author': 'Elvira Concheiro',
+		'home.testimonials.1.position': 'Tesorera de la Federación',
+		'home.testimonials.2.text': 'Queremos poner a su disposición nuestra infraestructura para que puedan utilizar nuestros canales para que podamos servir como agente comercial, como corresponsal, para que en todos los lugares donde estemos podamos recibir las remesas y entregarlas directamente a los socios y a las socias de la Cámara de la Gente.',
+		'home.testimonials.2.author': 'Rocío Mejía',
+		'home.testimonials.2.position': 'Directora General de la Financiera para el Bienestar',
+		'home.testimonials.3.text': 'El esfuerzo que la Cámara de la Gente está liderando en México nos parece una ruta estratégica que otras regiones del mundo pueden seguir para democratizar sus sistemas de pagos en comunidades que aún deben ser debidamente atendidas.',
+		'home.testimonials.3.author': 'Briana Marbury',
+		'home.testimonials.3.position': 'Directora General de la Fundación Interledger',
+		'home.about.1.title': 'Historia',
+		'home.about.1.text.1': 'La Cámara de la Gente surgió legalmente en el curso del año 2022, como una plataforma colectiva para dotar al sector financiero social de un sistema de pagos entre dispositivos móviles que esté realmente adaptado a las necesidades estratégicas del sector.',
+		'home.about.1.text.2': 'En los últimos años, la Cámara de la Gente ha contado con el apoyo estratégico de diversos actores, en particular de la Fundación Interledger, que impulsa la inclusión financiera digital y la innovación tecnológica basada en desarrollo de código abierto.',
+		'home.about.2.title': 'Equipo',
+		'home.about.2.text.1': 'Detrás de la Cámara de la Gente, hay diversas instituciones clave, como la Asociación Mexicana de Uniones de Crédito del Sector Social (AMUCSS), y diversas Sociedades Cooperativas de Ahorro y Préstamo.',
+		'home.about.2.text.2': 'AMUCSS lidera una red de 140 bancos comunitarios en todo México, que cubre 34 lenguas indígenas, y en que el 60% de los clientes finales son mujeres de regiones marginadas.',
+		'home.about.2.text.3': 'La Cámara de la Gente es impulsada por expertos del sector financiero popular, con amplia experiencia en finanzas sociales, remesas, sistemas de pago y justicia social. Te invitamos a unirte a este gran proyecto por la inclusión financiera real.',
+		'home.about.3.title': 'Misiónn',
+		'home.about.3.text.1': 'Cambiar la vida de millones de personas que viven en comunidades, mediante la inclusión financiera digital y el acceso a remesas a cuenta y servicios de crédito justo.',
+		'home.about.3.text.2': 'En particular, cada remesa que se deposita en una cuenta de ahorros (y no en efectivo) en un banco comunitario o en una cooperativa de ahorro (y no en un banco comercial) empodera a la comunidad y puede tener un impacto social masivo.',
+		'home.about.3.text.3': '¿Cómo? Más remesas a cuenta implican mayor volumen de ahorro e inversión, que llevan a más créditos para proyectos productivos locales, que llevan a más empleos y oportunidades regionales, que llevan a tener menos desigualdad, pues toda la comunidad se beneficia, no sólo quienes reciben remesas.',
+		'useCases.title': 'Casos de uso',
+		'useCases.text': 'La Cámara de la Gente impulsa los pagos digitales entre dispositivos móviles de clientes de entidades, de manera eficiente y segura.',
+		'useCases.1.title': 'Transferencias G2P',
+		'useCases.1.text': 'Una entidad gubernamental puede pagar apoyos directo a clientes de una entidad ruteando las transacciones con el número celular de los clientes',
+		'useCases.2.title': 'Transferencias P2P',
+		'useCases.2.text': 'Un cliente de una entidad puede pagar al cliente de otra entidad, usando su teléfono celular (mediante App, QR, NFC)',
+		'useCases.3.title': 'Transferencias PISP',
+		'useCases.3.text': 'Un cliente de una entidad que no tiene su propia app, puede utilizar el servicio de la Cámara para iniciar pagos sin necesidad de una app propia de la entidad',
+		'useCases.4.title': 'Transferencias P2B',
+		'useCases.4.text': 'Un cliente de una entidad puede pagar a un negocio cliente de otra entidad, usando su teléfono celular (mediante App, QR, NFC).',
+		'useCases.5.title': 'Corresponsalías',
+		'useCases.5.text': 'Un cliente de una entidad puede ofrecer el servicio de corresponsalía (cash-in, cash-out, pago de servicios/tiempo aire) a otros clientes de esa u otras entidades.',
+		'tech.title': "Tecnología",
+		'tech.text': "La Cámara de la Gente implementa software financiero de última generación basado en código abierto, que utiliza tecnologías de transferencia eficientes y seguras, dando prioridad a la privacidad de la información de los participantes y sus clientes.",
+		'tech.1.title': "VNext",
+		'tech.1.text.1': "Para interconectar a las entidades, la Cámara de la Gente utiliza una plataforma de compensación basada en Mojaloop vNext, un software desarrollado por la Fundación Mojaloop para promover la inclusión financiera en todo el mundo.",
+		'tech.1.text.2': "Adaptada al contexto regulatorio mexicano y a las necesidades del sector, la plataforma integra a las entidades financieras como participantes y registra de forma segura las transferencias entre sus clientes y socios.",
+		'tech.1.text.3': "La arquitectura de nuestra plataforma puede resumirse en el siguiente diagrama:",
+		'tech.2.title': "Rafiki",
+		'tech.2.text.1': "Para ofrecer remesas internacionales, la Cámara de la Gente integra un Transmisor de Dinero, el cual utiliza la tecnología Rafiki de la Fundación Interledger para registrar obligaciones de pago viniendo de entidades en el extranjero en tiempo real, siguiendo los estándares nacionales e internacionales de PLD.",
+		'tech.2.text.2': "Para poder gestionar transferencias instantáneas, el Transmisor convierte las instrucciones de pago Rafiki en instrucciones de pago de la plataforma de compensación vNext, que son acreditadas en cuestión de segundos en las cuentas de clientes y socios de las entidades correspondientes.",
+		'tech.2.text.3': "El proceso del Transmisor de Dinero Rafiki puede resumirse en el siguiente diagrama:",
+		'tech.3.title': "Seguridad",
+		'tech.3.text.1': "La Cámara de la Gente implementa tecnologías de punta en cuanto a seguridad de la información para resguardar la privacidad, fiabilidad e inmutabilidad de las instrucciones de pago que pasan por su plataforma.",
+		'tech.3.text.2': "En particular, la Cámara de la Gente implementa:",
+		'tech.4.1.title': "mTLS",
+		'tech.4.1.text': "Protocolo de capa de transporte que autentica tanto al cliente como al servidor de forma segura.",
+		'tech.4.2.title': "OAuth 2.0",
+		'tech.4.2.text': "Protocolo que establece un framework de autorización para delegar accesos a recursos específicos.",
+		'tech.4.3.title': "JWT (JSON Web Tokens)",
+		'tech.4.3.text': "Estándar para utilizar tokens con el fin de autenticar el intercambio de información.",
+		'tech.4.4.title': "RBAC (Role-based Access Control)",
+		'tech.4.4.text': "Control de acceso segmentado por roles, mediante certificados de autenticación.",
+		'tech.4.5.title': "Marco de trabajo “Zero trust security”",
+		'tech.4.5.text': "Requerimiento de que todo usuario y todo servicio de la plataforma, sean autenticados, autorizados y continuamente validados antes de obtener o mantener acceso a aplicaciones e información de cualquier parte de la plataforma.",
+		'404.title': "Página no encontrada",
+		'404.text': "Lo sentimos, no pudimos encontrar la página que estás buscando.",
+		'404.home': "Ir al inicio"
+	},
+	en: {
+		'header.company': "People's Clearinghouse",
+		'nav.home': 'Home',
+		'nav.about': 'About Us',
+		'nav.services': 'Use Cases',
+		'nav.technology': 'Tech',
+		'nav.events': 'Events',
+		'nav.help': 'Help',
+		'footer.company': "People's Clearinghouse",
+		'footer.contactInfo': 'CONTACT INFO',
+		'footer.stayInTouch': 'STAY IN THE LOOP',
+		'footer.stayInTouchText': 'Add your email to People’s Clearinghouse mailing list.',
+		'footer.email': 'Enter your email',
+		'footer.subscribe': 'Subscribe',
+		'footer.copy': '2024 Cámara de la Gente. All rights reserved.',
+		'home.sections.title': 'Technological Solutions for Popular Financial Entities and Cooperatives',
+		'home.sections.1.title': 'Payment network for the Sector',
+		'home.sections.1.text': 'People’s Clearinghouse is a transactional network for entities in the popular and cooperative savings and credit sector, adapted to their clients and members.',
+		'home.sections.2.title': 'Transfers in Real Time',
+		'home.sections.2.text': "Your entity's clients and members will be able to use their cell phone to send and receive funds in real time to/from other financial entities.",
+		'home.sections.3.title': 'International remittances and SPEI',
+		'home.sections.3.text': 'Your members and clients will be able to receive remittances in real time, connect to SPEI, charge for bill and airtime payments.',
+		'home.media.title': 'Introducing People’s Clearinghouse',
+		'home.media.video.id': 'yEUU14pw2do',
+		'home.goals.title': 'Our Goals',
+		'home.goals.1.title': 'Collective Power',
+		'home.goals.1.text': 'Build a digital payment network for the popular and cooperative savings and credit sector, which obeys the strategic interests of the sector.',
+		'home.goals.2.title': 'Inclusive Power',
+		'home.goals.2.text': 'Benefit the millions of members and clients of entities in the sector, with fast, simple and accessible payment solutions.',
+		'home.goals.3.title': 'Strategic Power',
+		'home.goals.3.text': 'Promote the dynamism of the sector, to remain competitive in the Fintech world, without leaving anyone behind.',
+		'home.testimonials.title': 'Testimonials',
+		'home.testimonials.1.text': 'Currently there is no effort like the one we salute here, which is that of the People’s Clearinghouse, by which we have a common combat to effectively control our own payments means.',
+		'home.testimonials.1.position': 'General Treasurer of Mexico',
+		'home.testimonials.2.text': 'We want to put at your disposal our infrastructure, so that you can use our channels and we can become your commercial agents, provide you a correspondent service, so that in all places where we are we can process your remittances and directly deliver them to all members pertaining to the People’s Clearinghouse network.',
+		'home.testimonials.2.position': 'CEO of Financiera para el Bienestar (national public money transmitter in Mexico)',
+		'home.testimonials.3.text': 'We view the work that People’s Clearinghouse is spearheading in Mexico as a roadmap that other regions across the world can also follow to democratize payments in currently underserved communities.',
+		'home.testimonials.3.position': 'CEO of Interledger Foundation',
+		'home.about.1.title': 'History',
+		'home.about.1.text.1': "People's Clearinghouse emerged legally during 2022, as a collective platform to provide the social financial sector with a payment system between mobile devices that would be truly adapted to the strategic needs of the sector.",
+		'home.about.1.text.2': "In recent years, People's Clearinghouse has received strategic support, in particular from the Interledger Foundation, which promotes digital financial inclusion and technological innovation on the basis of open source developments.",
+		'home.about.2.title': 'Team',
+		'home.about.2.text.1': "Behind the People's Clearinghouse, there are several key institutions, such as the Mexican Association of Social Sector Credit Unions (AMUCSS), and various Savings Coops.",
+		'home.about.2.text.2': "AMUCSS leads a network of 140 community banks throughout Mexico, covering 34 indigenous languages, and in which 60% of end clients are women from marginalized regions.",
+		'home.about.2.text.3': "People's Clearinghouse is directed and advised by experts from the popular financial sector, with extensive experience in social finances, remittances, payment systems and social justice. We invite you to join this great project for real financial inclusion.",
+		'home.about.3.title': 'Mission',
+		'home.about.3.text.1': "To change the lives of millions of people living in communities, through digital financial inclusion, access to account-deposited remittances and fair credit services.",
+		'home.about.3.text.2': "In particular, every remittance deposited in a savings account (and not cash) at a community bank or savings cooperative (and not a commercial bank) empowers the community and can have a massive social impact.",
+		'home.about.3.text.3': "How? More remittances on account imply a greater volume of savings and investment, which leads to more credits for local productive projects, which leads to more jobs and regional opportunities, which leads to less inequality, since the entire community benefits, not just those who receive remittances.",
+		'useCases.title': 'Use cases',
+		'useCases.text': "People's Clearinghouse promotes digital payments between mobile devices of clients of financial entities, in an efficient and secure manner.",
+		'useCases.1.title': 'G2P transfers',
+		'useCases.1.text': "A government entity can transfer welfare support directly to clients of financial entities by routing transactions using the clients' cell phone.",
+		'useCases.2.title': "P2P transfers",
+		'useCases.2.text': "A client of one entity can pay the client of another entity, using their cell phone (via App, QR, NFC)",
+		'useCases.3.title': 'PISP transfers',
+		'useCases.3.text': "A client of an entity that does not have its own app can use the Clearinghouse’s service to initiate payments without the need for the entity's own app.",
+		'useCases.4.title': 'P2B transfers',
+		'useCases.4.text': "A client of one entity can pay a business client of another entity, using their cell phone (via App, QR, NFC).",
+		'useCases.5.title': 'Agents',
+		'useCases.5.text': "A client of an entity can offer its service as agent (cash-in, cash-out, bill/airtime payment) to other clients of that or other entities.",
+		'tech.title': "Tech",
+		'tech.text': "The People's Clearinghouse implements state-of-the-art financial software based on open source, which uses efficient and secure transfer technologies, prioritizing the privacy and security of participants’ and their clients’ information.",
+		'tech.1.title': "VNext",
+		'tech.1.text.1': "To interconnect entities, People's Clearinghouse uses a platform based on Mojaloop vNext, a software developed by the Mojaloop Foundation to promote financial inclusion around the world.",
+		'tech.1.text.2': "Adapted to the Mexican regulatory context and the needs of the sector, the platform integrates financial entities as participants and securely records transfers between their clients and partners.",
+		'tech.1.text.3': "The architecture of our platform can be summarized in the following diagram:",
+		'tech.2.title': "Rafiki",
+		'tech.2.text.1': "To offer international remittances, People's Clearinghouse integrates a Money Transmitter, which uses the Interledger Foundation's Rafiki technology to record payment obligations coming from entities abroad in real time, following national and international AML standards.",
+		'tech.2.text.2': "In order to manage instant transfers, the Transmitter converts Rafiki payment instructions into payment instructions from the vNext clearing platform, which are credited in a matter of seconds to the accounts of clients and members of the corresponding entities.",
+		'tech.2.text.3': "The Rafiki Money Transmitter process can be summarized in the following diagram:",
+		'tech.3.title': "Security",
+		'tech.3.text.1': "The People's Clearinghouse implements cutting-edge technologies in terms of information security to protect the privacy, reliability and immutability of the payment instructions that pass through its platform.",
+		'tech.3.text.2': "In particular, the People's Clearinghouse implements:",
+		'tech.4.1.title': "mTLS",
+		'tech.4.1.text': "Transport layer protocol that authenticates both the client and the server securely.",
+		'tech.4.2.title': "OAuth 2.0",
+		'tech.4.2.text': "Protocol that establishes an authorization framework to delegate access to specific resources.",
+		'tech.4.3.title': "JWT (JSON Web Tokens)",
+		'tech.4.3.text': "Standard for using tokens to authenticate the exchange of information.",
+		'tech.4.4.title': "RBAC (Role-based Access Control)",
+		'tech.4.4.text': "Segmented access control by roles, using authentication certificates.",
+		'tech.4.5.title': "“Zero trust security” framework",
+		'tech.4.5.text': "Requirement that every user and every service on the platform be authenticated, authorized and continually validated before obtaining or maintaining access to applications and information in any part of the platform.",
+		'404.title': "Page not found",
+		'404.text': "Sorry, we could not find the page you are looking for.",
+		'404.home': "Go home"
+	},
+} as const;
\ No newline at end of file
diff --git a/src/i18n/utils.ts b/src/i18n/utils.ts
new file mode 100644
index 0000000..13cdbca
--- /dev/null
+++ b/src/i18n/utils.ts
@@ -0,0 +1,12 @@
+import { ui, defaultLang } from './ui';
+
+export function getLangFromUrl(lang: string) {
+	if (lang in ui) return lang as keyof typeof ui;
+	return defaultLang;
+}
+
+export function useTranslations(lang: keyof typeof ui) {
+	return function t(key: keyof typeof ui[typeof defaultLang]) {
+		return key in ui[lang] ? (ui[lang] as Record<string, string>)[key] : ui[defaultLang][key];
+	}
+}
\ No newline at end of file
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 57db865..4b0fb5e 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -13,12 +13,15 @@ const { title } = Astro.props;
 ---
 
 <!doctype html>
-<html lang="es">
+<html lang={Astro.currentLocale}>
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <meta name="description" content="Cámara de la Gente es una red transaccional que facilita pagos en tiempo real entre entidades del sector social y cooperativo, promoviendo inclusión financiera">
+    <meta
+      name="description"
+      content="Cámara de la Gente es una red transaccional que facilita pagos en tiempo real entre entidades del sector social y cooperativo, promoviendo inclusión financiera"
+    />
     <title>{title}</title>
   </head>
   <body class="bg-gray-100 text-gray-800">
diff --git a/src/pages/404.astro b/src/pages/404.astro
index 6673187..9961df1 100644
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -2,14 +2,19 @@
 import Layout from "../layouts/Layout.astro";
 import { Image } from "astro:assets";
 import notFound from "../images/404.svg";
+
+import { getLangFromUrl, useTranslations } from "../i18n/utils";
+
+const lang = getLangFromUrl(Astro.currentLocale as string);
+const t = useTranslations(lang);
 ---
 
 <Layout title="La Cámara de la Gente">
     <section class="my-32 text-center">
         <p class="font-semibold text-primary">404</p>
-        <h1 class="text-3xl font-bold sm:text-5xl">Página no encontrada</h1>
+        <h1 class="text-3xl font-bold sm:text-5xl">{t('404.title')}</h1>
         <p class="mt-6 text-gray-600 mb-20">
-            Lo sentimos, no pudimos encontrar la página que estás buscando.
+            {t('404.text')}
         </p>
         <div class="flex flex-col items-center justify-between">
             <Image src={notFound} alt="img" class="h-60 w-auto" />
@@ -17,7 +22,7 @@ import notFound from "../images/404.svg";
                 href="/"
                 class="bg-blue p-3 rounded bg-primary text-white hover:bg-secondary mt-20"
             >
-                Ir a inicio
+            {t('404.home')}
             </a>
         </div>
     </section>
diff --git a/src/pages/en/index.astro b/src/pages/en/index.astro
new file mode 100644
index 0000000..04b6fb1
--- /dev/null
+++ b/src/pages/en/index.astro
@@ -0,0 +1,18 @@
+---
+import Banner from "../../components/inicio/Banner.astro";
+import Testimonials from "../../components/inicio/Testimonials.astro";
+import Layout from "../../layouts/Layout.astro";
+import Sections from "../../components/inicio/Sections.astro";
+import Objetives  from "../../components/inicio/Objetives.astro";
+import Media from "../../components/inicio/Media.astro";
+
+---
+
+<Layout title="The People's Clearinghouse">
+  <Banner/>
+  <Sections/>
+  <Media/>
+  <Objetives/>
+  <Testimonials />
+</Layout>
+
diff --git a/src/pages/en/nosotros.astro b/src/pages/en/nosotros.astro
new file mode 100644
index 0000000..f4cda64
--- /dev/null
+++ b/src/pages/en/nosotros.astro
@@ -0,0 +1,10 @@
+---
+import Layout from "../../layouts/Layout.astro";
+import NosotrosComponent from "../../components/Nosotros.astro";
+
+---
+
+<Layout title="The People's Clearinghouse">
+  <NosotrosComponent />
+</Layout>
+
diff --git a/src/pages/en/servicios.astro b/src/pages/en/servicios.astro
new file mode 100644
index 0000000..33dea64
--- /dev/null
+++ b/src/pages/en/servicios.astro
@@ -0,0 +1,9 @@
+---
+import Layout from "../../layouts/Layout.astro";
+import ServiciosComponent from "../../components/Servicios.astro";
+---
+
+<Layout title="The People's Clearinghouse">
+  <ServiciosComponent />
+</Layout>
+
diff --git a/src/pages/en/tecnologia.astro b/src/pages/en/tecnologia.astro
new file mode 100644
index 0000000..eea1c47
--- /dev/null
+++ b/src/pages/en/tecnologia.astro
@@ -0,0 +1,8 @@
+---
+import Layout from "../../layouts/Layout.astro";
+import TecnologiaComponent from "../../components/Tecnologia.astro";
+---
+
+<Layout title="La Cámara de la Gente">
+	<TecnologiaComponent />
+</Layout>
diff --git a/src/pages/nosotros.astro b/src/pages/nosotros.astro
index b25fc4f..3f840e5 100644
--- a/src/pages/nosotros.astro
+++ b/src/pages/nosotros.astro
@@ -1,79 +1,9 @@
 ---
 import Layout from "../layouts/Layout.astro";
-import { Image } from "astro:assets";
-import one from "../images/gallery_six.jpg";
-import two from "../images/gallery_seven.webp";
-import three from "../images/gallery_four.webp";
+import NosotrosComponent from "../components/Nosotros.astro";
+
 ---
 
 <Layout title="La cámara de la gente">
-  <section class="mx-auto w-full max-w-7xl px-5 py-16 md:px-10 md:py-20">
-    <div class="grid gap-10 lg:grid-cols-2 lg:gap-12 my-32">
-      <Image
-        src={one}
-        alt="img"
-        class="h-full w-full object-cover rounded-lg overflow-hidden"
-      />
-      <div class="flex flex-col gap-5 rounded-lg shadow-2xl p-10 sm:p-20">
-        <h2 class="font-bold md:text-5xl">Historia</h2>
-        <p class="text-sm text-gray-500 sm:text-base">
-          La Cámara de la Gente surgió legalmente en el curso del año 2022, como una plataforma colectiva para dotar al sector financiero social de un sistema de pagos entre dispositivos móviles que esté realmente adaptado a las necesidades estratégicas del sector. 
-          <br /><br />
-          En los últimos años, la Cámara de la Gente ha contado con el apoyo estratégico de diversos actores, en particular de la Fundación Interledger, que impulsa la inclusión financiera digital y la innovación tecnológica basada en desarrollo de código abierto.
-        </p>
-      </div>
-    </div>
-
-    <div class="grid gap-10 lg:grid-cols-2 lg:gap-12 my-32">
-      <div class="flex flex-col gap-5 rounded-lg shadow-2xl p-10 sm:p-20">
-        <h2 class="font-bold md:text-5xl">Equipo</h2>
-        <p class="text-sm text-gray-500 sm:text-base">
-          Detrás de la Cámara de la Gente, hay diversas instituciones clave,
-          como la Asociación Mexicana de Uniones de Crédito del Sector Social
-          (AMUCSS), y diversas Sociedades Cooperativas de Ahorro y Préstamo.
-          <br /><br />
-          AMUCSS lidera una red de 140 bancos comunitarios en todo México, que cubre
-          34 lenguas indígenas, y en que el 60% de los clientes finales son mujeres
-          de regiones marginadas.
-          <br /><br />
-          La Cámara de la Gente es impulsada por expertos del sector financiero popular,
-          con amplia experiencia en finanzas sociales, remesas, sistemas de pago
-          y justicia social. Te invitamos a unirte a este gran proyecto por la inclusión
-          financiera real.
-        </p>
-      </div>
-
-      <Image
-        src={two}
-        alt="img"
-        class="h-full w-full object-cover rounded-lg overflow-hidden"
-      />
-    </div>
-
-    <div class="grid gap-10 lg:grid-cols-2 lg:gap-12 my-32">
-      <Image
-        src={three}
-        alt="img"
-        class="h-full w-full object-cover rounded-lg overflow-hidden"
-      />
-      <div class="flex flex-col gap-5 rounded-lg shadow-2xl p-10 sm:p-20">
-        <h2 class="font-bold md:text-5xl">Misión</h2>
-        <p class="text-sm text-gray-500 sm:text-base">
-          Cambiar la vida de millones de personas que viven en comunidades,
-          mediante la inclusión financiera digital y el acceso a remesas a
-          cuenta y servicios de crédito justo.
-          <br /><br />
-          En particular, cada remesa que se deposita en una cuenta de ahorros (y
-          no en efectivo) en un banco comunitario o en una cooperativa de ahorro
-          (y no en un banco comercial) empodera a la comunidad y puede tener un impacto
-          social masivo. 
-          <br /><br />
-          ¿Cómo? Más remesas a cuenta implican mayor volumen de ahorro e inversión, que
-          llevan a más créditos para proyectos productivos locales, que llevan a
-          más empleos y oportunidades regionales, que llevan a tener menos desigualdad,
-          pues toda la comunidad se beneficia, no sólo quienes reciben remesas.
-        </p>
-      </div>
-    </div>
-  </section>
+  <NosotrosComponent />
 </Layout>
diff --git a/src/pages/servicios.astro b/src/pages/servicios.astro
index 121d79a..f46a0cb 100644
--- a/src/pages/servicios.astro
+++ b/src/pages/servicios.astro
@@ -1,137 +1,8 @@
 ---
 import Layout from "../layouts/Layout.astro";
-import { Image } from "astro:assets";
-import imgOne from "../images/mobile_pay.svg";
-import imgTwo from "../images/codigo_qr.png";
-import imgThree from "../images/chat_bot.svg";
-import imgFour from "../images/services.svg";
-import imgFive from "../images/nfc.png";
+import ServiciosComponent from "../components/Servicios.astro"
 ---
 
 <Layout title="La cámara de la gente">
-  <section class="my-32 sm:pb-20 mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
-    <h2
-      class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl text-center px-2"
-    >
-      Casos de uso
-    </h2>
-    <p class="my-5 text-lg/7 font-medium text-gray-950 text-center">
-      La Cámara de la Gente impulsa los pagos digitales entre dispositivos
-      móviles de clientes de entidades, de manera eficiente y segura.
-    </p>
-    <div class="grid log:grid-cols-3 gap-4 mt-10">
-      <div
-        class="lg:row-span-2 bg-white rounded-lg shadow ring-1 ring-black/5 lg:rounded-tl-[2rem]"
-      >
-        <div class="px-8 pb-3 pt-8 sm:px-10 sm:pb-0 sm:pt-10">
-          <p
-            class="mt-2 text-lg/7 font-medium text-gray-950 max-lg:text-center"
-          >
-            Transferencias G2P
-          </p>
-          <p class="mt-2 max-w-lg text-gray-600 max-lg:text-center">
-            Una entidad gubernamental puede pagar apoyos directo a clientes de
-            una entidad ruteando las transacciones con el número celular de los
-            clientes
-          </p>
-          <Image
-            src={imgOne}
-            alt="Red para Ahorro y Crédito Popular"
-            loading="eager"
-            class="h-full w-full my-10"
-          />
-        </div>
-      </div>
-      <div class="bg-white rounded-lg shadow ring-1 ring-black/5">
-        <div class="px-8 pb-3 pt-8 sm:px-10 sm:pb-0 sm:pt-10">
-          <p
-            class="mt-2 text-lg/7 font-medium text-gray-950 max-lg:text-center"
-          >
-            Transferencias P2P
-          </p>
-          <p class="mt-2 max-w-lg text-gray-600 max-lg:text-center">
-            Un cliente de una entidad puede pagar al cliente de otra entidad,
-            usando su teléfono celular (mediante App, QR, NFC)
-          </p>
-
-          <div class="flex justify-center sm:justify-start">
-            <Image
-              src={imgTwo}
-              alt="Red para Ahorro y Crédito Popular"
-              loading="eager"
-              class="h-20 w-20 my-7"
-            />
-          </div>
-        </div>
-      </div>
-      <div
-        class="lg:row-span-2 bg-white rounded-lg shadow ring-1 ring-black/5 lg:rounded-tr-[2rem]"
-      >
-        <div class="px-8 pb-3 pt-8 sm:px-10 sm:pb-0 sm:pt-10">
-          <p
-            class="mt-2 text-lg/7 font-medium text-gray-950 max-lg:text-center"
-          >
-            Transferencias PISP
-          </p>
-          <p class="mt-2 max-w-lg text-gray-600 max-lg:text-center">
-            Un cliente de una entidad que no tiene su propia app, puede utilizar
-            el servicio de la Cámara para iniciar pagos sin necesidad de una app
-            propia de la entidad
-          </p>
-          <Image
-            src={imgFour}
-            alt="Red para Ahorro y Crédito Popular"
-            loading="eager"
-            class="h-full w-full mt-20"
-          />
-        </div>
-      </div>
-      <div class="bg-white rounded-lg shadow ring-1 ring-black/5">
-        <div class="px-8 pb-3 pt-8 sm:px-10 sm:pb-0 sm:pt-10">
-          <p
-            class="mt-2 text-lg/7 font-medium text-gray-950 max-lg:text-center"
-          >
-            Transferencias P2B
-          </p>
-          <p class="mt-2 max-w-lg text-gray-600 max-lg:text-center">
-            Un cliente de una entidad puede pagar a un negocio cliente de otra
-            entidad, usando su teléfono celular (mediante App, QR, NFC).
-          </p>
-          <div class="flex justify-center sm:justify-start">
-            <Image
-              src={imgFive}
-              alt="Red para Ahorro y Crédito Popular"
-              loading="eager"
-              class="h-20 w-20 my-7"
-            />
-          </div>
-        </div>
-      </div>
-
-      <div
-        class="lg:col-span-3 bg-white rounded-lg shadow ring-1 ring-black/5 lg:rounded-b-[2rem]"
-      >
-        <div class="px-8 pt-8 grid lg:grid-cols-2 gap-32 pb-10">
-          <div>
-            <p
-              class="mt-2 text-lg/7 font-medium text-gray-950 max-lg:text-center"
-            >
-              Corresponsalías
-            </p>
-            <p class="mt-2 max-w-lg text-gray-600 max-lg:text-center">
-              Un cliente de una entidad puede ofrecer el servicio de
-              corresponsalía (cash-in, cash-out, pago de servicios/tiempo aire)
-              a otros clientes de esa u otras entidades.
-            </p>
-          </div>
-          <Image
-            src={imgThree}
-            alt="Red para Ahorro y Crédito Popular"
-            loading="eager"
-            class="h-44 w-auto"
-          />
-        </div>
-      </div>
-    </div>
-  </section>
+  <ServiciosComponent />
 </Layout>
diff --git a/src/pages/tecnologia.astro b/src/pages/tecnologia.astro
index 0b24800..d13ee88 100644
--- a/src/pages/tecnologia.astro
+++ b/src/pages/tecnologia.astro
@@ -1,145 +1,8 @@
 ---
 import Layout from "../layouts/Layout.astro";
-import { Image } from "astro:assets";
-import diagramOne from "../images/diagram_1.jpg";
-import diagramTwo from "../images/diagram_2.jpg";
-import diagramThree from "../images/diagram_3.jpg";
+import TecnologiaComponent from "../components/Tecnologia.astro";
 ---
 
 <Layout title="La Cámara de la Gente">
-  <section class="mx-auto max-w-7xl my-16 md:px-10 md:py-20">
-    <h2 class="font-bold md:text-5xl my-5 text-center">Tecnología</h2>
-    <p class="text-s sm:text-base text-center">
-      La Cámara de la Gente implementa software financiero de última generación
-      basado en código abierto, que utiliza tecnologías de transferencia
-      eficientes y seguras, dando prioridad a la privacidad de la información de
-      los participantes y sus clientes.
-    </p>
-
-    <div class="grid lg:grid-cols-3 items-center mt-20 gap-5">
-      <div class="p-10 rounded-md border-t-8 border-primary shadow-md">
-        <h2 class="text-2xl font-bold">VNext</h2>
-        <p class="text-sm text-gray-500 sm:text-base">
-          Para interconectar a las entidades, la Cámara de la Gente utiliza una
-          plataforma de compensación basada en Mojaloop vNext, un software
-          desarrollado por la Fundación Mojaloop para promover la inclusión
-          financiera en todo el mundo.
-          <br /><br />
-          Adaptada al contexto regulatorio mexicano y a las necesidades del sector,
-          la plataforma integra a las entidades financieras como participantes y
-          registra de forma segura las transferencias entre sus clientes y socios.
-          <br /><br />
-          La arquitectura de nuestra plataforma puede resumirse en el siguiente diagrama:
-        </p>
-      </div>
-      <div class="rounded-3xl bg-white p-2 shadow-2xl col-span-2">
-        <p>
-          <Image
-            src={diagramOne}
-            alt="img"
-            class="h-full w-full object-cover overflow-hidden"
-          />
-        </p>
-      </div>
-    </div>
-
-    <div class="grid lg:grid-cols-3 items-center mt-32 gap-5">
-      <div class="rounded-3xl bg-white p-2 shadow-2xl col-span-2">
-        <p>
-          <Image
-            src={diagramTwo}
-            alt="img"
-            class="h-full w-full object-cover overflow-hidden"
-          />
-        </p>
-      </div>
-
-      <div class="p-10 rounded-md border-t-8 border-primary shadow-md">
-        <h2 class="text-2xl font-bold">Rafiki</h2>
-        <p class="text-sm text-gray-500 sm:text-base">
-          Para ofrecer remesas internacionales, la Cámara de la Gente integra un
-          Transmisor de Dinero, el cual utiliza la tecnología Rafiki de la
-          Fundación Interledger para registrar obligaciones de pago viniendo de
-          entidades en el extranjero en tiempo real, siguiendo los estándares
-          nacionales e internacionales de PLD.
-          <br /><br />
-          Para poder gestionar transferencias instantáneas, el Transmisor convierte
-          las instrucciones de pago Rafiki en instrucciones de pago de la plataforma
-          de compensación vNext, que son acreditadas en cuestión de segundos en las
-          cuentas de clientes y socios de las entidades correspondientes.
-          <br /><br />
-          El proceso del Transmisor de Dinero Rafiki puede resumirse en el siguiente
-          diagrama:
-        </p>
-      </div>
-    </div>
-
-    <div class="grid lg:grid-cols-3 items-center mt-32 gap-2 rounded-2xl mb-2">
-      <div class="p-10 rounded-md border-t-8 border-primary shadow-md">
-        <h2 class="text-2xl font-bold">Seguridad</h2>
-        <p class="text-sm text-gray-500 sm:text-base">
-          La Cámara de la Gente implementa tecnologías de punta en cuanto a
-          seguridad de la información para resguardar la privacidad, fiabilidad
-          e inmutabilidad de las instrucciones de pago que pasan por su
-          plataforma. 
-          <br><br>
-          En particular, la Cámara de la Gente implementa:
-        </p>
-      </div>
-
-      <div class="rounded-3xl text-center col-span-2 py-3">
-        <div class="grid grid-cols-3 gap-2">
-          <div class="shadow-md rounded-md p-5">
-            <h2 class="font-bold">mTLS</h2>
-            <p class="text-sm text-gray-500 sm:text-base">
-              Protocolo de capa de transporte que autentica tanto al cliente
-              como al servidor de forma segura.
-            </p>
-          </div>
-          <div class="shadow-md rounded-md p-5">
-            <h2 class="font-bold">OAuth 2.0</h2>
-            <p class="text-sm text-gray-500 sm:text-base">
-              Protocolo que establece un framework de autorización
-              para delegar accesos a recursos específicos.
-            </p>
-          </div>
-          <div class="shadow-md rounded-md p-5">
-            <h2 class="font-bold">JWT (JSON Web Tokens)</h2>
-            <p class="text-sm text-gray-500 sm:text-base">
-              Estándar para utilizar tokens con el fin de
-              autenticar el intercambio de información.
-            </p>
-          </div>
-        </div>
-        <div class="grid grid-cols-2 mt-5 gap-2">
-          <div class="shadow-md rounded-md p-5">
-            <h2 class="font-bold">RBAC (Role-based Access Control)</h2>
-            <p class="text-sm text-gray-500 sm:text-base">
-              Control de acceso segmentado por roles, mediante certificados de
-              autenticación.
-            </p>
-          </div>
-          <div class="shadow-md rounded-md p-5">
-            <h2 class="font-bold">Marco de trabajo “Zero trust security”</h2>
-            <p class="text-sm text-gray-500 sm:text-base">
-              Requerimiento de que todo usuario y todo servicio de la
-              plataforma, sean autenticados, autorizados y continuamente
-              validados antes de obtener o mantener acceso a aplicaciones e
-              información de cualquier parte de la plataforma.
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="rounded-3xl bg-white p-2 shadow-2xl">
-      <p>
-        <Image
-          src={diagramThree}
-          alt="img"
-          class="h-full w-full object-cover overflow-hidden"
-        />
-      </p>
-    </div>
-  </section>
+  <TecnologiaComponent />
 </Layout>