feat: button v2 icon button

feat: button v2 stories
feat: button v2
2025-12-23 06:30:51 -06:00 · 2023-12-18 10:32:43 +05:30 · 2023-12-16 13:13:59 +05:30 · 2023-12-15 12:58:23 +05:30 · 2023-12-14 10:31:23 +00:00 · 2023-12-14 10:09:22 +00:00
671 changed files with 7266 additions and 6517 deletions
--- a/.env.example
+++ b/.env.example
@@ -99,7 +99,6 @@ AZUREAD_AUTH_ENABLED=0
 AZUREAD_CLIENT_ID=
 AZUREAD_CLIENT_SECRET=
 AZUREAD_TENANT_ID=
-AZURE_DIRECT_REDIRECT=0

 # Cron Secret
 CRON_SECRET=
@@ -127,4 +126,13 @@ AIRTABLE_CLIENT_ID=
 # Enterprise License Key
 ENTERPRISE_LICENSE_KEY=

+# Automatically assign new users to a specific team and role within that team
+# Insert an existing team id or generate a valid CUID for a new one at https://www.getuniqueid.com/cuid (e.g. cjld2cjxh0000qzrmn831i7rn)
+# (Role Management is an Enterprise feature)
+# DEFAULT_TEAM_ID=
+# DEFAULT_TEAM_ROLE=admin
+
+# set to 1 to skip onboarding for new users
+# ONBOARDING_DISABLED=1
+
 */
--- a/.prettierrc.js
+++ b/.prettierrc.js
@@ -1 +1,6 @@
-module.exports = require("./packages/prettier-config/prettier-preset");
+const baseConfig = require("./packages/prettier-config/prettier-preset");
+
+module.exports = {
+  ...baseConfig,
+  plugins: ["@trivago/prettier-plugin-sort-imports", "prettier-plugin-tailwindcss"],
+};
--- a/README.md
+++ b/README.md
@@ -1,100 +1,148 @@
-<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">
-  </a>
-  <h3 align="center">Formbricks</h3>
+<div  id="top"></div>
+
+<p  align="center">
+
+<a  href="https://formbricks.com">
+
+<img  width="120"  alt="Open Source Privacy First Experience Management Solution Qualtrics Alternative Logo"  src="https://github.com/formbricks/formbricks/assets/72809645/0086704f-bee7-4d38-9cc8-fa42ee59e004">
+
+</a>
+
+<h3  align="center">Formbricks</h3>
+
+<p  align="center">
+
+Harvest user-insights, build irresistible experiences.
+
+<br  />
+
+<a  href="https://formbricks.com/">Website</a> | <a  href="https://formbricks.com/discord">Join Discord community</a>

-  <p align="center">
-    The Open Source Survey Toolbox
-    <br />
-    <a href="https://formbricks.com/">Website</a>  |  <a href="https://formbricks.com/discord">Join Discord community</a>
-  </p>
 </p>

-<p align="center">
-<a href="https://github.com/formbricks/formbricks/blob/main/LICENSE"><img src="https://img.shields.io/badge/License-AGPL-purple" alt="License"></a> <a href="https://formbricks.com/discord"><img src="https://img.shields.io/discord/979077669410979880?label=Discord&logo=discord&logoColor=%23fff" alt="Join Formbricks Discord"></a> <a href="https://github.com/formbricks/formbricks/stargazers"><img src="https://img.shields.io/github/stars/formbricks/formbricks?logo=github" alt="Github Stars"></a>
-   <a href="https://news.ycombinator.com/item?id=32303986"><img src="https://img.shields.io/badge/Hacker%20News-122-%23FF6600" alt="Hacker News"></a>
-   <a href="[https://www.producthunt.com/products/formbricks](https://www.producthunt.com/posts/formbricks)"><img src="https://img.shields.io/badge/Product%20Hunt-455-orange?logo=producthunt&logoColor=%23fff" alt="Product Hunt"></a>
-   <a href="https://github.blog/2023-04-12-github-accelerator-our-first-cohort-and-whats-next/"><img src="https://img.shields.io/badge/2023-blue?logo=github&label=Github%20Accelerator" alt="Github Accelerator"></a>
-<a href="https://github.com/formbricks/formbricks/issues?q=is:issue+is:open+label:%22%F0%9F%99%8B%F0%9F%8F%BB%E2%80%8D%E2%99%82%EF%B8%8Fhelp+wanted%22"><img src="https://img.shields.io/badge/Help%20Wanted-Contribute-blue"></a>
+</p>
+
+<p  align="center">
+
+<a  href="https://github.com/formbricks/formbricks/blob/main/LICENSE"><img  src="https://img.shields.io/badge/License-AGPL-purple"  alt="License"></a> <a  href="https://formbricks.com/discord"><img  src="https://img.shields.io/discord/979077669410979880?label=Discord&logo=discord&logoColor=%23fff"  alt="Join Formbricks Discord"></a> <a  href="https://github.com/formbricks/formbricks/stargazers"><img  src="https://img.shields.io/github/stars/formbricks/formbricks?logo=github"  alt="Github Stars"></a>
+
+<a  href="https://news.ycombinator.com/item?id=32303986"><img  src="https://img.shields.io/badge/Hacker%20News-122-%23FF6600"  alt="Hacker News"></a>
+
+<a  href="[https://www.producthunt.com/products/formbricks](https://www.producthunt.com/posts/formbricks)"><img  src="https://img.shields.io/badge/Product%20Hunt-455-orange?logo=producthunt&logoColor=%23fff"  alt="Product Hunt"></a>
+
+<a  href="https://github.blog/2023-04-12-github-accelerator-our-first-cohort-and-whats-next/"><img  src="https://img.shields.io/badge/2023-blue?logo=github&label=Github%20Accelerator"  alt="Github Accelerator"></a>
+
+<a  href="https://github.com/formbricks/formbricks/issues?q=is:issue+is:open+label:%22%F0%9F%99%8B%F0%9F%8F%BB%E2%80%8D%E2%99%82%EF%B8%8Fhelp+wanted%22"><img  src="https://img.shields.io/badge/Help%20Wanted-Contribute-blue"></a>
+
 </p>

 <br/>

-<p align="center">
-<i>Trusted by</i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-<a href="https://github.com/calcom/cal.com/"><img src="https://github.com/formbricks/formbricks/assets/675065/1a8763cf-f47e-4960-90f6-334f6dc12a17#gh-light-mode-only" height="20px"></a><a href="https://github.com/calcom/cal.com/"><img src="https://github.com/formbricks/formbricks/assets/72809645/9a031e8d-538f-4fdc-9338-b77e9a57d6ac#gh-dark-mode-only" height="20px"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-<a href="https://github.com/CrowdDotDev/crowd.dev"><img src="https://github.com/formbricks/formbricks/assets/675065/59b1a4d4-25e4-4ef3-b0bf-4426446fbfd0#gh-light-mode-only" height="20px"></a><a href="https://github.com/CrowdDotDev/crowd.dev"><img src="https://github.com/formbricks/formbricks/assets/72809645/4bb4caf7-4b64-44c8-94bd-850606d181c1#gh-dark-mode-only" height="20px"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-<a href="https://clovyr.io/"><img src="https://github.com/formbricks/formbricks/assets/675065/9291c8df-9aac-423a-a430-a9a581240075" height="20px"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-<a href="https://neverinstall.com/"><img src="https://github.com/formbricks/formbricks/assets/675065/72e5e37b-8ef7-4340-b06e-f1d12a05330f#gh-light-mode-only" height="20px"></a><a href="https://neverinstall.com/"><img src="https://github.com/formbricks/formbricks/assets/72809645/9d9711dc-75e5-4084-b7fa-bbaf621064a8#gh-dark-mode-only" height="20px">
-</p>
+<div style="background-color:#f8fafc; border-radius:5px;">
+<p  align="center">
+
+<i>Trusted by</i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+
+<a  href="https://flixbus.com"><img  src="https://github.com/formbricks/formbricks/assets/72809645/d6c91d89-7633-4845-ae1e-03bbd2ce0946"  height="35px"></a>
+
+<a  href="https://github.com/calcom/cal.com/"><img  src="https://github.com/formbricks/formbricks/assets/675065/1a8763cf-f47e-4960-90f6-334f6dc12a17#gh-light-mode-only"  height="20px"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+
+<a  href="https://github.com/CrowdDotDev/crowd.dev"><img  src="https://github.com/formbricks/formbricks/assets/675065/59b1a4d4-25e4-4ef3-b0bf-4426446fbfd0#gh-light-mode-only"  height="20px"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+
+<a  href="https://neverinstall.com/"><img  src="https://github.com/formbricks/formbricks/assets/675065/72e5e37b-8ef7-4340-b06e-f1d12a05330f#gh-light-mode-only"  height="20px"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+
+<a  href="https://clovyr.io/"><img  src="https://github.com/formbricks/formbricks/assets/675065/9291c8df-9aac-423a-a430-a9a581240075"  height="20px"></a>
+
+</p>
+<div>
+
+<p  align="center">
+
+<a  href="https://trendshift.io/repositories/2570"  target="_blank"><img  src="https://trendshift.io/api/badge/repositories/2570"  alt="Trendshift Badge for formbricks/formbricks"  style="width: 250px; height: 55px;"  width="250"  height="55"/></a>

