From a5efc7415b08343b986d4b991a025f338d008280 Mon Sep 17 00:00:00 2001
From: itsfinniii <102350242+itsfinniii@users.noreply.github.com>
Date: Fri, 20 Mar 2026 20:48:53 +0100
Subject: [PATCH] Create hero and text with image components

---
 astro/src/components/web/Hero.astro           |  1 -
 astro/src/components/web/TextWithImage.astro  | 33 +++++++++++++++++++
 astro/src/components/webpage/Webpage.astro    |  2 ++
 astro/src/content/pages/pages.ts              |  1 +
 astro/src/graphql/pages/getAllPages.graphql   |  3 +-
 astro/src/graphql/pages/getPage.graphql       |  3 +-
 astro/src/types/components/textWithImage.d.ts |  3 +-
 7 files changed, 42 insertions(+), 4 deletions(-)
 create mode 100644 astro/src/components/web/TextWithImage.astro

diff --git a/astro/src/components/web/Hero.astro b/astro/src/components/web/Hero.astro
index 1aa387c..8a87370 100644
--- a/astro/src/components/web/Hero.astro
+++ b/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">
diff --git a/astro/src/components/web/TextWithImage.astro b/astro/src/components/web/TextWithImage.astro
new file mode 100644
index 0000000..35488e1
--- /dev/null
+++ b/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>
diff --git a/astro/src/components/webpage/Webpage.astro b/astro/src/components/webpage/Webpage.astro
index 983fe42..ec24e63 100644
--- a/astro/src/components/webpage/Webpage.astro
+++ b/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>
diff --git a/astro/src/content/pages/pages.ts b/astro/src/content/pages/pages.ts
index 154ca6b..99f398f 100644
--- a/astro/src/content/pages/pages.ts
+++ b/astro/src/content/pages/pages.ts
@@ -47,6 +47,7 @@ export function dataToPage(pageRecord: any): WebPage {
                     title: component["twsi_title"],
                     text: component["twsi_text"],
                     imageSide: component["twsi_image_side"],
+                    imageSize: component["twsi_image_size"],
                     image: {
                         url: getImageUrl(component["image"]["filename_disk"]),
                         width: component["image"]["width"],
diff --git a/astro/src/graphql/pages/getAllPages.graphql b/astro/src/graphql/pages/getAllPages.graphql
index 32a8436..245448c 100644
--- a/astro/src/graphql/pages/getAllPages.graphql
+++ b/astro/src/graphql/pages/getAllPages.graphql
@@ -70,7 +70,8 @@ query getAllPages($date: String!) {
                         width,
                         height
                     },
-                    twsi_image_side: image_side
+                    twsi_image_side: image_side,
+                    twsi_image_size: image_size
                 }
                 
                 ...on Wall_Of_Text {
diff --git a/astro/src/graphql/pages/getPage.graphql b/astro/src/graphql/pages/getPage.graphql
index 14bf48d..fe51929 100644
--- a/astro/src/graphql/pages/getPage.graphql
+++ b/astro/src/graphql/pages/getPage.graphql
@@ -70,7 +70,8 @@ query getAllPages($date: String!, $route: String!) {
                         width,
                         height
                     },
-                    twsi_image_side: image_side
+                    twsi_image_side: image_side,
+                    twsi_image_size: image_size
                 }
                 
                 ...on Wall_Of_Text {
diff --git a/astro/src/types/components/textWithImage.d.ts b/astro/src/types/components/textWithImage.d.ts
index 19ff6ce..df35c9c 100644
--- a/astro/src/types/components/textWithImage.d.ts
+++ b/astro/src/types/components/textWithImage.d.ts
@@ -3,7 +3,8 @@ type TextWithImageComponent = {
 
     id: string;
     title: string;
-    text: string;
+    text: string | null;
     image: PhotoProps;
     imageSide: "left" | "right";
+    imageSize: "small" | "medium" | "large";
 }