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

Compare commits

merge into: h4ckx0r:main
Branches Tags
h4ckx0r:main h4ckx0r:cambio-tailwindcss
...
pull from: h4ckx0r:cambio-tailwindcss
Branches Tags
h4ckx0r:main h4ckx0r:cambio-tailwindcss

4 Commits
main ... cambio-tai

Author SHA1 Message Date
h4ckx0r
e1c6cf61cb Arreglo posts horizontales 2025-03-25 09:47:24 +01:00
h4ckx0r
c16fd89953 Actualización de librerias 2025-03-25 09:45:11 +01:00
h4ckx0r
3c473f1968 Remove unused Image import and format indentation 2025-03-13 08:54:01 +01:00
h4ckx0r
6ecd7a18fb Inicio de desarrollo de la rama 2025-03-11 10:37:59 +01:00
9 changed files with 1098 additions and 862 deletions
Expand all files Collapse all files

8
astro.config.mjs
View File

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

1405
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

10
package.json
View File

@@ -11,8 +11,12 @@
"astro": "astro" "astro": "astro"
}, },
"dependencies": { "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"
} }
} }

94
src/components/ListadoPostsHorizontal.astro
View File

@@ -1,51 +1,57 @@
--- ---
import { getCollection } from "astro:content"; import { getCollection } from "astro:content";
const posts = await getCollection("posts"); 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> </div>
<style> <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> </style>

65
src/components/Navbar.astro
View File

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

198
src/pages/index.astro
View File

