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

packages/tailwind-config/tailwind.config.js

@@ -13,6 +13,8 @@ module.exports = {
       animation: {
         "ping-slow": "ping 2s cubic-bezier(0, 0, 0.2, 1) infinite",
         shake: "shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both",
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
       },
       backgroundImage: {
         "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
@@ -49,6 +51,14 @@ module.exports = {
             transform: "translate3d(4px, 0, 0)",
           },
         },
+        "accordion-down": {
+          from: { height: 0 },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: 0 },
+        },
       },
       maxWidth: {
         "8xl": "88rem",

packages/ui/components/Accordian.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDown } from "lucide-react";
+import { cn } from "@formbricks/lib/cn";
+
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item ref={ref} className={cn("border-b", className)} {...props} />
+));
+AccordionItem.displayName = "AccordionItem";
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 text-left font-medium text-slate-800 transition-all hover:underline dark:text-slate-100 [&[data-state=open]>svg]:rotate-180",
+        className
+      )}
+      {...props}>
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className={cn(
+      "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm text-slate-500 transition-all dark:text-slate-300",
+      className
+    )}
+    {...props}>
+    <div className="pb-4 pt-0">{children}</div>
+  </AccordionPrimitive.Content>
+));
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

packages/ui/index.tsx

@@ -1,5 +1,6 @@
 export { AdvancedOptionToggle } from "./components/AdvancedOptionToggle";
 export { Alert, AlertDescription, AlertTitle } from "./components/Alert";
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./components/Accordian";
 export { PersonAvatar, ProfileAvatar } from "./components/Avatars";
 export { Badge } from "./components/Badge";
 export { Button } from "./components/Button";

packages/ui/package.json

@@ -29,6 +29,7 @@
     "@lexical/react": "^0.12.2",
     "@lexical/rich-text": "^0.12.2",
     "@lexical/table": "^0.12.2",
+    "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.4",
     "@radix-ui/react-dropdown-menu": "^2.0.5",

pnpm-lock.yaml

@@ -28,7 +28,7 @@ importers:
         version: 3.12.7
       turbo:
         specifier: latest
-        version: 1.10.13
+        version: 1.10.3
 
   apps/demo:
     dependencies:
@@ -427,7 +427,7 @@ importers:
         version: 9.0.0(eslint@8.49.0)
       eslint-config-turbo:
         specifier: latest
-        version: 1.8.8(eslint@8.49.0)
+        version: 1.10.3(eslint@8.49.0)
       eslint-plugin-react:
         specifier: 7.33.2
         version: 7.33.2(eslint@8.49.0)
@@ -688,6 +688,9 @@ importers:
       '@lexical/table':
         specifier: ^0.12.2
         version: 0.12.2(lexical@0.12.2)
