h4ckx0r/webSostenible
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Nueva página en desarrollo hablando sobre el podcast

Browse Source
This commit is contained in:
Natanael Gómez Ortiz
2025-03-05 23:31:06 +01:00
parent 66f357cc5a
commit ff1f0352a3
2 changed files with 727 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files

262
src/pages/index.astro
View File

@@ -24,14 +24,20 @@ const animateOnScroll = `
--- ---
<html lang="es"> <html lang="es">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="generator" content={Astro.generator} /> <meta name="generator" content={Astro.generator} />
<link rel="sitemap" href="/sitemap-index.xml" /> <link rel="sitemap" href="/sitemap-index.xml" />
<!-- Google tag (gtag.js) --> <!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-1JT18RF3R4"></script> <script
<meta name="google-site-verification" content="aI_AQpT-EgmaU7QL0oOm4UJ4YbwJ5SBcp2rE30le7nk" /> async
src="https://www.googletagmanager.com/gtag/js?id=G-1JT18RF3R4"
></script>
<meta
name="google-site-verification"
content="aI_AQpT-EgmaU7QL0oOm4UJ4YbwJ5SBcp2rE30le7nk"
/>
<script> <script>
window.dataLayer = window.dataLayer || []; window.dataLayer = window.dataLayer || [];
function gtag() { function gtag() {
@@ -40,30 +46,56 @@ const animateOnScroll = `
gtag("js", new Date()); gtag("js", new Date());
gtag("config", "G-1JT18RF3R4"); gtag("config", "G-1JT18RF3R4");
</script> </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." /> <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 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
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet" /> href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.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> <title>Ecobjetivos | Tu web de desarrollo Sostenible</title>
</head> </head>
<body> <body>
<Navbar /> <Navbar />
<header class="header-bg text-white"> <header class="header-bg text-white">
<img src={"/imgs/bosqueverde.png"} alt="Bosque Verde" class="video-bg" /> <img
src={"/imgs/bosqueverde.png"}
alt="Bosque Verde"
class="video-bg"
/>
<video autoplay muted loop class="video-bg"> <video autoplay muted loop class="video-bg">
<source src="/imgs/bosqueverde.mp4" type="video/mp4" /> <source src="/imgs/bosqueverde.mp4" type="video/mp4" />
Tu navegador no soporta la reproducción de videos. Tu navegador no soporta la reproducción de videos.
</video> </video>
<div class="container text-center"> <div class="container text-center">
<h1 class="display-1 mb-4 animate__animated animate__fadeInDown londrina-sketch-regular"> <h1
class="display-1 mb-4 animate__animated animate__fadeInDown londrina-sketch-regular"
>
Ecobjetivos: Sostenibilidad y Desarrollo Ecobjetivos: Sostenibilidad y Desarrollo
</h1> </h1>
<p class="lead mb-5 animate__animated animate__fadeInUp animate__delay-1s"> <p
class="lead mb-5 animate__animated animate__fadeInUp animate__delay-1s"
>
Construyendo juntos un futuro más verde y equitativo Construyendo juntos un futuro más verde y equitativo
</p> </p>
<a href="#intro" class="btn btn-lg btn-outline-light animate__animated animate__zoomIn animate__delay-2s">Descubre más</a> <a
href="#intro"
class="btn btn-lg btn-outline-light animate__animated animate__zoomIn animate__delay-2s"
>Descubre más</a
>
</div> </div>
</header> </header>
@@ -74,12 +106,25 @@ const animateOnScroll = `
<div class="col-md-6 animate-on-scroll"> <div class="col-md-6 animate-on-scroll">
<h2 class="display-4 mb-4">¿Qué son los ODS?</h2> <h2 class="display-4 mb-4">¿Qué son los ODS?</h2>
<p class="lead"> <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. 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> </p>
</div> </div>
<div class="col-md-6 animate-on-scroll"> <div class="col-md-6 animate-on-scroll">
<div class="text-white p-5 text-center"> <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" /> <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>
</div> </div>
@@ -87,21 +132,49 @@ const animateOnScroll = `
</section> </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-lightbulb", title: "Concienciación Energética", description: "Promover el uso eficiente de la energía en el hogar y el trabajo." }, icon: "fa-chalkboard-teacher",
{ icon: "fa-handshake", title: "Colaboración Comunitaria", description: "Fomentar la colaboración con organizaciones locales para proyectos sostenibles." }, title: "Educación en ODS",
{ 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." } description:
"Enseñar a la comunidad formas de vida sostenibles que cumplan con los Objetivos de Desarrollo Sostenible.",
},
{
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-handshake",
title: "Colaboración Comunitaria",
description:
"Fomentar la colaboración con organizaciones locales para proyectos sostenibles.",
},
{
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.",
},
].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
<h5 class="card-title">{obj.title}</h5> class={`fa-solid ${obj.icon} fa-3x mb-3 text-primary`}
<p class="card-text">{obj.description}</p> />
<h5 class="card-title">
{obj.title}
</h5>
<p class="card-text">
{obj.description}
</p>
</div> </div>
</div> </div>
</div> </div>
@@ -113,15 +186,27 @@ const animateOnScroll = `
<section id="impact" class="py-5 bg-success text-white"> <section id="impact" class="py-5 bg-success text-white">
<div class="container"> <div class="container">
<h2 class="text-center mb-5 animate-on-scroll">Nuestro Impacto</h2> <h2 class="text-center mb-5 animate-on-scroll">
Nuestro Impacto
</h2>
<div class="row justify-content-center text-center"> <div class="row justify-content-center text-center">
{ {
[ [
{ number: "500+", description: "Personas a las que hemos concienciado." }, {
{ number: "5+", description: "Proyectos creados para fomentar la sostenibilidad." } number: "500+",
description:
"Personas a las que hemos concienciado.",
},
{
number: "5+",
description:
"Proyectos creados para fomentar la sostenibilidad.",
},
].map((impact, index) => ( ].map((impact, index) => (
<div class="col-md-3 mb-4 animate-on-scroll"> <div class="col-md-3 mb-4 animate-on-scroll">
<h3 class="display-4 fw-bold">{impact.number}</h3> <h3 class="display-4 fw-bold">
{impact.number}
</h3>
<p class="lead">{impact.description}</p> <p class="lead">{impact.description}</p>
</div> </div>
)) ))
@@ -131,28 +216,78 @@ const animateOnScroll = `
</section> </section>
<section id="posts" class="py-5 bg-light"> <section id="posts" class="py-5 bg-light">
<div class="container"> <div class="container">
<h2 class="text-center mb-5 animate-on-scroll pt-1">Posts Recientes</h2> <h2 class="text-center mb-5 animate-on-scroll pt-1">
Posts Recientes
</h2>
<ListadoPostsHorizontal /> <ListadoPostsHorizontal />
</div> </div>
</section> </section>
<section id="proyectos" class="py-5"> <section id="proyectos" class="py-5">
<div class="container"> <div class="container">
<h2 class="text-center mb-5 animate-on-scroll pt-2">Nuestros Proyectos</h2> <h2 class="text-center mb-5 animate-on-scroll pt-2">
Nuestros Proyectos Destacados
</h2>
<div class="row"> <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: "Reforestación Urbana",
{ title: "Energía Limpia", description: "Desarrollo de tecnologías para energías renovables." }, description:
{ title: "Agua Limpia", description: "Proyectos para mejorar el acceso al agua potable." } "Hemos plantado más de 200 árboles en zonas urbanas para mejorar la calidad del aire y crear espacios verdes.",
image: "/imgs/reforestacion.jpg",
link: "/proyectos/reforestacion",
},
{
title: "Talleres ODS en Escuelas",
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) => ( ].map((project, index) => (
<div class="col-md-6 mb-4 animate-on-scroll"> <div class="col-md-6 mb-4 animate-on-scroll">
<div class="card"> <div class="card h-100">
<div class="card-body"> <div class="row g-0">
<h5 class="card-title" aria-label="Proyecto">{project.title}</h5> <div class="col-md-4">
<p class="card-text">{project.description}</p> <img
<a href="#" class="btn disabled btn-success">Ver detalles</a> 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>
@@ -164,25 +299,43 @@ const animateOnScroll = `
<section id="cta" class="py-5 bg-primary text-white text-center"> <section id="cta" class="py-5 bg-primary text-white text-center">
<div class="container"> <div class="container">
<h2 class="display-4 mb-4 animate-on-scroll">¡Únete al Cambio!</h2> <h2 class="display-4 mb-4 animate-on-scroll">
<p class="lead mb-5 animate-on-scroll">Juntos podemos crear un impacto duradero. Descubre cómo puedes contribuir a los ODS.</p> ¡Únete al Cambio!
<a href="/participa" class="btn btn-lg btn-light animate-on-scroll">¡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> </div>
</section> </section>
</main> </main>
<Footer /> <Footer />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script> <script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
></script>
<script set:html={animateOnScroll} /> <script set:html={animateOnScroll} />
</body> </body>
</html> </html>
<style is:global> <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=Inter+Tight:ital@0;1&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Londrina+Sketch&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Londrina+Sketch&display=swap");
h1, h2, h3, h4, h5, h6, p, a { h1,
h2,
h3,
h4,
h5,
h6,
p,
a {
font-family: "Inter Tight", sans-serif !important; font-family: "Inter Tight", sans-serif !important;
font-optical-sizing: auto; font-optical-sizing: auto;
font-weight: 400 !important; font-weight: 400 !important;
@@ -193,8 +346,8 @@ const animateOnScroll = `
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
} }
</style> </style>
<style> <style>
.header-bg { .header-bg {
background-color: #4caf50; background-color: #4caf50;
min-height: 100vh; min-height: 100vh;
@@ -233,16 +386,19 @@ const animateOnScroll = `
.btn-outline-light:hover { .btn-outline-light:hover {
background-color: #ffffff; background-color: #ffffff;
color: #4caf50; color: #4caf50;
transition: background-color 0.3s ease, color 0.3s ease; transition:
background-color 0.3s ease,
color 0.3s ease;
} }
.card { .card {
transition: transform 0.3s ease, box-shadow 0.3s ease; transition:
transform 0.3s ease,
box-shadow 0.3s ease;
background: #ffffff; background: #ffffff;
} }
.card:hover { .card:hover {
transform: translateY(-5px); transform: translateY(-5px);
box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
} }
</style> </style>

354
src/pages/proyectos/podcast.astro Normal file
View File

@@ -0,0 +1,354 @@
---
// Podcast page
import Footer from "../../components/Footer.astro";
import Navbar from "../../components/Navbar.astro";
import { Image } from "astro:assets";
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);
});
});
`;
// 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",
duration: "10:17",
date: "10 de diciembre de 2024",
},
{
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",
duration: "14:11",
date: "10 de diciembre de 2024",
},
{
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",
duration: "20:57",
date: "4 de marzo de 2025",
},
];
---
<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} />
<script
async
src="https://www.googletagmanager.com/gtag/js?id=G-1JT18RF3R4"
></script>
<meta
name="google-site-verification"
content="aI_AQpT-EgmaU7QL0oOm4UJ4YbwJ5SBcp2rE30le7nk"
/>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "G-1JT18RF3R4");
</script>
<meta
name="description"
content="Podcast Arreglamos el Mundo? - Podcast dinámico y entretenido
que aborda los desafíos y soluciones relacionadas
con la Sostenibilidad. "
/>
<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>Arreglamos el Mundo? | Ecobjetivos</title>
</head>
<body>
<Navbar />
<header class="podcast-header text-white py-5 mt-5">
<div class="container text-center">
<h1
class="display-3 mb-4 animate__animated animate__fadeInDown"
>
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.
</p>
<div
class="d-flex justify-content-center gap-3 animate__animated animate__zoomIn animate__delay-1s"
>
<a
href="https://open.spotify.com/show/2snFzgOSnk1AVH4gx6HGG1?si=e8c250c65f534d72"
target="_blank"
class="btn btn-success btn-lg"
>
<i class="fab fa-spotify me-2"></i> Escuchar en Spotify
</a>
<!-- <a
href="https://podcasts.apple.com/podcast/example"
target="_blank"
class="btn btn-outline-light btn-lg"
>
<i class="fab fa-apple me-2"></i> Apple Podcasts
</a> -->
</div>
</div>
</header>
<main>
<section class="py-5">
<div class="container">
<div class="row align-items-center">
<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
que aborda los desafíos y soluciones relacionadas
con la Sostenibilidad.
</p>
<p>
Liderado por Rafa, el carismático
presentador, y Vicente, el productor y segundo presentador,
cada episodio se convierte en un espacio de debate
y aprendizaje. Junto a ellos, los expertos invitados
María Jesús y Rubén comparten conocimientos, experiencias
y perspectivas para inspirar a los oyentes a tomar
acción por un planeta más sostenible. Con conversaciones
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">
<iframe
style="border-radius:12px"
src="https://open.spotify.com/embed/show/2snFzgOSnk1AVH4gx6HGG1?utm_source=generator"
width="100%"
height="352"
frameBorder="0"
allowfullscreen=""
allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
loading="lazy"></iframe>
</div>
</div>
</div>
</section>
<section class="py-5 bg-light">
<div class="container">
<h2 class="text-center mb-5 animate-on-scroll">
Episodios Destacados
</h2>
<div class="row g-4">
{
episodes.map((episode, index) => (
<div class="col-md-6 animate-on-scroll">
<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;">
{episode.date}
</span>
<span class="text-muted">
<i class="far fa-clock me-1" />
{episode.duration}
</span>
</div>
<h3 class="h5 card-title">
{episode.title}
</h3>
<p class="card-text">
{episode.description}
</p>
</div>
<div class="card-footer bg-white border-0">
<a
href={episode.spotifyLink}
target="_blank"
class="btn btn-outline-success w-100"
>
<i class="fab fa-spotify me-2" />{" "}
Escuchar episodio
</a>
</div>
</div>
</div>
))
}
</div>
</div>
</section>
<section class="py-5">
<div class="container">
<div class="row">
<div
class="col-lg-8 mx-auto text-center animate-on-scroll"
>
<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="p-3 bg-light rounded-3 h-100">
<i
class="fas fa-graduation-cap text-success fa-2x mb-3"
></i>
<h3 class="h5">Educación</h3>
<p class="mb-0">
Aprende sobre los ODS de forma clara
y amena con expertos en cada tema.
</p>
</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>
</div>
</div>
</div>
</section>
<section class="py-5 bg-success text-white">
<div class="container text-center">
<h2 class="mb-4 animate-on-scroll">
¿Tienes sugerencias para futuros episodios?
</h2>
<p class="lead mb-4 animate-on-scroll">
Nos encantaría conocer qué temas te interesan
</p>
<a
href="/contacto"
class="btn btn-light btn-lg animate-on-scroll"
>
<i class="fas fa-envelope me-2"></i> Enviar sugerencia
</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;
}
.londrina-sketch-regular {
font-family: "Londrina Sketch", sans-serif !important;
font-weight: 400;
font-style: normal;
}
</style>
<style>
.podcast-header {
background-color: #1db954; /* Color verde de Spotify */
background-image: linear-gradient(45deg, #1db954, #219653);
padding: 6rem 0;
position: relative;
}
.podcast-header::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("/imgs/podcast-pattern.png");
opacity: 0.1;
}
.animate-on-scroll {
visibility: hidden;
}
.episode-card {
transition: transform 0.3s ease;
}
.episode-card:hover {
transform: translateY(-5px);
}
.object-fit-cover {
object-fit: cover;
}
</style>