Add webpage component with Hero component

astro/src/components/web/Hero.astro

@@ -0,0 +1,33 @@
+---
+import { Image } from 'astro:assets';
+
+interface Props {
+    hero: HeroComponent;
+}
+
+const hero = Astro.props.hero;
+console.log(hero);
+---
+
+<div id={`hero-${hero.id}`} class="flex w-full">
+    <div class="flex w-full h-screen static">
+        <Image
+            src={hero.backgroundImage.url}
+            width={hero.backgroundImage.width}
+            height={hero.backgroundImage.height}
+            class="flex w-full h-screen object-cover z-1"
+            alt=""
+        />
+
+        <div class="absolute flex items-center w-full h-screen bg-[#00000082] z-10">
+            <div class="absolute text-white md:left-40 sm:left-20 p-8 z-30">
+                <div class="flex flex-col gap-2.5 text-left">
+                    <h1 class="text-white font-bold text-8xl w-fit">{hero.title}</h1>
+                    { hero.text !== null && (
+                        <div class="text-2xl max-w-170">{hero.text}</div>
+                    ) }
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

astro/src/components/webpage/Webpage.astro

@@ -0,0 +1,19 @@
+---
+import Hero from '../web/Hero.astro';
+
+interface Props {
+    webpage: WebpageComponent[];
+}
+
+const components = Astro.props.webpage;
+
+console.log(Astro.props.webpage);
+---
+
+<div class="flex flex-col">
+    { components.map((component) => (
+        <Fragment>
+            { component.component === "Hero" && <Hero hero={component} /> }
+        </Fragment>
+    )) }
+</div>