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

Cambios en Landing Page

Browse Source
This commit is contained in:
Natanael Gómez Ortiz
2024-10-15 19:15:00 +02:00
parent 0669d3bd53
commit dbacbcee7a
5 changed files with 108 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/ListadoPostsHorizontal.astro Normal file
View File

@@ -0,0 +1,26 @@
---
const posts = await Astro.glob("../pages/posts/*.md");
---
<div class="row">
{
posts.slice(0, 3).map((post) => (
<div class="col-md-4 mb-4 animate-on-scroll">
<div class="card">
<div class="card-body">
<h5 class="card-title">
{post.frontmatter.titulo}
</h5>
<p class="card-text">
{post.frontmatter.descripcion}
...
</p>
<a href={post.url} class="btn btn-primary">
Leer más
</a>
</div>
</div>
</div>
))
}
</div>

31
src/components/Navbar.astro
View File

@@ -1,13 +1,22 @@
---
import { Image } from "astro:assets";
---
<main>
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<div class="container">
<a class="navbar-brand d-flex align-items-center" href="#">
<img src="/imgs/logo.jpg" alt="Logo Ecobjetivos" class="me-2" height="24" />
Ecobjetivos
<a
class="navbar-brand d-flex align-items-center"
href="#"
>
<Image
src="/imgs/logo.png"
alt="Logo Ecobjetivos"
class="me-2 biglogo"
height="25"
width="25"
/>
&nbsp Ecobjetivos
</a>
<button
class="navbar-toggler"
@@ -23,13 +32,23 @@
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#posts">Posts</a>
<a type="button" class="nav-link btn btn-light" href="#posts"
>Posts</a
>
</li>
<li class="nav-item">
<a class="nav-link" href="#proyectos">Proyectos</a>
<a type="button" class="nav-link btn btn-light" href="#proyectos"
>Proyectos</a
>
</li>
</ul>
</div>
</div>
</nav>
</main>
<style>
.biglogo {
scale: 1.5;
}
</style>

19
src/layouts/PostStyle.astro Normal file
View File

@@ -0,0 +1,19 @@
---
const { titulo } = Astro.props;
---
<html lang="es">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<title>EcoFuturo</title>
</head>
<body>
<main>
<h1>{titulo}</h1>
<slot/>
</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>

55
src/pages/index.astro
View File

@@ -1,5 +1,6 @@
---
// Component Imports
import ListadoPostsHorizontal from "../components/ListadoPostsHorizontal.astro";
import Navbar from "../components/Navbar.astro";
const animateOnScroll = `
@@ -40,14 +41,14 @@ const animateOnScroll = `
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
<title>EcoFuturo</title>
<title>Ecobjetivos</title>
</head>
<body>
<Navbar />
<header class="header-bg text-white">
<div class="container text-center">
<h1
class="display-1 mb-4 animate__animated animate__fadeInDown"
class="display-1 mb-4 animate__animated animate__fadeInDown londrina-sketch-regular"
>
Ecobjetivos
</h1>
@@ -169,37 +170,16 @@ const animateOnScroll = `
<section id="posts" class="py-5 bg-light">
<div class="container">
<h2 class="text-center mb-5 animate-on-scroll">
<h2 class="text-center mb-5 animate-on-scroll pt-1">
Posts Recientes
</h2>
<div class="row">
{
[1, 2, 3].map((num) => (
<div class="col-md-4 mb-4 animate-on-scroll">
<div class="card">
<div class="card-body">
<h5 class="card-title">
Título del Post {num}
</h5>
<p class="card-text">
Breve descripción del post {num}
...
</p>
<a href="#" class="btn btn-primary">
Leer más
</a>
</div>
</div>
</div>
))
}
</div>
<ListadoPostsHorizontal />
</div>
</section>
<section id="proyectos" class="py-5">
<div class="container">
<h2 class="text-center mb-5 animate-on-scroll">
<h2 class="text-center mb-5 animate-on-scroll pt-2">
Nuestros Proyectos
</h2>
<div class="row">
@@ -277,6 +257,29 @@ const 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>
.header-bg {
background-color: #4caf50;

9
src/pages/posts/prueba.md Normal file
View File

@@ -0,0 +1,9 @@
---
titulo: 'Título to chulo'
layout: '../../layouts/PostStyle.astro'
autor: 'Ben'
fecha: '08/10/24'
descripcion: 'Descripcion de prueba'
---
Here is my _great_ post!