- Added text to home page

- Added feedback form

src/components/FeedbackModal.vue

@@ -0,0 +1,103 @@
+<template>
+  <Modal :is-open="isOpen" @close="close" title="Send feedback" :initialWidth="700" :initialHeight="520">
+    <form class="h-full flex flex-col" @submit.prevent="submit" novalidate>
+      <div class="flex-1 overflow-auto p-4 space-y-4 dark:bg-gray-800">
+        <p class="text-sm text-gray-600 dark:text-gray-300">We’d love to hear your thoughts. Only the fields below are required and will be sent securely.</p>
+
+        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+          <div>
+            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" for="fb-name">Name</label>
+            <input id="fb-name" v-model="name" type="text" class="w-full px-3 py-2 rounded-lg border border-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none" placeholder="Jane Doe" />
+          </div>
+          <div>
+            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" for="fb-contact">Contact</label>
+            <input id="fb-contact" v-model="contact" type="text" class="w-full px-3 py-2 rounded-lg border border-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none" placeholder="email, matrix, discord, etc." />
+          </div>
+        </div>
+
+        <div>
+          <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" for="fb-content">Content</label>
+          <textarea
+            id="fb-content"
+            v-model="content"
+            rows="6"
+            class="w-full px-3 py-2 rounded-lg border border-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none"
+            placeholder="Describe your feedback here..."
+            required
+          ></textarea>
+        </div>
+
+        <p v-if="error" class="text-sm text-red-600 dark:text-red-400">{{ error }}</p>
+        <p v-if="success" class="text-sm text-green-600 dark:text-green-400">{{ success }}</p>
+      </div>
+
+      <div class="border-t border-gray-200 dark:border-gray-700 p-3 flex justify-end gap-2">
+        <button type="button" class="px-4 py-2 rounded-lg bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-800 dark:text-gray-100" @click="close" :disabled="loading">Close</button>
+        <button type="submit" class="px-4 py-2 rounded-lg bg-blue-500 hover:bg-blue-600 text-white disabled:opacity-60 disabled:cursor-not-allowed" :disabled="loading">
+          <span v-if="!loading">Send feedback</span>
+          <span v-else>Sending…</span>
+        </button>
+      </div>
+    </form>
+  </Modal>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import Modal from './utilities/Modal.vue';
+
+  const props = defineProps<{ isOpen: boolean }>();
+  const emit = defineEmits<{ (e: 'close'): void }>();
+
+  const name = ref('');
+  const contact = ref('');
+  const content = ref('');
+  const loading = ref(false);
+  const error = ref('');
+  const success = ref('');
+
+  const close = () => emit('close');
+
+  const submit = async () => {
+    error.value = '';
+    success.value = '';
+    if (!content.value.trim()) {
+      error.value = 'Please enter some feedback (content).';
+      return;
+    }
+
+    loading.value = true;
+    try {
+      const res = await fetch('https://pb1.adhd.sh/api/collections/feedback/records', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          name: name.value || null,
+          contact: contact.value || null,
+          content: content.value,
+        }),
+      });
+
+      if (!res.ok) {
+        const text = await res.text().catch(() => '');
+        throw new Error(text || `Request failed with status ${res.status}`);
+      }
+
+      success.value = 'Thank you! Your feedback was sent.';
+      // Reset fields
+      name.value = '';
+      contact.value = '';
+      content.value = '';
+
+      // Optionally close after short delay
+      setTimeout(() => close(), 600);
+    } catch (e: any) {
+      console.error('Failed to send feedback:', e);
+      error.value = 'Failed to send feedback. Please try again later.';
+    } finally {
+      loading.value = false;
+    }
+  };
+</script>