Create hero and text with image components

astro/src/components/web/Hero.astro

@@ -6,7 +6,6 @@ interface Props {
 }
 
 const hero = Astro.props.hero;
-console.log(hero);
 ---
 
 <div id={`hero-${hero.id}`} class="flex w-full">

astro/src/components/web/TextWithImage.astro

@@ -0,0 +1,33 @@
+---
+import { Image } from 'astro:assets';
+
+interface Props {
+    textWithImage: TextWithImageComponent;
+}
+
+const textWithImage = Astro.props.textWithImage;
+
+const imageSize = () => {
+    if (textWithImage.imageSize === "small") return "aspect-2/1";
+    else if (textWithImage.imageSize === "medium") return "aspect-26/17";
+    else return "aspect-39/29";
+}
+---
+
+<div id={`textwithimage-${textWithImage.id}`} class={`flex ${textWithImage.imageSide === "right" ? "flex-row" : "flex-row-reverse"} justify-between items-center py-20 px-12 container mx-auto gap-y-8 gap-x-18`}>
+    <div class="flex flex-col gap-2.5 w-[50%]">
+        <h2 class="text-5xl font-bold">{textWithImage.title}</h2>
+        { textWithImage.text !== null && (
+            <div>{textWithImage.text}</div>
+        ) }
+    </div>
+    <div class="w-[50%]">
+        <Image
+            src={textWithImage.image.url}
+            width={textWithImage.image.width}
+            height={textWithImage.image.height}
+            class={`rounded-2xl shadow-sm ${imageSize()} object-cover`}
+            alt=""
+        />
+    </div>
+</div>

astro/src/components/webpage/Webpage.astro

@@ -1,5 +1,6 @@
 ---
 import Hero from '../web/Hero.astro';
+import TextWithImage from '../web/TextWithImage.astro';
 
 interface Props {
     webpage: WebpageComponent[];
@@ -14,6 +15,7 @@ console.log(Astro.props.webpage);
     { components.map((component) => (
         <Fragment>
             { component.component === "Hero" && <Hero hero={component} /> }
+            { component.component === "TextWithImage" && <TextWithImage textWithImage={component} /> }
         </Fragment>
     )) }
 </div>