Arreglo posts horizontales

astro.config.mjs

@@ -1,12 +1,14 @@
 import { defineConfig } from 'astro/config';
-
 import mdx from '@astrojs/mdx';
-
 import sitemap from '@astrojs/sitemap';
+import tailwindcss from "@tailwindcss/vite";
 
 // https://astro.build/config
 export default defineConfig({
     // Enable Svelte to support Svelte components.
     integrations: [mdx(), sitemap()],
-    site: "https://ecobjetivos.h4ckdata.es"
+    site: "https://ecobjetivos.h4ckdata.es",
+    vite: {
+        plugins: [tailwindcss()],
+    },
 });

package.json

@@ -11,8 +11,12 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/mdx": "^4.0.8",
+    "@astrojs/mdx": "^4.2.1",
-    "@astrojs/sitemap": "^3.2.1",
+    "@astrojs/sitemap": "^3.3.0",
-    "astro": "^5.3.1"
+    "@tailwindcss/vite": "^4.0.12",
+    "astro": "^5.5.4"
+  },
+  "devDependencies": {
+    "daisyui": "^5.0.0"
   }
 }

src/components/Footer.astro

@@ -1,4 +1,3 @@
-
 <footer class="bg-dark text-white py-4">
     <div class="container">
         <div class="row">
@@ -9,18 +8,20 @@
                 </p>
             </div>
             <div class="col-md-6 text-center text-md-end">
-                <a href="#" class="text-white me-2"
+                <a href="#" class="text-white me-2 text-decoration-none">
-                    ><i class="fab fa-facebook-f"></i></a
+                    <i class="fab fa-facebook-f"></i>
-                >
+                </a>
-                <a href="#" class="text-white me-2"
+                <a href="#" class="text-white me-2 text-decoration-none">
-                    ><i class="fab fa-twitter"></i></a
+                    <i class="fab fa-twitter"></i>
-                >
+                </a>
-                <a href="#" class="text-white me-2"
+                <a href="#" class="text-white me-2 text-decoration-none">
-                    ><i class="fab fa-instagram"></i></a
+                    <i class="fab fa-instagram"></i>
-                >
+                </a>
-                <a href="#" class="text-white"
+                <a href="#" class="text-white me-2 text-decoration-none">
-                    ><i class="fab fa-linkedin-in"></i></a
+                    <i class="fab fa-linkedin-in"></i>
-                >
+                </a>
+                |
+                <a href="/contacto" class="text-light ms-2 text-decoration-none">Contacto</a>
             </div>
         </div>
     </div>

src/components/ListadoPostsHorizontal.astro

@@ -1,51 +1,57 @@
 ---
 import { getCollection } from "astro:content";
 const posts = await getCollection("posts");
+// Selecciona 3 posts aleatorios
+const selectedPosts = posts.sort(() => Math.random() - 0.5).slice(0, 3);
 ---
-
+<div class="flex flex-wrap justify-center -mx-2">
-<div class="row">
+{
-    {
+selectedPosts.map((post) => (
-        posts.slice(0, 3).map((post) => (
+<div class="w-full md:w-1/3 p-2 mb-4 animate-on-scroll">
-            <div class="col-md-4 mb-4 animate-on-scroll">
+  <div class="card relative overflow-hidden bg-gradient-to-b from-neutral/80 to-neutral/90 dark:from-base-100/80 dark:to-base-100/90 shadow-lg h-full">
-                <div class="card h-100">
+    <div class="absolute inset-0 z-0">
-                    <div class="card-body d-flex flex-column">
+      <div class="aspect-[16/9] overflow-hidden">
-                        <h5 class="card-title">
+        <img
-                            {post.data.titulo}
+          src={post.data.imagen}
-                        </h5>
+          class="w-full h-full object-cover opacity-40 dark:opacity-50"
-                        <p class="card-text post-content flex-grow-1">
+          alt={post.data.titulo}
-                            {post.data.descripcion}
+        />
-                        </p>
+      </div>
-                        <a href={"/posts/" + post.id} class="btn btn-success mt-auto">
+      <div class="absolute inset-0 bg-black/40 dark:bg-black/30"></div>
-                            Ver detalles
+    </div>
-                        </a>
+    <div class="relative z-10 flex flex-col p-6 h-full">
-                    </div>
+      <h5 class="text-xl font-bold mb-3 text-white dark:text-base-content">
-                </div>
+        {post.data.titulo}
-            </div>
+      </h5>
-        ))
+      <p class="text-base mb-4 text-white/90 dark:text-base-content/80 line-clamp-3">
-    }
+        {post.data.descripcion}
+      </p>
+      <a
+        href={"/posts/" + post.id}
+        class="btn btn-primary w-full mt-auto"
+      >
+        Leer post
+      </a>
+    </div>
+  </div>
+</div>
+ ))
+}
 </div>
-
 <style>
-    .post-content {
+.card {
-        display: -webkit-box;
+  transition: 
-        -webkit-box-orient: vertical;
+    transform 0.3s ease,
-        overflow: hidden;
+    box-shadow 0.3s ease;
-        -webkit-line-clamp: 4; /* Limita a 4 líneas */
+}
-        line-height: 1.5; /* Ajusta según el diseño */
+.card:hover {
-        max-height: calc(1.5em * 4); /* Calcula la altura máxima */
+  transform: translateY(-5px);
-    }
+  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.15) !important;
-    .card {
+}
-        transition: transform 0.3s ease, box-shadow 0.3s ease;
+.line-clamp-3 {
-        background: #ffffff;
+  display: -webkit-box;
-        display: flex;
+  -webkit-line-clamp: 3;
-        flex-direction: column;
+  -webkit-box-orient: vertical;
-        height: 100%;
+  overflow: hidden;
-    }
+}
-    .card:hover {
-        transform: translateY(-5px);
-        box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
-    }
-    .btn-success {
-        transition: transform 0.3s ease;
-    }
 </style>

src/components/Navbar.astro

@@ -1,48 +1,42 @@
 ---
 import { Image } from "astro:assets";
 const { home, posts, proyectos } = Astro.props;
+import "../styles/global.css";
 ---
 
-<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
+<head>
-  <div class="container">
+  <meta charset="utf-8" />
-    <a class="navbar-brand d-flex align-items-center" href={home ? home : "/"}>
+</head>
-      <Image
-        src="/logo.png"
-        alt="Logo Ecobjetivos"
-        class="me-2 biglogo"
-        height="25"
-        width="25"
-      />
-      &nbsp Ecobjetivos
-    </a>
-    <button
-      class="navbar-toggler"
-      type="button"
-      data-bs-toggle="collapse"
-      data-bs-target="#navbarNav"
-      aria-controls="navbarNav"
-      aria-expanded="false"
-      aria-label="Toggle navigation"
-    >
-      <span class="navbar-toggler-icon"></span>
-    </button>
-    <div class="collapse navbar-collapse" id="navbarNav">
-      <ul class="navbar-nav ms-auto">
-        <li class="nav-item">
-          <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 disabled" href={proyectos ? proyectos : "#proyectos"}
-            >Proyectos</a
-          >
-        </li>
-      </ul>
-    </div>
-  </div>
-</nav>
 
