Mejora gráfica de la web

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-body">
+                <div class="card h-100">
+                    <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">
-                            Leer más
+                        <a href={post.url} class="btn btn-success mt-auto">
+                            Ver detalles
                         </a>
                     </div>
                 </div>
@@ -27,11 +26,28 @@ const posts = await Astro.glob("../pages/posts/*.mdx");
 
 <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>
+        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 */
+    }
+    .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>