Mejoras de accesibilidad y SEO

The-Peoples-Clearinghouse · Oct 13, 2024 · f232e0d · f232e0d
1 parent df14a76
commit f232e0d
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 270 deletions.
diff --git a/public/scripts/lite-yt-embed.js b/public/scripts/lite-yt-embed.js
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -1,7 +1,4 @@
 ---
-import InstagramIcon from "../icons/InstagramIcon.astro";
-import FacebookIcon from "../icons/FacebookIcon.astro";
-import XIcon from "../icons/XIcon.astro";
 import EarthIcon from "../icons/EarthIcon.astro";
 import { Image } from "astro:assets";
 import logoImage from "../images/logo_pch_blanco.png";
@@ -20,22 +17,23 @@ import logoImage from "../images/logo_pch_blanco.png";
 				alt="Logo la cámara de la gente PCH"
 				width="52"
 				height="52"
+				loading="eager"
 			/>
-			<p>Cámara de la Gente</p>
+			<p class="hidden lg:block">Cámara de la Gente</p>
 		</picture>
 
-		<button id="header_burger" class="flex flex-col gap-[6px] lg:hidden">
+		<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>
 		</button>
 		<div
 			id="header_options"
-			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 lg:py-0 lg:bg-inherit lg:w-auto lg:h-auto lg:static lg:flex-row lg:pt-0"
+			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-3 items-center lg:flex-row lg:gap-1"
+					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>
@@ -68,30 +66,6 @@ import logoImage from "../images/logo_pch_blanco.png";
 				</ul>
 			</nav>
 
-			<div class="flex gap-2">
-				<a
-					href="https://www.instagram.com/camaradelagente/"
-					aria-label="Instagram de la camara de la gente"
-					target="_blank"
-				>
-					<InstagramIcon width="1.2rem" height="1.2rem" />
-				</a>
-				<a
-					href="https://www.facebook.com/CamaraDeLaGente/"
-					aria-label="Facebook de la camara de la gente"
-					target="_blank"
-				>
-					<FacebookIcon width="1.2rem" height="1.2rem" />
-				</a>
-				<a
-					href="https://x.com/CamaraGente"
-					aria-label="X twitter de la camara de la gente"
-					target="_blank"
-				>
-					<XIcon width="1.2rem" height="1.2rem" />
-				</a>
-			</div>
-
 			<button role="button" class="flex gap-1 items-center">
 				<EarthIcon width="1.2rem" height="1.2rem" />
 				<p class="pt-[1px]">ES</p>

diff --git a/src/components/inicio/Objetives.astro b/src/components/inicio/Objetives.astro
@@ -14,36 +14,36 @@ import CommentsIcon from "../../icons/CommentsIcon.astro";
   </h2>
   <div class="container mx-auto px-16 lg:px-4 flex flex-col lg:flex-row gap-12">
     <div class="basis-1/3">
-      <dt class="text-base font-semibold leading-7 text-gray-900">
+      <p class="text-base font-semibold leading-7 text-gray-900">
         <CommentsIcon width="2.5rem" height="2.5rem" />
         Poder colectivo
-      </dt>
-      <dd class="mt-2 text-base leading-7 text-gray-900">
+      </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.
-      </dd>
+      </p>
     </div>
 
     <div class="basis-1/3">
-      <dt class="text-base font-semibold leading-7 text-gray-900">
+      <p class="text-base font-semibold leading-7 text-gray-900">
         <BillIcon width="2.5rem" height="2.5rem" />
         Poder inclusivo
-      </dt>
-      <dd class="mt-2 text-base leading-7 text-gray-900">
+      </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.
-      </dd>
+      </p>
     </div>
 
     <div class="basis-1/3">
-      <dt class="text-base font-semibold leading-7 text-gray-900">
+      <p class="text-base font-semibold leading-7 text-gray-900">
         <RocketIcon width="2.5rem" height="2.5rem" />
         Poder estratégico
-      </dt>
-      <dd class="mt-2 text-base leading-7 text-gray-900">
+      </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.
-      </dd>
+      </p>
     </div>
   </div>
 </section>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -1,5 +1,5 @@
 ---
-// Logo font
+// header font
 import "@fontsource-variable/comfortaa";
 
 import "../styles/global.css";
@@ -18,6 +18,7 @@ const { title } = Astro.props;
     <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">
     <title>{title}</title>
   </head>
   <body class="bg-gray-100 text-gray-800">