-<style>
+<main>
-  .biglogo {
+  <nav class="navbar bg-base-100 fixed top-0 z-50 shadow-lg">
-    scale: 1.5;
+    <div class="navbar-start">
-  }
+      <a class="btn btn-ghost normal-case text-xl" href={home ? home : "/"}>
-</style>
+        <Image src="/logo.png" alt="Logo Ecobjetivos" class="mr-2" height="25" width="25" />
+        Ecobjetivos
+      </a>
+    </div>
+    <div class="navbar-end">
+      <!-- Mobile Dropdown -->
+      <div class="dropdown lg:hidden">
+        <label tabindex="0" class="btn btn-ghost">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+          </svg>
+        </label>
+        <ul tabindex="0" class="menu menu-compact dropdown-content mt-3 p-2 shadow bg-base-100 rounded-box w-52">
+          <li><a href={posts ? posts : '/posts'}>Posts</a></li>
+          <li><a href={proyectos ? proyectos : '/proyectos'}>Proyectos</a></li>
+        </ul>
+      </div>
+      <!-- Desktop Menu -->
+      <div class="hidden lg:flex">
+        <ul class="menu menu-horizontal p-0">
+          <li><a href={posts ? posts : '/posts'} class="hover:scale-105 transition-transform">Posts</a></li>
+          <li><a href={proyectos ? proyectos : '/proyectos'} class="hover:scale-105 transition-transform">Proyectos</a></li>
+        </ul>
+      </div>
+    </div>
+  </nav>
+  
+</main>

src/layouts/PostStyle.astro

@@ -1,261 +0,0 @@
----
-import RelatedPosts from "../components/PostsRelacionados.astro"; // Componente para posts relacionados
-import Navbar from "../components/Navbar.astro";
-import Footer from "../components/Footer.astro";
-
-const { frontmatter } = Astro.props;
-const headings = Astro.props.headings;
-const description = frontmatter.descripcion;
-
-// URLs para compartir en redes sociales
-const shareUrl = new URL(Astro.url.pathname, Astro.site).toString();
-const facebookShareUrl = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(shareUrl)}`;
-const twitterShareUrl = `https://twitter.com/intent/tweet?url=${encodeURIComponent(shareUrl)}&text=${encodeURIComponent(frontmatter.titulo)}`;
-const linkedinShareUrl = `https://www.linkedin.com/shareArticle?mini=true&url=${encodeURIComponent(shareUrl)}&title=${encodeURIComponent(frontmatter.titulo)}`;
-
-const blogJsonLd = {
-    "@context": "https://schema.org",
-    "@type": "BlogPosting",
-    "headline": frontmatter.titulo,
-    "image": frontmatter.imagen && new URL(frontmatter.imagen, Astro.site),
-    "datePublished": frontmatter.fecha,
-    "dateModified": frontmatter.fecha,
-    "author": {
-        "@type": "Person",
-        "name": frontmatter.autor
-    },
-    "publisher": {
-        "@type": "Organization",
-        "name": "Ecobjetivos",
-        "logo": {
-            "@type": "ImageObject",
-            "url": new URL('/logo.png', Astro.site)
-        }
-    },
-    "description": description
-};
----
-
-<html lang="es">
-    <head>
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>{frontmatter.titulo} - Ecobjetivos</title>
-        <link rel="icon" type="image/png" href="logo.png" />
-        <meta name="description" content={description} />
-        <link rel="canonical" href={new URL(Astro.url.pathname, Astro.site).toString()} />
-
-        <!-- Open Graph / Facebook -->
-        <meta property="og:type" content="article" />
-        <meta property="og:url" content={Astro.url} />
-        <meta property="og:title" content={frontmatter.titulo} />
-        <meta property="og:description" content={description} />
-        <meta property="og:image" content={frontmatter.imagen && new URL(frontmatter.imagen, Astro.site)} />
-
-        <!-- Twitter -->
-        <meta property="twitter:card" content="summary_large_image" />
-        <meta property="twitter:url" content={Astro.url} />
-        <meta property="twitter:title" content={frontmatter.titulo} />
-        <meta property="twitter:description" content={description} />
-        <meta property="twitter:image" content={frontmatter.imagen && new URL(frontmatter.imagen, Astro.site)} />
-
-        <!-- 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>
-
-        <!-- Structured Data for Google -->
-        <script type="application/ld+json" set:html={JSON.stringify(blogJsonLd)} />
-
-        <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" />
-        <style>
-            body {
-                font-family: "Arial", sans-serif;
-                line-height: 1.6;
-                color: #333;
-            }
-            .post-header {
-                background-color: #4caf50;
-                color: white;
-                padding: 2rem 0;
-            }
-            .post-content {
-                font-size: 1.1rem;
-            }
-            .post-content img {
-                max-width: 100%;
-                height: auto;
-                margin: 1.5rem 0;
-            }
-            .post-meta {
-                font-size: 0.9rem;
-                margin: 0px !important;
-            }
-            blockquote {
-                background-color: #f9f9f9;
-                border-left: 5px solid #4caf50;
-                padding: 1rem;
-                margin: 1rem 0;
-                font-style: italic;
-            }
-            .table-of-contents {
-                background-color: #f8f9fa;
-                border-radius: 10px;
-                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-                border: 1px solid #e9ecef;
-            }
-            .table-of-contents h4 {
-                color: #2c3e50;
-                border-bottom: 2px solid #4caf50;
-                font-size: 1.2rem;
-            }
-            .table-of-contents ul {
-                list-style-type: none;
-                padding-left: 0;
-            }
-            .table-of-contents a {
-                color: #495057;
-                text-decoration: none;
-                display: block;
-                border-radius: 5px;
-                transition: all 0.2s ease;
-                font-size: 0.9rem;
-                position: relative;
-            }
-            .table-of-contents a:hover {
-                color: #4caf50;
-                background-color: #e8f5e9;
-                padding-left: 0.6rem;
-            }
-            /* Estilos para la indentación visual */
-            .toc-level-2 { padding-left: 1.1rem; }
-            .toc-level-3 { padding-left: 2.1rem; }
-            .toc-level-4 { padding-left: 3.1rem; }
-            .toc-level-5 { padding-left: 4.1rem; }
-            .toc-level-6 { padding-left: 5.1rem; }
-            /* Líneas verticales para la indentación */
-            .toc-level-2,
-            .toc-level-3,
-            .toc-level-4,
-            .toc-level-5,
-            .toc-level-6 {
-                border-left: 2px solid #e9ecef;
-                margin-left: 0.5rem;
-            }
-            html { scroll-padding-top: 70px; }
-            img { max-width: 100%; height: auto; }
-        </style>
-    </head>
-    <body>
-        <Navbar proyectos="/" />
-
-        <header class="post-header">
-            <div class="container">
-                <h1 class="display-4">{frontmatter.titulo}</h1>
-            </div>
-        </header>
-
-        <main class="container my-5">
-            <div class="row">
-                <div class="col-lg-8">
-                    <article class="post-content" data-bs-spy="scroll" data-bs-target="#toc" data-bs-offset="70" tabindex="0">
-                        <slot />
-                    </article>
-                </div>
-                <div class="col-lg-4">
-                    <aside class="sticky-top" style="top: 5rem;">
-                        <div class="d-none d-lg-block">
-                            <!-- Se añade el id "toc" para ser usado por scrollspy -->
-                            <div id="toc" class="table-of-contents p-3 mb-4">
-                                <h4 class="mb-3 pb-2 fw-bold">Contenido</h4>
-                                <ul class="m-0">
-                                    {headings.map((heading) => (
-                                        <li class={`mb-2 toc-level-${heading.depth}`}>
-                                            <a href={`#${heading.slug}`} class="py-1 px-2">
-                                                {heading.text}
-                                            </a>
-                                        </li>
-                                    ))}
-                                </ul>
-                            </div>
-                        </div>
-                        <div class="card mb-4">
-                            <div class="card-body">
-                                <p class="post-meta">
-                                    <i class="fas fa-calendar-alt"></i>
-                                    {new Date(frontmatter.fecha).toLocaleDateString("es-ES", {
-                                        year: "numeric",
-                                        month: "long",
-                                        day: "numeric",
-                                    })}
-                                    &nbsp;|&nbsp;
-                                    <i class="fas fa-user"></i>
-                                    {frontmatter.autor}
-                                </p>
-                            </div>
-                        </div>
-                        <div class="card">
-                            <div class="card-body">
-                                <h5 class="card-title">Compartir</h5>
-                                <a
-                                    href={facebookShareUrl}
-                                    target="_blank"
-                                    rel="noopener noreferrer"
-                                    class="btn btn-primary me-2"
-                                >
-                                    <i class="fab fa-facebook-f fa-fw"></i>
-                                </a>
-                                <a
-                                    href={twitterShareUrl}
-                                    target="_blank"
-                                    rel="noopener noreferrer"
-                                    class="btn btn-info me-2"
-                                >
-                                    <i class="fab fa-twitter fa-fw"></i>
-                                </a>
-                                <a
-                                    href={linkedinShareUrl}
-                                    target="_blank"
-                                    rel="noopener noreferrer"
-                                    class="btn btn-secondary"
-                                >
-                                    <i class="fab fa-linkedin-in fa-fw"></i>
-                                </a>
-                            </div>
-                        </div>
-                    </aside>
-                </div>
-            </div>
-
-            <RelatedPosts currentPost={frontmatter} />
-        </main>
-
-        <Footer />
-
-        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
-    </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;
-    }
-    .londrina-sketch-regular {
-        font-family: "Londrina Sketch", sans-serif !important;
-        font-weight: 400;
-        font-style: normal;
-    }
-</style>

