From 206c5665a28e1142f1dacedc6fd4b65ce7d73563 Mon Sep 17 00:00:00 2001
From: Luke Else <mail@luke-else.co.uk>
Date: Fri, 23 May 2025 20:41:32 +0100
Subject: [PATCH] FEAT: Added contact page

---
 src/routes/contact/+page.svelte | 101 ++++++++++++++++++++++++++++----
 1 file changed, 91 insertions(+), 10 deletions(-)

diff --git a/src/routes/contact/+page.svelte b/src/routes/contact/+page.svelte
index 58e64b4..ea74d78 100644
--- a/src/routes/contact/+page.svelte
+++ b/src/routes/contact/+page.svelte
@@ -1,14 +1,95 @@
 <script lang="ts">
     import { toasts } from 'svelte-toasts';
+    import Card from '$lib/components/Cards/Card.svelte';
+
+    import { page } from '$app/state';
+    const sent = page.url.searchParams.get('sent');
+
+    if (sent == 'true') {
+        toasts.add({
+            title: 'Message sent!',
+            description: 'Thank you for contacting me.',
+            type: 'success',
+            duration: 4000,
+            placement: 'bottom-center'
+        });
+    }
+
+    if (sent == 'false') {
+        toasts.add({
+            title: 'Message not sent!',
+            description: 'Please try again later.',
+            type: 'error',
+            duration: 4000,
+            placement: 'bottom-center'
+        });
+    }
 </script>
 
-<div style="display: none;">
-    {toasts.add({
-        title: 'Warning',
-        description: 'This page is under construction',
-        duration: 0,
-        type: 'warning',
-        placement: 'center-center',
-        showProgress: true
-    })}
-</div>
+<Card headerLeft="Contact Me">
+    <!-- Contact Form -->
+     <form class="w-full max-w-3xl mx-auto flex flex-col gap-4 text-lg" action="https://api.staticforms.xyz/submit" method="post">
+        <div class="hidden">
+            <input type="hidden" name="accessKey" value="fbb5ec04-506b-448a-a445-a2e47579a966">
+            <input type="hidden" name="replyTo" value="@">
+            <input type="text" name="honeypot" style="display: none;">
+            <input type="hidden" name="redirectTo" value="https://luke-else.co.uk/contact?sent=true">
+        </div>
+        <div class="flex flex-col md:flex-row gap-3">
+            <div class="flex-1">
+                <label class="block text-xs font-medium mb-1" for="name">Name</label>
+                <input
+                    id="name"
+                    name="name"
+                    type="text"
+                    class="w-full rounded-lg border border-gray-400 px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-blue-600 transition placeholder-gray-400"
+                    required
+                    placeholder="Your name"
+                />
+            </div>
+            <div class="flex-1">
+                <label class="block text-xs font-medium mb-1" for="email">Email</label>
+                <input
+                    id="email"
+                    name="email"
+                    type="email"
+                    class="w-full rounded-lg border border-gray-400 px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-blue-600 transition placeholder-gray-400"
+                    required
+                    placeholder="you@email.com"
+                />
+            </div>
+            <div class="flex-1">
+                <label class="block text-xs font-medium mb-1" for="subject">Subject</label>
+                <input
+                    id="subject"
+                    name="subject"
+                    type="text"
+                    class="w-full rounded-lg border border-gray-400 px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-blue-600 transition placeholder-gray-400"
+                    required
+                    placeholder="Subject"
+                />
+            </div>
+        </div>
+        <div>
+            <label class="block text-xs font-medium mb-1" for="message">Message</label>
+            <textarea
+                id="message"
+                name="message"
+                class="w-full rounded-lg border border-gray-400 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-600 transition min-h-[80px] placeholder-gray-400"
+                required
+                placeholder="Your message"
+            ></textarea>
+        </div>
+        <!-- reCAPTCHA integration -->
+        <div class="">
+            <div class="g-recaptcha" data-sitekey="6LfjQAwrAAAAAIF57u8Wt4w5L5vBEWi5DfXXBuGy"></div>
+            <script src="https://www.google.com/recaptcha/api.js" async defer></script>
+        </div>
+        <button
+            type="submit"
+            class="self-end bg-blue-600 hover:bg-blue-700 text-white font-semibold py-1.5 px-8 rounded-lg transition"
+        >
+            Send Message
+        </button>
+    </form>
+</Card>