Add contact to the website, fix some small things

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>