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 { 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">
|
||||
<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>Astro</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Astro</h1>
|
||||
{
|
||||
newsItems.map(item => (
|
||||
<li><a href={`/news/${item.id}`}>{item.data.title}</a></li>
|
||||
))
|
||||
}
|
||||
</body>
|
||||
</html>
|
||||
<MainLayout>
|
||||
<HeroHome />
|
||||
{
|
||||
newsItems.map((item) => (
|
||||
<li>
|
||||
<a href={`/news/${item.id}`}>{item.data.title}</a>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</MainLayout>
|
||||
|
|
|
|||
|
|
@ -1,2 +1,23 @@
|
|||
@import "tailwindcss";
|
||||
@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