From c8f88fa4b214ced67aed3293ebe182d3e64e8a00 Mon Sep 17 00:00:00 2001
From: Matthias Nannt <mail@matthiasnannt.com>
Date: Tue, 22 Aug 2023 14:07:45 +0200
Subject: [PATCH] move docs to subfolder

---
 apps/formbricks-com/mdx-components.tsx        |  2 +-
 .../src/app/docs/_components/Code.tsx         | 22 +++++++++----------
 .../src/app/docs/_components/Footer.tsx       |  4 ++--
 .../src/app/docs/_components/Guides.tsx       |  4 ++--
 .../src/app/docs/_components/Header.tsx       | 16 +++++++-------
 .../src/app/docs/_components/Heading.tsx      |  4 ++--
 .../src/app/docs/_components/HeroPattern.tsx  |  2 +-
 .../src/app/docs/_components/Layout.tsx       | 13 ++++++-----
 .../src/app/docs/_components/Libraries.tsx    |  4 ++--
 .../app/docs/_components/MobileNavigation.tsx |  4 ++--
 .../src/app/docs/_components/Navigation.tsx   | 18 +++++++--------
 .../src/app/docs/_components/Resources.tsx    | 12 +++++-----
 .../src/app/docs/_components/Search.tsx       | 16 +++++++-------
 .../src/app/docs/_components/mdx.tsx          | 18 +++++++++------
 apps/formbricks-com/src/app/docs/layout.tsx   |  4 ++--
 apps/formbricks-com/src/app/docs/page.mdx     |  6 ++---
 .../formbricks-com/src/app/docs/sdks/page.mdx |  2 +-
 apps/formbricks-com/src/app/not-found.tsx     |  4 ++--
 apps/formbricks-com/src/components/Code.tsx   | 22 +++++++++----------
 apps/formbricks-com/src/components/Footer.tsx |  4 ++--
 apps/formbricks-com/src/components/Guides.tsx |  4 ++--
 apps/formbricks-com/src/components/Header.tsx | 16 +++++++-------
 .../formbricks-com/src/components/Heading.tsx |  4 ++--
 .../src/components/HeroPattern.tsx            |  2 +-
 apps/formbricks-com/src/components/Layout.tsx | 13 ++++++-----
 .../src/components/Libraries.tsx              |  4 ++--
 .../src/components/MobileNavigation.tsx       |  4 ++--
 .../src/components/Navigation.tsx             | 18 +++++++--------
 .../src/components/Resources.tsx              | 12 +++++-----
 apps/formbricks-com/src/components/Search.tsx | 16 +++++++-------
 apps/formbricks-com/src/components/mdx.tsx    | 18 +++++++++------
 31 files changed, 153 insertions(+), 139 deletions(-)

