chore: add prettier config for import sorting, update packages, migrate to prettier 3 (#1777)

2026-05-03 19:40:08 -05:00 · 2023-12-14 10:51:02 +01:00
parent b11a7cc3ec
commit cd4b6fdae0
637 changed files with 5828 additions and 6417 deletions
@@ -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 = {
@@ -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();
@@ -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;
@@ -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 (
@@ -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",
@@ -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);
@@ -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">) {
@@ -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";

@@ -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";
@@ -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 (
@@ -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,
@@ -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 = [
@@ -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">) {
@@ -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";
@@ -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>;

@@ -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;
@@ -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 (
@@ -1,4 +1,5 @@
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@formbricks/ui/Accordion";
+
 import FaqJsonLdComponent from "./faQJsonLD";

 const FAQ_DATA = [
@@ -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";

@@ -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" },
@@ -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;
@@ -1,4 +1,5 @@
 import { TSurveyCTAQuestion } from "@formbricks/types/surveys";
+
 import Headline from "./Headline";
 import HtmlBody from "./HtmlBody";

@@ -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;
@@ -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";
@@ -1,4 +1,5 @@
 import { ReactNode, useEffect, useState } from "react";
+
 import { cn } from "@formbricks/lib/cn";

 export default function Modal({
@@ -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";

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

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

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

@@ -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 {
@@ -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 {
@@ -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";

@@ -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 = {
@@ -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!",
@@ -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 = [
@@ -1,4 +1,5 @@
 import { CodeFileIcon, EyeIcon, HandPuzzleIcon } from "@formbricks/ui/icons";
+
 import HeadingCentered from "../shared/HeadingCentered";

 const features = [
@@ -6,11 +6,13 @@ 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 = ({}) => {
@@ -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);

@@ -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 {
@@ -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";
@@ -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;
@@ -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 = [
@@ -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;
@@ -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() {
@@ -1,5 +1,5 @@
-import clsx from "clsx";
 import { Icon } from "@/components/shared/Icon";
+import clsx from "clsx";

 const styles = {
  note: {
@@ -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 (
@@ -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;
@@ -1,5 +1,6 @@
 import Link from "next/link";
 import { FaDiscord, FaGithub, FaXTwitter } from "react-icons/fa6";
+
 import { FooterLogo } from "./Logo";

 const navigation = {
@@ -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,14 +20,7 @@ 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";

 function GitHubIcon(props: any) {
@@ -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);
@@ -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";
@@ -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" />;
@@ -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 (
@@ -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 (
@@ -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: {
@@ -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">
@@ -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 ">
@@ -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 || "",
@@ -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" />
@@ -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";

@@ -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 (
@@ -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;
 }
@@ -1,10 +1,10 @@
 import {
-  UsersIcon,
-  CubeTransparentIcon,
-  UserGroupIcon,
  CommandLineIcon,
-  SwatchIcon,
+  CubeTransparentIcon,
  SquaresPlusIcon,
+  SwatchIcon,
+  UserGroupIcon,
+  UsersIcon,
 } from "@heroicons/react/24/outline";

 const features = [
@@ -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"],
@@ -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" },
@@ -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;
@@ -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;
@@ -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";
@@ -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",
@@ -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() {
@@ -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 (
@@ -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 (
@@ -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 (
@@ -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 (
@@ -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 (
@@ -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 (
@@ -1,5 +1,6 @@
 import HeroTitle from "@/components/shared/HeroTitle";
 import Layout from "@/components/shared/Layout";
+
 import { Button } from "@formbricks/ui/Button";

 type OSSFriend = {
@@ -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 = {
@@ -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 {