multiple fixes :)

src/components/BoxContainer.astro

@@ -0,0 +1,20 @@
+---
+const { props } = Astro.props;
+import { Icon } from "astro-icon/components";
+import Button from "./ui/Button.astro";
+
+---
+<div class={`aspect-square bg-[${props.bgColor}] p-4`}>
+    <!-- <Icon name="ph:" /> -->
+    <h2 class={`text-[${props.titleColor}] font-bold`}>{props.title}</h2>
+    <p class={`text-[${props.textColor}] text-lg`}>{props.copy}</p>
+    
+    {props.hasButton && (
+        <Button url="#" variant="primary" title="Leer Más" />
+    )}
+
+    {props.hasInput && (
+        <input type="text" placeholder="Yay"/>
+    )}
+    </div>
+</div>

src/components/HeroHome.astro

@@ -1,11 +1,43 @@
 ---
-import HeroImage from '../assets/hero-image.webp';
+import Header from './Header.astro';
 ---
 
-<div class="h-screen p-5">
-    <div class="container mx-auto">
-    <div class="absolute">
-        <img src={HeroImage} alt="Hero Image" class="w-full h-screen object-cover" />
-    </div>
+<div class="font-secondary">
+    <div class="h-screen container bg-[url(/src/assets/hero-image.webp)] bg-no-repeat bg-contain bg-bottom mx-auto">
+        <Header />
+        <div class="grid  grid-cols-2 justify-center items-center h-full">
+            <div class="grid grid-cols-1 gap-8">
+                <div>
+                    <img
+                        src="/src/assets/logo-metalico.png"
+                        alt="Logo Metalico"
+                        class="w-58 mb-4"
+                    />
+                </div>
+                <div class="text-primary font-bold font-primary">
+                    <h1 class="text-3xl">
+                        Dr. José Benjamín<br /> Pérez Matos
+                    </h1>
+                    <h6 class="uppercase text-white">Lider Fundador</h6>
+                </div>
+            </div>
+            <div class="grid grid-cols-1 gap-8">
+                <div
+                    class="w-1/2 font-primary font-semibold text-2xl text-primary gap-8 flex flex-col"
+                >
+                    <h2>
+                        “El sueño de mi vida es ver cumplida la visión de los
+                        profetas: un mundo de justicia y paz para el bien de
+                        Israel y de toda la humanidad.”
+                    </h2>
+                    <div class="w-32 self-end">
+                        <img
+                            src="/src/assets/white-dove.webp"
+                            alt="White Dove"
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
 </div>

src/components/InfoSection.astro

@@ -0,0 +1,16 @@
+---
+import Button from "./ui/Button.astro";
+import { infoboxes } from "../data/content/infosection.js";
+import BoxContainer from "./BoxContainer.astro";
+
+const { data } = Astro.props;
+---
+
+<div class="container mx-auto">
+    <div class="grid grid-cols-3">
+        { infoboxes.map((box) => (
+            <BoxContainer props={box} />    
+        ))}
+    </div>
+
+</div>

src/components/NewsCard.astro

@@ -4,20 +4,20 @@ import { Icon } from "astro-icon/components";
 import dayjs from "dayjs";
 
 const { data } = Astro.props;
-const nicedate = dayjs(data.date).format("D MMMM YYYY");
+const nicedate = dayjs(data.data.date).format("D MMMM YYYY");
 ---
 
 <div class="bg-[#EBE5D0] p-10">
   <Icon name="ph:arrow-circle-down-thin" class="text-8xl mb-8" />
   <p class="font-light text-2xl mb-8">
-    {data.city}, {data.country}<br />({nicedate}):
+    {data.data.city}, {data.data.country}<br />({nicedate}):
   </p>
-  <h3 class="text-2xl font-bold mb-8">{data.title}</h3>
+  <h3 class="text-2xl font-bold mb-8"><a href={`/news/${data.id}`}>{data.data.title}</a></h3>
 
   <div>
     <Image
-      src={data.thumbnail}
-      alt={data.title}
+      src={data.data.thumbnail}
+      alt={data.data.title}
       class="aspect-square object-cover"
     />
   </div>

src/components/NewsSection.astro

@@ -12,7 +12,7 @@ const newsItems = await getCollection("news");
     <div class="grid grid-cols-3 gap-20">
     {
 		newsItems.map((item) => (
-            <NewsCard data={item.data} />
+            <NewsCard data={item} />
 		))
 	}
     </div>

src/data/content/infosection.js

@@ -0,0 +1,32 @@
+export const infoboxes = [
+  {
+    title: 'Caja 1',
+    copy: 'Lorem ipsum dolor sit amet',
+    bgColor: '#CBA16A',
+    titleColor: '#003421',
+    textColor: '#003421',
+    buttonBgColor: '',
+    buttonLabelColor: '',
+    buttonLabel: '',
+    hasButton: true,
+    hasInput: false
+  },
+  // {
+  //   title: 'Caja 2',
+  //   copy: 'Lorem ipsum dolor sit amet',
+  //   bg: '#003421',
+  //   img: ''
+  // },
+  // {
+  //   title: 'Caja 3',
+  //   copy: 'Lorem ipsum dolor sit amet',
+  //   bg: '#EBE6D2'
+  // }
+]
+
+// bg
+// heading color
+// text color 
+// hasButton = boolean 
+// hasInput = boolean
+// bgImage

src/layouts/MainLayout.astro

@@ -9,9 +9,6 @@ const { title } = Astro.props;
 <html lang="en">
     <BaseHead title={title} />
     <body class="font-primary">
-        <div class="max-w-480 mx-auto px-29">
-            <Header />
-        </div>
         <article>
             <slot />
         </article>

src/pages/index.astro

@@ -6,6 +6,9 @@ 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 { infoboxes } from "../data/content/infosection.js";
 
 const carouselImages2 = [
   "https://picsum.photos/1920/800?random=1&grayscale",
@@ -17,9 +20,13 @@ const carouselImages2 = [
 <MainLayout>
   <HeroHome />
 
+  <InfoSection data={infoboxes} />
+
   <CarouselSection images={carouselImages2} />
 
   <NewsSection />
 
   <ParticipateSection />
+
+
 </MainLayout>

src/pages/news/[id].astro

@@ -1,5 +1,7 @@
 ---
-import "../../styles/global.css";
+import MainLayout from "../../layouts/MainLayout.astro";
+
+import CarouselSection from "../../components/CarouselSection.astro";
 import { Image } from "@unpic/astro";
 import { getCollection, render } from 'astro:content';
 // 1. Generate a new path for every collection entry
@@ -15,16 +17,7 @@ const { post } = Astro.props;
 const { Content } = await render(post);
 ---
 
-<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>
+	<MainLayout>
 		<h1>Astro</h1>
 		<h1>{post.data.title}</h1>
 		<Image
@@ -34,6 +27,8 @@ const { Content } = await render(post);
 			height={600}
 			alt={post.data.title}
 		/>
+		{ post.data.gallery && (
+			<CarouselSection images={post.data.gallery} />
+		)}
         <Content />
-	</body>
-</html>
+	</MainLayout>

src/styles/global.css

@@ -7,7 +7,7 @@
 
     --color-primary: #EBE6D2;
     --color-secondary: #CBA16A;
-    --color-thirdary: #003421;
+    --color-tertiary: #003421;
     --color-link: #CBA16A;
 }