added components ui, fonts, header and footer
This commit is contained in:
parent
3ec4f92cc3
commit
6845c9f0d5
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 398 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 398 KiB |
|
|
@ -0,0 +1,18 @@
|
||||||
|
---
|
||||||
|
const {
|
||||||
|
title = "Centro del Reino de Paz y Justicia",
|
||||||
|
description =""
|
||||||
|
} = Astro.props;
|
||||||
|
---
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
|
<link rel="icon" href="/favicon.ico" />
|
||||||
|
<meta name="viewport" content="width=device-width" />
|
||||||
|
<meta name="generator" content={Astro.generator} />
|
||||||
|
<title>{title}</title>
|
||||||
|
<meta name="description" content={description} />
|
||||||
|
</head>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
---
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<template>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,28 @@
|
||||||
|
---
|
||||||
|
import Button from "./ui/Button.astro";
|
||||||
|
---
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div class="flex justify-between py-4">
|
||||||
|
<div class="border-l-4 border-primary pl-4">
|
||||||
|
<p
|
||||||
|
class="font-secondary text-primary font-bold leading-none py-2 text-md"
|
||||||
|
>
|
||||||
|
Centro del Reino<br /> De Paz y Justicia
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<nav
|
||||||
|
class="flex justify-evenly gap-10 items-center uppercase text-md text-white"
|
||||||
|
>
|
||||||
|
<div class="flex gap-8">
|
||||||
|
<a href="#">Inicio</a>
|
||||||
|
<a href="#">Somos</a>
|
||||||
|
<a href="#">Programas</a>
|
||||||
|
<a href="#">Noticias</a>
|
||||||
|
</div>
|
||||||
|
<div class="w-50">
|
||||||
|
<Button title="Contacto" url="/contacto" variant="primary" />
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
---
|
||||||
|
import HeroImage from '../assets/hero-image.webp';
|
||||||
|
---
|
||||||
|
|
||||||
|
<div class="h-screen p-5">
|
||||||
|
<div class="absolute">
|
||||||
|
<img src={HeroImage} alt="Hero Image" class="w-full h-screen object-cover" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
---
|
||||||
|
const { variant = "primary", title = "Botón", url = "#" } = Astro.props as {
|
||||||
|
variant?: Variant;
|
||||||
|
title?: string;
|
||||||
|
url?: string;
|
||||||
|
};
|
||||||
|
const variants = {
|
||||||
|
primary: "bg-[#EBE6D2] text-[#22523F] hover:bg-[#EBE6D2]/90 rounded-none w-full",
|
||||||
|
secondary: "bg-blue-700",
|
||||||
|
light: "bg-green-100",
|
||||||
|
} as const;
|
||||||
|
|
||||||
|
type Variant = keyof typeof variants;
|
||||||
|
|
||||||
|
const styles = variants[variant];
|
||||||
|
---
|
||||||
|
|
||||||
|
<a
|
||||||
|
href={url}
|
||||||
|
class={`${styles} px-4 py-2 rounded-md font-bold transition block text-center`}
|
||||||
|
>
|
||||||
|
{title}
|
||||||
|
</a>
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
---
|
||||||
|
import Header from "../components/Header.astro";
|
||||||
|
import BaseHead from "../components/BaseHead.astro";
|
||||||
|
import Footer from "../components/Footer.astro";
|
||||||
|
import "../styles/global.css";
|
||||||
|
const { title } = Astro.props;
|
||||||
|
---
|
||||||
|
|
||||||
|
<html lang="en">
|
||||||
|
<BaseHead title={title} />
|
||||||
|
<body class="font-primary max-w-480 mx-auto px-29">
|
||||||
|
<Header />
|
||||||
|
<article>
|
||||||
|
<slot />
|
||||||
|
</article>
|
||||||
|
<Footer />
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -1,25 +1,19 @@
|
||||||
---
|
---
|
||||||
import "../styles/global.css";
|
import "../styles/global.css";
|
||||||
import { getCollection, getEntry } from 'astro:content';
|
import { getCollection, getEntry } from "astro:content";
|
||||||
|
import MainLayout from "../layouts/MainLayout.astro";
|
||||||
|
import HeroHome from "../components/HeroHome.astro";
|
||||||
|
|
||||||
const newsItems = await getCollection('news');
|
const newsItems = await getCollection("news");
|
||||||
---
|
---
|
||||||
|
|
||||||
<html lang="en">
|
<MainLayout>
|
||||||
<head>
|
<HeroHome />
|
||||||
<meta charset="utf-8" />
|
|
||||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
|
||||||
<link rel="icon" href="/favicon.ico" />
|
|
||||||
<meta name="viewport" content="width=device-width" />
|
|
||||||
<meta name="generator" content={Astro.generator} />
|
|
||||||
<title>Astro</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<h1>Astro</h1>
|
|
||||||
{
|
{
|
||||||
newsItems.map(item => (
|
newsItems.map((item) => (
|
||||||
<li><a href={`/news/${item.id}`}>{item.data.title}</a></li>
|
<li>
|
||||||
|
<a href={`/news/${item.id}`}>{item.data.title}</a>
|
||||||
|
</li>
|
||||||
))
|
))
|
||||||
}
|
}
|
||||||
</body>
|
</MainLayout>
|
||||||
</html>
|
|
||||||
|
|
|
||||||
|
|
@ -1,2 +1,23 @@
|
||||||
@import "tailwindcss";
|
@import "tailwindcss";
|
||||||
@plugin '@tailwindcss/typography';
|
@plugin '@tailwindcss/typography';
|
||||||
|
|
||||||
|
@theme {
|
||||||
|
--font-primary: "Poppins", sans-serif;
|
||||||
|
--font-secondary: "Rockwell", sans-serif;
|
||||||
|
|
||||||
|
--color-primary: #EBE6D2;
|
||||||
|
--color-secondary: #CBA16A;
|
||||||
|
--color-thirdary: #003421;
|
||||||
|
--color-link: #CBA16A;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--background: #22523F;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: var(--font-primary);
|
||||||
|
background-color: var(--background);
|
||||||
|
min-height: 1080px;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue