Organizing components into sections

Added title section
Added color section
Added Mision y Vision and two title sections to homepage

src/components/section/ColorSection.astro

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

src/components/section/InfoSection.astro

@@ -1,7 +1,6 @@
 ---
-import Button from "./ui/Button.astro";
+import { infoboxes } from "../../data/content/infosection.js";
-import { infoboxes } from "../data/content/infosection.js";
+import BoxContainer from "../BoxContainer.astro";
-import BoxContainer from "./BoxContainer.astro";
 
 const { data } = Astro.props;
 ---

src/components/section/NewsSection.astro

@@ -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">

src/components/section/TitleSection.astro

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

src/icons/logo.svg

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

src/pages/index.astro

@@ -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 NewsSection from "../components/section/NewsSection.astro";
-import ParticipateSection from "../components/ParticipateSection.astro";
+import ParticipateSection from "../components/section/ParticipateSection.astro";
-import CarouselSection from "../components/CarouselSection.astro";
+import CarouselSection from "../components/section/CarouselSection.astro";
-import InfoSection from "../components/InfoSection.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>