[FEAT] FAQ update

src/components/Breadcrumbs.vue

@@ -20,6 +20,7 @@
       about: 'About Us',
       contact: 'Contact',
       'privacy-policy': 'Privacy Policy',
+      faq: 'FAQ',
     };
 
     if (route.name && route.name !== 'home') {

src/views/FAQ.vue

@@ -20,24 +20,48 @@
 
   const faqs = [
     {
-      question: 'What is a spritesheet?',
-      answer: 'A spritesheet is a single image file that contains multiple smaller images (sprites) arranged in a grid or packed layout. It is commonly used in game development to reduce memory usage and improve performance by reducing the number of draw calls.',
+      question: 'What is a sprite sheet generator?',
+      answer: 'A sprite sheet generator is a tool that combines multiple images into a single file. Our sprite maker online simplifies the process of making a sprite sheet, allowing you to create a sprite sheet for games and websites instantly.',
     },
     {
-      question: 'Is this tool free to use?',
-      answer: 'Yes, this Spritesheet Generator is completely free and open-source. You can use it for personal and commercial projects without any restrictions.',
+      question: 'How do I create a sprite sheet from images?',
+      answer: 'To create a sprite sheet, simply drag and drop your files into our images to sprite sheet converter. We support various formats, making it easy to turn PNG to sprite sheet or use our gif to sprite sheet converter.',
     },
     {
-      question: 'What image formats are supported?',
-      answer: 'We support importing common image formats including PNG, JPG, GIF, and WEBP. You can drag and drop multiple files at once to generate your spritesheet.',
+      question: 'Can I use this as a 2D sprite generator for games?',
+      answer: 'Yes! This tool acts as a powerful 2D sprite generator. Whether you need a character sprite sheet generator, an FNF sprite generator, or just a general sprite image generator, our tool handles the packing efficiently.',
     },
     {
-      question: 'How do I export my spritesheet?',
-      answer: 'Once you have arranged your sprites, click the "Export" button. You can choose to download the spritesheet image (PNG) and the accompanying data file (JSON/CSS) that describes the sprite positions.',
+      question: 'Do you support GIF to sprite sheet conversion?',
+      answer: 'Absolutely. You can turn gif into sprite sheet layouts easily. Our tool creates a clean sprite strip or sprite grid from your animations, functioning as a comprehensive image to sprite animation tool.',
     },
     {
-      question: 'Can I contribute to the project?',
-      answer: 'Absolutely! The project is open-source. You can find the source code on our Gitea repository and contribute by reporting bugs, suggesting features, or submitting pull requests.',
+      question: 'Is there a specific sprite sheet template?',
+      answer: 'No fixed sprite sheet template is needed. Our image sprite generator automatically arranges your uploads. It works as a flexible sprite converter for all your needs.',
+    },
+    {
+      question: 'How does the PNG to sprite conversion work?',
+      answer: 'Our PNG to sprite feature is simple. Upload your images, and the sprite sheet converter stitches them together. It is the easiest way to image to sprite converter workflows.',
+    },
+    {
+      question: 'Can I create a sprite sheet for Unity or Godot?',
+      answer: 'Yes, you can create a sprite sheet compatible with major game engines like Unity, Godot, and Unreal Engine. Our sprite sheet converter exports standard formats that work seamlessly with these tools.',
+    },
+    {
+      question: 'What is the difference between a sprite strip and a sprite grid?',
+      answer: 'A sprite strip arranges images in a single horizontal or vertical row, ideal for simple animations. A sprite grid arranges images in rows and columns, which is better for larger collections or character sprite sheets.',
+    },
+    {
+      question: 'Can I preview the image to sprite animation?',
+      answer: 'Yes, our tool includes a preview feature. After using the image to sprite animation function, you can play back the sequence to ensure your animation looks perfect before exporting.',
+    },
+    {
+      question: 'Does this sprite maker online work on mobile devices?',
+      answer: 'Our sprite maker online is fully responsive and works on most modern mobile devices and tablets, allowing you to create sprite sheets on the go.',
+    },
+    {
+      question: 'How many images can I add to the images to sprite sheet converter?',
+      answer: 'There is no hard limit on the number of images you can add to the images to sprite sheet converter, but performance may vary depending on your device and the size of the images.',
     },
   ];
 
@@ -48,12 +72,14 @@
   <div class="w-full">
     <div class="bg-white/80 dark:bg-gray-900/80 backdrop-blur-md rounded-3xl shadow-2xl border border-gray-200/50 dark:border-gray-700/50 p-8 sm:p-12">
       <h1 class="text-3xl sm:text-4xl font-extrabold text-gray-900 dark:text-white mb-6">Frequently Asked Questions</h1>
-      <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-10">
-        Got questions? We've got answers. If you can't find what you're looking for, feel free to <router-link to="/contact" class="text-blue-600 dark:text-blue-400 hover:underline">contact us</router-link>.
-      </p>
+      <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-10">Got questions? We've got answers. If you can't find what you're looking for, feel free to <router-link to="/contact" class="text-blue-600 dark:text-blue-400 hover:underline">contact us</router-link>.</p>
 
       <div class="space-y-6">
-        <details v-for="(faq, index) in faqs" :key="index" class="group bg-gray-50 dark:bg-gray-800/50 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden transition-all duration-300 hover:shadow-md open:bg-white dark:open:bg-gray-800 open:shadow-lg open:border-blue-200 dark:open:border-blue-900">
+        <details
+          v-for="(faq, index) in faqs"
+          :key="index"
+          class="group bg-gray-50 dark:bg-gray-800/50 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden transition-all duration-300 hover:shadow-md open:bg-white dark:open:bg-gray-800 open:shadow-lg open:border-blue-200 dark:open:border-blue-900"
+        >
           <summary class="flex items-center justify-between p-6 cursor-pointer list-none">
             <h3 class="text-lg font-bold text-gray-900 dark:text-white pr-4">{{ faq.question }}</h3>
             <span class="transform transition-transform duration-300 group-open:rotate-180 text-gray-500 dark:text-gray-400">