src/pages/contacto.astro

@@ -0,0 +1,125 @@
+---
+import Footer from "../components/Footer.astro";
+import Navbar from "../components/Navbar.astro";
+
+const animateOnScroll = `
+  document.addEventListener('DOMContentLoaded', () => {
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          entry.target.classList.add('animate__animated', 'animate__fadeIn');
+          entry.target.style.visibility = 'visible';
+        }
+      });
+    });
+
+    document.querySelectorAll('.animate-on-scroll').forEach(el => {
+      observer.observe(el);
+    });
+  });
+`;
+---
+
+<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" />
+        <meta
+            name="description"
+            content="Contacta con nosotros para cualquier duda sobre sostenibilidad y los Objetivos de Desarrollo Sostenible (ODS)."
+        />
+        <link rel="icon" type="image/png" href="logo.png" />
+        <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>Contacto | Ecobjetivos</title>
+    </head>
+    <body>
+        <div class="page-container">
+        <Navbar />
+
+        <main class="container py-5">
+            <h1 class="text-center mt-4 mb-5 animate__animated animate__fadeInDown">Contacta con Nosotros</h1>
+            
+            <div class="row justify-content-center">
+                <div class="col-md-8">
+                    <div class="card shadow-lg animate-on-scroll">
+                        <div class="card-body p-5">
+                            <div class="row mb-4 justify-content-center">
+                                <div class="col-md-6 mb-4 mb-md-0">
+                                    <div class="text-center">
+                                        <i class="fas fa-envelope fa-3x text-primary mb-3"></i>
+                                        <h3>Email</h3>
+                                        <p>Escríbenos a:</p>
+                                        <a href="mailto:ecobjetivos@h4ckdata.es" class="btn btn-primary">
+                                            ecobjetivos@h4ckdata.es
+                                        </a>
+                                    </div>
+                                </div>
+<!--                                 <div class="col-md-6">
+                                    <div class="text-center">
+                                        <i class="fab fa-discord fa-3x text-primary mb-3"></i>
+                                        <h3>Discord</h3>
+                                        <p>Únete a nuestra comunidad:</p>
+                                        <a href="https://discord.gg/tuenlace" class="btn btn-primary">
+                                            Servidor de Discord
+                                        </a>
+                                    </div>
+                                </div> -->
+                            </div>
+<!-- 
+                            <hr class="my-5" />
+
+                            <form class="animate-on-scroll">
+                                <h3 class="text-center mb-4">O envíanos un mensaje directamente</h3>
+                                <div class="mb-3">
+                                    <label for="nombre" class="form-label">Nombre</label>
+                                    <input type="text" class="form-control" id="nombre" required />
+                                </div>
+                                <div class="mb-3">
+                                    <label for="email" class="form-label">Email</label>
+                                    <input type="email" class="form-control" id="email" required />
+                                </div>
+                                <div class="mb-3">
+                                    <label for="asunto" class="form-label">Asunto</label>
+                                    <input type="text" class="form-control" id="asunto" required />
+                                </div>
+                                <div class="mb-3">
+                                    <label for="mensaje" class="form-label">Mensaje</label>
+                                    <textarea class="form-control" id="mensaje" rows="5" required></textarea>
+                                </div>
+                                <div class="text-center">
+                                    <button type="submit" class="btn btn-primary btn-lg">Enviar Mensaje</button>
+                                </div>
+                            </form> -->
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+
+        <Footer/>
+        </div>
+
+        <script set:html={animateOnScroll} />
+    </body>
+</html>
+
+<style>
+.page-container {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  main {
+    flex: 1;
+  }
+</style>

src/pages/index.astro

@@ -4,6 +4,7 @@ import Footer from "../components/Footer.astro";
 import ListadoPostsHorizontal from "../components/ListadoPostsHorizontal.astro";
 import Navbar from "../components/Navbar.astro";
 import { Image } from "astro:assets";
+import { proyectos } from "../pages/proyectos/index.astro";
 
 const animateOnScroll = `
   document.addEventListener('DOMContentLoaded', () => {
@@ -51,12 +52,6 @@ const animateOnScroll = `
             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"
@@ -69,43 +64,45 @@ const animateOnScroll = `
     </head>
     <body>
         <Navbar />
-        <header class="header-bg text-white">
+        <header
+            class="bg-primary text-white min-h-screen flex items-center relative overflow-hidden"
+        >
             <img
-                src={"/imgs/bosqueverde.png"}
+                src="/imgs/bosqueverde.png"
                 alt="Bosque Verde"
-                class="video-bg"
+                class="absolute inset-0 w-full h-full object-cover"
             />
-            <video autoplay muted loop class="video-bg">
+            <video
+                autoplay
+                muted
+                loop
+                class="absolute inset-0 w-full h-full object-cover"
+            >
                 <source src="/imgs/bosqueverde.mp4" type="video/mp4" />
                 Tu navegador no soporta la reproducción de videos.
             </video>
-
+            <div class="container mx-auto text-center relative z-10">
-            <div class="container text-center">
+                <h1 class="text-6xl mb-4 font-bold font-londrina">
-                <h1
-                    class="display-1 mb-4 animate__animated animate__fadeInDown londrina-sketch-regular"
-                >
                     Ecobjetivos: Sostenibilidad y Desarrollo
                 </h1>
-                <p
+                <p class="text-xl mb-5">
-                    class="lead mb-5 animate__animated animate__fadeInUp animate__delay-1s"
-                >
                     Construyendo juntos un futuro más verde y equitativo
                 </p>
-                <a
+                <a href="#intro" class="btn btn-outline btn-lg">
-                    href="#intro"
+                    Descubre más
-                    class="btn btn-lg btn-outline-light animate__animated animate__zoomIn animate__delay-2s"
+                </a>
-                    >Descubre más</a
-                >
             </div>
         </header>
 
         <main>
-            <section id="intro" class="py-5 bg-light">
+            <section id="intro" class="py-10">
-                <div class="container">
+                <div class="container mx-auto px-4">
-                    <div class="row align-items-center">
+                    <div class="flex flex-wrap items-center">
-                        <div class="col-md-6 animate-on-scroll">
+                        <div class="w-full md:w-1/2 mb-4 md:mb-0">
-                            <h2 class="display-4 mb-4">¿Qué son los ODS?</h2>
+                            <h2 class="text-4xl mb-4 font-bold">
-                            <p class="lead">
+                                ¿Qué son los ODS?
+                            </h2>
+                            <p class="text-lg">
                                 Los Objetivos de Desarrollo Sostenible (ODS) son
                                 un llamado universal a la acción para erradicar
                                 la pobreza, proteger el planeta y garantizar que
@@ -116,12 +113,12 @@ const animateOnScroll = `
                                 generaciones.
                             </p>
                         </div>
-                        <div class="col-md-6 animate-on-scroll">
+                        <div class="w-full md:w-1/2">
-                            <div class="text-white p-5 text-center">
+                            <div class="p-5 text-center">
                                 <Image
                                     src="/imgs/17Objetivos.png"
                                     alt="Los 17 Objetivos de Desarrollo Sostenible de la ONU"
-                                    class="img-thumbnail .img-fluid"
+                                    class="rounded shadow-lg mx-auto"
                                     width="730"
                                     height="450"
                                 />
@@ -130,12 +127,12 @@ const animateOnScroll = `
                     </div>
                 </div>
             </section>
-            <section id="objetivos" class="py-5">
+            <section id="objetivos" class="py-10 bg-base-300">
-                <div class="container">
+                <div class="container mx-auto px-4">
-                    <h2 class="text-center mb-5 animate-on-scroll">
+                    <h2 class="text-center mb-5 text-3xl font-bold">
                         Nuestros Objetivos Principales
                     </h2>
-                    <div class="row">
+                    <div class="flex flex-wrap -mx-2">
                         {
                             [
                                 {
@@ -163,16 +160,16 @@ const animateOnScroll = `
                                         "Incentivar la separación de residuos y el reciclaje en la comunidad para reducir el impacto ambiental.",
                                 },
                             ].map((obj, index) => (
-                                <div class="col-md-6 col-lg-3 mb-4 animate-on-scroll">
+                                <div class="w-full md:w-1/2 lg:w-1/4 p-2 mb-4">
-                                    <div class="card h-100 text-center">
+                                    <div class="card bg-base-100 shadow-lg text-center h-full p-4">
                                         <div class="card-body">
                                             <i
-                                                class={`fa-solid ${obj.icon} fa-3x mb-3 text-primary`}
+                                                class={`fa-solid ${obj.icon} text-3xl mb-3 text-primary`}
                                             />
-                                            <h5 class="card-title">
+                                            <h5 class="text-xl font-semibold mb-2">
                                                 {obj.title}
                                             </h5>
-                                            <p class="card-text">
+                                            <p class="text-base">
                                                 {obj.description}
                                             </p>
                                         </div>
@@ -184,16 +181,16 @@ const animateOnScroll = `
                 </div>
             </section>
 
-            <section id="impact" class="py-5 bg-success text-white">
+            <section id="impact" class="py-10 bg-success text-success-content">
-                <div class="container">
+                <div class="container mx-auto px-4">
-                    <h2 class="text-center mb-5 animate-on-scroll">
+                    <h2 class="text-center mb-5 text-3xl font-bold">
                         Nuestro Impacto
                     </h2>
-                    <div class="row justify-content-center text-center">
+                    <div class="flex flex-wrap justify-center text-center">
                         {
                             [
                                 {
-                                    number: "500+",
+                                    number: "1k+",
                                     description:
                                         "Personas a las que hemos concienciado.",
                                 },
@@ -203,123 +200,61 @@ const animateOnScroll = `
                                         "Proyectos creados para fomentar la sostenibilidad.",
                                 },
                             ].map((impact, index) => (
-                                <div class="col-md-3 mb-4 animate-on-scroll">
+                                <div class="w-full md:w-1/3 lg:w-1/4 p-2 mb-4">
-                                    <h3 class="display-4 fw-bold">
+                                    <h3 class="text-5xl font-bold mb-2">
                                         {impact.number}
                                     </h3>
-                                    <p class="lead">{impact.description}</p>
+                                    <p class="text-lg">{impact.description}</p>
                                 </div>
                             ))
                         }
                     </div>
                 </div>
             </section>