-<p align="center">
-  <a href="https://trendshift.io/repositories/2570" target="_blank"><img src="https://trendshift.io/api/badge/repositories/2570" alt="Trendshift Badge for formbricks/formbricks" style="width: 250px; height: 55px;" width="250" height="55"/></a>
 </p>

 ## ✨ About Formbricks

-<img width="1527" alt="formbricks-sneak" src="https://github-production-user-asset-6210df.s3.amazonaws.com/675065/249441967-ccb89ea3-82b4-4bf2-8d2c-528721ec313b.png">
+<img  width="1527"  alt="formbricks-sneak"  src="https://github-production-user-asset-6210df.s3.amazonaws.com/675065/249441967-ccb89ea3-82b4-4bf2-8d2c-528721ec313b.png">

-Formbricks is your go-to solution for in-product micro-surveys that will supercharge your product experience. Use micro-surveys to target the right users at the right time without making surveys annoying.
+Formbricks provides a free and open source surveying platform. Gather feedback at every point in the user journey with beautiful in-app, website, link and email surveys. Build on top of Formbricks or leverage prebuilt data analysis capabilities.

-**Try it out in the cloud at [formbricks.com](https://formbricks.com)**
+**Try it out in the cloud at [formbricks.com](https://app.formbricks.com/auth/signup)**

-## 💪 Mission: Make customer-centric decisions based on data.
+## 💪 Mission: Empower your team, craft an irresistible experience.

-Formbricks is a powerful tool for creating in-product micro-surveys - and leverage a significantly higher conversion rate. It allows you to gather valuable insights from your users, enabling you to make data-driven decisions that enhance your product's user experience. With Formbricks, you can create surveys with our no-code editor, choose from a variety of templates, target specific user groups, and much more.
+Formbricks is both a free and open source survey platform - and a privacy-first experience management platform. Use in-app, website, link and email surveys to gather user and customer insights at every point of their journey. Leverage Formbricks Insight Platform or build your own. Life's too short for mediocre UX.

 ### Table of Contents

 - [Features](#features)
+
 - [Getting Started](#getting-started)
-  - [Cloud Version](#cloud-version)
-  - [Self-hosted Version](#self-hosted-version)
-  - [Development](#development)
+
+- [Cloud Version](#cloud-version)
+
+- [Self-hosted Version](#self-hosted-version)
+
+- [Development](#development)
+
 - [Contribution](#contribution)
+
 - [Contact](#contact-us)
+
 - [License](#license)
+
 - [Security](#security)

-<a id="features"></a>
+<a  id="features"></a>

 ### Features

- 📲 Create **in-product surveys** with our no-code editor with multiple question types.
+- 📲 Create **conversion-optimized surveys** with our no-code editor with several question types.
+
 - 📚 Choose from a variety of best-practice **templates**.
+
 - 👩🏻 Launch and **target your surveys to specific user groups** without changing your application code.
+
 - 🔗 Create shareable **link surveys**.
+
 - 👨‍👩‍👦 Invite your team members to **collaborate** on your surveys.
- 🔌 Integrate Formbricks with **Slack, Posthog, Zapier, n8n and more**.
+
+- 🔌 Integrate Formbricks with **Slack, Notion, Zapier, n8n and more**.
+
 - 🔒 All **open source**, transparent and self-hostable.

 ### Built on Open Source

 - 💻 [Typescript](https://www.typescriptlang.org/)
+
 - 🚀 [Next.js](https://nextjs.org/)
+
 - ⚛️ [React](https://reactjs.org/)
+
 - 🎨 [TailwindCSS](https://tailwindcss.com/)
+
 - 📚 [Prisma](https://prisma.io/)
+
 - 🔒 [Auth.js](https://authjs.dev/)
+
 - 🧘‍♂️ [Zod](https://zod.dev/)

-<a id="getting-started"></a>
+<a  id="getting-started"></a>

 ## 🚀 Getting started

 We've got several options depending on your need to help you quickly get started with Formbricks.

-<a id="cloud-version"></a>
+<a  id="cloud-version"></a>

 ### ☁️ Cloud Version

-Formbricks has a hosted cloud offering with a generous free plan to get you up and running as quickly as possible. To get started, please visit [formbricks.com](https://formbricks.com).
+Formbricks has a hosted cloud offering with a generous free plan to get you up and running as quickly as possible. To get started, please visit [formbricks.com](https://app.formbricks.com/auth/signup).

-<a id="self-hosted-version"></a>
+<a  id="self-hosted-version"></a>

-### 🐳 Self-hosted version
+### 🐳 Self-hosting Formbricks

 Formbricks is available Open-Source under AGPLv3 license. You can host Formbricks on your own servers using Docker without a subscription.

@@ -114,7 +162,7 @@ You can deploy Formbricks on [Railway](https://railway.app) using the button bel

 [![Deploy on Railway](https://railway.app/button.svg)](https://railway.app/new/template/PPDzCd)

-<a id="development"></a>
+<a  id="development"></a>

 ### 👨‍💻 Development

@@ -123,7 +171,9 @@ You can deploy Formbricks on [Railway](https://railway.app) using the button bel
 Here is what you need to be able to run Formbricks:

 - [Node.js](https://nodejs.org/en) (Version: >=18.x)
+
 - [Pnpm](https://pnpm.io/)
+
 - [Docker](https://www.docker.com/) - to run PostgreSQL and MailHog

 #### Local Setup
@@ -138,7 +188,7 @@ To get started locally, we've got a [guide to help you](https://formbricks.com/d

 [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/formbricks/formbricks)

-<a id="contribution"></a>
+<a  id="contribution"></a>

 ## ✍️ Contribution

@@ -147,35 +197,39 @@ We are very happy if you are interested in contributing to Formbricks 🤗
 Here are a few options:

 - Star this repo.
+
 - Create issues every time you feel something is missing or goes wrong.
+
 - Upvote issues with 👍 reaction so we know what the demand for a particular issue is to prioritize it within the roadmap.

 Please check out [our contribution guide](https://formbricks.com/docs/contributing/introduction) and our [list of open issues](https://github.com/formbricks/formbricks/issues) for more information.

 ## All Thanks To Our Contributors

-<a href="https://github.com/formbricks/formbricks/graphs/contributors">
-  <img src="https://contrib.rocks/image?repo=formbricks/formbricks" />
+<a  href="https://github.com/formbricks/formbricks/graphs/contributors">
+
+<img  src="https://contrib.rocks/image?repo=formbricks/formbricks"  />
+
 </a>

-<a id="contact-us"></a>
+<a  id="contact-us"></a>

 ## 📆 Contact us

 Let's have a chat about your survey needs and get you started.

-<a href="https://cal.com/johannes/onboarding?utm_source=banner&utm_campaign=oss"><img alt="Book us with Cal.com" src="https://cal.com/book-with-cal-dark.svg" /></a>
+<a  href="https://cal.com/johannes/onboarding?utm_source=banner&utm_campaign=oss"><img  alt="Book us with Cal.com"  src="https://cal.com/book-with-cal-dark.svg"  /></a>

-<a id="license"></a>
+<a  id="license"></a>

 ## ⚖️ License

 Distributed under the AGPLv3 License. See [`LICENSE`](./LICENSE) for more information.

-<a id="security"></a>
+<a  id="security"></a>

 ## 🔒 Security

 We take security very seriously. If you come across any security vulnerabilities, please disclose them by sending an email to security@formbricks.com. We appreciate your help in making our platform as secure as possible and are committed to working with you to resolve any issues quickly and efficiently. See [`SECURITY.md`](./SECURITY.md) for more information.

-<p align="right"><a href="#top">🔼 Back to top</a></p>
+<p  align="right"><a  href="#top">🔼 Back to top</a></p>
--- a/apps/demo/package.json
+++ b/apps/demo/package.json
@@ -13,7 +13,7 @@
  "dependencies": {
    "@formbricks/js": "workspace:*",
    "@heroicons/react": "^2.0.18",
-    "next": "14.0.3",
+    "next": "14.0.4",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
--- a/apps/demo/pages/_app.tsx
+++ b/apps/demo/pages/_app.tsx
@@ -1,5 +1,6 @@
 import type { AppProps } from "next/app";
 import Head from "next/head";
+
 import "../styles/globals.css";

 export default function App({ Component, pageProps }: AppProps) {
--- a/apps/demo/pages/_document.tsx
+++ b/apps/demo/pages/_document.tsx
@@ -1,4 +1,4 @@
-import { Html, Head, Main, NextScript } from "next/document";
+import { Head, Html, Main, NextScript } from "next/document";

 export default function Document() {
  return (
--- a/apps/demo/pages/app/index.tsx
+++ b/apps/demo/pages/app/index.tsx
@@ -1,8 +1,10 @@
-import formbricks from "@formbricks/js";
 import Image from "next/image";
-import { useEffect, useState } from "react";
-import fbsetup from "../../public/fb-setup.png";
 import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+
+import formbricks from "@formbricks/js";
+
+import fbsetup from "../../public/fb-setup.png";

 declare const window: any;

--- a/apps/formbricks-com/app/docs/layout.tsx
+++ b/apps/formbricks-com/app/docs/layout.tsx
@@ -1,9 +1,7 @@
-import glob from "fast-glob";
-
 import { Providers } from "@/app/providers";
 import { Layout } from "@/components/docs/Layout";
-
 import { type Section } from "@/components/docs/SectionProvider";
+import glob from "fast-glob";
 import { type Metadata } from "next";

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

 ## Build-time Variables

--- a/apps/formbricks-com/app/docs/self-hosting/production/page.mdx
+++ b/apps/formbricks-com/app/docs/self-hosting/production/page.mdx
@@ -168,7 +168,7 @@ To update Formbricks, simply run the following command:

 </CodeGroup>
 </Col>
-The script will automatically pull the latest version of Formbricks from Dockerhub and restart the containers.
+The script will automatically pull the latest version of Formbricks from GitHub Container Registry and restart the containers.

 ## Stop Formbricks Instance

--- a/apps/formbricks-com/app/providers.tsx
+++ b/apps/formbricks-com/app/providers.tsx
@@ -1,7 +1,7 @@
 "use client";

-import { useEffect } from "react";
 import { ThemeProvider, useTheme } from "next-themes";
+import { useEffect } from "react";

 function ThemeWatcher() {
  let { resolvedTheme, setTheme } = useTheme();
--- a/apps/formbricks-com/components/docs/BestPractices.tsx
+++ b/apps/formbricks-com/components/docs/BestPractices.tsx
@@ -1,14 +1,14 @@
 "use client";

-import Link from "next/link";
-import { type MotionValue, motion, useMotionTemplate, useMotionValue } from "framer-motion";
-
-import { GridPattern } from "./GridPattern";
-import { Heading } from "./Heading";
 import { ChatBubbleIcon } from "@/components/docs/icons/ChatBubbleIcon";
 import { EnvelopeIcon } from "@/components/docs/icons/EnvelopeIcon";
 import { UserIcon } from "@/components/docs/icons/UserIcon";
 import { UsersIcon } from "@/components/docs/icons/UsersIcon";
+import { type MotionValue, motion, useMotionTemplate, useMotionValue } from "framer-motion";
+import Link from "next/link";
+
+import { GridPattern } from "./GridPattern";
+import { Heading } from "./Heading";

 interface BestPractice {
  href: string;
--- a/apps/formbricks-com/components/docs/Button.tsx
+++ b/apps/formbricks-com/components/docs/Button.tsx
@@ -1,5 +1,5 @@
-import Link from "next/link";
 import clsx from "clsx";
+import Link from "next/link";

 function ArrowIcon(props: React.ComponentPropsWithoutRef<"svg">) {
  return (
--- a/apps/formbricks-com/components/docs/Code.tsx
+++ b/apps/formbricks-com/components/docs/Code.tsx
@@ -1,12 +1,11 @@
 "use client";

-import { Children, createContext, isValidElement, useContext, useEffect, useRef, useState } from "react";
+import { Tag } from "@/components/docs/Tag";
 import { Tab } from "@headlessui/react";
 import clsx from "clsx";
+import { Children, createContext, isValidElement, useContext, useEffect, useRef, useState } from "react";
 import { create } from "zustand";

-import { Tag } from "@/components/docs/Tag";
-
 const languageNames: Record<string, string> = {
  js: "JavaScript",
  ts: "TypeScript",
--- a/apps/formbricks-com/components/docs/DocsFeedback.tsx
+++ b/apps/formbricks-com/components/docs/DocsFeedback.tsx
@@ -1,8 +1,9 @@
 "use client";

+import { useState } from "react";
+
 import { Button } from "@formbricks/ui/Button";
 import { Popover, PopoverContent, PopoverTrigger } from "@formbricks/ui/Popover";
-import { useState } from "react";

 export const DocsFeedback: React.FC = () => {
  const [isOpen, setIsOpen] = useState(false);
--- a/apps/formbricks-com/components/docs/Feedback.tsx
+++ b/apps/formbricks-com/components/docs/Feedback.tsx
@@ -1,8 +1,9 @@
 "use client";

-import { forwardRef, Fragment, useState } from "react";
-import { usePathname } from "next/navigation";
 import { Transition } from "@headlessui/react";
+import { usePathname } from "next/navigation";
+import { Fragment, forwardRef, useState } from "react";
+
 import { handleFeedbackSubmit } from "../../lib/handleFeedbackSubmit";

 function CheckIcon(props: React.ComponentPropsWithoutRef<"svg">) {
--- a/apps/formbricks-com/components/docs/Footer.tsx
+++ b/apps/formbricks-com/components/docs/Footer.tsx
@@ -2,7 +2,8 @@

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

--- a/apps/formbricks-com/components/docs/Header.tsx
+++ b/apps/formbricks-com/components/docs/Header.tsx
@@ -1,11 +1,11 @@
 "use client";

+import { FooterLogo } from "@/components/shared/Logo";
 import clsx from "clsx";
 import { motion, useScroll, useTransform } from "framer-motion";
 import Link from "next/link";
 import { forwardRef } from "react";

-import { FooterLogo } from "@/components/shared/Logo";
 import { Button } from "./Button";
 import { MobileNavigation, useIsInsideMobileNavigation, useMobileNavigationStore } from "./MobileNavigation";
 import { MobileSearch, Search } from "./Search";
--- a/apps/formbricks-com/components/docs/Heading.tsx
+++ b/apps/formbricks-com/components/docs/Heading.tsx
@@ -1,13 +1,13 @@
 "use client";

+import { remToPx } from "@/lib/remToPx";
 import { useInView } from "framer-motion";
 import Link from "next/link";
+import { usePathname } from "next/navigation";
 import { useEffect, useRef } from "react";

-import { remToPx } from "@/lib/remToPx";
 import { useSectionStore } from "./SectionProvider";
 import { Tag } from "./Tag";
-import { usePathname } from "next/navigation";

 function AnchorIcon(props: React.ComponentPropsWithoutRef<"svg">) {
  return (
--- a/apps/formbricks-com/components/docs/Layout.tsx
+++ b/apps/formbricks-com/components/docs/Layout.tsx
@@ -1,14 +1,14 @@
 "use client";

+import { Navigation } from "@/components/docs/Navigation";
+import { FooterLogo } from "@/components/shared/Logo";
+import { motion } from "framer-motion";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { motion } from "framer-motion";

 import { Footer } from "./Footer";
 import { Header } from "./Header";
 import { type Section, SectionProvider } from "./SectionProvider";
-import { FooterLogo } from "@/components/shared/Logo";
-import { Navigation } from "@/components/docs/Navigation";

 export function Layout({
  children,
--- a/apps/formbricks-com/components/docs/Libraries.tsx
+++ b/apps/formbricks-com/components/docs/Libraries.tsx
@@ -1,9 +1,9 @@
-import Image from "next/image";
-
 import logoHtml from "@/images/logos/html5.svg";
 import logoNextjs from "@/images/logos/nextjs.svg";
 import logoReactJs from "@/images/logos/reactjs.svg";
 import logoVueJs from "@/images/logos/vuejs.svg";
+import Image from "next/image";
+
 import { Button } from "./Button";

 const libraries = [
--- a/apps/formbricks-com/components/docs/MobileNavigation.tsx
+++ b/apps/formbricks-com/components/docs/MobileNavigation.tsx
@@ -1,12 +1,12 @@
 "use client";

-import { createContext, Fragment, Suspense, useContext, useEffect, useRef } from "react";
-import { usePathname, useSearchParams } from "next/navigation";
+import { Header } from "@/components/docs/Header";
 import { Dialog, Transition } from "@headlessui/react";
 import { motion } from "framer-motion";
+import { usePathname, useSearchParams } from "next/navigation";
+import { Fragment, Suspense, createContext, useContext, useEffect, useRef } from "react";
 import { create } from "zustand";

-import { Header } from "@/components/docs/Header";
 import { Navigation } from "./Navigation";

 function MenuIcon(props: React.ComponentPropsWithoutRef<"svg">) {
--- a/apps/formbricks-com/components/docs/Navigation.tsx
+++ b/apps/formbricks-com/components/docs/Navigation.tsx
@@ -1,12 +1,12 @@
 "use client";

+import { remToPx } from "@/lib/remToPx";
 import clsx from "clsx";
 import { AnimatePresence, motion, useIsPresent } from "framer-motion";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useRef } from "react";

-import { remToPx } from "@/lib/remToPx";
 import { Button } from "./Button";
 import { useIsInsideMobileNavigation } from "./MobileNavigation";
 import { useSectionStore } from "./SectionProvider";
--- a/apps/formbricks-com/components/docs/Search.tsx
+++ b/apps/formbricks-com/components/docs/Search.tsx
@@ -1,19 +1,18 @@
 "use client";

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

 type EmptyObject = Record<string, never>;

--- a/apps/formbricks-com/components/docs/SectionProvider.tsx
+++ b/apps/formbricks-com/components/docs/SectionProvider.tsx
@@ -1,10 +1,9 @@
 "use client";

+import { remToPx } from "@/lib/remToPx";
 import { createContext, useContext, useEffect, useLayoutEffect, useState } from "react";
 import { type StoreApi, createStore, useStore } from "zustand";

-import { remToPx } from "@/lib/remToPx";
-
 export interface Section {
  id: string;
  title: string;
--- a/apps/formbricks-com/components/docs/ThemeToggle.tsx
+++ b/apps/formbricks-com/components/docs/ThemeToggle.tsx
@@ -1,7 +1,7 @@
 "use client";

-import { useEffect, useState } from "react";
 import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";

 function SunIcon(props: React.ComponentPropsWithoutRef<"svg">) {
  return (
--- a/apps/formbricks-com/components/docs/docsFaq.tsx
+++ b/apps/formbricks-com/components/docs/docsFaq.tsx
@@ -1,4 +1,5 @@
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@formbricks/ui/Accordion";
+
 import FaqJsonLdComponent from "./faQJsonLD";

 const FAQ_DATA = [
--- a/apps/formbricks-com/components/docs/mdx.tsx
+++ b/apps/formbricks-com/components/docs/mdx.tsx
@@ -1,7 +1,7 @@
-import Link from "next/link";
-import clsx from "clsx";
-
 import { Feedback } from "@/components/docs/Feedback";
+import clsx from "clsx";
+import Link from "next/link";
+
 import { Heading } from "./Heading";
 import { Prose } from "./Prose";

--- a/apps/formbricks-com/components/dummyUI/AddEventDummy.tsx
+++ b/apps/formbricks-com/components/dummyUI/AddEventDummy.tsx
@@ -1,8 +1,9 @@
-import { Button } from "@formbricks/ui/Button";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@formbricks/ui/Select";
 import { PlusIcon, TrashIcon } from "@heroicons/react/24/solid";
 import { useState } from "react";

+import { Button } from "@formbricks/ui/Button";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@formbricks/ui/Select";
+
 const DummyUI: React.FC = () => {
  const actionClasses = [
    { id: "1", name: "View Dashboard" },
--- a/apps/formbricks-com/components/dummyUI/AddNoCodeEventModalDummy.tsx
+++ b/apps/formbricks-com/components/dummyUI/AddNoCodeEventModalDummy.tsx
@@ -1,10 +1,11 @@
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@formbricks/ui/Select";
-import { Button } from "@formbricks/ui/Button";
-import { Label } from "@formbricks/ui/Label";
-import { Input } from "@formbricks/ui/Input";
-import { RadioGroup, RadioGroupItem } from "@formbricks/ui/RadioGroup";
 import { CursorArrowRaysIcon } from "@heroicons/react/24/solid";
+
+import { Button } from "@formbricks/ui/Button";
+import { Input } from "@formbricks/ui/Input";
+import { Label } from "@formbricks/ui/Label";
 import { Modal } from "@formbricks/ui/Modal";
+import { RadioGroup, RadioGroupItem } from "@formbricks/ui/RadioGroup";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@formbricks/ui/Select";

 interface EventDetailModalProps {
  open: boolean;
--- a/apps/formbricks-com/components/dummyUI/CTAQuestion.tsx
+++ b/apps/formbricks-com/components/dummyUI/CTAQuestion.tsx
@@ -1,4 +1,5 @@
 import { TSurveyCTAQuestion } from "@formbricks/types/surveys";
+
 import Headline from "./Headline";
 import HtmlBody from "./HtmlBody";

--- a/apps/formbricks-com/components/dummyUI/DemoPreview.tsx
+++ b/apps/formbricks-com/components/dummyUI/DemoPreview.tsx
@@ -1,8 +1,11 @@
 "use client";
+
 import React, { useEffect, useState } from "react";
+
+import { TTemplate } from "@formbricks/types/templates";
+
 import PreviewSurvey from "./PreviewSurvey";
 import { findTemplateByName } from "./templates";
-import { TTemplate } from "@formbricks/types/templates";

 interface DemoPreviewProps {
  template: string;
--- a/apps/formbricks-com/components/dummyUI/DemoView.tsx
+++ b/apps/formbricks-com/components/dummyUI/DemoView.tsx
@@ -1,5 +1,7 @@
-import { TTemplate } from "@formbricks/types/templates";
 import { useEffect, useState } from "react";
+
+import { TTemplate } from "@formbricks/types/templates";
+
 import PreviewSurvey from "./PreviewSurvey";
 import TemplateList from "./TemplateList";
 import { templates } from "./templates";
--- a/apps/formbricks-com/components/dummyUI/Modal.tsx
+++ b/apps/formbricks-com/components/dummyUI/Modal.tsx
@@ -1,4 +1,5 @@
 import { ReactNode, useEffect, useState } from "react";
+
 import { cn } from "@formbricks/lib/cn";

 export default function Modal({
--- a/apps/formbricks-com/components/dummyUI/MultipleChoiceMultiQuestion.tsx
+++ b/apps/formbricks-com/components/dummyUI/MultipleChoiceMultiQuestion.tsx
@@ -1,6 +1,8 @@
-import { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
+
 import { cn } from "@formbricks/lib/cn";
 import { TSurveyMultipleChoiceMultiQuestion } from "@formbricks/types/surveys";
+
 import Headline from "./Headline";
 import Subheader from "./Subheader";

--- a/apps/formbricks-com/components/dummyUI/MultipleChoiceSingleQuestion.tsx
+++ b/apps/formbricks-com/components/dummyUI/MultipleChoiceSingleQuestion.tsx
@@ -1,6 +1,8 @@
+import { useState } from "react";
+
 import { cn } from "@formbricks/lib/cn";
 import { TSurveyMultipleChoiceSingleQuestion } from "@formbricks/types/surveys";
-import { useState } from "react";
+
 import Headline from "./Headline";
 import Subheader from "./Subheader";

--- a/apps/formbricks-com/components/dummyUI/NPSQuestion.tsx
+++ b/apps/formbricks-com/components/dummyUI/NPSQuestion.tsx
@@ -1,6 +1,8 @@
 import { useState } from "react";
+
 import { cn } from "@formbricks/lib/cn";
 import { TSurveyNPSQuestion } from "@formbricks/types/surveys";
+
 import Headline from "./Headline";
 import Subheader from "./Subheader";

--- a/apps/formbricks-com/components/dummyUI/OpenTextQuestion.tsx
+++ b/apps/formbricks-com/components/dummyUI/OpenTextQuestion.tsx
@@ -1,5 +1,7 @@
-import { TSurveyOpenTextQuestion } from "@formbricks/types/surveys";
 import { useState } from "react";
+
+import { TSurveyOpenTextQuestion } from "@formbricks/types/surveys";
+
 import Headline from "./Headline";
 import Subheader from "./Subheader";

--- a/apps/formbricks-com/components/dummyUI/PreviewSurvey.tsx
+++ b/apps/formbricks-com/components/dummyUI/PreviewSurvey.tsx
@@ -1,7 +1,9 @@
 import { useState } from "react";
+
+import { TSurvey, TSurveyQuestion } from "@formbricks/types/surveys";
+
 import Modal from "./Modal";
 import QuestionConditional from "./QuestionConditional";
-import { TSurveyQuestion, TSurvey } from "@formbricks/types/surveys";
 import ThankYouCard from "./ThankYouCard";

 interface PreviewSurveyProps {
--- a/apps/formbricks-com/components/dummyUI/QuestionConditional.tsx
+++ b/apps/formbricks-com/components/dummyUI/QuestionConditional.tsx
@@ -1,9 +1,10 @@
 import { TSurveyQuestion, TSurveyQuestionType } from "@formbricks/types/surveys";
-import OpenTextQuestion from "./OpenTextQuestion";
-import MultipleChoiceSingleQuestion from "./MultipleChoiceSingleQuestion";
-import MultipleChoiceMultiQuestion from "./MultipleChoiceMultiQuestion";
-import NPSQuestion from "./NPSQuestion";
+
 import CTAQuestion from "./CTAQuestion";
+import MultipleChoiceMultiQuestion from "./MultipleChoiceMultiQuestion";
+import MultipleChoiceSingleQuestion from "./MultipleChoiceSingleQuestion";
+import NPSQuestion from "./NPSQuestion";
+import OpenTextQuestion from "./OpenTextQuestion";
 import RatingQuestion from "./RatingQuestion";

 interface QuestionConditionalProps {
--- a/apps/formbricks-com/components/dummyUI/RatingQuestion.tsx
+++ b/apps/formbricks-com/components/dummyUI/RatingQuestion.tsx
@@ -1,6 +1,8 @@
-import { TSurveyRatingQuestion } from "@formbricks/types/surveys";
 import { useState } from "react";
+
 import { cn } from "@formbricks/lib/cn";
+import { TSurveyRatingQuestion } from "@formbricks/types/surveys";
+
 import Headline from "./Headline";
 import Subheader from "./Subheader";

--- a/apps/formbricks-com/components/dummyUI/TemplateList.tsx
+++ b/apps/formbricks-com/components/dummyUI/TemplateList.tsx
@@ -1,6 +1,8 @@
-import { TTemplate } from "@formbricks/types/templates";
 import { useEffect, useState } from "react";
+
 import { cn } from "@formbricks/lib/cn";
+import { TTemplate } from "@formbricks/types/templates";
+
 import { templates } from "./templates";

 type TemplateList = {
--- a/apps/formbricks-com/components/dummyUI/templates.ts
+++ b/apps/formbricks-com/components/dummyUI/templates.ts
@@ -1,3 +1,7 @@
+import { createId } from "@paralleldrive/cuid2";
+
+import { TSurveyQuestionType } from "@formbricks/types/surveys";
+import { TTemplate } from "@formbricks/types/templates";
 import {
  AppPieChartIcon,
  ArrowRightCircleIcon,
@@ -22,10 +26,6 @@ import {
  VideoTabletAdjustIcon,
 } from "@formbricks/ui/icons";

-import { TSurveyQuestionType } from "@formbricks/types/surveys";
-import { TTemplate } from "@formbricks/types/templates";
-import { createId } from "@paralleldrive/cuid2";
-
 const thankYouCardDefault = {
  enabled: true,
  headline: "Thank you!",
--- a/apps/formbricks-com/components/home/Faq.tsx
+++ b/apps/formbricks-com/components/home/Faq.tsx
@@ -1,6 +1,6 @@
+import HeadingCentered from "@/components/shared/HeadingCentered";
 import { FAQPageJsonLd } from "next-seo";

-import HeadingCentered from "@/components/shared/HeadingCentered";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@formbricks/ui/Accordion";

 const FAQ_DATA = [
--- a/apps/formbricks-com/components/home/Features.tsx
+++ b/apps/formbricks-com/components/home/Features.tsx
@@ -1,4 +1,5 @@
 import { CodeFileIcon, EyeIcon, HandPuzzleIcon } from "@formbricks/ui/icons";
+
 import HeadingCentered from "../shared/HeadingCentered";

 const features = [
--- a/apps/formbricks-com/components/home/Hero.tsx
+++ b/apps/formbricks-com/components/home/Hero.tsx
@@ -1,16 +1,18 @@
 import CalLogoDark from "@/images/clients/cal-logo-dark.svg";
 import CalLogoLight from "@/images/clients/cal-logo-light.svg";
-import ClovyrLogo from "@/images/clients/clovyr-logo.svg";
 import CrowdLogoDark from "@/images/clients/crowd-logo-dark.svg";
 import CrowdLogoLight from "@/images/clients/crowd-logo-light.svg";
+import FlixbusLogo from "@/images/clients/flixbus-white.svg";
 import NILogoDark from "@/images/clients/niLogoDark.svg";
 import NILogoLight from "@/images/clients/niLogoWhite.svg";
 import AnimationFallback from "@/public/animations/opensource-xm-platform-formbricks-fallback.png";
-import { Button } from "@formbricks/ui/Button";
 import { ChevronRightIcon } from "@heroicons/react/24/outline";
 import { usePlausible } from "next-plausible";
 import Image from "next/image";
 import { useRouter } from "next/router";
+
+import { Button } from "@formbricks/ui/Button";
+
 import HeroAnimation from "./HeroAnimation";

 export const Hero: React.FC = ({}) => {
@@ -40,6 +42,12 @@ export const Hero: React.FC = ({}) => {
            Trusted by
          </p>
          <div className="grid grid-cols-4 items-center gap-6 pt-2 md:gap-8">
+            <Image
+              src={FlixbusLogo}
+              alt="Flixbus Flix Flixtrain Logo"
+              className="rounded-lg pb-1 hover:opacity-100 md:opacity-50"
+              width={200}
+            />
            <Image
              src={CalLogoLight}
              alt="Cal Logo"
@@ -76,12 +84,6 @@ export const Hero: React.FC = ({}) => {
              className="hidden  pb-1 hover:opacity-100 dark:block md:opacity-50"
              width={200}
            />
-            <Image
-              src={ClovyrLogo}
-              alt="Clovyr Logo"
-              className="rounded-lg pb-1 hover:opacity-100 md:opacity-50"
-              width={200}
-            />
          </div>
        </div>
        <div className="hidden pt-10 md:block">
--- a/apps/formbricks-com/components/home/ScrollToTop.tsx
+++ b/apps/formbricks-com/components/home/ScrollToTop.tsx
@@ -1,8 +1,9 @@
-import { Button } from "@formbricks/ui/Button";
 import { ArrowUpIcon } from "@heroicons/react/24/solid";
 import throttle from "lodash/throttle";
 import { useCallback, useEffect, useState } from "react";

+import { Button } from "@formbricks/ui/Button";
+
 const ScrollToTopButton = () => {
  const [visible, setVisible] = useState(false);

--- a/apps/formbricks-com/components/home/SetupTabs.tsx
+++ b/apps/formbricks-com/components/home/SetupTabs.tsx
@@ -1,6 +1,7 @@
 import clsx from "clsx";
 import { useState } from "react";
 import { IoLogoHtml5, IoLogoNpm } from "react-icons/io5";
+
 import CodeBlock from "../shared/CodeBlock";

 interface SecondNavbarProps {
--- a/apps/formbricks-com/components/home/Steps.tsx
+++ b/apps/formbricks-com/components/home/Steps.tsx
@@ -1,10 +1,12 @@
 import DemoPreview from "@/components/dummyUI/DemoPreview";
 import DashboardMockupDark from "@/images/dashboard-mockup-dark.png";
 import DashboardMockup from "@/images/dashboard-mockup.png";
-import { Button } from "@formbricks/ui/Button";
 import { CursorArrowRaysIcon } from "@heroicons/react/24/solid";
 import Image from "next/image";
 import { useState } from "react";
+
+import { Button } from "@formbricks/ui/Button";
+
 import AddEventDummy from "../dummyUI/AddEventDummy";
 import AddNoCodeEventModalDummy from "../dummyUI/AddNoCodeEventModalDummy";
 import HeadingCentered from "../shared/HeadingCentered";
--- a/apps/formbricks-com/components/home/VideoWalkThrough.tsx
+++ b/apps/formbricks-com/components/home/VideoWalkThrough.tsx
@@ -1,5 +1,5 @@
-import { ResponsiveVideo } from "@formbricks/ui/ResponsiveVideo";
 import { Modal } from "@formbricks/ui/Modal";
+import { ResponsiveVideo } from "@formbricks/ui/ResponsiveVideo";

 interface VideoWalkThroughProps {
  open: boolean;
--- a/apps/formbricks-com/components/shared/BestPracticeNavigation.tsx
+++ b/apps/formbricks-com/components/shared/BestPracticeNavigation.tsx
@@ -1,3 +1,6 @@
+import clsx from "clsx";
+import Link from "next/link";
+
 import {
  BaseballIcon,
  CancelSubscriptionIcon,
@@ -8,8 +11,6 @@ import {
  OnboardingIcon,
  PMFIcon,
 } from "@formbricks/ui/icons";
-import clsx from "clsx";
-import Link from "next/link";

 export default function BestPracticeNavigation() {
  const BestPractices = [
--- a/apps/formbricks-com/components/shared/BreakerCTA.tsx
+++ b/apps/formbricks-com/components/shared/BreakerCTA.tsx
@@ -1,8 +1,9 @@
-import { Button } from "@formbricks/ui/Button";
 import clsx from "clsx";
 import { usePlausible } from "next-plausible";
 import { useRouter } from "next/router";

+import { Button } from "@formbricks/ui/Button";
+
 interface Props {
  teaser: string;
  headline: string;
--- a/apps/formbricks-com/components/shared/CTA.tsx
+++ b/apps/formbricks-com/components/shared/CTA.tsx
@@ -1,5 +1,7 @@
-import { Button } from "@formbricks/ui/Button";
 import { useRouter } from "next/router";
+
+import { Button } from "@formbricks/ui/Button";
+
 import HeadingCentered from "./HeadingCentered";

 export default function CTA() {
--- a/apps/formbricks-com/components/shared/Callout.tsx
+++ b/apps/formbricks-com/components/shared/Callout.tsx
@@ -1,5 +1,5 @@
-import clsx from "clsx";
 import { Icon } from "@/components/shared/Icon";
+import clsx from "clsx";

 const styles = {
  note: {
--- a/apps/formbricks-com/components/shared/EarlyBirdDeal.tsx
+++ b/apps/formbricks-com/components/shared/EarlyBirdDeal.tsx
@@ -1,8 +1,9 @@
 import EarlyBird from "@/images/early bird deal for open source jotform alternative typeform and surveymonkey_v2.svg";
-import { Button } from "@formbricks/ui/Button";
 import { usePlausible } from "next-plausible";
 import Image from "next/image";

+import { Button } from "@formbricks/ui/Button";
+
 export default function EarlyBirdDeal() {
  const plausible = usePlausible();
  return (
--- a/apps/formbricks-com/components/shared/FeatureHighlight.tsx
+++ b/apps/formbricks-com/components/shared/FeatureHighlight.tsx
@@ -1,6 +1,7 @@
-import { Button } from "@formbricks/ui/Button";
-import { useRouter } from "next/router";
 import clsx from "clsx";
+import { useRouter } from "next/router";
+
+import { Button } from "@formbricks/ui/Button";

 interface Props {
  featureTitle: string;
--- a/apps/formbricks-com/components/shared/Footer.tsx
+++ b/apps/formbricks-com/components/shared/Footer.tsx
@@ -1,5 +1,6 @@
 import Link from "next/link";
 import { FaDiscord, FaGithub, FaXTwitter } from "react-icons/fa6";
+
 import { FooterLogo } from "./Logo";

 const navigation = {
--- a/apps/formbricks-com/components/shared/Header.tsx
+++ b/apps/formbricks-com/components/shared/Header.tsx
@@ -1,5 +1,14 @@
 import GitHubMarkWhite from "@/images/github-mark-white.svg";
 import GitHubMarkDark from "@/images/github-mark.svg";
+import { Popover, Transition } from "@headlessui/react";
+import { Bars3Icon, ChevronDownIcon, ChevronRightIcon, XMarkIcon } from "@heroicons/react/24/outline";
+import clsx from "clsx";
+import { usePlausible } from "next-plausible";
+import Image from "next/image";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { Fragment, useEffect, useState } from "react";
+
 import { Button } from "@formbricks/ui/Button";
 import {
  BaseballIcon,
@@ -11,16 +20,8 @@ import {
  OnboardingIcon,
  PMFIcon,
 } from "@formbricks/ui/icons";
-import { Popover, Transition } from "@headlessui/react";
-import { Bars3Icon, ChevronDownIcon, ChevronRightIcon, XMarkIcon } from "@heroicons/react/24/outline";
-import clsx from "clsx";
-import { usePlausible } from "next-plausible";
-import Image from "next/image";
-import Link from "next/link";
-import { useRouter } from "next/router";
-import { Fragment, useEffect, useState } from "react";
+
 import { FooterLogo } from "./Logo";
-import { ThemeSelector } from "./ThemeSelector";

 function GitHubIcon(props: any) {
  return (
@@ -300,7 +301,6 @@ export default function Header() {
          </Link> */}
        </Popover.Group>
        <div className="hidden flex-1 items-center justify-end md:flex">
-          <ThemeSelector className="relative z-10 mr-2 lg:mr-5" />
          <Button
            variant="secondary"
            className="group hidden px-2 lg:block"
--- a/apps/formbricks-com/components/shared/HeroAnimation.tsx
+++ b/apps/formbricks-com/components/shared/HeroAnimation.tsx
@@ -1,5 +1,5 @@
-import { useEffect, useRef, useState } from "react";
 import type { LottiePlayer } from "lottie-web";
+import { useEffect, useRef, useState } from "react";

 export default function HeroAnimation(props: any) {
  const ref = useRef<HTMLDivElement>(null);
--- a/apps/formbricks-com/components/shared/LayoutMdx.tsx
+++ b/apps/formbricks-com/components/shared/LayoutMdx.tsx
@@ -1,5 +1,6 @@
 import SlideInBanner from "@/components/shared/SlideInBanner";
 import { useEffect } from "react";
+
 import Footer from "./Footer";
 import Header from "./Header";
 import MetaInformation from "./MetaInformation";
--- a/apps/formbricks-com/components/shared/Logo.tsx
+++ b/apps/formbricks-com/components/shared/Logo.tsx
@@ -1,9 +1,9 @@
-import Image from "next/image";
-import logomark from "@/images/logo/logomark.svg";
+import footerLogoDark from "@/images/logo/footerlogo-dark.svg";
+import footerLogo from "@/images/logo/footerlogo.svg";
 import logo from "@/images/logo/logo.svg";
 import logoDark from "@/images/logo/logo_dark.svg";
-import footerLogo from "@/images/logo/footerlogo.svg";
-import footerLogoDark from "@/images/logo/footerlogo-dark.svg";
+import logomark from "@/images/logo/logomark.svg";
+import Image from "next/image";

 export function Logomark(props: any) {
  return <Image src={logomark} {...props} alt="Formbricks Open source Forms & Surveys Logomark" />;
--- a/apps/formbricks-com/components/shared/MdxCTA.tsx
+++ b/apps/formbricks-com/components/shared/MdxCTA.tsx
@@ -1,6 +1,7 @@
-import { Button } from "@formbricks/ui/Button";
 import { useRouter } from "next/router";

+import { Button } from "@formbricks/ui/Button";
+
 export default function CTA() {
  const router = useRouter();
  return (
--- a/apps/formbricks-com/components/shared/MdxTryItCTA.tsx
+++ b/apps/formbricks-com/components/shared/MdxTryItCTA.tsx
@@ -1,7 +1,8 @@
-import { Button } from "@formbricks/ui/Button";
 import { DocumentDuplicateIcon } from "@heroicons/react/24/outline";
 import { useRouter } from "next/router";

+import { Button } from "@formbricks/ui/Button";
+
 export default function HeadingCentered() {
  const router = useRouter();
  return (
--- a/apps/formbricks-com/components/shared/Navigation.tsx
+++ b/apps/formbricks-com/components/shared/Navigation.tsx
@@ -1,6 +1,6 @@
+import clsx from "clsx";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import clsx from "clsx";

 interface NavigationProps {
  navigation: {
--- a/apps/formbricks-com/components/shared/NewsletterSignup.tsx
+++ b/apps/formbricks-com/components/shared/NewsletterSignup.tsx
@@ -1,7 +1,8 @@
 import Friends from "@/images/newsletter-signup-gif.gif";
-import { Button } from "@formbricks/ui/Button";
 import Image from "next/image";

+import { Button } from "@formbricks/ui/Button";
+
 export default function WaitlistForm() {
  return (
    <div className="not-prose text-md mx-auto mt-12 max-w-7xl rounded-lg bg-slate-200 p-10 text-slate-500 shadow-lg dark:bg-slate-800 dark:text-slate-400">
--- a/apps/formbricks-com/components/shared/PricingTable.tsx
+++ b/apps/formbricks-com/components/shared/PricingTable.tsx
@@ -1,6 +1,7 @@
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@formbricks/ui/Tooltip";
 import { CheckIcon, XMarkIcon } from "@heroicons/react/24/outline";

+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@formbricks/ui/Tooltip";
+
 export const PricingTable = ({ leadRow, pricing, endRow }) => {
  return (
    <div className="grid grid-cols-1 px-4 md:gap-4 md:px-16 ">
--- a/apps/formbricks-com/components/shared/Search.tsx
+++ b/apps/formbricks-com/components/shared/Search.tsx
@@ -1,8 +1,8 @@
-import { useCallback, useEffect, useState } from "react";
-import { createPortal } from "react-dom";
+import { DocSearchModal, useDocSearchKeyboardEvents } from "@docsearch/react";
 import Link from "next/link";
 import Router from "next/router";
-import { DocSearchModal, useDocSearchKeyboardEvents } from "@docsearch/react";
+import { useCallback, useEffect, useState } from "react";
+import { createPortal } from "react-dom";

 const docSearchConfig = {
  appId: process.env.NEXT_PUBLIC_DOCSEARCH_APP_ID || "",
--- a/apps/formbricks-com/components/shared/SlideInBanner.tsx
+++ b/apps/formbricks-com/components/shared/SlideInBanner.tsx
@@ -1,9 +1,10 @@
 import LFGLuigi from "@/images/blog/lfg-luigi-200px.webp";
-import { Button } from "@formbricks/ui/Button";
 import { XMarkIcon } from "@heroicons/react/24/solid";
 import Image from "next/image";
 import React, { useEffect, useState } from "react";

+import { Button } from "@formbricks/ui/Button";
+
 interface Props {
  delay?: number;
  scrollPercentage?: number;
@@ -46,8 +47,8 @@ const SlideInBanner: React.FC<Props> = ({ delay = 5000, scrollPercentage = 10, U
        showBanner && !isExiting
          ? "visible translate-y-0 opacity-100"
          : isExiting
-          ? "visible translate-y-full opacity-0"
-          : "invisible translate-y-full opacity-0"
+            ? "visible translate-y-full opacity-0"
+            : "invisible translate-y-full opacity-0"
      }`}>
      <div className="relative col-span-1 hidden lg:block">
        <Image src={LFGLuigi} height={150} className="absolute -bottom-16 left-8" alt="LFG Luigi" />
--- a/apps/formbricks-com/components/shared/Slider.tsx
+++ b/apps/formbricks-com/components/shared/Slider.tsx
@@ -1,7 +1,7 @@
 "use client";

-import * as React from "react";
 import * as SliderPrimitive from "@radix-ui/react-slider";
+import * as React from "react";

 import { cn } from "@formbricks/lib/cn";

--- a/apps/formbricks-com/components/shared/TryItCTA.tsx
+++ b/apps/formbricks-com/components/shared/TryItCTA.tsx
@@ -1,7 +1,8 @@
-import { Button } from "@formbricks/ui/Button";
 import { DocumentDuplicateIcon } from "@heroicons/react/24/outline";
 import { useRouter } from "next/router";

+import { Button } from "@formbricks/ui/Button";
+
 export default function HeadingCentered() {
  const router = useRouter();
  return (
--- a/apps/formbricks-com/components/shared/UseCaseCTA.tsx
+++ b/apps/formbricks-com/components/shared/UseCaseCTA.tsx
@@ -1,6 +1,7 @@
-import { Button } from "@formbricks/ui/Button";
 import { useRouter } from "next/router";

+import { Button } from "@formbricks/ui/Button";
+
 interface UseCaseCTAProps {
  href: string;
 }
--- a/apps/formbricks-com/components/shared/WhyFormbricks.tsx
+++ b/apps/formbricks-com/components/shared/WhyFormbricks.tsx
@@ -1,10 +1,10 @@
 import {
-  UsersIcon,
-  CubeTransparentIcon,
-  UserGroupIcon,
  CommandLineIcon,
-  SwatchIcon,
+  CubeTransparentIcon,
  SquaresPlusIcon,
+  SwatchIcon,
+  UserGroupIcon,
+  UsersIcon,
 } from "@heroicons/react/24/outline";

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

+import "../styles/globals.css";
+
 const jost = Jost({
  weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
  style: ["normal", "italic"],
--- a/apps/formbricks-com/pages/community/HeaderTribe.tsx
+++ b/apps/formbricks-com/pages/community/HeaderTribe.tsx
@@ -1,11 +1,12 @@
 import footerLogoDark from "@/images/logo/footerlogo-dark.svg";
-import { Button } from "@formbricks/ui/Button";
-import { Popover, PopoverContent, PopoverTrigger } from "@formbricks/ui/Popover";
 import { Bars3Icon } from "@heroicons/react/24/solid";
 import Image from "next/image";
 import Link from "next/link";
 import { useState } from "react";

+import { Button } from "@formbricks/ui/Button";
+import { Popover, PopoverContent, PopoverTrigger } from "@formbricks/ui/Popover";
+
 const navigation = [
  { name: "Roadmap", href: "#roadmap" },
  { name: "Levels", href: "#levels" },
--- a/apps/formbricks-com/pages/community/LevelCard.tsx
+++ b/apps/formbricks-com/pages/community/LevelCard.tsx
@@ -1,7 +1,6 @@
 import Image from "next/image";
-import React from "react";
-
 import { StaticImageData } from "next/image";
+import React from "react";

 type Task = {
  title: string;
--- a/apps/formbricks-com/pages/community/Roadmap.tsx
+++ b/apps/formbricks-com/pages/community/Roadmap.tsx
@@ -1,8 +1,9 @@
-import { Button } from "@formbricks/ui/Button";
 import { ChevronDownIcon } from "@heroicons/react/24/outline";
 import Link from "next/link";
 import { FaGithub } from "react-icons/fa6";

+import { Button } from "@formbricks/ui/Button";
+
 interface Event {
  name: string;
  link?: string;
--- a/apps/formbricks-com/pages/community/index.tsx
+++ b/apps/formbricks-com/pages/community/index.tsx
@@ -7,11 +7,13 @@ import PrimeBadge from "@/images/formtribe/prime-batch.png";
 import RookieBadge from "@/images/formtribe/rookie-batch.png";
 import HallOfFame from "@/pages/community/HallOfFame";
 import Roadmap from "@/pages/community/Roadmap";
-import LoadingSpinner from "@formbricks/ui/LoadingSpinner";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@formbricks/ui/Tooltip";
 import Image from "next/image";
 import Link from "next/link";
 import { useEffect } from "react";
+
+import LoadingSpinner from "@formbricks/ui/LoadingSpinner";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@formbricks/ui/Tooltip";
+
 import ContributorGrid from "./ContributorGrid";
 import LayoutTribe from "./LayoutTribe";
 import LevelCard from "./LevelCard";
--- a/apps/formbricks-com/pages/concierge.tsx
+++ b/apps/formbricks-com/pages/concierge.tsx
@@ -1,9 +1,10 @@
 import HeroTitle from "@/components/shared/HeroTitle";
 import Layout from "@/components/shared/Layout";
 import Cal, { getCalApi } from "@calcom/embed-react";
-import { Button } from "@formbricks/ui/Button";
 import { useEffect } from "react";

+import { Button } from "@formbricks/ui/Button";
+
 const XMOffer = [
  {
    step: "1",
--- a/apps/formbricks-com/pages/demo/HeaderLight.tsx
+++ b/apps/formbricks-com/pages/demo/HeaderLight.tsx
@@ -1,8 +1,10 @@
-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 { Button } from "@formbricks/ui/Button";
+
 import { FooterLogo } from "../../components/shared/Logo";

 export default function HeaderLight() {
--- a/apps/formbricks-com/pages/docs-feedback/index.tsx
+++ b/apps/formbricks-com/pages/docs-feedback/index.tsx
@@ -1,8 +1,8 @@
-import Layout from "@/components/shared/Layout";
-import UseCaseHeader from "@/components/shared/UseCaseHeader";
-import UseCaseCTA from "@/components/shared/UseCaseCTA";
 import DocsFeedback from "@/components/docs/DocsFeedback";
 import BestPracticeNavigation from "@/components/shared/BestPracticeNavigation";
+import Layout from "@/components/shared/Layout";
+import UseCaseCTA from "@/components/shared/UseCaseCTA";
+import UseCaseHeader from "@/components/shared/UseCaseHeader";

 export default function DocsFeedbackPage() {
  return (
--- a/apps/formbricks-com/pages/feature-chaser/index.tsx
+++ b/apps/formbricks-com/pages/feature-chaser/index.tsx
@@ -1,8 +1,8 @@
-import Layout from "@/components/shared/Layout";
-import UseCaseHeader from "@/components/shared/UseCaseHeader";
-import UseCaseCTA from "@/components/shared/UseCaseCTA";
 import DemoPreview from "@/components/dummyUI/DemoPreview";
 import BestPracticeNavigation from "@/components/shared/BestPracticeNavigation";
+import Layout from "@/components/shared/Layout";
+import UseCaseCTA from "@/components/shared/UseCaseCTA";
+import UseCaseHeader from "@/components/shared/UseCaseHeader";

 export default function FeatureChaserPage() {
  return (
--- a/apps/formbricks-com/pages/feedback-box/index.tsx
+++ b/apps/formbricks-com/pages/feedback-box/index.tsx
@@ -1,8 +1,8 @@
-import Layout from "@/components/shared/Layout";
-import UseCaseHeader from "@/components/shared/UseCaseHeader";
-import UseCaseCTA from "@/components/shared/UseCaseCTA";
 import DemoPreview from "@/components/dummyUI/DemoPreview";
 import BestPracticeNavigation from "@/components/shared/BestPracticeNavigation";
+import Layout from "@/components/shared/Layout";
+import UseCaseCTA from "@/components/shared/UseCaseCTA";
+import UseCaseHeader from "@/components/shared/UseCaseHeader";

 export default function FeedbackBoxPage() {
  return (
--- a/apps/formbricks-com/pages/improve-trial-conversion/index.tsx
+++ b/apps/formbricks-com/pages/improve-trial-conversion/index.tsx
@@ -1,8 +1,8 @@
-import Layout from "@/components/shared/Layout";
-import UseCaseHeader from "@/components/shared/UseCaseHeader";
-import UseCaseCTA from "@/components/shared/UseCaseCTA";
 import DemoPreview from "@/components/dummyUI/DemoPreview";
 import BestPracticeNavigation from "@/components/shared/BestPracticeNavigation";
+import Layout from "@/components/shared/Layout";
+import UseCaseCTA from "@/components/shared/UseCaseCTA";
+import UseCaseHeader from "@/components/shared/UseCaseHeader";

 export default function MissedTrialPagePage() {
  return (
--- a/apps/formbricks-com/pages/index.tsx
+++ b/apps/formbricks-com/pages/index.tsx
@@ -27,9 +27,9 @@ const IndexPage = () => (
    <div className="hidden lg:block">
      <BreakerCTA
        teaser="READY?"
-        headline="Create surveys in minutes."
-        subheadline="Don’t take our word for it, try it yourself."
-        cta="Create survey"
+        headline="Get started in minutes."
+        subheadline="Dive right in, no credit card required."
+        cta="Get started"
        href="https://app.formbricks.com/auth/signup"
      />
    </div>
--- a/apps/formbricks-com/pages/interview-prompt/index.tsx
+++ b/apps/formbricks-com/pages/interview-prompt/index.tsx
@@ -1,8 +1,8 @@
-import Layout from "@/components/shared/Layout";
-import UseCaseHeader from "@/components/shared/UseCaseHeader";
-import UseCaseCTA from "@/components/shared/UseCaseCTA";
 import DemoPreview from "@/components/dummyUI/DemoPreview";
 import BestPracticeNavigation from "@/components/shared/BestPracticeNavigation";
+import Layout from "@/components/shared/Layout";
+import UseCaseCTA from "@/components/shared/UseCaseCTA";
+import UseCaseHeader from "@/components/shared/UseCaseHeader";

 export default function InterviewPromptPage() {
  return (
--- a/apps/formbricks-com/pages/learn-from-churn/index.tsx
+++ b/apps/formbricks-com/pages/learn-from-churn/index.tsx
@@ -1,8 +1,8 @@
-import Layout from "@/components/shared/Layout";
-import UseCaseHeader from "@/components/shared/UseCaseHeader";
-import UseCaseCTA from "@/components/shared/UseCaseCTA";
 import DemoPreview from "@/components/dummyUI/DemoPreview";
 import BestPracticeNavigation from "@/components/shared/BestPracticeNavigation";
+import Layout from "@/components/shared/Layout";
+import UseCaseCTA from "@/components/shared/UseCaseCTA";
+import UseCaseHeader from "@/components/shared/UseCaseHeader";

 export default function LearnFromChurnPage() {
  return (
--- a/apps/formbricks-com/pages/oss-friends.tsx
+++ b/apps/formbricks-com/pages/oss-friends.tsx
@@ -1,5 +1,6 @@
 import HeroTitle from "@/components/shared/HeroTitle";
 import Layout from "@/components/shared/Layout";
+
 import { Button } from "@formbricks/ui/Button";

 type OSSFriend = {
--- a/apps/formbricks-com/pages/pricing.tsx
+++ b/apps/formbricks-com/pages/pricing.tsx
@@ -2,6 +2,7 @@ import HeroTitle from "@/components/shared/HeroTitle";
 import Layout from "@/components/shared/Layout";
 import { OpenSourceInfo } from "@/components/shared/OpenSourceInfo";
 import { GetStartedWithPricing } from "@/components/shared/PricingGetStarted";
+
 import { PricingTable } from "../components/shared/PricingTable";

 const inProductSurveys = {
--- a/apps/formbricks-com/tailwind.config.ts
+++ b/apps/formbricks-com/tailwind.config.ts
@@ -3,6 +3,7 @@ import forms from "@tailwindcss/forms";
 import typographyPlugin from "@tailwindcss/typography";
 import { type Config } from "tailwindcss";
 import defaultTheme from "tailwindcss/defaultTheme";
+
 import typographyStyles from "./typography";

 export default {
--- a/apps/storybook/.eslintrc.cjs
+++ b/apps/storybook/.eslintrc.cjs
@@ -1,7 +1,7 @@
 module.exports = {
  root: true,
  env: { browser: true, es2020: true },
-  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:react-hooks/recommended', 'plugin:storybook/recommended'],
+  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:react-hooks/recommended', 'plugin:storybook/recommended', 'plugin:storybook/recommended'],
  ignorePatterns: ['dist', '.eslintrc.cjs'],
  parser: '@typescript-eslint/parser',
  plugins: ['react-refresh'],
--- a/apps/storybook/.storybook/main.ts
+++ b/apps/storybook/.storybook/main.ts
@@ -1,6 +1,5 @@
 import type { StorybookConfig } from "@storybook/react-vite";
-
-import { join, dirname } from "path";
+import { dirname, join } from "path";

 /**
 * This function is used to resolve the absolute path of a package.
--- a/apps/storybook/.storybook/preview.ts
+++ b/apps/storybook/.storybook/preview.ts
@@ -1,5 +1,7 @@
 import type { Preview } from "@storybook/react";
+
 import "../src/index.css";
+
 const preview: Preview = {
  parameters: {
    actions: { argTypesRegex: "^on[A-Z].*" },
--- a/apps/storybook/package.json
+++ b/apps/storybook/package.json
@@ -14,24 +14,27 @@
  "dependencies": {
    "@formbricks/ui": "workspace:*",
    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "storybook": "^7.6.3"
+    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@formbricks/tsconfig": "workspace:*",
-    "@storybook/addon-essentials": "^7.6.3",
-    "@storybook/addon-interactions": "^7.6.3",
-    "@storybook/addon-links": "^7.6.3",
-    "@storybook/addon-onboarding": "^1.0.9",
-    "@storybook/blocks": "^7.6.3",
-    "@storybook/react": "^7.6.3",
-    "@storybook/react-vite": "^7.6.3",
+    "@storybook/addon-essentials": "^7.6.4",
+    "@storybook/addon-interactions": "^7.6.4",
+    "@storybook/addon-links": "^7.6.4",
+    "@storybook/addon-onboarding": "^1.0.10",
+    "@storybook/blocks": "^7.6.4",
+    "@storybook/react": "^7.6.4",
+    "@storybook/react-vite": "^7.6.4",
+    "@storybook/test": "^7.6.5",
    "@storybook/testing-library": "^0.2.2",
-    "@typescript-eslint/eslint-plugin": "^6.13.2",
-    "@typescript-eslint/parser": "^6.13.2",
+    "@typescript-eslint/eslint-plugin": "^6.14.0",
+    "@typescript-eslint/parser": "^6.14.0",
    "@vitejs/plugin-react": "^4.2.1",
-    "esbuild": "^0.19.8",
+    "esbuild": "^0.19.9",
+    "eslint-plugin-storybook": "^0.6.15",
+    "prop-types": "^15.8.1",
+    "storybook": "^7.6.5",
    "tsup": "^8.0.1",
-    "vite": "^5.0.6"
+    "vite": "^5.0.8"
  }
 }
--- a/apps/storybook/src/App.tsx
+++ b/apps/storybook/src/App.tsx
@@ -1,6 +1,7 @@
 import { useState } from "react";

 import "./App.css";
+
 function App() {
  const [count, setCount] = useState(0);

--- a/apps/storybook/src/main.tsx
+++ b/apps/storybook/src/main.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
+
 import App from "./App.tsx";
 import "./index.css";

--- a/apps/storybook/src/stories/button.stories.tsx
+++ b/apps/storybook/src/stories/button.stories.tsx
@@ -0,0 +1,6 @@
+import buttonMeta, { PrimaryStory } from "@formbricks/ui/v2/Button/stories";
+
+const meta = buttonMeta;
+export default meta;
+
+export const Primary = PrimaryStory;
--- a/apps/storybook/vite.config.ts
+++ b/apps/storybook/vite.config.ts
@@ -1,5 +1,5 @@
-import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";

 // https://vitejs.dev/config/
 export default defineConfig({
--- a/apps/web/app/(app)/billing-confirmation/components/ConfirmationPage.tsx
+++ b/apps/web/app/(app)/billing-confirmation/components/ConfirmationPage.tsx
@@ -1,9 +1,10 @@
 "use client";

-import ContentWrapper from "@formbricks/ui/ContentWrapper";
+import { useEffect, useState } from "react";
+
 import { Button } from "@formbricks/ui/Button";
 import { Confetti } from "@formbricks/ui/Confetti";
-import { useEffect, useState } from "react";
+import ContentWrapper from "@formbricks/ui/ContentWrapper";

 interface ConfirmationPageProps {
  environmentId: string;
--- a/apps/web/app/(app)/billing-confirmation/page.tsx
+++ b/apps/web/app/(app)/billing-confirmation/page.tsx
@@ -1,7 +1,7 @@
-export const dynamic = "force-dynamic";
-
 import ConfirmationPage from "./components/ConfirmationPage";

+export const dynamic = "force-dynamic";
+
 export default function BillingConfirmation({ searchParams }) {
  const { environmentId } = searchParams;

--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
pandeymangg	3a12278d9d	feat: button v2 icon button	2023-12-18 10:32:43 +05:30
pandeymangg	95408e577c	feat: button v2 stories	2023-12-16 13:13:59 +05:30
pandeymangg	cf01fdc93d	feat: button v2	2023-12-15 12:58:23 +05:30
Matti Nannt	95ed9b87de	chore: add global-error component (#1780 )	2023-12-14 10:31:23 +00:00
Matti Nannt	ab5f18d2c0	fix: send toast when delete fails in survey editor (#1779 )	2023-12-14 10:09:22 +00:00
Matti Nannt	cd4b6fdae0	chore: add prettier config for import sorting, update packages, migrate to prettier 3 (#1777 )	2023-12-14 09:51:02 +00:00
Karishma Shukla	b11a7cc3ec	feat: improved UI for select & multi-select logic jumps (#1773 ) Co-authored-by: Matthias Nannt <mail@matthiasnannt.com>	2023-12-13 14:05:59 +00:00
Matti Nannt	2e5ed00414	fix: cache revalidation after product was deleted (#1776 )	2023-12-13 11:18:13 +00:00
Shubham Palriwala	557e912309	fix: drop off rate (#1775 )	2023-12-13 11:18:00 +00:00
Dhruwang Jariwala	e2aba0cd4a	fix: autoclose and autoComplete issue (#1426 )	2023-12-13 09:24:03 +00:00
Johannes	7c3c6652d4	fix: add flix logo, remove dark mode (#1774 )	2023-12-12 23:21:06 +00:00
Shubham Palriwala	cbf11de352	fix: missing curl in close surveys cronjob (#1772 )	2023-12-12 13:49:49 +00:00
Deepanshi Sharma	72f7946bcc	fix: template preview UI breakage (#1766 ) Co-authored-by: Matthias Nannt <mail@matthiasnannt.com>	2023-12-12 13:48:15 +00:00
Dhruwang Jariwala	413a3a92cb	fix: survey inactive layout (#1768 )	2023-12-12 10:41:09 +00:00
Dhruwang Jariwala	ee8edbd547	fix: changed maxDuration for weekly summary endpoint (#1769 )	2023-12-12 10:34:50 +00:00
Dhruwang Jariwala	663fa0124f	chore: renamed profile to user (#1770 ) Co-authored-by: Matthias Nannt <mail@matthiasnannt.com>	2023-12-12 10:32:51 +00:00
Jonas Höbenreich	81234c4bde	feat: Automatic team assignment + skip onboarding (#1347 ) Co-authored-by: jonas.hoebenreich <jonas.hoebenreich@flixbus.com> Co-authored-by: Matthias Nannt <mail@matthiasnannt.com>	2023-12-11 15:27:49 +00:00
Dhruwang Jariwala	3103760611	chore: added date transform for cached services (#1753 ) Co-authored-by: Matthias Nannt <mail@matthiasnannt.com>	2023-12-11 13:53:54 +00:00
Shubham Palriwala	d8b6b95ed5	feat: use GHCR instead of DockerHub (#1760 )	2023-12-08 12:49:37 +00:00