feature: support arm architecture with docker images

Co-authored-by: Matthias Nannt <mail@matthiasnannt.com>

.env.example

@@ -99,7 +99,6 @@ AZUREAD_AUTH_ENABLED=0
 AZUREAD_CLIENT_ID=
 AZUREAD_CLIENT_SECRET=
 AZUREAD_TENANT_ID=
-AZURE_DIRECT_REDIRECT=0
 
 # Cron Secret
 CRON_SECRET=
@@ -127,4 +126,13 @@ AIRTABLE_CLIENT_ID=
 # Enterprise License Key
 ENTERPRISE_LICENSE_KEY=
 
+# Automatically assign new users to a specific team and role within that team
+# Insert an existing team id or generate a valid CUID for a new one at https://www.getuniqueid.com/cuid (e.g. cjld2cjxh0000qzrmn831i7rn)
+# (Role Management is an Enterprise feature)
+# DEFAULT_TEAM_ID=
+# DEFAULT_TEAM_ROLE=admin
+
+# set to 1 to skip onboarding for new users
+# ONBOARDING_DISABLED=1
+
 */

.github/workflows/cron-reportUsageToStripe.yml

@@ -4,8 +4,8 @@ on:
   # "Scheduled workflows run on the latest commit on the default or base branch."
   # — https://docs.github.com/en/actions/learn-github-actions/events-that-trigger-workflows#schedule
   schedule:
-    # This will run the job at 23:00 UTC every day of every month.
+    # This will run the job at 22:00 UTC every day of every month.
-    - cron: "0 21 * * *"
+    - cron: "0 22 * * *"
 jobs:
   cron-reportUsageToStripe:
     env:
@@ -19,4 +19,5 @@ jobs:
           curl ${{ env.APP_URL }}/api/cron/report-usage \
             -X POST \
             -H 'x-api-key: ${{ env.CRON_SECRET }}' \
+            -H 'Cache-Control: no-cache' \
             --fail

.github/workflows/playwright.yml

@@ -0,0 +1,37 @@
+name: E2E Tests
+on:
+  workflow_call:
+jobs:
+  build:
+    name: Run E2E Tests
+    runs-on: ubuntu-latest
+    timeout-minutes: 60
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 20
+
+      - name: Install Docker Compose
+        run: sudo apt-get update && sudo apt-get install -y docker-compose
+
+      - name: Install dependencies
+        run: npm install -g pnpm && pnpm install
+
+      - name: Build Formbricks Image & Run
+        run: docker-compose up -d
+
+      - name: Install Playwright Browsers
+        run: pnpm exec playwright install --with-deps
+
+      - name: Run Playwright tests
+        run: pnpm test:e2e
+
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.github/workflows/pr.yml

@@ -27,8 +27,13 @@ jobs:
     uses: ./.github/workflows/build-web.yml
     secrets: inherit
 
+  e2e-test:
+    name: Run E2E Tests
+    uses: ./.github/workflows/playwright.yml
+    secrets: inherit
+
   required:
-    needs: [lint, test, build]
+    needs: [lint, test, build, e2e-test]
     if: always()
     runs-on: ubuntu-latest
     steps:

.github/workflows/release-docker-github.yml

@@ -52,17 +52,22 @@ jobs:
         with:
           cosign-release: "v2.1.1"
 
+        # Add support for more platforms with QEMU (optional)
+        # https://github.com/docker/setup-qemu-action
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+
       # Set up BuildKit Docker container builder to be able to build
       # multi-platform images and export cache
       # https://github.com/docker/setup-buildx-action
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@f95db51fddba0c2d1ec667646a06c2ce06100226 # v3.0.0
+        uses: docker/setup-buildx-action@v3 # v3.0.0
 
       # Login against a Docker registry except on PR
       # https://github.com/docker/login-action
       - name: Log into registry ${{ env.REGISTRY }}
         if: github.event_name != 'pull_request'
-        uses: docker/login-action@343f7c4344506bcbf9b4de18042ae17996df046d # v3.0.0
+        uses: docker/login-action@v3 # v3.0.0
         with:
           registry: ${{ env.REGISTRY }}
           username: ${{ github.actor }}
@@ -72,7 +77,7 @@ jobs:
       # https://github.com/docker/metadata-action
       - name: Extract Docker metadata
         id: meta
-        uses: docker/metadata-action@96383f45573cb7f253c731d3b3ab81c87ef81934 # v5.0.0
+        uses: docker/metadata-action@v5 # v5.0.0
         with:
           images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
 
@@ -80,10 +85,11 @@ jobs:
       # https://github.com/docker/build-push-action
       - name: Build and push Docker image
         id: build-and-push
-        uses: docker/build-push-action@0565240e2d4ab88bba5387d719585280857ece09 # v5.0.0
+        uses: docker/build-push-action@v5 # v5.0.0
         with:
           context: .
           file: ./apps/web/Dockerfile
+          platforms: linux/amd64,linux/arm64
           push: ${{ github.event_name != 'pull_request' }}
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}

.gitignore

@@ -44,4 +44,10 @@ packages/database/zod
 # nixos stuff
 .direnv
 
-Zone.Identifier
+Zone.Identifier
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

.prettierrc.js

@@ -1 +1,6 @@
-module.exports = require("./packages/prettier-config/prettier-preset");
+const baseConfig = require("./packages/prettier-config/prettier-preset");
+
+module.exports = {
+  ...baseConfig,
+  plugins: ["@trivago/prettier-plugin-sort-imports", "prettier-plugin-tailwindcss"],
+};

README.md

@@ -1,100 +1,148 @@
-<div id="top"></div>
+<div  id="top"></div>
-<p align="center">
+
-<a href="https://formbricks.com">
+<p  align="center">
-    <img width="120" alt="Open Source Experience Management Solution Qualtrics Alternative Logo" src="https://github.com/formbricks/formbricks/assets/72809645/0086704f-bee7-4d38-9cc8-fa42ee59e004">
+
-  </a>
+<a  href="https://formbricks.com">
-  <h3 align="center">Formbricks</h3>
+
+<img  width="120"  alt="Open Source Privacy First Experience Management Solution Qualtrics Alternative Logo"  src="https://github.com/formbricks/formbricks/assets/72809645/0086704f-bee7-4d38-9cc8-fa42ee59e004">
+
+</a>
+
+<h3  align="center">Formbricks</h3>
+
+<p  align="center">
+
+Harvest user-insights, build irresistible experiences.
+
+<br  />
+
+<a  href="https://formbricks.com/">Website</a> | <a  href="https://formbricks.com/discord">Join Discord community</a>
 
-  <p align="center">
-    The Open Source Survey Toolbox
-    <br />
-    <a href="https://formbricks.com/">Website</a>  |  <a href="https://formbricks.com/discord">Join Discord community</a>
-  </p>
 </p>
 
-<p align="center">
+</p>
-<a href="https://github.com/formbricks/formbricks/blob/main/LICENSE"><img src="https://img.shields.io/badge/License-AGPL-purple" alt="License"></a> <a href="https://formbricks.com/discord"><img src="https://img.shields.io/discord/979077669410979880?label=Discord&logo=discord&logoColor=%23fff" alt="Join Formbricks Discord"></a> <a href="https://github.com/formbricks/formbricks/stargazers"><img src="https://img.shields.io/github/stars/formbricks/formbricks?logo=github" alt="Github Stars"></a>
+
-   <a href="https://news.ycombinator.com/item?id=32303986"><img src="https://img.shields.io/badge/Hacker%20News-122-%23FF6600" alt="Hacker News"></a>
+<p  align="center">
-   <a href="[https://www.producthunt.com/products/formbricks](https://www.producthunt.com/posts/formbricks)"><img src="https://img.shields.io/badge/Product%20Hunt-455-orange?logo=producthunt&logoColor=%23fff" alt="Product Hunt"></a>
+
-   <a href="https://github.blog/2023-04-12-github-accelerator-our-first-cohort-and-whats-next/"><img src="https://img.shields.io/badge/2023-blue?logo=github&label=Github%20Accelerator" alt="Github Accelerator"></a>
+<a  href="https://github.com/formbricks/formbricks/blob/main/LICENSE"><img  src="https://img.shields.io/badge/License-AGPL-purple"  alt="License"></a> <a  href="https://formbricks.com/discord"><img  src="https://img.shields.io/discord/979077669410979880?label=Discord&logo=discord&logoColor=%23fff"  alt="Join Formbricks Discord"></a> <a  href="https://github.com/formbricks/formbricks/stargazers"><img  src="https://img.shields.io/github/stars/formbricks/formbricks?logo=github"  alt="Github Stars"></a>
-<a href="https://github.com/formbricks/formbricks/issues?q=is:issue+is:open+label:%22%F0%9F%99%8B%F0%9F%8F%BB%E2%80%8D%E2%99%82%EF%B8%8Fhelp+wanted%22"><img src="https://img.shields.io/badge/Help%20Wanted-Contribute-blue"></a>
+
+<a  href="https://news.ycombinator.com/item?id=32303986"><img  src="https://img.shields.io/badge/Hacker%20News-122-%23FF6600"  alt="Hacker News"></a>
+
+<a  href="[https://www.producthunt.com/products/formbricks](https://www.producthunt.com/posts/formbricks)"><img  src="https://img.shields.io/badge/Product%20Hunt-455-orange?logo=producthunt&logoColor=%23fff"  alt="Product Hunt"></a>
+
+<a  href="https://github.blog/2023-04-12-github-accelerator-our-first-cohort-and-whats-next/"><img  src="https://img.shields.io/badge/2023-blue?logo=github&label=Github%20Accelerator"  alt="Github Accelerator"></a>
+
+<a  href="https://github.com/formbricks/formbricks/issues?q=is:issue+is:open+label:%22%F0%9F%99%8B%F0%9F%8F%BB%E2%80%8D%E2%99%82%EF%B8%8Fhelp+wanted%22"><img  src="https://img.shields.io/badge/Help%20Wanted-Contribute-blue"></a>
+
 </p>
 
 <br/>
 