-            <section id="posts" class="py-5 bg-light">
+            <section id="posts" class="py-10 bg-base-100">
-                <div class="container">
+                <div class="container mx-auto px-4">
-                    <h2 class="text-center mb-5 animate-on-scroll pt-1">
+                  <h2 class="text-center mb-5 text-3xl font-bold pt-1">Posts Destacados</h2>
-                        Posts Recientes
+                  <ListadoPostsHorizontal />
-                    </h2>
-                    <ListadoPostsHorizontal />
                 </div>
-            </section>
+              </section>
-            <section id="proyectos" class="py-5">
+              <section id="proyectos" class="py-10">
-                <div class="container">
+                <div class="container mx-auto px-4">
-                    <h2 class="text-center mb-5 animate-on-scroll pt-2">
+                  <h2 class="text-center mb-5 text-3xl font-bold pt-2">Proyectos Destacados</h2>
-                        Nuestros Proyectos Destacados
+                  <div class="flex flex-wrap justify-center -mx-2">
-                    </h2>
+                    {
-                    <div class="row">
+                      proyectos.map((project) => (
-                        {
+                        <div class="w-full md:w-1/2 p-2 mb-4">
-                            [
+                          <div class="card bg-base-100 shadow-lg h-full">
-                                {
+                            <div class="flex flex-wrap">
-                                    title: "Reforestación Urbana",
+                              <div class="w-full md:w-1/3">
-                                    description:
+                                <img src={project.imagen} class="w-full h-auto rounded-l" alt={project.titulo} />
-                                        "Hemos plantado más de 200 árboles en zonas urbanas para mejorar la calidad del aire y crear espacios verdes.",
+                              </div>
-                                    image: "/imgs/reforestacion.jpg",
+                              <div class="w-full md:w-2/3">
-                                    link: "/proyectos/reforestacion",
+                                <div class="card-body flex flex-col h-full p-4">
-                                },
+                                  <h5 class="text-xl font-semibold mb-2" aria-label=\"Proyecto\">{project.titulo}</h5>
-                                {
+                                  <p class="text-base flex-grow line-clamp">{project.descripcion}</p>
-                                    title: "Talleres ODS en Escuelas",
+                                  <a href={project.url} class="btn btn-primary mt-auto">Ver detalles</a>
-                                    description:
-                                        "Programa educativo que ha llegado a 15 escuelas enseñando los ODS a más de 500 estudiantes.",
-                                    image: "/imgs/talleres-escuelas.jpg",
-                                    link: "/proyectos/talleres-ods",
-                                },
-                                {
-                                    title: "Podcast EcoVoces",
-                                    description:
-                                        "Serie de episodios que explora los 17 ODS con expertos en sostenibilidad y activistas locales.",
-                                    image: "/imgs/podcast-ods.jpg",
-                                    link: "/podcast",
-                                },
-                                {
-                                    title: "Campaña Agua Limpia",
-                                    description:
-                                        "Iniciativa para instalar sistemas de filtración en comunidades con acceso limitado a agua potable.",
-                                    image: "/imgs/agua-limpia.jpg",
-                                    link: "/proyectos/agua-limpia",
-                                },
-                            ].map((project, index) => (
-                                <div class="col-md-6 mb-4 animate-on-scroll">
-                                    <div class="card h-100">
-                                        <div class="row g-0">
-                                            <div class="col-md-4">
-                                                <img
-                                                    src={project.image}
-                                                    class="img-fluid rounded-start h-100 object-fit-cover"
-                                                    alt={project.title}
-                                                />
-                                            </div>
-                                            <div class="col-md-8">
-                                                <div class="card-body d-flex flex-column h-100">
-                                                    <h5
-                                                        class="card-title"
-                                                        aria-label="Proyecto"
-                                                    >
-                                                        {project.title}
-                                                    </h5>
-                                                    <p class="card-text flex-grow-1">
-                                                        {project.description}
-                                                    </p>
-                                                    <a
-                                                        href={project.link}
-                                                        class="btn btn-success mt-auto"
-                                                    >
-                                                        Ver detalles
-                                                    </a>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
                                 </div>
-                            ))
+                              </div>
-                        }
+                            </div>
-                    </div>
+                          </div>
+                        </div>
+                      ))
+                    }
+                  </div>
                 </div>
