- 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;