Sección de testimonios (#5)

* Componente de testimonios iniciado

* sección de testimonios terminada y arreglos visuales agregados.

src/components/inicio/Banner.astro

@@ -1,15 +1,14 @@
 ---
 import { Image } from "astro:assets";
 import bannerImage from "../../images/banner.webp";
-import "./banner.css";
 ---
 
-<section class="w-full h-[650px] relative" id="banner">
+<section class="w-full h-[650px] relative mb-20" id="banner">
 	<Image
 		src={bannerImage}
 		alt="imagen"
 		loading="eager"
-		class="-z-20 bg-black h-full absolute right-0 w-3/5 rounded-bl-[200px]"
+		class="-z-20 bg-black h-full absolute right-0 w-3/5 rounded-bl-[200px] grayscale object-cover"
 	/>
 	<div id="filter" class="-z-10 absolute inset-0 bg-gradient"></div>
 	<div class="container m-auto z-30 h-full flex items-center">

src/components/inicio/Testimonials.astro

@@ -0,0 +1,120 @@
+---
+import { Image } from "astro:assets";
+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";
+---
+
+<section id="testimonios" class="w-full mb-20 container m-auto">
+	<h2 class="text-4xl font-bold text-center mb-10">Testimonios</h2>
+
+	<article class="max-w-[60rem] m-auto flex flex-row gap-16 items-center mb-2">
+		<picture class="flex flex-col flex-shrink-0 relative">
+			<div class="text-primary -mb-16">
+				<QuoteLeftIcon width="5rem" height="5rem" />
+			</div>
+			<Image
+				src={elviraConcheiroPhoto}
+				alt="Elvira Concheiro foto"
+				class="bg-red-300 rounded-full object-cover -z-10"
+				width="300"
+				height="300"
+			/>
+			<div
+				class="w-[300px] h-[300px] bg-primary rounded-full absolute -bottom-2 -right-2 -z-20"
+			>
+			</div>
+		</picture>
+
+		<div>
+			<blockquote>
+				<p class="text-lg 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.
+				</p>
+			</blockquote>
+
+			<p class="font-bold text-primary mt-2">
+				Elvira Concheiro <cite class="text-black font-normal"
+					>- Tesorera de la Federación</cite
+				>
+			</p>
+		</div>
+	</article>
+
+	<article class="max-w-[60rem] m-auto flex flex-row-reverse gap-16 items-center mb-2">
+		<picture class="flex flex-col flex-shrink-0 relative">
+			<div class="text-primary -mb-16">
+				<QuoteLeftIcon width="5rem" height="5rem" />
+			</div>
+			<Image
+				src={rocioMejiaPhoto}
+				alt="Elvira Concheiro foto"
+				class="bg-red-300 rounded-full object-cover -z-10"
+				width="300"
+				height="300"
+			/>
+			<div
+				class="w-[300px] h-[300px] bg-primary rounded-full absolute -bottom-2 -right-2 -z-20"
+			>
+			</div>
+		</picture>
+
+		<div>
+			<blockquote>
+				<p class="text-lg text-balance 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.
+				</p>
+			</blockquote>
+
+			<p class="font-bold text-primary mt-2 text-right">
+				Rocío Mejía <cite class="text-black font-normal"
+					>- Directora General de la Financiera para el Bienestar</cite
+				>
+			</p>
+		</div>
+	</article>
+
+	<article class="max-w-[60rem] m-auto flex flex-row gap-16 items-center mb-2">
+		<picture class="flex flex-col flex-shrink-0 relative">
+			<div class="text-primary -mb-16">
+				<QuoteLeftIcon width="5rem" height="5rem" />
+			</div>
+			<Image
+				src={brianaMarbury}
+				alt="Elvira Concheiro foto"
+				class="bg-red-300 rounded-full object-cover -z-10"
+				width="300"
+				height="300"
+			/>
+			<div
+				class="w-[300px] h-[300px] bg-primary rounded-full absolute -bottom-2 -right-2 -z-20"
+			>
+			</div>
+		</picture>
+
+		<div>
+			<blockquote>
+				<p class="text-lg 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.
+				</p>
+			</blockquote>
+
+			<p class="font-bold text-primary mt-2">
+				Briana Marbury <cite class="text-black font-normal"
+					>- Directora general de la Fundación Interledger</cite
+				>
+			</p>
+		</div>
+	</article>
+</section>

src/components/inicio/testimonios.css

@@ -0,0 +1,11 @@
+#testimonios {
+	blockquote p {
+		&::before {
+			content: '“';
+		}
+
+		&::after {
+			content: '”';
+		}
+	}
+}

src/icons/QuoteLeftIcon.astro

@@ -0,0 +1,21 @@
+---
+interface Props {
+	width: string;
+	height: string;
+}
+
+const { width, height } = Astro.props;
+---
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 448 512"
+	width={width}
+	height={height}
+>
+	<!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
+	<path
+		fill="currentColor"
+		d="M0 216C0 149.7 53.7 96 120 96l8 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-8 0c-30.9 0-56 25.1-56 56l0 8 64 0c35.3 0 64 28.7 64 64l0 64c0 35.3-28.7 64-64 64l-64 0c-35.3 0-64-28.7-64-64l0-32 0-32 0-72zm256 0c0-66.3 53.7-120 120-120l8 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-8 0c-30.9 0-56 25.1-56 56l0 8 64 0c35.3 0 64 28.7 64 64l0 64c0 35.3-28.7 64-64 64l-64 0c-35.3 0-64-28.7-64-64l0-32 0-32 0-72z"
+	></path></svg
+>

src/pages/index.astro

@@ -1,5 +1,6 @@
 ---
 import Banner from "../components/inicio/Banner.astro";
+import Testimonials from "../components/inicio/Testimonials.astro";
 import Layout from "../layouts/Layout.astro";
 import Sections from "../components/Sections.astro";
 
@@ -8,4 +9,5 @@ import Sections from "../components/Sections.astro";
 <Layout title="La cámara de la gente">
   <Banner />
   <Sections/>
+  <Testimonials />
 </Layout>

tailwind.config.js

@@ -2,7 +2,13 @@
 export default {
 	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
 	theme: {
-		extend: {},
+		extend: {
+			colors: {
+				'primary': '#2B317B',
+				'secondary': '#5C56A1',
+				'secondary-light': '#6A7DBC',
+			}
+		},
 	},
 	plugins: [],
 }