Nueva página en desarrollo hablando sobre el podcast
This commit is contained in:
354
src/pages/proyectos/podcast.astro
Normal file
354
src/pages/proyectos/podcast.astro
Normal 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>
|
||||
Reference in New Issue
Block a user