-            </section>
+              </section>
-
+              <section id="cta" class="py-10 bg-primary text-primary-content text-center">
-            <section id="cta" class="py-5 bg-primary text-white text-center">
+                <div class="container mx-auto px-4">
-                <div class="container">
+                  <h2 class="text-5xl font-bold mb-4">¡Únete al Cambio!</h2>
-                    <h2 class="display-4 mb-4 animate-on-scroll">
+                  <p class="text-lg mb-5">Juntos podemos crear un impacto duradero. Descubre cómo puedes contribuir a los ODS.</p>
-                        ¡Únete al Cambio!
+                  <a href="/participa" class="btn btn-outline text-lg">¡Participa ahora!</a>
-                    </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>
+              </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>
@@ -341,7 +276,7 @@ const animateOnScroll = `
         font-weight: 400 !important;
         font-style: normal;
     }
-    .londrina-sketch-regular {
+    .font-londrina {
         font-family: "Londrina Sketch", sans-serif !important;
         font-weight: 400;
         font-style: normal;
@@ -401,4 +336,11 @@ const animateOnScroll = `
         transform: translateY(-5px);
         box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
     }
+
+    .line-clamp {
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+    }
 </style>

src/pages/participa.astro

@@ -37,10 +37,6 @@ const urlSitio = Astro.site; // Reemplaza con la URL de tu sitio
     <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"
@@ -217,5 +213,3 @@ const urlSitio = Astro.site; // Reemplaza con la URL de tu sitio
     </script>
   </body>
 </html>
-
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

src/pages/posts/[id].astro

