- Added text to home page

- Added feedback form

src/App.vue

@@ -9,6 +9,7 @@
         <a href="https://gitea.adhd.sh/root/spritesheet-generator" target="_blank" class="text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300 transition-colors" data-rybbit-event="source-link"> <i class="fab fa-github"></i> Source </a>
         <a href="https://discord.gg/JTev3nzeDa" target="_blank" class="text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300 transition-colors" data-rybbit-event="discord-link"> <i class="fab fa-discord"></i> Discord </a>
         <a href="#" @click.prevent="openHelpModal" class="text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300 transition-colors" data-rybbit-event="help-link"> <i class="fas fa-question-circle"></i> Help </a>
+        <a href="#" @click.prevent="openFeedbackModal" class="text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300 transition-colors" data-rybbit-event="feedback-link"> <i class="fas fa-comment-dots"></i> Feedback </a>
       </div>
 
       <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-soft dark:shadow-gray-900/30 p-4 sm:p-8 transition-colors duration-300">
@@ -25,6 +26,12 @@
         </div>
         <file-uploader @upload-sprites="handleSpritesUpload" />
         <input ref="jsonFileInput" type="file" accept=".json,application/json" class="hidden" @change="handleJSONFileChange" />
+        <div v-if="!sprites.length" class="mt-8">
+          <div class="mt-2 leading-relaxed space-y-2">
+            <p>Create spritesheets for your game development and animation projects with our completely free, open-source spritesheet generator.</p>
+            <p>This powerful online tool lets you upload individual sprite images and automatically arrange them into optimized sprite sheets with customizable layouts - perfect for indie developers, animators, and studios of any size.</p>
+          </div>
+        </div>
 
         <div v-if="sprites.length > 0" class="mt-8">
           <div class="flex flex-wrap items-center justify-center sm:justify-start gap-3 sm:gap-6 mb-6 sm:mb-8">
@@ -102,6 +109,7 @@
     </Modal>
 
     <HelpModal :is-open="isHelpModalOpen" @close="closeHelpModal" />
+    <FeedbackModal :is-open="isFeedbackModalOpen" @close="closeFeedbackModal" />
     <SpritesheetSplitter :is-open="isSpritesheetSplitterOpen" :image-url="spritesheetImageUrl" :image-file="spritesheetImageFile" @close="closeSpritesheetSplitter" @split="handleSplitSpritesheet" />
     <GifFpsModal :is-open="isGifFpsModalOpen" @close="closeGifFpsModal" @confirm="downloadAsGif" :default-fps="10" />
   </div>
@@ -114,6 +122,7 @@
   import Modal from './components/utilities/Modal.vue';
   import SpritePreview from './components/SpritePreview.vue';
   import HelpModal from './components/HelpModal.vue';
+  import FeedbackModal from './components/FeedbackModal.vue';
   import SpritesheetSplitter from './components/SpritesheetSplitter.vue';
   import GifFpsModal from './components/GifFpsModal.vue';
   import DarkModeToggle from './components/utilities/DarkModeToggle.vue';
@@ -150,6 +159,7 @@
   });
   const isPreviewModalOpen = ref(false);
   const isHelpModalOpen = ref(false);
+  const isFeedbackModalOpen = ref(false);
   const isSpritesheetSplitterOpen = ref(false);
   const isGifFpsModalOpen = ref(false);
   const jsonFileInput = ref<HTMLInputElement | null>(null);
@@ -297,6 +307,15 @@
     isHelpModalOpen.value = false;
   };
 
+  // Feedback modal control
+  const openFeedbackModal = () => {
+    isFeedbackModalOpen.value = true;
+  };
+
+  const closeFeedbackModal = () => {
+    isFeedbackModalOpen.value = false;
+  };
+
   // Spritesheet splitter modal control
   const closeSpritesheetSplitter = () => {
     isSpritesheetSplitterOpen.value = false;

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>