-<p align="center">
+<div style="background-color:#f8fafc; border-radius:5px;">
-<i>Trusted by</i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+<p  align="center">
-<a href="https://github.com/calcom/cal.com/"><img src="https://github.com/formbricks/formbricks/assets/675065/1a8763cf-f47e-4960-90f6-334f6dc12a17#gh-light-mode-only" height="20px"></a><a href="https://github.com/calcom/cal.com/"><img src="https://github.com/formbricks/formbricks/assets/72809645/9a031e8d-538f-4fdc-9338-b77e9a57d6ac#gh-dark-mode-only" height="20px"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+
-<a href="https://github.com/CrowdDotDev/crowd.dev"><img src="https://github.com/formbricks/formbricks/assets/675065/59b1a4d4-25e4-4ef3-b0bf-4426446fbfd0#gh-light-mode-only" height="20px"></a><a href="https://github.com/CrowdDotDev/crowd.dev"><img src="https://github.com/formbricks/formbricks/assets/72809645/4bb4caf7-4b64-44c8-94bd-850606d181c1#gh-dark-mode-only" height="20px"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+<i>Trusted by</i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-<a href="https://clovyr.io/"><img src="https://github.com/formbricks/formbricks/assets/675065/9291c8df-9aac-423a-a430-a9a581240075" height="20px"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+
-<a href="https://neverinstall.com/"><img src="https://github.com/formbricks/formbricks/assets/675065/72e5e37b-8ef7-4340-b06e-f1d12a05330f#gh-light-mode-only" height="20px"></a><a href="https://neverinstall.com/"><img src="https://github.com/formbricks/formbricks/assets/72809645/9d9711dc-75e5-4084-b7fa-bbaf621064a8#gh-dark-mode-only" height="20px">
+<a  href="https://flixbus.com"><img  src="https://github.com/formbricks/formbricks/assets/72809645/d6c91d89-7633-4845-ae1e-03bbd2ce0946"  height="35px"></a>
-</p>
+
+<a  href="https://github.com/calcom/cal.com/"><img  src="https://github.com/formbricks/formbricks/assets/675065/1a8763cf-f47e-4960-90f6-334f6dc12a17#gh-light-mode-only"  height="20px"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+
+<a  href="https://github.com/CrowdDotDev/crowd.dev"><img  src="https://github.com/formbricks/formbricks/assets/675065/59b1a4d4-25e4-4ef3-b0bf-4426446fbfd0#gh-light-mode-only"  height="20px"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+
+<a  href="https://neverinstall.com/"><img  src="https://github.com/formbricks/formbricks/assets/675065/72e5e37b-8ef7-4340-b06e-f1d12a05330f#gh-light-mode-only"  height="20px"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+
+<a  href="https://clovyr.io/"><img  src="https://github.com/formbricks/formbricks/assets/675065/9291c8df-9aac-423a-a430-a9a581240075"  height="20px"></a>
+
+</p>
+<div>
+
+<p  align="center">
+
+<a  href="https://trendshift.io/repositories/2570"  target="_blank"><img  src="https://trendshift.io/api/badge/repositories/2570"  alt="Trendshift Badge for formbricks/formbricks"  style="width: 250px; height: 55px;"  width="250"  height="55"/></a>
 
-<p align="center">
-  <a href="https://trendshift.io/repositories/2570" target="_blank"><img src="https://trendshift.io/api/badge/repositories/2570" alt="Trendshift Badge for formbricks/formbricks" style="width: 250px; height: 55px;" width="250" height="55"/></a>
 </p>
 
 ## ✨ About Formbricks
 
-<img width="1527" alt="formbricks-sneak" src="https://github-production-user-asset-6210df.s3.amazonaws.com/675065/249441967-ccb89ea3-82b4-4bf2-8d2c-528721ec313b.png">
+<img  width="1527"  alt="formbricks-sneak"  src="https://github-production-user-asset-6210df.s3.amazonaws.com/675065/249441967-ccb89ea3-82b4-4bf2-8d2c-528721ec313b.png">
 
-Formbricks is your go-to solution for in-product micro-surveys that will supercharge your product experience. Use micro-surveys to target the right users at the right time without making surveys annoying.
+Formbricks provides a free and open source surveying platform. Gather feedback at every point in the user journey with beautiful in-app, website, link and email surveys. Build on top of Formbricks or leverage prebuilt data analysis capabilities.
 