+      '@radix-ui/react-accordion':
+        specifier: ^1.1.2
+        version: 1.1.2(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-checkbox':
         specifier: ^1.0.4
         version: 1.0.4(react-dom@18.2.0)(react@18.2.0)
@@ -4332,6 +4335,33 @@ packages:
       '@babel/runtime': 7.21.0
     dev: false
 
+  /@radix-ui/react-accordion@1.1.2(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-fDG7jcoNKVjSK6yfmuAs0EnPDro0WMXIhMtXdTBWqEioVW206ku+4Lw07e+13lUkFkpoEQ2PdeMIAGpdqEAmDg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.21.0
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-collapsible': 1.0.3(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-collection': 1.0.3(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-compose-refs': 1.0.1(react@18.2.0)
+      '@radix-ui/react-context': 1.0.1(react@18.2.0)
+      '@radix-ui/react-direction': 1.0.1(react@18.2.0)
+      '@radix-ui/react-id': 1.0.1(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-use-controllable-state': 1.0.1(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
   /@radix-ui/react-arrow@1.0.3(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-wSP+pHsB/jQRaL6voubsQ/ZlrGBHHrOjmBnr19hxYgtS0WvAFwZhK2WP/YY5yF9uKECCEEDGxuLxq1NBK51wFA==}
     peerDependencies:
@@ -10526,13 +10556,13 @@ packages:
     resolution: {integrity: sha512-NB/L/1Y30qyJcG5xZxCJKW/+bqyj+llbcCwo9DEz8bESIP0SLTOQ8T1DWCCFc+wJ61AMEstj4511PSScqMMfCw==}
     dev: true
 
-  /eslint-config-turbo@1.8.8(eslint@8.49.0):
-    resolution: {integrity: sha512-+yT22sHOT5iC1sbBXfLIdXfbZuiv9bAyOXsxTxFCWelTeFFnANqmuKB3x274CFvf7WRuZ/vYP/VMjzU9xnFnxA==}
+  /eslint-config-turbo@1.10.3(eslint@8.49.0):
+    resolution: {integrity: sha512-ggzPfTJfMsMS383oZ4zfTP1zQvyMyiigOQJRUnLt1nqII6SKkTzdKZdwmXRDHU24KFwUfEFtT6c8vnm2VhL0uQ==}
     peerDependencies:
       eslint: '>6.6.0'
     dependencies:
       eslint: 8.49.0
-      eslint-plugin-turbo: 1.8.8(eslint@8.49.0)
+      eslint-plugin-turbo: 1.10.3(eslint@8.49.0)
     dev: true
 
   /eslint-import-resolver-node@0.3.6:
@@ -10730,8 +10760,8 @@ packages:
       semver: 6.3.1
       string.prototype.matchall: 4.0.8
 
-  /eslint-plugin-turbo@1.8.8(eslint@8.49.0):
-    resolution: {integrity: sha512-zqyTIvveOY4YU5jviDWw9GXHd4RiKmfEgwsjBrV/a965w0PpDwJgEUoSMB/C/dU310Sv9mF3DSdEjxjJLaw6rA==}
+  /eslint-plugin-turbo@1.10.3(eslint@8.49.0):
+    resolution: {integrity: sha512-g3Mnnk7el1FqxHfqbE/MayLvCsYjA/vKmAnUj66kV4AlM7p/EZqdt42NMcMSKtDVEm0w+utQkkzWG2Xsa0Pd/g==}
     peerDependencies:
       eslint: '>6.6.0'
     dependencies:
@@ -21734,64 +21764,65 @@ packages:
     dependencies:
       safe-buffer: 5.2.1
 
-  /turbo-darwin-64@1.10.13:
-    resolution: {integrity: sha512-vmngGfa2dlYvX7UFVncsNDMuT4X2KPyPJ2Jj+xvf5nvQnZR/3IeDEGleGVuMi/hRzdinoxwXqgk9flEmAYp0Xw==}
+  /turbo-darwin-64@1.10.3:
+    resolution: {integrity: sha512-IIB9IomJGyD3EdpSscm7Ip1xVWtYb7D0x7oH3vad3gjFcjHJzDz9xZ/iw/qItFEW+wGFcLSRPd+1BNnuLM8AsA==}
     cpu: [x64]
     os: [darwin]
     requiresBuild: true
     dev: true
     optional: true
 
-  /turbo-darwin-arm64@1.10.13:
-    resolution: {integrity: sha512-eMoJC+k7gIS4i2qL6rKmrIQGP6Wr9nN4odzzgHFngLTMimok2cGLK3qbJs5O5F/XAtEeRAmuxeRnzQwTl/iuAw==}
+  /turbo-darwin-arm64@1.10.3:
+    resolution: {integrity: sha512-SBNmOZU9YEB0eyNIxeeQ+Wi0Ufd+nprEVp41rgUSRXEIpXjsDjyBnKnF+sQQj3+FLb4yyi/yZQckB+55qXWEsw==}
     cpu: [arm64]
     os: [darwin]
     requiresBuild: true
     dev: true
     optional: true
 
-  /turbo-linux-64@1.10.13:
-    resolution: {integrity: sha512-0CyYmnKTs6kcx7+JRH3nPEqCnzWduM0hj8GP/aodhaIkLNSAGAa+RiYZz6C7IXN+xUVh5rrWTnU2f1SkIy7Gdg==}
+  /turbo-linux-64@1.10.3:
+    resolution: {integrity: sha512-kvAisGKE7xHJdyMxZLvg53zvHxjqPK1UVj4757PQqtx9dnjYHSc8epmivE6niPgDHon5YqImzArCjVZJYpIGHQ==}
     cpu: [x64]
     os: [linux]
     requiresBuild: true
     dev: true
     optional: true
 
-  /turbo-linux-arm64@1.10.13:
-    resolution: {integrity: sha512-0iBKviSGQQlh2OjZgBsGjkPXoxvRIxrrLLbLObwJo3sOjIH0loGmVIimGS5E323soMfi/o+sidjk2wU1kFfD7Q==}
+  /turbo-linux-arm64@1.10.3:
+    resolution: {integrity: sha512-Qgaqln0IYRgyL0SowJOi+PNxejv1I2xhzXOI+D+z4YHbgSx87ox1IsALYBlK8VRVYY8VCXl+PN12r1ioV09j7A==}
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
     dev: true
     optional: true
 
-  /turbo-windows-64@1.10.13:
-    resolution: {integrity: sha512-S5XySRfW2AmnTeY1IT+Jdr6Goq7mxWganVFfrmqU+qqq3Om/nr0GkcUX+KTIo9mPrN0D3p5QViBRzulwB5iuUQ==}
+  /turbo-windows-64@1.10.3:
+    resolution: {integrity: sha512-rbH9wManURNN8mBnN/ZdkpUuTvyVVEMiUwFUX4GVE5qmV15iHtZfDLUSGGCP2UFBazHcpNHG1OJzgc55GFFrUw==}
     cpu: [x64]
     os: [win32]
     requiresBuild: true
     dev: true
     optional: true
 
-  /turbo-windows-arm64@1.10.13:
-    resolution: {integrity: sha512-nKol6+CyiExJIuoIc3exUQPIBjP9nIq5SkMJgJuxsot2hkgGrafAg/izVDRDrRduQcXj2s8LdtxJHvvnbI8hEQ==}
+  /turbo-windows-arm64@1.10.3:
+    resolution: {integrity: sha512-ThlkqxhcGZX39CaTjsHqJnqVe+WImjX13pmjnpChz6q5HHbeRxaJSFzgrHIOt0sUUVx90W/WrNRyoIt/aafniw==}
     cpu: [arm64]
     os: [win32]
     requiresBuild: true
     dev: true
     optional: true
 
-  /turbo@1.10.13:
-    resolution: {integrity: sha512-vOF5IPytgQPIsgGtT0n2uGZizR2N3kKuPIn4b5p5DdeLoI0BV7uNiydT7eSzdkPRpdXNnO8UwS658VaI4+YSzQ==}
+  /turbo@1.10.3:
+    resolution: {integrity: sha512-U4gKCWcKgLcCjQd4Pl8KJdfEKumpyWbzRu75A6FCj6Ctea1PIm58W6Ltw1QXKqHrl2pF9e1raAskf/h6dlrPCA==}
     hasBin: true
+    requiresBuild: true
     optionalDependencies:
-      turbo-darwin-64: 1.10.13
-      turbo-darwin-arm64: 1.10.13
-      turbo-linux-64: 1.10.13
-      turbo-linux-arm64: 1.10.13
-      turbo-windows-64: 1.10.13
-      turbo-windows-arm64: 1.10.13
+      turbo-darwin-64: 1.10.3
+      turbo-darwin-arm64: 1.10.3
+      turbo-linux-64: 1.10.3
+      turbo-linux-arm64: 1.10.3
+      turbo-windows-64: 1.10.3
+      turbo-windows-arm64: 1.10.3
     dev: true
 
   /tween-functions@1.2.0: