Update index.html

index.html

@@ -319,7 +319,95 @@
         </div>
     </div>
 
+  <section class="px-4 py-16 max-w-5xl mx-auto">
+    <h2 class="text-3xl font-semibold text-center mb-10">Why Use This Tool?</h2>
 
+    <div class="grid gap-8 md:grid-cols-3 text-center">
+      <div>
+        <div class="text-4xl mb-4">⚡</div>
+        <h3 class="text-xl font-medium mb-2">Fast Setup</h3>
+        <p class="text-gray-600 text-sm">Turn your Google Sheet into a REST API in under a minute. No server, no hosting required.</p>
+      </div>
+
+      <div>
+        <div class="text-4xl mb-4">🧠</div>
+        <h3 class="text-xl font-medium mb-2">No Coding Needed</h3>
+        <p class="text-gray-600 text-sm">Generate the exact Google Apps Script code you need—just copy and paste.</p>
+      </div>
+
+      <div>
+        <div class="text-4xl mb-4">💸</div>
+        <h3 class="text-xl font-medium mb-2">Completely Free</h3>
+        <p class="text-gray-600 text-sm">No signup, no cost, no limits. Just paste your spreadsheet and go.</p>
+      </div>
+    </div>
+  </section>
+
+  <!-- FAQ Section -->
+  <section class="px-4 py-16 max-w-2xl mx-auto">
+    <h2 class="text-3xl font-semibold text-center mb-10">FAQs</h2>
+
+    <div class="space-y-4">
+      <!-- FAQ Item -->
+      <div>
+        <button class="w-full text-left flex justify-between items-center text-lg font-medium faq-toggle">
+          <span>What does this tool do?</span>
+          <svg class="w-5 h-5 transition-transform duration-200" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+            <path d="M6 9l6 6 6-6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </button>
+        <div class="mt-2 text-gray-600 hidden text-sm faq-content">
+          It generates Google Apps Script code to convert your spreadsheet into a REST API.
+        </div>
+      </div>
+
+      <div>
+        <button class="w-full text-left flex justify-between items-center text-lg font-medium faq-toggle">
+          <span>Is it really free?</span>
+          <svg class="w-5 h-5 transition-transform duration-200" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+            <path d="M6 9l6 6 6-6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </button>
+        <div class="mt-2 text-gray-600 hidden text-sm faq-content">
+          Yes, it's completely free. No signups, no limits.
+        </div>
+      </div>
+
+      <div>
+        <button class="w-full text-left flex justify-between items-center text-lg font-medium faq-toggle">
+          <span>Do I need to know coding?</span>
+          <svg class="w-5 h-5 transition-transform duration-200" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+            <path d="M6 9l6 6 6-6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </button>
+        <div class="mt-2 text-gray-600 hidden text-sm faq-content">
+          Nope. Just copy the generated code and paste it into your Apps Script editor.
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FAQ Toggle Script -->
+  <script>
+    document.querySelectorAll('.faq-toggle').forEach(button => {
+      button.addEventListener('click', () => {
+        const content = button.nextElementSibling;
+        const icon = button.querySelector('svg');
+
+        const isOpen = !content.classList.contains('hidden');
+
+        // Close all
+        document.querySelectorAll('.faq-content').forEach(el => el.classList.add('hidden'));
+        document.querySelectorAll('.faq-toggle svg').forEach(i => i.classList.remove('rotate-180'));
+
+        // Open if not already open
+        if (!isOpen) {
+          content.classList.remove('hidden');
+          icon.classList.add('rotate-180');
+        }
+      });
+    });
+  </script>
     <script>