Mejora gráfica de la web

package.json

@@ -1,7 +1,7 @@
 {
   "name": "websostenible",
   "type": "module",
-  "version": "0.2.7",
+  "version": "0.3.0",
   "scripts": {
     "dev": "astro dev",
     "devhost": "astro dev --host",

src/components/ListadoPostsHorizontal.astro

@@ -6,17 +6,16 @@ const posts = await Astro.glob("../pages/posts/*.mdx");
     {
         posts.slice(0, 3).map((post) => (
             <div class="col-md-4 mb-4 animate-on-scroll">
-                <div class="card">
+                <div class="card h-100">
-                    <div class="card-body">
+                    <div class="card-body d-flex flex-column">
                         <h5 class="card-title">
                             {post.frontmatter.titulo}
                         </h5>
-                        <p class="card-text post-content">
+                        <p class="card-text post-content flex-grow-1">
                             {post.frontmatter.descripcion}
-                            ...
                         </p>
-                        <a href={post.url} class="btn btn-primary">
+                        <a href={post.url} class="btn btn-success mt-auto">
-                            Leer más
+                            Ver detalles
                         </a>
                     </div>
                 </div>
@@ -27,11 +26,28 @@ const posts = await Astro.glob("../pages/posts/*.mdx");
 
 <style>
     .post-content {
-  display: -webkit-box;
+        display: -webkit-box;
-  -webkit-box-orient: vertical;
+        -webkit-box-orient: vertical;
-  overflow: hidden;
+        overflow: hidden;
-  -webkit-line-clamp: 4; /* Limita a 4 líneas */
+        -webkit-line-clamp: 4; /* Limita a 4 líneas */
-  line-height: 1.5; /* Ajusta según el diseño */
+        line-height: 1.5; /* Ajusta según el diseño */
-  max-height: calc(1.5em * 4); /* Calcula la altura máxima */
+        max-height: calc(1.5em * 4); /* Calcula la altura máxima */
-}
+    }
+    .card {
+        transition: transform 0.3s ease, box-shadow 0.3s ease;
+        background: #ffffff;
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+    }
+    .card:hover {
+        transform: translateY(-5px);
+        box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
+    }
+    .btn-success {
+        transition: transform 0.3s ease;
+    }
+    .btn-success:hover {
+        transform: translateX(5px);
+    }
 </style>

src/components/Navbar.astro

@@ -32,7 +32,7 @@ const { home, posts, proyectos } = Astro.props;
           <a type="button" class="nav-link btn btn-light" href={posts ? posts : "/posts"}>Posts</a>
         </li>
         <li class="nav-item">
-          <a type="button" class="nav-link btn btn-light" href={proyectos ? proyectos : "#proyectos"}
+          <a type="button" class="nav-link btn btn-light disabled" href={proyectos ? proyectos : "#proyectos"}
             >Proyectos</a
           >
         </li>

src/pages/index.astro

@@ -84,44 +84,41 @@ const animateOnScroll = `
         </div>
       </div>
     </section>
-
+		<section id="objetivos" class="py-5">
-    <section id="objetivos" class="py-5">
+			<div class="container">
-      <div class="container">
+				<h2 class="text-center mb-5 animate-on-scroll">Nuestros Objetivos Principales</h2>
-        <h2 class="text-center mb-5 animate-on-scroll">Nuestros Objetivos Principales</h2>
+				<div class="row">
-        <div class="row">
+					{
-          {
+						[
-            [
+							{ icon: "fa-chalkboard-teacher", title: "Educación en ODS", description: "Enseñar a la comunidad formas de vida sostenibles que cumplan con los Objetivos de Desarrollo Sostenible." },
-              { icon: "fa-seedling", title: "Vida de Ecosistemas Terrestres", description: "Proteger, restaurar y promover el uso sostenible de los ecosistemas terrestres." },
+							{ icon: "fa-lightbulb", title: "Concienciación Energética", description: "Promover el uso eficiente de la energía en el hogar y el trabajo." },
-              { icon: "fa-hands-holding-circle", title: "Reducción de Desigualdades", description: "Reducir la desigualdad en y entre los países." },
+							{ icon: "fa-handshake", title: "Colaboración Comunitaria", description: "Fomentar la colaboración con organizaciones locales para proyectos sostenibles." },
-              { icon: "fa-graduation-cap", title: "Educación de Calidad", description: "Garantizar una educación inclusiva, equitativa y de calidad." },
+							{ icon: "fa-recycle", title: "Promoción del Reciclaje", description: "Incentivar la separación de residuos y el reciclaje en la comunidad para reducir el impacto ambiental." }
-              { icon: "fa-industry", title: "Industria, Innovación e Infraestructura", description: "Construir infraestructuras resilientes, promover la industrialización inclusiva y sostenible." }
+						].map((obj, index) => (
-            ].map((obj, index) => (
+							<div class="col-md-6 col-lg-3 mb-4 animate-on-scroll">
-              <div class="col-md-6 col-lg-3 mb-4 animate-on-scroll">
+								<div class="card h-100 text-center">
-                <div class="card h-100 text-center">
+									<div class="card-body">
-                  <div class="card-body">
+										<i class={`fa-solid ${obj.icon} fa-3x mb-3 text-primary`} />
-                    <i class={`fa-solid ${obj.icon} fa-3x mb-3 text-primary`} />
+										<h5 class="card-title">{obj.title}</h5>
-                    <h5 class="card-title">{obj.title}</h5>
+										<p class="card-text">{obj.description}</p>
-                    <p class="card-text">{obj.description}</p>
+									</div>
-                  </div>
+								</div>
-                </div>
+							</div>
-              </div>
+						))
-            ))
+					}
-          }
+				</div>
-        </div>
+			</div>
-      </div>
+		</section>
-    </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">
+        <div class="row justify-content-center text-center">
           {
             [
-              { number: "1M+", description: "Personas impactadas" },
+          { number: "100+", description: "Personas a las que hemos concienciado." },
-              { number: "500K", description: "Árboles plantados" },
+          { number: "5+", description: "Proyectos creados para fomentar la sostenibilidad." }
-              { number: "100+", description: "Proyectos completados" },
+        ].map((impact, index) => (
-              { 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>
@@ -131,24 +128,6 @@ const animateOnScroll = `
         </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>