Organizing components into sections
Added title section Added color section Added Mision y Vision and two title sections to homepage
This commit is contained in:
Julio Ruiz
parent
da115b1aa0
commit
345904df7c
|
|
@ -0,0 +1,11 @@
|
|||
---
|
||||
const { bgColor, titleColor, textColor, title, text } = Astro.props;
|
||||
|
||||
console.log( 'Props', bgColor )
|
||||
---
|
||||
<div class={`bg-[${bgColor}] py-20`}>
|
||||
<div class="container mx-auto">
|
||||
<h4 class={`uppercase text-lg ${titleColor} font-primary text-center mb-4 font-bold`}>{title}</h4>
|
||||
<p class={`text-3xl font-secondary ${textColor} text-center`}>{text}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,7 +1,6 @@
|
|||
---
|
||||
import Button from "./ui/Button.astro";
|
||||
import { infoboxes } from "../data/content/infosection.js";
|
||||
import BoxContainer from "./BoxContainer.astro";
|
||||
import { infoboxes } from "../../data/content/infosection.js";
|
||||
import BoxContainer from "../BoxContainer.astro";
|
||||
|
||||
const { data } = Astro.props;
|
||||
---
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
import Image from "astro/components/Image.astro";
|
||||
import { getCollection, getEntry } from "astro:content";
|
||||
import NewsCard from "./NewsCard.astro";
|
||||
import NewsCard from "../NewsCard.astro";
|
||||
const newsItems = await getCollection("news");
|
||||
---
|
||||
<div id="news" class="bg-[#22523F] py-20">
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
---
|
||||
import { Icon } from 'astro-icon/components'
|
||||
|
||||
const { title } = Astro.props;
|
||||
---
|
||||
<div class="py-20 bg-white">
|
||||
<div class="container mx-auto">
|
||||
<div class="flex justify-between">
|
||||
<h2 class="text-tertiary font-secondary text-6xl font-bold">{title}</h2>
|
||||
<Icon name="logo" class="text-6xl" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 36 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g transform="matrix(0.75,0,0,0.75,-1317.724273,-7046.297364)"><g transform="matrix(1.212121,0,0,1.212121,0,0)"><g transform="matrix(1,0,0,1,1484.5277,7760.8391)"><path d="M0,18.913l-7.433,0c-0.01,0 -0.019,0 -0.029,-0.001l-2.807,0l-5.141,8.91c-0.064,0.111 -0.18,0.173 -0.3,0.173c-0.058,0 -0.118,-0.015 -0.172,-0.046c-0.069,-0.04 -0.118,-0.099 -0.146,-0.167l-5.127,-8.87l-10.267,0c-0.124,0 -0.238,-0.066 -0.299,-0.173c-0.062,-0.107 -0.062,-0.238 -0.001,-0.345l5.131,-8.911l-5.131,-8.885c-0.061,-0.106 -0.061,-0.238 0,-0.345c0.062,-0.107 0.176,-0.173 0.3,-0.173l10.244,0l5.136,-8.92c0.095,-0.165 0.306,-0.222 0.471,-0.127c0.041,0.024 0.076,0.055 0.103,0.09c0.036,0.027 0.067,0.062 0.091,0.104l5.109,8.854l10.267,0c0.123,0 0.237,0.066 0.299,0.173c0.062,0.107 0.062,0.238 0,0.345l-5.134,8.897l5.135,8.899c0.062,0.107 0.062,0.238 -0,0.345c-0.062,0.107 -0.175,0.173 -0.299,0.173m-15.662,-28.825c-10.697,0 -19.369,8.671 -19.369,19.368c0,10.697 8.672,19.369 19.369,19.369c10.698,0 19.369,-8.672 19.369,-19.369c-0,-10.697 -8.671,-19.368 -19.369,-19.368" style="fill:#cca16a;fill-rule:nonzero;"/></g></g></g></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
|
|
@ -3,12 +3,14 @@ import "../styles/global.css";
|
|||
|
||||
import MainLayout from "../layouts/MainLayout.astro";
|
||||
import HeroHome from "../components/HeroHome.astro";
|
||||
import NewsSection from "../components/NewsSection.astro";
|
||||
import ParticipateSection from "../components/ParticipateSection.astro";
|
||||
import CarouselSection from "../components/CarouselSection.astro";
|
||||
import InfoSection from "../components/InfoSection.astro";
|
||||
import NewsSection from "../components/section/NewsSection.astro";
|
||||
import ParticipateSection from "../components/section/ParticipateSection.astro";
|
||||
import CarouselSection from "../components/section/CarouselSection.astro";
|
||||
import InfoSection from "../components/section/InfoSection.astro";
|
||||
|
||||
import { infoboxes } from "../data/content/infosection.js";
|
||||
import ColorSection from "../components/section/ColorSection.astro";
|
||||
import TitleSection from "../components/section/TitleSection.astro";
|
||||
|
||||
const carouselImages2 = [
|
||||
"https://picsum.photos/1920/800?random=1&grayscale",
|
||||
|
|
@ -22,11 +24,28 @@ const carouselImages2 = [
|
|||
|
||||
<InfoSection data={infoboxes} />
|
||||
|
||||
<TitleSection title="Dr. José Benjamín Pérez Matos | Trayectoria" />
|
||||
|
||||
<ColorSection
|
||||
bgColor="#22523F"
|
||||
titleColor="text-[#ffffff]"
|
||||
textColor="text-[#CBA16A]"
|
||||
title="Misión"
|
||||
text="Formar líderes, impulsar iniciativas educativas y promover acciones públicas orientadas a la justicia y la paz, desde una base ética y espiritual firme, con un compromiso explícito con Israel y con la responsabilidad de contribuir al bienestar y la estabilidad de la humanidad en su conjunto." />
|
||||
|
||||
<ColorSection
|
||||
bgColor="#CBA16A"
|
||||
titleColor="text-[#ffffff]"
|
||||
textColor="text-[#ffffff]"
|
||||
title="Visión"
|
||||
text="Consolidarse como un actor internacional de referencia en formación de liderazgo, diplomacia pública y proyección insti- tucional, reconocido por su coherencia, su claridad de valores y su contribución concreta a la construcción de un mundo ali- neado con la visión profética de justicia y paz." />
|
||||
|
||||
<TitleSection title="Valores Intitucionales" />
|
||||
|
||||
<CarouselSection images={carouselImages2} />
|
||||
|
||||
<NewsSection />
|
||||
|
||||
<ParticipateSection />
|
||||
|
||||
|
||||
</MainLayout>
|
||||
|
|
|
|||
Loading…
Reference in New Issue