From ad25836de745c681286b185c1c9b50615fac5f03 Mon Sep 17 00:00:00 2001
From: itsfinniii <102350242+itsfinniii@users.noreply.github.com>
Date: Sat, 28 Mar 2026 15:38:55 +0100
Subject: [PATCH] Add contact to the website, fix some small things

---
 astro/src/components/web/Contact.astro      | 35 +++++++++++++++++++++
 astro/src/components/webpage/Webpage.astro  |  4 +--
 astro/src/content/pages/pages.ts            |  2 +-
 astro/src/graphql/pages/getAllPages.graphql |  2 +-
 astro/src/graphql/pages/getPage.graphql     |  2 +-
 astro/src/types/components/contact.d.ts     |  2 +-
 6 files changed, 41 insertions(+), 6 deletions(-)
 create mode 100644 astro/src/components/web/Contact.astro

diff --git a/astro/src/components/web/Contact.astro b/astro/src/components/web/Contact.astro
new file mode 100644
index 0000000..685d376
--- /dev/null
+++ b/astro/src/components/web/Contact.astro
@@ -0,0 +1,35 @@
+---
+import { getImageUrl } from '@/lib/images';
+import { markdownToHtml } from '@/lib/markdown';
+import { Image } from 'astro:assets';
+
+interface Props {
+    contact: ContactComponent;
+}
+
+const contact = Astro.props.contact;
+---
+
+<div
+    id={`contact-${contact.id}`}
+    class="flex lg:flex-row flex-col lg:justify-center justify-center items-center py-12 px-12 lg:container mx-auto gap-y-8 lg:gap-x-28 gap-x-18 lg:text-left text-center"
+>
+    <div class="flex flex-col gap-1.5">
+        <h2 class="text-5xl font-bold">{contact.title}</h2>
+        <div set:html={markdownToHtml(contact.text)}></div>
+    </div>
+
+    <div class="flex flex-col gap-2">
+        { contact.methods.map((method) => (
+            <a href={method.url} target="_blank" style={{ "--sc": method.color }} class="flex flex-row items-center gap-2 text-lg hover:text-(--sc) duration-200">
+                <Image
+                    src={method.icon.url}
+                    alt={method.title}
+                    width="30"
+                    height="30"
+                />
+                <span>{method.title}</span>
+            </a>
+        )) }
+    </div>
+</div>
diff --git a/astro/src/components/webpage/Webpage.astro b/astro/src/components/webpage/Webpage.astro
index 6fe6472..cea7ed7 100644
--- a/astro/src/components/webpage/Webpage.astro
+++ b/astro/src/components/webpage/Webpage.astro
@@ -9,14 +9,13 @@ import Reviews from '../web/Reviews.astro';
 import LastBlogs from '../web/LastBlogs.astro';
 import LastProjects from '../web/LastProjects.astro';
 import LastAlbums from '../web/LastAlbums.astro';
+import Contact from '../web/Contact.astro';
 
 interface Props {
     webpage: WebpageComponent[];
 }
 
 const components = Astro.props.webpage;
-
-console.log(Astro.props.webpage);
 ---
 
 <div class="flex flex-col">
@@ -29,6 +28,7 @@ console.log(Astro.props.webpage);
             { component.component === "FrequentlyAskedQuestions" && <FrequentlyAskedQuestions faq={component} /> }
             { component.component === "EquipmentTable" && <EquipmentTable equipment={component} /> }
             { component.component === "Reviews" && <Reviews reviews={component} /> }
+            { component.component === "Contact" && <Contact contact={component} /> }
             { component.component === "LastBlogs" && <LastBlogs blogs={component} /> }
             { component.component === "LastProjects" && <LastProjects projects={component} /> }
             { component.component === "LastGalleries" && <LastAlbums albums={component} /> }
diff --git a/astro/src/content/pages/pages.ts b/astro/src/content/pages/pages.ts
index d857b37..48fd61f 100644
--- a/astro/src/content/pages/pages.ts
+++ b/astro/src/content/pages/pages.ts
@@ -213,7 +213,7 @@ export function dataToPage(pageRecord: any): WebPage {
                     contactComponent.methods.push({
                         id: contactMethodRecord["id"],
                         title: contactMethodRecord["title"],
-                        text: contactMethodRecord["text"],
+                        url: contactMethodRecord["url"],
                         color: contactMethodRecord["color"],
                         icon: {
                             url: getImageUrl(contactMethodRecord["icon"]["filename_disk"]),
diff --git a/astro/src/graphql/pages/getAllPages.graphql b/astro/src/graphql/pages/getAllPages.graphql
index 1028cab..75eb97e 100644
--- a/astro/src/graphql/pages/getAllPages.graphql
+++ b/astro/src/graphql/pages/getAllPages.graphql
@@ -180,7 +180,7 @@ query getAllPages($date: String!) {
                         date_created,
                         date_updated,
                         title,
-                        text,
+                        url,
                         icon {
                             id,
                             created_on,
diff --git a/astro/src/graphql/pages/getPage.graphql b/astro/src/graphql/pages/getPage.graphql
index a91a6d9..87a9715 100644
--- a/astro/src/graphql/pages/getPage.graphql
+++ b/astro/src/graphql/pages/getPage.graphql
@@ -180,7 +180,7 @@ query getAllPages($date: String!, $route: String!) {
                         date_created,
                         date_updated,
                         title,
-                        text,
+                        url,
                         icon {
                             id,
                             created_on,
diff --git a/astro/src/types/components/contact.d.ts b/astro/src/types/components/contact.d.ts
index 79237b4..8155c93 100644
--- a/astro/src/types/components/contact.d.ts
+++ b/astro/src/types/components/contact.d.ts
@@ -10,7 +10,7 @@ type ContactComponent = {
 type ContactMethod = {
     id: string;
     title: string;
-    text: string;
+    url: string;
     color: string;
     icon: PhotoProps;
 }