fix: build errors in formbricks-com (#1465)

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

.env.example

@@ -10,10 +10,14 @@
 
 WEBAPP_URL=http://localhost:3000
 
-SURVEY_BASE_URL=http://localhost:3000/i
-
 # Set this if you want to have a shorter link for surveys
-SHORT_SURVEY_BASE_URL=
+SHORT_URL_BASE=
+
+# Encryption keys
+# Please set both for now, we will change this in the future
+
+# You can use: `openssl rand -hex 32` to generate one
+ENCRYPTION_KEY=
 
 ##############
 #  DATABASE  #
@@ -26,7 +30,7 @@ DATABASE_URL='postgresql://postgres:postgres@localhost:5432/formbricks?schema=pu
 ###############
 
 # @see: https://next-auth.js.org/configuration/options#nextauth_secret
-# You can use: `openssl rand -base64 32` to generate one
+# You can use: `openssl rand -hex 32` to generate one
 NEXTAUTH_SECRET=RANDOM_STRING
 
 # Set this to your public-facing URL, e.g., https://example.com
@@ -90,13 +94,16 @@ GOOGLE_AUTH_ENABLED=0
 GOOGLE_CLIENT_ID=
 GOOGLE_CLIENT_SECRET=
 
+# Configure Azure Active Directory Login
+AZUREAD_AUTH_ENABLED=0
+AZUREAD_CLIENT_ID=
+AZUREAD_CLIENT_SECRET=
+AZUREAD_TENANT_ID=
+AZURE_DIRECT_REDIRECT=0
+
 # Cron Secret
 CRON_SECRET=
 
-# Encryption key
-# You can use: `openssl rand -base64 16` to generate one
-FORMBRICKS_ENCRYPTION_KEY=
-
 # Configure this when you want to ship JS & CSS files from a complete URL instead of the current domain
 # ASSET_PREFIX_URL=
 
@@ -109,4 +116,12 @@ NEXT_PUBLIC_FORMBRICKS_API_HOST=
 NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID=
 NEXT_PUBLIC_FORMBRICKS_ONBOARDING_SURVEY_ID=
 
+# Oauth credentials for Google sheet integration 
+GOOGLE_SHEETS_CLIENT_ID=
+GOOGLE_SHEETS_CLIENT_SECRET=
+GOOGLE_SHEETS_REDIRECT_URL=
+
+# Oauth credentials for Airtable integration 
+AIR_TABLE_CLIENT_ID=
+
 */

.github/PULL_REQUEST_TEMPLATE.md

@@ -42,6 +42,7 @@ Fixes # (issue)
 - [ ] Removed all `console.logs`
 - [ ] Merged the latest changes from main onto my branch with `git pull origin main`
 - [ ] My changes don't cause any responsiveness issues
+- [ ] First PR at Formbricks? [Please sign the CLA!](https://formbricks.com/clmyhzfrymr4ko00hycsg1tvx) Without it we wont be able to merge it 🙏
 
 ### Appreciated
 

.github/workflows/build.yml

@@ -1,27 +1,23 @@
-name: Tests
+name: Build
 on:
   workflow_call:
 jobs:
   build:
-    name: Build, lint, and test on Node ${{ matrix.node }} and ${{ matrix.os }}
+    name: Build Formbricks-web
     runs-on: ubuntu-latest
     timeout-minutes: 30
 
-    env:
-      TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
-      TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
-
     steps:
       - name: Checkout repo
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
       - name: Setup Node.js 18.x
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: 18.x
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v2.2.4
+        uses: pnpm/action-setup@v2
 
       - name: Install dependencies
         run: pnpm install --config.platform=linux --config.architecture=x64
@@ -29,5 +25,10 @@ jobs:
       - name: create .env
         run: cp .env.example .env
 
-      - name: Build formbricks-js dependencies
+      - name: Generate Random NEXTAUTH_SECRET
+        run: |
+          SECRET=$(openssl rand -hex 32)
+          echo "ENCRYPTION_KEY=$SECRET" >> $GITHUB_ENV
+
+      - name: Build Formbricks-web
         run: pnpm build --filter=web...

.github/workflows/labeler.yml

@@ -6,6 +6,7 @@ concurrency:
   cancel-in-progress: true
 jobs:
   labeler:
+    name: Pull Request Labeler
     permissions:
       contents: read
       pull-requests: write

.github/workflows/lint.yml

@@ -3,25 +3,21 @@ on:
   workflow_call:
 jobs:
   build:
-    name: Build, lint, and test on Node ${{ matrix.node }} and ${{ matrix.os }}
+    name: Linters
     runs-on: ubuntu-latest
     timeout-minutes: 15
 
-    env:
-      TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
-      TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
-
     steps:
       - name: Checkout repo
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
       - name: Setup Node.js 18.x
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: 18.x
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v2.2.4
+        uses: pnpm/action-setup@v2
 
       - name: Install dependencies
         run: pnpm install --config.platform=linux --config.architecture=x64
@@ -29,5 +25,10 @@ jobs:
       - name: create .env
         run: cp .env.example .env
 
+      - name: Generate Random NEXTAUTH_SECRET
+        run: |
+          SECRET=$(openssl rand -hex 32)
+          echo "ENCRYPTION_KEY=$SECRET" >> $GITHUB_ENV
+
       - name: Lint
         run: pnpm lint

.github/workflows/nextjs-bundle-analysis.yml

@@ -1,128 +0,0 @@
-# Copyright (c) HashiCorp, Inc.
-# SPDX-License-Identifier: MPL-2.0
-
-name: "Next.js Bundle Analysis"
-
-on:
-  workflow_call:
-  push:
-    branches:
-      - main
-
-defaults:
-  run:
-    # change this if your nextjs app does not live at the root of the repo
-    working-directory: ./
-
-permissions:
-  contents: read # for checkout repository
-  actions: read # for fetching base branch bundle stats
-  pull-requests: write # for comments
-
-jobs:
-  analyze:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-
-      - name: Install Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: 18
-
-      # If pnpm is used, you need to switch the previous step with the following one. pnpm does not create a package-lock.json
-      # so the step above will fail to pull dependencies
-      - uses: pnpm/action-setup@v2
-        name: Install pnpm
-        id: pnpm-install
-        with:
-          version: 7
-          run_install: true
-
-      - name: create .env
-        run: cp .env.example .env
-
-      - name: Restore next build
-        uses: actions/cache@v3
-        id: restore-build-cache
-        env:
-          cache-name: cache-next-build
-        with:
-          # if you use a custom build directory, replace all instances of `.next` in this file with your build directory
-          # ex: if your app builds to `dist`, replace `.next` with `dist`
-          path: apps/web/.next/cache
-          # change this if you prefer a more strict cache
-          key: ${{ runner.os }}-build-${{ env.cache-name }}
-
-      - name: Build next.js app
-        # change this if your site requires a custom build command
-        run: pnpm build --filter=web...
-
-      # Here's the first place where next-bundle-analysis' own script is used
-      # This step pulls the raw bundle stats for the current bundle
-      - name: Analyze bundle
-        run: npx -p nextjs-bundle-analysis report
-
-      - name: Upload bundle
-        uses: actions/upload-artifact@v3
-        with:
-          name: bundle
-          path: apps/web/.next/analyze/__bundle_analysis.json
-
-      - name: Download base branch bundle stats
-        uses: dawidd6/action-download-artifact@v2
-        if: success() && github.event.number
-        with:
-          workflow: nextjs_bundle_analysis.yml
-          branch: ${{ github.event.pull_request.base.ref }}
-          path: apps/web/.next/analyze/base
-
-      # And here's the second place - this runs after we have both the current and
-      # base branch bundle stats, and will compare them to determine what changed.
-      # There are two configurable arguments that come from package.json:
-      #
-      # - budget: optional, set a budget (bytes) against which size changes are measured
-      #           it's set to 350kb here by default, as informed by the following piece:
-      #           https://infrequently.org/2021/03/the-performance-inequality-gap/
-      #
-      # - red-status-percentage: sets the percent size increase where you get a red
-      #                          status indicator, defaults to 20%
-      #
-      # Either of these arguments can be changed or removed by editing the `nextBundleAnalysis`
-      # entry in your package.json file.
-      - name: Compare with base branch bundle
-        if: success() && github.event.number
-        run: ls -laR apps/web/.next/analyze/base && npx -p nextjs-bundle-analysis compare
-
-      - name: Get Comment Body
-        id: get-comment-body
-        if: success() && github.event.number
-        # https://docs.github.com/en/actions/using-workflows/workflow-commands-for-github-actions#multiline-strings
-        run: |
-          echo "body<<EOF" >> $GITHUB_OUTPUT
-          echo "$(cat apps/web/.next/analyze/__bundle_analysis_comment.txt)" >> $GITHUB_OUTPUT
-          echo EOF >> $GITHUB_OUTPUT
-
-      - name: Find Comment
-        uses: peter-evans/find-comment@v2
-        if: success() && github.event.number
-        id: fc
-        with:
-          issue-number: ${{ github.event.number }}
-          body-includes: "<!-- __NEXTJS_BUNDLE -->"
-
-      - name: Create Comment
-        uses: peter-evans/create-or-update-comment@v2
-        if: success() && github.event.number && steps.fc.outputs.comment-id == 0
-        with:
-          issue-number: ${{ github.event.number }}
-          body: ${{ steps.get-comment-body.outputs.body }}
-
-      - name: Update Comment
-        uses: peter-evans/create-or-update-comment@v2
-        if: success() && github.event.number && steps.fc.outputs.comment-id != 0
-        with:
-          issue-number: ${{ github.event.number }}
-          body: ${{ steps.get-comment-body.outputs.body }}
-          comment-id: ${{ steps.fc.outputs.comment-id }}
-          edit-mode: replace

.github/workflows/pr.yml

@@ -4,9 +4,6 @@ on:
   pull_request_target:
     branches:
       - main
-    paths-ignore:
-      - "**.md"
-      - ".github/CODEOWNERS"
   merge_group:
   workflow_dispatch:
 
@@ -16,27 +13,22 @@ concurrency:
 
 jobs:
   test:
-    name: Unit tests
+    name: Run Tests
     uses: ./.github/workflows/test.yml
     secrets: inherit
 
   lint:
-    name: Linters
+    name: Run Linters
     uses: ./.github/workflows/lint.yml
     secrets: inherit
 
-  build-production:
-    name: Production build (without database)
-    uses: ./.github/workflows/build-production.yml
-    secrets: inherit
-
-  analyze:
-    needs: build-production
-    uses: ./.github/workflows/nextjs-bundle-analysis.yml
+  build:
+    name: Build Formbricks-web
+    uses: ./.github/workflows/build.yml
     secrets: inherit
 
   required:
-    needs: [lint, test, build-production]
+    needs: [lint, test, build]
     if: always()
     runs-on: ubuntu-latest
     steps:

.github/workflows/release-docker.yml

@@ -12,7 +12,18 @@ jobs:
     env:
       TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
       TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
+      DATABASE_URL: "postgresql://postgres:postgres@localhost:5432/formbricks?schema=public"
     steps:
+      - name: Generate Random NEXTAUTH_SECRET
+        run: |
+          SECRET=$(openssl rand -hex 32)
+          echo "NEXTAUTH_SECRET=$SECRET" >> $GITHUB_ENV
+
+      - name: Generate Random NEXTAUTH_SECRET
+        run: |
+          SECRET=$(openssl rand -hex 32)
+          echo "ENCRYPTION_KEY=$SECRET" >> $GITHUB_ENV
+
       - name: Checkout Repo
         uses: actions/checkout@v2
 
@@ -41,3 +52,6 @@ jobs:
           tags: |
             ${{ secrets.DOCKER_USERNAME }}/formbricks:${{ env.RELEASE_TAG }}
             ${{ secrets.DOCKER_USERNAME }}/formbricks:latest
+          build-args: |
+            NEXTAUTH_SECRET=${{ env.NEXTAUTH_SECRET }}
+            DATABASE_URL=${{ env.DATABASE_URL }}

.github/workflows/semantic-pull-requests.yml

@@ -1,4 +1,4 @@
-name: "Validate PRs"
+name: "Check PR"
 
 on:
   pull_request_target:
@@ -13,7 +13,7 @@ permissions:
 
 jobs:
   validate-pr:
-    name: Validate PR title
+    name: PR title
     runs-on: ubuntu-latest
     steps:
       - uses: amannn/action-semantic-pull-request@v5

.github/workflows/test.yml

@@ -3,7 +3,7 @@ on:
   workflow_call:
 jobs:
   build:
-    name: Build, lint, and test on Node ${{ matrix.node }} and ${{ matrix.os }}
+    name: Tests
     runs-on: ubuntu-latest
     timeout-minutes: 15
 
@@ -13,15 +13,15 @@ jobs:
 
     steps:
       - name: Checkout repo
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
       - name: Setup Node.js 18.x
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: 18.x
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v2.2.4
+        uses: pnpm/action-setup@v2
 
       - name: Install dependencies
         run: pnpm install --config.platform=linux --config.architecture=x64

.gitpod.yml

@@ -10,7 +10,7 @@ tasks:
       gp sync-await init && 
       turbo --filter "@formbricks/demo" go
 
-  - name : website
+  - name: website
     command: gp sync-await init && turbo --filter "@formbricks/formbricks-com" dev
 
   - name: Init Formbricks
@@ -34,8 +34,10 @@ tasks:
       cp .env.example .env &&
       sed -i -r "s#^(WEBAPP_URL=).*#\1 $(gp url 3000)#" .env &&
       sed -i -r "s#^(NEXTAUTH_URL=).*#\1 $(gp url 3000)#" .env &&
+      RANDOM_ENCRYPTION_KEY=$(openssl rand -hex 32)
+      sed -i 's/^ENCRYPTION_KEY=.*/ENCRYPTION_KEY='"$RANDOM_ENCRYPTION_KEY"'/' .env
       turbo --filter "@formbricks/web" go
-      
+
 image:
   file: .gitpod.Dockerfile
 
@@ -58,7 +60,7 @@ ports:
   - port: 8025
     visibility: public
     onOpen: open-browser
-    
+
 github:
   prebuilds:
     master: true
@@ -73,4 +75,4 @@ vscode:
     - "dbaeumer.vscode-eslint"
     - "esbenp.prettier-vscode"
     - "Prisma.prisma"
-    - "yzhang.markdown-all-in-one"
+    - "yzhang.markdown-all-in-one"

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-pnpm lint-staged
+pnpm lint-staged

.npmrc

@@ -3,4 +3,6 @@ link-workspace-packages = true
 shamefully-hoist = true
 shared-workspace-shrinkwrap = true
 access = public
-enable-pre-post-scripts = true
+enable-pre-post-scripts = true
+legacy-peer-deps=true
+node-linker=hoisted

CODE_OF_CONDUCT.md

@@ -0,0 +1,70 @@
+# Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to make participation in Formbricks and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, or sexual identity and orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment include:
+
+- Using welcoming and inclusive language
+- Being respectful of differing viewpoints and experiences
+- Gracefully accepting constructive criticism
+- Focusing on what is best for the community
+- Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+- The use of sexualized language or imagery and unwelcome sexual attention or advances
+- Trolling, insulting/derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or electronic address, without explicit permission
+- Other conduct that could reasonably be considered inappropriate in a professional setting
+
+## Our Responsibilities
+
+We as project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
+
+We have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned with this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project email address, posting via an official social media account, or acting as an appointed representative at an online or offline event.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at hola@formbricks.com - all complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident.
+
+## Enforcement Guidelines
+
+Community managers will follow these Community Impact Guidelines in determining the consequences for any action they deem in violation of this Code of Conduct:
+
+### 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed unprofessional or unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing clarity around the nature of the violation and an explanation of why the behavior was inappropriate. A public apology may be requested.
+
+### 2. Warning
+
+**Community Impact**: A violation through a single incident or series of actions.
+
+**Consequence**: A warning with consequences for continued behavior. No interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, for a specified period of time. This includes avoiding interactions in community spaces as well as external channels like social media. Violating these terms may lead to a temporary or permanent ban.
+
+### 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including sustained inappropriate behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public communication with the community for a specified period of time. No public of private interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, is allowed during this period. Violating these terms may lead to a permanent ban.
+
+### 4. Permanent Ban
+
+**Community Impact**: Demonstrating a pattern of violation of community standards, including sustained inappropriate behavior,  harassment of an individual, or aggression toward or disparagement of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within the community.
+
+
+## Attribution
+
+This Code of Conduct is adapted from the Contributor Covenant, version 2.0, available at [https://www.contributor-covenant.org/version/2/0/code_of_conduct.html](https://www.contributor-covenant.org/version/2/0/code_of_conduct.html).

CONTRIBUTING.md

@@ -1,29 +1,34 @@
-We are so happy that you are interested in contributing to Formbricks 🤗
+# 🚀 Join the Formbricks Tribe! 🧱
 
-There are many ways to contribute to Formbricks with writing Issues, fixing bugs, building new features or updating the docs.
+First and foremost, we're absolutely thrilled that you're considering becoming a part of the Formbricks Tribe! 🤗
 
-# Issues
+Discover a myriad of ways to leave your mark on Formbricks — whether it's by squashing bugs, crafting new features, or enhancing our documentation.
 
-Spotted a bug? Has deployment gone wrong? Do you have user feedback? [Raise an issue](https://github.com/formbricks/formbricks/issues/new/choose) for the fastest response.
+## 🐛 Issue Hunters
 
-... or pick up and fix an issue if you want to do a Pull Request.
+Did you stumble upon a bug? Encountered a hiccup in deployment? Perhaps you have some user feedback to share? Your quickest route to help us out is by [raising an issue](https://github.com/formbricks/formbricks/issues/new/choose). We're on standby to respond swiftly. 
 
-# Feature requests
+## 💡 Feature Architects
 
-Raise an issue for these and tag it as an Enhancement. We love every idea. Please give us as much context on the why as possible.
+Are you brimming with brilliant ideas? For new features that can elevate Formbricks, create an issue and slap on the "Enhancement" tag. We adore every concept that you throw our way. Just make sure to provide us with the "why" behind your idea. We're all ears!
 
-# Creating a PR
+## 🛠 Crafting Pull Requests
 
-Please fork the repository, make your changes and create a new pull request if you want to make an update.
+Ready to dive into the code and make a real impact? Here's your path:
 
-If you want to speak to us before doing lots of work, please join our [Discord server](https://formbricks.com/discord) and tell us what you would like to work on - we're very responsive and friendly!
+1. **Read our Best Practices**: [It takes 5 minutes](https://formbricks.com/docs/contributing/how-we-code) but will help you save hours 🤓
 
-For QA of your Pull-Request, you can also get in touch with Matti on Discord. But we will also get to your PR without you taking additional action ;-)
+1. **Fork the Repository:** Fork our repository or use [Gitpod](https://formbricks.com/docs/contributing/gitpod)
 
-# Features
+2. **Tweak and Transform:** Work your coding magic and apply your changes.
 
-We are currently working on having a clear [Roadmap](https://github.com/orgs/formbricks/projects/1) for the next steps ahead.
+3. **Pull Request Act:** If you're ready to go, craft a new pull request closely following our PR template 🙏
 
-But you can also pick a feature that is not already on the roadmap if you think it creates a positive impact for Formbricks.
+Would you prefer a chat before you dive into a lot of work? Our [Discord server](https://formbricks.com/discord) is your harbor. Share your thoughts, and we'll meet you there with open arms. We're responsive and friendly, promise!
 
-If you are at all unsure, just raise it as an enhancement issue first and tell us that you like to work on it, and we'll very quickly respond.
+
+## 🚀 Aspiring Features
+
+If you spot a feature that isn't part of our official plan but could propel Formbricks forward, don't hesitate. Raise it as an enhancement issue, and let us know you're ready to take the lead. We'll be quick to respond.
+
+Together, let's craft the future of Formbricks, making it better, bolder, and more brilliant! 🚀🧱🌟

README.md

@@ -1,3 +1,4 @@
+<div id="top"></div>
 <p align="center">
 <a href="https://formbricks.com">
     <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">
@@ -29,6 +30,18 @@
 <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">
 </p>
 
+<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>
+
+<img width="1527" alt="formtribe hackathon" src="https://github.com/formbricks/formbricks/assets/72809645/addc3a5b-421c-4c8d-8be2-eedf087100ed">
+
+## 🔥 The FormTribe Hackathon is on!
+
+To celebrate Hacktoberfest, we've launched our FormTribe hackathon. Write code or perform non-code side quests to collect points and increase your chances of winning the MacBook Air M2!
+
+**Join lottery with a [single tweet!](https://formtribe.com). All info on [formtribe.com](https://formtribe.com)**
+
 ## ✨ 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">
@@ -43,13 +56,13 @@ Formbricks helps you apply best practices from data-driven work and experience m
 
 ### Features
 
-- 📲 Create **in-product surveys** with our no code editor with multiple 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**
-- 🔒 All **open source**, transparent and self-hostable
+- 📲 Create **in-product surveys** with our no code editor with multiple 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**.
+- 🔒 All **open source**, transparent and self-hostable.
 
 ### Built on Open Source
 
@@ -63,11 +76,11 @@ Formbricks helps you apply best practices from data-driven work and experience m
 
 ## 🚀 Getting started
 
-We've got several options depending on your need to help you quickly get started with Formbricks
+We've got several options depending on your need to help you quickly get started with Formbricks.
 
 ### ☁️ 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://formbricks.com).
 
 ### 🐳 Self-hosted version
 
@@ -93,9 +106,9 @@ You can deploy Formbricks on [Railway](https://railway.app) using the button bel
 
 #### Prerequisites
 
-Here is what you need to be able to run Formbricks
+Here is what you need to be able to run Formbricks:
 
-- Node.js (Version: >=18.x)
+- [Node.js](https://nodejs.org/en) (Version: >=18.x)
 - [Pnpm](https://pnpm.io/)
 - [Docker](https://www.docker.com/) - to run PostgreSQL and MailHog
 
@@ -117,12 +130,18 @@ 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's the demand for particular issue to prioritize it within roadmap
+- Star this repo.
+- Create issues every time you feel something is missing or goes wrong.
+- Upvote issues with 👍 reaction so we know what's the demand for a particular issue 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">
+  <img src="https://contrib.rocks/image?repo=formbricks/formbricks" />
+</a>
+
 ## 📆 Contact us
 
 Let's have a chat about your survey needs and get you started.
@@ -131,8 +150,10 @@ Let's have a chat about your survey needs and get you started.
 
 ## ⚖️ License
 
-Distributed under the AGPLv3 License. See `LICENSE` for more information.
+Distributed under the AGPLv3 License. See [`LICENSE`](./LICENSE) for more information.
 
 ## 🔒 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` for more information.
+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>

SECURITY.md

@@ -1,39 +1,75 @@
-# Security
+# Security Policy of Formbricks
 
-Contact: security@formbricks.com
+This is Formbrick's security policy. Please reach out to us
+on our Discord or, if privately, via <security@formbricks.com>
 
-Based on [https://supabase.com/.well-known/security.txt](https://supabase.com/.well-known/security.txt)
+## Introduction
 
-At Formbricks, we consider the security of our systems a top priority. But no matter how much effort we put into system security, there can still be vulnerabilities present.
+Formbricks is dedicated to maintaining the integrity and security of our systems and our clients' data. In our pursuit to keep our technology environment safe, we welcome the collaborative efforts of our user community and security researchers to enhance security protocols and continuously secure our platform. This security policy outlines our approach towards handling data, ensuring secure practices, and managing the disclosure of vulnerabilities.
 
-If you discover a vulnerability, we would like to know about it so we can take steps to address it as quickly as possible. We would like to ask you to help us better protect our clients and our systems.
+## I. Third-Party Data Usage Policy
 
-## Out of scope vulnerabilities:
+We affirm our commitment towards meticulous validation of data usage and collection scope by any third-party library or integration utilized in our operations. We adhere to the following protocols:
 
-- Clickjacking on pages with no sensitive actions.
-- Unauthenticated/logout/login CSRF.
-- Attacks requiring MITM or physical access to a user's device.
-- Any activity that could lead to the disruption of our service (DoS).
-- Content spoofing and text injection issues without showing an attack vector/without being able to modify HTML/CSS.
-- Email spoofing
-- Missing DNSSEC, CAA, CSP headers
-- Lack of Secure or HTTP only flag on non-sensitive cookies
-- Deadlinks
+- Rigorous vetting of third-party services to confirm adherence to our data usage and privacy standards.
+- Continuous monitoring and assessment of third-party practices to ensure ongoing compliance.
+- Immediate action to mitigate risks if a third-party deviates from agreed-upon data practices.
 
-## Please do the following:
+## II. Annual Penetration Testing (Pentest)
 
-- E-mail your findings to [security@formbricks.com](mailto:security@formbricks.com).
-- Do not run automated scanners on our infrastructure or dashboard. If you wish to do this, contact us and we will set up a sandbox for you.
-- Do not take advantage of the vulnerability or problem you have discovered, for example by downloading more data than necessary to demonstrate the vulnerability or deleting or modifying other people's data,
-- Do not reveal the problem to others until it has been resolved,
-- Do not use attacks on physical security, social engineering, distributed denial of service, spam or applications of third parties,
-- Do provide sufficient information to reproduce the problem, so we will be able to resolve it as quickly as possible. Usually, the IP address or the URL of the affected system and a description of the vulnerability will be sufficient, but complex vulnerabilities may require further explanation.
+To understand and bolster our security stature, Formbricks undertakes:
 
-## What we promise:
+- Annual penetration testing executed by an independent, skilled third party.
+- Prioritization of any identified issues, with immediate action on critical vulnerabilities.
+- Transparent communication and learnings shared with relevant stakeholders.
 
-- We will respond to your report within 3 business days with our evaluation of the report and an expected resolution date,
-- If you have followed the instructions above, we will not take any legal action against you in regard to the report,
-- We will handle your report with strict confidentiality, and not pass on your personal details to third parties without your permission,
-- We will keep you informed of the progress towards resolving the problem,
-- In the public information concerning the problem reported, we will give your name as the discoverer of the problem (unless you desire otherwise), and
-- We strive to resolve all problems as quickly as possible, and we would like to play an active role in the ultimate publication on the problem after it is resolved.
+## III. Vulnerability Reporting and Management
+
+Please do not use attacks on physical security, social engineering, distributed denial of service, spam or applications of third parties.
+
+### **A. When to Report a Vulnerability**
+
+We invite you to report if:
+
+- A potential security vulnerability in Formbricks is identified.
+- There is uncertainty about how a vulnerability affects our platform.
+- A vulnerability is detected in a dependent project of Formbricks.
+- An action was executed which, in your belief, should be restricted.
+
+### **B. When Reporting is Unnecessary**
+
+Avoid reporting if:
+
+- Assistance is needed to optimize Formbricks for security – please engage on our Discord for this.
+- Help is required for applying security-related updates.
+- The concern is not related to security.
+
+### **C. Vulnerability Reporting Procedure**
+
+In the interest of responsibly managing vulnerabilities, please adhere to the following procedure:
+
+> Do not reveal the problem to others until it has been resolved.
+
+1. **Send a Detailed Report**:
+   - Address emails to [security@formbricks.com](mailto:security@formbricks.com).
+   - Include:
+     - Problem description.
+     - Detailed, reproducible steps, with screenshots where possible.
+     - Affected version(s).
+     - Known possible mitigations.
+     - Your Discord username or preferred contact method.
+2. **Acknowledgement of Receipt**:
+   - Our security team will acknowledge receipt and provide an initial response within 48 hours.
+   - Following verification of the vulnerability and the fix, a release plan will be formulated, with the fix deployed between 7 to 28 days, depending on the severity and complexity.
+3. **Ongoing Communication**:
+   - A project maintainer may engage with you for additional details or clarification.
+   - We appreciate your patience as we explore the reported item, verify its authenticity, and ascertain the existence of a vulnerability.
+
+---
+
+### Please Read the below carefully
+
+If you have followed the instructions above, we will **not** take any legal action against you in regard to the report,
+We will handle your report with strict confidentiality, and not pass on your personal details to third parties without your permission, We will keep you informed of the progress towards resolving the problem, In the public information concerning the problem reported, we will give your name as the discoverer of the problem (unless you desire otherwise).
+
+We, at Formbricks, wish to express our gratitude towards all individuals who assist us in fortifying our security posture. Your responsible disclosure and cooperation enable us to elevate our security protocols, safeguarding our platform and data therein.

apps/demo/.env.example

@@ -2,4 +2,4 @@ NEXT_PUBLIC_FORMBRICKS_API_HOST=http://localhost:3000
 NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID=YOUR_ENVIRONMENT_ID
 
 # Copy the environment ID for the URL of your Formbricks App and
-# paste it above to connect your Formbricks App with the Demo App.
+# paste it above to connect your Formbricks App with the Demo App.

apps/demo/package.json

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

apps/demo/pages/app/index.tsx

@@ -15,7 +15,7 @@ export default function AppPage({}) {
   }, [darkMode]);
 
   return (
-    <div className="h-full bg-white px-12 py-6 dark:bg-slate-800">
+    <div className="h-screen bg-white px-12 py-6 dark:bg-slate-800">
       <div className="flex flex-col justify-between md:flex-row">
         <div>
           <h1 className="text-2xl font-bold text-slate-900 dark:text-white">
@@ -29,7 +29,7 @@ export default function AppPage({}) {
         <button
           className="mt-2 rounded-lg bg-slate-200 px-6 py-1 dark:bg-slate-700 dark:text-slate-100"
           onClick={() => setDarkMode(!darkMode)}>
-          Toggle Dark Mode
+          {darkMode ? "Toggle Light Mode" : "Toggle Dark Mode"}
         </button>
       </div>
 

apps/demo/pages/test-nocode-app/index.tsx

@@ -29,7 +29,7 @@ export default function AppPage({}) {
         <button
           className="mt-2 rounded-lg bg-slate-200 px-6 py-1 dark:bg-slate-700 dark:text-slate-100"
           onClick={() => setDarkMode(!darkMode)}>
-          Toggle Dark Mode
+          {darkMode ? "Toggle Light Mode" : "Toggle Dark Mode"}
         </button>
       </div>
 

apps/formbricks-com/app/docs/actions/code/page.mdx

@@ -1,7 +1,7 @@
 export const meta = {
   title: "Implementing Code Actions in Formbricks | Real-time User Action Tracking",
   description:
-    "Dive into the world of Formbricks' code actions. Learn how to seamlessly integrate formbricks.track() method into your codebase, enabling real-time tracking of user actions like button clicks, visiting a specfic URL. Up your survey game with precise and exact triggers.",
+    "Dive into the world of Formbricks' code actions. Learn how to seamlessly integrate formbricks.track() method into your codebase, enabling real-time tracking of user actions like button clicks, visiting a specific URL. Up your survey game with precise and exact triggers.",
 };
 
 #### Actions
@@ -9,7 +9,7 @@ export const meta = {
 # Code Actions
 
 Actions can also be set in the code base. You can fire an action using `formbricks.track()`
-
+<Col>
 <CodeGroup title="Track an action">
 
 ```javascript
@@ -17,9 +17,9 @@ formbricks.track("Action Name");
 ```
 
 </CodeGroup>
-
+</Col>
 Here is an example of how to fire an action when a user clicks a button:
-
+<Col>
 <CodeGroup title="Track Button Click">
 
 ```javascript
@@ -31,3 +31,4 @@ return <button onClick={handleClick}>Click Me</button>;
 ```
 
 </CodeGroup>
+</Col>

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

@@ -13,7 +13,7 @@ One way to send attributes to Formbricks is in your code. In Formbricks, there a
 ## Setting Custom User Attributes
 
 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">
 
 ```javascript
@@ -21,9 +21,9 @@ formbricks.setAttribute("Plan", "Pro");
 ```
 
 </CodeGroup>
-
+</Col>
 Generally speaking, the setAttribute function works like this:
-
+<Col>
 <CodeGroup title="Setting Custom Attributes">
 
 ```javascript
@@ -31,5 +31,5 @@ formbricks.setAttribute("attribute_key", "attribute_value");
 ```
 
 </CodeGroup>
-
+</Col>
 Where `attributeName` is the name of the attribute you want to set, and `attributeValue` is the value of the attribute you want to set.

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

@@ -15,7 +15,7 @@ Once the Formbricks widget is loaded on your web app, our SDK exposes methods fo
 ## Setting User ID
 
 You can use the `setUserId` function to identify a user with any string. It's best to use the default identifier you use in your app (e.g. unique id from database) but you can also anonymize these as long as they are unique for every user. This function can be called multiple times with the same value safely and stores the identifier in local storage. We recommend you set the User ID whenever the user logs in to your website, as well as after the installation snippet (if the user is already logged in).
-
+<Col>
 <CodeGroup title="Setting User ID">
 
 ```javascript
@@ -23,11 +23,11 @@ formbricks.setUserId("USER_ID");
 ```
 
 </CodeGroup>
-
+</Col>
 ## Setting User Email
 
 You can use the setEmail function to set the user's email:
-
+<Col>
 <CodeGroup title="Setting Email">
 
 ```javascript
@@ -35,11 +35,11 @@ formbricks.setEmail("user@example.com");
 ```
 
 </CodeGroup>
-
+</Col>
 ### Setting Custom User Attributes
 
 You can use the setAttribute function to set any custom attribute for the user (e.g. name, plan, etc.):
-
+<Col>
 <CodeGroup title="Setting Custom Attributes">
 
 ```javascript
@@ -47,11 +47,11 @@ formbricks.setAttribute("attribute_key", "attribute_value");
 ```
 
 </CodeGroup>
-
+</Col>
 ### Logging Out Users
 
 When a user logs out of your webpage, make sure to log them out of Formbricks as well. This will prevent new activity from being associated with an incorrect user. Use the logout function:
-
+<Col>
 <CodeGroup title="Logging out User">
 
 ```javascript
@@ -59,3 +59,4 @@ formbricks.logout();
 ```
 
 </CodeGroup>
+</Col>

apps/formbricks-com/app/docs/best-practices/docs-feedback/page.mdx

@@ -11,8 +11,10 @@ import WhenToAsk from "./when-to-ask.webp";
 import CopyIds from "./copy-ids.webp";
 
 export const meta = {
-  title: "Integrate Docs Feedback in Your Website: A Step-by-Step Guide on getting feedback on your Documentation with Formbricks",
-  description: "Learn the step-by-step process to effectively measure the clarity of your documentation using Formbricks Cloud. Dive into best practices, setting up cloud environments, integrating feedback widgets on your frontend, and connecting to the Formbricks API for a seamless user experience.",
+  title:
+    "Integrate Docs Feedback in Your Website: A Step-by-Step Guide on getting feedback on your Documentation with Formbricks",
+  description:
+    "Learn the step-by-step process to effectively measure the clarity of your documentation using Formbricks Cloud. Dive into best practices, setting up cloud environments, integrating feedback widgets on your frontend, and connecting to the Formbricks API for a seamless user experience.",
 };
 
 #### Best Practices
@@ -48,7 +50,7 @@ To get this running, you'll need a bit of time. Here are the steps we're going t
   src={SwitchToDev}
   alt="switch to dev environment"
   quality="100"
-  className="rounded-lg max-w-full sm:max-w-3xl"
+  className="max-w-full rounded-lg sm:max-w-3xl"
 />
 
 3. Then, create a survey using the template “Docs Feedback”:
@@ -57,7 +59,7 @@ To get this running, you'll need a bit of time. Here are the steps we're going t
   src={DocsTemplate}
   alt="select docs template"
   quality="100"
-  className="rounded-lg max-w-full sm:max-w-3xl"
+  className="max-w-full rounded-lg sm:max-w-3xl"
 />
 
 4. Change the Internal Question ID of the first question to **“isHelpful”** to make your life easier 😉
@@ -66,15 +68,14 @@ To get this running, you'll need a bit of time. Here are the steps we're going t
   src={ChangeId}
   alt="switch to dev environment"
   quality="100"
-  className="rounded-lg max-w-full sm:max-w-3xl"
+  className="max-w-full rounded-lg sm:max-w-3xl"
 />
 
 5. In the same way, you can change the Internal Question ID of the _Please elaborate_ question to **“additionalFeedback”** and the one of the _Page URL_ question to **“pageUrl”**.
 
 <Note>
-  ## Answers need to be identical 
-  If you want different answers than “Yes 👍” and “No 👎” you need update the choices accordingly. They have to
-  be identical to the frontend we're building in the next step.
+  ## Answers need to be identical If you want different answers than “Yes 👍” and “No 👎” you need update the
+  choices accordingly. They have to be identical to the frontend we're building in the next step.
 </Note>
 
 6. Click on “Continue to Settings or select the audience tab manually. Scroll down to “When to ask” and create a new Action:
@@ -83,7 +84,7 @@ To get this running, you'll need a bit of time. Here are the steps we're going t
   src={WhenToAsk}
   alt="set up when to ask card"
   quality="100"
-  className="rounded-lg max-w-full sm:max-w-3xl"
+  className="max-w-full rounded-lg sm:max-w-3xl"
 />
 
 7. Our goal is to create an event that never fires. This is a bit nonsensical because it is a workaround. Stick with me 😃 Fill the action out like on the screenshot:
@@ -92,7 +93,7 @@ To get this running, you'll need a bit of time. Here are the steps we're going t
   src={AddAction}
   alt="add action"
   quality="100"
-  className="rounded-lg max-w-full sm:max-w-3xl"
+  className="max-w-full rounded-lg sm:max-w-3xl"
   className="rounded"
 />
 
@@ -102,7 +103,7 @@ To get this running, you'll need a bit of time. Here are the steps we're going t
   src={SelectNonevent}
   alt="select nonevent"
   quality="100"
-  className="rounded-lg max-w-full sm:max-w-3xl"
+  className="max-w-full rounded-lg sm:max-w-3xl"
 />
 
 **You’re all setup in Formbricks Cloud for now 👍**
@@ -110,9 +111,8 @@ To get this running, you'll need a bit of time. Here are the steps we're going t
 ### 2. Build the frontend
 
 <Note>
-  ## Your frontend might work differently 
-  Your frontend likely looks and works differently. This is an example specific to our tech stack. We want to illustrate
-  what you should consider building yours 😊
+  ## Your frontend might work differently Your frontend likely looks and works differently. This is an example
+  specific to our tech stack. We want to illustrate what you should consider building yours 😊
 </Note>
 
 Before we start, lets talk about the widget. It works like this:
@@ -132,20 +132,21 @@ This allows us to capture and analyze partial feedback where the user is not wil
   src={DocsNavi}
   alt="doc navigation"
   quality="100"
-  className="rounded-lg max-w-full sm:max-w-3xl"
+  className="max-w-full rounded-lg sm:max-w-3xl"
   className="rounded"
 />
 
 Locate that file. We are using the [Tailwind Template “Syntax”](https://tailwindui.com/templates/syntax) for our docs. Here is our [Layout.tsx](https://github.com/formbricks/formbricks/blob/main/apps/formbricks-com/components/docs/Layout.tsx) file.
 
 3. Write the frontend code for the widget. Here is the full component (we break it down right below):
-
+<Col>
 <CodeGroup title="Entire Widget">
 
 ```tsx
 import { useState } from "react";
 import { handleFeedbackSubmit, updateFeedback } from "../../lib/handleFeedbackSubmit";
-import { Popover, PopoverTrigger, PopoverContent, Button } from "@formbricks/ui";
+import { Popover, PopoverTrigger, PopoverContent } from "@formbricks/ui/Popover";
+import { Button } from "@formbricks/ui/Button";
 import { useRouter } from "next/router";
 
 export default function DocsFeedback() {
@@ -216,11 +217,11 @@ export default function DocsFeedback() {
 ```
 
 </CodeGroup>
-
+</Col>
 **Let’s break it down!**
 
 Setting the local states and getting the current URL:
-
+<Col>
 <CodeGroup title="State Management">
 
 ```tsx
@@ -232,9 +233,9 @@ const [freeText, setFreeText] = useState(""); // to locally store the additional
 ```
 
 </CodeGroup>
-
+</Col>
 Disabling feedback if config environment variables are not set properly:
-
+<Col>
 <CodeGroup title="Disable feedback if incorrect config env vars">
 
 ```tsx
@@ -248,9 +249,9 @@ if (
 ```
 
 </CodeGroup>
-
+</Col>
 The actual frontend (read comments):
-
+<Col>
 <CodeGroup title="Actual Frontend">
 
 ```tsx
@@ -307,13 +308,13 @@ return (
 ```
 
 </CodeGroup>
-
+</Col>
 ## 3. Connecting to the Formbricks API
 
 The last step is to hook up your sparkling new frontend to the Formbricks API. To do so, we followed the “[Create Response](/docs/client-api/create-response)” and “[Update Response](/docs/client-api/update-response)” pages in our docs.
 
 Here is the code for the `handleFeedbackSubmit` function with comments:
-
+<Col>
 <CodeGroup title="handleFeedbackSubmit() function definition">
 
 ```tsx
@@ -356,9 +357,9 @@ export const handleFeedbackSubmit = async (YesNo, pageUrl) => {
 ```
 
 </CodeGroup>
-
+</Col>
 And this is the `updateFeedback` function with comments:
-
+<Col>
 <CodeGroup title="updateFeedback() function definition">
 
 ```tsx
@@ -399,7 +400,7 @@ export const updateFeedback = async (freeText, responseId) => {
 ```
 
 </CodeGroup>
-
+</Col>
 That’s almost it! 🤸
 
 ## 4. Setting it up for testing
@@ -411,10 +412,10 @@ Before you roll it out in production, you want to test it. To do so, you need tw
 
 When you are on the survey detail page, you’ll find both of them in the URL:
 
-<Image src={CopyIds} alt="copy IDs" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
+<Image src={CopyIds} alt="copy IDs" quality="100" className="max-w-full rounded-lg sm:max-w-3xl" />
 
 Now, you have to replace the IDs and the API host accordingly in your `handleFeedbackSubmit`:
-
+<Col>
 <CodeGroup title="Replace the ID and API accordingly">
 
 ```tsx
@@ -431,9 +432,9 @@ Now, you have to replace the IDs and the API host accordingly in your `handleFee
 ```
 
 </CodeGroup>
-
+</Col>
 And lastly, in the `updateFeedback` function
-
+<Col>
 <CodeGroup title="Replace the ID and API here as well">
 
 ```tsx
@@ -445,6 +446,7 @@ And lastly, in the `updateFeedback` function
 ```
 
 </CodeGroup>
+</Col>
 ### You’re good to go! 🎉
 
 Something doesn’t work? Check your browser console for the error.

apps/formbricks-com/app/docs/best-practices/interview-prompt/page.mdx

@@ -125,7 +125,7 @@ Generally, we have two types of user actions: Page views and clicks. The Intervi
 
 2. **innerText & CSS-Selector:** When a user clicks an element (like a button) with a specific text content or CSS selector, the prompt will be displayed as long as the other conditions also match.
 
-<div className="grid grid-cols-2 space-x-2">
+<div className="flex max-w-full flex-col sm:max-w-3xl lg:gap-1">
   <Image src={ActionCSS} alt="Add CSS action" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
   <Image
     src={ActionInner}

apps/formbricks-com/app/docs/best-practices/pmf-survey/page.mdx

@@ -96,8 +96,8 @@ This way you make sure that you separate potentially misleading opinions from va
 ### 4. Set up a trigger for the Product-Market Fit survey:
 
 You need a trigger to display the survey but in this case, the filtering does all the work. It’s up to you to decide to display the survey after the user viewed a specific subpage (pageURL) or after clicking an element. Have a look at the [Actions manual](/docs/actions/why) if you are not sure how to set them up:
-
-<div className="grid grid-cols-2 space-x-2">
+<Col>
+<div>
   <Image src={ActionCSS} alt="Add CSS action" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
   <Image
     src={ActionPageurl}
@@ -106,16 +106,16 @@ You need a trigger to display the survey but in this case, the filtering does al
     className="rounded-lg max-w-full sm:max-w-3xl"
   />
 </div>
-
+</Col>
 ### 5. Select Action in the “When to ask” card
-
+<Col>
 <Image
   src={SelectAction}
   alt="Select PMF trigger button action"
   quality="100"
   className="rounded-lg max-w-full sm:max-w-3xl"
 />
-
+</Col>
 ### 6. Last step: Set Recontact Options correctly
 
 Lastly, scroll down to “Recontact Options”. Here you have to choose the correct settings to make sure your data remains of high quality. You want to make sure that this survey is only responded to once per user. It is up to you to decide if you want to display it several times until the user responds:

apps/formbricks-com/app/docs/contributing/demo/page.mdx

@@ -20,7 +20,7 @@ To play around with the in-app [User Actions](/docs/actions/why), you can use th
 ### Code Action
 
 This button sends a <a href="/docs/actions/code">Code Action</a> to the Formbricks API called 'Code Action'. You will find it in the Actions Tab.
-
+<Col>
 <CodeGroup title="Track Code action">
 
 ```javascript
@@ -28,11 +28,11 @@ formbricks.track("Code Action");
 ```
 
 </CodeGroup>
-
+</Col>
 ### No Code Action
 
 This button sends a <a href="/docs/actions/no-code">No Code Action</a> as long as you created it beforehand in the Formbricks App. For it to work, you need to add the No Code Action within Formbricks.
-
+<Col>
 <CodeGroup title="Track No-Code action">
 
 ```tsx
@@ -40,11 +40,11 @@ This button sends a <a href="/docs/actions/no-code">No Code Action</a> as long a
 ```
 
 </CodeGroup>
-
+</Col>
 ### Set Plan to "Free"
 
 This button sets the <a href="/docs/attributes/custom-attributes">attribute</a> 'Plan' to 'Free'. If the attribute does not exist, it creates it.
-
+<Col>
 <CodeGroup title="Set Plan to Free">
 
 ```tsx
@@ -52,11 +52,11 @@ formbricks.setAttribute("Plan", "Free");
 ```
 
 </CodeGroup>
-
+</Col>
 ### Set Plan to "Paid"
 
 This button sets the <a href="/docs/attributes/custom-attributes">attribute</a> 'Plan' to 'Paid'. If the attribute does not exist, it creates it.
-
+<Col>
 <CodeGroup title="Set Plan to Paid">
 
 ```tsx
@@ -64,11 +64,11 @@ formbricks.setAttribute("Plan", "Paid");
 ```
 
 </CodeGroup>
-
+</Col>
 ### Set Email
 
 This button sets the <a href="/docs/attributes/identify-users">user email</a> 'test@web.com'
-
+<Col>
 <CodeGroup title="Set Email">
 
 ```tsx
@@ -76,11 +76,11 @@ formbricks.setEmail("test@web.com");
 ```
 
 </CodeGroup>
-
+</Col>
 ### Set UserId
 
 This button sets an external <a href="/docs/attributes/identify-users">user ID</a> to 'THIS-IS-A-VERY-LONG-USER-ID-FOR-TESTING'
-
+<Col>
 <CodeGroup title="Set User ID">
 
 ```tsx
@@ -88,3 +88,4 @@ formbricks.setUserId("THIS-IS-A-VERY-LONG-USER-ID-FOR-TESTING");
 ```
 
 </CodeGroup>
+</Col>

apps/formbricks-com/app/docs/contributing/how-we-code/page.mdx

@@ -113,9 +113,21 @@ Add a short video or screenshots of what your PR achieves. Loom is a great way o
 
 ### Code Quality & Styling
 
-All submitted code must match our **[code styling](https://www.notion.so/Code-Styling-65ddc5dd2deb4b28a9876f1f7cc89ca9?pvs=21)** standards. We will reject pull requests that differ significantly from our standardised code styles.
+It's really important to keep our code styles consistent so that the repository is easy to read and work with.
 
-All code is automatically checked by Github actions, and will notify you if there are any issues with the code that you submit. We require that code passes these quality checks before merging.
+We rely on various style guides from other amazing companies because they are widely used and we genuinely enjoy working with them.
+
+While we don't expect you to memorize every rule in these style guides, they serve as valuable references for how your code should be styled. However, if your code style significantly deviates from these guides, we may have to reject your pull request.
+
+#### ESLint & Prettier
+
+Formbricks uses the ESLint and Prettier formatting tools, and the repository comes with defined rules for each tool. We recommend setting up both tools and using these to help automatically style your code to our guidelines.
+
+#### HTML & CSS
+
+We use the **[Google HTML/CSS Style Guide](https://google.github.io/styleguide/htmlcssguide.html)** for any HTML and CSS markup. However, exceptions to the HTML guide apply where JSX differentiates from standard HTML.
+
+**Note:** We will reject pull requests that differ significantly from our standardised code styles. All code is automatically checked by Github actions, and will notify you if there are any issues with the code that you submit. We require that code passes these quality checks before merging.
 
 ### PR review process
 

apps/formbricks-com/app/docs/contributing/setup/page.mdx

@@ -1,6 +1,7 @@
 export const meta = {
   title: "Formbricks Development Setup: Complete Guide to Local Environment Configuration for Dev",
-  description: "Step-by-step guide to setting up your local development environment for Formbricks. Includes installing essential tools like Node.JS, pnpm, and Docker, and accessing the entire Formbricks stack including the Demo app and the main website",
+  description:
+    "Step-by-step guide to setting up your local development environment for Formbricks. Includes installing essential tools like Node.JS, pnpm, and Docker, and accessing the entire Formbricks stack including the Demo app and the main website",
 };
 
 #### Contributing
@@ -15,6 +16,7 @@ To get the project running locally on your machine you need to have the followin
 
 1. Clone the project:
 
+<Col>
    <CodeGroup title="Git clone Formbricks monorepo">
 
    ```bash
@@ -22,9 +24,9 @@ To get the project running locally on your machine you need to have the followin
    ```
 
    </CodeGroup>
-
+</Col>
    and move into the directory
-
+<Col>
    <CodeGroup title="Move into the Formbricks monorepo">
 
    ```bash
@@ -32,9 +34,11 @@ To get the project running locally on your machine you need to have the followin
    ```
 
    </CodeGroup>
+</Col>
 
 1. Install Node.JS packages via pnpm. Don't have pnpm? Get it [here](https://pnpm.io/installation)
 
+<Col>
    <CodeGroup title="Install dependencies via pnpm">
 
    ```bash
@@ -42,9 +46,11 @@ To get the project running locally on your machine you need to have the followin
    ```
 
    </CodeGroup>
+</Col>
 
 1. Create a `.env` file based on `.env.example`. It's already preset to work with the docker-compose setup but you can also change values if needed.
 
+<Col>
    <CodeGroup title="Define environment variables">
 
    ```bash
@@ -52,9 +58,23 @@ To get the project running locally on your machine you need to have the followin
    ```
 
    </CodeGroup>
+</Col>
+
+1. Generate a secret value mandatory to be set for the key ENCRYPTION_KEY in the .env file. You can use the following command to generate the random string of required length:
+
+<Col>
+   <CodeGroup title="Set value of ENCRYPTION_KEY">
+
+   ```bash
+   openssl rand -hex 32
+   ```
+
+   </CodeGroup>
+</Col>
 
 1. Make sure you have [`Docker`](https://docs.docker.com/compose/) & [`docker-compose`](https://docs.docker.com/compose/) installed and running on your machine. Then run the following command to start the formbricks dev setup:
 
+<Col>
    <CodeGroup title="Start Formbricks Dev Setup">
 
    ```bash
@@ -62,7 +82,7 @@ To get the project running locally on your machine you need to have the followin
    ```
 
    </CodeGroup>
-
+</Col>
    This starts the Formbricks main app (plus all its dependencies) as well as the following services using Docker:
 
    - a `postgres` container for hosting your database,
@@ -76,6 +96,7 @@ To get the project running locally on your machine you need to have the followin
 
 To build all apps and packages and check for build errors, run the following command:
 
+<Col>
 <CodeGroup title="Build Formbricks stack">
 
 ```bash
@@ -83,11 +104,12 @@ pnpm build
 ```
 
 </CodeGroup>
-
+</Col>
 ### Access Demo app
 
 To run the [Demo app](/docs/contributing/demo), run the following command in a separate terminal window:
 
+<Col>
 <CodeGroup title="Start Formbricks Demo App">
 
 ```bash
@@ -95,13 +117,14 @@ pnpm dev --filter=demo
 ```
 
 </CodeGroup>
-
+</Col>
 You can now access the Demo app on [http://localhost:3002](http://localhost:3002).
 
 ### Access Formbricks website
 
 If you want to make changes to the Formbricks website, e.g. to update the documentation, run the following command in a separate terminal window:
 
+<Col>
 <CodeGroup title="Start Formbricks Website">
 
 ```bash
@@ -109,5 +132,5 @@ pnpm dev --filter=formbricks-com
 ```
 
 </CodeGroup>
-
+</Col>
 You can now access the Formbricks website on [http://localhost:3001](http://localhost:3001).

apps/formbricks-com/app/docs/contributing/troubleshooting/page.mdx

@@ -34,7 +34,7 @@ If nothing helps, run `pnpm clean` and then `pnpm i` again. This solves a lot.
 ## "I get a full-screen error with cryptic strings"
 
 This usually happens when the Formbricks Widget wasn't correctly or completely built.
-
+<Col>
 <CodeGroup title="Build js library first and then run again">
 
 ```bash
@@ -45,11 +45,11 @@ pnpm dev
 ```
 
 </CodeGroup>
-
+</Col>
 ## My machine struggles with the repository
 
 Since we're working with a monorepo structure, the repository can get quite big. If you're having trouble working with the repository, try the following:
-
+<Col>
 <CodeGroup title="Only run the required project">
 
 ```bash {{ title: 'Formbricks Web-App' }}
@@ -65,7 +65,7 @@ pnpm dev --filter=demo...
 ```
 
 </CodeGroup>
-
+</Col>
 However, in our experience it's better to run `pnpm dev` than having two terminals open (one with the Formbricks app and one with the demo).
 
 ## Uncaught (in promise) SyntaxError: Unexpected token !DOCTYPE ... is not valid JSON

apps/formbricks-com/app/docs/getting-started/framework-guides/page.mdx

@@ -7,7 +7,8 @@ import ReactApp from "./react-in-app-survey-app-popup-form.webp";
 
 export const metadata = {
   title: "Integrate Formbricks: Comprehensive Framework Guide & Integration Tutorial",
-  description: "Master the integration of Formbricks into your application with our detailed guides. From HTML to ReactJS, NextJS, and VueJS, get step-by-step instructions and ensure seamless setup.",
+  description:
+    "Master the integration of Formbricks into your application with our detailed guides. From HTML to ReactJS, NextJS, and VueJS, get step-by-step instructions and ensure seamless setup.",
 };
 
 # Framework Guides
@@ -30,7 +31,7 @@ Before getting started, make sure you have:
   src={SetupChecklist}
   alt="Step 2 - Setup Checklist"
   quality="100"
-  className="rounded-lg max-w-full sm:max-w-3xl"
+  className="max-w-full rounded-lg sm:max-w-3xl"
 />
 
 ---
@@ -39,16 +40,17 @@ Before getting started, make sure you have:
 
 All you need to do is copy a `<script>` tag to your HTML head, and that’s about it!
 
+<Col>
 <CodeGroup title="HTML">
 ```html {{ title: 'index.html' }}
 <!-- START Formbricks Surveys -->
 <script type="text/javascript">
-    !function(){var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src="https://unpkg.com/@formbricks/js@^1.0.0/dist/index.umd.js";var e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e),setTimeout(function(){window.formbricks=window.js;window.formbricks.init({environmentId: "<your-environment-id>", apiHost: "<api-host>"})},500)}();
+    !function(){var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src="https://unpkg.com/@formbricks/js@^1.1.2/dist/index.umd.js";var e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e),setTimeout(function(){window.formbricks.init({environmentId: "<your-environment-id>", apiHost: "<api-host>"})},500)}();
     </script>
 <!-- END Formbricks Surveys -->
 ```
 </CodeGroup>
-
+</Col>
 ### Required Customizations to be Made
 
 <Properties>
@@ -70,6 +72,7 @@ Refer our [Example HTML project](https://github.com/formbricks/examples/tree/mai
 
 Install the Formbricks SDK using one of the package managers ie `npm`,`pnpm`,`yarn`.
 
+<Col>
 <CodeGroup title="Install Formbricks JS library">
 ```shell {{ title: 'npm' }}
 npm install --save @formbricks/js
@@ -82,9 +85,9 @@ yarn add @formbricks/js
 ```
 
 </CodeGroup>
- 
+</Col>
 Now, update your App.js/ts file to initialise Formbricks.
-
+<Col>
 <CodeGroup title="src/App.js">
 
 ```js
@@ -107,7 +110,7 @@ export default App;
 ```
 
 </CodeGroup>
-
+</Col>
 ### Required Customizations to be Made
 
 <Properties>
@@ -129,7 +132,7 @@ The app initializes 'formbricks' when it's loaded in a browser environment (due
   src={ReactApp}
   alt="In app survey in React app for micro surveys"
   quality="100"
-  className="rounded-lg max-w-full sm:max-w-3xl"
+  className="max-w-full rounded-lg sm:max-w-3xl"
 />
 
 Refer our [Example ReactJs project](https://github.com/formbricks/examples/tree/main/reactjs) for more help! Now visit the [Validate your Setup](#validate-your-setup) section to verify your setup!
@@ -147,6 +150,7 @@ guidelines for each convention below:
 
 Code snippets for the integration for both conventions are provided to further assist you.
 
+<Col>
 <CodeGroup title="Install Formbricks JS library">
 ```shell {{ title: 'npm' }}
 npm install --save @formbricks/js
@@ -159,9 +163,9 @@ yarn add @formbricks/js
 ```
 
 </CodeGroup>
-
+</Col>
 ### App Directory
-
+<Col>
 <CodeGroup title="app/formbricks.tsx">
 ```tsx {{title: 'Typescript'}}
 "use client";
@@ -173,19 +177,19 @@ export default function FormbricksProvider() {
   const pathname = usePathname();
   const searchParams = useSearchParams();
 
-  useEffect(() => {
-    formbricks.init({
-      environmentId: "<environment-id>",
-      apiHost: "<api-host>",
-      debug: true, // remove when in production
-    });
-  }, []);
+useEffect(() => {
+formbricks.init({
+environmentId: "<environment-id>",
+apiHost: "<api-host>",
+debug: true, // remove when in production
+});
+}, []);
 
-  useEffect(() => {
-    formbricks?.registerRouteChange();
-  }, [pathname, searchParams]);
+useEffect(() => {
+formbricks?.registerRouteChange();
+}, [pathname, searchParams]);
 
-  return null;
+return null;
 }
 
 ````
@@ -207,11 +211,13 @@ export default function RootLayout({ children }: { children: React.ReactNode })
 ````
 
 </CodeGroup>
+</Col>
 
 Refer our [Example NextJS App Directory project](https://github.com/formbricks/examples/tree/main/nextjs-app) for more help!
 
 ### Pages Directory
 
+<Col>
 <CodeGroup title="src/pages/_app.tsx">
 
 ```tsx {{ title: 'Typescript' }}
@@ -245,7 +251,7 @@ export default function App({ Component, pageProps }: AppProps) {
 ```
 
 </CodeGroup>
-
+</Col>
 Refer our [Example NextJS Pages Directory project](https://github.com/formbricks/examples/tree/main/nextjs-pages) for more help!
 
 ### Required Customizations to be Made
@@ -283,6 +289,7 @@ Now visit the [Validate your Setup](#validate-your-setup) section to verify your
 Integrating the Formbricks SDK with Vue.js is a straightforward process.
 We will make sure the SDK is only loaded and used on the client side, as it's not intended for server-side usage.
 
+<Col>
 <CodeGroup title="Install Formbricks JS library">
 ```shell {{ title: 'npm' }}
 npm install --save @formbricks/js
@@ -335,7 +342,7 @@ router.afterEach((to, from) => {
 ```
 
 </CodeGroup>
-
+</Col>
 ### Required Customizations to be Made
 
 <Properties>
@@ -367,7 +374,7 @@ Once you have completed the steps above, you can validate your setup by checking
   src={WidgetNotConnected}
   alt="Widget isnt connected"
   quality="100"
-  className="rounded-lg max-w-full sm:max-w-3xl"
+  className="max-w-full rounded-lg sm:max-w-3xl"
 />
 
 To this:
@@ -376,9 +383,9 @@ To this:
   src={WidgetConnected}
   alt="Widget is connected"
   quality="100"
-  className="rounded-lg max-w-full sm:max-w-3xl"
+  className="max-w-full rounded-lg sm:max-w-3xl"
 />
 
 **Can’t figure it out? [Join our Discord!](https://formbricks.com/discord)**
 
----
+---

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

@@ -20,7 +20,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="not-prose mb-16 mt-6 flex gap-3">
+<div className="mb-16 mt-6 flex gap-3">
   <Button href="/docs/getting-started/quickstart-in-app-survey" arrow="right" children="Quickstart" />
 </div>
 
@@ -34,7 +34,7 @@ Natively embed qualitative user research into your B2B SaaS. Leverage Best Pract
 - 🧪 **Smart triggering**: Show the right survey at the right time with event-based triggers for accurate research and well-defined priorities.
 - 🎉 **Open-source and self-hosted**: Enjoy full control over your data and infrastructure with our AGPL-licensed solution, and stay tuned for our upcoming cloud version!
 
-<div className="not-prose">
+<div>
   <Button
     href="https://app.formbricks.com/"
     variant="text"

apps/formbricks-com/app/docs/link-surveys/data-prefilling/page.mdx

@@ -22,7 +22,7 @@ URL prefilling of data comes in handy when you:
 - Want to embed the first question in an email and increase conversion by prefilling the choice
 
 ## Quick Example
-
+<Col>
 <CodeGroup title="Example URL">
 
 ```sh
@@ -30,7 +30,7 @@ https://app.formbricks.com/s/clin3dxja02k8l80hpwmx4bjy?question_id=5
 ```
 
 </CodeGroup>
-
+</Col>
 ## How it works
 
 To prefill the first question of a survey, append `?question_id=answer` at the end of the survey URL. The answer has to match the expected type of the question. For example, if the first question is a rating question, the answer has to be a number. If the first question is a single select question, the answer has to be a string.
@@ -58,7 +58,7 @@ You find the `questionId` in the Advanced Settings at the bottom of each questio
 Here are a few examples to get you started:
 
 ### Rating Question
-
+<Col>
 <CodeGroup title="Translates to 5 stars / points / emojis">
 
 ```sh
@@ -66,9 +66,9 @@ https://app.formbricks.com/s/clin3yxja52k8l80hpwmx4bjy?rating_question_id=5
 ```
 
 </CodeGroup>
-
+</Col>
 ### NPS Question
-
+<Col>
 <CodeGroup title="Translates to an NPS rating of 10">
 
 ```sh
@@ -76,9 +76,9 @@ https://app.formbricks.com/s/clin3yxja52k8l80hpwmx4bjy?nps_question_id=10
 ```
 
 </CodeGroup>
-
+</Col>
 ### Single Select Question (Radio)
-
+<Col>
 <CodeGroup title="Chooses the option 'Very disappointed' in the single select question. The string has to be identical to the option in your question">
 
 ```sh
@@ -86,9 +86,9 @@ https://app.formbricks.com/s/clin3yxja52k8l80hpwmx4bjy?single_select_question_id
 ```
 
 </CodeGroup>
-
+</Col>
 ### Multi Select Question (Checkbox)
-
+<Col>
 <CodeGroup title="Selects three options 'Sun, Palms and Beach' in the multi select question. The strings have to be identical to the options in your question">
 
 ```sh
@@ -96,9 +96,9 @@ https://app.formbricks.com/s/clin3yxja52k8l80hpwmx4bjy?multi_select_question_id=
 ```
 
 </CodeGroup>
-
+</Col>
 ### Open Text Question
-
+<Col>
 <CodeGroup title="Adds 'I love Formbricks' as the answer to the open text question">
 
 ```sh
@@ -106,9 +106,9 @@ https://app.formbricks.com/s/clin3yxja52k8l80hpwmx4bjy?openText_question_id=I%20
 ```
 
 </CodeGroup>
-
+</Col>
 ### CTA Question
-
+<Col>
 <CodeGroup title="Adds 'clicked' as the answer to the CTA question. Alternatively, you can set it to 'dismissed' to skip the question.">
 
 ```txt
@@ -116,7 +116,7 @@ https://app.formbricks.com/s/clin3yxja52k8l80hpwmx4bjy?cta_question_id=clicked
 ```
 
 </CodeGroup>
-
+</Col>
 ## Validation
 
 Make sure that the answer in the URL matches the expected type for the first question.

apps/formbricks-com/app/docs/link-surveys/single-use-links/page.mdx

@@ -0,0 +1,80 @@
+import Image from "next/image";
+
+import EnvVar from "./env-variable.webp";
+import ShareModal from "./share-modal.webp";
+import Settings from "./single-use-setting.webp";
+import Message from "./used-message.webp";
+import Metadata from "./metadata.webp";
+
+export const meta = {
+  title: "Single Use Links",
+  description: "Make sure that each respondent only replies once with single use links.",
+};
+
+#### Link Surveys
+
+# Single Use Links
+
+This guide will help you understand how to generate and use single-use links within our application.
+
+## Purpose
+
+- Single-use links (or one-time / disposable links) are URLs that grant access to a survey only once.
+
+- The primary purpose of single-use links is to assure that no respondent submits a survey twice.
+
+## Using Single-Use Links with Formbricks
+
+Using single-use links with Formbricks is quite straight-forward:
+
+1. In the survey settings, toggle "Single Use Link" on:
+
+   <Image
+     src={Settings}
+     alt="Single use survey settings"
+     quality="100"
+     className="max-w-full rounded-lg sm:max-w-3xl"
+   />
+
+2. When you publish your survey, the following modal will open:
+   <Image
+     src={ShareModal}
+     alt="Share modal with 7 single use links which can be regenerated"
+     quality="100"
+     className="max-w-full rounded-lg sm:max-w-3xl"
+   />
+
+Here, you can copy and generate as many single-use links as you need.
+
+## URL Encryption
+
+You can encrypt single use URLs to assure information to be protected. To enable it, you have to set the correct environment variable:
+
+<Image
+  src={EnvVar}
+  alt="Set the right env var to be able to enable encryption."
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+## Check suId of a submission
+
+You can find the suId of each submission in the submission meta data. To view it, simplte hover over the Avatar:
+
+<Image
+  src={Metadata}
+  alt="View suId in the submission meta data."
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+### 'Link used' message
+
+You can customize the 'link used' messaging in the Survey Editor settings:
+
+<Image
+  src={Message}
+  alt="Adjust the message shown to people if a link was already used."
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>

apps/formbricks-com/app/docs/link-surveys/user-identification/page.mdx

@@ -23,7 +23,7 @@ Identifying users in link surveys comes in handy when you:
 - Want to gather data and later connect it to a user who has not signed up yet
 
 ## Quick Example
-
+<Col>
 <CodeGroup title="User Identification Example">
 
 ```txt
@@ -31,7 +31,7 @@ https://app.formbricks.com/s/clin3dxja02k8l80hpwmx4bjy?userId=ABC123
 ```
 
 </CodeGroup>
-
+</Col>
 ## How it works
 
 To link a response to a user in your Formbricks database, you can pass your internal user Id as a URL parameter.

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

@@ -8,14 +8,12 @@ export const meta = {
 
 # Self Hosting Formbricks
 
-At Formbricks, we understand that different users have different needs, and we strive to cater to a wide variety of situations. This is why we currently provide three ways of running our application:
+At Formbricks, we understand that different users have different needs, and we strive to cater to a wide variety of situations. This is why we currently provide two ways of running our application:
 
 1. **Production Instance Setup with Shell Script on Ubuntu**: If you want to quickly set up a production instance of Formbricks on a server running Ubuntu, we've got you covered! This method utilizes a convenient shell script that takes care of everything, including Docker, Postgres DB, and SSL certificate configuration. The shell script will automatically install all the required dependencies and configure your server, making the process a breeze. Visit the [Production Instance Setup with a Bash Script Documentation](/docs/self-hosting/production).
 
 2. **Fast Setup with a Pre-built Docker Image:** This method is designed for those who want to quickly set up and start using Formbricks without getting into the technicalities of Docker or the build process. When you choose this method, you're using an image that we've already built for you. The pre-built image is ready-to-run, and it only requires minimal configuration on your part. This approach is perfect for getting a functional instance of Formbricks up and running with minimal hassle. It's as easy as downloading the Docker image and firing up the container. Visit the [Docker Setup Documentation](/docs/self-hosting/docker).
 
-3. **Manual Setup by Building the Docker Image from Source:** This approach provides the flexibility to configure every aspect of your Formbricks instance, including environment variables that need to be set at build time. While we don't recommend changing the source code of Formbricks, this method allows you to set your own configuration that might be necessary for specific deployment needs. Keep in mind that this method requires a more in-depth understanding of Docker and the build process. However, the trade-off is the additional control and flexibility you gain, making it worth considering if you're a more advanced user or have very specific configuration needs. Visit the [Advanced Setup from Source Documentation](/docs/self-hosting/from-source).
-
 Please note that regardless of the method you choose, Formbricks is designed to be easy-to-use and flexible. So choose the method that best fits your comfort level and requirements, and start leveraging the **power of Formbricks** today!
 
 Looking for something not mentioned here? [Join our Discord!](https://formbricks.com/discord) and we'd be glad to assist you!

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

@@ -21,99 +21,132 @@ Ensure `docker` & `docker compose` are installed on your server/system. Both are
   Docker documentation.
 </Note>
 
-1. **Create a New Directory for Formbricks**
+1.  **Create a New Directory for Formbricks**
 
-   Open a terminal and create a new directory for Formbricks, then navigate into this new directory:
+Open a terminal and create a new directory for Formbricks, then navigate into this new directory:
 
+<Col>
    <CodeGroup title="Create and cd into the new directory">
 
-   ```bash
-   mkdir formbricks-quickstart && cd formbricks-quickstart
-   ```
+    ```bash
+    mkdir formbricks-quickstart && cd formbricks-quickstart
+    ```
 
-   </CodeGroup>
+    </CodeGroup>
 
-2. **Download the Docker-Compose File**
+</Col>
 
-   Download the docker-compose file directly from the Formbricks repository:
+2.  **Download the Docker-Compose File**
 
+Download the docker-compose file directly from the Formbricks repository:
+
+<Col>
    <CodeGroup title="Download docker compose file">
 
-   ```bash
-   curl -o docker-compose.yml https://raw.githubusercontent.com/formbricks/formbricks/main/docker/docker-compose.yml
-   ```
+    ```bash
+    curl -o docker-compose.yml https://raw.githubusercontent.com/formbricks/formbricks/main/docker/docker-compose.yml
+    ```
 
-   </CodeGroup>
+    </CodeGroup>
 
-3. **Generate NextAuth Secret**
+</Col>
 
-   Next, you need to generate a NextAuth secret. This will be used for session signing and encryption. The `sed` command below generates a random string using `openssl`, then replaces the `NEXTAUTH_SECRET:` placeholder in the `docker-compose.yml` file with this generated secret:
+3.  **Generate NextAuth Secret**
 
+Next, you need to generate a NextAuth secret. This will be used for session signing and encryption. The `sed` command below generates a random string using `openssl`, then replaces the `NEXTAUTH_SECRET:` placeholder in the `docker-compose.yml` file with this generated secret:
+
+<Col>
    <CodeGroup title="Generate NextAuth Secret">
 
-   ```bash
-   sed -i "/NEXTAUTH_SECRET:$/s/NEXTAUTH_SECRET:.*/NEXTAUTH_SECRET: $(openssl rand -base64 32 | tr -dc 'a-zA-Z0-9' | head -c 32)/" docker-compose.yml
-   ```
+    ```bash
+    sed -i "/NEXTAUTH_SECRET:$/s/NEXTAUTH_SECRET:.*/NEXTAUTH_SECRET: $(openssl rand -hex 32)/" docker-compose.yml
+    ```
 
-   </CodeGroup>
+    </CodeGroup>
 
-4. **Start the Docker Setup**
+</Col>
 
-   You're now ready to start the Formbricks Docker setup. The following command will start Formbricks together with a postgreSQL database using Docker Compose:
+4.  **Generate Encryption Key**
 
-   We pass the `--env-file /dev/null` flag to docker-compose to prevent it from reading the .env file. This is because we're using environment variables directly in the docker-compose.yml file as the env file is currently in a format not well recognised by docker systems.
+Next, you need to generate an Encryption Key. This will be used for authenticating and verifying 2 Factor Authentication. The `sed` command below generates a random string using `openssl`, then replaces the `ENCRYPTION_KEY:` placeholder in the `docker-compose.yml` file with this generated secret:
 
+<Col>
+   <CodeGroup title="Generate Encryption Key">
+
+    ```bash
+    sed -i "/ENCRYPTION_KEY:$/s/ENCRYPTION_KEY:.*/ENCRYPTION_KEY: $(openssl rand -hex 32)/" docker-compose.yml
+    ```
+
+    </CodeGroup>
+
+</Col>
+
+5.  **Start the Docker Setup**
+
+You're now ready to start the Formbricks Docker setup. The following command will start Formbricks together with a postgreSQL database using Docker Compose:
+
+<Col>
    <CodeGroup title="Launch Docker Instance">
 
-   ```bash
-    docker compose --env-file /dev/null up -d
-   ```
+```bash
+ docker compose up -d
+```
 
    </CodeGroup>
-
+</Col>
    The `-d` flag will run the containers in detached mode, meaning they'll run in the background.
 
-5. **Visit Formbricks in Your Browser**
+6. **Visit Formbricks in Your Browser**
 
    After starting the Docker setup, visit http://localhost:3000 in your browser to interact with the Formbricks application. The first time you access this page, you'll be greeted by a setup wizard. Follow the prompts to define your first user and get started.
 
 ## Updating Formbricks
 
-1. Stop the Formbricks stack
+1.  Stop the Formbricks stack
 
+<Col>
    <CodeGroup title="Stop the docker instance">
 
-   ```bash
-   docker compose down
-   ```
+    ```bash
+    docker compose down
+    ```
 
-   </CodeGroup>
+    </CodeGroup>
 
-2. Pull the latest changes
+</Col>
 
+2.  Pull the latest changes
+
+<Col>
    <CodeGroup title="Pull the changes into docker">
 
-   ```bash
-   docker compose pull
-   ```
+    ```bash
+    docker compose pull
+    ```
 
-   </CodeGroup>
+    </CodeGroup>
 
-3. Update env vars as necessary in the docker-compose file.
-4. Re-start the Formbricks stack
+</Col>
 
+3.  Update env vars as necessary in the docker-compose file.
+4.  Re-start the Formbricks stack
+
+<Col>
    <CodeGroup title="Relaunch the Docker Instance">
 
-   ```bash
-   docker compose --env-file /dev/null up -d
-   ```
+    ```bash
+    docker compose up -d
+    ```
 
-   </CodeGroup>
+    </CodeGroup>
+
+</Col>
 
 ## Debugging
 
 If you encounter any issues, you can check the logs of the container with:
 
+<Col>
 <CodeGroup title="Look into docker logs">
 
 ```bash
@@ -121,9 +154,9 @@ docker compose logs -f
 ```
 
 </CodeGroup>
-
+</Col>
 In an ideal case, you should see something like this:
-
+<Col>
 <CodeGroup title="Docker Build Underway">
 
 ```bash
@@ -151,9 +184,9 @@ In an ideal case, you should see something like this:
 ```
 
 </CodeGroup>
-
+</Col>
 And at the tail of the output, you should see something like this:
-
+<Col>
 <CodeGroup title="Docker Build Completed">
 
 ```bash
@@ -164,15 +197,71 @@ formbricks-quickstart-formbricks-1  | Listening on port 3000 url: http://<random
 ```
 
 </CodeGroup>
-
+</Col>
 You can close the logs again with `CTRL + C`.
 
 <Note>
 ## Customizing the Build Time variables
 
-To edit any of the variables that start with `NEXT_PUBLIC_`, you need to rebuild the Formbricks Docker from source! It is just one
-more added step and is not as much of a hassle as you think! Please check the [Building from Source](/docs/self-hosting/from-source) section!
+To edit any of the variables that start with `NEXT_PUBLIC_`, you need to rebuild the Formbricks Docker Image!
 
 </Note>
 
+## Important Run-time Variables
+
+These variables can be provided at the runtime i.e. in your docker-compose file.
+
+| Variable                    | Description                                                                             | Required                                                | Default                                                                 |
+| --------------------------- | --------------------------------------------------------------------------------------- | ------------------------------------------------------- | ----------------------------------------------------------------------- |
+| WEBAPP_URL                  | Base URL of the site.                                                                   | required                                                | `http://localhost:3000`                                                 |
+| DATABASE_URL                | Database URL with credentials.                                                          | required                                                | `postgresql://postgres:postgres@postgres:5432/formbricks?schema=public` |
+| NEXTAUTH_SECRET             | Secret for NextAuth, used for session signing and encryption.                           | required                                                | (Generated by the user)                                                 |
+| NEXTAUTH_URL                | Location of the auth server. By default, this is the Formbricks docker instance itself. | required                                                | `http://localhost:3000`                                                 |
+| PRIVACY_URL                 | URL for privacy policy.                                                                 | optional                                                |                                                                         |
+| TERMS_URL                   | URL for terms of service.                                                               | optional                                                |                                                                         |
+| IMPRINT_URL                 | URL for imprint.                                                                        | optional                                                |                                                                         |
+| SIGNUP_DISABLED             | Disables the ability for new users to create an account if set to `1`.                  | optional                                                |                                                                         |
+| PASSWORD_RESET_DISABLED     | Disables password reset functionality if set to `1`.                                    | optional                                                |                                                                         |
+| EMAIL_VERIFICATION_DISABLED | Disables email verification if set to `1`.                                              | optional                                                |                                                                         |
+| INVITE_DISABLED             | Disables the ability for invited users to create an account if set to `1`.              | optional                                                |                                                                         |
+| MAIL_FROM                   | Email address to send emails from.                                                      | optional (required if email services are to be enabled) |                                                                         |
+| SMTP_HOST                   | Host URL of your SMTP server.                                                           | optional (required if email services are to be enabled) |                                                                         |
+| SMTP_PORT                   | Host Port of your SMTP server.                                                          | optional (required if email services are to be enabled) |                                                                         |
+| SMTP_USER                   | Username for your SMTP Server.                                                          | optional (required if email services are to be enabled) |                                                                         |
+| SMTP_PASSWORD               | Password for your SMTP Server.                                                          | optional (required if email services are to be enabled) |                                                                         |
+| SMTP_SECURE_ENABLED         | SMTP secure connection. For using TLS, set to `1` else to `0`.                          | optional (required if email services are to be enabled) |                                                                         |
+| GITHUB_AUTH_ENABLED         | Enables GitHub login if set to `1`.                                                     | optional                                                |                                                                         |
+| GOOGLE_AUTH_ENABLED         | Enables Google login if set to `1`.                                                     | optional                                                |                                                                         |
+| GITHUB_ID                   | Client ID for GitHub.                                                                   | optional (required if GitHub auth is enabled)           |                                                                         |
+| GITHUB_SECRET               | Secret for GitHub.                                                                      | optional (required if GitHub auth is enabled)           |                                                                         |
+| GOOGLE_CLIENT_ID            | Client ID for Google.                                                                   | optional (required if Google auth is enabled)           |                                                                         |
+| GOOGLE_CLIENT_SECRET        | Secret for Google.                                                                      | optional (required if Google auth is enabled)           |                                                                         |
+| CRON_SECRET                 | API Secret for running cron jobs.                                                       | optional                                                |                                                                         |
+| STRIPE_SECRET_KEY           | Secret key for Stripe integration.                                                      | optional                                                |                                                                         |
+| STRIPE_WEBHOOK_SECRET       | Webhook secret for Stripe integration.                                                  | optional                                                |                                                                         |
+| 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`                                                               |
+
+## Build-time Variables
+
+These variables must be provided at the time of the docker build and would require rebuilding the image.
+
+| Variable                                           | Description                                                     | Required | Default |
+| -------------------------------------------------- | --------------------------------------------------------------- | -------- | ------- |
+| NEXT_PUBLIC_FORMBRICKS_API_HOST                    | Host for the Formbricks API.                                    | optional |         |
+| NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID              | If you already have a preset environment ID of the environment. | optional |         |
+| NEXT_PUBLIC_FORMBRICKS_ONBOARDING_SURVEY_ID        | If you already have an onboarding survey ID to show new users.  | optional |         |
+| NEXT_PUBLIC_POSTHOG_API_KEY                        | API key for PostHog analytics.                                  | optional |         |
+| NEXT_PUBLIC_POSTHOG_API_HOST                       | Host for PostHog analytics.                                     | optional |         |
+| NEXT_PUBLIC_SENTRY_DSN                             | DSN for Sentry error tracking.                                  | optional |         |
+| NEXT_PUBLIC_DOCSEARCH_APP_ID                       | ID of the DocSearch application.                                | optional |         |
+| NEXT_PUBLIC_DOCSEARCH_API_KEY                      | API key of the DocSearch application.                           | optional |         |
+| NEXT_PUBLIC_DOCSEARCH_INDEX_NAME                   | Name of the DocSearch index.                                    | optional |         |
+| NEXT_PUBLIC_FORMBRICKS_COM_ENVIRONMENT_ID          | Environment ID for Formbricks (if you already have one)         | optional |         |
+| NEXT_PUBLIC_FORMBRICKS_COM_DOCS_FEEDBACK_SURVEY_ID | Survey ID for the feedback survey on the docs site.             | optional |         |
+| NEXT_PUBLIC_FORMBRICKS_COM_API_HOST                | Host for the Formbricks API.                                    | optional |         |
+
 Still facing issues? [Join our Discord!](https://formbricks.com/discord) and we'd be glad to assist you!

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

@@ -1,139 +0,0 @@
-export const meta = {
-  title: "Formbricks Self-Hosting Guide: Deploy from Source Code for Complete Customization",
-  description:
-    "Build the Formbricks Image right from the open-sourced codebase and make changes however needed. Deploy it then with the freedom of customizing even the compile-time environment variables. Gain more control and flexibility by customizing compile-time environment variables and configuring your instance. Dive into our comprehensive guide for building and running Formbricks with Docker.",
-};
-
-#### Self-Hosting
-
-# Building and Running Formbricks from Source
-
-This approach provides the flexibility to configure every aspect of your Formbricks instance, including environment variables that need to be set at build time. While we don't recommend changing the source code of Formbricks, this method allows you to set your own configuration that might be necessary for specific deployment needs. Keep in mind that this method requires a more in-depth understanding of Docker and the build process. However, the trade-off is the additional control and flexibility you gain, making it worth considering if you're a more advanced user or have very specific configuration needs.
-
-### Requirements
-
-Ensure `docker` & `docker compose` are installed on your server/system. Both are typically included with Docker utilities, like Docker Desktop and Rancher Desktop.
-
-<Note>
-  `docker compose` without the hyphen is now the primary method of using docker-compose, according to the
-  Docker documentation.
-</Note>
-
-1.  **Clone the repository**:
-
-   <CodeGroup title="Clone and cd into the Formbricks directory">
-
-    ```bash
-    git clone https://github.com/formbricks/formbricks.git && cd formbricks
-    ```
-
-   </CodeGroup>
-
-2.  **Modify the environment variables in your `docker-compose.yml` file as required by your setup.** <br/> This file comes with a basic setup and Formbricks works without making any changes to the file. To enable email sending functionality you need to configure the SMTP settings. If you configured your email credentials, you can also comment the following lines to enable email verification (`# NEXT_PUBLIC_EMAIL_VERIFICATION_DISABLED=1`) and password reset (`# NEXT_PUBLIC_PASSWORD_RESET_DISABLED=1`)
-
-        <Note>
-           ## Editing a NEXT_PUBLIC_* variable?
-          Note: All environment variables starting with `NEXT_PUBLIC_` are used at build time. When you change
-          environment variables later, you need to rebuild the image with `docker compose build` for the changes
-          to take effect.
-        </Note>
-
-3. **Generate NextAuth Secret**
-
-   Next, you need to generate a NextAuth secret. This will be used for session signing and encryption. The `sed` command below generates a random string using `openssl`, then replaces the `NEXTAUTH_SECRET:` placeholder in the `docker-compose.yml` file with this generated secret:
-
-   <CodeGroup title="Generate NextAuth Secret">
-
-   ```bash
-   sed -i "/x-nextauth-secret: &nextauth_secret/s/RANDOM_STRING/$(openssl rand -base64 32 | tr -dc 'a-zA-Z0-9' | head -c 32)/" docker-compose.yml
-   ```
-
-   </CodeGroup>
-
-4.  **Start the docker compose process.** <br/> Finally start the docker compose process to build and spin up the Formbricks container as well as the PostgreSQL database. <br/> _Use docker-compose if you are on an older docker version_
-
-   We pass the `--env-file /dev/null` flag to docker-compose to prevent it from reading the .env file. This is because we're using environment variables directly in the docker-compose.yml file as the env file is currently in a format not well recognised by docker systems.
-
-   <CodeGroup title="Launch docker instances">
-
-    ```bash
-    docker compose --env-file /dev/null up
-    ```
-
-    </CodeGroup>
-
-    You can now access the app on [http://localhost:3000](http://localhost:3000). You will be automatically redirected to the login. To use your local installation of Formbricks, create a new account.
-
-## Important Run-time Variables
-
-These variables must also be provided at runtime.
-
-| Variable                    | Description                                                                                  | Required                                                | Default                                                                 |
-| --------------------------- | -------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ----------------------------------------------------------------------- |
-| WEBAPP_URL                  | Base URL of the site.                                                                        | required                                                | `http://localhost:3000`                                                 |
-| SURVEY_BASE_URL             | Base URL of the link surveys.                                                                | required                                                | `http://localhost:3000/s/`                                              |
-| DATABASE_URL                | Database URL with credentials.                                                               | required                                                | `postgresql://postgres:postgres@postgres:5432/formbricks?schema=public` |
-| NEXTAUTH_SECRET             | Secret for NextAuth, used for session signing and encryption.                                | required                                                | (Generated by the user)                                                 |
-| NEXTAUTH_URL                | Location of the auth server. By default, this is the Formbricks docker instance itself.      | required                                                | `http://localhost:3000`                                                 |
-| PRIVACY_URL                 | URL for privacy policy.                                                                      | optional                                                |                                                                         |
-| TERMS_URL                   | URL for terms of service.                                                                    | optional                                                |                                                                         |
-| IMPRINT_URL                 | URL for imprint.                                                                             | optional                                                |                                                                         |
-| SIGNUP_DISABLED             | Disables the ability for new users to create an account if set to `1`.                       | optional                                                |                                                                         |
-| PASSWORD_RESET_DISABLED     | Disables password reset functionality if set to `1`.                                         | optional                                                |                                                                         |
-| EMAIL_VERIFICATION_DISABLED | Disables email verification if set to `1`.                                                   | optional                                                |                                                                         |
-| INVITE_DISABLED             | Disables the ability for invited users to create an account if set to `1`.                   | optional                                                |                                                                         |
-| MAIL_FROM                   | Email address to send emails from.                                                           | optional (required if email services are to be enabled) |                                                                         |
-| SMTP_HOST                   | Host URL of your SMTP server.                                                                | optional (required if email services are to be enabled) |                                                                         |
-| SMTP_PORT                   | Host Port of your SMTP server.                                                               | optional (required if email services are to be enabled) |                                                                         |
-| SMTP_USER                   | Username for your SMTP Server.                                                               | optional (required if email services are to be enabled) |                                                                         |
-| SMTP_PASSWORD               | Password for your SMTP Server.                                                               | optional (required if email services are to be enabled) |                                                                         |
-| SMTP_SECURE_ENABLED         | SMTP secure connection. For using TLS, set to `1` else to `0`.                               | optional (required if email services are to be enabled) |                                                                         |
-| GITHUB_AUTH_ENABLED         | Enables GitHub login if set to `1`.                                                          | optional                                                |                                                                         |
-| GOOGLE_AUTH_ENABLED         | Enables Google login if set to `1`.                                                          | optional                                                |                                                                         |
-| GITHUB_ID                   | Client ID for GitHub.                                                                        | optional (required if GitHub auth is enabled)           |                                                                         |
-| GITHUB_SECRET               | Secret for GitHub.                                                                           | optional (required if GitHub auth is enabled)           |                                                                         |
-| GOOGLE_CLIENT_ID            | Client ID for Google.                                                                        | optional (required if Google auth is enabled)           |                                                                         |
-| GOOGLE_CLIENT_SECRET        | Secret for Google.                                                                           | optional (required if Google auth is enabled)           |                                                                         |
-| CRON_SECRET                 | API Secret for running cron jobs.                                                            | optional                                                |                                                                         |
-| STRIPE_SECRET_KEY           | Secret key for Stripe integration.                                                           | optional                                                |                                                                         |
-| STRIPE_WEBHOOK_SECRET       | Webhook secret for Stripe integration.                                                       | optional                                                |                                                                         |
-| 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`                                                               |
-
-## Build-time Variables
-
-These variables must be provided at the time of the docker build and can be provided by updating the `.env` file.
-
-| Variable                                           | Description                                                     | Required | Default |
-| -------------------------------------------------- | --------------------------------------------------------------- | -------- | ------- |
-| NEXT_PUBLIC_FORMBRICKS_API_HOST                    | Host for the Formbricks API.                                    | optional |         |
-| NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID              | If you already have a preset environment ID of the environment. | optional |         |
-| NEXT_PUBLIC_FORMBRICKS_ONBOARDING_SURVEY_ID        | If you already have an onboarding survey ID to show new users.  | optional |         |
-| NEXT_PUBLIC_POSTHOG_API_KEY                        | API key for PostHog analytics.                                  | optional |         |
-| NEXT_PUBLIC_POSTHOG_API_HOST                       | Host for PostHog analytics.                                     | optional |         |
-| NEXT_PUBLIC_SENTRY_DSN                             | DSN for Sentry error tracking.                                  | optional |         |
-| NEXT_PUBLIC_DOCSEARCH_APP_ID                       | ID of the DocSearch application.                                | optional |         |
-| NEXT_PUBLIC_DOCSEARCH_API_KEY                      | API key of the DocSearch application.                           | optional |         |
-| NEXT_PUBLIC_DOCSEARCH_INDEX_NAME                   | Name of the DocSearch index.                                    | optional |         |
-| NEXT_PUBLIC_FORMBRICKS_COM_ENVIRONMENT_ID          | Environment ID for Formbricks (if you already have one)         | optional |         |
-| NEXT_PUBLIC_FORMBRICKS_COM_DOCS_FEEDBACK_SURVEY_ID | Survey ID for the feedback survey on the docs site.             | optional |         |
-| NEXT_PUBLIC_FORMBRICKS_COM_API_HOST                | Host for the Formbricks API.                                    | optional |         |
-
-## Debugging
-
-If you encounter any issues, you can check the logs of the container with:
-
-<CodeGroup title="Docker container logs">
-
-```bash
-docker compose logs -f
-```
-
-</CodeGroup>
-
-You can close the logs again with `CTRL + C`.
-
-Still facing issues? [Join our Discord!](https://formbricks.com/discord) and we'd be glad to assist you!

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

@@ -6,33 +6,53 @@ export const meta = {
 
 #### Self-Hosting
 
-# Migrating to v1.1
+# Migration Guide
+
+## v1.1 -> v1.2
+
+Formbricks v1.2 ships a lot of features targeting our Link Surveys. We have also improved our security posture to be as robust as ever. However, it also comes with a few breaking changes specifically with the environment variables. This guide will help you migrate your existing Formbricks instance to v1.2 without any hassles or build errors.
+
+### New Environment Variables
+
+| Environment Variable | Required | Recommended Generation         | Comments                                                    |
+| -------------------- | -------- | ------------------------------ | ----------------------------------------------------------- |
+| 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
+
+| Environment Variable | Comments                                                                  |
+| -------------------- | ------------------------------------------------------------------------- |
+| SURVEY_BASE_URL      | The WEBAPP_URL is now used to determine the survey base url in all places |
+
+## v1.0 -> v1.1
 
 Formbricks v1.1 includes a lot of new features and improvements. However, it also comes with a few breaking changes specifically with the environment variables. This guide will help you migrate your existing Formbricks instance to v1.1 without losing any data.
 
-## Changes in .env
-
 ### Renamed Environment Variables
+
 This was introduced because we got a lot of requests from our users for the ability to define some common environment variables at runtime itself i.e. without having to rebuild the image for the changes to take effect.
-This is now possible with v1.1. However, due to Next.JS best practices, we had to deprecate the prefix **NEXT_PUBLIC_** in the following environment variables:
+This is now possible with v1.1. However, due to Next.JS best practices, we had to deprecate the prefix **NEXT*PUBLIC*** in the following environment variables:
 
 | till v1.0                                   | v1.1                        |
 | ------------------------------------------- | --------------------------- |
-| **NEXT_PUBLIC_**EMAIL_VERIFICATION_DISABLED | EMAIL_VERIFICATION_DISABLED |
-| **NEXT_PUBLIC_**PASSWORD_RESET_DISABLED     | PASSWORD_RESET_DISABLED     |
-| **NEXT_PUBLIC_**SIGNUP_DISABLED             | SIGNUP_DISABLED             |
-| **NEXT_PUBLIC_**INVITE_DISABLED             | INVITE_DISABLED             |
-| **NEXT_PUBLIC_**PRIVACY_URL                 | PRIVACY_URL                 |
-| **NEXT_PUBLIC_**TERMS_URL                   | TERMS_URL                   |
-| **NEXT_PUBLIC_**IMPRINT_URL                 | IMPRINT_URL                 |
-| **NEXT_PUBLIC_**GITHUB_AUTH_ENABLED         | GITHUB_AUTH_ENABLED         |
-| **NEXT_PUBLIC_**GOOGLE_AUTH_ENABLED         | GOOGLE_AUTH_ENABLED         |
-| **NEXT_PUBLIC_**WEBAPP_URL                  | WEBAPP_URL                  |
-| **NEXT_PUBLIC_**IS_FORMBRICKS_CLOUD         | IS_FORMBRICKS_CLOUD         |
-| **NEXT_PUBLIC_**SURVEY_BASE_URL             | SURVEY_BASE_URL             |
+| **NEXT*PUBLIC***EMAIL_VERIFICATION_DISABLED | EMAIL_VERIFICATION_DISABLED |
+| **NEXT*PUBLIC***PASSWORD_RESET_DISABLED     | PASSWORD_RESET_DISABLED     |
+| **NEXT*PUBLIC***SIGNUP_DISABLED             | SIGNUP_DISABLED             |
+| **NEXT*PUBLIC***INVITE_DISABLED             | INVITE_DISABLED             |
+| **NEXT*PUBLIC***PRIVACY_URL                 | PRIVACY_URL                 |
+| **NEXT*PUBLIC***TERMS_URL                   | TERMS_URL                   |
+| **NEXT*PUBLIC***IMPRINT_URL                 | IMPRINT_URL                 |
+| **NEXT*PUBLIC***GITHUB_AUTH_ENABLED         | GITHUB_AUTH_ENABLED         |
+| **NEXT*PUBLIC***GOOGLE_AUTH_ENABLED         | GOOGLE_AUTH_ENABLED         |
+| **NEXT*PUBLIC***WEBAPP_URL                  | WEBAPP_URL                  |
+| **NEXT*PUBLIC***IS_FORMBRICKS_CLOUD         | IS_FORMBRICKS_CLOUD         |
+| **NEXT*PUBLIC***SURVEY_BASE_URL             | SURVEY_BASE_URL             |
 
 <Note>
-Please note that their values and the logic remains exactly the same. Only the prefix has been deprecated. The other environment variables remain the same as well.
+  Please note that their values and the logic remains exactly the same. Only the prefix has been deprecated.
+  The other environment variables remain the same as well.
 </Note>
 
 ### Deprecated Environment Variables
@@ -44,26 +64,16 @@ Please note that their values and the logic remains exactly the same. Only the p
 - **NEXT_PUBLIC_WEBAPP_URL**: Was used for the same purpose as WEBAPP_URL, but from v1.1, you can just set the WEBAPP_URL environment variable.
 - **PRISMA_GENERATE_DATAPROXY**: Was used to tell Prisma that it should generate the runtime for Dataproxy usage. But its officially deprecated now.
 
-## Helper Shell Script
+### Helper Shell Script
+
 For a seamless migration, below is a shell script for your self-hosted instance that will automatically update your environment variables to be compliant with the new naming conventions.
 
-### Building From Source
-The below script will:
-1. Create a backup of your existing .env file as `.env.old`
-2. Update the .env file to be compliant with the new naming conventions
-
-<CodeGroup title="Run the below in your terminal in the directory of your .env">
-```shell {{ title: '.env file' }}
-for var in NEXT_PUBLIC_EMAIL_VERIFICATION_DISABLED NEXT_PUBLIC_PASSWORD_RESET_DISABLED NEXT_PUBLIC_SIGNUP_DISABLED NEXT_PUBLIC_INVITE_DISABLED NEXT_PUBLIC_PRIVACY_URL NEXT_PUBLIC_TERMS_URL NEXT_PUBLIC_IMPRINT_URL NEXT_PUBLIC_GITHUB_AUTH_ENABLED NEXT_PUBLIC_GOOGLE_AUTH_ENABLED NEXT_PUBLIC_WEBAPP_URL NEXT_PUBLIC_IS_FORMBRICKS_CLOUD NEXT_PUBLIC_SURVEY_BASE_URL; do sed -i.old "s/^$var=/$(echo $var | sed 's/NEXT_PUBLIC_//')=/" .env; done; echo "Formbricks environment variables have been migrated as per v1.1! You are good to go."
-```
-</CodeGroup>
-
-
 ### Docker & Single Script Setup
 
 Now that these variables can be defined at runtime, you can append them inside your `x-environment` in the `docker-compose.yml` itself.
-For a more detailed guide on these environment variables, please refer to the [Important Runtime Variables](/docs/self-hosting/from-source#important-run-time-variables) section.
+For a more detailed guide on these environment variables, please refer to the [Important Runtime Variables](/docs/self-hosting/docker#important-run-time-variables) section.
 
+<Col>
 <CodeGroup title="docker-compose.yml">
 ```yaml {{ title: 'docker-compose.yml' }}
 version: "3.3"
@@ -77,7 +87,7 @@ x-environment: &environment
 
     # NextJS Auth
     # @see: https://next-auth.js.org/configuration/options#nextauth_secret
-    # You can use: `openssl rand -base64 32` to generate one
+    # You can use: `openssl rand -hex 32` to generate one
     NEXTAUTH_SECRET:
 
     # Set this to your public-facing URL, e.g., https://example.com
@@ -118,7 +128,7 @@ x-environment: &environment
 
     # Uncomment the below and set to 1 if you want to enable GitHub OAuth
     # GITHUB_AUTH_ENABLED:
-    # GITHUB_ID: 
+    # GITHUB_ID:
     # GITHUB_SECRET:
 
     # Uncomment the below and set to 1 if you want to enable Google OAuth
@@ -128,5 +138,5 @@ x-environment: &environment
 
 ```
 </CodeGroup>
-
-Did we miss something? Are you still facing issues migrating your app? [Join our Discord!](https://formbricks.com/discord) We'd be happy to help!
+</Col>
+Did we miss something? Are you still facing issues migrating your app? [Join our Discord!](https://formbricks.com/discord) We'd be happy to help!

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

@@ -25,7 +25,7 @@ Before you proceed, make sure you have the following:
 ## Single Command Setup
 
 Copy and paste the following command into your terminal:
-
+<Col>
 <CodeGroup title="Single Command to deploy Formbricks">
 
 ```bash
@@ -33,11 +33,11 @@ Copy and paste the following command into your terminal:
 ```
 
 </CodeGroup>
-
+</Col>
 The script will prompt you for the following information:
 
 1. **Overwriting Docker GPG Keys**: If Docker GPG keys already exist, the script will ask if you want to overwrite them.
-
+<Col>
    <CodeGroup title="Docker GPG Keys Overwrite Prompt">
 
    ```bash
@@ -53,9 +53,9 @@ The script will prompt you for the following information:
    ```
 
    </CodeGroup>
-
+</Col>
 2. **Email Address**: Provide your email address for SSL certificate registration with Let's Encrypt.
-
+<Col>
    <CodeGroup title="Email Prompt">
 
    ```bash
@@ -80,9 +80,9 @@ The script will prompt you for the following information:
    ```
 
     </CodeGroup>
-
+</Col>
 3. **Domain Name**: Enter the domain name that Traefik will use to create the SSL certificate and forward requests to Formbricks.
-
+<Col>
    <CodeGroup title="Domain Name for SSL certificate Prompt">
 
    ```bash
@@ -111,9 +111,9 @@ The script will prompt you for the following information:
    ```
 
    </CodeGroup>
-
+</Col>
 **That's it**! After running the command and providing the required information, visit the domain name you entered, and you should see the Formbricks home wizard!
-
+<Col>
 <CodeGroup title="Successfully setup Formbricks on your Ubuntu machine">
 
 ```bash
@@ -153,11 +153,11 @@ my.hosted.url.com
 ```
 
 </CodeGroup>
-
+</Col>
 ## Debugging
 
 If you encounter any issues, you can check the logs of the container with:
-
+<Col>
 <CodeGroup title="Check logs of the container">
 
 ```bash
@@ -165,17 +165,9 @@ cd formbricks && docker compose logs -f
 ```
 
 </CodeGroup>
-
+</Col>
 You can close the logs again with `CTRL + C`.
 
-<Note>
-## Customizing the Build Time variables
-
-To edit any of the variables that start with `NEXT_PUBLIC_`, you need to rebuild the Formbricks Docker from source! It is just one
-more added step and is not as much of a hassle as you think! Please check the [Building from Source](/docs/self-hosting/from-source) section!
-
-</Note>
-
 ## Troubleshooting
 
 If you encounter any issues, consider the following steps:

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

@@ -36,15 +36,16 @@ type ButtonProps = {
 
 export function Button({ variant = "primary", className, children, arrow, ...props }: ButtonProps) {
   className = clsx(
-    "inline-flex gap-0.5 justify-center overflow-hidden text-sm font-medium transition",
+    "inline-flex gap-0.5 justify-center items-center overflow-hidden font-medium transition text-center",
     variantStyles[variant],
-    className
+    className,
+    "px-5 py-2.5 text-xs"
   );
 
   let arrowIcon = (
     <ArrowIcon
       className={clsx(
-        "mt-0.5 h-5 w-5",
+        "mt-0.5 h-4 w-4",
         variant === "text" && "relative top-px",
         arrow === "left" && "-ml-1 rotate-180",
         arrow === "right" && "-mr-1"

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

@@ -1,6 +1,7 @@
 "use client";
 
-import { Button, Popover, PopoverContent, PopoverTrigger } from "@formbricks/ui";
+import { Button } from "@formbricks/ui/Button";
+import { Popover, PopoverContent, PopoverTrigger } from "@formbricks/ui/Popover";
 import { useState } from "react";
 
 export const DocsFeedback: React.FC = () => {

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

@@ -1,4 +1,4 @@
-import { Button } from "@formbricks/ui";
+import { Button } from "@formbricks/ui/Button";
 
 declare global {
   interface Window {

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

@@ -2,7 +2,7 @@
 
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-
+import { FaGithub, FaXTwitter, FaDiscord } from "react-icons/fa6";
 import { Button } from "./Button";
 import { navigation } from "./Navigation";
 
@@ -67,34 +67,6 @@ function PageNavigation() {
   );
 }
 
-function TwitterIcon(props: React.ComponentPropsWithoutRef<"svg">) {
-  return (
-    <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
-      <path d="M16.712 6.652c.01.146.01.29.01.436 0 4.449-3.267 9.579-9.242 9.579v-.003a8.963 8.963 0 0 1-4.98-1.509 6.379 6.379 0 0 0 4.807-1.396c-1.39-.027-2.608-.966-3.035-2.337.487.097.99.077 1.467-.059-1.514-.316-2.606-1.696-2.606-3.3v-.041c.45.26.956.404 1.475.42C3.18 7.454 2.74 5.486 3.602 3.947c1.65 2.104 4.083 3.382 6.695 3.517a3.446 3.446 0 0 1 .94-3.217 3.172 3.172 0 0 1 4.596.148 6.38 6.38 0 0 0 2.063-.817 3.357 3.357 0 0 1-1.428 1.861 6.283 6.283 0 0 0 1.865-.53 6.735 6.735 0 0 1-1.62 1.744Z" />
-    </svg>
-  );
-}
-
-function GitHubIcon(props: React.ComponentPropsWithoutRef<"svg">) {
-  return (
-    <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M10 1.667c-4.605 0-8.334 3.823-8.334 8.544 0 3.78 2.385 6.974 5.698 8.106.417.075.573-.182.573-.406 0-.203-.011-.875-.011-1.592-2.093.397-2.635-.522-2.802-1.002-.094-.246-.5-1.005-.854-1.207-.291-.16-.708-.556-.01-.567.656-.01 1.124.62 1.281.876.75 1.292 1.948.93 2.427.705.073-.555.291-.93.531-1.143-1.854-.213-3.791-.95-3.791-4.218 0-.929.322-1.698.854-2.296-.083-.214-.375-1.09.083-2.265 0 0 .698-.224 2.292.876a7.576 7.576 0 0 1 2.083-.288c.709 0 1.417.096 2.084.288 1.593-1.11 2.291-.875 2.291-.875.459 1.174.167 2.05.084 2.263.53.599.854 1.357.854 2.297 0 3.278-1.948 4.005-3.802 4.219.302.266.563.78.563 1.58 0 1.143-.011 2.061-.011 2.35 0 .224.156.491.573.405a8.365 8.365 0 0 0 4.11-3.116 8.707 8.707 0 0 0 1.567-4.99c0-4.721-3.73-8.545-8.334-8.545Z"
-      />
-    </svg>
-  );
-}
-
-function DiscordIcon(props: React.ComponentPropsWithoutRef<"svg">) {
-  return (
-    <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
-      <path d="M16.238 4.515a14.842 14.842 0 0 0-3.664-1.136.055.055 0 0 0-.059.027 10.35 10.35 0 0 0-.456.938 13.702 13.702 0 0 0-4.115 0 9.479 9.479 0 0 0-.464-.938.058.058 0 0 0-.058-.027c-1.266.218-2.497.6-3.664 1.136a.052.052 0 0 0-.024.02C1.4 8.023.76 11.424 1.074 14.782a.062.062 0 0 0 .024.042 14.923 14.923 0 0 0 4.494 2.272.058.058 0 0 0 .064-.02c.346-.473.654-.972.92-1.496a.057.057 0 0 0-.032-.08 9.83 9.83 0 0 1-1.404-.669.058.058 0 0 1-.029-.046.058.058 0 0 1 .023-.05c.094-.07.189-.144.279-.218a.056.056 0 0 1 .058-.008c2.946 1.345 6.135 1.345 9.046 0a.056.056 0 0 1 .059.007c.09.074.184.149.28.22a.058.058 0 0 1 .023.049.059.059 0 0 1-.028.046 9.224 9.224 0 0 1-1.405.669.058.058 0 0 0-.033.033.056.056 0 0 0 .002.047c.27.523.58 1.022.92 1.495a.056.056 0 0 0 .062.021 14.878 14.878 0 0 0 4.502-2.272.055.055 0 0 0 .016-.018.056.056 0 0 0 .008-.023c.375-3.883-.63-7.256-2.662-10.246a.046.046 0 0 0-.023-.021Zm-9.223 8.221c-.887 0-1.618-.814-1.618-1.814s.717-1.814 1.618-1.814c.908 0 1.632.821 1.618 1.814 0 1-.717 1.814-1.618 1.814Zm5.981 0c-.887 0-1.618-.814-1.618-1.814s.717-1.814 1.618-1.814c.908 0 1.632.821 1.618 1.814 0 1-.71 1.814-1.618 1.814Z" />
-    </svg>
-  );
-}
-
 function SocialLink({
   href,
   icon: Icon,
@@ -113,19 +85,21 @@ function SocialLink({
 }
 
 function SmallPrint() {
+  const currentYear = new Date().getFullYear();
+
   return (
     <div className="flex flex-col items-center justify-between gap-5 border-t border-slate-900/5 pt-8 dark:border-white/5 sm:flex-row">
       <p className="text-xs text-slate-600 dark:text-slate-400">
-        Formbricks GmbH &copy; 2023. All rights reserved.
+        Formbricks GmbH &copy; {currentYear}. All rights reserved.
       </p>
       <div className="flex gap-4">
-        <SocialLink href="https://twitter.com/formbricks" icon={TwitterIcon}>
+        <SocialLink href="https://twitter.com/formbricks" icon={FaXTwitter}>
           Follow us on Twitter
         </SocialLink>
-        <SocialLink href="https://github.com/formbricks/formbricks" icon={GitHubIcon}>
+        <SocialLink href="https://github.com/formbricks/formbricks" icon={FaGithub}>
           Follow us on GitHub
         </SocialLink>
-        <SocialLink href="https://formbricks.com/discord" icon={DiscordIcon}>
+        <SocialLink href="https://formbricks.com/discord" icon={FaDiscord}>
           Join our Discord server
         </SocialLink>
       </div>

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

@@ -1,15 +1,15 @@
 "use client";
 
-import { forwardRef } from "react";
-import Link from "next/link";
 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";
 import { ThemeToggle } from "./ThemeToggle";
-import { FooterLogo } from "@/components/shared/Logo";
-import { useMobileNavigationStore, useIsInsideMobileNavigation, MobileNavigation } from "./MobileNavigation";
 
 function TopLevelNavItem({ href, children }: { href: string; children: React.ReactNode }) {
   return (
@@ -39,7 +39,7 @@ export const Header = forwardRef<React.ElementRef<"div">, { className?: string }
       ref={ref}
       className={clsx(
         className,
-        "fixed inset-x-0 top-0 z-50 flex h-14 items-center justify-between gap-12 px-4 transition sm:px-6 lg:left-72 lg:z-30 lg:px-8 xl:left-80",
+        "fixed inset-x-0 top-0 z-50 flex h-20 items-center justify-between gap-12 px-4 transition sm:px-6 lg:left-72 lg:z-30 lg:px-8 xl:left-80",
         !isInsideMobileNavigation && "backdrop-blur-sm dark:backdrop-blur lg:left-72 xl:left-80",
         isInsideMobileNavigation
           ? "bg-white dark:bg-slate-900"
@@ -64,10 +64,9 @@ export const Header = forwardRef<React.ElementRef<"div">, { className?: string }
           <FooterLogo className="h-8" />
         </Link>
       </div>
-      <div className="flex items-center gap-5">
-        <nav className="hidden md:block">
+      <div className="flex items-center gap-6">
+        <nav className="hidden lg:block">
           <ul role="list" className="flex items-center gap-8">
-            <TopLevelNavItem href="/docs/introduction/what-is-formbricks">Documentation</TopLevelNavItem>
             <TopLevelNavItem href="https://github.com/formbricks/formbricks">
               Star us on GitHub
             </TopLevelNavItem>

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

@@ -237,6 +237,7 @@ export const navigation: Array<NavGroup> = [
     links: [
       { title: "Data Prefilling", href: "/docs/link-surveys/data-prefilling" },
       { title: "User Identification", href: "/docs/link-surveys/user-identification" },
+      { title: "Single Use Links", href: "/docs/link-surveys/single-use-links" },
     ],
   },
   {
@@ -246,7 +247,7 @@ export const navigation: Array<NavGroup> = [
       { title: "Production", href: "/docs/self-hosting/production" },
       { title: "Docker", href: "/docs/self-hosting/docker" },
       { title: "From Source", href: "/docs/self-hosting/from-source" },
-      { title: "Migration to v1.1", href: "/docs/self-hosting/migrating-to-1.1" },
+      { title: "Migration Guide", href: "/docs/self-hosting/migration-guide" },
     ],
   },
   {

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

@@ -1,4 +1,4 @@
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@formbricks/ui";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@formbricks/ui/Accordion";
 import FaqJsonLdComponent from "./faQJsonLD";
 
 const FAQ_DATA = [

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

@@ -1,4 +1,5 @@
-import { Button, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@formbricks/ui";
+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";
 
@@ -29,21 +30,21 @@ const DummyUI: React.FC = () => {
     <>
       {triggers.map((triggerEventClassId, idx) => (
         <div className="mt-2" key={idx}>
-          <div className="inline-flex items-center">
-            <p className="mr-2 w-14 text-right text-sm text-slate-800 dark:text-slate-300">
+          <div className="flex items-center gap-2">
+            <p className="mr-2 w-10 text-right text-sm text-slate-800 dark:text-slate-300">
               {idx === 0 ? "When" : "or"}
             </p>
             <Select
               value={triggerEventClassId}
               onValueChange={(eventClassId) => setTriggerEvent(idx, eventClassId)}>
-              <SelectTrigger className="w-[180px] text-slate-800 dark:border-slate-400 dark:bg-slate-700 dark:text-slate-300">
-                <SelectValue className="" />
+              <SelectTrigger className="xs:w-[180px] xs:text-base w-full p-1.5 text-xs text-slate-800 dark:border-slate-400 dark:bg-slate-700 dark:text-slate-300">
+                <SelectValue />
               </SelectTrigger>
               <SelectContent>
                 {eventClasses.map((eventClass) => (
                   <SelectItem
                     key={eventClass.id}
-                    className="px-0.5 py-1 text-slate-800 dark:bg-slate-700 dark:text-slate-300 dark:ring-slate-700"
+                    className="xs:text-base px-0.5 py-1 text-xs text-slate-800 dark:bg-slate-700 dark:text-slate-300 dark:ring-slate-700"
                     value={eventClass.id}>
                     {eventClass.name}
                   </SelectItem>
@@ -56,10 +57,10 @@ const DummyUI: React.FC = () => {
           </div>
         </div>
       ))}
-      <div className="p-3">
+      <div className="ml-4 w-fit p-3">
         <Button
           variant="secondary"
-          className="dark:bg-slate-700 dark:text-slate-200 dark:hover:bg-slate-600"
+          className="xs:text-base w-fit text-xs dark:bg-slate-700 dark:text-slate-200 dark:hover:bg-slate-600"
           onClick={() => {
             addTriggerEvent();
           }}>

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

@@ -1,17 +1,10 @@
-import {
-  Button,
-  Input,
-  Label,
-  RadioGroup,
-  RadioGroupItem,
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@formbricks/ui";
+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 Modal from "../shared/Modal";
+import { Modal } from "@formbricks/ui/Modal";
 
 interface EventDetailModalProps {
   open: boolean;
@@ -21,15 +14,15 @@ interface EventDetailModalProps {
 export const AddNoCodeEventModalDummy: React.FC<EventDetailModalProps> = ({ open, setOpen }) => {
   return (
     <Modal open={open} setOpen={setOpen} noPadding>
-      <div className="flex h-full flex-col rounded-lg bg-slate-50 dark:bg-slate-800">
-        <div className="rounded-t-lg bg-slate-100 dark:bg-slate-700">
-          <div className="flex items-center justify-between p-6">
+      <div className="flex flex-col rounded-lg bg-slate-50 dark:bg-slate-800">
+        <div className="bg-slate-90 dark:bg-slate-700">
+          <div className="p-4 sm:p-6">
             <div className="flex items-center space-x-2">
-              <div className="mr-1.5 h-6 w-6 text-slate-500">
+              <div className="h-6 w-6 text-slate-500">
                 <CursorArrowRaysIcon />
               </div>
               <div>
-                <div className="text-xl font-medium text-slate-700 dark:text-slate-300">Add Action</div>
+                <div className="text-lg font-medium text-slate-700 dark:text-slate-300">Add Action</div>
                 <div className="text-sm text-slate-500">
                   Create a new user action to display surveys when it&apos;s triggered.
                 </div>
@@ -38,74 +31,76 @@ export const AddNoCodeEventModalDummy: React.FC<EventDetailModalProps> = ({ open
           </div>
         </div>
         <form>
-          <div className="flex justify-between rounded-lg p-6">
-            <div className="space-y-4">
-              <div>
-                <Label>Select By</Label>
-                <RadioGroup className="grid grid-cols-2 gap-1 md:grid-cols-3" defaultValue="pageUrl">
-                  <div className="flex items-center space-x-2 rounded-lg border border-slate-200 p-3 dark:border-slate-500">
-                    <RadioGroupItem value="pageUrl" id="pageUrl" className="bg-slate-50" />
-                    <Label htmlFor="pageUrl" className="cursor-pointer dark:text-slate-200">
-                      Page URL
-                    </Label>
-                  </div>
-                  <div className="flex items-center space-x-2 rounded-lg bg-slate-50 p-3 dark:bg-slate-600">
-                    <RadioGroupItem disabled value="innerHtml" id="innerHtml" className="bg-slate-50" />
-                    <Label
-                      htmlFor="innerHtml"
-                      className="flex cursor-not-allowed items-center text-slate-500 dark:text-slate-400">
-                      Inner Text
-                    </Label>
-                  </div>
-                  <div className="hidden items-center space-x-2 rounded-lg bg-slate-50 p-3 dark:bg-slate-600 md:flex">
-                    <RadioGroupItem disabled value="cssSelector" id="cssSelector" className="bg-slate-50" />
-                    <Label
-                      htmlFor="cssSelector"
-                      className="flex cursor-not-allowed items-center text-slate-500">
-                      CSS Selector
-                    </Label>
-                  </div>
-                </RadioGroup>
+          <div className="space-y-4 p-4 sm:p-6">
+            <div>
+              <Label>Select By</Label>
+              <RadioGroup className="grid grid-cols-1 gap-2 sm:grid-cols-2" defaultValue="pageUrl">
+                <div className="flex items-center space-x-2 rounded-lg border border-slate-200 p-3 dark:border-slate-500">
+                  <RadioGroupItem
+                    value="pageUrl"
+                    id="pageUrl"
+                    className="flex items-center justify-center bg-slate-50">
+                    <div className="h-2 w-2 rounded-full bg-black dark:bg-white" />
+                  </RadioGroupItem>
+                  <Label htmlFor="pageUrl" className="cursor-pointer dark:text-slate-200">
+                    Page URL
+                  </Label>
+                </div>
+                <div className="flex items-center space-x-2 rounded-lg bg-slate-50 p-3 dark:bg-slate-600">
+                  <RadioGroupItem disabled value="innerHtml" id="innerHtml" className="bg-slate-50" />
+                  <Label
+                    htmlFor="innerHtml"
+                    className="flex cursor-not-allowed items-center text-slate-500 dark:text-slate-400">
+                    Inner Text
+                  </Label>
+                </div>
+                <div className="hidden items-center space-x-2 rounded-lg bg-slate-50 p-3 dark:bg-slate-600 md:flex">
+                  <RadioGroupItem disabled value="cssSelector" id="cssSelector" className="bg-slate-50" />
+                  <Label
+                    htmlFor="cssSelector"
+                    className="flex cursor-not-allowed items-center text-slate-500">
+                    CSS Selector
+                  </Label>
+                </div>
+              </RadioGroup>
+            </div>
+            <div className="space-y-2 sm:flex sm:justify-between sm:gap-x-4 sm:space-y-0">
+              <div className="sm:w-1/2">
+                <Label>Name</Label>
+                <Input placeholder="e.g. Dashboard Page View" defaultValue="Dashboard view" />
               </div>
-              <div className="grid grid-cols-2 gap-x-2">
-                <div>
-                  <Label>Name</Label>
-                  <Input placeholder="e.g. Dashboard Page View" defaultValue="Dashboard view" />
-                </div>
-                <div>
-                  <Label>Description</Label>
-                  <Input placeholder="e.g. User visited dashboard" defaultValue="User visited dashboard" />
-                </div>
+              <div className="sm:w-1/2">
+                <Label>Description</Label>
+                <Input placeholder="e.g. User visited dashboard" defaultValue="User visited dashboard" />
               </div>
-              <div className="grid w-full grid-cols-3 gap-x-8">
-                <div className="col-span-1">
-                  <Label>URL</Label>
-                  <Select defaultValue="endsWith">
-                    <SelectTrigger
-                      className="w-[110px] dark:text-slate-200 md:w-[180px]"
-                      onClick={(e) => e.preventDefault()}
-                      disabled>
-                      <SelectValue placeholder="Select match type" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="exactMatch">Exactly matches</SelectItem>
-                      <SelectItem value="contains">Contains</SelectItem>
-                      <SelectItem value="startsWith">Starts with</SelectItem>
-                      <SelectItem value="endsWith">Ends with</SelectItem>
-                      <SelectItem value="notMatch">Does not exactly match</SelectItem>
-                      <SelectItem value="notContains">Does not contain</SelectItem>
-                    </SelectContent>
-                  </Select>
-                </div>
-
-                <div className="col-span-2 flex w-full items-end">
-                  <Input type="text" defaultValue="/dashboard" />
-                </div>
+            </div>
+            <div className="space-y-2 sm:flex sm:justify-between sm:gap-x-4">
+              <div className="w-full">
+                <Label>URL</Label>
+                <Select defaultValue="endsWith">
+                  <SelectTrigger
+                    className="w-[110px] dark:text-slate-200 md:w-[180px]"
+                    onClick={(e) => e.preventDefault()}
+                    disabled>
+                    <SelectValue placeholder="Select match type" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="exactMatch">Exactly matches</SelectItem>
+                    <SelectItem value="contains">Contains</SelectItem>
+                    <SelectItem value="startsWith">Starts with</SelectItem>
+                    <SelectItem value="endsWith">Ends with</SelectItem>
+                    <SelectItem value="notMatch">Does not exactly match</SelectItem>
+                    <SelectItem value="notContains">Does not contain</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="mt-2 w-full sm:mt-0">
+                <Input type="text" defaultValue="/dashboard" />
               </div>
             </div>
           </div>
-          <div className="flex justify-end border-t border-slate-200 p-6 dark:border-slate-700">
-            <div className="flex space-x-2">
+          <div className="mt-6 flex justify-center pb-8 sm:mt-8 sm:justify-end">
+            <div className="flex space-x-4">
               <Button
                 variant="minimal"
                 onClick={(e) => {

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

@@ -1,9 +1,9 @@
-import type { CTAQuestion } from "@formbricks/types/questions";
+import { TSurveyCTAQuestion } from "@formbricks/types/surveys";
 import Headline from "./Headline";
 import HtmlBody from "./HtmlBody";
 
 interface CTAQuestionProps {
-  question: CTAQuestion;
+  question: TSurveyCTAQuestion;
   onSubmit: (data: { [x: string]: any }) => void;
   lastQuestion: boolean;
   brandColor: string;

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

@@ -2,7 +2,7 @@
 import React, { useEffect, useState } from "react";
 import PreviewSurvey from "./PreviewSurvey";
 import { findTemplateByName } from "./templates";
-import type { Template } from "@formbricks/types/templates";
+import { TTemplate } from "@formbricks/types/templates";
 
 interface DemoPreviewProps {
   template: string;
@@ -10,7 +10,7 @@ interface DemoPreviewProps {
 
 const DemoPreview: React.FC<DemoPreviewProps> = ({ template }) => {
   const [activeQuestionId, setActiveQuestionId] = useState<string | null>(null);
-  const selectedTemplate: Template | undefined = findTemplateByName(template);
+  const selectedTemplate: TTemplate | undefined = findTemplateByName(template);
 
   useEffect(() => {
     if (selectedTemplate) {

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

@@ -1,11 +1,11 @@
-import type { Template } from "@formbricks/types/templates";
+import { TTemplate } from "@formbricks/types/templates";
 import { useEffect, useState } from "react";
 import PreviewSurvey from "./PreviewSurvey";
 import TemplateList from "./TemplateList";
 import { templates } from "./templates";
 
 export default function SurveyTemplatesPage({}) {
-  const [activeTemplate, setActiveTemplate] = useState<Template | null>(null);
+  const [activeTemplate, setActiveTemplate] = useState<TTemplate | null>(null);
   const [activeQuestionId, setActiveQuestionId] = useState<string | null>(null);
 
   useEffect(() => {

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

@@ -1,11 +1,11 @@
 import { useState, useEffect } from "react";
 import { cn } from "@formbricks/lib/cn";
-import type { MultipleChoiceMultiQuestion } from "@formbricks/types/questions";
+import { TSurveyMultipleChoiceMultiQuestion } from "@formbricks/types/surveys";
 import Headline from "./Headline";
 import Subheader from "./Subheader";
 
 interface MultipleChoiceMultiProps {
-  question: MultipleChoiceMultiQuestion;
+  question: TSurveyMultipleChoiceMultiQuestion;
   onSubmit: (data: { [x: string]: any }) => void;
   lastQuestion: boolean;
   brandColor: string;

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

@@ -1,11 +1,11 @@
 import { cn } from "@formbricks/lib/cn";
-import type { MultipleChoiceSingleQuestion } from "@formbricks/types/questions";
+import { TSurveyMultipleChoiceSingleQuestion } from "@formbricks/types/surveys";
 import { useState } from "react";
 import Headline from "./Headline";
 import Subheader from "./Subheader";
 
 interface MultipleChoiceSingleProps {
-  question: MultipleChoiceSingleQuestion;
+  question: TSurveyMultipleChoiceSingleQuestion;
   onSubmit: (data: { [x: string]: any }) => void;
   lastQuestion: boolean;
   brandColor: string;

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

@@ -1,11 +1,11 @@
 import { useState } from "react";
 import { cn } from "@formbricks/lib/cn";
-import type { NPSQuestion } from "@formbricks/types/questions";
+import { TSurveyNPSQuestion } from "@formbricks/types/surveys";
 import Headline from "./Headline";
 import Subheader from "./Subheader";
 
 interface NPSQuestionProps {
-  question: NPSQuestion;
+  question: TSurveyNPSQuestion;
   onSubmit: (data: { [x: string]: any }) => void;
   lastQuestion: boolean;
   brandColor: string;

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

@@ -1,10 +1,10 @@
-import type { OpenTextQuestion } from "@formbricks/types/questions";
+import { TSurveyOpenTextQuestion } from "@formbricks/types/surveys";
 import { useState } from "react";
 import Headline from "./Headline";
 import Subheader from "./Subheader";
 
 interface OpenTextQuestionProps {
-  question: OpenTextQuestion;
+  question: TSurveyOpenTextQuestion;
   onSubmit: (data: { [x: string]: any }) => void;
   lastQuestion: boolean;
   brandColor: string;

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

@@ -1,15 +1,14 @@
 import { useState } from "react";
 import Modal from "./Modal";
 import QuestionConditional from "./QuestionConditional";
-import type { Question } from "@formbricks/types/questions";
-import { Survey } from "@formbricks/types/surveys";
+import { TSurveyQuestion, TSurvey } from "@formbricks/types/surveys";
 import ThankYouCard from "./ThankYouCard";
 
 interface PreviewSurveyProps {
-  localSurvey?: Survey;
+  localSurvey?: TSurvey;
   setActiveQuestionId: (id: string | null) => void;
   activeQuestionId?: string | null;
-  questions: Question[];
+  questions: TSurveyQuestion[];
   brandColor: string;
 }
 

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

@@ -1,4 +1,4 @@
-import { QuestionType, type Question } from "@formbricks/types/questions";
+import { TSurveyQuestion, TSurveyQuestionType } from "@formbricks/types/surveys";
 import OpenTextQuestion from "./OpenTextQuestion";
 import MultipleChoiceSingleQuestion from "./MultipleChoiceSingleQuestion";
 import MultipleChoiceMultiQuestion from "./MultipleChoiceMultiQuestion";
@@ -7,7 +7,7 @@ import CTAQuestion from "./CTAQuestion";
 import RatingQuestion from "./RatingQuestion";
 
 interface QuestionConditionalProps {
-  question: Question;
+  question: TSurveyQuestion;
   onSubmit: (data: { [x: string]: any }) => void;
   lastQuestion: boolean;
   brandColor: string;
@@ -19,42 +19,42 @@ export default function QuestionConditional({
   lastQuestion,
   brandColor,
 }: QuestionConditionalProps) {
-  return question.type === QuestionType.OpenText ? (
+  return question.type === TSurveyQuestionType.OpenText ? (
     <OpenTextQuestion
       question={question}
       onSubmit={onSubmit}
       lastQuestion={lastQuestion}
       brandColor={brandColor}
     />
-  ) : question.type === QuestionType.MultipleChoiceSingle ? (
+  ) : question.type === TSurveyQuestionType.MultipleChoiceSingle ? (
     <MultipleChoiceSingleQuestion
       question={question}
       onSubmit={onSubmit}
       lastQuestion={lastQuestion}
       brandColor={brandColor}
     />
-  ) : question.type === QuestionType.MultipleChoiceMulti ? (
+  ) : question.type === TSurveyQuestionType.MultipleChoiceMulti ? (
     <MultipleChoiceMultiQuestion
       question={question}
       onSubmit={onSubmit}
       lastQuestion={lastQuestion}
       brandColor={brandColor}
     />
-  ) : question.type === QuestionType.NPS ? (
+  ) : question.type === TSurveyQuestionType.NPS ? (
     <NPSQuestion
       question={question}
       onSubmit={onSubmit}
       lastQuestion={lastQuestion}
       brandColor={brandColor}
     />
-  ) : question.type === QuestionType.CTA ? (
+  ) : question.type === TSurveyQuestionType.CTA ? (
     <CTAQuestion
       question={question}
       onSubmit={onSubmit}
       lastQuestion={lastQuestion}
       brandColor={brandColor}
     />
-  ) : question.type === QuestionType.Rating ? (
+  ) : question.type === TSurveyQuestionType.Rating ? (
     <RatingQuestion
       question={question}
       onSubmit={onSubmit}

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

@@ -1,11 +1,11 @@
-import type { RatingQuestion } from "@formbricks/types/questions";
+import { TSurveyRatingQuestion } from "@formbricks/types/surveys";
 import { useState } from "react";
 import { cn } from "@formbricks/lib/cn";
 import Headline from "./Headline";
 import Subheader from "./Subheader";
 
 interface RatingQuestionProps {
-  question: RatingQuestion;
+  question: TSurveyRatingQuestion;
   onSubmit: (data: { [x: string]: any }) => void;
   lastQuestion: boolean;
   brandColor: string;

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

@@ -1,11 +1,11 @@
-import type { Template } from "@formbricks/types/templates";
+import { TTemplate } from "@formbricks/types/templates";
 import { useEffect, useState } from "react";
 import { cn } from "@formbricks/lib/cn";
 import { templates } from "./templates";
 
 type TemplateList = {
-  onTemplateClick: (template: Template) => void;
-  activeTemplate: Template | null;
+  onTemplateClick: (template: TTemplate) => void;
+  activeTemplate: TTemplate | null;
 };
 
 const ALL_CATEGORY_NAME = "All";
@@ -50,7 +50,7 @@ export default function TemplateList({ onTemplateClick, activeTemplate }: Templa
       <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
         {templates
           .filter((template) => selectedFilter === ALL_CATEGORY_NAME || template.category === selectedFilter)
-          .map((template: Template) => (
+          .map((template: TTemplate) => (
             <button
               type="button"
               onClick={() => {

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

@@ -20,11 +20,11 @@ import {
   TaskListSearchIcon,
   UserSearchGlasIcon,
   VideoTabletAdjustIcon,
-} from "@formbricks/ui";
+} from "@formbricks/ui/icons";
 
 import { createId } from "@paralleldrive/cuid2";
-import type { Template } from "@formbricks/types/templates";
-import { QuestionType } from "@formbricks/types/questions";
+import { TTemplate } from "@formbricks/types/templates";
+import { TSurveyQuestionType } from "@formbricks/types/surveys";
 
 const thankYouCardDefault = {
   enabled: true,
@@ -32,7 +32,7 @@ const thankYouCardDefault = {
   subheader: "We appreciate your feedback.",
 };
 
-export const customSurvey: Template = {
+export const customSurvey: TTemplate = {
   name: "Start from scratch",
   description: "Create a survey without template.",
   icon: null,
@@ -41,19 +41,27 @@ export const customSurvey: Template = {
     questions: [
       {
         id: createId(),
-        type: QuestionType.OpenText,
+        type: TSurveyQuestionType.OpenText,
         headline: "Custom Survey",
         subheader: "This is an example survey.",
         placeholder: "Type your answer here...",
+        inputType: "text",
         longAnswer: true,
         required: true,
       },
     ],
     thankYouCard: thankYouCardDefault,
+    welcomeCard: {
+      enabled: false,
+      timeToFinish: false,
+    },
+    hiddenFields: {
+      enabled: false,
+    },
   },
 };
 
-export const templates: Template[] = [
+export const templates: TTemplate[] = [
   {
     name: "Product Market Fit (Superhuman)",
     icon: PMFIcon,
@@ -65,7 +73,7 @@ export const templates: Template[] = [
       questions: [
         {
           id: createId(),
-          type: QuestionType.MultipleChoiceSingle,
+          type: TSurveyQuestionType.MultipleChoiceSingle,
           headline: "How disappointed would you be if you could no longer use Formbricks?",
           subheader: "Please select one of the following options:",
           required: true,
@@ -87,7 +95,7 @@ export const templates: Template[] = [
         },
         {
           id: createId(),
-          type: QuestionType.MultipleChoiceSingle,
+          type: TSurveyQuestionType.MultipleChoiceSingle,
           headline: "What is your role?",
           subheader: "Please select one of the following options:",
           required: true,
@@ -117,28 +125,38 @@ export const templates: Template[] = [
         },
         {
           id: createId(),
-          type: QuestionType.OpenText,
+          type: TSurveyQuestionType.OpenText,
           headline: "What type of people do you think would most benefit from Formbricks?",
+          inputType: "text",
           longAnswer: true,
           required: true,
         },
         {
           id: createId(),
-          type: QuestionType.OpenText,
+          type: TSurveyQuestionType.OpenText,
           headline: "What is the main benefit your receive from Formbricks?",
+          inputType: "text",
           longAnswer: true,
           required: true,
         },
         {
           id: createId(),
-          type: QuestionType.OpenText,
+          type: TSurveyQuestionType.OpenText,
           headline: "How can we improve our service for you?",
+          inputType: "text",
           subheader: "Please be as specific as possible.",
           longAnswer: true,
           required: true,
         },
       ],
       thankYouCard: thankYouCardDefault,
+      welcomeCard: {
+        enabled: false,
+        timeToFinish: false,
+      },
+      hiddenFields: {
+        enabled: false,
+      },
     },
   },
 
@@ -152,7 +170,7 @@ export const templates: Template[] = [
       questions: [
         {
           id: createId(),
-          type: QuestionType.MultipleChoiceSingle,
+          type: TSurveyQuestionType.MultipleChoiceSingle,
           headline: "What is your role?",
           subheader: "Please select one of the following options:",
           required: true,
@@ -182,7 +200,7 @@ export const templates: Template[] = [
         },
         {
           id: createId(),
-          type: QuestionType.MultipleChoiceSingle,
+          type: TSurveyQuestionType.MultipleChoiceSingle,
           headline: "What's your company size?",
           subheader: "Please select one of the following options:",
           required: true,
@@ -212,7 +230,7 @@ export const templates: Template[] = [
         },
         {
           id: createId(),
-          type: QuestionType.MultipleChoiceSingle,
+          type: TSurveyQuestionType.MultipleChoiceSingle,
           headline: "How did you hear about us first?",
           subheader: "Please select one of the following options:",
           required: true,
@@ -242,6 +260,13 @@ export const templates: Template[] = [
         },
       ],
       thankYouCard: thankYouCardDefault,
+      welcomeCard: {
+        enabled: false,
+        timeToFinish: false,
+      },
+      hiddenFields: {
+        enabled: false,
+      },
     },
   },
   {
@@ -254,7 +279,7 @@ export const templates: Template[] = [
       questions: [
         {
           id: createId(),
-          type: QuestionType.MultipleChoiceSingle,
+          type: TSurveyQuestionType.MultipleChoiceSingle,
           headline: "What do you value most about our service?",
           subheader: "Please select one of the following options:",
           required: true,
@@ -280,7 +305,7 @@ export const templates: Template[] = [
         },
         {
           id: createId(),
-          type: QuestionType.MultipleChoiceSingle,
+          type: TSurveyQuestionType.MultipleChoiceSingle,
           headline: "What should we improve on?",
           subheader: "Please select one of the following options:",
           required: true,
@@ -306,14 +331,22 @@ export const templates: Template[] = [
         },
         {
           id: createId(),
-          type: QuestionType.OpenText,
+          type: TSurveyQuestionType.OpenText,
           headline: "Would you like to add something?",
           subheader: "Feel free to speak your mind, we do too.",
+          inputType: "text",
           longAnswer: true,
           required: false,
         },
       ],
       thankYouCard: thankYouCardDefault,
+      welcomeCard: {
+        enabled: false,
+        timeToFinish: false,
+      },
+      hiddenFields: {
+        enabled: false,
+      },
     },
   },
   {
@@ -326,7 +359,7 @@ export const templates: Template[] = [
       questions: [
         {
           id: createId(),
-          type: QuestionType.MultipleChoiceSingle,
+          type: TSurveyQuestionType.MultipleChoiceSingle,
           headline: "How did you hear about us first?",
           subheader: "Please select one of the following options:",
           required: true,
@@ -356,6 +389,13 @@ export const templates: Template[] = [
         },
       ],
       thankYouCard: thankYouCardDefault,
+      welcomeCard: {
+        enabled: false,
+        timeToFinish: false,
+      },
+      hiddenFields: {
+        enabled: false,
+      },
     },
   },
   {
@@ -368,7 +408,7 @@ export const templates: Template[] = [
       questions: [
         {
           id: createId(),
-          type: QuestionType.MultipleChoiceSingle,
+          type: TSurveyQuestionType.MultipleChoiceSingle,
           headline: "Why did you cancel your subscription?",
           subheader: "We're sorry to see you leave. Please help us do better:",
           required: true,
@@ -398,14 +438,22 @@ export const templates: Template[] = [
         },
         {
           id: createId(),
-          type: QuestionType.OpenText,
+          type: TSurveyQuestionType.OpenText,
           headline: "How can we win you back?",
           subheader: "Feel free to speak your mind, we do too.",
+          inputType: "text",
           longAnswer: true,
           required: false,
         },
       ],
       thankYouCard: thankYouCardDefault,
+      welcomeCard: {
+        enabled: false,
+        timeToFinish: false,
+      },
+      hiddenFields: {
+        enabled: false,
+      },
     },
   },
   {
@@ -418,7 +466,7 @@ export const templates: Template[] = [
       questions: [
         {
           id: createId(),
-          type: QuestionType.MultipleChoiceSingle,
+          type: TSurveyQuestionType.MultipleChoiceSingle,
           headline: "Why did you stop your trial?",
           subheader: "Help us understand you better:",
           required: true,
@@ -448,21 +496,30 @@ export const templates: Template[] = [
         },
         {
           id: createId(),
-          type: QuestionType.OpenText,
+          type: TSurveyQuestionType.OpenText,
           headline: "Any details to share?",
+          inputType: "text",
           longAnswer: true,
           required: false,
         },
         {
           id: createId(),
-          type: QuestionType.OpenText,
+          type: TSurveyQuestionType.OpenText,
           headline: "How are you solving your problem instead?",
+          inputType: "text",
           subheader: "Please name alternative tools:",
           longAnswer: true,
           required: false,
         },
       ],
       thankYouCard: thankYouCardDefault,
+      welcomeCard: {
+        enabled: false,
+        timeToFinish: false,
+      },
+      hiddenFields: {
+        enabled: false,
+      },
     },
   },
   {
@@ -475,7 +532,7 @@ export const templates: Template[] = [
       questions: [
         {
           id: createId(),
-          type: QuestionType.MultipleChoiceSingle,
+          type: TSurveyQuestionType.MultipleChoiceSingle,
           headline: "How easy was it to change your plan?",
           required: true,
           shuffleOption: "none",
@@ -504,7 +561,7 @@ export const templates: Template[] = [
         },
         {
           id: createId(),
-          type: QuestionType.MultipleChoiceSingle,
+          type: TSurveyQuestionType.MultipleChoiceSingle,
           headline: "Is the pricing information easy to understand?",
           required: true,
           shuffleOption: "none",
@@ -525,6 +582,13 @@ export const templates: Template[] = [
         },
       ],
       thankYouCard: thankYouCardDefault,
+      welcomeCard: {
+        enabled: false,
+        timeToFinish: false,
+      },
+      hiddenFields: {
+        enabled: false,
+      },
     },
   },
   {
@@ -537,7 +601,7 @@ export const templates: Template[] = [
       questions: [
         {
           id: createId(),
-          type: QuestionType.MultipleChoiceSingle,
+          type: TSurveyQuestionType.MultipleChoiceSingle,
           headline: "Were you able to accomplish what you came here to do today?",
           required: true,
           shuffleOption: "none",
@@ -558,7 +622,7 @@ export const templates: Template[] = [
         },
         {
           id: createId(),
-          type: QuestionType.Rating,
+          type: TSurveyQuestionType.Rating,
           headline: "How easy was it to achieve your goal?",
           required: true,
           lowerLabel: "Very difficult",
@@ -568,13 +632,21 @@ export const templates: Template[] = [
         },
         {
           id: createId(),
-          type: QuestionType.OpenText,
+          type: TSurveyQuestionType.OpenText,
           headline: "What did you come here to do today?",
+          inputType: "text",
           longAnswer: true,
           required: false,
         },
       ],
       thankYouCard: thankYouCardDefault,
+      welcomeCard: {
+        enabled: false,
+        timeToFinish: false,
+      },
+      hiddenFields: {
+        enabled: false,
+      },
     },
   },
   {
@@ -588,7 +660,7 @@ export const templates: Template[] = [
       questions: [
         {
           id: createId(),
-          type: QuestionType.MultipleChoiceSingle,
+          type: TSurveyQuestionType.MultipleChoiceSingle,
           headline: "What's your primary goal for using Formbricks?",
           required: true,
           shuffleOption: "none",
@@ -613,6 +685,13 @@ export const templates: Template[] = [
         },
       ],
       thankYouCard: thankYouCardDefault,
+      welcomeCard: {
+        enabled: false,
+        timeToFinish: false,
+      },
+      hiddenFields: {
+        enabled: false,
+      },
     },
   },
   {
@@ -625,7 +704,7 @@ export const templates: Template[] = [
       questions: [
         {
           id: createId(),
-          type: QuestionType.Rating,
+          type: TSurveyQuestionType.Rating,
           headline: "How easy was it to achieve your goal?",
           required: true,
           lowerLabel: "Very difficult",
@@ -635,14 +714,22 @@ export const templates: Template[] = [
         },
         {
           id: createId(),
-          type: QuestionType.OpenText,
+          type: TSurveyQuestionType.OpenText,
           headline: "Wanna add something?",
+          inputType: "text",
           subheader: "This really helps us do better!",
           longAnswer: true,
           required: false,
         },
       ],
       thankYouCard: thankYouCardDefault,
+      welcomeCard: {
+        enabled: false,
+        timeToFinish: false,
+      },
+      hiddenFields: {
+        enabled: false,
+      },
     },
   },
   {
@@ -655,7 +742,7 @@ export const templates: Template[] = [
       questions: [
         {
           id: createId(),
-          type: QuestionType.Rating,
+          type: TSurveyQuestionType.Rating,
           headline: "How important is this feature for you?",
           required: true,
           lowerLabel: "Not important",
@@ -665,6 +752,13 @@ export const templates: Template[] = [
         },
       ],
       thankYouCard: thankYouCardDefault,
+      welcomeCard: {
+        enabled: false,
+        timeToFinish: false,
+      },
+      hiddenFields: {
+        enabled: false,
+      },
     },
   },
   {
@@ -678,7 +772,7 @@ export const templates: Template[] = [
       questions: [
         {
           id: createId(),
-          type: QuestionType.MultipleChoiceSingle,
+          type: TSurveyQuestionType.MultipleChoiceSingle,
           headline: "How disappointed would you be if you could no longer use Formbricks?",
           subheader: "Please select one of the following options:",
           required: true,
@@ -700,14 +794,22 @@ export const templates: Template[] = [
         },
         {
           id: createId(),
-          type: QuestionType.OpenText,
+          type: TSurveyQuestionType.OpenText,
           headline: "How can we improve our service for you?",
+          inputType: "text",
           subheader: "Please be as specific as possible.",
           longAnswer: true,
           required: true,
         },
       ],
       thankYouCard: thankYouCardDefault,
+      welcomeCard: {
+        enabled: false,
+        timeToFinish: false,
+      },
+      hiddenFields: {
+        enabled: false,
+      },
     },
   },
   {
@@ -720,7 +822,7 @@ export const templates: Template[] = [
       questions: [
         {
           id: createId(),
-          type: QuestionType.MultipleChoiceSingle,
+          type: TSurveyQuestionType.MultipleChoiceSingle,
           headline: "What's on your mind, boss?",
           subheader: "Thanks for sharing. We'll get back to you asap.",
           required: true,
@@ -738,13 +840,21 @@ export const templates: Template[] = [
         },
         {
           id: createId(),
-          type: QuestionType.OpenText,
+          type: TSurveyQuestionType.OpenText,
           headline: "Give us the juicy details:",
+          inputType: "text",
           longAnswer: true,
           required: true,
         },
       ],
       thankYouCard: thankYouCardDefault,
+      welcomeCard: {
+        enabled: false,
+        timeToFinish: false,
+      },
+      hiddenFields: {
+        enabled: false,
+      },
     },
   },
   {
@@ -757,7 +867,7 @@ export const templates: Template[] = [
       questions: [
         {
           id: createId(),
-          type: QuestionType.MultipleChoiceSingle,
+          type: TSurveyQuestionType.MultipleChoiceSingle,
           headline: "How easy was it to set this integration up?",
           required: true,
           shuffleOption: "none",
@@ -786,14 +896,22 @@ export const templates: Template[] = [
         },
         {
           id: createId(),
-          type: QuestionType.OpenText,
+          type: TSurveyQuestionType.OpenText,
           headline: "Which product would you like to integrate next?",
+          inputType: "text",
           subheader: "We keep building integrations. Yours can be next:",
           longAnswer: true,
           required: false,
         },
       ],
       thankYouCard: thankYouCardDefault,
+      welcomeCard: {
+        enabled: false,
+        timeToFinish: false,
+      },
+      hiddenFields: {
+        enabled: false,
+      },
     },
   },
   {
@@ -806,7 +924,7 @@ export const templates: Template[] = [
       questions: [
         {
           id: createId(),
-          type: QuestionType.MultipleChoiceSingle,
+          type: TSurveyQuestionType.MultipleChoiceSingle,
           headline: "Which other tools are you using?",
           required: true,
           shuffleOption: "none",
@@ -835,13 +953,21 @@ export const templates: Template[] = [
         },
         {
           id: createId(),
-          type: QuestionType.OpenText,
+          type: TSurveyQuestionType.OpenText,
           headline: "If you chose other, please clarify:",
+          inputType: "text",
           longAnswer: true,
           required: false,
         },
       ],
       thankYouCard: thankYouCardDefault,
+      welcomeCard: {
+        enabled: false,
+        timeToFinish: false,
+      },
+      hiddenFields: {
+        enabled: false,
+      },
     },
   },
   {
@@ -854,7 +980,7 @@ export const templates: Template[] = [
       questions: [
         {
           id: createId(),
-          type: QuestionType.MultipleChoiceSingle,
+          type: TSurveyQuestionType.MultipleChoiceSingle,
           headline: "Was this page helpful?",
           required: true,
           shuffleOption: "none",
@@ -871,20 +997,29 @@ export const templates: Template[] = [
         },
         {
           id: createId(),
-          type: QuestionType.OpenText,
+          type: TSurveyQuestionType.OpenText,
           headline: "Please elaborate:",
+          inputType: "text",
           longAnswer: true,
           required: false,
         },
         {
           id: createId(),
-          type: QuestionType.OpenText,
+          type: TSurveyQuestionType.OpenText,
+          inputType: "url",
           headline: "Page URL",
           longAnswer: true,
           required: false,
         },
       ],
       thankYouCard: thankYouCardDefault,
+      welcomeCard: {
+        enabled: false,
+        timeToFinish: false,
+      },
+      hiddenFields: {
+        enabled: false,
+      },
     },
   },
   {
@@ -897,7 +1032,7 @@ export const templates: Template[] = [
       questions: [
         {
           id: createId(),
-          type: QuestionType.CTA,
+          type: TSurveyQuestionType.CTA,
           headline: "Do you have 15 min to talk to us? 🙏",
           html: "You're one of our power users. We would love to interview you briefly!",
           buttonLabel: "Book interview",
@@ -908,6 +1043,13 @@ export const templates: Template[] = [
         },
       ],
       thankYouCard: thankYouCardDefault,
+      welcomeCard: {
+        enabled: false,
+        timeToFinish: false,
+      },
+      hiddenFields: {
+        enabled: false,
+      },
     },
   },
   {
@@ -920,7 +1062,7 @@ export const templates: Template[] = [
       questions: [
         {
           id: createId(),
-          type: QuestionType.CTA,
+          type: TSurveyQuestionType.CTA,
           headline: "You're one of our most valued customers! Please write a review for us.",
           buttonLabel: "Write review",
           buttonUrl: "https://formbricks.com/github",
@@ -929,6 +1071,13 @@ export const templates: Template[] = [
         },
       ],
       thankYouCard: thankYouCardDefault,
+      welcomeCard: {
+        enabled: false,
+        timeToFinish: false,
+      },
+      hiddenFields: {
+        enabled: false,
+      },
     },
   },
   {
@@ -941,7 +1090,7 @@ export const templates: Template[] = [
       questions: [
         {
           id: createId(),
-          type: QuestionType.NPS,
+          type: TSurveyQuestionType.NPS,
           headline: "How likely are you to recommend Formbricks to a friend or colleague?",
           required: false,
           lowerLabel: "Not likely",
@@ -949,6 +1098,13 @@ export const templates: Template[] = [
         },
       ],
       thankYouCard: thankYouCardDefault,
+      welcomeCard: {
+        enabled: false,
+        timeToFinish: false,
+      },
+      hiddenFields: {
+        enabled: false,
+      },
     },
   },
   {
@@ -961,7 +1117,7 @@ export const templates: Template[] = [
       questions: [
         {
           id: createId(),
-          type: QuestionType.MultipleChoiceSingle,
+          type: TSurveyQuestionType.MultipleChoiceSingle,
           headline: "How many hours does your team save per week by using Formbricks?",
           required: true,
           shuffleOption: "none",
@@ -986,6 +1142,13 @@ export const templates: Template[] = [
         },
       ],
       thankYouCard: thankYouCardDefault,
+      welcomeCard: {
+        enabled: false,
+        timeToFinish: false,
+      },
+      hiddenFields: {
+        enabled: false,
+      },
     },
   },
   {
@@ -998,7 +1161,7 @@ export const templates: Template[] = [
       questions: [
         {
           id: createId(),
-          type: QuestionType.Rating,
+          type: TSurveyQuestionType.Rating,
           headline: "How satisfied are you with the features of Formbricks?",
           required: true,
           lowerLabel: "Not satisfied",
@@ -1008,13 +1171,21 @@ export const templates: Template[] = [
         },
         {
           id: createId(),
-          type: QuestionType.OpenText,
+          type: TSurveyQuestionType.OpenText,
           headline: "What's the #1 thing you'd like to change in Formbricks?",
+          inputType: "text",
           longAnswer: true,
           required: false,
         },
       ],
       thankYouCard: thankYouCardDefault,
+      welcomeCard: {
+        enabled: false,
+        timeToFinish: false,
+      },
+      hiddenFields: {
+        enabled: false,
+      },
     },
   },
   {
@@ -1027,7 +1198,7 @@ export const templates: Template[] = [
       questions: [
         {
           id: createId(),
-          type: QuestionType.Rating,
+          type: TSurveyQuestionType.Rating,
           headline: "How easy was it to achieve ... ?",
           required: true,
           lowerLabel: "Not easy",
@@ -1037,13 +1208,21 @@ export const templates: Template[] = [
         },
         {
           id: createId(),
-          type: QuestionType.OpenText,
+          type: TSurveyQuestionType.OpenText,
           headline: "What is one thing we could do better?",
+          inputType: "text",
           longAnswer: true,
           required: false,
         },
       ],
       thankYouCard: thankYouCardDefault,
+      welcomeCard: {
+        enabled: false,
+        timeToFinish: false,
+      },
+      hiddenFields: {
+        enabled: false,
+      },
     },
   },
   {
@@ -1056,7 +1235,7 @@ export const templates: Template[] = [
       questions: [
         {
           id: createId(),
-          type: QuestionType.MultipleChoiceSingle,
+          type: TSurveyQuestionType.MultipleChoiceSingle,
           headline: "Do you have all the info you need to give Formbricks a try?",
           required: true,
           shuffleOption: "none",
@@ -1077,14 +1256,15 @@ export const templates: Template[] = [
         },
         {
           id: createId(),
-          type: QuestionType.OpenText,
+          type: TSurveyQuestionType.OpenText,
           headline: "What’s missing or unclear to you about Formbricks?",
+          inputType: "text",
           longAnswer: true,
           required: false,
         },
         {
           id: createId(),
-          type: QuestionType.CTA,
+          type: TSurveyQuestionType.CTA,
           headline: "Thanks for your answer! Get 25% off your first 6 months:",
           required: false,
           buttonLabel: "Get discount",
@@ -1093,10 +1273,17 @@ export const templates: Template[] = [
         },
       ],
       thankYouCard: thankYouCardDefault,
+      welcomeCard: {
+        enabled: false,
+        timeToFinish: false,
+      },
+      hiddenFields: {
+        enabled: false,
+      },
     },
   },
 ];
 
-export const findTemplateByName = (name: string): Template | undefined => {
+export const findTemplateByName = (name: string): TTemplate | undefined => {
   return templates.find((template) => template.name === name);
 };

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

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

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

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

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

@@ -23,13 +23,7 @@ export const GitHubSponsorship: React.FC = () => {
           height={100}
           className="mr-12 hidden dark:block md:mr-4"
         /> */}
-        <Image
-          src={HackIconGold}
-          alt="Hacktober Icon Gold"
-          width={100}
-          height={100}
-          className="mr-12 md:mr-4"
-        />
+        <Image src={HackIconGold} alt="Hacktober Icon Gold" width={100} className="mr-12 md:mr-4" />
       </div>
       <h2 className="mt-4 text-2xl font-bold tracking-tight text-slate-800 dark:text-slate-200 lg:text-2xl">
         The FormTribe goes Hacktoberfest 🥨

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

@@ -6,7 +6,7 @@ import CrowdLogoLight from "@/images/clients/crowd-logo-light.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";
+import { Button } from "@formbricks/ui/Button";
 import { ChevronRightIcon } from "@heroicons/react/24/outline";
 import { usePlausible } from "next-plausible";
 import Image from "next/image";
@@ -22,7 +22,7 @@ export const Hero: React.FC = ({}) => {
         <a
           href="https://formbricks.com/formtribe"
           target="_blank"
-          className="border-brand-dark animate-bounce rounded-full border px-4 py-1.5 text-sm text-slate-500 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800">
+          className="border-brand-dark xs:text-sm animate-bounce rounded-full border px-4 py-1.5 text-xs text-slate-500 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800">
           The FormTribe Hackathon is on 🔥
           <ChevronRightIcon className="inline h-5 w-5 text-slate-300" />
         </a>

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

@@ -1,6 +1,6 @@
-import { useEffect, useRef, useState } from "react";
 import type { LottiePlayer } from "lottie-web";
 import Image from "next/image";
+import { useEffect, useRef, useState } from "react";
 
 export const HeroAnimation: React.FC<any> = ({ fallbackImage, ...props }) => {
   const [loaded, setLoaded] = useState(false);
@@ -18,7 +18,6 @@ export const HeroAnimation: React.FC<any> = ({ fallbackImage, ...props }) => {
         renderer: "svg",
         loop: true,
         autoplay: true,
-        // path to your animation file, place it inside public folder
         path: "/animations/opensource-xm-platform-formbricks.json",
       });
 
@@ -36,11 +35,9 @@ export const HeroAnimation: React.FC<any> = ({ fallbackImage, ...props }) => {
       {!loaded && (
         <div className="absolute inset-0">
           <Image
+            priority
             src={fallbackImage}
             alt="Fallback Image"
-            layout="fill"
-            objectFit="cover"
-            objectPosition="center"
             className="transition-opacity duration-300"
             style={{ opacity: loaded ? 0 : 1 }}
           />

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

@@ -49,7 +49,7 @@ export const Highlights: React.FC = ({}) => {
             </div>
             <div className="pb-8 md:pb-0">
               <h2 className="xs:text-3xl text-2xl font-bold leading-7 tracking-tight text-slate-800 dark:text-slate-100 sm:text-3xl">
-                Dont&apos; ‘Spray and pray’.
+                Don&apos;t ‘Spray and pray’.
                 <br />
                 <span className="font-light">Pre-segment granularly.</span>
               </h2>

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

@@ -0,0 +1,44 @@
+import { Button } from "@formbricks/ui/Button";
+import { ArrowUpIcon } from "@heroicons/react/24/solid";
+import throttle from "lodash/throttle";
+import { useCallback, useEffect, useState } from "react";
+
+const ScrollToTopButton = () => {
+  const [visible, setVisible] = useState(false);
+
+  const scrollToTop = useCallback(() => {
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth",
+    });
+  }, []);
+
+  useEffect(() => {
+    const toggleVisible = () => {
+      const scrolled = document.documentElement.scrollTop;
+      if (scrolled > 500) {
+        setVisible(true);
+      } else if (scrolled <= 500) {
+        setVisible(false);
+      }
+    };
+
+    const throttledToggleVisible = throttle(toggleVisible, 200);
+
+    window.addEventListener("scroll", throttledToggleVisible);
+
+    return () => window.removeEventListener("scroll", throttledToggleVisible);
+  }, []);
+
+  return (
+    <div className="fixed bottom-20 right-10 z-50" style={{ display: visible ? "inline" : "none" }}>
+      <Button
+        className="flex w-12 items-center justify-center bg-slate-900/10 px-1 py-2 hover:bg-slate-900/20 hover:opacity-100 dark:bg-slate-50/5 dark:hover:bg-slate-50/30"
+        onClick={scrollToTop}>
+        <ArrowUpIcon className="h-6 w-6 text-slate-900 dark:text-slate-50" />
+      </Button>
+    </div>
+  );
+};
+
+export default ScrollToTopButton;

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

@@ -44,7 +44,7 @@ export const SetupInstructions: React.FC = ({}) => {
   return (
     <div>
       <TabBar tabs={tabs} activeId={activeTab} setActiveId={setActiveTab} />
-      <div className="h-80 max-w-xs px-4  sm:max-w-lg">
+      <div className="h-80 max-w-lg px-4 sm:max-w-lg md:max-w-lg">
         {activeTab === "npm" ? (
           <>
             <CodeBlock>npm install @formbricks/js</CodeBlock>
@@ -60,7 +60,7 @@ if (typeof window !== "undefined") {
           </>
         ) : activeTab === "html" ? (
           <CodeBlock>{`<script type="text/javascript">
-!function(){var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src="./dist/index.umd.js";var e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e),setTimeout(function(){window.formbricks.init("claDadXk29dak92dK9","https://app.formbricks.com")},500)}();
+!function(){var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src="https://unpkg.com/@formbricks/js@^1.1.2/dist/index.umd.js";var e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e),setTimeout(function(){window.formbricks.init("claDadXk29dak92dK9","https://app.formbricks.com")},500)}();
 </script>`}</CodeBlock>
         ) : null}
       </div>

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

@@ -1,7 +1,7 @@
 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";
+import { Button } from "@formbricks/ui/Button";
 import { CursorArrowRaysIcon } from "@heroicons/react/24/solid";
 import Image from "next/image";
 import { useState } from "react";
@@ -21,9 +21,9 @@ export const Steps: React.FC = () => {
         heading="Set Formbricks up in minutes"
         subheading="Formbricks is designed for as little dev attention as possible. Here’s how:"
       />
-      <div id="howitworks" className="mx-auto mb-12 mt-16 max-w-lg md:mb-0 md:mt-8 md:max-w-none">
+      <div id="howitworks" className="xs:m-auto mb-12 mt-16 max-w-lg md:mb-0 md:mt-8 md:max-w-none">
         <div className="px-4 sm:max-w-4xl sm:px-6 lg:max-w-7xl lg:px-8">
-          <div className="grid md:grid-cols-2 md:items-center md:gap-16">
+          <div className="xs:grid md:grid-cols-2 md:items-center md:gap-16">
             <div className="pb-8 sm:pl-10 md:pb-0">
               <h4 className="text-brand-dark font-bold">Step 1</h4>
               <h2 className="xs:text-3xl text-2xl font-bold tracking-tight text-slate-800 dark:text-slate-200">
@@ -92,7 +92,7 @@ export const Steps: React.FC = () => {
         <div className="px-4 sm:max-w-4xl sm:px-6 lg:max-w-7xl lg:px-8">
           <div className="grid md:grid-cols-2 md:items-center md:gap-16">
             <div className="order-last w-full rounded-lg bg-slate-100 p-4 dark:bg-slate-800 sm:py-8 md:order-first">
-              <div className="mx-auto md:w-3/4">
+              <div className="mx-auto flex flex-col items-center justify-center md:w-3/4">
                 <AddEventDummy />
               </div>
             </div>

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

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

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

@@ -1,13 +1,13 @@
 import {
+  BaseballIcon,
   CancelSubscriptionIcon,
+  CodeBookIcon,
   DogChaserIcon,
   FeedbackIcon,
   InterviewPromptIcon,
   OnboardingIcon,
   PMFIcon,
-  BaseballIcon,
-  CodeBookIcon,
-} from "@formbricks/ui";
+} from "@formbricks/ui/icons";
 import clsx from "clsx";
 import Link from "next/link";
 
@@ -18,7 +18,7 @@ export default function BestPracticeNavigation() {
       href: "/interview-prompt",
       status: true,
       icon: InterviewPromptIcon,
-      description: "Ask only power users users to book a time in your calendar. Get those juicy details.",
+      description: "Ask only power users to book a time in your calendar. Get those juicy details.",
       category: "Understand Users",
     },
     {
@@ -81,14 +81,14 @@ export default function BestPracticeNavigation() {
   ];
 
   return (
-    <div className=" mx-auto grid grid-cols-1 gap-6 px-2 sm:grid-cols-3">
+    <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}>
-          <div className="drop-shadow-card duration-120 hover:border-brand-dark relative rounded-lg border border-slate-100 bg-slate-100 p-8 transition-all ease-in-out hover:scale-105 hover:cursor-pointer dark:bg-slate-800">
+          <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={clsx(
                 // base styles independent what type of button it is
-                "absolute right-10 rounded-full px-3 py-1",
+                "absolute right-6 rounded-full px-3 py-1 text-xs lg:text-sm",
                 // different styles depending on type
                 bestPractice.category === "Boost Retention" &&
                   "bg-pink-100 text-pink-500 dark:bg-pink-800 dark:text-pink-200",

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

@@ -1,4 +1,4 @@
-import { Button } from "@formbricks/ui";
+import { Button } from "@formbricks/ui/Button";
 import { usePlausible } from "next-plausible";
 import { useRouter } from "next/router";
 import BestPracticeNavigation from "./BestPracticeNavigation";
@@ -24,6 +24,7 @@ export default function InsightOppos() {
 
       <div className="mx-auto mt-4 w-fit px-4 py-2 text-center">
         <Button
+          className="hidden md:block"
           variant="highlight"
           onClick={() => {
             router.push("/demo");

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

@@ -1,4 +1,4 @@
-import { Button } from "@formbricks/ui";
+import { Button } from "@formbricks/ui/Button";
 import clsx from "clsx";
 import { usePlausible } from "next-plausible";
 import { useRouter } from "next/router";

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

@@ -1,4 +1,4 @@
-import { Button } from "@formbricks/ui";
+import { Button } from "@formbricks/ui/Button";
 import { useRouter } from "next/router";
 import HeadingCentered from "./HeadingCentered";
 

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

@@ -1,22 +1,47 @@
 // components/ui/CodeBlock.tsx
 import Prism from "prismjs";
 import "prismjs/themes/prism.css";
-import React, { useEffect } from "react";
+import React, { CSSProperties, useEffect } from "react";
 
 interface CodeBlockProps {
   children: React.ReactNode;
 }
 
+const styles: Record<string, CSSProperties> = {
+  div: {
+    position: "relative",
+    marginTop: "1rem",
+    borderRadius: "0.375rem",
+    fontSize: "0.875rem",
+    fontWeight: "lighter",
+    color: "#e5e7eb",
+  },
+  pre: {
+    background: "none",
+  },
+  code: {
+    textShadow: "none",
+    color: "#fbbf24",
+  },
+};
+
 const CodeBlock: React.FC<CodeBlockProps> = ({ children }) => {
   useEffect(() => {
     Prism.highlightAll();
   }, [children]);
 
   return (
-    <div className="group relative mt-4 rounded-md text-sm font-light text-slate-200 sm:text-base">
-      <pre>
-        <code className="language-js">{children}</code>
+    <div style={styles.div} className="code-block-container">
+      <pre style={styles.pre}>
+        <code style={styles.code} className="language-js">
+          {children}
+        </code>
       </pre>
+      <style jsx global>{`
+        .operator {
+          background: none !important;
+        }
+      `}</style>
     </div>
   );
 };

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

@@ -1,5 +1,5 @@
 import EarlyBird from "@/images/early bird deal for open source jotform alternative typeform and surveymonkey_v2.svg";
-import { Button } from "@formbricks/ui";
+import { Button } from "@formbricks/ui/Button";
 import { usePlausible } from "next-plausible";
 import Image from "next/image";
 

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

@@ -1,4 +1,4 @@
-import { Button } from "@formbricks/ui";
+import { Button } from "@formbricks/ui/Button";
 import { useRouter } from "next/router";
 import clsx from "clsx";
 

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

@@ -1,5 +1,6 @@
 import Link from "next/link";
 import { FooterLogo } from "./Logo";
+import { FaGithub, FaXTwitter, FaDiscord } from "react-icons/fa6";
 
 const navigation = {
   other: [
@@ -13,29 +14,23 @@ const navigation = {
     {
       name: "Twitter",
       href: "https://twitter.com/formbricks",
-      icon: (props: any) => (
-        <svg fill="currentColor" viewBox="0 0 24 24" {...props}>
-          <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
-        </svg>
-      ),
+      icon: FaXTwitter,
     },
     {
       name: "GitHub",
       href: "https://github.com/formbricks/formbricks",
-      icon: (props: any) => (
-        <svg fill="currentColor" viewBox="0 0 24 24" {...props}>
-          <path
-            fillRule="evenodd"
-            d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
-            clipRule="evenodd"
-          />
-        </svg>
-      ),
+      icon: FaGithub,
+    },
+    {
+      name: "Discord",
+      href: "https://formbricks.com/discord",
+      icon: FaDiscord,
     },
   ],
 };
-
 export default function Footer() {
+  const currentYear = new Date().getFullYear();
+
   return (
     <footer
       className="mt-32 bg-gradient-to-b from-slate-50 to-slate-200 dark:from-slate-900 dark:to-slate-800"
@@ -51,7 +46,7 @@ export default function Footer() {
         <p className="text-base text-slate-500 dark:text-slate-400">Privacy-first Experience Management</p>
         <div className="border-slate-500">
           <p className="text-sm text-slate-400 dark:text-slate-500">
-            Formbricks GmbH &copy; 2022. All rights reserved.
+            Formbricks GmbH &copy; {currentYear}. All rights reserved.
             <br />
             <Link href="/imprint">Imprint</Link> | <Link href="/privacy">Privacy Policy</Link> |{" "}
             <Link href="/terms">Terms</Link> | <Link href="/oss-friends">OSS Friends</Link>

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

@@ -1,8 +1,8 @@
 import GitHubMarkWhite from "@/images/github-mark-white.svg";
 import GitHubMarkDark from "@/images/github-mark.svg";
+import { Button } from "@formbricks/ui/Button";
 import {
   BaseballIcon,
-  Button,
   CancelSubscriptionIcon,
   CodeBookIcon,
   DogChaserIcon,
@@ -10,7 +10,7 @@ import {
   InterviewPromptIcon,
   OnboardingIcon,
   PMFIcon,
-} from "@formbricks/ui";
+} from "@formbricks/ui/icons";
 import { Popover, Transition } from "@headlessui/react";
 import { Bars3Icon, ChevronDownIcon, ChevronRightIcon, XMarkIcon } from "@heroicons/react/24/outline";
 import clsx from "clsx";
@@ -18,7 +18,7 @@ import { usePlausible } from "next-plausible";
 import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { Fragment, useState } from "react";
+import { Fragment, useEffect, useState } from "react";
 import { FooterLogo } from "./Logo";
 import { ThemeSelector } from "./ThemeSelector";
 
@@ -99,8 +99,32 @@ export default function Header() {
   const [mobileSubOpen, setMobileSubOpen] = useState(false);
   const plausible = usePlausible();
   const router = useRouter();
+  const [stickyNav, setStickyNav] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      if (window.scrollY > 250) {
+        setStickyNav(true);
+      } else {
+        setStickyNav(false);
+      }
+    };
+    window.addEventListener("scroll", handleScroll);
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+
+  const stickyNavClass = stickyNav
+    ? `bg-transparent shadow-md backdrop-blur-lg fixed top-0 z-30 w-full`
+    : "relative";
   return (
-    <Popover className="relative" as="header">
+    <Popover className={`${stickyNavClass}`} as="header">
+      <a href="https://www.producthunt.com/products/formbricks" target="_blank">
+        <div className="hidden bg-[#ff6154] px-4 py-2 text-center text-sm text-white md:block lg:py-0">
+          We&apos;re launching soon on Product Hunt - get notified 🚀
+        </div>
+      </a>
       <div className="flex items-center justify-between px-4 py-6 sm:px-6 md:justify-start ">
         <div className="flex w-0 flex-1 justify-start">
           <Link href="/">
@@ -114,18 +138,18 @@ export default function Header() {
             <Bars3Icon className="h-6 w-6" aria-hidden="true" />
           </Popover.Button>
         </div>
-        <Popover.Group as="nav" className="hidden space-x-10 md:flex">
+        <Popover.Group as="nav" className="hidden space-x-6 md:flex lg:space-x-10">
           <Popover className="relative">
             {({ open }) => (
               <>
                 <Popover.Button
                   className={clsx(
                     open
-                      ? "text-slate-600 dark:text-slate-400 "
-                      : "text-slate-400  hover:text-slate-900  dark:hover:text-slate-100",
-                    "group inline-flex items-center rounded-md text-base font-medium hover:text-slate-300 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-offset-2 dark:hover:text-slate-50"
+                      ? "text-slate-600 focus:px-2 dark:text-slate-400"
+                      : "px-2  text-slate-400  hover:text-slate-900 dark:hover:text-slate-100",
+                    "group inline-flex items-center rounded-md px-2 text-base font-medium hover:text-slate-300 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-offset-2 dark:hover:text-slate-50"
                   )}>
-                  <span>Best Practices</span>
+                  <span className="text-sm lg:text-base">Best Practices</span>
                   <ChevronDownIcon
                     className={clsx(
                       open ? "text-slate-600" : "text-slate-400",
@@ -251,17 +275,17 @@ export default function Header() {
  */}
           <Link
             href="/pricing"
-            className="text-base font-medium text-slate-400 hover:text-slate-700  dark:hover:text-slate-300">
+            className="text-sm font-medium text-slate-400 hover:text-slate-700 dark:hover:text-slate-300  lg:text-base">
             Pricing
           </Link>
           <Link
             href="/docs"
-            className="text-base font-medium text-slate-400 hover:text-slate-700  dark:hover:text-slate-300">
+            className="text-sm font-medium text-slate-400 hover:text-slate-700 dark:hover:text-slate-300  lg:text-base">
             Docs
           </Link>
           <Link
             href="/blog"
-            className="text-base font-medium text-slate-400 hover:text-slate-700  dark:hover:text-slate-300">
+            className="text-sm font-medium text-slate-400 hover:text-slate-700 dark:hover:text-slate-300  lg:text-base">
             Blog {/* <p className="bg-brand inline rounded-full px-2 text-xs text-white">1</p> */}
           </Link>
           {/*           <Link
@@ -272,15 +296,15 @@ export default function Header() {
 
           <Link
             href="/concierge"
-            className="text-base font-medium text-slate-400 hover:text-slate-700  dark:hover:text-slate-300">
+            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-5" />
+          <ThemeSelector className="relative z-10 mr-2 lg:mr-5" />
           <Button
             variant="secondary"
-            className="group px-2"
+            className="group hidden px-2 lg:block"
             href="https://formbricks.com/github"
             target="_blank">
             <Image
@@ -303,7 +327,7 @@ export default function Header() {
 
           <Button
             variant="highlight"
-            className="ml-2"
+            className="ml-2 text-xs lg:text-sm"
             onClick={() => {
               router.push("https://app.formbricks.com");
               plausible("NavBar_CTA_Login");
@@ -369,7 +393,7 @@ export default function Header() {
                   </div>
                 )}
                 <Link href="/concierge">Concierge</Link>
-                <Link href="#pricing">Pricing</Link>
+                <Link href="/pricing">Pricing</Link>
                 <Link href="/docs">Docs</Link>
                 <Link href="/blog">Blog</Link>
                 {/*   <Link href="/careers">Careers</Link> */}

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

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

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

@@ -1,4 +1,4 @@
-import { Button } from "@formbricks/ui";
+import { Button } from "@formbricks/ui/Button";
 import { DocumentDuplicateIcon } from "@heroicons/react/24/outline";
 import { useRouter } from "next/router";
 

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

@@ -20,13 +20,18 @@ export default function MetaInformation({
   tags,
 }: Props) {
   const pageTitle = `${title}`;
+  const BASE_URL = `https://${process.env.VERCEL_URL}`;
   return (
     <Head>
       <title>{pageTitle}</title>
       <meta name="description" content={description} />
       <meta property="og:title" content={title} />
       <meta property="og:description" content={description} />
-      <meta property="og:image" content={`https://${process.env.VERCEL_URL}/social-image.png`} />
+      <meta name="image" content={`https://${BASE_URL}/favicon.ico`} />
+      <meta property="og:image" content={`https://${BASE_URL}/social-image.png`} />
+      <link rel="icon" type="image/x-icon" href={`https://${BASE_URL}/favicon.ico`} />
+      <meta name="msapplication-TileColor" content="#00C4B8" />
+      <meta name="msapplication-TileImage" content={`https://${BASE_URL}/favicon.ico`} />
       <meta property="og:image:alt" content="Open Source Experience Management, Privacy-first" />
       <meta property="og:image:type" content="image/png" />
       <meta property="og:image:width" content="1200" />
@@ -43,6 +48,15 @@ export default function MetaInformation({
       <meta name="twitter:card" content="summary_large_image" />
       <meta name="twitter:site" content="@formbricks" />
       <meta name="twitter:creator" content="@formbricks" />
+      <meta name="twitter:title" content="Formbricks | Privacy-first Experience Management" />
+      <meta
+        name="twitter:description"
+        content="Build qualitative user research into your product. Leverage Best practices to increase Product-Market Fit."
+      />
+      <meta
+        name="keywords"
+        content="Formbricks, Privacy-first Experience Management, Create your survey, open-source typeform alternative, form with data insights"
+      />
       <meta name="theme-color" content="#00C4B8" />
     </Head>
   );

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

@@ -1,75 +0,0 @@
-import { Dialog, Transition } from "@headlessui/react";
-import { XMarkIcon } from "@heroicons/react/24/solid";
-import { Fragment } from "react";
-import clsx from "clsx";
-
-type Modal = {
-  open: boolean;
-  setOpen: (v: boolean) => void;
-  children: React.ReactNode;
-  title?: string;
-  noPadding?: boolean;
-  closeOnOutsideClick?: boolean;
-};
-
-const Modal: React.FC<Modal> = ({
-  open,
-  setOpen,
-  children,
-  title,
-  noPadding,
-  closeOnOutsideClick = true,
-}) => {
-  return (
-    <>
-      <Transition.Root show={open} as={Fragment}>
-        <Dialog as="div" className="relative z-20" onClose={() => closeOnOutsideClick && setOpen(false)}>
-          <Transition.Child
-            as={Fragment}
-            enter="ease-out duration-300"
-            enterFrom="opacity-0"
-            enterTo="opacity-100"
-            leave="ease-in duration-200"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0">
-            <div className="fixed inset-0 bg-slate-500 bg-opacity-30 backdrop-blur-md transition-opacity" />
-          </Transition.Child>
-
-          <div className="fixed inset-0 z-10 overflow-y-auto">
-            <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-              <Transition.Child
-                as={Fragment}
-                enter="ease-out duration-300"
-                enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                enterTo="opacity-100 translate-y-0 sm:scale-100"
-                leave="ease-in duration-200"
-                leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-                leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
-                <Dialog.Panel
-                  className={clsx(
-                    "relative transform rounded-lg bg-slate-100 text-left shadow-xl transition-all dark:bg-slate-800 sm:my-8 sm:w-full sm:max-w-xl ",
-                    `${noPadding ? "" : "px-4 pb-4 pt-5 sm:p-6"}`
-                  )}>
-                  <div className="absolute right-0 top-0 hidden pr-4 pt-4 sm:block">
-                    <button
-                      type="button"
-                      className="rounded-md bg-white text-slate-400 hover:text-slate-500 focus:outline-none focus:ring-0 focus:ring-offset-2 dark:bg-slate-900"
-                      onClick={() => setOpen(false)}>
-                      <span className="sr-only">Close</span>
-                      <XMarkIcon className="h-6 w-6" aria-hidden="true" />
-                    </button>
-                  </div>
-                  {title && <h3 className="mb-4 text-xl font-bold text-slate-500">{title}</h3>}
-
-                  {children}
-                </Dialog.Panel>
-              </Transition.Child>
-            </div>
-          </div>
-        </Dialog>
-      </Transition.Root>
-    </>
-  );
-};
-
-export default Modal;

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

@@ -1,5 +1,5 @@
 import Friends from "@/images/newsletter-signup-gif.gif";
-import { Button } from "@formbricks/ui";
+import { Button } from "@formbricks/ui/Button";
 import Image from "next/image";
 
 export default function WaitlistForm() {

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

@@ -1,4 +1,4 @@
-import { Button } from "@formbricks/ui";
+import { Button } from "@formbricks/ui/Button";
 
 export const OpenSourceInfo = () => {
   return (
@@ -12,7 +12,7 @@ export const OpenSourceInfo = () => {
           <p className=" my-2 text-slate-600 dark:text-slate-300">
             Formbricks is an open source project. You can self-host it for free. We provide multiple easy
             deployment options as per your customisation needs. We have documented the process of self-hosting
-            Formbricks on your own server using Docker, Bash Scripting, and Building from Source.
+            Formbricks on your own server using Docker & Bash Scripting.
           </p>
           <div className="mt-4 space-x-2">
             <Button

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

@@ -1,162 +0,0 @@
-import { Button } from "@formbricks/ui";
-import clsx from "clsx";
-import HeadingCentered from "./HeadingCentered";
-import { CheckIcon } from "@heroicons/react/24/outline";
-import { usePlausible } from "next-plausible";
-import { useRouter } from "next/router";
-
-const tiers = [
-  {
-    name: "Self-hosting",
-    priceMonthly: "free",
-    paymentRythm: "/always",
-    button: "secondary",
-    discounted: false,
-    highlight: false,
-    description: "Host Formbricks on your own server.",
-    features: [
-      "All Free features",
-      "Easy self-hosting (Docker)",
-      "Unlimited surveys",
-      "Unlimited responses",
-      "Unlimited team members",
-    ],
-    ctaName: "Read docs",
-    plausibleGoal: "Pricing_CTA_SelfHosting",
-    href: "/docs/self-hosting/deployment",
-  },
-  {
-    name: "Cloud",
-    href: "https://app.formbricks.com/auth/signup",
-    priceMonthly: "$0",
-    paymentRythm: "/month",
-    button: "highlight",
-    discounted: false,
-    highlight: true,
-    description: "Start with the 'Free forever' plan.",
-    features: [
-      "Unlimited surveys",
-      "In-product surveys",
-      "Link surveys",
-      "Remove branding",
-      "Granular targeting",
-      "30+ templates",
-      "API access",
-      "Integrations (Zapier, Make, ...)",
-      "Unlimited team members",
-      "100 responses per survey",
-    ],
-    ctaName: "Get started",
-    plausibleGoal: "Pricing_CTA_FreePlan",
-  },
-  {
-    name: "Cloud Pro",
-    href: "https://app.formbricks.com/auth/signup",
-    priceMonthly: "$99",
-    paymentRythm: "/month",
-    button: "secondary",
-    discounted: false,
-    highlight: false,
-    description: "All features, unlimited usage.",
-    features: ["Everything in 'Cloud'", "Unlimited responses per survey"],
-    ctaName: "Start for free",
-    plausibleGoal: "Pricing_CTA_ProPlan",
-  },
-];
-
-export default function Pricing() {
-  const plausible = usePlausible();
-  const router = useRouter();
-
-  return (
-    <div className="-mt-10 pb-20">
-      <div className="mx-auto max-w-7xl py-4 sm:px-6 sm:pb-6 lg:px-8" id="pricing">
-        <HeadingCentered heading="One price, unlimited usage." teaser="Pricing" />
-
-        <div className="mx-auto  space-y-4 px-4 lg:grid lg:grid-cols-3 lg:gap-6 lg:space-y-0 lg:px-0">
-          {tiers.map((tier) => (
-            <div
-              key={tier.name}
-              className={clsx(
-                `h-fit rounded-lg shadow-sm`,
-                tier.highlight
-                  ? "border border-slate-300 bg-slate-200 dark:border-slate-500 dark:bg-slate-800"
-                  : "bg-slate-100 dark:bg-slate-700"
-              )}>
-              <div className="p-8">
-                <h2
-                  className={clsx(
-                    "inline-flex text-3xl font-bold",
-                    tier.highlight
-                      ? "text-slate-700 dark:text-slate-200"
-                      : "text-slate-500 dark:text-slate-300"
-                  )}>
-                  {tier.name}
-                </h2>
-                <p className="mt-4 whitespace-pre-wrap text-sm text-slate-600 dark:text-slate-300">
-                  {tier.description}
-                </p>
-                <ul className="mt-4 space-y-4">
-                  {tier.features.map((feature, index) => (
-                    <li key={index} className="flex items-start">
-                      <div className="rounded-full border border-green-300 bg-green-100 p-0.5 dark:border-green-600 dark:bg-green-900">
-                        <CheckIcon className="h-5 w-5 p-0.5 text-green-500 dark:text-green-300" />
-                      </div>
-                      <span className="ml-2 text-sm text-slate-500 dark:text-slate-400">{feature}</span>
-                    </li>
-                  ))}
-                </ul>
-                <p className="mt-8">
-                  <span
-                    className={clsx(
-                      `text-4xl font-light`,
-                      tier.highlight
-                        ? "text-slate-800 dark:text-slate-100"
-                        : "text-slate-500 dark:text-slate-200",
-                      tier.discounted ? "decoration-brand line-through" : ""
-                    )}>
-                    {tier.priceMonthly}
-                  </span>{" "}
-                  <span className="text-4xl font-bold text-slate-900 dark:text-slate-50">
-                    {tier.discounted && "$49"}
-                  </span>
-                  <span
-                    className={clsx(
-                      "text-base font-medium",
-                      tier.highlight
-                        ? "text-slate-500 dark:text-slate-400"
-                        : "text-slate-400 dark:text-slate-500"
-                    )}>
-                    {tier.paymentRythm}
-                  </span>
-                </p>
-
-                <Button
-                  onClick={() => {
-                    plausible(`${tier.plausibleGoal}`);
-                    router.push(`${tier.href}`);
-                  }}
-                  className={clsx(
-                    "mt-6 w-full justify-center py-4 text-lg shadow-sm",
-                    tier.highlight
-                      ? ""
-                      : "bg-slate-300 hover:bg-slate-200 dark:bg-slate-600 dark:hover:bg-slate-500"
-                  )}
-                  variant={tier.highlight ? "highlight" : "secondary"}>
-                  {tier.ctaName}
-                </Button>
-
-                {tier.name == "Cloud Pro" && (
-                  <p className="mt-1.5 text-center text-xs text-slate-500">No Creditcard required.</p>
-                )}
-                {tier.name == "Cloud" && (
-                  <p className="mt-1.5 text-center text-xs text-slate-500">Free forever 🤍</p>
-                )}
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-}

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

@@ -1,4 +1,4 @@
-import { Button } from "@formbricks/ui";
+import { Button } from "@formbricks/ui/Button";
 
 export const GetStartedWithPricing = ({ showDetailed }: { showDetailed: boolean }) => {
   return (

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

@@ -1,4 +1,4 @@
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@formbricks/ui";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@formbricks/ui/Tooltip";
 import { CheckIcon, XMarkIcon } from "@heroicons/react/24/outline";
 
 export const PricingTable = ({ leadRow, pricing, endRow }) => {
@@ -31,6 +31,11 @@ export const PricingTable = ({ leadRow, pricing, endRow }) => {
                   Addon
                 </span>
               )}
+              {feature.comingSoon && (
+                <span className=" mx-2 bg-blue-100 p-1 text-xs text-slate-400 dark:bg-slate-700 dark:text-teal-500">
+                  coming soon
+                </span>
+              )}
             </div>
             <div className="flex w-1/3 items-center justify-center text-center text-sm text-slate-800 dark:text-slate-100">
               {feature.addOnText ? (
@@ -48,11 +53,11 @@ export const PricingTable = ({ leadRow, pricing, endRow }) => {
                 </TooltipProvider>
               ) : feature.free ? (
                 <div className="h-6 w-6 rounded-full border border-green-300 bg-green-100 p-0.5 dark:border-green-600 dark:bg-green-900">
-                  <CheckIcon className="p-0.5 text-green-500 dark:text-green-300" />
+                  <CheckIcon className=" text-green-500 dark:text-green-300" />
                 </div>
               ) : (
                 <div className="h-6 w-6 rounded-full border border-red-300 bg-red-100 p-0.5 dark:border-red-500 dark:bg-red-300">
-                  <XMarkIcon className="dark:red-300 p-0.5 text-red-500 dark:text-red-600" />
+                  <XMarkIcon className="text-red-500 dark:text-red-600" />
                 </div>
               )}
             </div>
@@ -72,11 +77,11 @@ export const PricingTable = ({ leadRow, pricing, endRow }) => {
                 </TooltipProvider>
               ) : feature.paid ? (
                 <div className="h-6 w-6 rounded-full border border-green-300 bg-green-100 p-0.5 dark:border-green-600 dark:bg-green-900">
-                  <CheckIcon className="p-0.5 text-green-500 dark:text-green-300" />
+                  <CheckIcon className="text-green-500 dark:text-green-300" />
                 </div>
               ) : (
                 <div className="h-6 w-6 rounded-full border border-red-300 bg-red-100 p-0.5 dark:border-red-600 dark:bg-red-900">
-                  <XMarkIcon className="dark:red-300 p-0.5 text-red-500" />
+                  <XMarkIcon className="text-red-500 dark:text-red-600" />
                 </div>
               )}
             </div>

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

@@ -1,18 +1,23 @@
 import LFGLuigi from "@/images/blog/lfg-luigi-200px.webp";
-import { Button } from "@formbricks/ui";
+import { Button } from "@formbricks/ui/Button";
+import { XMarkIcon } from "@heroicons/react/24/solid";
 import Image from "next/image";
 import React, { useEffect, useState } from "react";
 
 interface Props {
-  delay?: number; // in milliseconds, optional
-  scrollPercentage?: number; // optional
-  UTMSource: string; // required
+  delay?: number;
+  scrollPercentage?: number;
+  UTMSource: string;
 }
 
 const SlideInBanner: React.FC<Props> = ({ delay = 5000, scrollPercentage = 10, UTMSource }) => {
   const [showBanner, setShowBanner] = useState(false);
+  const [isDismissed, setIsDismissed] = useState(false);
+  const [isExiting, setIsExiting] = useState(false);
 
   useEffect(() => {
+    if (isDismissed) return;
+
     const timer = setTimeout(() => {
       setShowBanner(true);
     }, delay);
@@ -31,17 +36,23 @@ const SlideInBanner: React.FC<Props> = ({ delay = 5000, scrollPercentage = 10, U
       clearTimeout(timer);
       window.removeEventListener("scroll", handleScroll);
     };
-  }, [delay, scrollPercentage]);
+  }, [delay, scrollPercentage, isDismissed]);
+
+  if (isDismissed) return null;
 
   return (
     <div
-      className={`sticky bottom-4 grid grid-cols-7 rounded-lg bg-slate-700 bg-opacity-70 p-4 text-white backdrop-blur-sm transition-all duration-500 ease-out ${
-        showBanner ? "visible translate-y-0 opacity-100" : "invisible translate-y-full opacity-0"
+      className={`lg:gird-cols-6 relative sticky bottom-4 grid rounded-lg bg-slate-700 bg-opacity-70 p-4 text-white backdrop-blur-sm transition-all duration-500 ease-out lg:grid-cols-7 ${
+        showBanner && !isExiting
+          ? "visible translate-y-0 opacity-100"
+          : isExiting
+          ? "visible 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" />
       </div>
-      <div className="col-span-7 flex items-center space-x-3 lg:col-span-6">
+      <div className="col-span-6 flex items-center space-x-3">
         <p>
           Did you know? Formbricks is the only open source Experience Management solution: free &
           privacy-first!
@@ -52,6 +63,14 @@ const SlideInBanner: React.FC<Props> = ({ delay = 5000, scrollPercentage = 10, U
           className="whitespace-nowrap">
           Learn more
         </Button>
+        <button
+          onClick={() => {
+            setIsExiting(true);
+            setTimeout(() => setIsDismissed(true), 500);
+          }}
+          className="rounded-full p-2 hover:bg-slate-600 hover:bg-opacity-30">
+          <XMarkIcon className="h-6 w-6" />
+        </button>
       </div>
     </div>
   );

apps/formbricks-com/components/shared/ThemeSelector.jsx

@@ -1,12 +1,4 @@
 import { useEffect, useState } from "react";
-import { Listbox } from "@headlessui/react";
-import clsx from "clsx";
-
-const themes = [
-  { name: "Light", value: "light", icon: LightIcon },
-  { name: "Dark", value: "dark", icon: DarkIcon },
-  { name: "System", value: "system", icon: SystemIcon },
-];
 
 function LightIcon(props) {
   return (
@@ -32,80 +24,37 @@ function DarkIcon(props) {
   );
 }
 
-function SystemIcon(props) {
-  return (
-    <svg aria-hidden="true" viewBox="0 0 16 16" {...props}>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M1 4a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v4a3 3 0 0 1-3 3h-1.5l.31 1.242c.084.333.36.573.63.808.091.08.182.158.264.24A1 1 0 0 1 11 15H5a1 1 0 0 1-.704-1.71c.082-.082.173-.16.264-.24.27-.235.546-.475.63-.808L5.5 11H4a3 3 0 0 1-3-3V4Zm3-1a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H4Z"
-      />
-    </svg>
-  );
-}
-
 export function ThemeSelector(props) {
-  let [selectedTheme, setSelectedTheme] = useState();
+  // Initialize the state with a default value
+  const [isDarkMode, setIsDarkMode] = useState(true);
 
+  // Use a useEffect to run code on the client side
   useEffect(() => {
-    if (selectedTheme) {
-      document.documentElement.setAttribute("data-theme", selectedTheme.value);
-    } else {
-      setSelectedTheme(
-        themes.find((theme) => theme.value === document.documentElement.getAttribute("data-theme"))
-      );
-    }
-  }, [selectedTheme]);
+    // Check the system theme on the client side
+    const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches;
 
-  useEffect(() => {
-    let handler = () =>
-      setSelectedTheme(themes.find((theme) => theme.value === (window.localStorage.theme ?? "system")));
+    // Update the state based on the system theme
+    setIsDarkMode(systemTheme);
 
-    window.addEventListener("storage", handler);
-
-    return () => window.removeEventListener("storage", handler);
+    // Set the HTML attribute based on the initial state
+    document.documentElement.setAttribute("data-theme", systemTheme ? "dark" : "light");
   }, []);
 
+  const toggleTheme = () => {
+    setIsDarkMode(!isDarkMode);
+    document.documentElement.setAttribute("data-theme", isDarkMode ? "light" : "dark");
+  };
+
   return (
-    <Listbox as="div" value={selectedTheme} onChange={setSelectedTheme} {...props}>
-      <Listbox.Label className="sr-only">Theme</Listbox.Label>
-      <Listbox.Button
-        className="flex h-6 w-6 items-center justify-center rounded-lg shadow-md shadow-black/5 ring-1 ring-black/5 dark:bg-slate-700 dark:ring-inset dark:ring-white/5"
-        aria-label={selectedTheme?.name}>
-        <LightIcon className="hidden h-4 w-4 fill-brand [[data-theme=light]_&]:block" />
-        <DarkIcon className="hidden h-4 w-4 fill-brand [[data-theme=dark]_&]:block" />
-        <LightIcon className="hidden h-4 w-4 fill-slate-400 [:not(.dark)[data-theme=system]_&]:block" />
-        <DarkIcon className="hidden h-4 w-4 fill-slate-400 [.dark[data-theme=system]_&]:block" />
-      </Listbox.Button>
-      <Listbox.Options className="absolute top-full left-1/2 mt-3 w-36 -translate-x-1/2 space-y-1 rounded-xl bg-white p-3 text-sm font-medium shadow-md shadow-black/5 ring-1 ring-black/5 dark:bg-slate-800 dark:ring-white/5">
-        {themes.map((theme) => (
-          <Listbox.Option
-            key={theme.value}
-            value={theme}
-            className={({ active, selected }) =>
-              clsx("flex cursor-pointer select-none items-center rounded-[0.625rem] p-1", {
-                "text-brand-dark dark:text-brand-light": selected,
-                "text-slate-800 dark:text-slate-100": active && !selected,
-                "text-slate-700 dark:text-slate-400": !active && !selected,
-                "bg-slate-100 dark:bg-slate-900/40": active,
-              })
-            }>
-            {({ selected }) => (
-              <>
-                <div className="rounded-md bg-white p-1 shadow ring-1 ring-slate-900/5 dark:bg-slate-700 dark:ring-inset dark:ring-white/5">
-                  <theme.icon
-                    className={clsx(
-                      "h-4 w-4",
-                      selected ? "fill-brand-dark dark:fill-brand-light" : "fill-slate-400"
-                    )}
-                  />
-                </div>
-                <div className="ml-3">{theme.name}</div>
-              </>
-            )}
-          </Listbox.Option>
-        ))}
-      </Listbox.Options>
-    </Listbox>
+    <div
+      className="shadow-black/8 mr-5 flex h-6 w-6 items-center justify-center rounded-lg shadow-md ring-1 ring-black/5 dark:bg-slate-700 dark:ring-inset dark:ring-white/5"
+      onClick={toggleTheme}
+      style={{ cursor: "pointer" }}>
+      {isDarkMode ? (
+        <DarkIcon className="fill-brand h-4 w-4" />
+      ) : (
+        <LightIcon className="fill-brand h-4 w-4" />
+      )}
+    </div>
   );
 }

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

@@ -1,4 +1,4 @@
-import { Button } from "@formbricks/ui";
+import { Button } from "@formbricks/ui/Button";
 import { DocumentDuplicateIcon } from "@heroicons/react/24/outline";
 import { useRouter } from "next/router";
 

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

@@ -1,4 +1,4 @@
-import { Button } from "@formbricks/ui";
+import { Button } from "@formbricks/ui/Button";
 import { useRouter } from "next/router";
 
 interface UseCaseCTAProps {
@@ -9,13 +9,13 @@ export default function UseCaseHeader({ href }: UseCaseCTAProps) {
   /*   const plausible = usePlausible(); */
   const router = useRouter();
   return (
-    <div className="my-8 flex space-x-2 whitespace-nowrap">
-      <Button variant="secondary" href={href}>
+    <div className="my-8 flex flex-col justify-center space-x-2 space-y-2 whitespace-nowrap align-top sm:flex-row">
+      <Button className="mx-auto mt-2 flex w-fit justify-center align-middle" variant="secondary" href={href}>
         Step-by-step manual
       </Button>
       <div className="space-y-1 text-center">
         <Button
-          variant="darkCTA"
+          className="bg-slate-800 text-slate-300 hover:text-white dark:bg-slate-500 dark:text-slate-100 dark:hover:bg-slate-400"
           onClick={() => {
             router.push("https://app.formbricks.com/auth/signup");
             /* plausible("BestPractice_SubPage_CTA_TryItNow"); */