@@ -64,43 +64,45 @@ const animateOnScroll = `
</head> </head>
<body> <body>
<Navbar /> <Navbar />
<header class="header-bg text-white"> <header
class="bg-primary text-white min-h-screen flex items-center relative overflow-hidden"
>
<img <img
src="/imgs/bosqueverde.png" src="/imgs/bosqueverde.png"
alt="Bosque Verde" 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" /> <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 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 Ecobjetivos: Sostenibilidad y Desarrollo
</h1> </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 Construyendo juntos un futuro más verde y equitativo
</p> </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> </div>
</header> </header>
<main> <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 Los Objetivos de Desarrollo Sostenible (ODS) son
un llamado universal a la acción para erradicar un llamado universal a la acción para erradicar
la pobreza, proteger el planeta y garantizar que la pobreza, proteger el planeta y garantizar que
@@ -111,12 +113,12 @@ const animateOnScroll = `
generaciones. generaciones.
</p> </p>
</div> </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 <Image
src="/imgs/17Objetivos.png" src="/imgs/17Objetivos.png"
alt="Los 17 Objetivos de Desarrollo Sostenible de la ONU" alt="Los 17 Objetivos de Desarrollo Sostenible de la ONU"
class="img-thumbnail .img-fluid" class="rounded shadow-lg mx-auto"
width="730" width="730"
height="450" height="450"
/> />
@@ -125,12 +127,12 @@ const animateOnScroll = `
</div> </div>
</div> </div>
</section> </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 Nuestros Objetivos Principales
</h2> </h2>
<div class="row"> <div class="flex flex-wrap -mx-2">
{ {
[ [
{ {
@@ -158,16 +160,16 @@ const animateOnScroll = `
"Incentivar la separación de residuos y el reciclaje en la comunidad para reducir el impacto ambiental.", "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="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"> <div class="card-body">
<i <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} {obj.title}
</h5> </h5>
<p class="card-text"> <p class="text-base">
{obj.description} {obj.description}
</p> </p>
</div> </div>
@@ -179,16 +181,16 @@ const animateOnScroll = `
</div> </div>
</section> </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 Nuestro Impacto
</h2> </h2>
<div class="row justify-content-center text-center"> <div class="flex flex-wrap justify-center text-center">
{ {
[ [
{ {
number: "500+", number: "1k+",
description: description:
"Personas a las que hemos concienciado.", "Personas a las que hemos concienciado.",
}, },
@@ -198,87 +200,57 @@ const animateOnScroll = `
"Proyectos creados para fomentar la sostenibilidad.", "Proyectos creados para fomentar la sostenibilidad.",
}, },
].map((impact, index) => ( ].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} {impact.number}
</h3> </h3>
<p class="lead">{impact.description}</p> <p class="text-lg">{impact.description}</p>
</div> </div>
)) ))
} }
</div> </div>
</div> </div>
</section> </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> </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 justify-content-center"> proyectos.map((project) => (
{ <div class="w-full md:w-1/2 p-2 mb-4">
proyectos.map((project) => ( <div class="card bg-base-100 shadow-lg h-full">
<div class="col-md-6 mb-4 animate-on-scroll"> <div class="flex flex-wrap">
<div class="card h-100"> <div class="w-full md:w-1/3">
<div class="row g-0"> <img src={project.imagen} class="w-full h-auto rounded-l" alt={project.titulo} />
<div class="col-md-4"> </div>
<img <div class="w-full md:w-2/3">
src={project.imagen} <div class="card-body flex flex-col h-full p-4">
class="img-fluid rounded-start" <h5 class="text-xl font-semibold mb-2" aria-label=\"Proyecto\">{project.titulo}</h5>
alt={project.titulo} <p class="text-base flex-grow line-clamp">{project.descripcion}</p>
/> <a href={project.url} class="btn btn-primary mt-auto">Ver detalles</a>
</div>
<div class="col-md-8">
<div class="card-body d-flex flex-column h-100">
<h5
class="card-title"
aria-label="Proyecto"
>
{project.titulo}
</h5>
<p class="card-text flex-grow-1 line-clamp">
{project.descripcion}
</p>
<a
href={project.url}
class="btn btn-success mt-auto"
>
Ver detalles
</a>
</div>
</div>
</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> </div>
</section> </section>
</main> </main>
<Footer /> <Footer />
@@ -304,7 +276,7 @@ const animateOnScroll = `
font-weight: 400 !important; font-weight: 400 !important;
font-style: normal; font-style: normal;
} }
.londrina-sketch-regular { .font-londrina {
font-family: "Londrina Sketch", sans-serif !important; font-family: "Londrina Sketch", sans-serif !important;
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
@@ -366,9 +338,9 @@ const animateOnScroll = `
} }
.line-clamp { .line-clamp {
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 3; -webkit-line-clamp: 3;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
overflow: hidden; overflow: hidden;
} }
</style> </style>

6
src/pages/posts/index.astro
View File

@@ -3,7 +3,7 @@ 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> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -29,8 +29,8 @@ import ListadoPosts from "../../layouts/ListadoPosts.astro";
</script> </script>
<title>Ecobjetivos | Posts</title> <title>Ecobjetivos | Posts</title>
</head> </head>
<body> <body class="min-h-screen bg-base-200 text-base-content">
<main> <main class="container mx-auto p-4">
<Navbar /> <Navbar />
<ListadoPosts /> <ListadoPosts />
</main> </main>

94
src/pages/proyectos/podcast.astro
View File

@@ -2,7 +2,6 @@
// Podcast page // Podcast page
import Footer from "../../components/Footer.astro"; import Footer from "../../components/Footer.astro";
import Navbar from "../../components/Navbar.astro"; import Navbar from "../../components/Navbar.astro";
import { Image } from "astro:assets";
const animateOnScroll = ` const animateOnScroll = `
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
@@ -23,11 +22,12 @@ const animateOnScroll = `
// Lista de episodios del podcast // Lista de episodios del podcast
const episodes = [ const episodes = [
{ {
title: "Sostenibilidad ¿Qué es?", title: "Sostenibilidad ¿Qué es?",
description: 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!!", "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", duration: "10:17",
date: "10 de diciembre de 2024", date: "10 de diciembre de 2024",
}, },
@@ -35,7 +35,8 @@ const episodes = [
title: "Criterios ASG", title: "Criterios ASG",
description: 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! 🌱✨", "🎙️ 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=llWNPManQueraMpaUhpMxQ", spotifyLink:
"https://open.spotify.com/episode/6dqCt8UAukJ8xD0lJnLZgp?si=llWNPManQueraMpaUhpMxQ",
duration: "14:11", duration: "14:11",
date: "10 de diciembre de 2024", date: "10 de diciembre de 2024",
}, },
@@ -43,7 +44,8 @@ const episodes = [
title: "Retos Ambientales", title: "Retos Ambientales",
description: 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. 🌱💡", "🎙️ 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", spotifyLink:
"https://open.spotify.com/episode/4g6wy4VLz9RPWu4Iu01cdX?si=NaVoDOoJTBKu54fkKQiOJQ",
duration: "10:03", duration: "10:03",
date: "10 de diciembre de 2024", date: "10 de diciembre de 2024",
}, },
@@ -51,7 +53,8 @@ const episodes = [
title: "Cómo Minimizar los Impactos Ambientales??", title: "Cómo Minimizar los Impactos Ambientales??",
description: 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! 🌱💡", "🎙️ 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", spotifyLink:
"https://open.spotify.com/episode/2tWQ9PFQfo1qK55rop8h0s?si=9KTe45o9Rw-KBtIqsAlU4g",
duration: "9:02", duration: "9:02",
date: "10 de diciembre de 2024", date: "10 de diciembre de 2024",
}, },
@@ -59,7 +62,8 @@ const episodes = [
title: '¡¡Hemos vuelto!! Hablemos de: "Los 17 Puntos"', title: '¡¡Hemos vuelto!! Hablemos de: "Los 17 Puntos"',
description: 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!", "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", spotifyLink:
"https://open.spotify.com/episode/6BluxrOOSnji7wkUt50nk3?si=VQf7Na7jQ4C7AnA4aY2leQ",
duration: "22:08", duration: "22:08",
date: "3 de marzo de 2025", date: "3 de marzo de 2025",
}, },
@@ -67,7 +71,8 @@ const episodes = [
title: "Economía Verde y Circular", title: "Economía Verde y Circular",
description: 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! 🌍♻️", "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", duration: "20:57",
date: "4 de marzo de 2025", date: "4 de marzo de 2025",
}, },
@@ -131,7 +136,7 @@ const episodes = [
<p <p
class="lead mb-4 animate__animated animate__fadeInUp animate__delay-1s" 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> </p>
<div <div
class="d-flex justify-content-center gap-3 animate__animated animate__zoomIn animate__delay-1s" class="d-flex justify-content-center gap-3 animate__animated animate__zoomIn animate__delay-1s"
@@ -161,20 +166,22 @@ const episodes = [
<div class="col-lg-6 animate-on-scroll"> <div class="col-lg-6 animate-on-scroll">
<h2 class="display-5 mb-4">Sobre el Podcast</h2> <h2 class="display-5 mb-4">Sobre el Podcast</h2>
<p class="lead"> <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>
<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> </p>
</div> </div>
<div class="col-lg-6 animate-on-scroll"> <div class="col-lg-6 animate-on-scroll">
@@ -205,7 +212,10 @@ const episodes = [
<div class="card h-100 border-0 shadow-sm"> <div class="card h-100 border-0 shadow-sm">
<div class="card-body"> <div class="card-body">
<div class="d-flex justify-content-between mb-2"> <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} {episode.date}
</span> </span>
<span class="text-muted"> <span class="text-muted">
@@ -238,25 +248,33 @@ const episodes = [
</div> </div>
</section> </section>
<section class="py-5"> <section class="py-5">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-lg-8 mx-auto text-center animate-on-scroll"> <div
<h2 class="mb-4">¿Por qué escuchar Arreglamos el Mundo?</h2> class="col-lg-8 mx-auto text-center animate-on-scroll"
<div class="row g-4 mt-3"> >
<div class="col-md-12"> <h2 class="mb-4">
<div class="p-3 bg-light rounded-3 h-100"> ¿Por qué escuchar Arreglamos el Mundo?
<video controls class="w-100"> </h2>
<source src="/imgs/videoPodcast.mp4" type="video/mp4"> <div class="row g-4 mt-3">
Tu navegador no soporta la reproducción de videos. <div class="col-md-12">
</video> <div class="p-3 bg-light rounded-3 h-100">
<video controls class="w-100">
<source
src="/imgs/videoPodcast.mp4"
type="video/mp4"
/>
Tu navegador no soporta la reproducción
de videos.
</video>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </section>
</div>
</div>
</section>
<section class="py-5 bg-success text-white"> <section class="py-5 bg-success text-white">
<div class="container text-center"> <div class="container text-center">

78
src/styles/global.css Normal file
View File

@@ -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;
}