diff --git a/apps/formbricks-com/mdx-components.tsx b/apps/formbricks-com/mdx-components.tsx
index 819168d274..fa31666089 100644
--- a/apps/formbricks-com/mdx-components.tsx
+++ b/apps/formbricks-com/mdx-components.tsx
@@ -1,4 +1,4 @@
-import * as mdxComponents from '@/components/mdx'
+import * as mdxComponents from '@/app/docs/_components/mdx'
 import { type MDXComponents } from 'mdx/types'
 
 export function useMDXComponents(components: MDXComponents) {
diff --git a/apps/formbricks-com/src/app/docs/_components/Code.tsx b/apps/formbricks-com/src/app/docs/_components/Code.tsx
index 59d55f464f..be25238926 100644
--- a/apps/formbricks-com/src/app/docs/_components/Code.tsx
+++ b/apps/formbricks-com/src/app/docs/_components/Code.tsx
@@ -13,7 +13,7 @@ import { Tab } from '@headlessui/react'
 import clsx from 'clsx'
 import { create } from 'zustand'
 
-import { Tag } from '@/components/Tag'
+import { Tag } from '@/app/docs/_components/Tag'
 
 const languageNames: Record<string, string> = {
   js: 'JavaScript',
@@ -78,7 +78,7 @@ function CopyButton({ code }: { code: string }) {
         'group/button absolute right-4 top-3.5 overflow-hidden rounded-full py-1 pl-2 pr-3 text-2xs font-medium opacity-0 backdrop-blur transition focus:opacity-100 group-hover:opacity-100',
         copied
           ? 'bg-emerald-400/10 ring-1 ring-inset ring-emerald-400/20'
-          : 'bg-white/5 hover:bg-white/7.5 dark:bg-white/2.5 dark:hover:bg-white/5',
+          : 'bg-white/5 hover:bg-white/7.5 dark:bg-white/2.5 dark:hover:bg-white/5'
       )}
       onClick={() => {
         window.navigator.clipboard.writeText(code).then(() => {
@@ -90,7 +90,7 @@ function CopyButton({ code }: { code: string }) {
         aria-hidden={copied}
         className={clsx(
           'pointer-events-none flex items-center gap-0.5 text-zinc-400 transition duration-300',
-          copied && '-translate-y-1.5 opacity-0',
+          copied && '-translate-y-1.5 opacity-0'
         )}
       >
         <ClipboardIcon className="h-5 w-5 fill-zinc-500/20 stroke-zinc-500 transition-colors group-hover/button:stroke-zinc-400" />
@@ -100,7 +100,7 @@ function CopyButton({ code }: { code: string }) {
         aria-hidden={!copied}
         className={clsx(
           'pointer-events-none absolute inset-0 flex items-center justify-center text-emerald-400 transition duration-300',
-          !copied && 'translate-y-1.5 opacity-0',
+          !copied && 'translate-y-1.5 opacity-0'
         )}
       >
         Copied!
@@ -152,7 +152,7 @@ function CodePanel({
 
   if (!code) {
     throw new Error(
-      '`CodePanel` requires a `code` prop, or a child with a `code` prop.',
+      '`CodePanel` requires a `code` prop, or a child with a `code` prop.'
     )
   }
 
@@ -197,7 +197,7 @@ function CodeGroupHeader({
                 'border-b py-3 transition ui-not-focus-visible:outline-none',
                 childIndex === selectedIndex
                   ? 'border-emerald-500 text-emerald-400'
-                  : 'border-transparent text-zinc-400 hover:text-zinc-300',
+                  : 'border-transparent text-zinc-400 hover:text-zinc-300'
               )}
             >
               {getPanelTitle(isValidElement(child) ? child.props : {})}
@@ -271,7 +271,7 @@ const usePreferredLanguageStore = create<{
     set((state) => ({
       preferredLanguages: [
         ...state.preferredLanguages.filter(
-          (preferredLanguage) => preferredLanguage !== language,
+          (preferredLanguage) => preferredLanguage !== language
         ),
         language,
       ],
@@ -282,7 +282,7 @@ function useTabGroupProps(availableLanguages: Array<string>) {
   let { preferredLanguages, addPreferredLanguage } = usePreferredLanguageStore()
   let [selectedIndex, setSelectedIndex] = useState(0)
   let activeLanguage = [...availableLanguages].sort(
-    (a, z) => preferredLanguages.indexOf(z) - preferredLanguages.indexOf(a),
+    (a, z) => preferredLanguages.indexOf(z) - preferredLanguages.indexOf(a)
   )[0]
   let languageIndex = availableLanguages.indexOf(activeLanguage)
   let newSelectedIndex = languageIndex === -1 ? selectedIndex : languageIndex
@@ -298,7 +298,7 @@ function useTabGroupProps(availableLanguages: Array<string>) {
     selectedIndex,
     onChange: (newSelectedIndex: number) => {
       preventLayoutShift(() =>
-        addPreferredLanguage(availableLanguages[newSelectedIndex]),
+        addPreferredLanguage(availableLanguages[newSelectedIndex])
       )
     },
   }
@@ -313,7 +313,7 @@ export function CodeGroup({
 }: React.ComponentPropsWithoutRef<typeof CodeGroupPanels> & { title: string }) {
   let languages =
     Children.map(children, (child) =>
-      getPanelTitle(isValidElement(child) ? child.props : {}),
+      getPanelTitle(isValidElement(child) ? child.props : {})
     ) ?? []
   let tabGroupProps = useTabGroupProps(languages)
   let hasTabs = Children.count(children) > 1
@@ -353,7 +353,7 @@ export function Code({
   if (isGrouped) {
     if (typeof children !== 'string') {
       throw new Error(
-        '`Code` children must be a string when nested inside a `CodeGroup`.',
+        '`Code` children must be a string when nested inside a `CodeGroup`.'
       )
     }
     return <code {...props} dangerouslySetInnerHTML={{ __html: children }} />
diff --git a/apps/formbricks-com/src/app/docs/_components/Footer.tsx b/apps/formbricks-com/src/app/docs/_components/Footer.tsx
index e6ae5971e4..34f43c4d61 100644
--- a/apps/formbricks-com/src/app/docs/_components/Footer.tsx
+++ b/apps/formbricks-com/src/app/docs/_components/Footer.tsx
@@ -3,8 +3,8 @@
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 
-import { Button } from '@/components/Button'
-import { navigation } from '@/components/Navigation'
+import { Button } from '@/app/docs/_components/Button'
+import { navigation } from '@/app/docs/_components/Navigation'
 
 function PageLink({
   label,
diff --git a/apps/formbricks-com/src/app/docs/_components/Guides.tsx b/apps/formbricks-com/src/app/docs/_components/Guides.tsx
index 3950039037..1cfc442dfe 100644
--- a/apps/formbricks-com/src/app/docs/_components/Guides.tsx
+++ b/apps/formbricks-com/src/app/docs/_components/Guides.tsx
@@ -1,5 +1,5 @@
-import { Button } from '@/components/Button'
-import { Heading } from '@/components/Heading'
+import { Button } from '@/app/docs/_components/Button'
+import { Heading } from '@/app/docs/_components/Heading'
 
 const guides = [
   {
diff --git a/apps/formbricks-com/src/app/docs/_components/Header.tsx b/apps/formbricks-com/src/app/docs/_components/Header.tsx
index 72bdbdd691..fb9d9d0310 100644
--- a/apps/formbricks-com/src/app/docs/_components/Header.tsx
+++ b/apps/formbricks-com/src/app/docs/_components/Header.tsx
@@ -3,15 +3,15 @@ import Link from 'next/link'
 import clsx from 'clsx'
 import { motion, useScroll, useTransform } from 'framer-motion'
 
-import { Button } from '@/components/Button'
-import { Logo } from '@/components/Logo'
+import { Button } from '@/app/docs/_components/Button'
+import { Logo } from '@/app/docs/_components/Logo'
 import {
   MobileNavigation,
   useIsInsideMobileNavigation,
-} from '@/components/MobileNavigation'
-import { useMobileNavigationStore } from '@/components/MobileNavigation'
-import { MobileSearch, Search } from '@/components/Search'
-import { ThemeToggle } from '@/components/ThemeToggle'
+} from '@/app/docs/_components/MobileNavigation'
+import { useMobileNavigationStore } from '@/app/docs/_components/MobileNavigation'
+import { MobileSearch, Search } from '@/app/docs/_components/Search'
+import { ThemeToggle } from '@/app/docs/_components/ThemeToggle'
 
 function TopLevelNavItem({
   href,
@@ -53,7 +53,7 @@ export const Header = forwardRef<
           'backdrop-blur-sm dark:backdrop-blur lg:left-72 xl:left-80',
         isInsideMobileNavigation
           ? 'bg-white dark:bg-zinc-900'
-          : 'bg-white/[var(--bg-opacity-light)] dark:bg-zinc-900/[var(--bg-opacity-dark)]',
+          : 'bg-white/[var(--bg-opacity-light)] dark:bg-zinc-900/[var(--bg-opacity-dark)]'
       )}
       style={
         {
@@ -66,7 +66,7 @@ export const Header = forwardRef<
         className={clsx(
           'absolute inset-x-0 top-full h-px transition',
           (isInsideMobileNavigation || !mobileNavIsOpen) &&
-            'bg-zinc-900/7.5 dark:bg-white/7.5',
+            'bg-zinc-900/7.5 dark:bg-white/7.5'
         )}
       />
       <Search />
diff --git a/apps/formbricks-com/src/app/docs/_components/Heading.tsx b/apps/formbricks-com/src/app/docs/_components/Heading.tsx
index 8e2d471a5b..a38889f1ac 100644
--- a/apps/formbricks-com/src/app/docs/_components/Heading.tsx
+++ b/apps/formbricks-com/src/app/docs/_components/Heading.tsx
@@ -4,8 +4,8 @@ import { useEffect, useRef } from 'react'
 import Link from 'next/link'
 import { useInView } from 'framer-motion'
 
-import { useSectionStore } from '@/components/SectionProvider'
-import { Tag } from '@/components/Tag'
+import { useSectionStore } from '@/app/docs/_components/SectionProvider'
+import { Tag } from '@/app/docs/_components/Tag'
 import { remToPx } from '@/lib/remToPx'
 
 function AnchorIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
diff --git a/apps/formbricks-com/src/app/docs/_components/HeroPattern.tsx b/apps/formbricks-com/src/app/docs/_components/HeroPattern.tsx
index 0b4ca3f277..a77098fc8a 100644
--- a/apps/formbricks-com/src/app/docs/_components/HeroPattern.tsx
+++ b/apps/formbricks-com/src/app/docs/_components/HeroPattern.tsx
@@ -1,4 +1,4 @@
-import { GridPattern } from '@/components/GridPattern'
+import { GridPattern } from '@/app/docs/_components/GridPattern'
 
 export function HeroPattern() {
   return (
diff --git a/apps/formbricks-com/src/app/docs/_components/Layout.tsx b/apps/formbricks-com/src/app/docs/_components/Layout.tsx
index 4b32edf836..e6ce78846b 100644
--- a/apps/formbricks-com/src/app/docs/_components/Layout.tsx
+++ b/apps/formbricks-com/src/app/docs/_components/Layout.tsx
@@ -4,11 +4,14 @@ import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 import { motion } from 'framer-motion'
 
-import { Footer } from '@/components/Footer'
-import { Header } from '@/components/Header'
-import { Logo } from '@/components/Logo'
-import { Navigation } from '@/components/Navigation'
-import { type Section, SectionProvider } from '@/components/SectionProvider'
+import { Footer } from '@/app/docs/_components/Footer'
+import { Header } from '@/app/docs/_components/Header'
+import { Logo } from '@/app/docs/_components/Logo'
+import { Navigation } from '@/app/docs/_components/Navigation'
+import {
+  type Section,
+  SectionProvider,
+} from '@/app/docs/_components/SectionProvider'
 
 export function Layout({
   children,
diff --git a/apps/formbricks-com/src/app/docs/_components/Libraries.tsx b/apps/formbricks-com/src/app/docs/_components/Libraries.tsx
index c3b452c662..80cad2542f 100644
--- a/apps/formbricks-com/src/app/docs/_components/Libraries.tsx
+++ b/apps/formbricks-com/src/app/docs/_components/Libraries.tsx
@@ -1,7 +1,7 @@
 import Image from 'next/image'
 
-import { Button } from '@/components/Button'
-import { Heading } from '@/components/Heading'
+import { Button } from '@/app/docs/_components/Button'
+import { Heading } from '@/app/docs/_components/Heading'
 import logoGo from '@/images/logos/go.svg'
 import logoNode from '@/images/logos/node.svg'
 import logoPhp from '@/images/logos/php.svg'
diff --git a/apps/formbricks-com/src/app/docs/_components/MobileNavigation.tsx b/apps/formbricks-com/src/app/docs/_components/MobileNavigation.tsx
index e021f52439..5e8da9f749 100644
--- a/apps/formbricks-com/src/app/docs/_components/MobileNavigation.tsx
+++ b/apps/formbricks-com/src/app/docs/_components/MobileNavigation.tsx
@@ -13,8 +13,8 @@ import { Dialog, Transition } from '@headlessui/react'
 import { motion } from 'framer-motion'
 import { create } from 'zustand'
 
-import { Header } from '@/components/Header'
-import { Navigation } from '@/components/Navigation'
+import { Header } from '@/app/docs/_components/Header'
+import { Navigation } from '@/app/docs/_components/Navigation'
 
 function MenuIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
   return (
diff --git a/apps/formbricks-com/src/app/docs/_components/Navigation.tsx b/apps/formbricks-com/src/app/docs/_components/Navigation.tsx
index f95188385b..942ab05b13 100644
--- a/apps/formbricks-com/src/app/docs/_components/Navigation.tsx
+++ b/apps/formbricks-com/src/app/docs/_components/Navigation.tsx
@@ -6,10 +6,10 @@ import { usePathname } from 'next/navigation'
 import clsx from 'clsx'
 import { AnimatePresence, motion, useIsPresent } from 'framer-motion'
 
-import { Button } from '@/components/Button'
-import { useIsInsideMobileNavigation } from '@/components/MobileNavigation'
-import { useSectionStore } from '@/components/SectionProvider'
-import { Tag } from '@/components/Tag'
+import { Button } from '@/app/docs/_components/Button'
+import { useIsInsideMobileNavigation } from '@/app/docs/_components/MobileNavigation'
+import { useSectionStore } from '@/app/docs/_components/SectionProvider'
+import { Tag } from '@/app/docs/_components/Tag'
 import { remToPx } from '@/lib/remToPx'
 
 interface NavGroup {
@@ -66,7 +66,7 @@ function NavLink({
         isAnchorLink ? 'pl-7' : 'pl-4',
         active
           ? 'text-zinc-900 dark:text-white'
-          : 'text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white',
+          : 'text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white'
       )}
     >
       <span className="truncate">{children}</span>
@@ -91,15 +91,15 @@ function VisibleSectionHighlight({
       useSectionStore((s) => s.sections),
       useSectionStore((s) => s.visibleSections),
     ],
-    useIsInsideMobileNavigation(),
+    useIsInsideMobileNavigation()
   )
 
   let isPresent = useIsPresent()
   let firstVisibleSectionIndex = Math.max(
     0,
     [{ id: '_top' }, ...sections].findIndex(
-      (section) => section.id === visibleSections[0],
-    ),
+      (section) => section.id === visibleSections[0]
+    )
   )
   let itemHeight = remToPx(2)
   let height = isPresent
@@ -158,7 +158,7 @@ function NavigationGroup({
   let isInsideMobileNavigation = useIsInsideMobileNavigation()
   let [pathname, sections] = useInitialValue(
     [usePathname(), useSectionStore((s) => s.sections)],
-    isInsideMobileNavigation,
+    isInsideMobileNavigation
   )
 
   let isActiveGroup =
diff --git a/apps/formbricks-com/src/app/docs/_components/Resources.tsx b/apps/formbricks-com/src/app/docs/_components/Resources.tsx
index c3d661d349..82e2a0170a 100644
--- a/apps/formbricks-com/src/app/docs/_components/Resources.tsx
+++ b/apps/formbricks-com/src/app/docs/_components/Resources.tsx
@@ -8,12 +8,12 @@ import {
   useMotionValue,
 } from 'framer-motion'
 
-import { GridPattern } from '@/components/GridPattern'
-import { Heading } from '@/components/Heading'
-import { ChatBubbleIcon } from '@/components/icons/ChatBubbleIcon'
-import { EnvelopeIcon } from '@/components/icons/EnvelopeIcon'
-import { UserIcon } from '@/components/icons/UserIcon'
-import { UsersIcon } from '@/components/icons/UsersIcon'
+import { GridPattern } from '@/app/docs/_components/GridPattern'
+import { Heading } from '@/app/docs/_components/Heading'
+import { ChatBubbleIcon } from '@/app/docs/_components/icons/ChatBubbleIcon'
+import { EnvelopeIcon } from '@/app/docs/_components/icons/EnvelopeIcon'
+import { UserIcon } from '@/app/docs/_components/icons/UserIcon'
+import { UsersIcon } from '@/app/docs/_components/icons/UsersIcon'
 
 interface Resource {
   href: string
diff --git a/apps/formbricks-com/src/app/docs/_components/Search.tsx b/apps/formbricks-com/src/app/docs/_components/Search.tsx
index 6472ba59d3..d8201f7831 100644
--- a/apps/formbricks-com/src/app/docs/_components/Search.tsx
+++ b/apps/formbricks-com/src/app/docs/_components/Search.tsx
@@ -21,7 +21,7 @@ import {
 import { Dialog, Transition } from '@headlessui/react'
 import clsx from 'clsx'
 
-import { navigation } from '@/components/Navigation'
+import { navigation } from '@/app/docs/_components/Navigation'
 import { type Result } from '@/mdx/search.mjs'
 
 type EmptyObject = Record<string, never>
@@ -90,7 +90,7 @@ function useAutocomplete({ close }: { close: () => void }) {
           ]
         })
       },
-    }),
+    })
   )
 
   return { autocomplete, autocompleteState }
@@ -176,17 +176,17 @@ function SearchResult({
   let id = useId()
 
   let sectionTitle = navigation.find((section) =>
-    section.links.find((link) => link.href === result.url.split('#')[0]),
+    section.links.find((link) => link.href === result.url.split('#')[0])
   )?.title
   let hierarchy = [sectionTitle, result.pageTitle].filter(
-    (x): x is string => typeof x === 'string',
+    (x): x is string => typeof x === 'string'
   )
 
   return (
     <li
       className={clsx(
         'group block cursor-default px-4 py-3 aria-selected:bg-zinc-50 dark:aria-selected:bg-zinc-800/50',
-        resultIndex > 0 && 'border-t border-zinc-100 dark:border-zinc-800',
+        resultIndex > 0 && 'border-t border-zinc-100 dark:border-zinc-800'
       )}
       aria-labelledby={`${id}-hierarchy ${id}-title`}
       {...autocomplete.getItemProps({
@@ -284,7 +284,7 @@ const SearchInput = forwardRef<
         ref={inputRef}
         className={clsx(
           'flex-auto appearance-none bg-transparent pl-10 text-zinc-900 outline-none placeholder:text-zinc-500 focus:w-full focus:flex-none dark:text-white sm:text-sm [&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden [&::-webkit-search-results-button]:hidden [&::-webkit-search-results-decoration]:hidden',
-          autocompleteState.status === 'stalled' ? 'pr-11' : 'pr-4',
+          autocompleteState.status === 'stalled' ? 'pr-11' : 'pr-4'
         )}
         {...inputProps}
         onKeyDown={(event) => {
@@ -447,7 +447,7 @@ function useSearchProps() {
             setOpen(open)
           }
         },
-        [setOpen],
+        [setOpen]
       ),
     },
   }
@@ -459,7 +459,7 @@ export function Search() {
 
   useEffect(() => {
     setModifierKey(
-      /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform) ? '⌘' : 'Ctrl ',
+      /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform) ? '⌘' : 'Ctrl '
     )
   }, [])
 
diff --git a/apps/formbricks-com/src/app/docs/_components/mdx.tsx b/apps/formbricks-com/src/app/docs/_components/mdx.tsx
index b8489b99f6..10b9823416 100644
--- a/apps/formbricks-com/src/app/docs/_components/mdx.tsx
+++ b/apps/formbricks-com/src/app/docs/_components/mdx.tsx
@@ -1,13 +1,17 @@
 import Link from 'next/link'
 import clsx from 'clsx'
 
-import { Feedback } from '@/components/Feedback'
-import { Heading } from '@/components/Heading'
-import { Prose } from '@/components/Prose'
+import { Feedback } from '@/app/docs/_components/Feedback'
+import { Heading } from '@/app/docs/_components/Heading'
+import { Prose } from '@/app/docs/_components/Prose'
 
 export const a = Link
-export { Button } from '@/components/Button'
-export { CodeGroup, Code as code, Pre as pre } from '@/components/Code'
+export { Button } from '@/app/docs/_components/Button'
+export {
+  CodeGroup,
+  Code as code,
+  Pre as pre,
+} from '@/app/docs/_components/Code'
 
 export function wrapper({ children }: { children: React.ReactNode }) {
   return (
@@ -21,7 +25,7 @@ export function wrapper({ children }: { children: React.ReactNode }) {
 }
 
 export const h2 = function H2(
-  props: Omit<React.ComponentPropsWithoutRef<typeof Heading>, 'level'>,
+  props: Omit<React.ComponentPropsWithoutRef<typeof Heading>, 'level'>
 ) {
   return <Heading level={2} {...props} />
 }
@@ -72,7 +76,7 @@ export function Col({
     <div
       className={clsx(
         '[&>:first-child]:mt-0 [&>:last-child]:mb-0',
-        sticky && 'xl:sticky xl:top-24',
+        sticky && 'xl:sticky xl:top-24'
       )}
     >
       {children}
diff --git a/apps/formbricks-com/src/app/docs/layout.tsx b/apps/formbricks-com/src/app/docs/layout.tsx
index ad0b5882b4..640bd09196 100644
--- a/apps/formbricks-com/src/app/docs/layout.tsx
+++ b/apps/formbricks-com/src/app/docs/layout.tsx
@@ -1,10 +1,10 @@
 import glob from 'fast-glob'
 
 import { Providers } from '@/app/providers'
-import { Layout } from '@/components/Layout'
+import { Layout } from '@/app/docs/_components/Layout'
 
 import { type Metadata } from 'next'
-import { type Section } from '@/components/SectionProvider'
+import { type Section } from '@/app/docs/_components/SectionProvider'
 
 export const metadata: Metadata = {
   title: {
diff --git a/apps/formbricks-com/src/app/docs/page.mdx b/apps/formbricks-com/src/app/docs/page.mdx
index fb5158b7ec..3850773129 100644
--- a/apps/formbricks-com/src/app/docs/page.mdx
+++ b/apps/formbricks-com/src/app/docs/page.mdx
@@ -1,6 +1,6 @@
-import { Guides } from '@/components/Guides'
-import { Resources } from '@/components/Resources'
-import { HeroPattern } from '@/components/HeroPattern'
+import { Guides } from '@/app/docs/_components/Guides'
+import { Resources } from '@/app/docs/_components/Resources'
+import { HeroPattern } from '@/app/docs/_components/HeroPattern'
 
 export const metadata = {
   title: 'API Documentation',
diff --git a/apps/formbricks-com/src/app/docs/sdks/page.mdx b/apps/formbricks-com/src/app/docs/sdks/page.mdx
index ec7acd1a7f..df01636524 100644
--- a/apps/formbricks-com/src/app/docs/sdks/page.mdx
+++ b/apps/formbricks-com/src/app/docs/sdks/page.mdx
@@ -1,4 +1,4 @@
-import { Libraries } from '@/components/Libraries'
+import { Libraries } from '@/app/docs/_components/Libraries'
 
 export const metadata = {
   title: 'Protocol SDKs',
diff --git a/apps/formbricks-com/src/app/not-found.tsx b/apps/formbricks-com/src/app/not-found.tsx
index ad652f957d..50de0327ac 100644
--- a/apps/formbricks-com/src/app/not-found.tsx
+++ b/apps/formbricks-com/src/app/not-found.tsx
@@ -1,5 +1,5 @@
-import { Button } from '@/components/Button'
-import { HeroPattern } from '@/components/HeroPattern'
+import { Button } from '@/app/docs/_components/Button'
+import { HeroPattern } from '@/app/docs/_components/HeroPattern'
 
 export default function NotFound() {
   return (
diff --git a/apps/formbricks-com/src/components/Code.tsx b/apps/formbricks-com/src/components/Code.tsx
index 59d55f464f..be25238926 100644
--- a/apps/formbricks-com/src/components/Code.tsx
+++ b/apps/formbricks-com/src/components/Code.tsx
@@ -13,7 +13,7 @@ import { Tab } from '@headlessui/react'
 import clsx from 'clsx'
 import { create } from 'zustand'
 
-import { Tag } from '@/components/Tag'
+import { Tag } from '@/app/docs/_components/Tag'
 
 const languageNames: Record<string, string> = {
   js: 'JavaScript',
@@ -78,7 +78,7 @@ function CopyButton({ code }: { code: string }) {
         'group/button absolute right-4 top-3.5 overflow-hidden rounded-full py-1 pl-2 pr-3 text-2xs font-medium opacity-0 backdrop-blur transition focus:opacity-100 group-hover:opacity-100',
         copied
           ? 'bg-emerald-400/10 ring-1 ring-inset ring-emerald-400/20'
-          : 'bg-white/5 hover:bg-white/7.5 dark:bg-white/2.5 dark:hover:bg-white/5',
+          : 'bg-white/5 hover:bg-white/7.5 dark:bg-white/2.5 dark:hover:bg-white/5'
       )}
       onClick={() => {
         window.navigator.clipboard.writeText(code).then(() => {
@@ -90,7 +90,7 @@ function CopyButton({ code }: { code: string }) {
         aria-hidden={copied}
         className={clsx(
           'pointer-events-none flex items-center gap-0.5 text-zinc-400 transition duration-300',
-          copied && '-translate-y-1.5 opacity-0',
+          copied && '-translate-y-1.5 opacity-0'
         )}
       >
         <ClipboardIcon className="h-5 w-5 fill-zinc-500/20 stroke-zinc-500 transition-colors group-hover/button:stroke-zinc-400" />
@@ -100,7 +100,7 @@ function CopyButton({ code }: { code: string }) {
         aria-hidden={!copied}
         className={clsx(
           'pointer-events-none absolute inset-0 flex items-center justify-center text-emerald-400 transition duration-300',
-          !copied && 'translate-y-1.5 opacity-0',
+          !copied && 'translate-y-1.5 opacity-0'
         )}
       >
         Copied!
@@ -152,7 +152,7 @@ function CodePanel({
 
   if (!code) {
     throw new Error(
-      '`CodePanel` requires a `code` prop, or a child with a `code` prop.',
+      '`CodePanel` requires a `code` prop, or a child with a `code` prop.'
     )
   }
 
@@ -197,7 +197,7 @@ function CodeGroupHeader({
                 'border-b py-3 transition ui-not-focus-visible:outline-none',
                 childIndex === selectedIndex
                   ? 'border-emerald-500 text-emerald-400'
-                  : 'border-transparent text-zinc-400 hover:text-zinc-300',
+                  : 'border-transparent text-zinc-400 hover:text-zinc-300'
               )}
             >
               {getPanelTitle(isValidElement(child) ? child.props : {})}
@@ -271,7 +271,7 @@ const usePreferredLanguageStore = create<{
     set((state) => ({
       preferredLanguages: [
         ...state.preferredLanguages.filter(
-          (preferredLanguage) => preferredLanguage !== language,
+          (preferredLanguage) => preferredLanguage !== language
         ),
         language,
       ],
@@ -282,7 +282,7 @@ function useTabGroupProps(availableLanguages: Array<string>) {
   let { preferredLanguages, addPreferredLanguage } = usePreferredLanguageStore()
   let [selectedIndex, setSelectedIndex] = useState(0)
   let activeLanguage = [...availableLanguages].sort(
-    (a, z) => preferredLanguages.indexOf(z) - preferredLanguages.indexOf(a),
+    (a, z) => preferredLanguages.indexOf(z) - preferredLanguages.indexOf(a)
   )[0]
   let languageIndex = availableLanguages.indexOf(activeLanguage)
   let newSelectedIndex = languageIndex === -1 ? selectedIndex : languageIndex
@@ -298,7 +298,7 @@ function useTabGroupProps(availableLanguages: Array<string>) {
     selectedIndex,
     onChange: (newSelectedIndex: number) => {
       preventLayoutShift(() =>
-        addPreferredLanguage(availableLanguages[newSelectedIndex]),
+        addPreferredLanguage(availableLanguages[newSelectedIndex])
       )
     },
   }
@@ -313,7 +313,7 @@ export function CodeGroup({
 }: React.ComponentPropsWithoutRef<typeof CodeGroupPanels> & { title: string }) {
   let languages =
     Children.map(children, (child) =>
-      getPanelTitle(isValidElement(child) ? child.props : {}),
+      getPanelTitle(isValidElement(child) ? child.props : {})
     ) ?? []
   let tabGroupProps = useTabGroupProps(languages)
   let hasTabs = Children.count(children) > 1
@@ -353,7 +353,7 @@ export function Code({
   if (isGrouped) {
     if (typeof children !== 'string') {
       throw new Error(
-        '`Code` children must be a string when nested inside a `CodeGroup`.',
+        '`Code` children must be a string when nested inside a `CodeGroup`.'
       )
     }
     return <code {...props} dangerouslySetInnerHTML={{ __html: children }} />
diff --git a/apps/formbricks-com/src/components/Footer.tsx b/apps/formbricks-com/src/components/Footer.tsx
index e6ae5971e4..34f43c4d61 100644
--- a/apps/formbricks-com/src/components/Footer.tsx
+++ b/apps/formbricks-com/src/components/Footer.tsx
@@ -3,8 +3,8 @@
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 
-import { Button } from '@/components/Button'
-import { navigation } from '@/components/Navigation'
+import { Button } from '@/app/docs/_components/Button'
+import { navigation } from '@/app/docs/_components/Navigation'
 
 function PageLink({
   label,
diff --git a/apps/formbricks-com/src/components/Guides.tsx b/apps/formbricks-com/src/components/Guides.tsx
index 3950039037..1cfc442dfe 100644
--- a/apps/formbricks-com/src/components/Guides.tsx
+++ b/apps/formbricks-com/src/components/Guides.tsx
@@ -1,5 +1,5 @@
-import { Button } from '@/components/Button'
-import { Heading } from '@/components/Heading'
+import { Button } from '@/app/docs/_components/Button'
+import { Heading } from '@/app/docs/_components/Heading'
 
 const guides = [
   {
diff --git a/apps/formbricks-com/src/components/Header.tsx b/apps/formbricks-com/src/components/Header.tsx
index 72bdbdd691..fb9d9d0310 100644
--- a/apps/formbricks-com/src/components/Header.tsx
+++ b/apps/formbricks-com/src/components/Header.tsx
@@ -3,15 +3,15 @@ import Link from 'next/link'
 import clsx from 'clsx'
 import { motion, useScroll, useTransform } from 'framer-motion'
 
-import { Button } from '@/components/Button'
-import { Logo } from '@/components/Logo'
+import { Button } from '@/app/docs/_components/Button'
+import { Logo } from '@/app/docs/_components/Logo'
 import {
   MobileNavigation,
   useIsInsideMobileNavigation,
-} from '@/components/MobileNavigation'
-import { useMobileNavigationStore } from '@/components/MobileNavigation'
-import { MobileSearch, Search } from '@/components/Search'
-import { ThemeToggle } from '@/components/ThemeToggle'
+} from '@/app/docs/_components/MobileNavigation'
+import { useMobileNavigationStore } from '@/app/docs/_components/MobileNavigation'
+import { MobileSearch, Search } from '@/app/docs/_components/Search'
+import { ThemeToggle } from '@/app/docs/_components/ThemeToggle'
 
 function TopLevelNavItem({
   href,
@@ -53,7 +53,7 @@ export const Header = forwardRef<
           'backdrop-blur-sm dark:backdrop-blur lg:left-72 xl:left-80',
         isInsideMobileNavigation
           ? 'bg-white dark:bg-zinc-900'
-          : 'bg-white/[var(--bg-opacity-light)] dark:bg-zinc-900/[var(--bg-opacity-dark)]',
+          : 'bg-white/[var(--bg-opacity-light)] dark:bg-zinc-900/[var(--bg-opacity-dark)]'
       )}
       style={
         {
@@ -66,7 +66,7 @@ export const Header = forwardRef<
         className={clsx(
           'absolute inset-x-0 top-full h-px transition',
           (isInsideMobileNavigation || !mobileNavIsOpen) &&
-            'bg-zinc-900/7.5 dark:bg-white/7.5',
+            'bg-zinc-900/7.5 dark:bg-white/7.5'
         )}
       />
       <Search />
diff --git a/apps/formbricks-com/src/components/Heading.tsx b/apps/formbricks-com/src/components/Heading.tsx
index 8e2d471a5b..a38889f1ac 100644
--- a/apps/formbricks-com/src/components/Heading.tsx
+++ b/apps/formbricks-com/src/components/Heading.tsx
@@ -4,8 +4,8 @@ import { useEffect, useRef } from 'react'
 import Link from 'next/link'
 import { useInView } from 'framer-motion'
 
-import { useSectionStore } from '@/components/SectionProvider'
-import { Tag } from '@/components/Tag'
+import { useSectionStore } from '@/app/docs/_components/SectionProvider'
+import { Tag } from '@/app/docs/_components/Tag'
 import { remToPx } from '@/lib/remToPx'
 
 function AnchorIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
diff --git a/apps/formbricks-com/src/components/HeroPattern.tsx b/apps/formbricks-com/src/components/HeroPattern.tsx
index 0b4ca3f277..a77098fc8a 100644
--- a/apps/formbricks-com/src/components/HeroPattern.tsx
+++ b/apps/formbricks-com/src/components/HeroPattern.tsx
@@ -1,4 +1,4 @@
-import { GridPattern } from '@/components/GridPattern'
+import { GridPattern } from '@/app/docs/_components/GridPattern'
 
 export function HeroPattern() {
   return (
diff --git a/apps/formbricks-com/src/components/Layout.tsx b/apps/formbricks-com/src/components/Layout.tsx
index 4b32edf836..e6ce78846b 100644
--- a/apps/formbricks-com/src/components/Layout.tsx
+++ b/apps/formbricks-com/src/components/Layout.tsx
@@ -4,11 +4,14 @@ import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 import { motion } from 'framer-motion'
 
-import { Footer } from '@/components/Footer'
-import { Header } from '@/components/Header'
-import { Logo } from '@/components/Logo'
-import { Navigation } from '@/components/Navigation'
-import { type Section, SectionProvider } from '@/components/SectionProvider'
+import { Footer } from '@/app/docs/_components/Footer'
+import { Header } from '@/app/docs/_components/Header'
+import { Logo } from '@/app/docs/_components/Logo'
+import { Navigation } from '@/app/docs/_components/Navigation'
+import {
+  type Section,
+  SectionProvider,
+} from '@/app/docs/_components/SectionProvider'
 
 export function Layout({
   children,
diff --git a/apps/formbricks-com/src/components/Libraries.tsx b/apps/formbricks-com/src/components/Libraries.tsx
index c3b452c662..80cad2542f 100644
--- a/apps/formbricks-com/src/components/Libraries.tsx
+++ b/apps/formbricks-com/src/components/Libraries.tsx
@@ -1,7 +1,7 @@
 import Image from 'next/image'
 
-import { Button } from '@/components/Button'
-import { Heading } from '@/components/Heading'
+import { Button } from '@/app/docs/_components/Button'
+import { Heading } from '@/app/docs/_components/Heading'
 import logoGo from '@/images/logos/go.svg'
 import logoNode from '@/images/logos/node.svg'
 import logoPhp from '@/images/logos/php.svg'
diff --git a/apps/formbricks-com/src/components/MobileNavigation.tsx b/apps/formbricks-com/src/components/MobileNavigation.tsx
index e021f52439..5e8da9f749 100644
--- a/apps/formbricks-com/src/components/MobileNavigation.tsx
+++ b/apps/formbricks-com/src/components/MobileNavigation.tsx
@@ -13,8 +13,8 @@ import { Dialog, Transition } from '@headlessui/react'
 import { motion } from 'framer-motion'
 import { create } from 'zustand'
 
-import { Header } from '@/components/Header'
-import { Navigation } from '@/components/Navigation'
+import { Header } from '@/app/docs/_components/Header'
+import { Navigation } from '@/app/docs/_components/Navigation'
 
 function MenuIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
   return (
diff --git a/apps/formbricks-com/src/components/Navigation.tsx b/apps/formbricks-com/src/components/Navigation.tsx
index f95188385b..942ab05b13 100644
--- a/apps/formbricks-com/src/components/Navigation.tsx
+++ b/apps/formbricks-com/src/components/Navigation.tsx
@@ -6,10 +6,10 @@ import { usePathname } from 'next/navigation'
 import clsx from 'clsx'
 import { AnimatePresence, motion, useIsPresent } from 'framer-motion'
 
-import { Button } from '@/components/Button'
-import { useIsInsideMobileNavigation } from '@/components/MobileNavigation'
-import { useSectionStore } from '@/components/SectionProvider'
-import { Tag } from '@/components/Tag'
+import { Button } from '@/app/docs/_components/Button'
+import { useIsInsideMobileNavigation } from '@/app/docs/_components/MobileNavigation'
+import { useSectionStore } from '@/app/docs/_components/SectionProvider'
+import { Tag } from '@/app/docs/_components/Tag'
 import { remToPx } from '@/lib/remToPx'
 
 interface NavGroup {
@@ -66,7 +66,7 @@ function NavLink({
         isAnchorLink ? 'pl-7' : 'pl-4',
         active
           ? 'text-zinc-900 dark:text-white'
-          : 'text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white',
+          : 'text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white'
       )}
     >
       <span className="truncate">{children}</span>
@@ -91,15 +91,15 @@ function VisibleSectionHighlight({
       useSectionStore((s) => s.sections),
       useSectionStore((s) => s.visibleSections),
     ],
-    useIsInsideMobileNavigation(),
+    useIsInsideMobileNavigation()
   )
 
   let isPresent = useIsPresent()
   let firstVisibleSectionIndex = Math.max(
     0,
     [{ id: '_top' }, ...sections].findIndex(
-      (section) => section.id === visibleSections[0],
-    ),
+      (section) => section.id === visibleSections[0]
+    )
   )
   let itemHeight = remToPx(2)
   let height = isPresent
@@ -158,7 +158,7 @@ function NavigationGroup({
   let isInsideMobileNavigation = useIsInsideMobileNavigation()
   let [pathname, sections] = useInitialValue(
     [usePathname(), useSectionStore((s) => s.sections)],
-    isInsideMobileNavigation,
+    isInsideMobileNavigation
   )
 
   let isActiveGroup =
diff --git a/apps/formbricks-com/src/components/Resources.tsx b/apps/formbricks-com/src/components/Resources.tsx
index c3d661d349..82e2a0170a 100644
--- a/apps/formbricks-com/src/components/Resources.tsx
+++ b/apps/formbricks-com/src/components/Resources.tsx
@@ -8,12 +8,12 @@ import {
   useMotionValue,
 } from 'framer-motion'
 
-import { GridPattern } from '@/components/GridPattern'
-import { Heading } from '@/components/Heading'
-import { ChatBubbleIcon } from '@/components/icons/ChatBubbleIcon'
-import { EnvelopeIcon } from '@/components/icons/EnvelopeIcon'
-import { UserIcon } from '@/components/icons/UserIcon'
-import { UsersIcon } from '@/components/icons/UsersIcon'
+import { GridPattern } from '@/app/docs/_components/GridPattern'
+import { Heading } from '@/app/docs/_components/Heading'
+import { ChatBubbleIcon } from '@/app/docs/_components/icons/ChatBubbleIcon'
+import { EnvelopeIcon } from '@/app/docs/_components/icons/EnvelopeIcon'
+import { UserIcon } from '@/app/docs/_components/icons/UserIcon'
+import { UsersIcon } from '@/app/docs/_components/icons/UsersIcon'
 
 interface Resource {
   href: string
diff --git a/apps/formbricks-com/src/components/Search.tsx b/apps/formbricks-com/src/components/Search.tsx
index 6472ba59d3..d8201f7831 100644
--- a/apps/formbricks-com/src/components/Search.tsx
+++ b/apps/formbricks-com/src/components/Search.tsx
@@ -21,7 +21,7 @@ import {
 import { Dialog, Transition } from '@headlessui/react'
 import clsx from 'clsx'
 
-import { navigation } from '@/components/Navigation'
+import { navigation } from '@/app/docs/_components/Navigation'
 import { type Result } from '@/mdx/search.mjs'
 
 type EmptyObject = Record<string, never>
@@ -90,7 +90,7 @@ function useAutocomplete({ close }: { close: () => void }) {
           ]
         })
       },
-    }),
+    })
   )
 
   return { autocomplete, autocompleteState }
@@ -176,17 +176,17 @@ function SearchResult({
   let id = useId()
 
   let sectionTitle = navigation.find((section) =>
-    section.links.find((link) => link.href === result.url.split('#')[0]),
+    section.links.find((link) => link.href === result.url.split('#')[0])
   )?.title
   let hierarchy = [sectionTitle, result.pageTitle].filter(
-    (x): x is string => typeof x === 'string',
+    (x): x is string => typeof x === 'string'
   )
 
   return (
     <li
       className={clsx(
         'group block cursor-default px-4 py-3 aria-selected:bg-zinc-50 dark:aria-selected:bg-zinc-800/50',
-        resultIndex > 0 && 'border-t border-zinc-100 dark:border-zinc-800',
+        resultIndex > 0 && 'border-t border-zinc-100 dark:border-zinc-800'
       )}
       aria-labelledby={`${id}-hierarchy ${id}-title`}
       {...autocomplete.getItemProps({
@@ -284,7 +284,7 @@ const SearchInput = forwardRef<
         ref={inputRef}
         className={clsx(
           'flex-auto appearance-none bg-transparent pl-10 text-zinc-900 outline-none placeholder:text-zinc-500 focus:w-full focus:flex-none dark:text-white sm:text-sm [&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden [&::-webkit-search-results-button]:hidden [&::-webkit-search-results-decoration]:hidden',
-          autocompleteState.status === 'stalled' ? 'pr-11' : 'pr-4',
+          autocompleteState.status === 'stalled' ? 'pr-11' : 'pr-4'
         )}
         {...inputProps}
         onKeyDown={(event) => {
@@ -447,7 +447,7 @@ function useSearchProps() {
             setOpen(open)
           }
         },
-        [setOpen],
+        [setOpen]
       ),
     },
   }
@@ -459,7 +459,7 @@ export function Search() {
 
   useEffect(() => {
     setModifierKey(
-      /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform) ? '⌘' : 'Ctrl ',
+      /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform) ? '⌘' : 'Ctrl '
     )
   }, [])
 
diff --git a/apps/formbricks-com/src/components/mdx.tsx b/apps/formbricks-com/src/components/mdx.tsx
index b8489b99f6..10b9823416 100644
--- a/apps/formbricks-com/src/components/mdx.tsx
+++ b/apps/formbricks-com/src/components/mdx.tsx
@@ -1,13 +1,17 @@
 import Link from 'next/link'
 import clsx from 'clsx'
 
-import { Feedback } from '@/components/Feedback'
-import { Heading } from '@/components/Heading'
-import { Prose } from '@/components/Prose'
+import { Feedback } from '@/app/docs/_components/Feedback'
+import { Heading } from '@/app/docs/_components/Heading'
+import { Prose } from '@/app/docs/_components/Prose'
 
 export const a = Link
-export { Button } from '@/components/Button'
-export { CodeGroup, Code as code, Pre as pre } from '@/components/Code'
+export { Button } from '@/app/docs/_components/Button'
+export {
+  CodeGroup,
+  Code as code,
+  Pre as pre,
+} from '@/app/docs/_components/Code'
 
 export function wrapper({ children }: { children: React.ReactNode }) {
   return (
@@ -21,7 +25,7 @@ export function wrapper({ children }: { children: React.ReactNode }) {
 }
 
 export const h2 = function H2(
-  props: Omit<React.ComponentPropsWithoutRef<typeof Heading>, 'level'>,
+  props: Omit<React.ComponentPropsWithoutRef<typeof Heading>, 'level'>
 ) {
   return <Heading level={2} {...props} />
 }
@@ -72,7 +76,7 @@ export function Col({
     <div
       className={clsx(
         '[&>:first-child]:mt-0 [&>:last-child]:mb-0',
-        sticky && 'xl:sticky xl:top-24',
+        sticky && 'xl:sticky xl:top-24'
       )}
     >
       {children}