feat: faq section on landing page as well as docs

apps/formbricks-com/app/docs/faq/page.mdx

@@ -0,0 +1,14 @@
+import FaQ from "@/components/docs/docsFaq";
+
+export const meta = {
+  title: "FaQ",
+  description: "Frequently Asked Questions about Formbricks and how to use it.",
+};
+
+#### FaQ
+
+# Frequently Asked Questions
+
+Here you'll find help with Frequently Recurring Problems. If you can't find an answer to your question, please Join our [Discord server](https://formbricks.com/discord).
+
+<FaQ />

apps/formbricks-com/components/docs/Navigation.tsx

@@ -254,6 +254,7 @@ export const navigation: Array<NavGroup> = [
       { title: "Setup Dev Environment", href: "/docs/contributing/setup" },
       { title: "Demo App", href: "/docs/contributing/demo" },
       { title: "Troubleshooting", href: "/docs/contributing/troubleshooting" },
+      { title: "FaQ", href: "/docs/faq" },
     ],
   },
   {

apps/formbricks-com/components/docs/docsFaq.tsx

@@ -0,0 +1,60 @@
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@formbricks/ui";
+
+const FAQ_DATA = [
+  {
+    question: "What is an environment ID?",
+    answer: () => (
+      <>
+        The environment ID is a unique identifier associated with each Environment in Formbricks,
+        distinguishing between different setups like production, development, etc.
+      </>
+    ),
+  },
+  {
+    question: "How can I implement authentication for the Formbricks API?",
+    answer: () => (
+      <>
+        Formbricks provides 2 types of API keys for each environment ie development and production. You can
+        generate, view, and manage these keys in the Settings section on the Admin dashboard. Include the API
+        key in your requests to authenticate and gain access to Formbricks functionalities.
+      </>
+    ),
+  },
+  {
+    question: "Can I run the deployment shell script on any server?",
+    answer: () => (
+      <>
+        You can run it on any machine you own as long as its running a <b> Linux Ubuntu </b> distribution. And
+        to forward the requests, make sure you have an <b>A record</b> setup for your domain pointing to the
+        server.
+      </>
+    ),
+  },
+  {
+    question: "Can I self-host Formbricks?",
+    answer: () => (
+      <>
+        Absolutely! We provide an option for users to host Formbricks on their own server, ensuring even more
+        control over data and compliance. And the best part? Self-hosting is available for free, always. For
+        documentation on self hosting, click{" "}
+        <a href="/docs/self-hosting/deployment" className="text-brand-dark dark:text-brand-light">
+          here
+        </a>
+        .
+      </>
+    ),
+  },
+];
+
+export default function FaQ() {
+  return (
+    <Accordion type="single" collapsible>
+      {FAQ_DATA.map((faq, index) => (
+        <AccordionItem key={`item-${index}`} value={`item-${index + 1}`} className="not-prose mb-0 mt-0">
+          <AccordionTrigger>{faq.question}</AccordionTrigger>
+          <AccordionContent>{faq.answer()}</AccordionContent>
+        </AccordionItem>
+      ))}
+    </Accordion>
+  );
+}

apps/formbricks-com/components/home/Faq.tsx

@@ -0,0 +1,79 @@
+import HeadingCentered from "@/components/shared/HeadingCentered";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@formbricks/ui";
+
+const FAQ_DATA = [
+  {
+    question: "What is Formbricks?",
+    answer: () => (
+      <>
+        Formbricks is an open-source Experience Management tool that helps businesses understand what
+        customers think and feel about their products. It integrates natively into your platform to conduct
+        user research with a focus on data privacy and minimal development intervention.
+      </>
+    ),
+  },
+  {
+    question: "How do I integrate Formbricks into my application?",
+    answer: () => (
+      <>
+        Integrating Formbricks is a breeze. Simply copy a script tag to your HTML head, or use NPM to install
+        Formbricks for platforms like React, Vue, Svelte, etc. Once installed, initialize Formbricks with your
+        environment details. Learn more with our framework guides{" "}
+        <a href="/docs/getting-started/framework-guides" className="text-brand-dark dark:text-brand-light">
+          here
+        </a>
+        .
+      </>
+    ),
+  },
+  {
+    question: "Is Formbricks GDPR compliant?",
+    answer: () => (
+      <>
+        Yes, Formbricks is fully GDPR compliant. Whether you use our cloud solution or decide to self-host, we
+        ensure compliance with all data privacy regulations.
+      </>
+    ),
+  },
+  {
+    question: "Can I self-host Formbricks?",
+    answer: () => (
+      <>
+        Absolutely! We provide an option for users to host Formbricks on their own server, ensuring even more
+        control over data and compliance. And the best part? Self-hosting is available for free, always. For
+        documentation on self hosting, click{" "}
+        <a href="/docs/self-hosting/deployment" className="text-brand-dark dark:text-brand-light">
+          here
+        </a>
+        .
+      </>
+    ),
+  },
+  {
+    question: "How does Formbricks pricing work?",
+    answer: () => (
+      <>
+        Formbricks offers a Free forever plan on the cloud that includes unlimited surveys, in-product
+        surveys, and more. We also provide a self-hosting option which includes all free features and more,
+        available at no cost. If you require additional features or responses, check out our pricing section
+        above for more details.
+      </>
+    ),
+  },
+];
+
+export default function FaQ() {
+  return (
+    <div className="max-w-7xl py-4 sm:px-6 sm:pb-6 lg:px-8" id="faq">
+      <HeadingCentered heading="Frequently Asked Questions" teaser="FaQ" closer />
+      <Accordion type="single" collapsible className="px-4 sm:px-0">
+        {FAQ_DATA.map((faq, index) => (
+          <AccordionItem key={`item-${index}`} value={`item-${index + 1}`}>
+            <AccordionTrigger>{faq.question}</AccordionTrigger>
+            <AccordionContent>{faq.answer()}</AccordionContent>
+          </AccordionItem>
+        ))}
+      </Accordion>
+    </div>
+  );
+}

apps/formbricks-com/pages/index.tsx

@@ -7,6 +7,7 @@ import Steps from "@/components/home/Steps";
 import Pricing from "@/components/shared/Pricing";
 import GitHubSponsorship from "@/components/home/GitHubSponsorship";
 import BestPractices from "@/components/shared/BestPractices";
+import Faq from "@/components/home/Faq";
 
 const IndexPage = () => (
   <Layout
@@ -43,6 +44,7 @@ const IndexPage = () => (
       inverted
     />
     <Pricing />
+    <Faq />
   </Layout>
 );