From c02b3771c3737b4f052967b9eafe2dccb92e43fb Mon Sep 17 00:00:00 2001
From: h4ckx0r <natanagoor@gmail.com>
Date: Wed, 6 Nov 2024 17:52:30 +0100
Subject: [PATCH] =?UTF-8?q?Mejora=20est=C3=A9tica=20y=20participa=20ahora?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ListadoPostsHorizontal.astro |  15 +-
 src/pages/index.astro                       | 502 +++++++++-----------
 src/pages/participa.astro                   | 114 +++++
 3 files changed, 342 insertions(+), 289 deletions(-)
 create mode 100644 src/pages/participa.astro
diff --git a/src/components/ListadoPostsHorizontal.astro b/src/components/ListadoPostsHorizontal.astro
index b4f2325..25681c7 100644
--- a/src/components/ListadoPostsHorizontal.astro
+++ b/src/components/ListadoPostsHorizontal.astro
@@ -11,7 +11,7 @@ const posts = await Astro.glob("../pages/posts/*.mdx");
                         <h5 class="card-title">
                             {post.frontmatter.titulo}
                         </h5>
-                        <p class="card-text">
+                        <p class="card-text post-content">
                             {post.frontmatter.descripcion}
                             ...
                         </p>
@@ -23,4 +23,15 @@ const posts = await Astro.glob("../pages/posts/*.mdx");
             </div>
         ))
     }
