fix: have same non-module workflow for packages (#1230)

Co-authored-by: Digvijay Gupta <digvijaygupta@Digvijays-MacBook-Pro.local>

.env.example

@@ -10,11 +10,20 @@
 
 WEBAPP_URL=http://localhost:3000
 
-SURVEY_BASE_URL=http://localhost:3000/i
+SURVEY_BASE_URL=http://localhost:3000/s
 
 # Set this if you want to have a shorter link for surveys
 SHORT_SURVEY_BASE_URL=
 
+# Encryption keys
+# Please set both for now, we will change this in the future
+
+# You can use: `openssl rand -base64 16` to generate one
+FORMBRICKS_ENCRYPTION_KEY=
+
+# You can use: `openssl rand -base64 24` to generate one
+ENCRYPTION_KEY=
+
 ##############
 #  DATABASE  #
 ##############
@@ -93,10 +102,6 @@ GOOGLE_CLIENT_SECRET=
 # 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=
 

.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 -base64 24)
+          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 -base64 24)
+          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

@@ -19,6 +19,11 @@ jobs:
           SECRET=$(openssl rand -hex 16)
           echo "NEXTAUTH_SECRET=$SECRET" >> $GITHUB_ENV
 
+      - name: Generate Random NEXTAUTH_SECRET
+        run: |
+          SECRET=$(openssl rand -base64 24)
+          echo "ENCRYPTION_KEY=$SECRET" >> $GITHUB_ENV
+
       - name: Checkout Repo
         uses: actions/checkout@v2
 

.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

@@ -34,6 +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_FORMBRICKS_ENCRYPTION_KEY=$(openssl rand -base64 16)
+      sed -i 's/^FORMBRICKS_ENCRYPTION_KEY=.*/FORMBRICKS_ENCRYPTION_KEY='"$RANDOM_FORMBRICKS_ENCRYPTION_KEY"'/' .env
+      RANDOM_ENCRYPTION_KEY=$(openssl rand -base64 24)
+      sed -i 's/^ENCRYPTION_KEY=.*/ENCRYPTION_KEY='"$RANDOM_ENCRYPTION_KEY"'/' .env
       turbo --filter "@formbricks/web" go
       
 image:

.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

README.md

@@ -29,6 +29,14 @@
 <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>
 
+<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 +51,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 +71,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 +101,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 +125,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.

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/formbricks-com/app/docs/actions/code/page.mdx

@@ -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