-**Try it out in the cloud at [formbricks.com](https://formbricks.com)**
+**Try it out in the cloud at [formbricks.com](https://app.formbricks.com/auth/signup)**
 
-## 💪 Mission: Make customer-centric decisions based on data.
+## 💪 Mission: Empower your team, craft an irresistible experience.
 
-Formbricks is a powerful tool for creating in-product micro-surveys - and leverage a significantly higher conversion rate. It allows you to gather valuable insights from your users, enabling you to make data-driven decisions that enhance your product's user experience. With Formbricks, you can create surveys with our no-code editor, choose from a variety of templates, target specific user groups, and much more.
+Formbricks is both a free and open source survey platform - and a privacy-first experience management platform. Use in-app, website, link and email surveys to gather user and customer insights at every point of their journey. Leverage Formbricks Insight Platform or build your own. Life's too short for mediocre UX.
 
 ### Table of Contents
 
 - [Features](#features)
+
 - [Getting Started](#getting-started)
-  - [Cloud Version](#cloud-version)
+
-  - [Self-hosted Version](#self-hosted-version)
+- [Cloud Version](#cloud-version)
-  - [Development](#development)
+
+- [Self-hosted Version](#self-hosted-version)
+
+- [Development](#development)
+
 - [Contribution](#contribution)
+
 - [Contact](#contact-us)
+
 - [License](#license)
+
 - [Security](#security)
 
-<a id="features"></a>
+<a  id="features"></a>
 
 ### Features
 
-- 📲 Create **in-product surveys** with our no-code editor with multiple question types.
+- 📲 Create **conversion-optimized surveys** with our no-code editor with several question types.
+
 - 📚 Choose from a variety of best-practice **templates**.
+
 - 👩🏻 Launch and **target your surveys to specific user groups** without changing your application code.
+
 - 🔗 Create shareable **link surveys**.
+
 - 👨‍👩‍👦 Invite your team members to **collaborate** on your surveys.
-- 🔌 Integrate Formbricks with **Slack, Posthog, Zapier, n8n and more**.
+
+- 🔌 Integrate Formbricks with **Slack, Notion, Zapier, n8n and more**.
+
 - 🔒 All **open source**, transparent and self-hostable.
 
 ### Built on Open Source
 
 - 💻 [Typescript](https://www.typescriptlang.org/)
+
 - 🚀 [Next.js](https://nextjs.org/)
+
 - ⚛️ [React](https://reactjs.org/)
+
 - 🎨 [TailwindCSS](https://tailwindcss.com/)
+
 - 📚 [Prisma](https://prisma.io/)
+
 - 🔒 [Auth.js](https://authjs.dev/)
+
 - 🧘‍♂️ [Zod](https://zod.dev/)
 
-<a id="getting-started"></a>
+<a  id="getting-started"></a>
 
 ## 🚀 Getting started
 
 We've got several options depending on your need to help you quickly get started with Formbricks.
 
-<a id="cloud-version"></a>
+<a  id="cloud-version"></a>
 
 ### ☁️ Cloud Version
 
-Formbricks has a hosted cloud offering with a generous free plan to get you up and running as quickly as possible. To get started, please visit [formbricks.com](https://formbricks.com).
+Formbricks has a hosted cloud offering with a generous free plan to get you up and running as quickly as possible. To get started, please visit [formbricks.com](https://app.formbricks.com/auth/signup).
 
-<a id="self-hosted-version"></a>
+<a  id="self-hosted-version"></a>
 
-### 🐳 Self-hosted version
+### 🐳 Self-hosting Formbricks
 
 Formbricks is available Open-Source under AGPLv3 license. You can host Formbricks on your own servers using Docker without a subscription.
 
@@ -114,7 +162,7 @@ You can deploy Formbricks on [Railway](https://railway.app) using the button bel
 
 [![Deploy on Railway](https://railway.app/button.svg)](https://railway.app/new/template/PPDzCd)
 
-<a id="development"></a>
+<a  id="development"></a>
 
 ### 👨‍💻 Development
 
@@ -123,7 +171,9 @@ You can deploy Formbricks on [Railway](https://railway.app) using the button bel
 Here is what you need to be able to run Formbricks:
 
 - [Node.js](https://nodejs.org/en) (Version: >=18.x)
+
 - [Pnpm](https://pnpm.io/)
+
 - [Docker](https://www.docker.com/) - to run PostgreSQL and MailHog
 
 #### Local Setup
@@ -138,7 +188,7 @@ To get started locally, we've got a [guide to help you](https://formbricks.com/d
 
 [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/formbricks/formbricks)
 
-<a id="contribution"></a>
+<a  id="contribution"></a>
 
 ## ✍️ Contribution
 
@@ -147,35 +197,39 @@ We are very happy if you are interested in contributing to Formbricks 🤗
 Here are a few options:
 
 - Star this repo.
+
 - Create issues every time you feel something is missing or goes wrong.
+
 - Upvote issues with 👍 reaction so we know what the demand for a particular issue is to prioritize it within the roadmap.
 
 Please check out [our contribution guide](https://formbricks.com/docs/contributing/introduction) and our [list of open issues](https://github.com/formbricks/formbricks/issues) for more information.
 
 ## All Thanks To Our Contributors
 
-<a href="https://github.com/formbricks/formbricks/graphs/contributors">
+<a  href="https://github.com/formbricks/formbricks/graphs/contributors">
-  <img src="https://contrib.rocks/image?repo=formbricks/formbricks" />
+
+<img  src="https://contrib.rocks/image?repo=formbricks/formbricks"  />
+
 </a>
 
-<a id="contact-us"></a>
+<a  id="contact-us"></a>
 
 ## 📆 Contact us
 
 Let's have a chat about your survey needs and get you started.
 
-<a href="https://cal.com/johannes/onboarding?utm_source=banner&utm_campaign=oss"><img alt="Book us with Cal.com" src="https://cal.com/book-with-cal-dark.svg" /></a>
+<a  href="https://cal.com/johannes/onboarding?utm_source=banner&utm_campaign=oss"><img  alt="Book us with Cal.com"  src="https://cal.com/book-with-cal-dark.svg"  /></a>
 
-<a id="license"></a>
+<a  id="license"></a>
 
 ## ⚖️ License
 
 Distributed under the AGPLv3 License. See [`LICENSE`](./LICENSE) for more information.
 
-<a id="security"></a>
+<a  id="security"></a>
 
 ## 🔒 Security
 
 We take security very seriously. If you come across any security vulnerabilities, please disclose them by sending an email to security@formbricks.com. We appreciate your help in making our platform as secure as possible and are committed to working with you to resolve any issues quickly and efficiently. See [`SECURITY.md`](./SECURITY.md) for more information.
 
-<p align="right"><a href="#top">🔼 Back to top</a></p>
+<p  align="right"><a  href="#top">🔼 Back to top</a></p>

apps/demo/package.json

@@ -13,7 +13,7 @@
   "dependencies": {
     "@formbricks/js": "workspace:*",
     "@heroicons/react": "^2.0.18",
-    "next": "14.0.3",
+    "next": "14.0.4",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },

apps/demo/pages/_app.tsx

@@ -1,5 +1,6 @@
 import type { AppProps } from "next/app";
 import Head from "next/head";
+
 import "../styles/globals.css";
 
 export default function App({ Component, pageProps }: AppProps) {

apps/demo/pages/_document.tsx

@@ -1,4 +1,4 @@
-import { Html, Head, Main, NextScript } from "next/document";
+import { Head, Html, Main, NextScript } from "next/document";
 
 export default function Document() {
   return (

apps/demo/pages/app/index.tsx

@@ -1,8 +1,10 @@
-import formbricks from "@formbricks/js";
 import Image from "next/image";
-import { useEffect, useState } from "react";
-import fbsetup from "../../public/fb-setup.png";
 import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+
+import formbricks from "@formbricks/js";
+
+import fbsetup from "../../public/fb-setup.png";
 
 declare const window: any;
 
@@ -22,11 +24,13 @@ export default function AppPage({}) {
     if (process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID && process.env.NEXT_PUBLIC_FORMBRICKS_API_HOST) {
       const isUserId = window.location.href.includes("userId=true");
       const userId = isUserId ? "THIS-IS-A-VERY-LONG-USER-ID-FOR-TESTING" : undefined;
+      const attributes = isUserId ? { "Init Attribute 1": "eight", "Init Attribute 2": "two" } : undefined;
       formbricks.init({
         environmentId: process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID,
         apiHost: process.env.NEXT_PUBLIC_FORMBRICKS_API_HOST,
         userId,
         debug: true,
+        attributes,
       });
       window.formbricks = formbricks;
     }

apps/formbricks-com/app/docs/api/client/overview/page.mdx

@@ -16,7 +16,9 @@ Checkout the [API Key Setup](/docs/api/management/api-key-setup) - to generate,
 
 The Public Client API is designed for the JavaScript SDK and does not require authentication. It's primarily used for creating persons, sessions, and responses within the Formbricks platform. This API is ideal for client-side interactions, as it doesn't expose sensitive information.
 
+- [Actions API](/docs/api/client/actions) - Create actions for a person
 - [Displays API](/docs/api/client/displays) - Mark Survey as Displayed or Responded for a Person
+- [People API](/docs/api/client/people) - Create & update people (e.g. attributes)
 - [Responses API](/docs/api/client/responses) - Create & update responses for a survey
 
 ## Management API

apps/formbricks-com/app/docs/attributes/custom-attributes/page.mdx

@@ -10,9 +10,31 @@ export const metadata = {
 
 One way to send attributes to Formbricks is in your code. In Formbricks, there are two special attributes for [user identification](/docs/attributes/identify-users)(user ID & email) and custom attributes. An example:
 
-## Setting Custom User Attributes
+## Setting during Initialization
+
+It's recommended to set custom user attributes directly during the initialization of Formbricks for better user identification.
+
+<Col>
+<CodeGroup title="Set custom attributes during initialization">
+
+```javascript
+formbricks.init({
+  environmentId: "<environment-id>",
+  apiHost: "<api-host>",
+  userId: "<user_id>",
+  attributes: {
+    plan: "free",
+  },
+});
+```
+
+</CodeGroup>
+</Col>
+
+## Setting independently
+
+You can use the setAttribute function to set any custom attribute for the user (e.g. name, plan, etc.) anywhere in the user journey. Formbricks maintains a state of the current user inside the browser and makes sure attributes aren't sent to the backend twice.
 
-You can use the setAttribute function to set any custom attribute for the user (e.g. name, plan, etc.):
 <Col>
 <CodeGroup title="Setting Plan to Pro">
 

apps/formbricks-com/app/docs/attributes/identify-users/page.mdx

@@ -29,6 +29,29 @@ formbricks.init({
 
 </CodeGroup>
 </Col>
+
+## Enhanced Initialization with User Attributes
+
+In addition to setting the `userId`, Formbricks allows you to set user attributes right at the initialization. This ensures that your user data is seamlessly integrated from the start. Here's how you can include user attributes in the `init()` function:
+
+<Col>
+<CodeGroup title="Enhanced Initialization with User Attributes">
+
+```javascript
+formbricks.init({
+  environmentId: "<environment-id>",
+  apiHost: "<api-host>",
+  userId: "<user_id>",
+  attributes: {
+    // your custom attributes
+    Plan: "premium",
+  },
+});
+```
+
+</CodeGroup>
+</Col>
+
 ## Setting User Email
 
 The `userId` is the main identifier used in Formbricks and user identification is only enabled when it is set. In addition to the userId you can also set attributes that describes the user better. The email address can be set using the setEmail function:

apps/formbricks-com/app/docs/introduction/what-is-formbricks/page.mdx

@@ -1,5 +1,4 @@
 import { GettingStarted } from "@/components/docs/GettingStarted";
-import BestPractices from "@/components/docs/BestPractices";
 import { HeroPattern } from "@/components/docs/HeroPattern";
 import { Button } from "@/components/docs/Button";
 
@@ -9,10 +8,7 @@ export const metadata = {
     "Enhance your product with Formbricks – the leading open-source solution for in-product micro-surveys. Dive deep into user research, amplify product-market fit, and uncover the 'why' behind your analytics.",
 };
 
-export const sections = [
+export const sections = [];
-  { title: "Getting Started", id: "getting-started" },
-  { title: "Best Practices", id: "best-practices" },
-];
 
 <HeroPattern />
 
@@ -20,7 +16,7 @@ export const sections = [
 
 Welcome to Formbricks, your go-to solution for in-product micro-surveys that will supercharge your product experience! 🚀 {{ className: 'lead' }}
 
-<div className="mb-16 mt-6 flex gap-3">
+<div className="mb-16 mt-6 flex gap-3" id="why-formbricks">
   <Button href="/docs/getting-started/quickstart-in-app-survey" arrow="right" children="Quickstart" />
 </div>
 

apps/formbricks-com/app/docs/layout.tsx

@@ -1,9 +1,7 @@
-import glob from "fast-glob";
-
 import { Providers } from "@/app/providers";
 import { Layout } from "@/components/docs/Layout";
-
 import { type Section } from "@/components/docs/SectionProvider";
+import glob from "fast-glob";
 import { type Metadata } from "next";
 
 export const metadata: Metadata = {

apps/formbricks-com/app/docs/self-hosting/docker/page.mdx

@@ -242,8 +242,10 @@ These variables can be provided at the runtime i.e. in your docker-compose file.
 | TELEMETRY_DISABLED          | Disables telemetry if set to `1`.                                                       | optional                                                |                                                                         |
 | INSTANCE_ID                 | Instance ID for Formbricks Cloud to be sent to Telemetry.                               | optional                                                |                                                                         |
 | INTERNAL_SECRET             | Internal Secret (Currently we overwrite the value with a random value).                 | optional                                                |                                                                         |
-| IS_FORMBRICKS_CLOUD         | Uses Formbricks Cloud if set to `1`                                                     | optional                                                |                                                                         |
 | DEFAULT_BRAND_COLOR         | Default brand color for your app (Can be overwritten from the UI as well).              | optional                                                | `#64748b`                                                               |
+| DEFAULT_TEAM_ID             | Automatically assign new users to a specific team when joining                          | optional                                                |                                                                         |
+| DEFAULT_TEAM_ROLE           | Role of the user in the default team.                                                   | optional                                                | `admin`                                                                 |
+| ONBOARDING_DISABLED         | Disables onboarding for new users if set to `1`                                         | optional                                                |                                                                         |
 
 ## Build-time Variables
 

apps/formbricks-com/app/docs/self-hosting/external-auth-providers/page.mdx

@@ -39,17 +39,24 @@ Integrating Google OAuth with your Formbricks instance allows users to log in us
    - Select the application type **Web application** for your project and enter any additional information required.
    - Ensure to specify authorized JavaScript origins and authorized redirect URIs.
 
-```
+<Col>
+<CodeGroup title="Configuration URLs">
+``` {{ title: 'Redirect & Origin URLs' }}
 Authorized JavaScript origins: {WEBAPP_URL}
 Authorized redirect URIs: {WEBAPP_URL}/api/auth/callback/google
 ```
+</CodeGroup>
+</Col>
 
 5. **Update Environment Variables in Docker**:
    - To integrate the Google OAuth, you have two options: either update the environment variables in the docker-compose file or directly add them to the running container.
    - In your Docker setup directory, open the `.env` file, and add or update the following lines with the `Client ID` and `Client Secret` obtained from Google Cloud Platform:
    - Alternatively, you can add the environment variables directly to the running container using the following commands (replace `container_id` with your actual Docker container ID):
 
-```
+<Col>
+<CodeGroup title="Set env vars">
+
+```sh {{ title: 'Shell commands' }}
 docker exec -it container_id /bin/bash
 export GOOGLE_AUTH_ENABLED=1
 export GOOGLE_CLIENT_ID=your-client-id-here
@@ -57,12 +64,15 @@ export GOOGLE_CLIENT_SECRET=your-client-secret-here
 exit
 ```
 
-```
+```sh {{ title: 'env file' }}
 GOOGLE_AUTH_ENABLED=1
 GOOGLE_CLIENT_ID=your-client-id-here
 GOOGLE_CLIENT_SECRET=your-client-secret-here
 ```
 
+</CodeGroup>
+</Col>
+
 6. **Restart Your Formbricks Instance**:
    - **Note:** Restarting your Docker containers may cause a brief period of downtime. Plan accordingly.
    - Once the environment variables have been updated, it's crucial to restart your Docker containers to apply the changes. This ensures that your Formbricks instance can utilize the new Google OAuth configuration for user authentication. Here's how you can do it:

apps/formbricks-com/app/docs/self-hosting/migration-guide/page.mdx

@@ -18,7 +18,6 @@ Formbricks v1.2 ships a lot of features targeting our Link Surveys. We have also
 | -------------------- | -------- | ------------------------------ | ----------------------------------------------------------- |
 | ENCRYPTION_KEY       | true     | `openssl rand -hex 32`         | Needed for 2 Factor Authentication                          |
 | SHORT_URL_BASE       | false    | `<your-short-base-url>`        | Needed if you want to enable shorter links for Link Surveys |
-| ASSET_PREFIX_URL     | false    | `<your-asset-hosted-base-url>` | Needed if you have a separate URL for hosted assets         |
 
 ### Deprecated / Removed Environment Variables
 

apps/formbricks-com/app/docs/self-hosting/production/page.mdx

@@ -168,7 +168,7 @@ To update Formbricks, simply run the following command:
 
 </CodeGroup>
 </Col>
-The script will automatically pull the latest version of Formbricks from Dockerhub and restart the containers.
+The script will automatically pull the latest version of Formbricks from GitHub Container Registry and restart the containers.
 
 ## Stop Formbricks Instance
 

apps/formbricks-com/app/providers.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { useEffect } from "react";
 import { ThemeProvider, useTheme } from "next-themes";
+import { useEffect } from "react";
 
 function ThemeWatcher() {
   let { resolvedTheme, setTheme } = useTheme();

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

@@ -1,14 +1,14 @@
 "use client";
 
-import Link from "next/link";
-import { type MotionValue, motion, useMotionTemplate, useMotionValue } from "framer-motion";
-
-import { GridPattern } from "./GridPattern";
-import { Heading } from "./Heading";
 import { ChatBubbleIcon } from "@/components/docs/icons/ChatBubbleIcon";
 import { EnvelopeIcon } from "@/components/docs/icons/EnvelopeIcon";
 import { UserIcon } from "@/components/docs/icons/UserIcon";
 import { UsersIcon } from "@/components/docs/icons/UsersIcon";
+import { type MotionValue, motion, useMotionTemplate, useMotionValue } from "framer-motion";
+import Link from "next/link";
+
+import { GridPattern } from "./GridPattern";
+import { Heading } from "./Heading";
 
 interface BestPractice {
   href: string;

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

@@ -1,5 +1,5 @@
-import Link from "next/link";
 import clsx from "clsx";
+import Link from "next/link";
 
 function ArrowIcon(props: React.ComponentPropsWithoutRef<"svg">) {
   return (

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

@@ -1,12 +1,11 @@
 "use client";
 
-import { Children, createContext, isValidElement, useContext, useEffect, useRef, useState } from "react";
+import { Tag } from "@/components/docs/Tag";
 import { Tab } from "@headlessui/react";
 import clsx from "clsx";
+import { Children, createContext, isValidElement, useContext, useEffect, useRef, useState } from "react";
 import { create } from "zustand";
 
-import { Tag } from "@/components/docs/Tag";
-
 const languageNames: Record<string, string> = {
   js: "JavaScript",
   ts: "TypeScript",

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

@@ -1,8 +1,9 @@
 "use client";
 
+import { useState } from "react";
+
 import { Button } from "@formbricks/ui/Button";
 import { Popover, PopoverContent, PopoverTrigger } from "@formbricks/ui/Popover";
-import { useState } from "react";
 
 export const DocsFeedback: React.FC = () => {
   const [isOpen, setIsOpen] = useState(false);

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

@@ -1,8 +1,9 @@
 "use client";
 
-import { forwardRef, Fragment, useState } from "react";
-import { usePathname } from "next/navigation";
 import { Transition } from "@headlessui/react";
+import { usePathname } from "next/navigation";
+import { Fragment, forwardRef, useState } from "react";
+
 import { handleFeedbackSubmit } from "../../lib/handleFeedbackSubmit";
 
 function CheckIcon(props: React.ComponentPropsWithoutRef<"svg">) {

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

@@ -2,7 +2,8 @@
 
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { FaGithub, FaXTwitter, FaDiscord } from "react-icons/fa6";
+import { FaDiscord, FaGithub, FaXTwitter } from "react-icons/fa6";
+
 import { Button } from "./Button";
 import { navigation } from "./Navigation";
 

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

@@ -1,11 +1,11 @@
 "use client";
 
+import { FooterLogo } from "@/components/shared/Logo";
 import clsx from "clsx";
 import { motion, useScroll, useTransform } from "framer-motion";
 import Link from "next/link";
 import { forwardRef } from "react";
 
-import { FooterLogo } from "@/components/shared/Logo";
 import { Button } from "./Button";
 import { MobileNavigation, useIsInsideMobileNavigation, useMobileNavigationStore } from "./MobileNavigation";
 import { MobileSearch, Search } from "./Search";

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

@@ -1,13 +1,13 @@
 "use client";
 
+import { remToPx } from "@/lib/remToPx";
 import { useInView } from "framer-motion";
 import Link from "next/link";
+import { usePathname } from "next/navigation";
 import { useEffect, useRef } from "react";
 
-import { remToPx } from "@/lib/remToPx";
 import { useSectionStore } from "./SectionProvider";
 import { Tag } from "./Tag";
-import { usePathname } from "next/navigation";
 
 function AnchorIcon(props: React.ComponentPropsWithoutRef<"svg">) {
   return (

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

@@ -1,14 +1,14 @@
 "use client";
 
+import { Navigation } from "@/components/docs/Navigation";
+import { FooterLogo } from "@/components/shared/Logo";
+import { motion } from "framer-motion";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { motion } from "framer-motion";
 
 import { Footer } from "./Footer";
 import { Header } from "./Header";
 import { type Section, SectionProvider } from "./SectionProvider";
-import { FooterLogo } from "@/components/shared/Logo";
-import { Navigation } from "@/components/docs/Navigation";
 
 export function Layout({
   children,

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

@@ -1,9 +1,9 @@
-import Image from "next/image";
-
 import logoHtml from "@/images/logos/html5.svg";
 import logoNextjs from "@/images/logos/nextjs.svg";
 import logoReactJs from "@/images/logos/reactjs.svg";
 import logoVueJs from "@/images/logos/vuejs.svg";
+import Image from "next/image";
+
 import { Button } from "./Button";
 
 const libraries = [

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

@@ -1,12 +1,12 @@
 "use client";
 
-import { createContext, Fragment, Suspense, useContext, useEffect, useRef } from "react";
+import { Header } from "@/components/docs/Header";
-import { usePathname, useSearchParams } from "next/navigation";
 import { Dialog, Transition } from "@headlessui/react";
 import { motion } from "framer-motion";
+import { usePathname, useSearchParams } from "next/navigation";
+import { Fragment, Suspense, createContext, useContext, useEffect, useRef } from "react";
 import { create } from "zustand";
 
-import { Header } from "@/components/docs/Header";
 import { Navigation } from "./Navigation";
 
 function MenuIcon(props: React.ComponentPropsWithoutRef<"svg">) {

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

@@ -1,12 +1,12 @@
 "use client";
 
+import { remToPx } from "@/lib/remToPx";
 import clsx from "clsx";
 import { AnimatePresence, motion, useIsPresent } from "framer-motion";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useRef } from "react";
 
-import { remToPx } from "@/lib/remToPx";
 import { Button } from "./Button";
 import { useIsInsideMobileNavigation } from "./MobileNavigation";
 import { useSectionStore } from "./SectionProvider";

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

@@ -1,19 +1,18 @@
 "use client";
 
-import { forwardRef, Fragment, Suspense, useCallback, useEffect, useId, useRef, useState } from "react";
+import { navigation } from "@/components/docs/Navigation";
-import Highlighter from "react-highlight-words";
+import { type Result } from "@/mdx/search.mjs";
-import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import {
   type AutocompleteApi,
-  createAutocomplete,
-  type AutocompleteState,
   type AutocompleteCollection,
+  type AutocompleteState,
+  createAutocomplete,
 } from "@algolia/autocomplete-core";
 import { Dialog, Transition } from "@headlessui/react";
 import clsx from "clsx";
-
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
-import { type Result } from "@/mdx/search.mjs";
+import { Fragment, Suspense, forwardRef, useCallback, useEffect, useId, useRef, useState } from "react";
-import { navigation } from "@/components/docs/Navigation";
+import Highlighter from "react-highlight-words";
 
 type EmptyObject = Record<string, never>;
 

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

@@ -1,10 +1,9 @@
 "use client";
 
+import { remToPx } from "@/lib/remToPx";
 import { createContext, useContext, useEffect, useLayoutEffect, useState } from "react";
 import { type StoreApi, createStore, useStore } from "zustand";
 
-import { remToPx } from "@/lib/remToPx";
-
 export interface Section {
   id: string;
   title: string;

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

@@ -1,7 +1,7 @@
 "use client";
 
-import { useEffect, useState } from "react";
 import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
 
 function SunIcon(props: React.ComponentPropsWithoutRef<"svg">) {
   return (

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

@@ -1,4 +1,5 @@
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@formbricks/ui/Accordion";
+
 import FaqJsonLdComponent from "./faQJsonLD";
 
 const FAQ_DATA = [
@@ -45,6 +46,15 @@ const FAQ_DATA = [
       </>
     ),
   },
+  {
+    question: "How can I change Button texts in my survey?",
+    answer: () => (
+      <>
+        For the question that you want to change the button text, click on the <b>Show Advanced Settings</b>{" "}
+        toggle and change the button label in the <b>Button Text</b> field.
+      </>
+    ),
+  },
 ];
 
 export const faqJsonLdData = FAQ_DATA.map((faq) => ({

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

@@ -1,7 +1,7 @@
-import Link from "next/link";
-import clsx from "clsx";
-
 import { Feedback } from "@/components/docs/Feedback";
+import clsx from "clsx";
+import Link from "next/link";
+
 import { Heading } from "./Heading";
 import { Prose } from "./Prose";
 

apps/formbricks-com/components/dummyUI/AddEventDummy.tsx

@@ -1,8 +1,9 @@
-import { Button } from "@formbricks/ui/Button";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@formbricks/ui/Select";
 import { PlusIcon, TrashIcon } from "@heroicons/react/24/solid";
 import { useState } from "react";
 
+import { Button } from "@formbricks/ui/Button";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@formbricks/ui/Select";
+
 const DummyUI: React.FC = () => {
   const actionClasses = [
     { id: "1", name: "View Dashboard" },

apps/formbricks-com/components/dummyUI/AddNoCodeEventModalDummy.tsx

@@ -1,10 +1,11 @@
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@formbricks/ui/Select";
-import { Button } from "@formbricks/ui/Button";
-import { Label } from "@formbricks/ui/Label";
-import { Input } from "@formbricks/ui/Input";
-import { RadioGroup, RadioGroupItem } from "@formbricks/ui/RadioGroup";
 import { CursorArrowRaysIcon } from "@heroicons/react/24/solid";
+
+import { Button } from "@formbricks/ui/Button";
+import { Input } from "@formbricks/ui/Input";
+import { Label } from "@formbricks/ui/Label";
 import { Modal } from "@formbricks/ui/Modal";
+import { RadioGroup, RadioGroupItem } from "@formbricks/ui/RadioGroup";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@formbricks/ui/Select";
 
 interface EventDetailModalProps {
   open: boolean;

apps/formbricks-com/components/dummyUI/CTAQuestion.tsx

@@ -1,4 +1,5 @@
 import { TSurveyCTAQuestion } from "@formbricks/types/surveys";
+
 import Headline from "./Headline";
 import HtmlBody from "./HtmlBody";
 

apps/formbricks-com/components/dummyUI/DemoPreview.tsx

@@ -1,8 +1,11 @@
 "use client";
+
 import React, { useEffect, useState } from "react";
+
+import { TTemplate } from "@formbricks/types/templates";
+
 import PreviewSurvey from "./PreviewSurvey";
 import { findTemplateByName } from "./templates";
-import { TTemplate } from "@formbricks/types/templates";
 
 interface DemoPreviewProps {
   template: string;

apps/formbricks-com/components/dummyUI/DemoView.tsx

@@ -1,5 +1,7 @@
-import { TTemplate } from "@formbricks/types/templates";
 import { useEffect, useState } from "react";
+
+import { TTemplate } from "@formbricks/types/templates";
+
 import PreviewSurvey from "./PreviewSurvey";
 import TemplateList from "./TemplateList";
 import { templates } from "./templates";

apps/formbricks-com/components/dummyUI/Modal.tsx

@@ -1,4 +1,5 @@
 import { ReactNode, useEffect, useState } from "react";
+
 import { cn } from "@formbricks/lib/cn";
 
 export default function Modal({

apps/formbricks-com/components/dummyUI/MultipleChoiceMultiQuestion.tsx

@@ -1,6 +1,8 @@
-import { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
+
 import { cn } from "@formbricks/lib/cn";
 import { TSurveyMultipleChoiceMultiQuestion } from "@formbricks/types/surveys";
+
 import Headline from "./Headline";
 import Subheader from "./Subheader";
 

apps/formbricks-com/components/dummyUI/MultipleChoiceSingleQuestion.tsx

@@ -1,6 +1,8 @@
+import { useState } from "react";
+
 import { cn } from "@formbricks/lib/cn";
 import { TSurveyMultipleChoiceSingleQuestion } from "@formbricks/types/surveys";
-import { useState } from "react";
+
 import Headline from "./Headline";
 import Subheader from "./Subheader";
 

apps/formbricks-com/components/dummyUI/NPSQuestion.tsx

@@ -1,6 +1,8 @@
 import { useState } from "react";
+
 import { cn } from "@formbricks/lib/cn";
 import { TSurveyNPSQuestion } from "@formbricks/types/surveys";
+
 import Headline from "./Headline";
 import Subheader from "./Subheader";
 

apps/formbricks-com/components/dummyUI/OpenTextQuestion.tsx

@@ -1,5 +1,7 @@
-import { TSurveyOpenTextQuestion } from "@formbricks/types/surveys";
 import { useState } from "react";
+
+import { TSurveyOpenTextQuestion } from "@formbricks/types/surveys";
+
 import Headline from "./Headline";
 import Subheader from "./Subheader";
 

apps/formbricks-com/components/dummyUI/PreviewSurvey.tsx

@@ -1,7 +1,9 @@
 import { useState } from "react";
+
+import { TSurvey, TSurveyQuestion } from "@formbricks/types/surveys";
+
 import Modal from "./Modal";
 import QuestionConditional from "./QuestionConditional";
-import { TSurveyQuestion, TSurvey } from "@formbricks/types/surveys";
 import ThankYouCard from "./ThankYouCard";
 
 interface PreviewSurveyProps {

apps/formbricks-com/components/dummyUI/QuestionConditional.tsx

@@ -1,9 +1,10 @@
 import { TSurveyQuestion, TSurveyQuestionType } from "@formbricks/types/surveys";
-import OpenTextQuestion from "./OpenTextQuestion";
+
-import MultipleChoiceSingleQuestion from "./MultipleChoiceSingleQuestion";
-import MultipleChoiceMultiQuestion from "./MultipleChoiceMultiQuestion";
-import NPSQuestion from "./NPSQuestion";
 import CTAQuestion from "./CTAQuestion";
+import MultipleChoiceMultiQuestion from "./MultipleChoiceMultiQuestion";
+import MultipleChoiceSingleQuestion from "./MultipleChoiceSingleQuestion";
+import NPSQuestion from "./NPSQuestion";
+import OpenTextQuestion from "./OpenTextQuestion";
 import RatingQuestion from "./RatingQuestion";
 
 interface QuestionConditionalProps {

apps/formbricks-com/components/dummyUI/RatingQuestion.tsx

@@ -1,6 +1,8 @@
-import { TSurveyRatingQuestion } from "@formbricks/types/surveys";
 import { useState } from "react";
+
 import { cn } from "@formbricks/lib/cn";
+import { TSurveyRatingQuestion } from "@formbricks/types/surveys";
+
 import Headline from "./Headline";
 import Subheader from "./Subheader";
 

apps/formbricks-com/components/dummyUI/TemplateList.tsx

@@ -1,6 +1,8 @@
-import { TTemplate } from "@formbricks/types/templates";
 import { useEffect, useState } from "react";
+
 import { cn } from "@formbricks/lib/cn";
+import { TTemplate } from "@formbricks/types/templates";
+
 import { templates } from "./templates";
 
 type TemplateList = {

apps/formbricks-com/components/dummyUI/templates.ts

@@ -1,3 +1,7 @@
+import { createId } from "@paralleldrive/cuid2";
+
+import { TSurveyQuestionType } from "@formbricks/types/surveys";
+import { TTemplate } from "@formbricks/types/templates";
 import {
   AppPieChartIcon,
   ArrowRightCircleIcon,
@@ -22,16 +26,18 @@ import {
   VideoTabletAdjustIcon,
 } from "@formbricks/ui/icons";
 
-import { createId } from "@paralleldrive/cuid2";
-import { TTemplate } from "@formbricks/types/templates";
-import { TSurveyQuestionType } from "@formbricks/types/surveys";
-
 const thankYouCardDefault = {
   enabled: true,
   headline: "Thank you!",
   subheader: "We appreciate your feedback.",
 };
 
+const welcomeCardDefault = {
+  enabled: true,
+  timeToFinish: false,
+  showResponseCount: false,
+};
+
 export const customSurvey: TTemplate = {
   name: "Start from scratch",
   description: "Create a survey without template.",
@@ -51,10 +57,7 @@ export const customSurvey: TTemplate = {
       },
     ],
     thankYouCard: thankYouCardDefault,
-    welcomeCard: {
+    welcomeCard: welcomeCardDefault,
-      enabled: false,
-      timeToFinish: false,
-    },
     hiddenFields: {
       enabled: false,
     },
@@ -150,10 +153,7 @@ export const templates: TTemplate[] = [
         },
       ],
       thankYouCard: thankYouCardDefault,
-      welcomeCard: {
+      welcomeCard: welcomeCardDefault,
-        enabled: false,
-        timeToFinish: false,
-      },
       hiddenFields: {
         enabled: false,
       },
@@ -260,10 +260,7 @@ export const templates: TTemplate[] = [
         },
       ],
       thankYouCard: thankYouCardDefault,
-      welcomeCard: {
+      welcomeCard: welcomeCardDefault,
-        enabled: false,
-        timeToFinish: false,
-      },
       hiddenFields: {
         enabled: false,
       },
@@ -340,10 +337,7 @@ export const templates: TTemplate[] = [
         },
       ],
       thankYouCard: thankYouCardDefault,
-      welcomeCard: {
+      welcomeCard: welcomeCardDefault,
-        enabled: false,
-        timeToFinish: false,
-      },
       hiddenFields: {
         enabled: false,
       },
@@ -389,10 +383,7 @@ export const templates: TTemplate[] = [
         },
       ],
       thankYouCard: thankYouCardDefault,
-      welcomeCard: {
+      welcomeCard: welcomeCardDefault,
-        enabled: false,
-        timeToFinish: false,
-      },
       hiddenFields: {
         enabled: false,
       },
@@ -447,10 +438,7 @@ export const templates: TTemplate[] = [
         },
       ],
       thankYouCard: thankYouCardDefault,
-      welcomeCard: {
+      welcomeCard: welcomeCardDefault,
-        enabled: false,
-        timeToFinish: false,
-      },
       hiddenFields: {
         enabled: false,
       },
@@ -513,10 +501,7 @@ export const templates: TTemplate[] = [
         },
       ],
       thankYouCard: thankYouCardDefault,
-      welcomeCard: {
+      welcomeCard: welcomeCardDefault,
-        enabled: false,
-        timeToFinish: false,
-      },
       hiddenFields: {
         enabled: false,
       },
@@ -582,10 +567,7 @@ export const templates: TTemplate[] = [
         },
       ],
       thankYouCard: thankYouCardDefault,
-      welcomeCard: {
+      welcomeCard: welcomeCardDefault,
-        enabled: false,
-        timeToFinish: false,
-      },
       hiddenFields: {
         enabled: false,
       },
@@ -640,10 +622,7 @@ export const templates: TTemplate[] = [
         },
       ],
       thankYouCard: thankYouCardDefault,
-      welcomeCard: {
+      welcomeCard: welcomeCardDefault,
-        enabled: false,
-        timeToFinish: false,
-      },
       hiddenFields: {
         enabled: false,
       },
@@ -685,10 +664,7 @@ export const templates: TTemplate[] = [
         },
       ],
       thankYouCard: thankYouCardDefault,
-      welcomeCard: {
+      welcomeCard: welcomeCardDefault,
-        enabled: false,
-        timeToFinish: false,
-      },
       hiddenFields: {
         enabled: false,
       },
@@ -723,10 +699,7 @@ export const templates: TTemplate[] = [
         },
       ],
       thankYouCard: thankYouCardDefault,
-      welcomeCard: {
+      welcomeCard: welcomeCardDefault,
-        enabled: false,
-        timeToFinish: false,
-      },
       hiddenFields: {
         enabled: false,
       },
@@ -752,10 +725,7 @@ export const templates: TTemplate[] = [
         },
       ],
       thankYouCard: thankYouCardDefault,
-      welcomeCard: {
+      welcomeCard: welcomeCardDefault,
-        enabled: false,
-        timeToFinish: false,
-      },
       hiddenFields: {
         enabled: false,
       },
@@ -803,10 +773,7 @@ export const templates: TTemplate[] = [
         },
       ],
       thankYouCard: thankYouCardDefault,
-      welcomeCard: {
+      welcomeCard: welcomeCardDefault,
-        enabled: false,
-        timeToFinish: false,
-      },
       hiddenFields: {
         enabled: false,
       },
@@ -848,10 +815,7 @@ export const templates: TTemplate[] = [
         },
       ],
       thankYouCard: thankYouCardDefault,
-      welcomeCard: {
+      welcomeCard: welcomeCardDefault,
-        enabled: false,
-        timeToFinish: false,
-      },
       hiddenFields: {
         enabled: false,
       },
@@ -905,10 +869,7 @@ export const templates: TTemplate[] = [
         },
       ],
       thankYouCard: thankYouCardDefault,
-      welcomeCard: {
+      welcomeCard: welcomeCardDefault,
-        enabled: false,
-        timeToFinish: false,
-      },
       hiddenFields: {
         enabled: false,
       },
@@ -961,10 +922,7 @@ export const templates: TTemplate[] = [
         },
       ],
       thankYouCard: thankYouCardDefault,
-      welcomeCard: {
+      welcomeCard: welcomeCardDefault,
-        enabled: false,
-        timeToFinish: false,
-      },
       hiddenFields: {
         enabled: false,
       },
@@ -1013,10 +971,7 @@ export const templates: TTemplate[] = [
         },
       ],
       thankYouCard: thankYouCardDefault,
-      welcomeCard: {
+      welcomeCard: welcomeCardDefault,
-        enabled: false,
-        timeToFinish: false,
-      },
       hiddenFields: {
         enabled: false,
       },
@@ -1043,10 +998,7 @@ export const templates: TTemplate[] = [
         },
       ],
       thankYouCard: thankYouCardDefault,
-      welcomeCard: {
+      welcomeCard: welcomeCardDefault,
-        enabled: false,
-        timeToFinish: false,
-      },
       hiddenFields: {
         enabled: false,
       },
@@ -1071,10 +1023,7 @@ export const templates: TTemplate[] = [
         },
       ],
       thankYouCard: thankYouCardDefault,
-      welcomeCard: {
+      welcomeCard: welcomeCardDefault,
-        enabled: false,
-        timeToFinish: false,
-      },
       hiddenFields: {
         enabled: false,
       },
@@ -1098,10 +1047,7 @@ export const templates: TTemplate[] = [
         },
       ],
       thankYouCard: thankYouCardDefault,
-      welcomeCard: {
+      welcomeCard: welcomeCardDefault,
-        enabled: false,
-        timeToFinish: false,
-      },
       hiddenFields: {
         enabled: false,
       },
@@ -1142,10 +1088,7 @@ export const templates: TTemplate[] = [
         },
       ],
       thankYouCard: thankYouCardDefault,
-      welcomeCard: {
+      welcomeCard: welcomeCardDefault,
-        enabled: false,
-        timeToFinish: false,
-      },
       hiddenFields: {
         enabled: false,
       },
@@ -1179,10 +1122,7 @@ export const templates: TTemplate[] = [
         },
       ],
       thankYouCard: thankYouCardDefault,
-      welcomeCard: {
+      welcomeCard: welcomeCardDefault,
-        enabled: false,
-        timeToFinish: false,
-      },
       hiddenFields: {
         enabled: false,
       },
@@ -1216,10 +1156,7 @@ export const templates: TTemplate[] = [
         },
       ],
       thankYouCard: thankYouCardDefault,
-      welcomeCard: {
+      welcomeCard: welcomeCardDefault,
-        enabled: false,
-        timeToFinish: false,
-      },
       hiddenFields: {
         enabled: false,
       },
@@ -1281,10 +1218,7 @@ export const templates: TTemplate[] = [
         },
       ],
       thankYouCard: thankYouCardDefault,
-      welcomeCard: {
+      welcomeCard: welcomeCardDefault,
-        enabled: false,
-        timeToFinish: false,
-      },
       hiddenFields: {
         enabled: false,
       },

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

@@ -1,6 +1,6 @@
+import HeadingCentered from "@/components/shared/HeadingCentered";
 import { FAQPageJsonLd } from "next-seo";
 
-import HeadingCentered from "@/components/shared/HeadingCentered";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@formbricks/ui/Accordion";
 
 const FAQ_DATA = [

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

@@ -1,4 +1,5 @@
 import { CodeFileIcon, EyeIcon, HandPuzzleIcon } from "@formbricks/ui/icons";
+
 import HeadingCentered from "../shared/HeadingCentered";
 
 const features = [

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

@@ -1,5 +1,3 @@
-import PHIcon from "@/images/formtribe/ph-logo.png";
-import Image from "next/image";
 import Link from "next/link";
 
 export const GitHubSponsorship: React.FC = () => {
@@ -38,7 +36,7 @@ export const GitHubSponsorship: React.FC = () => {
           </p>
         </div>
         <div className="flex items-center justify-end">
-          <Image src={PHIcon} alt="Product Hunt Logo" width={80} className="" />
+          {/* <Image src={PHIcon} alt="Product Hunt Logo" width={80} className="" /> */}
         </div>
       </div>
     </Link>

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

@@ -1,16 +1,18 @@
 import CalLogoDark from "@/images/clients/cal-logo-dark.svg";
 import CalLogoLight from "@/images/clients/cal-logo-light.svg";
-import ClovyrLogo from "@/images/clients/clovyr-logo.svg";
 import CrowdLogoDark from "@/images/clients/crowd-logo-dark.svg";
 import CrowdLogoLight from "@/images/clients/crowd-logo-light.svg";
+import FlixbusLogo from "@/images/clients/flixbus-white.svg";
 import NILogoDark from "@/images/clients/niLogoDark.svg";
 import NILogoLight from "@/images/clients/niLogoWhite.svg";
 import AnimationFallback from "@/public/animations/opensource-xm-platform-formbricks-fallback.png";
-import { Button } from "@formbricks/ui/Button";
 import { ChevronRightIcon } from "@heroicons/react/24/outline";
 import { usePlausible } from "next-plausible";
 import Image from "next/image";
 import { useRouter } from "next/router";
+
+import { Button } from "@formbricks/ui/Button";
+
 import HeroAnimation from "./HeroAnimation";
 
 export const Hero: React.FC = ({}) => {
@@ -27,11 +29,11 @@ export const Hero: React.FC = ({}) => {
           <ChevronRightIcon className="mb-1 ml-1 inline h-4 w-4 text-slate-300" />
         </a>
         <h1 className="mt-10 text-3xl font-bold tracking-tight text-slate-800 dark:text-slate-200 sm:text-4xl md:text-5xl">
-          <span className="xl:inline">The Open Source Survey Suite</span>
+          <span className="xl:inline">Privacy-first Experience Management</span>
         </h1>
 
         <p className="xs:max-w-none mx-auto mt-3 max-w-xs text-base text-slate-500 dark:text-slate-400 sm:text-lg md:mt-5 md:text-xl">
-          Run link surveys, in-app surveys and email surveys in one app —{" "}
+          Turn customer insights into irresistible experiences —{" "}
           <span className="decoration-brand-dark underline underline-offset-4">all privacy-first.</span>
         </p>
 
@@ -40,6 +42,12 @@ export const Hero: React.FC = ({}) => {
             Trusted by
           </p>
           <div className="grid grid-cols-4 items-center gap-6 pt-2 md:gap-8">
+            <Image
+              src={FlixbusLogo}
+              alt="Flixbus Flix Flixtrain Logo"
+              className="rounded-lg pb-1 hover:opacity-100 md:opacity-50"
+              width={200}
+            />
             <Image
               src={CalLogoLight}
               alt="Cal Logo"
@@ -76,12 +84,6 @@ export const Hero: React.FC = ({}) => {
               className="hidden  pb-1 hover:opacity-100 dark:block md:opacity-50"
               width={200}
             />
-            <Image
-              src={ClovyrLogo}
-              alt="Clovyr Logo"
-              className="rounded-lg pb-1 hover:opacity-100 md:opacity-50"
-              width={200}
-            />
           </div>
         </div>
         <div className="hidden pt-10 md:block">
@@ -92,7 +94,7 @@ export const Hero: React.FC = ({}) => {
               router.push("https://app.formbricks.com/auth/signup");
               plausible("Hero_CTA_CreateSurvey");
             }}>
-            Create survey
+            Get started
           </Button>
           <Button
             variant="secondary"

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

@@ -1,8 +1,9 @@
-import { Button } from "@formbricks/ui/Button";
 import { ArrowUpIcon } from "@heroicons/react/24/solid";
 import throttle from "lodash/throttle";
 import { useCallback, useEffect, useState } from "react";
 
+import { Button } from "@formbricks/ui/Button";
+
 const ScrollToTopButton = () => {
   const [visible, setVisible] = useState(false);
 

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

@@ -1,6 +1,7 @@
 import clsx from "clsx";
 import { useState } from "react";
 import { IoLogoHtml5, IoLogoNpm } from "react-icons/io5";
+
 import CodeBlock from "../shared/CodeBlock";
 
 interface SecondNavbarProps {

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

@@ -1,10 +1,12 @@
 import DemoPreview from "@/components/dummyUI/DemoPreview";
 import DashboardMockupDark from "@/images/dashboard-mockup-dark.png";
 import DashboardMockup from "@/images/dashboard-mockup.png";
-import { Button } from "@formbricks/ui/Button";
 import { CursorArrowRaysIcon } from "@heroicons/react/24/solid";
 import Image from "next/image";
 import { useState } from "react";
+
+import { Button } from "@formbricks/ui/Button";
+
 import AddEventDummy from "../dummyUI/AddEventDummy";
 import AddNoCodeEventModalDummy from "../dummyUI/AddNoCodeEventModalDummy";
 import HeadingCentered from "../shared/HeadingCentered";

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

@@ -1,5 +1,5 @@
-import { ResponsiveVideo } from "@formbricks/ui/ResponsiveVideo";
 import { Modal } from "@formbricks/ui/Modal";
+import { ResponsiveVideo } from "@formbricks/ui/ResponsiveVideo";
 
 interface VideoWalkThroughProps {
   open: boolean;

apps/formbricks-com/components/shared/BestPracticeNavigation.tsx

@@ -1,3 +1,6 @@
+import clsx from "clsx";
+import Link from "next/link";
+
 import {
   BaseballIcon,
   CancelSubscriptionIcon,
@@ -8,8 +11,6 @@ import {
   OnboardingIcon,
   PMFIcon,
 } from "@formbricks/ui/icons";
-import clsx from "clsx";
-import Link from "next/link";
 
 export default function BestPracticeNavigation() {
   const BestPractices = [
@@ -83,8 +84,8 @@ export default function BestPracticeNavigation() {
   return (
     <div className="mx-auto grid grid-cols-1 gap-6 px-2 md:grid-cols-3">
       {BestPractices.map((bestPractice) => (
-        <Link href={bestPractice.href} key={bestPractice.name}>
+        <Link className="relative block" href={bestPractice.href} key={bestPractice.name}>
-          <div className="drop-shadow-card duration-120 hover:border-brand-dark relative rounded-lg border border-slate-100 bg-slate-100 p-6 transition-all ease-in-out hover:scale-105 hover:cursor-pointer dark:border-slate-600 dark:bg-slate-800">
+          <div className="drop-shadow-card duration-120 hover:border-brand-dark relative h-full rounded-lg border border-slate-100 bg-slate-100 p-6 transition-all ease-in-out hover:scale-105 hover:cursor-pointer dark:border-slate-600 dark:bg-slate-800">
             <div
               className={clsx(
                 // base styles independent what type of button it is
@@ -105,7 +106,9 @@ export default function BestPracticeNavigation() {
             <h3 className="mb-1 mt-3 text-xl font-bold text-slate-700 dark:text-slate-200">
               {bestPractice.name}
             </h3>
-            <p className="text-sm text-slate-600 dark:text-slate-400">{bestPractice.description}</p>
+            <p className="flex self-end text-sm text-slate-600 dark:text-slate-400">
+              {bestPractice.description}
+            </p>
           </div>
         </Link>
       ))}

apps/formbricks-com/components/shared/BreakerCTA.tsx

@@ -1,8 +1,9 @@
-import { Button } from "@formbricks/ui/Button";
 import clsx from "clsx";
 import { usePlausible } from "next-plausible";
 import { useRouter } from "next/router";
 
+import { Button } from "@formbricks/ui/Button";
+
 interface Props {
   teaser: string;
   headline: string;

apps/formbricks-com/components/shared/CTA.tsx

@@ -1,5 +1,7 @@
-import { Button } from "@formbricks/ui/Button";
 import { useRouter } from "next/router";
+
+import { Button } from "@formbricks/ui/Button";
+
 import HeadingCentered from "./HeadingCentered";
 
 export default function CTA() {

apps/formbricks-com/components/shared/Callout.tsx

@@ -1,5 +1,5 @@
-import clsx from "clsx";
 import { Icon } from "@/components/shared/Icon";
+import clsx from "clsx";
 
 const styles = {
   note: {

apps/formbricks-com/components/shared/EarlyBirdDeal.tsx

@@ -1,8 +1,9 @@
 import EarlyBird from "@/images/early bird deal for open source jotform alternative typeform and surveymonkey_v2.svg";
-import { Button } from "@formbricks/ui/Button";
 import { usePlausible } from "next-plausible";
 import Image from "next/image";
 
+import { Button } from "@formbricks/ui/Button";
+
 export default function EarlyBirdDeal() {
   const plausible = usePlausible();
   return (

apps/formbricks-com/components/shared/FeatureHighlight.tsx

@@ -1,6 +1,7 @@
-import { Button } from "@formbricks/ui/Button";
-import { useRouter } from "next/router";
 import clsx from "clsx";
+import { useRouter } from "next/router";
+
+import { Button } from "@formbricks/ui/Button";
 
 interface Props {
   featureTitle: string;

apps/formbricks-com/components/shared/Footer.tsx

@@ -1,6 +1,7 @@
 import Link from "next/link";
+import { FaDiscord, FaGithub, FaXTwitter } from "react-icons/fa6";
+
 import { FooterLogo } from "./Logo";
-import { FaGithub, FaXTwitter, FaDiscord } from "react-icons/fa6";
 
 const navigation = {
   other: [
@@ -33,7 +34,7 @@ export default function Footer() {
 
   return (
     <footer
-      className="mt-32 bg-gradient-to-b from-slate-50 to-slate-200 dark:from-slate-900 dark:to-slate-800"
+      className="bg-gradient-to-b from-slate-50 to-slate-200 pt-32 dark:from-slate-900 dark:to-slate-800"
       aria-labelledby="footer-heading">
       <h2 id="footer-heading" className="sr-only">
         Footer

apps/formbricks-com/components/shared/Header.tsx

@@ -1,5 +1,14 @@
 import GitHubMarkWhite from "@/images/github-mark-white.svg";
 import GitHubMarkDark from "@/images/github-mark.svg";
+import { Popover, Transition } from "@headlessui/react";
+import { Bars3Icon, ChevronDownIcon, ChevronRightIcon, XMarkIcon } from "@heroicons/react/24/outline";
+import clsx from "clsx";
+import { usePlausible } from "next-plausible";
+import Image from "next/image";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { Fragment, useEffect, useState } from "react";
+
 import { Button } from "@formbricks/ui/Button";
 import {
   BaseballIcon,
@@ -11,16 +20,8 @@ import {
   OnboardingIcon,
   PMFIcon,
 } from "@formbricks/ui/icons";
-import { Popover, Transition } from "@headlessui/react";
+
-import { Bars3Icon, ChevronDownIcon, ChevronRightIcon, XMarkIcon } from "@heroicons/react/24/outline";
-import clsx from "clsx";
-import { usePlausible } from "next-plausible";
-import Image from "next/image";
-import Link from "next/link";
-import { useRouter } from "next/router";
-import { Fragment, useEffect, useState } from "react";
 import { FooterLogo } from "./Logo";
-import { ThemeSelector } from "./ThemeSelector";
 
 function GitHubIcon(props: any) {
   return (
@@ -278,6 +279,11 @@ export default function Header() {
             className="text-sm font-medium text-slate-400 hover:text-slate-700 dark:hover:text-slate-300  lg:text-base">
             Pricing
           </Link>
+          <Link
+            href="/concierge"
+            className="text-sm font-medium text-slate-400 hover:text-slate-700 dark:hover:text-slate-300  lg:text-base">
+            Concierge
+          </Link>
           <Link
             href="/docs"
             className="text-sm font-medium text-slate-400 hover:text-slate-700 dark:hover:text-slate-300  lg:text-base">
@@ -293,15 +299,8 @@ export default function Header() {
             className="text-base font-medium text-slate-400 hover:text-slate-700  dark:hover:text-slate-300">
             Careers <p className="bg-brand inline rounded-full px-2 text-xs text-white">1</p>
           </Link> */}
-
-          <Link
-            href="/concierge"
-            className="text-sm font-medium text-slate-400 hover:text-slate-700 dark:hover:text-slate-300  lg:text-base">
-            Concierge
-          </Link>
         </Popover.Group>
         <div className="hidden flex-1 items-center justify-end md:flex">
-          <ThemeSelector className="relative z-10 mr-2 lg:mr-5" />
           <Button
             variant="secondary"
             className="group hidden px-2 lg:block"

apps/formbricks-com/components/shared/HeroAnimation.tsx

@@ -1,5 +1,5 @@
-import { useEffect, useRef, useState } from "react";
 import type { LottiePlayer } from "lottie-web";
+import { useEffect, useRef, useState } from "react";
 
 export default function HeroAnimation(props: any) {
   const ref = useRef<HTMLDivElement>(null);

apps/formbricks-com/components/shared/LayoutMdx.tsx

@@ -1,5 +1,6 @@
 import SlideInBanner from "@/components/shared/SlideInBanner";
 import { useEffect } from "react";
+
 import Footer from "./Footer";
 import Header from "./Header";
 import MetaInformation from "./MetaInformation";

apps/formbricks-com/components/shared/Logo.tsx

@@ -1,9 +1,9 @@
-import Image from "next/image";
+import footerLogoDark from "@/images/logo/footerlogo-dark.svg";
-import logomark from "@/images/logo/logomark.svg";
+import footerLogo from "@/images/logo/footerlogo.svg";
 import logo from "@/images/logo/logo.svg";
 import logoDark from "@/images/logo/logo_dark.svg";
-import footerLogo from "@/images/logo/footerlogo.svg";
+import logomark from "@/images/logo/logomark.svg";
-import footerLogoDark from "@/images/logo/footerlogo-dark.svg";
+import Image from "next/image";
 
 export function Logomark(props: any) {
   return <Image src={logomark} {...props} alt="Formbricks Open source Forms & Surveys Logomark" />;

apps/formbricks-com/components/shared/MdxCTA.tsx

@@ -1,6 +1,7 @@
-import { Button } from "@formbricks/ui/Button";
 import { useRouter } from "next/router";
 
+import { Button } from "@formbricks/ui/Button";
+
 export default function CTA() {
   const router = useRouter();
   return (

apps/formbricks-com/components/shared/MdxTryItCTA.tsx

@@ -1,7 +1,8 @@
-import { Button } from "@formbricks/ui/Button";
 import { DocumentDuplicateIcon } from "@heroicons/react/24/outline";
 import { useRouter } from "next/router";
 
+import { Button } from "@formbricks/ui/Button";
+
 export default function HeadingCentered() {
   const router = useRouter();
   return (

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

@@ -1,6 +1,6 @@
+import clsx from "clsx";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import clsx from "clsx";
 
 interface NavigationProps {
   navigation: {

apps/formbricks-com/components/shared/NewsletterSignup.tsx

@@ -1,7 +1,8 @@
 import Friends from "@/images/newsletter-signup-gif.gif";
-import { Button } from "@formbricks/ui/Button";
 import Image from "next/image";
 
+import { Button } from "@formbricks/ui/Button";
+
 export default function WaitlistForm() {
   return (
     <div className="not-prose text-md mx-auto mt-12 max-w-7xl rounded-lg bg-slate-200 p-10 text-slate-500 shadow-lg dark:bg-slate-800 dark:text-slate-400">

apps/formbricks-com/components/shared/PricingTable.tsx

@@ -1,6 +1,7 @@
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@formbricks/ui/Tooltip";
 import { CheckIcon, XMarkIcon } from "@heroicons/react/24/outline";
 
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@formbricks/ui/Tooltip";
+
 export const PricingTable = ({ leadRow, pricing, endRow }) => {
   return (
     <div className="grid grid-cols-1 px-4 md:gap-4 md:px-16 ">

apps/formbricks-com/components/shared/Search.tsx

@@ -1,8 +1,8 @@
-import { useCallback, useEffect, useState } from "react";
+import { DocSearchModal, useDocSearchKeyboardEvents } from "@docsearch/react";
-import { createPortal } from "react-dom";
 import Link from "next/link";
 import Router from "next/router";
-import { DocSearchModal, useDocSearchKeyboardEvents } from "@docsearch/react";
+import { useCallback, useEffect, useState } from "react";
+import { createPortal } from "react-dom";
 
 const docSearchConfig = {
   appId: process.env.NEXT_PUBLIC_DOCSEARCH_APP_ID || "",

apps/formbricks-com/components/shared/SlideInBanner.tsx

@@ -1,9 +1,10 @@
 import LFGLuigi from "@/images/blog/lfg-luigi-200px.webp";
-import { Button } from "@formbricks/ui/Button";
 import { XMarkIcon } from "@heroicons/react/24/solid";
 import Image from "next/image";
 import React, { useEffect, useState } from "react";
 
+import { Button } from "@formbricks/ui/Button";
+
 interface Props {
   delay?: number;
   scrollPercentage?: number;
@@ -46,8 +47,8 @@ const SlideInBanner: React.FC<Props> = ({ delay = 5000, scrollPercentage = 10, U
         showBanner && !isExiting
           ? "visible translate-y-0 opacity-100"
           : isExiting
-          ? "visible translate-y-full opacity-0"
+            ? "visible translate-y-full opacity-0"
-          : "invisible translate-y-full opacity-0"
+            : "invisible translate-y-full opacity-0"
       }`}>
       <div className="relative col-span-1 hidden lg:block">
         <Image src={LFGLuigi} height={150} className="absolute -bottom-16 left-8" alt="LFG Luigi" />

apps/formbricks-com/components/shared/Slider.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import * as React from "react";
 import * as SliderPrimitive from "@radix-ui/react-slider";
+import * as React from "react";
 
 import { cn } from "@formbricks/lib/cn";
 

apps/formbricks-com/components/shared/TryItCTA.tsx

@@ -1,7 +1,8 @@
-import { Button } from "@formbricks/ui/Button";
 import { DocumentDuplicateIcon } from "@heroicons/react/24/outline";
 import { useRouter } from "next/router";
 
+import { Button } from "@formbricks/ui/Button";
+
 export default function HeadingCentered() {
   const router = useRouter();
   return (

apps/formbricks-com/components/shared/UseCaseCTA.tsx

@@ -1,6 +1,7 @@
-import { Button } from "@formbricks/ui/Button";
 import { useRouter } from "next/router";
 
+import { Button } from "@formbricks/ui/Button";
+
 interface UseCaseCTAProps {
   href: string;
 }

apps/formbricks-com/components/shared/WhyFormbricks.tsx

@@ -1,10 +1,10 @@
 import {
-  UsersIcon,
-  CubeTransparentIcon,
-  UserGroupIcon,
   CommandLineIcon,
-  SwatchIcon,
+  CubeTransparentIcon,
   SquaresPlusIcon,
+  SwatchIcon,
+  UserGroupIcon,
+  UsersIcon,
 } from "@heroicons/react/24/outline";
 
 const features = [

apps/formbricks-com/images/clients/flixbus-white.svg

@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 28.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 948 299.3" style="enable-background:new 0 0 948 299.3;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#73D700;}
+	.st1{fill:#FFFFFF;}
+</style>
+<g id="BG">
+	<rect class="st0" width="948" height="299.3"/>
+</g>
+<g id="Logo">
+	<rect x="81.7" y="149.4" class="st1" width="2.5" height="0.8"/>
+	<g>
+		<path class="st1" d="M94.7,82c-7.2,0-13,5.8-13,13v122.5h34.7v-53.2h49.1c7.1,0,13-5.9,13-13v-14.7h-62.1v-20.4
+			c0-3.6,2.9-6.5,6.5-6.5h58.8c7.1,0,13-5.8,13-13V82L94.7,82L94.7,82z"/>
+		<path class="st1" d="M250.7,189.6c-3.6,0-6.5-2.9-6.5-6.5V95.1c0-7.2-5.9-13.1-13.1-13.1h-21.8v122.4c0,7.2,5.9,13.1,13.1,13.1
+			h71.3c7.2,0,13.1-5.9,13.1-13.1v-14.8H250.7L250.7,189.6z"/>
+		<path class="st1" d="M356.7,217.3H322v-70.7c0-7.2,5.9-13,13-13h21.7L356.7,217.3L356.7,217.3z"/>
+		<path class="st1" d="M343.7,121.1H322V95.1c0-7.2,5.9-13,13-13h8.7c7.2,0,13,5.9,13,13v13C356.7,115.2,350.8,121.1,343.7,121.1"/>
+		<path class="st1" d="M580.4,195.4h-23.9c-6.9,0-12.5-5.6-12.5-12.5v-22.7h36.2c9.5,0,17.2,7.9,17.2,17.6S589.8,195.4,580.4,195.4
+			 M543.9,104h32.5c8.6,0,15.5,7,15.5,15.7s-6.8,15.6-15.3,15.7h-21.5c-6.2,0-11.2-5-11.2-11.2L543.9,104L543.9,104z M617.5,150.7
+			c-0.8-0.7-2.9-2.4-3.4-2.8c6.5-6.6,9.2-15.4,9.2-26.6c0-24.7-16-39.3-40.7-39.3h-53.4c-7.1,0-13,5.8-13,13v109.4
+			c0,7.1,5.8,13,13,13h59.5c24.7,0,39.7-14.4,39.7-39.1C628.3,166.7,624.3,157.4,617.5,150.7"/>
+		<path class="st1" d="M752.5,82.1H737c-7.1,0-13,5.8-13,13V175c0,11.7-8,19.5-22,19.5h-6.4c-13.9,0-22-7.8-22-19.5V82.1h-15.5
+			c-7.1,0-13,5.8-13,13v84.2c0,24.2,16.6,40.3,45.3,40.3h16.6c28.7,0,45.3-16.1,45.3-40.3L752.5,82.1L752.5,82.1z"/>
+		<path class="st1" d="M810.1,109.8h43.8c7.1,0,13-5.8,13-13V82h-56.8c-22.7,0.2-41,18.7-41,41.4s18,39.6,40.4,40.1l0,0l17.9,0h0
+			c7.2,0.1,13,5.9,13,13.1s-5.8,13-12.9,13.1h-56.7v14.7c0,7.1,5.8,13,13,13h44c22.5-0.4,40.7-18.8,40.7-41.4s-17.8-39.4-40.1-40.1
+			v0h-18.2c-7.2-0.1-13-5.9-13-13.1S802.9,109.8,810.1,109.8"/>
+		<path class="st1" d="M489,193.8l-23.7-32.6l-20.4,28.1l17.4,23.9c5.2,7.2,15.5,8.9,22.7,3.6l0.4-0.3
+			C492.6,211.2,494.2,201,489,193.8"/>
+		<path class="st1" d="M457.1,149.9l-20.4-28.1l-25.6-35.2c-5.2-7.2-15.5-8.8-22.7-3.6l-0.4,0.3c-7.2,5.2-8.9,15.5-3.6,22.7
+			l31.8,43.8l-31.8,43.9c-5.3,7.3-3.7,17.5,3.5,22.8l0.4,0.3c7.2,5.2,17.5,3.6,22.7-3.6l18.8-25.8L457.1,149.9L457.1,149.9z"/>
+		<path class="st1" d="M485.4,83.3L485,83c-7.2-5.2-17.5-3.6-22.7,3.6l-17.4,23.9l20.4,28.1L489,106
+			C494.2,98.8,492.6,88.6,485.4,83.3"/>
+	</g>
+</g>
+</svg>