-</div>
\ No newline at end of file
+</div>
+
+<style>
+    .post-content {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  -webkit-line-clamp: 4; /* Limita a 4 líneas */
+  line-height: 1.5; /* Ajusta según el diseño */
+  max-height: calc(1.5em * 4); /* Calcula la altura máxima */
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 534328c..6b5a0a7 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -24,317 +24,245 @@ const animateOnScroll = `
 ---
 
 <html lang="es">
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<meta name="generator" content={Astro.generator} />
-		<link rel="sitemap" href="/sitemap-index.xml" />
-		<!-- Google tag (gtag.js) -->
-		<script
-			async
-			src="https://www.googletagmanager.com/gtag/js?id=G-1JT18RF3R4"
-		></script>
-		<script>
-			window.dataLayer = window.dataLayer || [];
-			function gtag() {
-				dataLayer.push(arguments);
-			}
-			gtag("js", new Date());
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="generator" content={Astro.generator} />
+  <link rel="sitemap" href="/sitemap-index.xml" />
+  <!-- Google tag (gtag.js) -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=G-1JT18RF3R4"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag() {
+      dataLayer.push(arguments);
+    }
+    gtag("js", new Date());
+    gtag("config", "G-1JT18RF3R4");
+  </script>
+  <meta name="description" content="Tu fuente de información sobre sostenibilidad y los Objetivos de Desarrollo Sostenible (ODS). Descubre cómo contribuir a un futuro más sostenible." />
+  <link rel="icon" type="image/png" href="logo.png" />
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous" />
+  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
+  <title>Ecobjetivos | Tu web de desarrollo Sostenible</title>
+</head>
+<body>
+  <Navbar />
+  <header class="header-bg text-white">
+    <img src={"/imgs/bosqueverde.png"} alt="Bosque Verde" class="video-bg" />
+    <video autoplay muted loop class="video-bg">
+      <source src="/imgs/bosqueverde.mp4" type="video/mp4" />
+      Tu navegador no soporta la reproducción de videos.
+    </video>
 
-			gtag("config", "G-1JT18RF3R4");
-		</script>
-		<meta
-			name="description"
-			content="Tu fuente de información sobre sostenibilidad y los Objetivos de Desarrollo Sostenible (ODS). Descubre cómo contribuir a un futuro más sostenible."
-		/>
-		<link rel="icon" type="image/png" href="logo.png" />
-		<link
-			href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
-			rel="stylesheet"
-			integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
-			crossorigin="anonymous"
-		/>
-		<link
-			href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
-			rel="stylesheet"
-		/>
-		<link
-			rel="stylesheet"
-			href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
-		/>
-		<title>Ecobjetivos | Tu web de desarrollo Sostenible</title>
-	</head>
-	<body>
-		<Navbar />
-		<header class="header-bg text-white">
-			<img
-				src={"/imgs/bosqueverde.png"}
-				alt="Bosque Verde"
-				class="video-bg"
-			/>
-			<video autoplay muted loop class="video-bg">
-				<source src="/imgs/bosqueverde.mp4" type="video/mp4" />
-				Tu navegador no soporta la reproducción de videos.
-			</video>
+    <div class="container text-center">
+      <h1 class="display-1 mb-4 animate__animated animate__fadeInDown londrina-sketch-regular">
+        Ecobjetivos: Sostenibilidad y Desarrollo
+      </h1>
+      <p class="lead mb-5 animate__animated animate__fadeInUp animate__delay-1s">
+        Construyendo juntos un futuro más verde y equitativo
+      </p>
+      <a href="#intro" class="btn btn-lg btn-outline-light animate__animated animate__zoomIn animate__delay-2s">Descubre más</a>
+    </div>
+  </header>
 
-			<div class="container text-center">
-				<h1
-					class="display-1 mb-4 animate__animated animate__fadeInDown londrina-sketch-regular"
-				>
-					Ecobjetivos: Sostenibilidad y Desarrollo
-				</h1>
-				<p
-					class="lead mb-5 animate__animated animate__fadeInUp animate__delay-1s"
-				>
-					Construyendo juntos un futuro más verde y equitativo
-				</p>
-				<a
-					href="#intro"
-					class="btn btn-lg btn-outline-light animate__animated animate__zoomIn animate__delay-2s"
-					>Descubre más</a
-				>
-			</div>
-		</header>
+  <main>
+    <section id="intro" class="py-5 bg-light">
+      <div class="container">
+        <div class="row align-items-center">
+          <div class="col-md-6 animate-on-scroll">
+            <h2 class="display-4 mb-4">¿Qué son los ODS?</h2>
+            <p class="lead">
+              Los Objetivos de Desarrollo Sostenible (ODS) son un llamado universal a la acción para erradicar la pobreza, proteger el planeta y garantizar que todas las personas gocen de paz y prosperidad para 2030. Estos objetivos buscan promover un desarrollo que asegure la sostenibilidad de nuestros recursos y ecosistemas para las futuras generaciones.
+            </p>
+          </div>
+          <div class="col-md-6 animate-on-scroll">
+            <div class="text-white p-5 text-center">
+              <Image src="/imgs/17Objetivos.png" alt="Los 17 Objetivos de Desarrollo Sostenible de la ONU" class="img-thumbnail .img-fluid" width="730" height="450" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
 
-		<main>
-			<section id="intro" class="py-5 bg-light">
-				<div class="container">
-					<div class="row align-items-center">
-						<div class="col-md-6 animate-on-scroll">
-							<h2 class="display-4 mb-4">¿Qué son los ODS?</h2>
-							<p class="lead">
-								Los Objetivos de Desarrollo Sostenible (ODS) son
-								un llamado universal a la acción para erradicar
-								la pobreza, proteger el planeta y garantizar que
-								todas las personas gocen de paz y prosperidad
-								para 2030. Estos objetivos buscan promover un
-								desarrollo que asegure la sostenibilidad de
-								nuestros recursos y ecosistemas para las futuras
-								generaciones.
-							</p>
-						</div>
-						<div class="col-md-6 animate-on-scroll">
-							<div class="text-white p-5 text-center">
-								<Image
-									src="/imgs/17Objetivos.png"
-									alt="Los 17 Objetivos de Desarrollo Sostenible de la ONU"
-									class="img-thumbnail .img-fluid"
-									width="730"
-									height="450"
-								/>
-							</div>
-						</div>
-					</div>
-				</div>
-			</section>
+    <section id="objetivos" class="py-5">
+      <div class="container">
+        <h2 class="text-center mb-5 animate-on-scroll">Nuestros Objetivos Principales</h2>
+        <div class="row">
+          {
+            [
+              { icon: "fa-seedling", title: "Vida de Ecosistemas Terrestres", description: "Proteger, restaurar y promover el uso sostenible de los ecosistemas terrestres." },
+              { icon: "fa-hands-holding-circle", title: "Reducción de Desigualdades", description: "Reducir la desigualdad en y entre los países." },
+              { icon: "fa-graduation-cap", title: "Educación de Calidad", description: "Garantizar una educación inclusiva, equitativa y de calidad." },
+              { icon: "fa-industry", title: "Industria, Innovación e Infraestructura", description: "Construir infraestructuras resilientes, promover la industrialización inclusiva y sostenible." }
+            ].map((obj, index) => (
+              <div class="col-md-6 col-lg-3 mb-4 animate-on-scroll">
+                <div class="card h-100 text-center">
+                  <div class="card-body">
+                    <i class={`fa-solid ${obj.icon} fa-3x mb-3 text-primary`} />
+                    <h5 class="card-title">{obj.title}</h5>
+                    <p class="card-text">{obj.description}</p>
+                  </div>
+                </div>
+              </div>
+            ))
+          }
+        </div>
+      </div>
+    </section>
 
-			<section id="objetivos" class="py-5">
-				<div class="container">
-					<h2 class="text-center mb-5 animate-on-scroll">
-						Nuestros Objetivos Principales
-					</h2>
-					<div class="row">
-						{
-							[
-								"fa-seedling",
-								"fa-hands-holding-circle",
-								"fa-graduation-cap",
-								"fa-industry",
-							].map((icon, index) => (
-								<div class="col-md-6 col-lg-3 mb-4 animate-on-scroll">
-									<div class="card h-100 text-center">
-										<div class="card-body">
-											<i
-												class={`fa-solid ${icon} fa-3x mb-3 text-primary`}
-											/>
-											<h5 class="card-title">
-												Objetivo {index + 1}
-											</h5>
-											<p class="card-text">
-												Descripción del objetivo{" "}
-												{index + 1}
-											</p>
-										</div>
-									</div>
-								</div>
-							))
-						}
-					</div>
-				</div>
-			</section>
+    <section id="impact" class="py-5 bg-success text-white">
+      <div class="container">
+        <h2 class="text-center mb-5 animate-on-scroll">Nuestro Impacto</h2>
+        <div class="row text-center">
+          {
+            [
+              { number: "1M+", description: "Personas impactadas" },
+              { number: "500K", description: "Árboles plantados" },
+              { number: "100+", description: "Proyectos completados" },
+              { number: "50+", description: "Países involucrados" }
+            ].map((impact, index) => (
+              <div class="col-md-3 mb-4 animate-on-scroll">
+                <h3 class="display-4 fw-bold">{impact.number}</h3>
+                <p class="lead">{impact.description}</p>
+              </div>
+            ))
+          }
+        </div>
+      </div>
+    </section>
 
-			<section id="impact" class="py-5 bg-success text-white">
-				<div class="container">
-					<h2 class="text-center mb-5 animate-on-scroll">
-						Nuestro Impacto
-					</h2>
-					<div class="row text-center">
-						{
-							["1M+", "500K", "100+", "50+"].map(
-								(number, index) => (
-									<div class="col-md-3 mb-4 animate-on-scroll">
-										<h3 class="display-4 fw-bold">
-											{number}
-										</h3>
-										<p class="lead">
-											Estadística {index + 1}
-										</p>
-									</div>
-								),
-							)
-						}
-					</div>
-				</div>
-			</section>
+    <section id="gallery" class="py-5">
+      <div class="container">
+        <h2 class="text-center mb-5 animate-on-scroll">Galería de Impacto</h2>
+        <div class="row g-4">
+          {
+            [1, 2, 3, 4, 5, 6].map((num) => (
+              <div class="col-md-4 animate-on-scroll">
+                <div class="bg-light p-4 text-center">
+                  <Image src={`/imgs/imgimp${num}.jpg`} alt={`Imagen de impacto ${num}`} class="img-fluid img-fit" width="10" height="10" />
+                </div>
+              </div>
+            ))
+          }
+        </div>
+      </div>
+    </section>
 
-			<section id="gallery" class="py-5">
-				<div class="container">
-					<h2 class="text-center mb-5 animate-on-scroll">
-						Galería de Impacto
-					</h2>
-					<div class="row g-4">
-						{
-							[1, 2, 3, 4, 5, 6].map((num) => (
-								<div class="col-md-4 animate-on-scroll">
-									<div class="bg-light p-4 text-center">
-										<Image
-											src={`/imgs/imgimp${num}.jpg`}
-											alt={`Imagen de impacto ${num}`}
-											class="img-fluid img-fit"
-											width="10"
-											height="10"
-										/>
-									</div>
-								</div>
-							))
-						}
-					</div>
-				</div>
-			</section>
+    <section id="posts" class="py-5 bg-light">
+      <div class="container">
+        <h2 class="text-center mb-5 animate-on-scroll pt-1">Posts Recientes</h2>
+        <ListadoPostsHorizontal />
+      </div>
+    </section>
 
-			<section id="posts" class="py-5 bg-light">
-				<div class="container">
-					<h2 class="text-center mb-5 animate-on-scroll pt-1">
-						Posts Recientes
-					</h2>
-					<ListadoPostsHorizontal />
-				</div>
-			</section>
+    <section id="proyectos" class="py-5">
+      <div class="container">
+        <h2 class="text-center mb-5 animate-on-scroll pt-2">Nuestros Proyectos</h2>
+        <div class="row">
+          {
+            [
+              { title: "Proyecto Verde", description: "Iniciativa para reforestar áreas urbanas y rurales." },
+              { title: "Educación para Todos", description: "Programa de educación inclusiva en comunidades desfavorecidas." },
+              { title: "Energía Limpia", description: "Desarrollo de tecnologías para energías renovables." },
+              { title: "Agua Limpia", description: "Proyectos para mejorar el acceso al agua potable." }
+            ].map((project, index) => (
+              <div class="col-md-6 mb-4 animate-on-scroll">
+                <div class="card">
+                  <div class="card-body">
+                    <h5 class="card-title" aria-label="Proyecto">{project.title}</h5>
+                    <p class="card-text">{project.description}</p>
+                    <a href="#" class="btn btn-success">Ver detalles</a>
+                  </div>
+                </div>
+              </div>
+            ))
+          }
+        </div>
+      </div>
+    </section>
 
-			<section id="proyectos" class="py-5">
-				<div class="container">
-					<h2 class="text-center mb-5 animate-on-scroll pt-2">
-						Nuestros Proyectos
-					</h2>
-					<div class="row">
-						{
-							[1, 2, 3, 4].map((num) => (
-								<div class="col-md-6 mb-4 animate-on-scroll">
-									<div class="card">
-										<div class="card-body">
-											<h5
-												class="card-title"
-												aria-label="Proyecto"
-											>
-												Proyecto {num}
-											</h5>
-											<p class="card-text">
-												Descripción del proyecto {num} y
-												su impacto en los ODS.
-											</p>
-											<a href="#" class="btn btn-success">
-												Ver detalles
-											</a>
-										</div>
-									</div>
-								</div>
-							))
-						}
-					</div>
-				</div>
-			</section>
-
-			<section id="cta" class="py-5 bg-primary text-white text-center">
-				<div class="container">
-					<h2 class="display-4 mb-4 animate-on-scroll">
-						¡Únete al Cambio!
-					</h2>
-					<p class="lead mb-5 animate-on-scroll">
-						Juntos podemos crear un impacto duradero. Descubre cómo
-						puedes contribuir a los ODS.
-					</p>
-					<a href="#" class="btn btn-lg btn-light animate-on-scroll"
-						>¡Participa ahora!</a
-					>
-				</div>
-			</section>
-		</main>
-
-		<Footer />
-
-		<script
-			src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
-		></script>
-		<script set:html={animateOnScroll} />
-	</body>
-</html>
-
-<style is:global>
+	<section id="cta" class="py-5 bg-primary text-white text-center">
+		<div class="container">
+		  <h2 class="display-4 mb-4 animate-on-scroll">¡Únete al Cambio!</h2>
+		  <p class="lead mb-5 animate-on-scroll">Juntos podemos crear un impacto duradero. Descubre cómo puedes contribuir a los ODS.</p>
+		  <a href="/participa" class="btn btn-lg btn-light animate-on-scroll">¡Participa ahora!</a>
+		</div>
+	  </section>
+	</main>
+  
+	<Footer />
+  
+	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
+	<script set:html={animateOnScroll} />
+  </body>
+  </html>
+  
+  <style is:global>
 	@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:ital@0;1&display=swap");
 	@import url("https://fonts.googleapis.com/css2?family=Londrina+Sketch&display=swap");
-
-	h1,
-	h2,
-	h3,
-	h4,
-	h5,
-	h6,
-	p,
-	a {
-		font-family: "Inter Tight", sans-serif !important;
-		font-optical-sizing: auto;
-		font-weight: 400 !important;
-		font-style: normal;
+  
+	h1, h2, h3, h4, h5, h6, p, a {
+	  font-family: "Inter Tight", sans-serif !important;
+	  font-optical-sizing: auto;
+	  font-weight: 400 !important;
+	  font-style: normal;
 	}
 	.londrina-sketch-regular {
-		font-family: "Londrina Sketch", sans-serif !important;
-		font-weight: 400;
-		font-style: normal;
+	  font-family: "Londrina Sketch", sans-serif !important;
+	  font-weight: 400;
+	  font-style: normal;
 	}
-</style>
-<style>
+  </style>
+  <style>
 	.header-bg {
-		background-color: #4caf50;
-		min-height: 100vh;
-		display: flex;
-		align-items: center;
+	  background-color: #4caf50;
+	  min-height: 100vh;
+	  display: flex;
+	  align-items: center;
 	}
 	.animate-on-scroll {
-		visibility: hidden;
+	  visibility: hidden;
 	}
 	.navbar-brand img {
-		height: 40px;
-		margin-right: 10px;
+	  height: 40px;
+	  margin-right: 10px;
 	}
-
+  
 	.img-fit {
-		width: 100%;
-		height: 200px;
-		object-fit: cover;
-		border-radius: 8px;
+	  width: 100%;
+	  height: 200px;
+	  object-fit: cover;
+	  border-radius: 8px;
 	}
-
+  
 	header {
-		position: relative;
-		overflow: hidden;
+	  position: relative;
+	  overflow: hidden;
 	}
-
+  
 	.video-bg {
-		position: absolute;
+	  position: absolute;
 	}
-
+  
 	.container {
-		position: relative;
-		z-index: 1;
+	  position: relative;
+	  z-index: 1;
 	}
-</style>
+  
+	.btn-outline-light:hover {
+	  background-color: #ffffff;
+	  color: #4caf50;
+	  transition: background-color 0.3s ease, color 0.3s ease;
+	}
+  
+	.card {
+	  transition: transform 0.3s ease, box-shadow 0.3s ease;
+	  background: #ffffff;
+	}
+	.card:hover {
+	  transform: translateY(-5px);
+	  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
+	}
+  </style>
+  
\ No newline at end of file
diff --git a/src/pages/participa.astro b/src/pages/participa.astro
new file mode 100644
index 0000000..f04cb66
--- /dev/null
+++ b/src/pages/participa.astro
@@ -0,0 +1,114 @@
+---
+// Importar componentes existentes
+import Navbar from "../components/Navbar.astro";
+import Footer from "../components/Footer.astro";
+
+// Lista ampliada de mensajes sobre sostenibilidad
+const mensajes = [
+  "¡Únete al cambio! 🌍 Cada acción cuenta para un futuro sostenible.",
+  "La sostenibilidad comienza contigo. Comparte y actúa hoy. 🌱",
+  "Pequeños pasos, grandes cambios. Contribuye a un mundo mejor. 🌿",
+  "La Tierra es nuestro hogar. Protejámosla juntos. 🌎",
+  "Actúa localmente, impacta globalmente. Sé parte del cambio. 🌐",
+  "Cada gota cuenta. Conserva el agua y protege el futuro. 💧",
+  "La energía renovable es el camino hacia un mañana más limpio. ⚡",
+  "Reciclar es más que una acción, es un compromiso. ♻️",
+  "El cambio climático es real. Actúa ahora, no mañana. 🌡️",
+  "La biodiversidad es vida. Presérvala. 🐾",
+  "Compra local, apoya a tu comunidad y reduce tu huella de carbono. 🛒",
+  "La educación es clave para un desarrollo sostenible. 📚",
+  "La naturaleza no necesita a las personas, las personas necesitan a la naturaleza. 🌳",
+  "Invierte en nuestro planeta. Es el único hogar que tenemos. 🏡",
+  "El futuro es verde. Haz tu parte para que así sea. 🌿"
+];
+
+// Función para obtener un mensaje aleatorio
+function obtenerMensajeAleatorio() {
+  return mensajes[Math.floor(Math.random() * mensajes.length)];
+}
+
+// Mensaje inicial
+let mensajeActual = obtenerMensajeAleatorio();
+const urlSitio = Astro.site; // Reemplaza con la URL de tu sitio
+---
+
+<html lang="es">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Participa Ahora | Ecobjetivos</title>
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
+  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet" />
+  <style>
+    body, html {
+      height: 100%;
+      margin: 0;
+      display: flex;
+      flex-direction: column;
+    }
+    .container {
+      flex: 1;
+      padding-top: 60px; /* Ajusta el padding superior para separar del navbar */
+    }
+    footer {
+      margin-top: auto;
+    }
+  </style>
+</head>
+<body>
+  <Navbar />
+
+  <div class="container py-5">
+    <h1 class="text-center mb-4 mt-4">¡Participa Ahora!</h1>
+    <p class="lead text-center mb-5">Descubre cómo puedes contribuir a un futuro sostenible y comparte el mensaje.</p>
+
+    <div class="text-center mb-4">
+      <blockquote class="blockquote">
+        <p id="mensaje" class="mb-0">{mensajeActual}</p>
+      </blockquote>
+      <button class="btn btn-primary mt-3" id="nuevoMensaje">
+        Obtener otro mensaje
+      </button>
+    </div>
+
+    <div class="text-center">
+      <h3>Comparte en tus redes sociales:</h3>
+      <a href={`https://twitter.com/intent/tweet?text=${encodeURIComponent(mensajeActual + " " + urlSitio)}`} target="_blank" class="btn btn-info m-2">
+        <i class="fab fa-twitter"></i> Twitter
+      </a>
+      <a href={`https://www.facebook.com/sharer/sharer.php?u=${urlSitio}&quote=${encodeURIComponent(mensajeActual)}`} target="_blank" class="btn btn-primary m-2">
+        <i class="fab fa-facebook"></i> Facebook
+      </a>
+      <a href={`https://www.linkedin.com/shareArticle?mini=true&url=${urlSitio}&title=Ecobjetivos&summary=${encodeURIComponent(mensajeActual)}`} target="_blank" class="btn btn-secondary m-2">
+        <i class="fab fa-linkedin"></i> LinkedIn
+      </a>
+    </div>
+  </div>
+
+  <Footer />
+
+  <script>
+    document.getElementById('nuevoMensaje').addEventListener('click', () => {
+      const mensajes = [
+        "¡Únete al cambio! 🌍 Cada acción cuenta para un futuro sostenible.",
+        "La sostenibilidad comienza contigo. Comparte y actúa hoy. 🌱",
+        "Pequeños pasos, grandes cambios. Contribuye a un mundo mejor. 🌿",
+        "La Tierra es nuestro hogar. Protejámosla juntos. 🌎",
+        "Actúa localmente, impacta globalmente. Sé parte del cambio. 🌐",
+        "Cada gota cuenta. Conserva el agua y protege el futuro. 💧",
+        "La energía renovable es el camino hacia un mañana más limpio. ⚡",
+        "Reciclar es más que una acción, es un compromiso. ♻️",
+        "El cambio climático es real. Actúa ahora, no mañana. 🌡️",
+        "La biodiversidad es vida. Presérvala. 🐾",
+        "Compra local, apoya a tu comunidad y reduce tu huella de carbono. 🛒",
+        "La educación es clave para un desarrollo sostenible. 📚",
+        "La naturaleza no necesita a las personas, las personas necesitan a la naturaleza. 🌳",
+        "Invierte en nuestro planeta. Es el único hogar que tenemos. 🏡",
+        "El futuro es verde. Haz tu parte para que así sea. 🌿"
+      ];
+      const mensajeActual = mensajes[Math.floor(Math.random() * mensajes.length)];
+      document.getElementById('mensaje').textContent = mensajeActual;
+    });
+  </script>
+</body>
+</html>
