Create hero and text with image components

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>