chore: remove experimental server actions flag (#1484)

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

.env.example

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

.github/PULL_REQUEST_TEMPLATE.md

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

.github/workflows/build.yml

@@ -27,7 +27,7 @@ jobs:
 
       - name: Generate Random NEXTAUTH_SECRET
         run: |
-          SECRET=$(openssl rand -base64 24)
+          SECRET=$(openssl rand -hex 32)
           echo "ENCRYPTION_KEY=$SECRET" >> $GITHUB_ENV
 
       - name: Build Formbricks-web

.github/workflows/lint.yml

@@ -27,7 +27,7 @@ jobs:
 
       - name: Generate Random NEXTAUTH_SECRET
         run: |
-          SECRET=$(openssl rand -base64 24)
+          SECRET=$(openssl rand -hex 32)
           echo "ENCRYPTION_KEY=$SECRET" >> $GITHUB_ENV
 
       - name: Lint

.github/workflows/release-docker.yml

@@ -16,12 +16,12 @@ jobs:
     steps:
       - name: Generate Random NEXTAUTH_SECRET
         run: |
-          SECRET=$(openssl rand -hex 16)
+          SECRET=$(openssl rand -hex 32)
           echo "NEXTAUTH_SECRET=$SECRET" >> $GITHUB_ENV
 
-      - name: Generate Random NEXTAUTH_SECRET
+      - name: Generate Random ENCRYPTION_KEY
         run: |
-          SECRET=$(openssl rand -base64 24)
+          SECRET=$(openssl rand -hex 32)
           echo "ENCRYPTION_KEY=$SECRET" >> $GITHUB_ENV
 
       - name: Checkout Repo
@@ -55,3 +55,4 @@ jobs:
           build-args: |
             NEXTAUTH_SECRET=${{ env.NEXTAUTH_SECRET }}
             DATABASE_URL=${{ env.DATABASE_URL }}
+            ENCRYPTION_KEY=${{ env.ENCRYPTION_KEY }}

.gitpod.yml

@@ -10,7 +10,7 @@ tasks:
       gp sync-await init && 
       turbo --filter "@formbricks/demo" go
 
-  - name : website
+  - name: website
     command: gp sync-await init && turbo --filter "@formbricks/formbricks-com" dev
 
   - name: Init Formbricks
@@ -34,12 +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)
+      RANDOM_ENCRYPTION_KEY=$(openssl rand -hex 32)
       sed -i 's/^ENCRYPTION_KEY=.*/ENCRYPTION_KEY='"$RANDOM_ENCRYPTION_KEY"'/' .env
       turbo --filter "@formbricks/web" go
-      
+
 image:
   file: .gitpod.Dockerfile
 
@@ -62,7 +60,7 @@ ports:
   - port: 8025
     visibility: public
     onOpen: open-browser
-    
+
 github:
   prebuilds:
     master: true
@@ -77,4 +75,4 @@ vscode:
     - "dbaeumer.vscode-eslint"
     - "esbenp.prettier-vscode"
     - "Prisma.prisma"
-    - "yzhang.markdown-all-in-one"
+    - "yzhang.markdown-all-in-one"

.husky/pre-commit

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

.npmrc

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

CODE_OF_CONDUCT.md

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

CONTRIBUTING.md

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

README.md

@@ -1,3 +1,4 @@
+<div id="top"></div>
 <p align="center">
 <a href="https://formbricks.com">
     <img width="120" alt="Open Source Experience Management Solution Qualtrics Alternative Logo" src="https://github.com/formbricks/formbricks/assets/72809645/0086704f-bee7-4d38-9cc8-fa42ee59e004">
@@ -29,6 +30,10 @@
 <a href="https://neverinstall.com/"><img src="https://github.com/formbricks/formbricks/assets/675065/72e5e37b-8ef7-4340-b06e-f1d12a05330f#gh-light-mode-only" height="20px"></a><a href="https://neverinstall.com/"><img src="https://github.com/formbricks/formbricks/assets/72809645/9d9711dc-75e5-4084-b7fa-bbaf621064a8#gh-dark-mode-only" height="20px">
 </p>
 
+<p align="center">
+  <a href="https://trendshift.io/repositories/2570" target="_blank"><img src="https://trendshift.io/api/badge/repositories/2570" alt="Trendshift Badge for formbricks/formbricks" style="width: 250px; height: 55px;" width="250" height="55"/></a>
+</p>
+
 <img width="1527" alt="formtribe hackathon" src="https://github.com/formbricks/formbricks/assets/72809645/addc3a5b-421c-4c8d-8be2-eedf087100ed">
 
 ## 🔥 The FormTribe Hackathon is on!
@@ -145,8 +150,10 @@ Let's have a chat about your survey needs and get you started.
 
 ## ⚖️ License
 
-Distributed under the AGPLv3 License. See `LICENSE` for more information.
+Distributed under the AGPLv3 License. See [`LICENSE`](./LICENSE) for more information.
 
 ## 🔒 Security
 
-We take security very seriously. If you come across any security vulnerabilities, please disclose them by sending an email to security@formbricks.com. We appreciate your help in making our platform as secure as possible and are committed to working with you to resolve any issues quickly and efficiently. See `SECURITY.md` for more information.
+We take security very seriously. If you come across any security vulnerabilities, please disclose them by sending an email to security@formbricks.com. We appreciate your help in making our platform as secure as possible and are committed to working with you to resolve any issues quickly and efficiently. See [`SECURITY.md`](./SECURITY.md) for more information.
+
+<p align="right"><a href="#top">🔼 Back to top</a></p>

apps/demo/.env.example

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

apps/demo/package.json

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

apps/demo/pages/app/index.tsx

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

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

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

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

@@ -1,7 +1,7 @@
 export const meta = {
   title: "Implementing Code Actions in Formbricks | Real-time User Action Tracking",
   description:
-    "Dive into the world of Formbricks' code actions. Learn how to seamlessly integrate formbricks.track() method into your codebase, enabling real-time tracking of user actions like button clicks, visiting a specfic URL. Up your survey game with precise and exact triggers.",
+    "Dive into the world of Formbricks' code actions. Learn how to seamlessly integrate formbricks.track() method into your codebase, enabling real-time tracking of user actions like button clicks, visiting a specific URL. Up your survey game with precise and exact triggers.",
 };
 
 #### Actions