@@ -14,7 +14,7 @@ To get the project running locally on your machine you need to have the followin
 - [Docker](https://www.docker.com/) (to run PostgreSQL / MailHog)
 
 1. Clone the project:
-
+<Col>
    <CodeGroup title="Git clone Formbricks monorepo">
 
    ```bash
@@ -22,9 +22,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 +32,9 @@ 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 +42,9 @@ 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 +52,20 @@ 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 -base64 24
+   ```
+
+   </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 +73,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,
@@ -75,7 +86,7 @@ To get the project running locally on your machine you need to have the followin
 ### Build
 
 To build all apps and packages and check for build errors, run the following command:
-
+<Col>
 <CodeGroup title="Build Formbricks stack">
 
 ```bash
@@ -83,11 +94,11 @@ 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 +106,13 @@ 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 +120,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/docker/page.mdx

@@ -24,7 +24,7 @@ Ensure `docker` & `docker compose` are installed on your server/system. Both are
 1. **Create a New Directory for Formbricks**
 
    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
@@ -32,11 +32,11 @@ Ensure `docker` & `docker compose` are installed on your server/system. Both are
    ```
 
    </CodeGroup>
-
+</Col>
 2. **Download the Docker-Compose File**
 
    Download the docker-compose file directly from the Formbricks repository:
-
+<Col>
    <CodeGroup title="Download docker compose file">
 
    ```bash
@@ -44,11 +44,11 @@ Ensure `docker` & `docker compose` are installed on your server/system. Both are
    ```
 
    </CodeGroup>
-
+</Col>
 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
@@ -56,13 +56,13 @@ Ensure `docker` & `docker compose` are installed on your server/system. Both are
    ```
 
    </CodeGroup>
-
+</Col>
 4. **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:
 
    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.
-
+<Col>
    <CodeGroup title="Launch Docker Instance">
 
    ```bash
@@ -70,7 +70,7 @@ Ensure `docker` & `docker compose` are installed on your server/system. Both are
    ```
 
    </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**
@@ -80,7 +80,7 @@ Ensure `docker` & `docker compose` are installed on your server/system. Both are
 ## Updating Formbricks
 
 1. Stop the Formbricks stack
-
+<Col>
    <CodeGroup title="Stop the docker instance">
 
    ```bash
@@ -88,9 +88,9 @@ Ensure `docker` & `docker compose` are installed on your server/system. Both are
    ```
 
    </CodeGroup>
-
+</Col>
 2. Pull the latest changes
-
+<Col>
    <CodeGroup title="Pull the changes into docker">
 
    ```bash
@@ -98,10 +98,10 @@ Ensure `docker` & `docker compose` are installed on your server/system. Both are
    ```
 
    </CodeGroup>
-
+</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
@@ -109,11 +109,11 @@ Ensure `docker` & `docker compose` are installed on your server/system. Both are
    ```
 
    </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 +121,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 +151,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,7 +164,7 @@ formbricks-quickstart-formbricks-1  | Listening on port 3000 url: http://<random
 ```
 
 </CodeGroup>
-
+</Col>
 You can close the logs again with `CTRL + C`.
 
 <Note>

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

@@ -20,7 +20,7 @@ Ensure `docker` & `docker compose` are installed on your server/system. Both are
 </Note>
 
 1.  **Clone the repository**:
-
+<Col>
    <CodeGroup title="Clone and cd into the Formbricks directory">
 
     ```bash
@@ -28,7 +28,7 @@ Ensure `docker` & `docker compose` are installed on your server/system. Both are
     ```
 
    </CodeGroup>
-
+</Col>
 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>
@@ -41,7 +41,7 @@ Ensure `docker` & `docker compose` are installed on your server/system. Both are
 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
@@ -49,11 +49,11 @@ Ensure `docker` & `docker compose` are installed on your server/system. Both are
    ```
 
    </CodeGroup>
-
+</Col>
 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.
-
+<Col>
    <CodeGroup title="Launch docker instances">
 
     ```bash
@@ -61,7 +61,7 @@ Ensure `docker` & `docker compose` are installed on your server/system. Both are
     ```
 
     </CodeGroup>
-
+</Col>
     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
@@ -125,7 +125,7 @@ These variables must be provided at the time of the docker build and can be prov
 ## Debugging
 
 If you encounter any issues, you can check the logs of the container with:
-
+<Col>
 <CodeGroup title="Docker container logs">
 
 ```bash
@@ -133,7 +133,7 @@ docker compose logs -f
 ```
 
 </CodeGroup>
-
+</Col>
 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/migrating-to-1.1/page.mdx

@@ -51,19 +51,19 @@ For a seamless migration, below is a shell script for your self-hosted instance
 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
-
+<Col>
 <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>
-
+</Col>
 
 ### 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.
-
+<Col>
 <CodeGroup title="docker-compose.yml">
 ```yaml {{ title: 'docker-compose.yml' }}
 version: "3.3"
@@ -128,5 +128,5 @@ x-environment: &environment
 
 ```
 </CodeGroup>
-
+</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,7 +165,7 @@ cd formbricks && docker compose logs -f
 ```
 
 </CodeGroup>
-
+</Col>
 You can close the logs again with `CTRL + C`.
 
 <Note>

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

@@ -69,8 +69,8 @@ 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 fill="currentColor" viewBox="0 0 24 24" {...props}>
+      <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
     </svg>
   );
 }
@@ -113,10 +113,12 @@ 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}>

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,10 @@ 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" },
     ],
   },
   {

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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@formbricks/ui/Select";
+import { Button } from "@formbricks/ui/Button";
 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">
+          <div className="flex items-center gap-2">
             <p className="mr-2 w-14 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="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;

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

@@ -20,7 +20,7 @@ import {
   TaskListSearchIcon,
   UserSearchGlasIcon,
   VideoTabletAdjustIcon,
-} from "@formbricks/ui";
+} from "@formbricks/ui/icons";
 
 import { createId } from "@paralleldrive/cuid2";
 import type { Template } from "@formbricks/types/templates";

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

@@ -27,7 +27,6 @@ export const GitHubSponsorship: React.FC = () => {
           src={HackIconGold}
           alt="Hacktober Icon Gold"
           width={100}
-          height={100}
           className="mr-12 md:mr-4"
         />
       </div>

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/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: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";

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/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

@@ -15,7 +15,7 @@ const navigation = {
       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" />
+          <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
         </svg>
       ),
     },
@@ -31,11 +31,25 @@ const navigation = {
           />
         </svg>
       ),
+    },    
+    {
+      name: "Discord",
+      href: "https://formbricks.com/discord",
+      icon: (props: any) => (
+        <svg fill="currentColor" viewBox="0 0 24 24" {...props}>
+          <path
+            fillRule="evenodd"
+            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"
+            clipRule="evenodd"
+          />
+        </svg>
+      ),
     },
   ],
 };
-
 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 +65,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

@@ -2,7 +2,6 @@ import GitHubMarkWhite from "@/images/github-mark-white.svg";
 import GitHubMarkDark from "@/images/github-mark.svg";
 import {
   BaseballIcon,
-  Button,
   CancelSubscriptionIcon,
   CodeBookIcon,
   DogChaserIcon,
@@ -10,7 +9,8 @@ import {
   InterviewPromptIcon,
   OnboardingIcon,
   PMFIcon,
-} from "@formbricks/ui";
+} from "@formbricks/ui/icons";
+import { Button } from "@formbricks/ui/Button";
 import { Popover, Transition } from "@headlessui/react";
 import { Bars3Icon, ChevronDownIcon, ChevronRightIcon, XMarkIcon } from "@heroicons/react/24/outline";
 import clsx from "clsx";
@@ -101,6 +101,11 @@ export default function Header() {
   const router = useRouter();
   return (
     <Popover className="relative" as="header">
+      <a href="https://www.producthunt.com/products/formbricks" target="_blank">
+        <div className="bg-[#ff6154] text-center text-sm text-white">
+          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 +119,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 +256,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 +277,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 +308,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 +374,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/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 (

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

@@ -1,4 +1,4 @@
-import { Button } from "@formbricks/ui";
+import { Button } from "@formbricks/ui/Button";
 import clsx from "clsx";
 import HeadingCentered from "./HeadingCentered";
 import { CheckIcon } from "@heroicons/react/24/outline";

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 }) => {

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

@@ -45,7 +45,7 @@ function SystemIcon(props) {
 }
 
 export function ThemeSelector(props) {
-  let [selectedTheme, setSelectedTheme] = useState();
+  const [selectedTheme, setSelectedTheme] = useState(null);
 
   useEffect(() => {
     if (selectedTheme) {

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 {
@@ -13,9 +13,9 @@ export default function UseCaseHeader({ href }: UseCaseCTAProps) {
       <Button variant="secondary" href={href}>
         Step-by-step manual
       </Button>
-      <div className="space-y-1 text-center">
+      <div className="space-y-1 text-center ">
         <Button
-          variant="darkCTA"
+          className="bg-gray-800 text-gray-300 hover:text-white"
           onClick={() => {
             router.push("https://app.formbricks.com/auth/signup");
             /* plausible("BestPractice_SubPage_CTA_TryItNow"); */

apps/formbricks-com/next.config.mjs

@@ -130,6 +130,16 @@ const nextConfig = {
         destination: "/blog/experience-management-open-source",
         permanent: true,
       },
+      {
+        source: "/launch",
+        destination: "https://www.producthunt.com/products/formbricks",
+        permanent: true,
+      },
+      {
+        source: "/join-oss-friends",
+        destination: "https://formbricks.com/clhys1p9r001cpr0hu65rwh17",
+        permanent: true,
+      },
     ];
   },
   async rewrites() {

apps/formbricks-com/package.json

@@ -28,7 +28,6 @@
     "@paralleldrive/cuid2": "^2.2.2",
     "@sindresorhus/slugify": "^2.2.1",
     "@tailwindcss/typography": "^0.5.10",
-    "@types/node": "20.6.0",
     "@types/react-highlight-words": "^0.16.5",
     "acorn": "^8.10.0",
     "autoprefixer": "^10.4.15",

apps/formbricks-com/pages/404.tsx

@@ -1,5 +1,5 @@
 // 404.js
-import { Button } from "@formbricks/ui";
+import { Button } from "@formbricks/ui/Button";
 
 export default function FourOhFour() {
   return (

apps/formbricks-com/pages/api/oss-friends/index.ts

@@ -34,6 +34,12 @@ export default async function handle(req: NextApiRequest, res: NextApiResponse)
             "The Open-Source DocuSign Alternative. We aim to earn your trust by enabling you to self-host the platform and examine its inner workings.",
           href: "https://documenso.com",
         },
+        {
+          name: "dyrector.io",
+          description:
+            "dyrector.io is an open-source continuous delivery & deployment platform with version management.",
+          href: "https://dyrector.io",
+        },
         {
           name: "Erxes",
           description:
@@ -64,6 +70,12 @@ export default async function handle(req: NextApiRequest, res: NextApiResponse)
             "Open-source authentication and user management for the passkey era. Integrated in minutes, for web and mobile apps.",
           href: "https://www.hanko.io",
         },
+        {
+          name: "Hook0",
+          description:
+            "Open-Source Webhooks-as-a-service (WaaS) that makes it easy for developers to send webhooks.",
+          href: "https://www.hook0.com/",
+        },
         {
           name: "HTMX",
           description:
@@ -115,6 +127,12 @@ export default async function handle(req: NextApiRequest, res: NextApiResponse)
           description: "Open-source solution to deploy, scale, and operate your multiplayer game.",
           href: "https://rivet.gg",
         },
+        {
+          name: "Shelf.nu",
+          description:
+            "Open Source Asset and Equipment tracking software that lets you create QR asset labels, manage and overview your assets across locations.",
+          href: "https://www.shelf.nu/",
+        },
         {
           name: "Sniffnet",
           description:

apps/formbricks-com/pages/blog/first-end-to-endcommunity-feature/index.mdx

@@ -0,0 +1,66 @@
+import Image from "next/image";
+import LayoutMdx from "@/components/shared/LayoutMdx";
+import AuthorBox from "@/components/shared/AuthorBox";
+
+import EmailGIF from "./email-embed.gif";
+import FigmaMock from "./figma-mock.webp";
+import PiyushPR from "./pr-merged.webp";
+
+export const meta = {
+  title: "The first end-to-end community developed feature is live 🚢",
+  description:
+    "We are super excited to share the first end-to-end feature build by the community: From request, over design to code implementation!",
+  date: "2023-10-11",
+  publishedTime: "2023-10-11T12:00:00",
+  authors: ["Johannes"],
+  section: "Open Source Design",
+  tags: ["Open Source Surveys", "Open Source Design", "Design", "Community Design"],
+};
+
+<AuthorBox name="Johannes" title="Co-Founder" date="October 11th, 2023" duration="4" />
+
+<p className="text-lg font-semibold">We are super excited to share the first end-to-end feature built by the community: From request, over design to code implementation ✅</p>
+
+Over the past months, several users requested an easy way to embed Formbricks surveys in an email. The embed should mock the first question and, dependent on the question type, wire the first answer through to the survey:
+
+<Image
+  src={EmailGIF}
+  alt="Email embedding XP"
+  className="rounded-lg w-full"
+/>
+
+### Our Design Repository on GitHub
+
+Since this wasn't a priority for Formbricks, we opened an <a href="https://github.com/formbricks/design/issues/19" target="_blank">issue in our GitHub design repo</a>. Shortly after Aryan reached out and took over the user research and design. Here is the <a href="https://www.figma.com/file/6gtywfMneiONru4A5egbwi/Embedding-Experience?type=design&node-id=82%3A829&mode=design&t=mCsVx1VPtm1vPqgf-1">Figma file</a> he has been working in.
+
+Over a few iterations, we provided Aryan with feedback until we got to a solution which was scoped properly to ship as a community contribution.
+
+<Image
+  src={FigmaMock}
+  alt="Mock up embedding XP"
+  className="rounded-lg w-full"
+/>
+
+### Core contributor chiming in
+
+After the design was done, we wrote up the ticket and reached out to Piyush, one of our most cherished community members. Piyush already built the Link Prefilling so he is familiar with the in's and out's of this feature. Additionally, working with Piyush has been a pleasure: Clear and prompt communication, clean code and quick turnaround!
+
+And so he shipped it! 🚢🚢🚢
+
+<Image
+  src={PiyushPR}
+  alt="Mock up embedding XP"
+  className="rounded-lg w-full"
+/>
+
+### It's merged!
+
+After a final review from our end, we merged the PR and with it the first end-to-end community driven feature!
+
+Open source design isn't really a thing yet. We're super happy to pioneer looping product designers into the Open Source WIN WIN Loop: Young, aspiring designers get the chance to build their portfolio not with mock projects, but solving real problems for real users 😍 
+
+
+### Wanna try it out? 
+<a href="https://app.formbricks.com" target="_blank">Go here!</a>
+
+export default ({ children }) => <LayoutMdx meta={meta}>{children}</LayoutMdx>;

apps/formbricks-com/pages/community.tsx

@@ -1,6 +1,6 @@
 import Layout from "@/components/shared/Layout";
 import HeroTitle from "@/components/shared/HeroTitle";
-import { Button } from "@formbricks/ui";
+import { Button } from "@formbricks/ui/Button";
 import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/outline";
 import { useRouter } from "next/router";
 import { ChatBubbleOvalLeftEllipsisIcon, EnvelopeIcon } from "@heroicons/react/24/solid";

apps/formbricks-com/pages/concierge.tsx

@@ -1,7 +1,7 @@
 import HeroTitle from "@/components/shared/HeroTitle";
 import Layout from "@/components/shared/Layout";
 import Cal, { getCalApi } from "@calcom/embed-react";
-import { Button } from "@formbricks/ui";
+import { Button } from "@formbricks/ui/Button";
 import { useEffect } from "react";
 
 const XMOffer = [
@@ -83,8 +83,8 @@ const ConciergePage = () => {
           </div> */}
           <div className="px-6">
             <Button
-              variant="darkCTA"
-              className="w-full justify-center"
+              // variant="darkCTA"
+              className="w-full justify-center bg-gray-800 text-gray-300 hover:text-white"
               href="https://cal.com/johannes/kick-off"
               target="_blank">
               Schedule free Kick-Off call

apps/formbricks-com/pages/feedback-box/index.tsx

@@ -16,7 +16,7 @@ export default function FeedbackBoxPage() {
             Why is it useful?
           </h3>
           <p className="text-slate-600 dark:text-slate-400">
-            Offering a direct channel for feedback helps you build a better product. Users feel heared and
+            Offering a direct channel for feedback helps you build a better product. Users feel heard and
             with Formbricks automations, you&apos;ll be able to react to feedback rapidly. Lastly, critical
             feedback can be acted upon quickly so that it doesn&apos;t end up on social media.
           </p>

apps/formbricks-com/pages/formtribe/HeaderLight.tsx

@@ -1,5 +1,6 @@
 import Logo from "@/images/formtribe/formtribe-logo.png";
-import { Button, Popover, PopoverContent, PopoverTrigger } from "@formbricks/ui";
+import { Popover, PopoverContent, PopoverTrigger } from "@formbricks/ui/Popover";
+import { Button } from "@formbricks/ui/Button";
 import { Bars3Icon } from "@heroicons/react/24/solid";
 import Image from "next/image";
 import Link from "next/link";
@@ -47,7 +48,7 @@ export default function HeaderLight() {
       </div>
 
       {/* Mobile Menu */}
-      <div className="flex items-center md:hidden">
+      <div className="flex items-center pr-4 md:hidden">
         <Popover open={mobileNavMenuOpen} onOpenChange={setMobileNavMenuOpen}>
           <PopoverTrigger onClick={() => setMobileNavMenuOpen(!mobileNavMenuOpen)}>
             <span>

apps/formbricks-com/pages/formtribe/index.tsx

@@ -1,5 +1,6 @@
 import LayoutLight from "@/pages/formtribe/LayoutLight";
-import { Button, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@formbricks/ui";
+import { Button } from "@formbricks/ui/Button";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@formbricks/ui/Tooltip";
 import Head from "next/head";
 import Image from "next/image";
 
@@ -9,6 +10,7 @@ import Matti from "@/images/formtribe/matti.jpeg";
 import OSSLoop from "@/images/formtribe/oss-loop.png";
 import Mac from "@/images/formtribe/package.jpeg";
 import Pandey from "@/images/formtribe/pandeyman.jpeg";
+import PHLogo from "@/images/formtribe/ph-logo.png";
 import Shubham from "@/images/formtribe/shubham.jpeg";
 import Timeline from "@/images/formtribe/timeline.png";
 import { useEffect } from "react";
@@ -267,12 +269,12 @@ const FAQ = [
 const Leaderboard = [
   {
     name: "Piyush",
-    points: "550",
+    points: "1600",
     link: "https://github.com/gupta-piyush19",
   },
   {
     name: "Suman",
-    points: "200",
+    points: "700",
   },
   {
     name: "Subhdeep",
@@ -280,7 +282,7 @@ const Leaderboard = [
   },
   {
     name: "Pratik",
-    points: "250",
+    points: "350",
   },
   {
     name: "Karuppiah",
@@ -300,7 +302,8 @@ const Leaderboard = [
   },
   {
     name: "Naitik Kapadia (Arjun)",
-    points: "200",
+    points: "1400",
+    link: "https://github.com/KapadiaNaitik",
   },
   {
     name: "Yashhhh",
@@ -332,16 +335,12 @@ const Leaderboard = [
   },
   {
     name: "Eldemarkki",
-    points: "500",
+    points: "600",
   },
   {
     name: "Suyash",
     points: "100",
   },
-  {
-    name: "Rohan Gupta",
-    points: "100",
-  },
   {
     name: "Nafees Nazik",
     points: "100",
@@ -355,25 +354,25 @@ const Leaderboard = [
     points: "100",
   },
   {
-    name: "Ardash Malviya",
-    points: "100",
+    name: "Adarsh Malviya",
+    points: "450",
   },
   {
     name: "Aditya Deshlahre",
-    points: "550",
+    points: "1120",
     link: "https://github.com/adityadeshlahre",
   },
   {
     name: "Rutam",
-    points: "350",
+    points: "955",
   },
   {
     name: "Sagnik Sahoo",
-    points: "100",
+    points: "250",
   },
   {
     name: "Prasoon Mahawar",
-    points: "100",
+    points: "1600",
   },
   {
     name: "Dushmanta",
@@ -389,11 +388,11 @@ const Leaderboard = [
   },
   {
     name: "Rohit Mondal",
-    points: "100",
+    points: "155",
   },
   {
     name: "noobcoder",
-    points: "100",
+    points: "250",
   },
   {
     name: "Rayyan Alam (Rayy)",
@@ -409,8 +408,109 @@ const Leaderboard = [
   },
   {
     name: "Rajarshi Misra",
+    points: "500",
+  },
+  {
+    name: "Anjaneya Gupta",
+    points: "650",
+  },
+  {
+    name: "Sachin Kuber",
     points: "100",
   },
+  {
+    name: "Manpreet Singh",
+    points: "100",
+  },
+  {
+    name: "Vaibhav Gupta",
+    points: "100",
+  },
+  {
+    name: "maciek",
+    points: "650",
+  },
+  {
+    name: "yatharth",
+    points: "600",
+  },
+  {
+    name: "Ratish Jain",
+    points: "150",
+    link: "https://github.com/ratishjain12",
+  },
+  {
+    name: "Subham Raj",
+    points: "500",
+  },
+  {
+    name: "Abhinav Arya",
+    points: "300",
+    link: "github.com/itzabhinavarya",
+  },
+  {
+    name: "Yash Nirmal",
+    points: "100",
+  },
+  {
+    name: "Rohan Gupta",
+    points: "1150",
+    link: "https://github.com/rohan9896",
+  },
+  {
+    name: "Eder Silva",
+    points: "100",
+    link: "https://github.com/edersilva78",
+  },
+  {
+    name: "Eduardo Noronha",
+    points: "100",
+  },
+  {
+    name: "Joyal",
+    points: "650",
+    link: "https://github.com/joyal007",
+  },
+  {
+    name: "zaCKoZAck0",
+    points: "200",
+  },
+  {
+    name: "Viswa Prasath (iamvp7)",
+    points: "100",
+  },
+  {
+    name: "aman4444",
+    points: "100",
+  },
+  {
+    name: "mohit.d404",
+    points: "100",
+  },
+  {
+    name: "0xCgn",
+    points: "100",
+  },
+  {
+    name: "bitnagar",
+    points: "100",
+  },
+  {
+    name: "United1l",
+    points: "250",
+  },
+  {
+    name: "Arya Bhosale",
+    points: "200",
+  },
+  {
+    name: "Bhavya",
+    points: "100",
+  },
+  {
+    name: "Bilal Mirza",
+    points: "150",
+  },
 ];
 
 export default function FormTribeHackathon() {
@@ -431,15 +531,18 @@ export default function FormTribeHackathon() {
       {/* Header */}
 
       <div className="px-4 pb-16 pt-16 text-center sm:px-6 lg:px-8 lg:pb-32 lg:pt-20">
-        <a href="#how" className=" rounded-full border bg-slate-100 px-4 py-1.5 text-sm text-slate-500">
-          Write code, win a Macbook 🔥
+        <a
+          href="https://www.producthunt.com/products/formbricks"
+          target="_blank"
+          className=" rounded-full border bg-slate-100 px-4 py-1.5 text-sm text-slate-500 hover:scale-105">
+          Don&apos;t miss the launch! Get notified 🚀
         </a>
         <h1 className="mt-10 text-3xl font-bold tracking-tight text-slate-800 dark:text-slate-200 sm:text-4xl md:text-5xl">
-          <span className="xl:inline">Let&apos;s ship Open Source Typeform during Hacktoberfest</span>
+          <span className="xl:inline">Write code, win a MacBook Air M2</span>
         </h1>
 
         <p className="xs:max-w-none mx-auto mt-3 max-w-xs text-base text-slate-500 dark:text-slate-400 sm:text-lg md:mt-6 md:text-xl">
-          Can we build an open source Typeform alternative in 30 days?
+          Can our community build an open source Typeform alternative during Hacktoberfest?
         </p>
       </div>
 
@@ -457,7 +560,7 @@ export default function FormTribeHackathon() {
         {/* Right Column: Headline + Ordered List */}
         <div className="flex items-center justify-center sm:pl-12 md:w-1/2">
           <div className="space-y-5">
-            <h1 className="font-kablammo text-3xl font-bold text-slate-800">In a nutshell</h1>
+            <h1 className="font-kablammo text-3xl text-slate-800">In a nutshell</h1>
             <ol className="list-inside list-decimal space-y-3 text-slate-700">
               <li>
                 <strong>As a community,</strong> we will ship all link survey features for a Typeform like
@@ -676,7 +779,7 @@ export default function FormTribeHackathon() {
 
       {/* Side Quests */}
       <div className="mt-16" id="side-quests">
-        <h3 className="font-kablammo my-4 text-4xl font-bold text-slate-800">
+        <h3 className="font-kablammo my-4 text-4xl text-slate-800">
           🏰 Side Quests: Increase your chances
         </h3>
         <p className="w-3/4 text-slate-600">
@@ -813,7 +916,7 @@ export default function FormTribeHackathon() {
 
       {/* FAQ */}
       <div className="mt-32" id="faq">
-        <h3 className="font-kablammo my-4 text-4xl font-bold text-slate-800">FAQ</h3>
+        <h3 className="font-kablammo my-4 text-4xl text-slate-800">FAQ</h3>
         <p className="w-3/4 text-slate-600">Anything unclear?</p>
         <div className="mt-8">
           {FAQ.map((question) => (
@@ -838,51 +941,67 @@ export default function FormTribeHackathon() {
 const SectionHeading = ({ title, subTitle, description, id }) => {
   return (
     <div id={id} className="lg:pt-18 mt-32 px-4 pb-12 text-center sm:px-6 lg:px-8 ">
-      <p className=" text-[3rem] text-slate-500">{subTitle}</p>
-      <h1 className="font-kablammo mb-8 mt-4 bg-gradient-to-br from-[#032E1E] via-[#032E1E] to-[#013C27] bg-clip-text text-6xl text-transparent">
+      <p className="text-xl lg:text-[3rem] pb-4 text-slate-500">{subTitle}</p>
+      <h1 className="font-kablammo mb-8 mt-4 bg-gradient-to-br from-[#032E1E] via-[#032E1E] to-[#013C27] bg-clip-text text-4xl lg:text-6xl text-transparent">
         {title}
       </h1>
-      <p className="mx-auto mt-4 text-slate-700 sm:w-3/4">{description}</p>
+      <p className="mx-auto mt-4 text-base text-slate-700 sm:w-3/4">{description}</p>{" "}
+      {/* Reduced text size for description */}
     </div>
   );
 };
 
 const Breaker = ({ icon, title }) => {
   return (
-    <div
-      id="join"
-      className="rounded-lg-12 mt-12 rounded-lg bg-slate-200 px-4 py-12 shadow-inner sm:mt-20 sm:grid sm:grid-cols-6">
-      <div className="col-span-2 mr-8 flex items-center justify-center sm:justify-end">
-        <div className="h-24 w-24 rounded-full bg-white"></div>
-        <div className="absolute -mt-4 animate-bounce text-[6rem]">{icon}</div>
-      </div>
-      <div className="col-span-4">
-        <h3 className="mt-8 text-xl font-bold sm:mt-0">{title}</h3>
-        <p className="mb-4 mt-1 text-slate-500">Get notified on launch plus a weekly update:</p>
-        <form method="post" action="https://listmonk.formbricks.com/subscription/form">
-          <div className="hidden">
-            <input type="hidden" name="nonce" />
-            <input id="5d65b" type="checkbox" name="l" checked value="5d65bc6e-e685-4694-8c8e-9b20d7be6c40" />
-          </div>
-          <div className="mt-2 sm:flex">
-            <div className="">
+    <div id="join">
+      <div className="rounded-lg-12 mt-12 rounded-lg bg-slate-200 px-4 py-12 shadow-inner sm:mt-20 sm:grid sm:grid-cols-6">
+        <div className="col-span-2 mr-8 flex items-center justify-center sm:justify-end">
+          <div className="h-24 w-24 rounded-full bg-white"></div>
+          <div className="absolute -mt-4 animate-bounce text-[6rem]">{icon}</div>
+        </div>
+        <div className="col-span-4">
+          <h3 className="mt-8 text-xl font-bold sm:mt-0">{title}</h3>
+          <p className="mb-4 mt-1 text-slate-500">Get notified on launch plus a weekly update:</p>
+          <form method="post" action="https://listmonk.formbricks.com/subscription/form">
+            <div className="hidden">
+              <input type="hidden" name="nonce" />
               <input
-                type="email"
-                name="email"
-                placeholder="Your email"
-                aria-placeholder="your-email"
-                required
-                className="block h-12 w-full rounded-lg border-0 px-3 py-2 text-sm text-slate-900 sm:mr-4 sm:h-full sm:w-64"
+                id="5d65b"
+                type="checkbox"
+                name="l"
+                checked
+                value="5d65bc6e-e685-4694-8c8e-9b20d7be6c40"
               />
             </div>
-            <Button
-              variant="highlight"
-              type="submit"
-              className="mt-2 inline w-full justify-center bg-gradient-to-br from-[#032E1E] via-[#032E1E] to-[#013C27] text-white sm:ml-2 sm:mt-0 sm:w-40 ">
-              Join the Tribe
-            </Button>
-          </div>
-        </form>
+            <div className="mt-2 sm:flex">
+              <div className="">
+                <input
+                  type="email"
+                  name="email"
+                  placeholder="Your email"
+                  aria-placeholder="your-email"
+                  required
+                  className="block h-12 w-full rounded-lg border-0 px-3 py-2 text-sm text-slate-900 sm:mr-4 sm:h-full sm:w-64"
+                />
+              </div>
+              <Button
+                variant="highlight"
+                type="submit"
+                className="mt-2 inline w-full justify-center bg-gradient-to-br from-[#032E1E] via-[#032E1E] to-[#013C27] text-white sm:ml-2 sm:mt-0 sm:w-40 ">
+                Join the Tribe
+              </Button>
+            </div>
+          </form>
+        </div>
+      </div>
+      <div className="mt-4 flex items-center justify-center">
+        <Image src={PHLogo} alt="ph-logo" className="mr-2 h-8 w-8" />
+        <a
+          href="https://www.producthunt.com/products/formbricks"
+          target="_blank"
+          className="text-sm font-semibold text-[#ff6154]">
+          Get notified on Product Hunt.
+        </a>
       </div>
     </div>
   );

apps/formbricks-com/pages/gdpr-guide.mdx

@@ -21,7 +21,7 @@ It is **your responsibility to create a GDPR compliant form when you collect per
 
 You have to collect consent from your respondents to comply with the GDPR framework. The consent must be freely given, specific, informed, and unambiguous. It has to be very clear why you collect personal data, how you intend to use it and if it will be shared with any third parties. The respondent has to be aware that they are giving you permission to use their personal data.
 
-This is usually done with a seperate checkbox.
+This is usually done with a separate checkbox.
 
 ### 2. Inform respondents about their rights
 

apps/formbricks-com/pages/index.tsx

@@ -3,6 +3,7 @@ import Features from "@/components/home/Features";
 import GitHubSponsorship from "@/components/home/GitHubSponsorship";
 import Hero from "@/components/home/Hero";
 import Highlights from "@/components/home/Highlights";
+import ScrollToTopButton from "@/components/home/ScrollToTop";
 import Steps from "@/components/home/Steps";
 import BestPractices from "@/components/shared/BestPractices";
 import BreakerCTA from "@/components/shared/BreakerCTA";
@@ -19,6 +20,7 @@ const IndexPage = () => (
     <BestPractices />
     <Features />
     <Highlights />
+    <ScrollToTopButton />
     <div className="block lg:hidden">
       <GitHubSponsorship />
     </div>

apps/formbricks-com/pages/interview-prompt/index.tsx

@@ -8,7 +8,7 @@ export default function InterviewPromptPage() {
   return (
     <Layout
       title="Interview Prompt with Formbricks"
-      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.">
       <div className="grid grid-cols-1 items-center md:grid-cols-2 md:gap-12 md:py-20">
         <div className="p-6 md:p-0">
           <UseCaseHeader title="Interview Prompt" difficulty="Easy" setupMinutes="15" />

apps/formbricks-com/pages/oss-friends.tsx

@@ -1,6 +1,6 @@
-import Layout from "@/components/shared/Layout";
 import HeroTitle from "@/components/shared/HeroTitle";
-import { Button } from "@formbricks/ui";
+import Layout from "@/components/shared/Layout";
+import { Button } from "@formbricks/ui/Button";
 
 type OSSFriend = {
   href: string;
@@ -18,19 +18,21 @@ export default function OSSFriendsPage({ OSSFriends }: Props) {
       <HeroTitle headingPt1="Our" headingTeal="Open-source" headingPt2="Friends" />
       <div className="m-4 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
         {OSSFriends.map((friend, index) => (
-          <div key={index} className="overflow-hidden rounded bg-slate-100 p-6 shadow-md">
-            <a href={friend.href} className="mb-2 text-xl font-bold">
+          <div key={index} className="overflow-hidden rounded bg-slate-100 dark:bg-slate-800 p-6 shadow-md">
+            <a href={friend.href} className="mb-2 text-xl font-bold text-slate-900 dark:text-slate-100">
               {friend.name}
             </a>
-            <p className="mt-4 text-sm text-gray-700">{friend.description}</p>
+            <p className="mt-4 text-sm text-slate-700 dark:text-slate-300">{friend.description}</p>
             <div className="mt-4">
-              <Button target="_blank" variant="primary" href={friend.href}>
+              <Button target="_blank" variant="secondary" href={friend.href}>
                 Learn more
               </Button>
             </div>
           </div>
         ))}
       </div>
+      <div className="text-center mt-4">
+      <Button variant="minimal" className="dark:text-slate-400" href="https://formbricks.com/clhys1p9r001cpr0hu65rwh17" target="_blank">Wanna join OSS Friends?</Button></div>
     </Layout>
   );
 }

apps/storybook/.eslintrc.cjs

@@ -0,0 +1,14 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:react-hooks/recommended', 'plugin:storybook/recommended'],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

apps/storybook/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

apps/storybook/.storybook/main.ts

@@ -0,0 +1,28 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+import { join, dirname } from "path";
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, "package.json")));
+}
+const config: StorybookConfig = {
+  stories: ["../../../packages/ui/**/stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    getAbsolutePath("@storybook/addon-links"),
+    getAbsolutePath("@storybook/addon-essentials"),
+    getAbsolutePath("@storybook/addon-onboarding"),
+    getAbsolutePath("@storybook/addon-interactions"),
+  ],
+  framework: {
+    name: getAbsolutePath("@storybook/react-vite"),
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+};
+export default config;

apps/storybook/.storybook/preview.ts

@@ -0,0 +1,15 @@
+import type { Preview } from "@storybook/react";
+import "../src/index.css";
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

apps/storybook/README.md

@@ -0,0 +1,27 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+   parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    project: ['./tsconfig.json', './tsconfig.node.json'],
+    tsconfigRootDir: __dirname,
+   },
+```
+
+- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
+- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list

apps/storybook/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>