feat: add FAQ component to provide users with essential information about LibreDB Studio

Author: cevheri

src/components/FAQ.astro

@@ -0,0 +1,222 @@
+---
+const faqs = [
+  {
+    question: "Is LibreDB Studio really free?",
+    answer: "Yes, 100% free and open source under the MIT license. No hidden costs, no premium tiers, no feature limitations. You get the full product, forever. We believe great developer tools should be accessible to everyone."
+  },
+  {
+    question: "Can I self-host LibreDB Studio?",
+    answer: "Absolutely! Self-hosting is a first-class citizen. Deploy with Docker, Kubernetes, or any Node.js environment. Your data stays on your infrastructure, under your control. We provide detailed deployment guides for all major platforms."
+  },
+  {
+    question: "Which AI providers are supported?",
+    answer: "We support multiple AI providers out of the box: Google Gemini (default), OpenAI (GPT-4, GPT-3.5), and local LLMs via Ollama or LM Studio. You can switch providers anytime or even run completely offline with local models."
+  },
+  {
+    question: "Is my database connection secure?",
+    answer: "Security is our top priority. All connections use TLS/SSL encryption. Credentials are never stored in plain text. For self-hosted deployments, your data never leaves your network. We also support JWT authentication and role-based access control (RBAC)."
+  },
+  {
+    question: "Which databases are supported?",
+    answer: "Currently we support PostgreSQL, MySQL, SQLite, and MongoDB. Each adapter is optimized for its specific database with full feature support including schema inspection, query execution, and maintenance tools. More databases coming soon!"
+  },
+  {
+    question: "Can I use it on my phone or tablet?",
+    answer: "Yes! LibreDB Studio is built mobile-first. The entire UI is touch-optimized and responsive. Check your production database from anywhere - perfect for on-call situations or quick fixes on the go."
+  },
+  {
+    question: "Do I need to install anything?",
+    answer: "No installation required for end users. LibreDB Studio runs entirely in your browser. For self-hosting, you just need Docker or Node.js. That's it - no Java, no Electron, no heavy desktop apps."
+  },
+  {
+    question: "How does it compare to pgAdmin or DBeaver?",
+    answer: "Unlike pgAdmin (PostgreSQL only) or DBeaver (desktop app), LibreDB Studio is web-based, mobile-ready, and AI-powered. Zero installation, works on any device, and includes an AI assistant that understands your schema. Plus, it's lighter and faster."
+  },
+];
+---
+
+<section id="faq" class="py-16 md:py-24 relative">
+  <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+    <!-- Section Header -->
+    <div class="text-center mb-10 md:mb-16 px-2">
+      <h2 class="text-2xl sm:text-3xl md:text-4xl font-bold text-white mb-3 md:mb-4">
+        Frequently Asked <span class="gradient-text">Questions</span>
+      </h2>
+      <p class="text-sm md:text-lg text-slate-400 max-w-2xl mx-auto">
+        Everything you need to know about LibreDB Studio.
+      </p>
+    </div>
+
+    <!-- FAQ Accordion -->
+    <div class="space-y-3 md:space-y-4">
+      {faqs.map((faq, index) => (
+        <div class="faq-item rounded-xl md:rounded-2xl bg-slate-900/50 border border-slate-800 overflow-hidden transition-all duration-300 hover:border-slate-700">
+          <button
+            type="button"
+            class="faq-trigger w-full flex items-center justify-between gap-4 p-4 md:p-6 text-left transition-colors"
+            data-faq-index={index}
+            aria-expanded="false"
+          >
+            <span class="text-sm md:text-base font-medium text-white pr-4">{faq.question}</span>
+            <div class="faq-icon-wrapper flex-shrink-0 w-8 h-8 md:w-10 md:h-10 rounded-full bg-slate-800 flex items-center justify-center transition-all duration-300">
+              <svg class="faq-icon w-4 h-4 md:w-5 md:h-5 text-primary-400 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v12m6-6H6"></path>
+              </svg>
+            </div>
+          </button>
+          <div class="faq-content hidden" data-faq-content={index}>
+            <div class="px-4 md:px-6 pb-4 md:pb-6">
+              <div class="pt-2 border-t border-slate-800">
+                <p class="pt-4 text-sm md:text-base text-slate-400 leading-relaxed">{faq.answer}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+
+    <!-- Still have questions -->
+    <div class="mt-10 md:mt-12 text-center p-6 md:p-8 rounded-2xl bg-gradient-to-r from-primary-950/50 to-accent-950/50 border border-primary-500/20">
+      <div class="w-12 h-12 md:w-14 md:h-14 mx-auto mb-4 rounded-full bg-primary-500/10 flex items-center justify-center">
+        <svg class="w-6 h-6 md:w-7 md:h-7 text-primary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+        </svg>
+      </div>
+      <h3 class="text-lg md:text-xl font-semibold text-white mb-2">Still have questions?</h3>
+      <p class="text-sm md:text-base text-slate-400 mb-4 md:mb-6">
+        Can't find the answer you're looking for? Reach out to our community.
+      </p>
+      <div class="flex flex-col sm:flex-row items-center justify-center gap-3">
+        <a
+          href="https://github.com/libredb/libredb-studio/discussions"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-5 py-2.5 bg-slate-800 hover:bg-slate-700 text-white text-sm font-medium rounded-lg transition-colors border border-slate-700"
+        >
+          <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+            <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+          </svg>
+          GitHub Discussions
+        </a>
+        <a
+          href="https://www.linkedin.com/company/libredb"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-5 py-2.5 bg-primary-600 hover:bg-primary-500 text-white text-sm font-medium rounded-lg transition-colors"
+        >
+          <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+            <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
+          </svg>
+          Follow on LinkedIn
+        </a>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- FAQ Schema for SEO -->
+<script is:inline type="application/ld+json">
+{
+  "@context": "https://schema.org",
+  "@type": "FAQPage",
+  "mainEntity": [
+    {
+      "@type": "Question",
+      "name": "Is LibreDB Studio really free?",
+      "acceptedAnswer": {
+        "@type": "Answer",
+        "text": "Yes, 100% free and open source under the MIT license. No hidden costs, no premium tiers, no feature limitations."
+      }
+    },
+    {
+      "@type": "Question",
+      "name": "Can I self-host LibreDB Studio?",
+      "acceptedAnswer": {
+        "@type": "Answer",
+        "text": "Absolutely! Self-hosting is a first-class citizen. Deploy with Docker, Kubernetes, or any Node.js environment."
+      }
+    },
+    {
+      "@type": "Question",
+      "name": "Which AI providers are supported?",
+      "acceptedAnswer": {
+        "@type": "Answer",
+        "text": "We support Google Gemini (default), OpenAI (GPT-4, GPT-3.5), and local LLMs via Ollama or LM Studio."
+      }
+    },
+    {
+      "@type": "Question",
+      "name": "Is my database connection secure?",
+      "acceptedAnswer": {
+        "@type": "Answer",
+        "text": "Security is our top priority. All connections use TLS/SSL encryption. Credentials are never stored in plain text."
+      }
+    },
+    {
+      "@type": "Question",
+      "name": "Which databases are supported?",
+      "acceptedAnswer": {
+        "@type": "Answer",
+        "text": "Currently we support PostgreSQL, MySQL, SQLite, and MongoDB with full feature support."
+      }
+    },
+    {
+      "@type": "Question",
+      "name": "Can I use it on my phone or tablet?",
+      "acceptedAnswer": {
+        "@type": "Answer",
+        "text": "Yes! LibreDB Studio is built mobile-first. The entire UI is touch-optimized and responsive."
+      }
+    },
+    {
+      "@type": "Question",
+      "name": "Do I need to install anything?",
+      "acceptedAnswer": {
+        "@type": "Answer",
+        "text": "No installation required for end users. LibreDB Studio runs entirely in your browser."
+      }
+    },
+    {
+      "@type": "Question",
+      "name": "How does it compare to pgAdmin or DBeaver?",
+      "acceptedAnswer": {
+        "@type": "Answer",
+        "text": "Unlike pgAdmin or DBeaver, LibreDB Studio is web-based, mobile-ready, and AI-powered with zero installation required."
+      }
+    }
+  ]
+}
+</script>
+
+<script>
+  document.querySelectorAll('.faq-trigger').forEach((trigger) => {
+    trigger.addEventListener('click', () => {
+      const index = trigger.getAttribute('data-faq-index');
+      const content = document.querySelector(`[data-faq-content="${index}"]`);
+      const icon = trigger.querySelector('.faq-icon');
+      const iconWrapper = trigger.querySelector('.faq-icon-wrapper');
+      const isExpanded = trigger.getAttribute('aria-expanded') === 'true';
+
+      // Toggle current FAQ
+      trigger.setAttribute('aria-expanded', (!isExpanded).toString());
+      content?.classList.toggle('hidden');
+
+      // Rotate icon (+ to -)
+      if (!isExpanded) {
+        icon?.classList.add('rotate-45');
+        iconWrapper?.classList.add('bg-primary-600');
+        iconWrapper?.classList.remove('bg-slate-800');
+      } else {
+        icon?.classList.remove('rotate-45');
+        iconWrapper?.classList.remove('bg-primary-600');
+        iconWrapper?.classList.add('bg-slate-800');
+      }
+    });
+  });
+</script>
+
+<style>
+  .faq-icon.rotate-45 {
+    transform: rotate(45deg);
+  }
+</style>

src/pages/index.astro

@@ -7,6 +7,7 @@ import WhyLibreDB from '../components/WhyLibreDB.astro';
 import Databases from '../components/Databases.astro';
 import TechStack from '../components/TechStack.astro';
 import Testimonials from '../components/Testimonials.astro';
+import FAQ from '../components/FAQ.astro';
 import GetStarted from '../components/GetStarted.astro';
 import Footer from '../components/Footer.astro';
 import BottomNav from '../components/BottomNav.astro';
@@ -21,6 +22,7 @@ import BottomNav from '../components/BottomNav.astro';
     <Databases />
     <TechStack />
     <Testimonials />
+    <FAQ />
     <GetStarted />
   </main>
   <Footer />