@@ -31,4 +31,4 @@ return <button onClick={handleClick}>Click Me</button>;
 ```
 
 </CodeGroup>
-</Col>
+</Col>

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

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

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

@@ -1,6 +1,7 @@
 export const meta = {
   title: "Formbricks Development Setup: Complete Guide to Local Environment Configuration for Dev",
-  description: "Step-by-step guide to setting up your local development environment for Formbricks. Includes installing essential tools like Node.JS, pnpm, and Docker, and accessing the entire Formbricks stack including the Demo app and the main website",
+  description:
+    "Step-by-step guide to setting up your local development environment for Formbricks. Includes installing essential tools like Node.JS, pnpm, and Docker, and accessing the entire Formbricks stack including the Demo app and the main website",
 };
 
 #### Contributing
@@ -14,6 +15,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">
 
@@ -33,7 +35,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">
 
@@ -43,7 +47,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">
 
@@ -53,18 +59,21 @@ 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
+   openssl rand -hex 32
    ```
 
    </CodeGroup>
 </Col>
 
 1. Make sure you have [`Docker`](https://docs.docker.com/compose/) & [`docker-compose`](https://docs.docker.com/compose/) installed and running on your machine. Then run the following command to start the formbricks dev setup:
+
 <Col>
    <CodeGroup title="Start Formbricks Dev Setup">
 
@@ -86,6 +95,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">
 
@@ -98,6 +108,7 @@ pnpm build
 ### 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">
 
@@ -112,6 +123,7 @@ 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">
 

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

@@ -45,7 +45,7 @@ All you need to do is copy a `<script>` tag to your HTML head, and that’s abou
 ```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.1.0/dist/index.umd.cjs";var e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e),setTimeout(function(){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 -->
 ```

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

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

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

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

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

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

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

@@ -168,14 +168,6 @@ cd formbricks && docker compose logs -f
 </Col>
 You can close the logs again with `CTRL + C`.
 
-<Note>
-## Customizing the Build Time variables
-
-To edit any of the variables that start with `NEXT_PUBLIC_`, you need to rebuild the Formbricks Docker from source! It is just one
-more added step and is not as much of a hassle as you think! Please check the [Building from Source](/docs/self-hosting/from-source) section!
-
-</Note>
-
 ## Troubleshooting
 
 If you encounter any issues, consider the following steps:

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

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

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

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

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

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

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

@@ -247,7 +247,7 @@ export const navigation: Array<NavGroup> = [
       { title: "Production", href: "/docs/self-hosting/production" },
       { title: "Docker", href: "/docs/self-hosting/docker" },
       { title: "From Source", href: "/docs/self-hosting/from-source" },
-      { title: "Migration to v1.1", href: "/docs/self-hosting/migrating-to-1.1" },
+      { title: "Migration Guide", href: "/docs/self-hosting/migration-guide" },
     ],
   },
   {

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

@@ -1,5 +1,5 @@
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@formbricks/ui/Select";
 import { Button } from "@formbricks/ui/Button";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@formbricks/ui/Select";
 import { PlusIcon, TrashIcon } from "@heroicons/react/24/solid";
 import { useState } from "react";
 
@@ -31,7 +31,7 @@ const DummyUI: React.FC = () => {
       {triggers.map((triggerEventClassId, idx) => (
         <div className="mt-2" key={idx}>
           <div className="flex items-center gap-2">
-            <p className="mr-2 w-14 text-right text-sm text-slate-800 dark:text-slate-300">
+            <p className="mr-2 w-10 text-right text-sm text-slate-800 dark:text-slate-300">
               {idx === 0 ? "When" : "or"}
             </p>
             <Select
@@ -57,7 +57,7 @@ const DummyUI: React.FC = () => {
           </div>
         </div>
       ))}
-      <div className="w-fit p-3">
+      <div className="ml-4 w-fit p-3">
         <Button
           variant="secondary"
           className="xs:text-base w-fit text-xs dark:bg-slate-700 dark:text-slate-200 dark:hover:bg-slate-600"

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -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="https://unpkg.com/@formbricks/js@^1.1.0/dist/index.umd.cjs";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/shared/BestPracticeNavigation.tsx

@@ -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",
     },
     {
@@ -84,7 +84,7 @@ export default function BestPracticeNavigation() {
     <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-6 transition-all ease-in-out hover:scale-105 hover:cursor-pointer dark:bg-slate-800">
+          <div className="drop-shadow-card duration-120 hover:border-brand-dark relative rounded-lg border border-slate-100 bg-slate-100 p-6 transition-all ease-in-out hover:scale-105 hover:cursor-pointer dark:border-slate-600 dark:bg-slate-800">
             <div
               className={clsx(
                 // base styles independent what type of button it is

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

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

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

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

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

@@ -1,5 +1,6 @@
 import Link from "next/link";
 import { FooterLogo } from "./Logo";
+import { FaGithub, FaXTwitter, FaDiscord } from "react-icons/fa6";
 
 const navigation = {
   other: [
@@ -13,29 +14,23 @@ const navigation = {
     {
       name: "Twitter",
       href: "https://twitter.com/formbricks",
-      icon: (props: any) => (
-        <svg fill="currentColor" viewBox="0 0 24 24" {...props}>
-          <path d="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>
-      ),
+      icon: FaXTwitter,
     },
     {
       name: "GitHub",
       href: "https://github.com/formbricks/formbricks",
-      icon: (props: any) => (
-        <svg fill="currentColor" viewBox="0 0 24 24" {...props}>
-          <path
-            fillRule="evenodd"
-            d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
-            clipRule="evenodd"
-          />
-        </svg>
-      ),
+      icon: FaGithub,
+    },
+    {
+      name: "Discord",
+      href: "https://formbricks.com/discord",
+      icon: FaDiscord,
     },
   ],
 };
-
 export default function Footer() {
+  const currentYear = new Date().getFullYear();
+
   return (
     <footer
       className="mt-32 bg-gradient-to-b from-slate-50 to-slate-200 dark:from-slate-900 dark:to-slate-800"
@@ -51,7 +46,7 @@ export default function Footer() {
         <p className="text-base text-slate-500 dark:text-slate-400">Privacy-first Experience Management</p>
         <div className="border-slate-500">
           <p className="text-sm text-slate-400 dark:text-slate-500">
-            Formbricks GmbH &copy; 2022. All rights reserved.
+            Formbricks GmbH &copy; {currentYear}. All rights reserved.
             <br />
             <Link href="/imprint">Imprint</Link> | <Link href="/privacy">Privacy Policy</Link> |{" "}
             <Link href="/terms">Terms</Link> | <Link href="/oss-friends">OSS Friends</Link>

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

@@ -1,5 +1,6 @@
 import GitHubMarkWhite from "@/images/github-mark-white.svg";
 import GitHubMarkDark from "@/images/github-mark.svg";
+import { Button } from "@formbricks/ui/Button";
 import {
   BaseballIcon,
   CancelSubscriptionIcon,
@@ -10,7 +11,6 @@ import {
   OnboardingIcon,
   PMFIcon,
 } 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";
@@ -18,7 +18,7 @@ import { usePlausible } from "next-plausible";
 import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { Fragment, useState } from "react";
+import { Fragment, useEffect, useState } from "react";
 import { FooterLogo } from "./Logo";
 import { ThemeSelector } from "./ThemeSelector";
 
@@ -99,10 +99,29 @@ export default function Header() {
   const [mobileSubOpen, setMobileSubOpen] = useState(false);
   const plausible = usePlausible();
   const router = useRouter();
+  const [stickyNav, setStickyNav] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      if (window.scrollY > 250) {
+        setStickyNav(true);
+      } else {
+        setStickyNav(false);
+      }
+    };
+    window.addEventListener("scroll", handleScroll);
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+
+  const stickyNavClass = stickyNav
+    ? `bg-transparent dark:bg-slate-900/[0.8] shadow-md backdrop-blur-lg fixed top-0 z-30 w-full`
+    : "relative";
   return (
-    <Popover className="relative" as="header">
+    <Popover className={`${stickyNavClass}`} as="header">
       <a href="https://www.producthunt.com/products/formbricks" target="_blank">
-        <div className="bg-[#ff6154] text-center text-sm text-white">
+        <div className="hidden bg-[#ff6154] px-4 py-2 text-center text-sm text-white md:block lg:py-0">
           We&apos;re launching soon on Product Hunt - get notified 🚀
         </div>
       </a>
@@ -126,9 +145,9 @@ export default function Header() {
                 <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 className="text-sm lg:text-base">Best Practices</span>
                   <ChevronDownIcon
@@ -374,7 +393,7 @@ export default function Header() {
                   </div>
                 )}
                 <Link href="/concierge">Concierge</Link>
-                <Link href="#pricing">Pricing</Link>
+                <Link href="/pricing">Pricing</Link>
                 <Link href="/docs">Docs</Link>
                 <Link href="/blog">Blog</Link>
                 {/*   <Link href="/careers">Careers</Link> */}

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

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

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

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

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

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

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

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

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

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

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

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

apps/formbricks-com/next.config.mjs

@@ -135,6 +135,26 @@ const nextConfig = {
         destination: "https://www.producthunt.com/products/formbricks",
         permanent: true,
       },
+      {
+        source: "/docs/self-hosting/from-source",
+        destination: "/docs/self-hosting/docker",
+        permanent: true,
+      },
+      {
+        source: "/join-oss-friends",
+        destination: "https://app.formbricks.com/s/clhys1p9r001cpr0hu65rwh17",
+        permanent: true,
+      },
+      {
+        source: "/docs/self-hosting/migrating-to-1.1",
+        destination: "/docs/self-hosting/migration-guide",
+        permanent: true,
+      },
+      {
+        source: "/cla",
+        destination: "https://formbricks.com/clmyhzfrymr4ko00hycsg1tvx",
+        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",
@@ -39,7 +38,7 @@
     "lottie-web": "^5.12.2",
     "mdast-util-to-string": "^4.0.0",
     "mdx-annotations": "^0.1.3",
-    "next": "13.4.19",
+    "next": "13.5.5",
     "next-plausible": "^3.11.1",
     "next-seo": "^6.1.0",
     "next-sitemap": "^4.2.3",

apps/formbricks-com/pages/_app.tsx

@@ -2,10 +2,21 @@ import PlausibleProvider from "next-plausible";
 import type { AppProps } from "next/app";
 import "../styles/globals.css";
 
+import { Jost } from "next/font/google";
+
+const jost = Jost({
+  weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
+  style: ["normal", "italic"],
+  subsets: ["latin"],
+  display: "swap",
+});
+
 export default function App({ Component, pageProps }: AppProps) {
   return (
-    <PlausibleProvider domain="formbricks.com" selfHosted={true}>
-      <Component {...pageProps} />
-    </PlausibleProvider>
+    <div className={jost.className}>
+      <PlausibleProvider domain="formbricks.com" selfHosted={true}>
+        <Component {...pageProps} />
+      </PlausibleProvider>
+    </div>
   );
 }

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

@@ -52,6 +52,11 @@ export default async function handle(req: NextApiRequest, res: NextApiResponse)
             "Survey granular user segments at any point in the user journey. Gather up to 6x more insights with targeted micro-surveys. All open-source.",
           href: "https://formbricks.com",
         },
+        {
+          name: "Firecamp",
+          description: "vscode for apis, open-source postman/insomnia alternative",
+          href: "https://firecamp.io",
+        },
         {
           name: "Ghostfolio",
           description:
@@ -127,11 +132,23 @@ 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:
             "Sniffnet is a network monitoring tool to help you easily keep track of your Internet traffic.",
           href: "https://www.sniffnet.net",
+        },
+         {
+          name: "Spark.NET",
+          description:
+            "The .NET Web Framework for Makers. Build production ready, full-stack web applications fast without sweating the small stuff.",
+          href: "https://spark-framework.net",
         },
         {
           name: "Tolgee",
@@ -167,12 +184,6 @@ export default async function handle(req: NextApiRequest, res: NextApiResponse)
           description: "Webstudio is an open source alternative to Webflow",
           href: "https://webstudio.is",
         },
-        {
-          name: "Spark.NET",
-          description:
-            "The .NET Web Framework for Makers. Build production ready, full-stack web applications fast without sweating the small stuff.",
-          href: "https://spark-framework.net",
-        },
       ],
     });
   }

apps/formbricks-com/pages/concierge.tsx

@@ -55,7 +55,7 @@ const ConciergePage = () => {
         headingPt2="Service"
         subheading="Let's set up your system for continuous user discovery together."
       />
-      <div className="-mt-16 grid grid-cols-1 space-y-4 px-4 md:grid-cols-2 md:gap-8 md:px-16">
+      <div className="-mt-16 grid grid-cols-1 space-y-4 px-4 md:gap-8 md:px-16 lg:grid-cols-2">
         <div className="rounded-xl bg-slate-100 p-12">
           {XMOffer.map((offer) => (
             <div key={offer.step} className="mb-8 flex items-center gap-x-4">
@@ -68,36 +68,21 @@ const ConciergePage = () => {
               </div>
             </div>
           ))}
-          {/*           <div className="border-b border-t border-slate-300 p-6  text-4xl font-semibold text-slate-800">
-            <p className="mr-2 font-light">$1.290</p>
-          </div>
-{          <div className="border-t border-slate-300 p-6 text-sm text-slate-800">
-            <p>
-              <CheckBadgeIcon className="mr-1 inline h-5 w-5 text-slate-800" />
-              100% Risk-free: Pay after the kick-off call, if you liked it.
-            </p>
-            <p>
-              <CheckBadgeIcon className="mr-1 inline h-5 w-5 text-slate-800" />
-              Money-back: If you&apos;re not happy, get a full refund.
-            </p>
-          </div> */}
           <div className="px-6">
             <Button
-              variant="darkCTA"
-              className="w-full justify-center"
+              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
             </Button>
           </div>
         </div>
-        <div className="!mt-0 rounded-xl">
+        <div className="ml-2 w-full rounded-xl md:!mt-0 lg:ml-0">
           <Cal
             calLink="johannes/kick-off"
             style={{
               width: "100%",
               height: "100%",
-              overflow: "scroll",
               borderRadius: "0.5rem",
             }}
             config={{ layout: "month_view" }}

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

@@ -0,0 +1,43 @@
+import { Button } from "@formbricks/ui/Button";
+import { Popover } from "@headlessui/react";
+import { usePlausible } from "next-plausible";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { FooterLogo } from "../../components/shared/Logo";
+
+export default function HeaderLight() {
+  const plausible = usePlausible();
+  const router = useRouter();
+  return (
+    <Popover className="relative" as="header">
+      <div className="max-w-8xl mx-auto flex items-center justify-between py-6 sm:px-2  md:justify-start lg:px-8 xl:px-12">
+        <div className="flex w-0 flex-1 justify-start">
+          <Link href="/">
+            <span className="sr-only">Formbricks</span>
+            <FooterLogo className="ml-7 h-8 w-auto sm:h-10" />
+          </Link>
+        </div>
+
+        <div className="hidden flex-1 items-center justify-end md:flex">
+          <Button
+            variant="secondary"
+            onClick={() => {
+              router.push("https://cal.com/johannes/formbricks-demo");
+              plausible("Demo_CTA_TalkToUs");
+            }}>
+            Talk to us
+          </Button>
+          <Button
+            variant="highlight"
+            className="ml-2"
+            onClick={() => {
+              router.push("https://app.formbricks.com/auth/signup");
+              plausible("Demo_CTA_TryForFree");
+            }}>
+            Start for free
+          </Button>
+        </div>
+      </div>
+    </Popover>
+  );
+}

apps/formbricks-com/pages/demo/LayoutLight.tsx

@@ -10,11 +10,11 @@ interface LayoutProps {
 
 export default function Layout({ title, description, children }: LayoutProps) {
   return (
-    <div className="max-w-8xl mx-auto">
+    <div className="mx-auto w-full">
       <MetaInformation title={title} description={description} />
       <HeaderLight />
       {
-        <main className="relative mx-auto flex w-full max-w-6xl flex-col justify-center px-2 lg:px-8 xl:px-12">
+        <main className="max-w-8xl relative mx-auto flex w-full flex-col justify-center px-2 lg:px-8 xl:px-12">
           {children}
         </main>
       }

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

@@ -1,5 +1,5 @@
 import DemoView from "@/components/dummyUI/DemoView";
-import LayoutWaitlist from "@/pages/formtribe/LayoutLight";
+import LayoutWaitlist from "@/pages/demo/LayoutLight";
 
 export default function DemoPage() {
   return (

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

@@ -16,8 +16,8 @@ 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
-            with Formbricks automations, you&apos;ll be able to react to feedback rapidly. Lastly, critical
+            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>
           <h3 className="text-md mb-1.5 mt-6 font-semibold text-slate-800 dark:text-slate-200">

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

@@ -48,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/LayoutTribe.tsx

@@ -0,0 +1,24 @@
+import Footer from "../../components/shared/Footer";
+import MetaInformation from "../../components/shared/MetaInformation";
+import HeaderTribe from "./HeaderTribe";
+
+interface LayoutProps {
+  children: React.ReactNode;
+  title: string;
+  description: string;
+}
+
+export default function Layout({ title, description, children }: LayoutProps) {
+  return (
+    <div className="max-w-8xl mx-auto">
+      <MetaInformation title={title} description={description} />
+      <HeaderTribe />
+      {
+        <main className="relative mx-auto flex w-full max-w-6xl flex-col justify-center px-2 lg:px-8 xl:px-12">
+          {children}
+        </main>
+      }
+      <Footer />
+    </div>
+  );
+}

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

@@ -1,8 +1,8 @@
-import LayoutLight from "@/pages/formtribe/LayoutLight";
 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";
+import LayoutTribe from "./LayoutTribe";
 
 import Dhru from "@/images/formtribe/dhru.jpeg";
 import Jojo from "@/images/formtribe/jojo.jpeg";
@@ -50,21 +50,11 @@ const HowTo = [
 ];
 
 const SideQuests = [
-  {
-    points: "Join the Tribe Tweet (100 Points)",
-    quest: "Tweet a single “🧱” emoji before the 7th of October EOD to join the #FormTribe.",
-    proof: "Share the link to the tweet in the “side-quest” channel.",
-  },
   {
     points: "Spread the Word Tweet (100 Points)",
     quest: "Tweet “🧱🚀” on the day of the ProductHunt launch to spread the word.",
     proof: "Share the link to the tweet in the “side-quest” channel.",
   },
-  {
-    points: "Setup Insights (200 Points)",
-    quest: "Screen record yourself setting up the Formbricks dev environment.",
-    proof: "Upload to WeTransfer and send to johannes@formbricks.com",
-  },
   {
     points: "Meme Magic (50 Points + up to 100 Points)",
     quest:
@@ -82,25 +72,15 @@ const SideQuests = [
     quest: "Illustrate a captivating background for survey enthusiasts (more infos on Notion).",
     proof: "Share the design in the “side-quest” channel.",
   },
-  {
-    points: "Transform Animation to CSS (350 Points per background)",
-    quest: "Animate an existing background to CSS versions (more infos on Notion).",
-    proof: "Share the animated background.",
-  },
-  {
-    points: "Enhance Docs (50-250 Points)",
-    quest:
-      "Add a new section to our docs where you see gaps. Follow the current style of documentation incl. code snippets and screenshots. Pls no spam.",
-    proof: "Open a PR with “docs” in the title",
-  },
   {
     points: "Starry-eyed Supporter (250 Points)",
     quest: "Get five friends to star our repository.",
     proof: "Share 5 screenshots of the chats where you asked them and they confirmed + their GitHub names",
   },
   {
-    points: "Bug Hunter (50-250 Points)",
-    quest: "Find and report any functionality bugs.",
+    points: "Bug Hunter (100 Points)",
+    quest:
+      "Find and report any bugs in our core product. We will close all bugs on the landing page bc we don't have time for that before the launch :)",
     proof: "Open a bug issue in our repository.",
   },
   {
@@ -109,11 +89,6 @@ const SideQuests = [
       "Find someone whose name would be funny as a play on words with “brick”. Then, with the help of AI, create a brick version of this person like Brick Astley, Brickj Minaj, etc. For extra points, tweet it, tag us and score +5 for each like.",
     proof: "Share your art or link to the tweet in the “side-quest” channel.",
   },
-  {
-    points: "SEO Sage (50-250 Points)",
-    quest: "Provide detailed SEO recommendations or improvements for our main website.",
-    proof: "Share your insights.",
-  },
   {
     points: "Community Connector (50 points each, up to 250 points)",
     quest:
@@ -269,12 +244,12 @@ const FAQ = [
 const Leaderboard = [
   {
     name: "Piyush",
-    points: "1600",
+    points: "2650",
     link: "https://github.com/gupta-piyush19",
   },
   {
     name: "Suman",
-    points: "700",
+    points: "1000",
   },
   {
     name: "Subhdeep",
@@ -302,7 +277,7 @@ const Leaderboard = [
   },
   {
     name: "Naitik Kapadia (Arjun)",
-    points: "1400",
+    points: "2250",
     link: "https://github.com/KapadiaNaitik",
   },
   {
@@ -343,7 +318,7 @@ const Leaderboard = [
   },
   {
     name: "Nafees Nazik",
-    points: "100",
+    points: "600",
   },
   {
     name: "monk",
@@ -359,12 +334,12 @@ const Leaderboard = [
   },
   {
     name: "Aditya Deshlahre",
-    points: "1120",
+    points: "1320",
     link: "https://github.com/adityadeshlahre",
   },
   {
     name: "Rutam",
-    points: "955",
+    points: "1105",
   },
   {
     name: "Sagnik Sahoo",
@@ -388,11 +363,11 @@ const Leaderboard = [
   },
   {
     name: "Rohit Mondal",
-    points: "155",
+    points: "205",
   },
   {
-    name: "noobcoder",
-    points: "250",
+    name: "thanmaisai",
+    points: "860",
   },
   {
     name: "Rayyan Alam (Rayy)",
@@ -412,7 +387,7 @@ const Leaderboard = [
   },
   {
     name: "Anjaneya Gupta",
-    points: "650",
+    points: "1650",
   },
   {
     name: "Sachin Kuber",
@@ -432,33 +407,29 @@ const Leaderboard = [
   },
   {
     name: "yatharth",
-    points: "600",
+    points: "650",
   },
   {
     name: "Ratish Jain",
-    points: "150",
+    points: "300",
     link: "https://github.com/ratishjain12",
   },
-  {
-    name: "yatharth",
-    points: "600",
-  },
   {
     name: "Subham Raj",
     points: "500",
   },
   {
     name: "Abhinav Arya",
-    points: "300",
+    points: "900",
     link: "github.com/itzabhinavarya",
   },
   {
     name: "Yash Nirmal",
-    points: "100",
+    points: "200",
   },
   {
     name: "Rohan Gupta",
-    points: "1150",
+    points: "1300",
     link: "https://github.com/rohan9896",
   },
   {
@@ -468,7 +439,7 @@ const Leaderboard = [
   },
   {
     name: "Eduardo Noronha",
-    points: "100",
+    points: "200",
   },
   {
     name: "Joyal",
@@ -497,19 +468,15 @@ const Leaderboard = [
   },
   {
     name: "bitnagar",
-    points: "100",
-  },
-  {
-    name: "bitnagar",
-    points: "400",
+    points: "150",
   },
   {
     name: "United1l",
-    points: "250",
+    points: "350",
   },
   {
     name: "Arya Bhosale",
-    points: "200",
+    points: "300",
   },
   {
     name: "Bhavya",
@@ -517,8 +484,148 @@ const Leaderboard = [
   },
   {
     name: "Bilal Mirza",
+    points: "1025",
+  },
+  {
+    name: "Asharan2511",
+    points: "50",
+  },
+  {
+    name: "bhimanshu",
+    points: "50",
+  },
+  {
+    name: "Digvijay Gupta",
+    points: "300",
+  },
+  {
+    name: "hercules_2401",
+    points: "100",
+  },
+  {
+    name: "iampolska742",
+    points: "50",
+  },
+  {
+    name: "Jonas Hoebenreich",
+    points: "100",
+  },
+  {
+    name: "Markson",
+    points: "100",
+  },
+  {
+    name: "Mohd Zama",
+    points: "50",
+  },
+  {
+    name: "Moheyt",
+    points: "450",
+  },
+  {
+    name: "ortin779",
+    points: "275",
+  },
+  {
+    name: "Piyush Garg",
     points: "150",
   },
+  {
+    name: "Sachin Mittal",
+    points: "100",
+  },
+  {
+    name: "Sha1kh4",
+    points: "50",
+  },
+  {
+    name: "Soham Tembhurne",
+    points: "50",
+  },
+  {
+    name: "Sundaram2021",
+    points: "50",
+  },
+  {
+    name: "tarunclub",
+    points: "50",
+  },
+  {
+    name: "thevinitgupta",
+    points: "50",
+  },
+  {
+    name: "Vishal Khoje",
+    points: "100",
+  },
+  {
+    name: "Aadish1233",
+    points: "50",
+  },
+  {
+    name: "aashish",
+    points: "880",
+  },
+  {
+    name: "AliYar-Khan",
+    points: "50",
+  },
+  {
+    name: "Hanan Mehmood",
+    points: "50",
+  },
+  {
+    name: "Janumala Akhilendra",
+    points: "50",
+  },
+  {
+    name: "Nilanjan Pramanik",
+    points: "50",
+  },
+  {
+    name: "Vedant-Z",
+    points: "200",
+  },
+  {
+    name: "Vineetjk",
+    points: "50",
+  },
+  {
+    name: "Hemanth Wasthere",
+    points: "100",
+  },
+  {
+    name: "Ola",
+    points: "1550",
+  },
+  {
+    name: "Olalaye Blessing",
+    points: "150",
+  },
+  {
+    name: "Raju Gangitla",
+    points: "100",
+  },
+  {
+    name: "Ronit Panda",
+    points: "1650",
+  },
+  {
+    name: "Shyam Raghu",
+    points: "300",
+  },
+  {
+    name: "Vikas Patil",
+    points: "100",
+  },
+  {
+    name: "0Armaan025",
+    points: "100",
+  },
+  {
+    name: "mandharet",
+    points: "50",
+  },
 ];
 
 export default function FormTribeHackathon() {
@@ -527,7 +634,7 @@ export default function FormTribeHackathon() {
     document.documentElement.classList.remove("dark");
   }, []);
   return (
-    <LayoutLight
+    <LayoutTribe
       title="FormTribe Hackathon"
       description="Can we ship an Open Source Typeform alternative in 30 days?">
       <Head>
@@ -568,7 +675,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
@@ -787,9 +894,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">
-          🏰 Side Quests: Increase your chances
-        </h3>
+        <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">
           While code contributions are what gives the most points, everyone gets to bump up their chance of
           winning. Here is a list of side quests you can complete:
@@ -924,7 +1029,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) => (
@@ -942,18 +1047,19 @@ export default function FormTribeHackathon() {
       </Button>
       {/* Breaker 3 */}
       <Breaker icon="👋" title="Join the Tribe!" />
-    </LayoutLight>
+    </LayoutTribe>
   );
 }
 
 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="pb-4 text-xl text-slate-500 lg:text-[3rem]">{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 text-transparent lg:text-6xl">
         {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>
   );
 };

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,5 +1,5 @@
-import Layout from "@/components/shared/Layout";
 import HeroTitle from "@/components/shared/HeroTitle";
+import Layout from "@/components/shared/Layout";
 import { Button } from "@formbricks/ui/Button";
 
 type OSSFriend = {
@@ -18,19 +18,28 @@ 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 p-6 shadow-md dark:bg-slate-800">
+            <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="mt-4 text-center">
+        <Button
+          variant="minimal"
+          className="dark:text-slate-400"
+          href="https://formbricks.com/clhys1p9r001cpr0hu65rwh17"
+          target="_blank">
+          Wanna join OSS Friends?
+        </Button>
+      </div>
     </Layout>
   );
 }

apps/formbricks-com/pages/pricing.tsx

@@ -23,8 +23,9 @@ const inProductSurveys = {
     { name: "Third-Party Integrations", free: true, paid: true },
     { name: "Unlimited Team Members", free: true, paid: true },
     { name: "Unlimited Responses per Survey", free: true, paid: true },
-    { name: "Advanced User Targeting", free: false, paid: true },
-    { name: "Multi Language", free: false, paid: true },
+    { name: "Team Role Management", free: false, paid: true },
+    { name: "Advanced User Targeting", free: false, paid: true, comingSoon: true },
+    { name: "Multi Language Surveys", free: false, paid: true, comingSoon: true },
 
     {
       name: "Custom URL for Link Surveys",

apps/formbricks-com/pages/privacy-policy.mdx

@@ -5,9 +5,9 @@ export const meta = {
   description: "Formbricks Privacy Policy",
 };
 
-## **1. Introduction**
+## **Introduction**
 
-We take your data privacy serious. It is our highest priority to offer a solution, both self-hosted and in our managed cloud. We take on considerable additional effort to collect as little data as neccessary and handle it safely and securely.
+We take your data privacy serious. It is our highest priority to offer a privacy-first solution, both self-hosted and in our managed cloud. We take on considerable additional effort to collect as little data as neccessary and handle it safely and securely.
 
 This Privacy Policy explains how and why our organization collects personal data and how it is used. If you have any questions after reading this Privacy Policy, feel free to contact us at **privacy@formbricks.com**
 
@@ -24,34 +24,49 @@ To avoid confusion, let’s define who we collect data from:
 
 ### We are data processor, you are data controller
 
-With our Cloud we are a provider of this service. We are not the owner of the collected personal data from survey respondents. The Researcher (the person who sends out a form i.e. you) is responsible for the data they collect and thus data controller of respondent data.
+With our Cloud we are a provider of this Service. We are not the owner of the collected personal data from survey respondents. The Researcher (the person who sends out a form i.e. you) is responsible for the data they collect and thus data controller of respondent data.
 
-## **2. What data do we collect**
+## **Data do we collect**
 
-This is the information we collect from **Website visitors** and **Researchers as** long as you are using our service:
+This is the information we collect from **Website visitors** and **Researchers** as long as you are using our Service:
 
 - **Electronical identification data**: including anonymized IP address, device & browser data;
-- Anonymized **information about your use of our website**: including how you end up on our website, what actions you perform and the pages you visited.
+- **Anonymized information about your use of our website**: including how you end up on our website, what actions you perform and the pages you visited.
 - **Registration information:**
   When you register for an account, we collect your name, username, hashed password and email address.
 - **Billing information:**
   If you pay for Formbricks, we will ask for your billing details including name, address and financial information depending on your payment method (stored by our payment service provider Stripe)
-- **Form data:**
-  We store your form data (questions and responses) for you and provide tools for you to use this data.
+- **Survey data:**
+  We store your survey data (questions and responses) for you and provide tools for you to analyse and use this data.
 
-## **3. How we use your data**
+## **How we use your data**
 
 Formbricks does not sell personal data to third parties. Generally, we only collect your data with your consent in order to:
 
-- Deliver our service to you
-- To improve your user experience
-- To email you with essential product updates
-- To troubleshoot product functionality and fix bugs
-- To respond to legal requests or prevent fraud
+- Provide and improve our Service.
+- Email you essential updates and offers (only if you're interested).
+- Ensure our product works smoothly and fix any issues.
+- Respond to legal situations and prevent fraud.
+- Let you engage with our Service's interactive features.
+- Support you when you need help.
+- Track how our Service is used.
+- Handle technical problems.
+- Manage our relationship with you, including billing.
+- Inform you about account changes or renewals.
+- Share news and offers about our other services (only if you've shown interest).
+- Use data in ways we explain when you provide it.
+- Other reasons, but only with your agreement.
 
-## **4. Data Subprocessors**
+## **Retention of Data**
 
-We only share your information with our service providers who help us operate our business, in which case those third parties are also required to comply with the GDPR framework. We worked hard to reduce the number of subprocessors to a minimum and keep your information within the EU. This is a list of the subprocessors we are working with:
+We will retain your Personal Data only for as long as is necessary for the purposes set out in this Privacy Policy. We will retain and use your Personal Data to the extent necessary to comply with our legal obligations (for example, if we are required to retain your data to comply with applicable laws), resolve disputes, and enforce our legal agreements and policies.
+
+We will also retain Usage Data for internal analysis purposes. Usage Data is generally retained for a shorter period, except when this data is used to strengthen the security or to improve the functionality of our Service, or we are legally obligated to retain this data for longer time periods.
+
+
+## **Data Subprocessors**
+
+We only share your information with our Service providers who help us operate our business, in which case those third parties are also required to comply with the GDPR framework. We worked hard to reduce the number of subprocessors to a minimum and keep your information within the EU. This is a list of the subprocessors we are working with:
 
 | Subprocessor | Data                                   | Use               | Server Location | DPA         | GDPR Info                                                                         |
 | ------------ | -------------------------------------- | ----------------- | --------------- | ----------- | --------------------------------------------------------------------------------- |
@@ -60,7 +75,7 @@ We only share your information with our service providers who help us operate ou
 | PostHog EU   | Anon. IP, Browser & Device Information | Product Analytics | 🇩🇪              | DPA signed  | [GDPR Info](https://posthog.com/docs/privacy/gdpr-compliance)                     |
 | Stripe       | Billing Information                    | Payments          | 🇺🇸              | Part of ToS | [GDPR Info](https://stripe.com/privacy-center/legal#international-data-transfers) |
 
-## **5. Data retention**
+## **Data retention**
 
 If you are a Formbricks Researcher we do not delete the data in your account. You can delete data in your Formbricks account. You are responsible for the time period for which you store the data.
 
@@ -68,17 +83,75 @@ If you are a Respondent, you will need to ask the Researcher how long your respo
 
 All form data which has been deleted by the form Researcher is permanently deleted from our back-ups within 90 days.
 
-## **6. Your data protection rights**
+## **Researcher's data protection rights**
 
 Formbricks Researchers can exercise their rights directly with us.
 
 If you’ve submitted your personal data through a Formbricks form, the Researcher who created the form is responsible for the collected data. Formbricks only processes the data. Respondents should contact the person or organization which created the form. If this isn't possible, please contact us. We'll help in any way we can.
 
-## **7. Marketing**
+## **Researcher's Rights Under GDPR**
+
+If you are a resident of the European Union (EU) and European Economic Area (EEA), you have certain data protection rights, covered by GDPR. – See more at [GDPR Official Site](https://eur-lex.europa.eu/eli/reg/2016/679/oj).
+
+We aim to take reasonable steps to allow you to correct, amend, delete, or limit the use of your Personal Data.
+
+If you wish to be informed what Personal Data we hold about you and if you want it to be removed from our systems, please email us at hola@formbricks.com.
+
+In certain circumstances, you have the following data protection rights:
+
+- The right to access, update or to delete the information we have on you.
+- The right of rectification. You have the right to have your information rectified if that information is inaccurate or incomplete.
+- The right to object. You have the right to object to our processing of your Personal Data.
+- The right of restriction. You have the right to request that we restrict the processing of your personal information.
+- The right to data portability. You have the right to be provided with a copy of your Personal Data in a structured, machine-readable and commonly used format.
+- The right to withdraw consent. You also have the right to withdraw your consent at any time where we rely on your consent to process your personal information.
+
+Please note that we may ask you to verify your identity before responding to such requests. Additionally, we may not be able to provide Service without some necessary data.
+
+You have the right to complain to a Data Protection Authority about our collection and use of your Personal Data. For more information, please contact your local data protection authority in the European Economic Area (EEA).
+
+## **Researcher's Data Protection Rights under CalOPPA**
+
+CalOPPA is the first state law in the nation to require commercial websites and online services to post a privacy policy. The law’s reach stretches well beyond California to require a person or company in the United States (and conceivable the world) that operates websites collecting personally identifiable information from California consumers to post a conspicuous privacy policy on its website stating exactly the information being collected and those individuals with whom it is being shared, and to comply with this policy. – See more at [CalOPPA Official Site](https://consumercal.org/about-cfc/cfc-education-foundation/california-online-privacy-protection-act-caloppa-3/).
+
+According to CalOPPA we agree to the following:
+
+- Users can visit our site anonymously.
+- Our Privacy Policy link includes the word “Privacy”, and can easily be found on the home page of our website.
+- Users will be notified of any privacy policy changes on our Privacy Policy Page.
+- Users are able to change their personal information by emailing us at hola@formbricks.com
+
+**Our Policy on “Do Not Track” Signals:**
+
+We honor Do Not Track signals and do not track, plant cookies, or use advertising when a Do Not Track browser mechanism is in place. Do Not Track is a preference you can set in your web browser to inform websites that you do not want to be tracked.
+
+You can enable or disable Do Not Track by visiting the Preferences or Settings page of your web browser.
+
+## **Your Data Protection Rights under CCPA**
+
+If you are a California resident, you are entitled to learn what data we collect about you, ask to delete your data and not to sell (share) it. To exercise your data protection rights, you can make certain requests and ask us:
+
+- What personal information we have about you.
+- The categories of personal information we have collected about you.
+- The categories of sources from which we collect your personal information.
+- The business or commercial purpose for collecting or selling your personal information.
+- The categories of third parties with whom we share personal information.
+- The specific pieces of personal information we have collected about you.
+- A list of categories of personal information that we have sold, along with the category of any other company we sold it to. If we have not sold your personal information, we will inform you of that fact.
+- A list of categories of personal information that we have disclosed for a business purpose, along with the category of any other company we shared it with.
+
+Please note, you are entitled to ask us to provide you with this information up to two times in a rolling twelve-month period. When you make this request, the information provided may be limited to the personal information we collected about you in the previous 12 months.
+
+To exercise your California data protection rights described above, please send your request(s) by email to hola@formbricks.com.
+
+Your data protection rights, described above, are covered by the CCPA, short for the California Consumer Privacy Act. To find out more, visit the [official California Legislative Information website](https://www.leginfo.legislature.ca.gov/). The CCPA took effect on 01/01/2020.
+
+
+## **Marketing**
 
 If Researchers register to Formbricks, we may send them emails about company news, updates, related product or service information, etc. Researchers can always opt out of the email communications.
 
-## **8. Cookies**
+## **Cookies**
 
 Cookies are small text files that are placed on your computer or mobile device by websites you visit. They are widely used in order to make a website work, or work more efficiently, as well as to provide information to the owners of the site. Formbricks uses cookies to improve your experience on our website and with our product.
 
@@ -89,27 +162,33 @@ Formbricks uses cookies to improve your user experience, including:
 
 ### What types of cookies does Formbricks use?
 
-1. **Required cookies:** Certain cookies are necessary in order for the website to operate correctly and remain secure. For example, we use cookies to authenticate you. When you log on to our website, authentication cookies are set which let us know who you are during a browsing session. We have to load essential cookies for legitimate interests pursued by us in delivering our Sites essential functionality to you.
+**Required cookies:** Certain cookies are necessary in order for the website to operate correctly and remain secure. For example, we use cookies to authenticate you. When you log on to our website, authentication cookies are set which let us know who you are during a browsing session. We have to load essential cookies for legitimate interests pursued by us in delivering our Sites essential functionality to you.
 
 ### How can you block or eliminate cookies?
 
-We only use cookies when you are logged into our service. You can allow, eliminate, or block cookies within your browser. If you block all cookies, some websites will not work properly anymore.
+We only use cookies when you are logged into our Service. You can allow, eliminate, or block cookies within your browser. If you block all cookies, some websites will not work properly anymore.
 
-## **9. Data Transfers**
+## **Data Transfers**
 
-Formbricks is based in the EU and all form and user data is stored in Germany, EU. Only billing information processed by Stripe Inc. and anonymized personal data neccessary to provide this service may be transfered overseas.
+Formbricks is based in the EU and all form and user data is stored in Germany, EU. Only billing information processed by Stripe Inc. and anonymized personal data neccessary to provide this Service may be transfered overseas.
 
-## **10. Users Acceptance Of These Terms**
+## **Users Acceptance Of These Terms**
 
 By using Formbricks, Researchers signify their acceptance of this policy. If Researchers do not agree to this policy, they should not use Formbricks. Researchers continued use of Formbricks following the posting of changes to this policy will be deemed their acceptance of those changes.
 
-## **11. Changes to our Privacy Policy**
+## **Links to Other Sites**
+
+Our Service may contain links to other sites that are not operated by us. If you click a third party link, you will be directed to that third party's site. We strongly advise you to review the Privacy Policy of every site you visit.
+
+We have no control over and assume no responsibility for the content, privacy policies, or practices of any third party sites or services.
+
+## **Changes to our Privacy Policy**
 
 We can make changes to this Privacy Policy from time to time. In circumstances where a change will materially change the way in which we collect or use your personal information or data, we will send a notice of this change to all of our account holders.
 
-We keep our privacy policy under regular review and will place any updates on this web page. This privacy policy was last updated on 12th December 2022.
+We keep our privacy policy under regular review and will place any updates on this web page. This privacy policy was last updated on 25th October 2023.
 
-## **11. Contact**
+## **Contact**
 
 Please use the following contact information for privacy inquiries:
 

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,26 @@
+# 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?
+
+storybook-static

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>

apps/storybook/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "storybook",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "storybook dev -p 6006",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "clean": "rimraf .turbo node_modules dist storybook-static"
+  },
+  "dependencies": {
+    "@formbricks/ui": "workspace:*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "storybook": "^7.4.6"
+  },
+  "devDependencies": {
+    "@formbricks/tsconfig": "workspace:*",
+    "@storybook/addon-essentials": "^7.5.0-alpha.5",
+    "@storybook/addon-interactions": "^7.5.0-alpha.5",
+    "@storybook/addon-links": "^7.5.0-alpha.5",
+    "@storybook/addon-onboarding": "^1.0.8",
+    "@storybook/blocks": "^7.5.0-alpha.5",
+    "@storybook/react": "^7.5.0-alpha.5",
+    "@storybook/react-vite": "^7.5.0-alpha.5",
+    "@storybook/testing-library": "^0.2.2",
+    "@typescript-eslint/eslint-plugin": "^6.8.0",
+    "@typescript-eslint/parser": "^6.8.0",
+    "@vitejs/plugin-react": "^4.1.0",
+    "esbuild": "^0.19.5",
+    "tsup": "^7.2.0",
+    "vite": "^4.4.11"
+  }
+}

apps/storybook/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

apps/storybook/src/App.css

@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}

apps/storybook/src/App.tsx

@@ -0,0 +1,27 @@
+import { useState } from "react";
+
+import "./App.css";
+function App() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <>
+      <div>
+        <a href="https://vitejs.dev" target="_blank">
+          <img className="logo" alt="Vite logo" />
+        </a>
+        <a href="https://react.dev" target="_blank"></a>
+      </div>
+      <h1 className="bg-orange-200 p-4 font-bold">Vite + React</h1>
+      <div className="card">
+        <button onClick={() => setCount((count) => count + 1)}>count is {count}</button>
+        <p>
+          Edit <code>src/App.tsx</code> and save to test HMR
+        </p>
+      </div>
+      <p className="read-the-docs">Click on the Vite and React logos to learn more</p>
+    </>
+  );
+}
+
+export default App;

apps/storybook/src/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

apps/storybook/src/main.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.tsx";
+import "./index.css";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

apps/storybook/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

apps/storybook/tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+
+import base from "../../packages/tailwind-config/tailwind.config";
+
+export default {
+  ...base,
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}", "../../packages/ui/**/*.{js,ts,jsx,tsx}"],
+};

apps/storybook/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

apps/storybook/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

apps/storybook/vite.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  define: {
+    "process.env": {},
+  },
+});

apps/web/Dockerfile

@@ -7,6 +7,9 @@ ENV DATABASE_URL=$DATABASE_URL
 ARG NEXTAUTH_SECRET
 ENV NEXTAUTH_SECRET=$NEXTAUTH_SECRET
 
+ARG ENCRYPTION_KEY
+ENV ENCRYPTION_KEY=$ENCRYPTION_KEY
+
 WORKDIR /app
 
 COPY . .

apps/web/app/(app)/billing-confirmation/components/ConfirmationPage.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import ContentWrapper from "@/components/shared/ContentWrapper";
+import ContentWrapper from "@formbricks/ui/ContentWrapper";
 import { Button } from "@formbricks/ui/Button";
 import { Confetti } from "@formbricks/ui/Confetti";
 import { useEffect, useState } from "react";

apps/web/app/(app)/billing-confirmation/page.tsx

@@ -1,4 +1,4 @@
-import ConfirmationPage from "./ConfirmationPage";
+import ConfirmationPage from "./components/ConfirmationPage";
 
 export default function BillingConfirmation({}) {
   return <ConfirmationPage />;

apps/web/app/(app)/components/FormbricksClient.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { env } from "@/env.mjs";
-import { formbricksEnabled } from "@/lib/formbricks";
+import { formbricksEnabled } from "@/app/lib/formbricks";
 import formbricks from "@formbricks/js";
 import { useEffect } from "react";
 

apps/web/app/(app)/environments/[environmentId]/(actionsAndAttributes)/actions/actions.ts

@@ -5,7 +5,7 @@ import { hasUserEnvironmentAccess } from "@formbricks/lib/environment/auth";
 import { createActionClass, deleteActionClass, updateActionClass } from "@formbricks/lib/actionClass/service";
 import { canUserAccessActionClass } from "@formbricks/lib/actionClass/auth";
 import { getServerSession } from "next-auth";
-import { TActionClassInput } from "@formbricks/types/v1/actionClasses";
+import { TActionClassInput } from "@formbricks/types/actionClasses";
 
 import {
   getActionCountInLast24Hours,
@@ -13,7 +13,7 @@ import {
   getActionCountInLastHour,
 } from "@formbricks/lib/action/service";
 import { getSurveysByActionClassId } from "@formbricks/lib/survey/service";
-import { AuthorizationError } from "@formbricks/types/v1/errors";
+import { AuthorizationError } from "@formbricks/types/errors";
 
 export async function deleteActionClassAction(environmentId, actionClassId: string) {
   const session = await getServerSession(authOptions);

apps/web/app/(app)/environments/[environmentId]/(actionsAndAttributes)/actions/components/ActionActivityTab.tsx

@@ -1,19 +1,19 @@
 "use client";
 
-import LoadingSpinner from "@/components/shared/LoadingSpinner";
+import LoadingSpinner from "@formbricks/ui/LoadingSpinner";
 import { ErrorComponent } from "@formbricks/ui/ErrorComponent";
 import { Label } from "@formbricks/ui/Label";
 import { convertDateTimeStringShort } from "@formbricks/lib/time";
-import { capitalizeFirstLetter } from "@/lib/utils";
+import { capitalizeFirstLetter } from "@/app/lib/utils";
 import { CodeBracketIcon, CursorArrowRaysIcon, SparklesIcon } from "@heroicons/react/24/solid";
-import { TActionClass } from "@formbricks/types/v1/actionClasses";
+import { TActionClass } from "@formbricks/types/actionClasses";
 import { useEffect, useState } from "react";
 import {
   getActionCountInLastHourAction,
   getActionCountInLast24HoursAction,
   getActionCountInLast7DaysAction,
   GetActiveInactiveSurveysAction,
-} from "./actions";
+} from "../actions";
 interface ActivityTabProps {
   actionClass: TActionClass;
 }

apps/web/app/(app)/environments/[environmentId]/(actionsAndAttributes)/actions/components/ActionClassesTable.tsx

@@ -5,7 +5,7 @@ import { CursorArrowRaysIcon } from "@heroicons/react/24/solid";
 import { useState } from "react";
 import AddNoCodeActionModal from "./AddNoCodeActionModal";
 import ActionDetailModal from "./ActionDetailModal";
-import { TActionClass } from "@formbricks/types/v1/actionClasses";
+import { TActionClass } from "@formbricks/types/actionClasses";
 
 export default function ActionClassesTable({
   environmentId,