@@ -170,7 +170,7 @@ const blogJsonLd = {
         </style>
     </head>
     <body>
-        <Navbar proyectos="/" />
+        <Navbar />
 
         <header class="post-header">
             <div class="container">

src/pages/posts/index.astro

@@ -1,20 +1,14 @@
 ---
-import Navbar from "../components/Navbar.astro";
+import Navbar from "../../components/Navbar.astro";
-import ListadoPosts from "../layouts/ListadoPosts.astro";
+import ListadoPosts from "../../layouts/ListadoPosts.astro";
 ---
 
-<html lang="es">
+<html lang="es" class="scroll-smooth">
     <head>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <meta name="generator" content={Astro.generator} />
         <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"
@@ -35,14 +29,10 @@ import ListadoPosts from "../layouts/ListadoPosts.astro";
         </script>
         <title>Ecobjetivos | Posts</title>
     </head>
-    <body>
+    <body class="min-h-screen bg-base-200 text-base-content">
-        <main>
+        <main class="container mx-auto p-4">
             <Navbar />
             <ListadoPosts />
         </main>
-        <script
-            src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
-            integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
-            crossorigin="anonymous"></script>
     </body>
 </html>

src/pages/proyectos/index.astro

@@ -0,0 +1,242 @@
+---
+import Navbar from "../../components/Navbar.astro";
+
+export const proyectos = [
+    {
+        titulo: "Podcast ¿Arreglamos el Mundo?",
+        descripcion: "Un Podcast dinámico y entretenido que aborda los desafíos y soluciones relacionadas con la Sostenibilidad. Liderado por Rafa y Vicente, cada episodio se convierte en un espacio de debate y aprendizaje. Junto a ellos, los expertos invitados María Jesús y Rubén. Con conversaciones cercanas, datos relevantes y un toque de humor, este equipo busca, literalmente, arreglar el mundo. 🌍✨",
+        imagen: "/imgs/logoPodcast.png",
+        autor: "Rafa, Vicen, Rubén y María Jesús",
+        fecha: "2024-03-10",
+        url: "/proyectos/podcast"
+    }
+];
+
+const orderProyectos = (proyectos, orderBy = "fecha", ascending = false) => {
+    return proyectos.sort((a, b) => {
+        if (orderBy === "fecha") {
+            const comparison = new Date(b.fecha).getTime() - new Date(a.fecha).getTime();
+            return ascending ? -comparison : comparison;
+        } else if (orderBy === "titulo") {
+            const comparison = a.titulo.localeCompare(b.titulo);
+            return ascending ? comparison : -comparison;
+        }
+        return 0;
+    });
+};
+
+const initialProyectos = orderProyectos(proyectos, "fecha", false);
+---
+<body>
+    <Navbar />
+    <div class="container py-5">
+        <div class="text-center mb-5 mt-3">
+            <h1 class="display-4">Proyectos Sostenibles</h1>
+            <p class="lead text-muted">
+                Descubre nuestras iniciativas para un futuro más sostenible
+            </p>
+        </div>
+    
+        <!-- Controles de búsqueda y ordenamiento -->
+        <div class="row justify-content-center mb-5">
+            <div class="col-md-8">
+                <div class="card shadow-sm">
+                    <div class="card-body">
+                        <div class="row g-3">
+                            <div class="col-md-7">
+                                <div class="input-group">
+                                    <span class="input-group-text bg-white">
+                                        <i class="fas fa-search text-muted"></i>
+                                    </span>
+                                    <input
+                                        type="text"
+                                        id="searchInput"
+                                        class="form-control border-start-0"
+                                        placeholder="Buscar proyectos..."
+                                    />
+                                </div>
+                            </div>
+                            <div class="col-md-5">
+                                <select id="orderSelect" class="form-select">
+                                    <option value="fecha-desc">Más recientes primero</option>
+                                    <option value="fecha-asc">Más antiguos primero</option>
+                                    <option value="titulo-asc">Título A-Z</option>
+                                    <option value="titulo-desc">Título Z-A</option>
+                                </select>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    
+        <!-- Grid de proyectos -->
+        <div class="row justify-content-center" id="proyectosContainer">
+            {initialProyectos.map((proyecto) => (
+                <div class="col-md-8 mb-4 proyecto-item">
+                    <article class="card shadow-sm h-100 border-0">
+                        <div class="row g-0">
+                            <div class="col-md-4">
+                                {proyecto.imagen ? (
+                                    <img
+                                        src={proyecto.imagen}
+                                        class="proyecto-image rounded-start"
+                                        alt={proyecto.titulo}
+                                    />
+                                ) : (
+                                    <div class="default-image rounded-start">
+                                        <i class="fas fa-leaf fa-3x text-success" />
+                                    </div>
+                                )}
+                            </div>
+                            <div class="col-md-8">
+                                <div class="card-body d-flex flex-column h-100">
+                                    <div class="mb-3">
+                                        <h2 class="card-title h4">{proyecto.titulo}</h2>
+                                        <p class="card-text text-muted">
+                                            {proyecto.descripcion}
+                                        </p>
+                                    </div>
+                                    <div class="mt-auto">
+                                        <div class="d-flex justify-content-between align-items-center">
+                                            <div class="author-info">
+                                                <small class="text-muted d-block">
+                                                    <i class="fas fa-user-edit me-2" />
+                                                    {proyecto.autor}
+                                                </small>
+                                                <small class="text-muted d-block">
+                                                    <i class="far fa-calendar-alt me-2" />
+                                                    <time datetime={proyecto.fecha}>
+                                                        {new Date(proyecto.fecha).toLocaleDateString(
+                                                            "es-ES",
+                                                            {
+                                                                year: "numeric",
+                                                                month: "long",
+                                                                day: "numeric",
+                                                            }
+                                                        )}
+                                                    </time>
+                                                </small>
+                                            </div>
+                                            <a
+                                                href={proyecto.url}
+                                                class="btn btn-outline-success"
+                                            >
+                                                Ver proyecto
+                                                <i class="fas fa-arrow-right ms-2" />
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </article>
+                </div>
+            ))}
+        </div>
+    </div>
+    
+    <style>
+        .card {
+            transition:
+                transform 0.3s ease,
+                box-shadow 0.3s ease;
+            background: #ffffff;
+        }
+        .card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
+        }
+        .proyecto-image {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+        .default-image {
+            width: 100%;
+            height: 100%;
+            min-height: 200px;
+            background-color: #f8f9fa;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .card-title {
+            color: #2c3e50;
+            font-weight: 600;
+            margin-bottom: 0.5rem;
+        }
+        .input-group-text {
+            border-right: 0;
+        }
+        .form-control:focus {
+            box-shadow: none;
+            border-color: #ced4da;
+        }
+        .form-select:focus {
+            box-shadow: none;
+            border-color: #ced4da;
+        }
+        .btn-outline-success:hover {
+            transform: translateX(5px);
+            transition: transform 0.3s ease;
+        }
+    </style>
+    
+    <script>
+        interface Proyecto {
+            titulo: string;
+            fecha: string;
+            element: string;
+        }
+    
+        const proyectos = {
+            frontmatter: JSON.stringify(Array.from(document.querySelectorAll('.proyecto-item')).map(proyecto => {
+                const timeEl = proyecto.querySelector('time');
+                const titleEl = proyecto.querySelector('.card-title');
+                return {
+                    titulo: titleEl?.textContent?.trim() || '',
+                    fecha: timeEl?.getAttribute('datetime') || '',
+                    element: proyecto.outerHTML
+                };
+            }))
+        };
+    
+        const searchInput = document.getElementById('searchInput') as HTMLInputElement;
+        const orderSelect = document.getElementById('orderSelect') as HTMLSelectElement;
+        const proyectosContainer = document.getElementById('proyectosContainer');
+        const proyectosList = JSON.parse(proyectos.frontmatter) as Proyecto[];
+    
+        function filterAndSortProyectos() {
+            if (!searchInput || !orderSelect || !proyectosContainer) return;
+    
+            const searchTerm = searchInput.value.toLowerCase();
+            const [orderBy, direction] = orderSelect.value.split('-');
+    
+            let filteredProyectos = proyectosList.filter(proyecto =>
+                proyecto.titulo.toLowerCase().includes(searchTerm)
+            );
+    
+            filteredProyectos.sort((a, b) => {
+                if (orderBy === 'fecha') {
+                    const dateA = new Date(a.fecha).getTime();
+                    const dateB = new Date(b.fecha).getTime();
+                    const comparison = dateB - dateA;
+                    return direction === 'asc' ? -comparison : comparison;
+                } else if (orderBy === 'titulo') {
+                    const comparison = a.titulo.localeCompare(b.titulo);
+                    return direction === 'asc' ? comparison : -comparison;
+                }
+                return 0;
+            });
+    
+            proyectosContainer.innerHTML = filteredProyectos
+                .map(proyecto => proyecto.element)
+                .join('');
+        }
+    
+        searchInput?.addEventListener('input', filterAndSortProyectos);
+        orderSelect?.addEventListener('change', filterAndSortProyectos);
+    </script>    
+</body>
+

src/pages/proyectos/podcast.astro

@@ -2,7 +2,6 @@
 // Podcast page
 import Footer from "../../components/Footer.astro";
 import Navbar from "../../components/Navbar.astro";
-import { Image } from "astro:assets";
 
 const animateOnScroll = `
   document.addEventListener('DOMContentLoaded', () => {
@@ -23,11 +22,12 @@ const animateOnScroll = `
 
 // Lista de episodios del podcast
 const episodes = [
-{
+    {
         title: "Sostenibilidad ¿Qué es?",
         description:
             "En este episodio comenzaremos dando forma a este tema que nos engloba tanto en nuestro día a día. Sabemos lo que es la sostenibilidad y de que trata ?, pues aquí nuestro protagonistas nos hablarán de ello, que haces que no los estás escuchando ya?¡¡CORREEEEE!!",
-        spotifyLink: "https://open.spotify.com/episode/218xJHgfhDBPAtr1qELCMa?si=FpuHWjR4TEegn0dDJLnO1w",
+        spotifyLink:
+            "https://open.spotify.com/episode/218xJHgfhDBPAtr1qELCMa?si=FpuHWjR4TEegn0dDJLnO1w",
         duration: "10:17",
         date: "10 de diciembre de 2024",
     },
@@ -35,15 +35,44 @@ const episodes = [
         title: "Criterios ASG",
         description:
             "🎙️ Bienvenidos a Arreglamos el Mundo, el podcast donde exploramos ideas, soluciones y reflexiones para construir un futuro más sostenible y justo. 🌎 En este episodio, nos sumergimos en los criterios ASG: ambiental, social y de gobernanza. ¿Qué significan? ¿Cómo están transformando el mundo de los negocios, las inversiones y nuestras vidas? Acompáñanos mientras desglosamos cómo estas herramientas nos acercan a un mundo mejor. ¡Comencemos a arreglar el mundo, un criterio a la vez! 🌱✨",
-        spotifyLink: "https://open.spotify.com/episode/6dqCt8UAukJ8xD0lJnLZgp?si=2BDei-9IQqSVNyvXAYZj_Q",
+        spotifyLink:
+            "https://open.spotify.com/episode/6dqCt8UAukJ8xD0lJnLZgp?si=llWNPManQueraMpaUhpMxQ",
         duration: "14:11",
         date: "10 de diciembre de 2024",
     },
+    {
+        title: "Retos Ambientales",
+        description:
+            "🎙️ Bienvenidos a Arreglamos el Mundo, el espacio donde debatimos, reflexionamos y soñamos con un planeta más habitable para todos. 🌎 En este episodio, ponemos sobre la mesa los retos ambientales que enfrentamos hoy: desde el cambio climático hasta la pérdida de biodiversidad y la gestión sostenible de nuestros recursos. ¿Qué desafíos debemos superar y qué podemos hacer para marcar la diferencia? Es hora de analizar el panorama, cuestionar nuestras acciones y buscar soluciones que realmente arreglen el mundo. 🌱💡",
+        spotifyLink:
+            "https://open.spotify.com/episode/4g6wy4VLz9RPWu4Iu01cdX?si=NaVoDOoJTBKu54fkKQiOJQ",
+        duration: "10:03",
+        date: "10 de diciembre de 2024",
+    },
+    {
+        title: "Cómo Minimizar los Impactos Ambientales??",
+        description:
+            "🎙️ Bienvenidos a Arreglamos el Mundo, el podcast donde exploramos ideas para hacer del planeta un lugar mejor. 🌍✨ En este episodio, hablamos sobre cómo minimizar los impactos ambientales. Desde pequeñas acciones en nuestro día a día hasta grandes estrategias a nivel global, analizaremos qué podemos hacer para reducir nuestra huella ecológica y proteger los recursos naturales. ¡Acompáñanos mientras descubrimos juntos cómo marcar la diferencia y avanzar hacia un futuro más sostenible! 🌱💡",
+        spotifyLink:
+            "https://open.spotify.com/episode/2tWQ9PFQfo1qK55rop8h0s?si=9KTe45o9Rw-KBtIqsAlU4g",
+        duration: "9:02",
+        date: "10 de diciembre de 2024",
+    },
+    {
+        title: '¡¡Hemos vuelto!! Hablemos de: "Los 17 Puntos"',
+        description:
+            "En Agenda 2030: 17 Pasos hacia un Mundo Mejor, exploramos cada uno de los 17 Objetivos de Desarrollo Sostenible (ODS) propuestos por la ONU. Acompáñanos en este viaje donde analizamos los retos globales, las soluciones innovadoras y el impacto de estas metas en nuestra sociedad, economía y medioambiente. Con entrevistas a expertos, historias inspiradoras y casos reales, descubrirás cómo tú también puedes contribuir a un futuro más justo, sostenible e inclusivo. ¡Sintoniza y forma parte del cambio!",
+        spotifyLink:
+            "https://open.spotify.com/episode/6BluxrOOSnji7wkUt50nk3?si=VQf7Na7jQ4C7AnA4aY2leQ",
+        duration: "22:08",
+        date: "3 de marzo de 2025",
+    },
     {
         title: "Economía Verde y Circular",
         description:
             "En este episodio, exploramos la Economía Verde y Circular: ¿Cómo podemos producir y consumir de manera sostenible? Hablamos sobre innovación, reciclaje, energías renovables y nuevos modelos de negocio que buscan equilibrar desarrollo y medioambiente. ¡Únete a la conversación y descubramos juntos soluciones para un futuro más verde! 🌍♻️",
-        spotifyLink: "https://open.spotify.com/episode/35E5Po2iiG5Fs2GsVfeCr7?si=THRxtld4QwCj1SmUvLT_TQ",
+        spotifyLink:
+            "https://open.spotify.com/episode/35E5Po2iiG5Fs2GsVfeCr7?si=THRxtld4QwCj1SmUvLT_TQ",
         duration: "20:57",
         date: "4 de marzo de 2025",
     },
@@ -102,12 +131,12 @@ const episodes = [
                 <h1
                     class="display-3 mb-4 animate__animated animate__fadeInDown"
                 >
-                    Arreglamos el Mundo?
+                    ¿Arreglamos el Mundo?
                 </h1>
                 <p
                     class="lead mb-4 animate__animated animate__fadeInUp animate__delay-1s"
                 >
-                Podcast que aborda los desafíos sobre la Sostenibilidad. 
+                    Podcast que aborda los desafíos sobre la Sostenibilidad.
                 </p>
                 <div
                     class="d-flex justify-content-center gap-3 animate__animated animate__zoomIn animate__delay-1s"
@@ -137,20 +166,22 @@ const episodes = [
                         <div class="col-lg-6 animate-on-scroll">
                             <h2 class="display-5 mb-4">Sobre el Podcast</h2>
                             <p class="lead">
-                                <strong>Arreglamos el Mundo</strong> es un Podcast dinámico y entretenido
+                                <strong>¿Arreglamos el Mundo?</strong> es un Podcast
-                                que aborda los desafíos y soluciones relacionadas
+                                dinámico y entretenido que aborda los desafíos y
-                                con la Sostenibilidad. 
+                                soluciones relacionadas con la Sostenibilidad.
                             </p>
                             <p>
-                                Liderado por Rafa, el carismático
+                                Liderado por Rafa, el carismático presentador, y
-                                presentador, y Vicente, el productor y segundo presentador,
+                                Vicente, el productor y segundo presentador,
-                                cada episodio se convierte en un espacio de debate
+                                cada episodio se convierte en un espacio de
-                                y aprendizaje. Junto a ellos, los expertos invitados
+                                debate y aprendizaje. Junto a ellos, los
-                                María Jesús y Rubén comparten conocimientos, experiencias
+                                expertos invitados María Jesús y Rubén comparten
-                                y perspectivas para inspirar a los oyentes a tomar
+                                conocimientos, experiencias y perspectivas para
-                                acción por un planeta más sostenible. Con conversaciones
+                                inspirar a los oyentes a tomar acción por un
-                                cercanas, datos relevantes y un toque de humor, este
+                                planeta más sostenible. Con conversaciones
-                                equipo busca, literalmente, arreglar el mundo. 🌍✨
+                                cercanas, datos relevantes y un toque de humor,
+                                este equipo busca, literalmente, arreglar el
+                                mundo. 🌍✨
                             </p>
                         </div>
                         <div class="col-lg-6 animate-on-scroll">
@@ -181,7 +212,10 @@ const episodes = [
                                     <div class="card h-100 border-0 shadow-sm">
                                         <div class="card-body">
                                             <div class="d-flex justify-content-between mb-2">
-                                                <span class="badge bg-success" style="padding-top: 6px;">
+                                                <span
+                                                    class="badge bg-success"
+                                                    style="padding-top: 6px;"
+                                                >
                                                     {episode.date}
                                                 </span>
                                                 <span class="text-muted">
@@ -220,44 +254,20 @@ const episodes = [
                         <div
                             class="col-lg-8 mx-auto text-center animate-on-scroll"
                         >
-                            <h2 class="mb-4">¿Por qué escuchar Arreglamos el Mundo?</h2>
+                            <h2 class="mb-4">
+                                ¿Por qué escuchar Arreglamos el Mundo?
+                            </h2>
                             <div class="row g-4 mt-3">
-                                <div class="col-md-4">
+                                <div class="col-md-12">
                                     <div class="p-3 bg-light rounded-3 h-100">
-                                        <i
+                                        <video controls class="w-100">
-                                            class="fas fa-graduation-cap text-success fa-2x mb-3"
+                                            <source
-                                        ></i>
+                                                src="/imgs/videoPodcast.mp4"
-                                        <h3 class="h5">Educación</h3>
+                                                type="video/mp4"
-                                        <p class="mb-0">
+                                            />
-                                            Aprende sobre los ODS de forma clara
+                                            Tu navegador no soporta la reproducción
-                                            y amena con expertos en cada tema.
+                                            de videos.
-                                        </p>
+                                        </video>
-                                    </div>
-                                </div>
-                                <div class="col-md-4">
-                                    <div class="p-3 bg-light rounded-3 h-100">
-                                        <i
-                                            class="fas fa-lightbulb text-success fa-2x mb-3"
-                                        ></i>
-                                        <h3 class="h5">Inspiración</h3>
-                                        <p class="mb-0">
-                                            Descubre historias de proyectos
-                                            exitosos que están generando cambios
-                                            reales.
-                                        </p>
-                                    </div>
-                                </div>
-                                <div class="col-md-4">
-                                    <div class="p-3 bg-light rounded-3 h-100">
-                                        <i
-                                            class="fas fa-hands-helping text-success fa-2x mb-3"
-                                        ></i>
-                                        <h3 class="h5">Acción</h3>
-                                        <p class="mb-0">
-                                            Cada episodio incluye consejos
-                                            prácticos que puedes implementar en
-                                            tu día a día.
-                                        </p>
                                     </div>
                                 </div>
                             </div>
@@ -332,7 +342,7 @@ const episodes = [
         left: 0;
         width: 100%;
         height: 100%;
-        background-image: url("/imgs/podcast-pattern.png");
+        /*background-image: url("/imgs/podcast-pattern.png");*/
         opacity: 0.1;
     }
 

src/posts/EconomiaCIrcular.mdx

@@ -5,7 +5,7 @@ fecha: '2025-03-04'
 descripcion: 'Explora cómo la economía circular contribuye a la sostenibilidad al reducir el desperdicio, optimizar los recursos y regenerar la naturaleza. Descubre sus principios y cómo puede transformar nuestro modelo de producción y consumo.'
 imagen: 'https://images.theconversation.com/files/275411/original/file-20190520-69182-1x6z8dg.png?ixlib=rb-4.1.0&q=45&auto=format&w=1000&fit=clip'
 hashtags: ['Economía Circular', 'Sostenibilidad', 'Recursos Naturales', 'Cambio Climático', 'Desarrollo Sostenible']
-relacionados: ['economía lineal', 'gestión de residuos', 'energías renovables']
+relacionados: ['EconomiaLineal', 'EconomiaVerde', 'ODS12','Explotacion-de-recursos']
 ---
 
 import ImagenMD from "../components/ImagenMD.astro"

src/posts/EconomiaLineal.mdx

@@ -5,7 +5,7 @@ fecha: '2025-02-25'
 descripcion: 'Explora el impacto de la economía lineal en el medio ambiente y la sociedad. Conoce cómo este modelo de producción y consumo basado en "comprar, usar y tirar" está agotando los recursos y provocando graves consecuencias para el planeta.'
 imagen: 'https://cdn-icons-png.flaticon.com/512/4465/4465754.png'
 hashtags: ['Economía Lineal', 'Impacto Ambiental', 'Sostenibilidad', 'Desigualdad Social', 'Recursos Naturales']
-relacionados: ['sostenibilidad', 'economía circular', 'consumo responsable']
+relacionados: ['EconomiaCircular','EconomiaVerde','Explotacion-de-recursos']
 ---
 
 import ImagenMD from "../components/ImagenMD.astro"

src/posts/EconomiaVerde.mdx

@@ -1,11 +1,11 @@
 ---
-titulo: 'Economía Verde: El Camino hacia un Futuro Sostenible'
+titulo: 'Economía Verde: Transformando el Futuro a Través de la Sostenibilidad'
 autor: 'Lucas Curiel'
 fecha: '01/03/2025'
 descripcion: 'Descubre cómo la economía verde busca equilibrar el desarrollo económico, la justicia social y la protección del medio ambiente, asegurando un futuro más sostenible. ¡Es hora de cambiar el modelo económico!'
 imagen: 'https://relevocontigo.com/wp-content/uploads/2019/02/que-es-economia-verde.jpg.webp'
 hashtags: ['Economía Verde', 'Sostenibilidad', 'Eficiencia de Recursos', 'Desarrollo Sostenible', 'ODS 12']
-relacionados: ['sostenibilidad', 'economía circular', 'producción responsable']
+relacionados: ['ODS12','Explotacion-de-recursos','Retos-ambientales','EconomiaCircular']
 ---
 
 import ImagenMD from "../components/ImagenMD.astro"

src/styles/global.css

@@ -0,0 +1,78 @@
+@import "tailwindcss";
+@plugin "daisyui";
+
+
+
+@plugin "daisyui/theme" {
+    name: "forest";
+    default: false;
+    prefersdark: true;
+    color-scheme: "dark";
+    --color-base-100: oklch(20.84% 0.008 17.911);
+    --color-base-200: oklch(18.522% 0.007 17.911);
+    --color-base-300: oklch(16.203% 0.007 17.911);
+    --color-base-content: oklch(83.768% 0.001 17.911);
+    --color-primary: oklch(68.628% 0.185 148.958);
+    --color-primary-content: oklch(0% 0 0);
+    --color-secondary: oklch(69.776% 0.135 168.327);
+    --color-secondary-content: oklch(13.955% 0.027 168.327);
+    --color-accent: oklch(70.628% 0.119 185.713);
+    --color-accent-content: oklch(14.125% 0.023 185.713);
+    --color-neutral: oklch(30.698% 0.039 171.364);
+    --color-neutral-content: oklch(86.139% 0.007 171.364);
+    --color-info: oklch(72.06% 0.191 231.6);
+    --color-info-content: oklch(0% 0 0);
+    --color-success: oklch(64.8% 0.15 160);
+    --color-success-content: oklch(0% 0 0);
+    --color-warning: oklch(84.71% 0.199 83.87);
+    --color-warning-content: oklch(0% 0 0);
+    --color-error: oklch(71.76% 0.221 22.18);
+    --color-error-content: oklch(0% 0 0);
+    --radius-selector: 1rem;
+    --radius-field: 2rem;
+    --radius-box: 1rem;
+    --size-selector: 0.25rem;
+    --size-field: 0.25rem;
+    --border: 1px;
+    --depth: 0;
+    --noise: 0;
+  }
+
+
+  @plugin "daisyui/theme" {
+    name: "lemonade";
+    default: true;
+    prefersdark: false;
+    color-scheme: "light";
+    --color-base-100: oklch(98% 0 0);
+    --color-base-200: oklch(97% 0 0);
+    --color-base-300: oklch(92% 0 0);
+    --color-base-content: oklch(20% 0 0);
+    --color-primary: oklch(62% 0.194 149.214);
+    --color-primary-content: oklch(98% 0.018 155.826);
+    --color-secondary: oklch(54% 0.281 293.009);
+    --color-secondary-content: oklch(96% 0.016 293.756);
+    --color-accent: oklch(60% 0.126 221.723);
+    --color-accent-content: oklch(98% 0.019 200.873);
+    --color-neutral: oklch(43% 0 0);
+    --color-neutral-content: oklch(98% 0 0);
+    --color-info: oklch(70% 0.165 254.624);
+    --color-info-content: oklch(28% 0.091 267.935);
+    --color-success: oklch(79% 0.209 151.711);
+    --color-success-content: oklch(26% 0.065 152.934);
+    --color-warning: oklch(85% 0.199 91.936);
+    --color-warning-content: oklch(28% 0.066 53.813);
+    --color-error: oklch(71% 0.194 13.428);
+    --color-error-content: oklch(27% 0.105 12.094);
+    --radius-selector: 1rem;
+    --radius-field: 2rem;
+    --radius-box: 0.5rem;
+    --size-selector: 0.25rem;
+    --size-field: 0.25rem;
+    --border: 1px;
+    --depth: 0;
+    --noise: 1;
+  }
+  
+  
+