From ae3780880c6d8190d819e90c98aabc4d87ec64ac Mon Sep 17 00:00:00 2001
From: Matthias Nannt <mail@matthiasnannt.com>
Date: Thu, 8 Dec 2022 17:19:54 +0100
Subject: [PATCH] add demo app, update cors on hq

---
 .gitignore                             |   1 -
 apps/demo/.eslintrc.js                 |   4 +
 apps/demo/.gitignore                   |  34 ++
 apps/demo/CHANGELOG.md                 |   8 +
 apps/demo/README.md                    |  30 ++
 apps/demo/components/FeedbackModal.tsx |  68 +++
 apps/demo/next-env.d.ts                |   5 +
 apps/demo/next.config.js               |   6 +
 apps/demo/package.json                 |  33 ++
 apps/demo/pages/_app.tsx               |   9 +
 apps/demo/pages/api/submissions.ts     |  24 +
 apps/demo/pages/app.tsx                | 580 +++++++++++++++++++++++++
 apps/demo/pages/index.tsx              | 383 ++++++++++++++++
 apps/demo/postcss.config.js            |   6 +
 apps/demo/styles/globals.css           |   3 +
 apps/demo/tailwind.config.js           |  20 +
 apps/demo/tsconfig.json                |   5 +
 apps/hq/next.config.js                 |  18 +
 packages/react/src/helpers/sendToHq.ts |   2 +-
 pnpm-lock.yaml                         | 235 ++++++++--
 20 files changed, 1439 insertions(+), 35 deletions(-)
 create mode 100644 apps/demo/.eslintrc.js
 create mode 100644 apps/demo/.gitignore
 create mode 100644 apps/demo/CHANGELOG.md
 create mode 100644 apps/demo/README.md
 create mode 100644 apps/demo/components/FeedbackModal.tsx
 create mode 100644 apps/demo/next-env.d.ts
 create mode 100644 apps/demo/next.config.js
 create mode 100644 apps/demo/package.json
 create mode 100644 apps/demo/pages/_app.tsx
 create mode 100644 apps/demo/pages/api/submissions.ts
 create mode 100644 apps/demo/pages/app.tsx
 create mode 100644 apps/demo/pages/index.tsx
 create mode 100644 apps/demo/postcss.config.js
 create mode 100644 apps/demo/styles/globals.css
 create mode 100644 apps/demo/tailwind.config.js
 create mode 100644 apps/demo/tsconfig.json

diff --git a/.gitignore b/.gitignore
index ba7006bec5..d58af5885d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -39,4 +39,3 @@ yarn-error.log*
 
 # nixos stuff
 .direnv
-apps/demo
diff --git a/apps/demo/.eslintrc.js b/apps/demo/.eslintrc.js
new file mode 100644
index 0000000000..bcf4aad3a3
--- /dev/null
+++ b/apps/demo/.eslintrc.js
@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: ["formbricks"],
+};
diff --git a/apps/demo/.gitignore b/apps/demo/.gitignore
new file mode 100644
index 0000000000..1437c53f70
--- /dev/null
+++ b/apps/demo/.gitignore
@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
diff --git a/apps/demo/CHANGELOG.md b/apps/demo/CHANGELOG.md
new file mode 100644
index 0000000000..927e207078
--- /dev/null
+++ b/apps/demo/CHANGELOG.md
@@ -0,0 +1,8 @@
+# @formbricks/examples
+
+## 1.0.1
+
+### Patch Changes
+
+- Updated dependencies [0e946c7]
+  - @formbricks/react@0.0.2
diff --git a/apps/demo/README.md b/apps/demo/README.md
new file mode 100644
index 0000000000..6d80fdc38b
--- /dev/null
+++ b/apps/demo/README.md
@@ -0,0 +1,30 @@
+## Getting Started
+
+First, run the development server:
+
+```bash
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn/foundations/about-nextjs) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_source=github.com&utm_medium=referral&utm_campaign=turborepo-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
diff --git a/apps/demo/components/FeedbackModal.tsx b/apps/demo/components/FeedbackModal.tsx
new file mode 100644
index 0000000000..972e19adb4
--- /dev/null
+++ b/apps/demo/components/FeedbackModal.tsx
@@ -0,0 +1,68 @@
+import { Form, Nps, sendToHq, Submit, Textarea } from "@formbricks/react";
+import { Transition } from "@headlessui/react";
+import { XMarkIcon } from "@heroicons/react/20/solid";
+import { Fragment } from "react";
+
+export default function FeedbackModal({ show, setShow }) {
+  return (
+    <>
+      {/* Global notification live region, render this permanently at the end of the document */}
+      <div
+        aria-live="assertive"
+        className="pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:items-end sm:p-6">
+        <div className="flex w-full flex-col items-center space-y-4 sm:items-end">
+          {/* Notification panel, dynamically insert this into the live region when it needs to be displayed */}
+          <Transition
+            show={show}
+            as={Fragment}
+            enter="transform ease-out duration-300 transition"
+            enterFrom="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
+            enterTo="translate-y-0 opacity-100 sm:translate-x-0"
+            leave="transition ease-in duration-100"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0">
+            <div className="pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5">
+              <div className="p-4">
+                <div className="flex items-start">
+                  <div className="ml-3 w-0 flex-1 pt-0.5">
+                    <p className="text-sm font-medium text-gray-900">We would like to hear your feedback</p>
+                    <div className="mt-3 flex space-x-7">
+                      <Form
+                        formId="clbf814y50006yzvk3shskf17"
+                        hqUrl="http://localhost:3000"
+                        customerId="johannes@formbricks.com"
+                        onSubmit={sendToHq}>
+                        <Nps
+                          name="nps"
+                          label="How likely are you to recommend Formbricks to a friend or colleague?"
+                        />
+                        <Textarea name="feedback" label="Your feedback" cols={30} />
+                        <Submit label="Submit" />
+                      </Form>
+                    </div>
+                    <hr className="my-2" />
+                    <p className="mt-1 text-sm text-gray-500">
+                      If you have a specific issue, please contact support directly at email us or visit our
+                      docs
+                    </p>
+                  </div>
+                  <div className="ml-4 flex flex-shrink-0">
+                    <button
+                      type="button"
+                      className="inline-flex rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+                      onClick={() => {
+                        setShow(false);
+                      }}>
+                      <span className="sr-only">Close</span>
+                      <XMarkIcon className="h-5 w-5" aria-hidden="true" />
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </Transition>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/apps/demo/next-env.d.ts b/apps/demo/next-env.d.ts
new file mode 100644
index 0000000000..4f11a03dc6
--- /dev/null
+++ b/apps/demo/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/apps/demo/next.config.js b/apps/demo/next.config.js
new file mode 100644
index 0000000000..5e578c4f46
--- /dev/null
+++ b/apps/demo/next.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  reactStrictMode: true,
+  experimental: {
+    transpilePackages: ["ui"],
+  },
+};
diff --git a/apps/demo/package.json b/apps/demo/package.json
new file mode 100644
index 0000000000..dd75a88ef1
--- /dev/null
+++ b/apps/demo/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "@formbricks/demo",
+  "version": "1.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "next dev -p 3002",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@formbricks/charts": "workspace:*",
+    "@formbricks/react": "workspace:*",
+    "@formbricks/ui": "workspace:*",
+    "@heroicons/react": "^2.0.13",
+    "@tailwindcss/forms": "^0.5.3",
+    "next": "latest",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@formbricks/tailwind-config": "workspace:*",
+    "@formbricks/tsconfig": "workspace:*",
+    "@types/node": "^18.11.10",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.9",
+    "autoprefixer": "^10.4.13",
+    "eslint-config-formbricks": "workspace:*",
+    "postcss": "^8.4.19",
+    "tailwindcss": "^3.2.4",
+    "typescript": "^4.9.3"
+  }
+}
diff --git a/apps/demo/pages/_app.tsx b/apps/demo/pages/_app.tsx
new file mode 100644
index 0000000000..dcc430c032
--- /dev/null
+++ b/apps/demo/pages/_app.tsx
@@ -0,0 +1,9 @@
+import "../styles/globals.css";
+
+import "../../../packages/react/dist/styles.css";
+
+import type { AppProps } from "next/app";
+
+export default function MyApp({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />;
+}
diff --git a/apps/demo/pages/api/submissions.ts b/apps/demo/pages/api/submissions.ts
new file mode 100644
index 0000000000..12d8be15b6
--- /dev/null
+++ b/apps/demo/pages/api/submissions.ts
@@ -0,0 +1,24 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+
+export default async function handle(req: NextApiRequest, res: NextApiResponse) {
+  // POST/capture/forms/[formId]/submissions
+  // Create a new form submission
+  // Required fields in body: -
+  // Optional fields in body: customerId, data
+  if (req.method === "GET") {
+    const submissionRequest = await fetch(
+      `http://localhost:3000/api/teams/clb27pm870003yz0j496gege0/forms/clb4yr1m90000yzacrgaxfq53/submissions`,
+      {
+        method: "GET",
+        headers: { "Content-Type": "application/json", "X-API-Key": "82967fcd502abc9ff213cf9daca9bc43" },
+      }
+    );
+    const submissions = await submissionRequest.json();
+    res.json(submissions);
+  }
+
+  // Unknown HTTP Method
+  else {
+    throw new Error(`The HTTP ${req.method} method is not supported by this route.`);
+  }
+}
diff --git a/apps/demo/pages/app.tsx b/apps/demo/pages/app.tsx
new file mode 100644
index 0000000000..b092de0ba7
--- /dev/null
+++ b/apps/demo/pages/app.tsx
@@ -0,0 +1,580 @@
+import { Fragment, useState } from "react";
+import { Dialog, Menu, Transition } from "@headlessui/react";
+import {
+  Bars3CenterLeftIcon,
+  BellIcon,
+  ClockIcon,
+  CogIcon,
+  CreditCardIcon,
+  DocumentChartBarIcon,
+  HomeIcon,
+  QuestionMarkCircleIcon,
+  ScaleIcon,
+  ShieldCheckIcon,
+  UserGroupIcon,
+  XMarkIcon,
+} from "@heroicons/react/24/outline";
+import {
+  BanknotesIcon,
+  BuildingOfficeIcon,
+  CheckCircleIcon,
+  ChevronDownIcon,
+  ChevronRightIcon,
+  MagnifyingGlassIcon,
+} from "@heroicons/react/20/solid";
+import FeedbackModal from "../components/FeedbackModal";
+
+const navigation = [
+  { name: "Home", href: "#", icon: HomeIcon, current: true },
+  { name: "History", href: "#", icon: ClockIcon, current: false },
+  { name: "Balances", href: "#", icon: ScaleIcon, current: false },
+  { name: "Cards", href: "#", icon: CreditCardIcon, current: false },
+  { name: "Recipients", href: "#", icon: UserGroupIcon, current: false },
+  { name: "Reports", href: "#", icon: DocumentChartBarIcon, current: false },
+];
+const secondaryNavigation = [
+  { name: "Settings", href: "#", icon: CogIcon },
+  { name: "Help", href: "#", icon: QuestionMarkCircleIcon },
+  { name: "Privacy", href: "#", icon: ShieldCheckIcon },
+];
+const cards = [
+  { name: "Account balance", href: "#", icon: ScaleIcon, amount: "$30,659.45" },
+  // More items...
+];
+const transactions = [
+  {
+    id: 1,
+    name: "Payment to Molly Sanders",
+    href: "#",
+    amount: "$20,000",
+    currency: "USD",
+    status: "success",
+    date: "July 11, 2020",
+    datetime: "2020-07-11",
+  },
+  // More transactions...
+];
+const statusStyles = {
+  success: "bg-green-100 text-green-800",
+  processing: "bg-yellow-100 text-yellow-800",
+  failed: "bg-gray-100 text-gray-800",
+};
+
+function classNames(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+
+export default function Example() {
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+  const [showFeedback, setShowFeedback] = useState(false);
+
+  return (
+    <>
+      <div className="min-h-full">
+        <Transition.Root show={sidebarOpen} as={Fragment}>
+          <Dialog as="div" className="relative z-40 lg:hidden" onClose={setSidebarOpen}>
+            <Transition.Child
+              as={Fragment}
+              enter="transition-opacity ease-linear duration-300"
+              enterFrom="opacity-0"
+              enterTo="opacity-100"
+              leave="transition-opacity ease-linear duration-300"
+              leaveFrom="opacity-100"
+              leaveTo="opacity-0">
+              <div className="fixed inset-0 bg-gray-600 bg-opacity-75" />
+            </Transition.Child>
+
+            <div className="fixed inset-0 z-40 flex">
+              <Transition.Child
+                as={Fragment}
+                enter="transition ease-in-out duration-300 transform"
+                enterFrom="-translate-x-full"
+                enterTo="translate-x-0"
+                leave="transition ease-in-out duration-300 transform"
+                leaveFrom="translate-x-0"
+                leaveTo="-translate-x-full">
+                <Dialog.Panel className="relative flex w-full max-w-xs flex-1 flex-col bg-cyan-700 pt-5 pb-4">
+                  <Transition.Child
+                    as={Fragment}
+                    enter="ease-in-out duration-300"
+                    enterFrom="opacity-0"
+                    enterTo="opacity-100"
+                    leave="ease-in-out duration-300"
+                    leaveFrom="opacity-100"
+                    leaveTo="opacity-0">
+                    <div className="absolute top-0 right-0 -mr-12 pt-2">
+                      <button
+                        type="button"
+                        className="ml-1 flex h-10 w-10 items-center justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
+                        onClick={() => setSidebarOpen(false)}>
+                        <span className="sr-only">Close sidebar</span>
+                        <XMarkIcon className="h-6 w-6 text-white" aria-hidden="true" />
+                      </button>
+                    </div>
+                  </Transition.Child>
+                  <div className="flex flex-shrink-0 items-center px-4">
+                    <img
+                      className="h-8 w-auto"
+                      src="https://tailwindui.com/img/logos/mark.svg?color=cyan&shade=300"
+                      alt="Easywire logo"
+                    />
+                  </div>
+                  <nav
+                    className="mt-5 h-full flex-shrink-0 divide-y divide-cyan-800 overflow-y-auto"
+                    aria-label="Sidebar">
+                    <div className="space-y-1 px-2">
+                      {navigation.map((item) => (
+                        <a
+                          key={item.name}
+                          href={item.href}
+                          className={classNames(
+                            item.current
+                              ? "bg-cyan-800 text-white"
+                              : "text-cyan-100 hover:bg-cyan-600 hover:text-white",
+                            "group flex items-center rounded-md px-2 py-2 text-base font-medium"
+                          )}
+                          aria-current={item.current ? "page" : undefined}>
+                          <item.icon
+                            className="mr-4 h-6 w-6 flex-shrink-0 text-cyan-200"
+                            aria-hidden="true"
+                          />
+                          {item.name}
+                        </a>
+                      ))}
+                    </div>
+                    <div className="mt-6 pt-6">
+                      <div className="space-y-1 px-2">
+                        {secondaryNavigation.map((item) => (
+                          <a
+                            key={item.name}
+                            href={item.href}
+                            className="group flex items-center rounded-md px-2 py-2 text-base font-medium text-cyan-100 hover:bg-cyan-600 hover:text-white">
+                            <item.icon className="mr-4 h-6 w-6 text-cyan-200" aria-hidden="true" />
+                            {item.name}
+                          </a>
+                        ))}
+                      </div>
+                    </div>
+                  </nav>
+                </Dialog.Panel>
+              </Transition.Child>
+              <div className="w-14 flex-shrink-0" aria-hidden="true">
+                {/* Dummy element to force sidebar to shrink to fit close icon */}
+              </div>
+            </div>
+          </Dialog>
+        </Transition.Root>
+
+        {/* Static sidebar for desktop */}
+        <div className="hidden lg:fixed lg:inset-y-0 lg:flex lg:w-64 lg:flex-col">
+          {/* Sidebar component, swap this element with another sidebar if you like */}
+          <div className="flex flex-grow flex-col overflow-y-auto bg-cyan-700 pt-5 pb-4">
+            <div className="flex flex-shrink-0 items-center px-4">
+              <img
+                className="h-8 w-auto"
+                src="https://tailwindui.com/img/logos/mark.svg?color=cyan&shade=300"
+                alt="Easywire logo"
+              />
+            </div>
+            <nav
+              className="mt-5 flex flex-1 flex-col divide-y divide-cyan-800 overflow-y-auto"
+              aria-label="Sidebar">
+              <div className="space-y-1 px-2">
+                {navigation.map((item) => (
+                  <a
+                    key={item.name}
+                    href={item.href}
+                    className={classNames(
+                      item.current
+                        ? "bg-cyan-800 text-white"
+                        : "text-cyan-100 hover:bg-cyan-600 hover:text-white",
+                      "group flex items-center rounded-md px-2 py-2 text-sm font-medium leading-6"
+                    )}
+                    aria-current={item.current ? "page" : undefined}>
+                    <item.icon className="mr-4 h-6 w-6 flex-shrink-0 text-cyan-200" aria-hidden="true" />
+                    {item.name}
+                  </a>
+                ))}
+              </div>
+              <div className="mt-6 pt-6">
+                <div className="space-y-1 px-2">
+                  {secondaryNavigation.map((item) => (
+                    <a
+                      key={item.name}
+                      href={item.href}
+                      className="group flex items-center rounded-md px-2 py-2 text-sm font-medium leading-6 text-cyan-100 hover:bg-cyan-600 hover:text-white">
+                      <item.icon className="mr-4 h-6 w-6 text-cyan-200" aria-hidden="true" />
+                      {item.name}
+                    </a>
+                  ))}
+                </div>
+              </div>
+            </nav>
+          </div>
+        </div>
+
+        <div className="flex flex-1 flex-col lg:pl-64">
+          <div className="flex h-16 flex-shrink-0 border-b border-gray-200 bg-white lg:border-none">
+            <button
+              type="button"
+              className="border-r border-gray-200 px-4 text-gray-400 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-cyan-500 lg:hidden"
+              onClick={() => setSidebarOpen(true)}>
+              <span className="sr-only">Open sidebar</span>
+              <Bars3CenterLeftIcon className="h-6 w-6" aria-hidden="true" />
+            </button>
+            {/* Search bar */}
+            <div className="flex flex-1 justify-between px-4 sm:px-6 lg:mx-auto lg:max-w-6xl lg:px-8">
+              <div className="flex flex-1">
+                <form className="flex w-full md:ml-0" action="#" method="GET">
+                  <label htmlFor="search-field" className="sr-only">
+                    Search
+                  </label>
+                  <div className="relative w-full text-gray-400 focus-within:text-gray-600">
+                    <div
+                      className="pointer-events-none absolute inset-y-0 left-0 flex items-center"
+                      aria-hidden="true">
+                      <MagnifyingGlassIcon className="h-5 w-5" aria-hidden="true" />
+                    </div>
+                    <input
+                      id="search-field"
+                      name="search-field"
+                      className="block h-full w-full border-transparent py-2 pl-8 pr-3 text-gray-900 placeholder-gray-500 focus:border-transparent focus:outline-none focus:ring-0 sm:text-sm"
+                      placeholder="Search transactions"
+                      type="search"
+                    />
+                  </div>
+                </form>
+              </div>
+              <div className="ml-4 flex items-center md:ml-6">
+                <button
+                  onClick={() => setShowFeedback(true)}
+                  className="mr-2 flex max-w-xs items-center rounded-full bg-white text-sm text-sm font-medium text-gray-700 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2 lg:rounded-md lg:p-2 lg:hover:bg-gray-50">
+                  Feedback
+                </button>
+                <button
+                  type="button"
+                  className="rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2">
+                  <span className="sr-only">View notifications</span>
+                  <BellIcon className="h-6 w-6" aria-hidden="true" />
+                </button>
+                {/* Profile dropdown */}
+                <Menu as="div" className="relative ml-3">
+                  <div>
+                    <Menu.Button className="flex max-w-xs items-center rounded-full bg-white text-sm focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2 lg:rounded-md lg:p-2 lg:hover:bg-gray-50">
+                      <img
+                        className="h-8 w-8 rounded-full"
+                        src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                        alt=""
+                      />
+                      <span className="ml-3 hidden text-sm font-medium text-gray-700 lg:block">
+                        <span className="sr-only">Open user menu for </span>Emilia Birch
+                      </span>
+                      <ChevronDownIcon
+                        className="ml-1 hidden h-5 w-5 flex-shrink-0 text-gray-400 lg:block"
+                        aria-hidden="true"
+                      />
+                    </Menu.Button>
+                  </div>
+                  <Transition
+                    as={Fragment}
+                    enter="transition ease-out duration-100"
+                    enterFrom="transform opacity-0 scale-95"
+                    enterTo="transform opacity-100 scale-100"
+                    leave="transition ease-in duration-75"
+                    leaveFrom="transform opacity-100 scale-100"
+                    leaveTo="transform opacity-0 scale-95">
+                    <Menu.Items className="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+                      <Menu.Item>
+                        {({ active }) => (
+                          <a
+                            href="#"
+                            className={classNames(
+                              active ? "bg-gray-100" : "",
+                              "block px-4 py-2 text-sm text-gray-700"
+                            )}>
+                            Your Profile
+                          </a>
+                        )}
+                      </Menu.Item>
+                      <Menu.Item>
+                        {({ active }) => (
+                          <a
+                            href="#"
+                            className={classNames(
+                              active ? "bg-gray-100" : "",
+                              "block px-4 py-2 text-sm text-gray-700"
+                            )}>
+                            Settings
+                          </a>
+                        )}
+                      </Menu.Item>
+                      <Menu.Item>
+                        {({ active }) => (
+                          <a
+                            href="#"
+                            className={classNames(
+                              active ? "bg-gray-100" : "",
+                              "block px-4 py-2 text-sm text-gray-700"
+                            )}>
+                            Logout
+                          </a>
+                        )}
+                      </Menu.Item>
+                    </Menu.Items>
+                  </Transition>
+                </Menu>
+              </div>
+            </div>
+          </div>
+          <main className="flex-1 pb-8">
+            {/* Page header */}
+            <div className="bg-white shadow">
+              <div className="px-4 sm:px-6 lg:mx-auto lg:max-w-6xl lg:px-8">
+                <div className="py-6 md:flex md:items-center md:justify-between lg:border-t lg:border-gray-200">
+                  <div className="min-w-0 flex-1">
+                    {/* Profile */}
+                    <div className="flex items-center">
+                      <img
+                        className="hidden h-16 w-16 rounded-full sm:block"
+                        src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.6&w=256&h=256&q=80"
+                        alt=""
+                      />
+                      <div>
+                        <div className="flex items-center">
+                          <img
+                            className="h-16 w-16 rounded-full sm:hidden"
+                            src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.6&w=256&h=256&q=80"
+                            alt=""
+                          />
+                          <h1 className="ml-3 text-2xl font-bold leading-7 text-gray-900 sm:truncate sm:leading-9">
+                            Good morning, Emilia Birch
+                          </h1>
+                        </div>
+                        <dl className="mt-6 flex flex-col sm:ml-3 sm:mt-1 sm:flex-row sm:flex-wrap">
+                          <dt className="sr-only">Company</dt>
+                          <dd className="flex items-center text-sm font-medium capitalize text-gray-500 sm:mr-6">
+                            <BuildingOfficeIcon
+                              className="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400"
+                              aria-hidden="true"
+                            />
+                            Duke street studio
+                          </dd>
+                          <dt className="sr-only">Account status</dt>
+                          <dd className="mt-3 flex items-center text-sm font-medium capitalize text-gray-500 sm:mr-6 sm:mt-0">
+                            <CheckCircleIcon
+                              className="mr-1.5 h-5 w-5 flex-shrink-0 text-green-400"
+                              aria-hidden="true"
+                            />
+                            Verified account
+                          </dd>
+                        </dl>
+                      </div>
+                    </div>
+                  </div>
+                  <div className="mt-6 flex space-x-3 md:mt-0 md:ml-4">
+                    <button
+                      type="button"
+                      className="inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2">
+                      Add money
+                    </button>
+                    <button
+                      type="button"
+                      className="inline-flex items-center rounded-md border border-transparent bg-cyan-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-cyan-700 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2">
+                      Send money
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div className="mt-8">
+              <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
+                <h2 className="text-lg font-medium leading-6 text-gray-900">Overview</h2>
+                <div className="mt-2 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
+                  {/* Card */}
+                  {cards.map((card) => (
+                    <div key={card.name} className="overflow-hidden rounded-lg bg-white shadow">
+                      <div className="p-5">
+                        <div className="flex items-center">
+                          <div className="flex-shrink-0">
+                            <card.icon className="h-6 w-6 text-gray-400" aria-hidden="true" />
+                          </div>
+                          <div className="ml-5 w-0 flex-1">
+                            <dl>
+                              <dt className="truncate text-sm font-medium text-gray-500">{card.name}</dt>
+                              <dd>
+                                <div className="text-lg font-medium text-gray-900">{card.amount}</div>
+                              </dd>
+                            </dl>
+                          </div>
+                        </div>
+                      </div>
+                      <div className="bg-gray-50 px-5 py-3">
+                        <div className="text-sm">
+                          <a href={card.href} className="font-medium text-cyan-700 hover:text-cyan-900">
+                            View all
+                          </a>
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              <h2 className="mx-auto mt-8 max-w-6xl px-4 text-lg font-medium leading-6 text-gray-900 sm:px-6 lg:px-8">
+                Recent activity
+              </h2>
+
+              {/* Activity list (smallest breakpoint only) */}
+              <div className="shadow sm:hidden">
+                <ul role="list" className="mt-2 divide-y divide-gray-200 overflow-hidden shadow sm:hidden">
+                  {transactions.map((transaction) => (
+                    <li key={transaction.id}>
+                      <a href={transaction.href} className="block bg-white px-4 py-4 hover:bg-gray-50">
+                        <span className="flex items-center space-x-4">
+                          <span className="flex flex-1 space-x-2 truncate">
+                            <BanknotesIcon
+                              className="h-5 w-5 flex-shrink-0 text-gray-400"
+                              aria-hidden="true"
+                            />
+                            <span className="flex flex-col truncate text-sm text-gray-500">
+                              <span className="truncate">{transaction.name}</span>
+                              <span>
+                                <span className="font-medium text-gray-900">{transaction.amount}</span>{" "}
+                                {transaction.currency}
+                              </span>
+                              <time dateTime={transaction.datetime}>{transaction.date}</time>
+                            </span>
+                          </span>
+                          <ChevronRightIcon
+                            className="h-5 w-5 flex-shrink-0 text-gray-400"
+                            aria-hidden="true"
+                          />
+                        </span>
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+
+                <nav
+                  className="flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3"
+                  aria-label="Pagination">
+                  <div className="flex flex-1 justify-between">
+                    <a
+                      href="#"
+                      className="relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-500">
+                      Previous
+                    </a>
+                    <a
+                      href="#"
+                      className="relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-500">
+                      Next
+                    </a>
+                  </div>
+                </nav>
+              </div>
+
+              {/* Activity table (small breakpoint and up) */}
+              <div className="hidden sm:block">
+                <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
+                  <div className="mt-2 flex flex-col">
+                    <div className="min-w-full overflow-hidden overflow-x-auto align-middle shadow sm:rounded-lg">
+                      <table className="min-w-full divide-y divide-gray-200">
+                        <thead>
+                          <tr>
+                            <th
+                              className="bg-gray-50 px-6 py-3 text-left text-sm font-semibold text-gray-900"
+                              scope="col">
+                              Transaction
+                            </th>
+                            <th
+                              className="bg-gray-50 px-6 py-3 text-right text-sm font-semibold text-gray-900"
+                              scope="col">
+                              Amount
+                            </th>
+                            <th
+                              className="hidden bg-gray-50 px-6 py-3 text-left text-sm font-semibold text-gray-900 md:block"
+                              scope="col">
+                              Status
+                            </th>
+                            <th
+                              className="bg-gray-50 px-6 py-3 text-right text-sm font-semibold text-gray-900"
+                              scope="col">
+                              Date
+                            </th>
+                          </tr>
+                        </thead>
+                        <tbody className="divide-y divide-gray-200 bg-white">
+                          {transactions.map((transaction) => (
+                            <tr key={transaction.id} className="bg-white">
+                              <td className="w-full max-w-0 whitespace-nowrap px-6 py-4 text-sm text-gray-900">
+                                <div className="flex">
+                                  <a
+                                    href={transaction.href}
+                                    className="group inline-flex space-x-2 truncate text-sm">
+                                    <BanknotesIcon
+                                      className="h-5 w-5 flex-shrink-0 text-gray-400 group-hover:text-gray-500"
+                                      aria-hidden="true"
+                                    />
+                                    <p className="truncate text-gray-500 group-hover:text-gray-900">
+                                      {transaction.name}
+                                    </p>
+                                  </a>
+                                </div>
+                              </td>
+                              <td className="whitespace-nowrap px-6 py-4 text-right text-sm text-gray-500">
+                                <span className="font-medium text-gray-900">{transaction.amount}</span>
+                                {transaction.currency}
+                              </td>
+                              <td className="hidden whitespace-nowrap px-6 py-4 text-sm text-gray-500 md:block">
+                                <span
+                                  className={classNames(
+                                    statusStyles[transaction.status],
+                                    "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium capitalize"
+                                  )}>
+                                  {transaction.status}
+                                </span>
+                              </td>
+                              <td className="whitespace-nowrap px-6 py-4 text-right text-sm text-gray-500">
+                                <time dateTime={transaction.datetime}>{transaction.date}</time>
+                              </td>
+                            </tr>
+                          ))}
+                        </tbody>
+                      </table>
+                      {/* Pagination */}
+                      <nav
+                        className="flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 sm:px-6"
+                        aria-label="Pagination">
+                        <div className="hidden sm:block">
+                          <p className="text-sm text-gray-700">
+                            Showing <span className="font-medium">1</span> to{" "}
+                            <span className="font-medium">10</span> of <span className="font-medium">20</span>{" "}
+                            results
+                          </p>
+                        </div>
+                        <div className="flex flex-1 justify-between sm:justify-end">
+                          <a
+                            href="#"
+                            className="relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">
+                            Previous
+                          </a>
+                          <a
+                            href="#"
+                            className="relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">
+                            Next
+                          </a>
+                        </div>
+                      </nav>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </main>
+        </div>
+      </div>
+      <FeedbackModal show={showFeedback} setShow={setShowFeedback} />
+    </>
+  );
+}
diff --git a/apps/demo/pages/index.tsx b/apps/demo/pages/index.tsx
new file mode 100644
index 0000000000..d7d3d368f2
--- /dev/null
+++ b/apps/demo/pages/index.tsx
@@ -0,0 +1,383 @@
+import { Bar } from "@formbricks/charts";
+import { Form, Radio, Submit, sendToHq, Textarea } from "@formbricks/react";
+import { Popover, Transition } from "@headlessui/react";
+import { Bars3Icon, MegaphoneIcon, XMarkIcon } from "@heroicons/react/24/outline";
+import { Fragment, useState } from "react";
+
+const footerNavigation = {
+  solutions: [
+    { name: "Marketing", href: "#" },
+    { name: "Analytics", href: "#" },
+    { name: "Commerce", href: "#" },
+    { name: "Insights", href: "#" },
+  ],
+  support: [
+    { name: "Pricing", href: "#" },
+    { name: "Documentation", href: "#" },
+    { name: "Guides", href: "#" },
+    { name: "API Status", href: "#" },
+  ],
+  company: [
+    { name: "About", href: "#" },
+    { name: "Blog", href: "#" },
+    { name: "Jobs", href: "#" },
+    { name: "Press", href: "#" },
+    { name: "Partners", href: "#" },
+  ],
+  legal: [
+    { name: "Claim", href: "#" },
+    { name: "Privacy", href: "#" },
+    { name: "Terms", href: "#" },
+  ],
+  social: [
+    {
+      name: "Facebook",
+      href: "#",
+      icon: (props) => (
+        <svg fill="currentColor" viewBox="0 0 24 24" {...props}>
+          <path
+            fillRule="evenodd"
+            d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"
+            clipRule="evenodd"
+          />
+        </svg>
+      ),
+    },
+    {
+      name: "Instagram",
+      href: "#",
+      icon: (props) => (
+        <svg fill="currentColor" viewBox="0 0 24 24" {...props}>
+          <path
+            fillRule="evenodd"
+            d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z"
+            clipRule="evenodd"
+          />
+        </svg>
+      ),
+    },
+    {
+      name: "Twitter",
+      href: "#",
+      icon: (props) => (
+        <svg fill="currentColor" viewBox="0 0 24 24" {...props}>
+          <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
+        </svg>
+      ),
+    },
+    {
+      name: "GitHub",
+      href: "#",
+      icon: (props) => (
+        <svg fill="currentColor" viewBox="0 0 24 24" {...props}>
+          <path
+            fillRule="evenodd"
+            d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
+            clipRule="evenodd"
+          />
+        </svg>
+      ),
+    },
+    {
+      name: "Dribbble",
+      href: "#",
+      icon: (props) => (
+        <svg fill="currentColor" viewBox="0 0 24 24" {...props}>
+          <path
+            fillRule="evenodd"
+            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z"
+            clipRule="evenodd"
+          />
+        </svg>
+      ),
+    },
+  ],
+};
+
+export default function Demo() {
+  const [submissions, setSubmissions] = useState(null);
+  const [schema, setSchema] = useState(null);
+  const [answered, setAnswered] = useState(false);
+
+  const handleSubmit = async ({ submission, schema }) => {
+    await sendToHq({ submission, schema });
+    const submissionRequest = await fetch(`/api/submissions`, {
+      method: "GET",
+      headers: { "Content-Type": "application/json", "X-API-Key": "82967fcd502abc9ff213cf9daca9bc43" },
+    });
+    const submissions = await submissionRequest.json();
+    setSchema(schema);
+    setSubmissions(submissions);
+    setAnswered(true);
+  };
+
+  return (
+    <div className="bg-white">
+      <header>
+        <Popover className="relative bg-white">
+          <div className="mx-auto flex max-w-7xl items-center justify-between px-4 py-6 sm:px-6 md:justify-start md:space-x-10 lg:px-8">
+            <div className="flex justify-start lg:w-0 lg:flex-1">
+              <a href="#">
+                <span className="sr-only">Your Company</span>
+
+                <span className="fill-indigo-700 text-3xl font-bold">+ Demo</span>
+              </a>
+            </div>
+            <div className="-my-2 -mr-2 md:hidden">
+              <Popover.Button className="inline-flex items-center justify-center rounded-md bg-white p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
+                <span className="sr-only">Open menu</span>
+                <Bars3Icon className="h-6 w-6" aria-hidden="true" />
+              </Popover.Button>
+            </div>
+          </div>
+
+          <Transition
+            as={Fragment}
+            enter="duration-200 ease-out"
+            enterFrom="opacity-0 scale-95"
+            enterTo="opacity-100 scale-100"
+            leave="duration-100 ease-in"
+            leaveFrom="opacity-100 scale-100"
+            leaveTo="opacity-0 scale-95">
+            <Popover.Panel
+              focus
+              className="absolute inset-x-0 top-0 z-30 origin-top-right transform p-2 transition md:hidden">
+              <div className="divide-y-2 divide-gray-50 rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5">
+                <div className="px-5 pt-5 pb-6">
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <img
+                        className="h-8 w-auto"
+                        src="https://tailwindui.com/img/logos/mark.svg?from-color=purple&from-shade=600&to-color=indigo&to-shade=600&toShade=600"
+                        alt="Your Company"
+                      />
+                    </div>
+                    <div className="-mr-2">
+                      <Popover.Button className="inline-flex items-center justify-center rounded-md bg-white p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
+                        <span className="sr-only">Close menu</span>
+                        <XMarkIcon className="h-6 w-6" aria-hidden="true" />
+                      </Popover.Button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </Popover.Panel>
+          </Transition>
+        </Popover>
+      </header>
+
+      <main>
+        {/* Hero section */}
+        <div className="relative">
+          <div className="absolute inset-x-0 bottom-0 h-1/2 bg-gray-100" />
+          <div className="mx-auto max-w-7xl sm:px-6 lg:px-8">
+            <div className="relative shadow-xl sm:overflow-hidden sm:rounded-2xl">
+              <div className="absolute inset-0">
+                <img
+                  className="h-full w-full object-cover"
+                  src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2830&q=80&sat=-100"
+                  alt="People working on laptops"
+                />
+                <div className="absolute inset-0 bg-gradient-to-r from-purple-800 to-indigo-700 mix-blend-multiply" />
+              </div>
+              <div className="relative px-4 py-16 sm:px-6 sm:py-24 lg:py-32 lg:px-8">
+                <h1 className="text-center text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl">
+                  <span className="block text-white">Thank you for</span>
+                  <span className="block text-indigo-200">watching our course</span>
+                </h1>
+                <p className="mx-auto mt-6 max-w-lg text-center text-xl text-indigo-200 sm:max-w-3xl">
+                  If you have any questions left, just send us an email to contact@example.com
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Alternating Feature Sections */}
+
+        <div className="relative overflow-hidden pl-12 pb-16">
+          <div aria-hidden="true" className="absolute inset-x-0 top-0 h-48 bg-gradient-to-b from-gray-100" />
+          <div className="relative">
+            <hr className="my-24 px-10" />
+            <div className="lg:mx-auto lg:max-w-7xl">
+              <div className="grid grid-cols-2 px-4 sm:px-6 lg:mx-0 lg:max-w-none lg:px-0">
+                <div>
+                  <div>
+                    <span className="flex h-12 w-12 items-center justify-center rounded-md bg-gradient-to-r from-purple-600 to-indigo-600">
+                      <MegaphoneIcon className="h-6 w-6 text-white" aria-hidden="true" />
+                    </span>
+                  </div>
+                  <div className="mt-6">
+                    <h2 className="text-3xl font-bold tracking-tight text-gray-900">The door is open</h2>
+                    <p className="mt-4 text-lg text-gray-500">
+                      Now it&lsquo;s up to you to continue! And we are here to support you.
+                      <br />
+                      <br />
+                      Give us some feedback so we can improve our service. In the spirit of transparency,
+                      we&apos;ll also show you what other users have responded.
+                    </p>
+                  </div>
+                </div>
+                {/* Feedback Form */}
+                <div className="mt-8 border-l border-gray-200 pl-10">
+                  {!answered ? (
+                    /* Formbricks Form using React Library */
+                    <Form
+                      formId="clb4yr1m90000yzacrgaxfq53"
+                      hqUrl="http://localhost:3000"
+                      onSubmit={handleSubmit}>
+                      <Radio
+                        name="evaluate"
+                        label="Evaluate the online course you just completed"
+                        legendClassName="mb-3 font-bold text-gray-800 text-xl"
+                        labelClassName="font-regular text-gray-500 text-lg"
+                        options={[
+                          "Perfect",
+                          "Very satisfactory",
+                          "Satisfactory",
+                          "Not very satisfactory",
+                          "Useless",
+                        ]}
+                      />
+                      <Textarea
+                        name="feedback"
+                        label="Would you like to send us a comment, an opinion, a correction?"
+                        help="Only you and us can see your answer."
+                        labelClassName="font-bold text-gray-800 text-xl"
+                        innerClassName="mt-3"
+                        cols={50}
+                        rows={4}
+                      />
+                      <Submit
+                        label="Answer"
+                        inputClassName="flex items-center justify-center rounded-md border border-transparent bg-gradient-to-r from-purple-600 to-indigo-600 bg-origin-border px-3 py-2 text-base font-medium text-white shadow-sm hover:from-purple-700 hover:to-indigo-700"
+                      />
+                    </Form>
+                  ) : (
+                    <>
+                      <h2 className="mx-auto mb-3 text-lg font-bold text-gray-800">
+                        Thanks a lot for your feedback
+                      </h2>
+                      <p className="mb-5 text-lg text-gray-500">
+                        Here you can see what other people answered.
+                      </p>
+                      {/* Visualize Submission using Formbricks Graphs Library */}
+                      <Bar submissions={submissions} schema={schema} fieldName="evaluate" color="#4f46e5" />
+                    </>
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* CTA Section */}
+        <div className="bg-gray-50">
+          <div className="mx-auto max-w-4xl py-16 px-4 sm:px-6 sm:py-24 lg:flex lg:max-w-7xl lg:items-center lg:justify-between lg:px-8">
+            <h2 className="text-4xl font-bold tracking-tight text-gray-900 sm:text-4xl">
+              <span className="block">Ready to get started?</span>
+              <span className="-mb-1 block bg-gradient-to-r from-purple-600 to-indigo-600 bg-clip-text pb-1 text-transparent">
+                Get in touch or create an account.
+              </span>
+            </h2>
+            <div className="mt-6 space-y-4 sm:flex sm:space-y-0 sm:space-x-5">
+              <a
+                href="#"
+                className="flex items-center justify-center rounded-md border border-transparent bg-gradient-to-r from-purple-600 to-indigo-600 bg-origin-border px-4 py-3 text-base font-medium text-white shadow-sm hover:from-purple-700 hover:to-indigo-700">
+                Learn more
+              </a>
+              <a
+                href="#"
+                className="flex items-center justify-center rounded-md border border-transparent bg-indigo-50 px-4 py-3 text-base font-medium text-indigo-800 shadow-sm hover:bg-indigo-100">
+                Get started
+              </a>
+            </div>
+          </div>
+        </div>
+      </main>
+
+      <footer className="bg-gray-50" aria-labelledby="footer-heading">
+        <h2 id="footer-heading" className="sr-only">
+          Footer
+        </h2>
+        <div className="mx-auto max-w-7xl px-4 pt-16 pb-8 sm:px-6 lg:px-8 lg:pt-24">
+          <div className="xl:grid xl:grid-cols-3 xl:gap-8">
+            <div className="grid grid-cols-2 gap-8 xl:col-span-2">
+              <div className="md:grid md:grid-cols-2 md:gap-8">
+                <div>
+                  <h3 className="text-base font-medium text-gray-900">Solutions</h3>
+                  <ul role="list" className="mt-4 space-y-4">
+                    {footerNavigation.solutions.map((item) => (
+                      <li key={item.name}>
+                        <a href={item.href} className="text-base text-gray-500 hover:text-gray-900">
+                          {item.name}
+                        </a>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+                <div className="mt-12 md:mt-0">
+                  <h3 className="text-base font-medium text-gray-900">Support</h3>
+                  <ul role="list" className="mt-4 space-y-4">
+                    {footerNavigation.support.map((item) => (
+                      <li key={item.name}>
+                        <a href={item.href} className="text-base text-gray-500 hover:text-gray-900">
+                          {item.name}
+                        </a>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              </div>
+              <div className="md:grid md:grid-cols-2 md:gap-8">
+                <div>
+                  <h3 className="text-base font-medium text-gray-900">Company</h3>
+                  <ul role="list" className="mt-4 space-y-4">
+                    {footerNavigation.company.map((item) => (
+                      <li key={item.name}>
+                        <a href={item.href} className="text-base text-gray-500 hover:text-gray-900">
+                          {item.name}
+                        </a>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+                <div className="mt-12 md:mt-0">
+                  <h3 className="text-base font-medium text-gray-900">Legal</h3>
+                  <ul role="list" className="mt-4 space-y-4">
+                    {footerNavigation.legal.map((item) => (
+                      <li key={item.name}>
+                        <a href={item.href} className="text-base text-gray-500 hover:text-gray-900">
+                          {item.name}
+                        </a>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              </div>
+            </div>
+            <div className="mt-12 xl:mt-0">
+              <h3 className="text-base font-medium text-gray-900">Subscribe to our newsletter</h3>
+              <p className="mt-4 text-base text-gray-500">
+                The latest news, articles, and resources, sent to your inbox weekly.
+              </p>
+            </div>
+          </div>
+          <div className="mt-12 border-t border-gray-200 pt-8 md:flex md:items-center md:justify-between lg:mt-16">
+            <div className="flex space-x-6 md:order-2">
+              {footerNavigation.social.map((item) => (
+                <a key={item.name} href={item.href} className="text-gray-400 hover:text-gray-500">
+                  <span className="sr-only">{item.name}</span>
+                  <item.icon className="h-6 w-6" aria-hidden="true" />
+                </a>
+              ))}
+            </div>
+            <p className="mt-8 text-base text-gray-400 md:order-1 md:mt-0">
+              &copy; 2020 Your Company, Inc. All rights reserved.
+            </p>
+          </div>
+        </div>
+      </footer>
+    </div>
+  );
+}
diff --git a/apps/demo/postcss.config.js b/apps/demo/postcss.config.js
new file mode 100644
index 0000000000..33ad091d26
--- /dev/null
+++ b/apps/demo/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/apps/demo/styles/globals.css b/apps/demo/styles/globals.css
new file mode 100644
index 0000000000..b5c61c9567
--- /dev/null
+++ b/apps/demo/styles/globals.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/apps/demo/tailwind.config.js b/apps/demo/tailwind.config.js
new file mode 100644
index 0000000000..f510c74ae1
--- /dev/null
+++ b/apps/demo/tailwind.config.js
@@ -0,0 +1,20 @@
+/** @type {import('tailwindcss').Config} */
+const colors = require("tailwindcss/colors");
+
+module.exports = {
+  content: [
+    "./app/**/*.{js,ts,jsx,tsx}",
+    "./pages/**/*.{js,ts,jsx,tsx}",
+    "./components/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      extend: {
+        colors: {
+          cyan: colors.cyan,
+        },
+      },
+    },
+  },
+  plugins: [require("@tailwindcss/forms")],
+};
diff --git a/apps/demo/tsconfig.json b/apps/demo/tsconfig.json
new file mode 100644
index 0000000000..6c36451d9b
--- /dev/null
+++ b/apps/demo/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "extends": "@formbricks/tsconfig/nextjs.json",
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}
diff --git a/apps/hq/next.config.js b/apps/hq/next.config.js
index 37e1d94c07..177e11d288 100644
--- a/apps/hq/next.config.js
+++ b/apps/hq/next.config.js
@@ -33,4 +33,22 @@ module.exports = {
       },
     ];
   },
+  async headers() {
+    return [
+      {
+        // matching all API routes
+        source: "/api/capture/:path*",
+        headers: [
+          { key: "Access-Control-Allow-Credentials", value: "true" },
+          { key: "Access-Control-Allow-Origin", value: "*" },
+          { key: "Access-Control-Allow-Methods", value: "GET,OPTIONS,PATCH,DELETE,POST,PUT" },
+          {
+            key: "Access-Control-Allow-Headers",
+            value:
+              "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version",
+          },
+        ],
+      },
+    ];
+  },
 };
diff --git a/packages/react/src/helpers/sendToHq.ts b/packages/react/src/helpers/sendToHq.ts
index 36757d5764..4839d2231c 100644
--- a/packages/react/src/helpers/sendToHq.ts
+++ b/packages/react/src/helpers/sendToHq.ts
@@ -10,7 +10,7 @@ export const sendToHq = async ({ submission, schema }: sendToHqProps) => {
       console.warn(`🧱 FormBricks: formId not set in <Form />. Can't send submission to Formbricks HQ.`);
       return;
     }
-    // send answer to snoop platform
+    // send answer to Formbricks HQ
     await Promise.all([
       await fetch(
         `${schema.config.hqUrl || "https://hq.formbricks.com"}/api/capture/forms/${
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0680eb8502..b51428b5a5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,6 +14,47 @@ importers:
       tsx: 3.9.0
       turbo: 1.6.3
 
+  apps/demo:
+    specifiers:
+      '@formbricks/charts': workspace:*
+      '@formbricks/react': workspace:*
+      '@formbricks/tailwind-config': workspace:*
+      '@formbricks/tsconfig': workspace:*
+      '@formbricks/ui': workspace:*
+      '@heroicons/react': ^2.0.13
+      '@tailwindcss/forms': ^0.5.3
+      '@types/node': ^18.11.10
+      '@types/react': ^18.0.25
+      '@types/react-dom': ^18.0.9
+      autoprefixer: ^10.4.13
+      eslint-config-formbricks: workspace:*
+      next: latest
+      postcss: ^8.4.19
+      react: ^18.2.0
+      react-dom: ^18.2.0
+      tailwindcss: ^3.2.4
+      typescript: ^4.9.3
+    dependencies:
+      '@formbricks/charts': link:../../packages/charts
+      '@formbricks/react': link:../../packages/react
+      '@formbricks/ui': link:../../packages/ui
+      '@heroicons/react': 2.0.13_react@18.2.0
+      '@tailwindcss/forms': 0.5.3_tailwindcss@3.2.4
+      next: 13.0.6_biqbaboplfbrettd7655fr4n2y
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+    devDependencies:
+      '@formbricks/tailwind-config': link:../../packages/tailwind-config
+      '@formbricks/tsconfig': link:../../packages/tsconfig
+      '@types/node': 18.11.10
+      '@types/react': 18.0.25
+      '@types/react-dom': 18.0.9
+      autoprefixer: 10.4.13_postcss@8.4.19
+      eslint-config-formbricks: link:../../packages/eslint-config-formbricks
+      postcss: 8.4.19
+      tailwindcss: 3.2.4_postcss@8.4.19
+      typescript: 4.9.3
+
   apps/formbricks-com:
     specifiers:
       '@docsearch/react': ^3.3.0
@@ -2594,6 +2635,15 @@ packages:
     dev: false
     optional: true
 
+  /@next/swc-android-arm-eabi/13.0.6:
+    resolution: {integrity: sha512-FGFSj3v2Bluw8fD/X+1eXIEB0PhoJE0zfutsAauRhmNpjjZshLDgoXMWm1jTRL/04K/o9gwwO2+A8+sPVCH1uw==}
+    engines: {node: '>= 10'}
+    cpu: [arm]
+    os: [android]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@next/swc-android-arm64/13.0.0:
     resolution: {integrity: sha512-RW9Uy3bMSc0zVGCa11klFuwfP/jdcdkhdruqnrJ7v+7XHm6OFKkSRzX6ee7yGR1rdDZvTnP4GZSRSpzjLv/N0g==}
     engines: {node: '>= 10'}
@@ -2612,6 +2662,15 @@ packages:
     dev: false
     optional: true
 
+  /@next/swc-android-arm64/13.0.6:
+    resolution: {integrity: sha512-7MgbtU7kimxuovVsd7jSJWMkIHBDBUsNLmmlkrBRHTvgzx5nDBXogP0hzZm7EImdOPwVMPpUHRQMBP9mbsiJYQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [android]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@next/swc-darwin-arm64/13.0.0:
     resolution: {integrity: sha512-APA26nps1j4qyhOIzkclW/OmgotVHj1jBxebSpMCPw2rXfiNvKNY9FA0TcuwPmUCNqaTnm703h6oW4dvp73A4Q==}
     engines: {node: '>= 10'}
@@ -2630,6 +2689,15 @@ packages:
     dev: false
     optional: true
 
+  /@next/swc-darwin-arm64/13.0.6:
+    resolution: {integrity: sha512-AUVEpVTxbP/fxdFsjVI9d5a0CFn6NVV7A/RXOb0Y+pXKIIZ1V5rFjPwpYfIfyOo2lrqgehMNQcyMRoTrhq04xg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@next/swc-darwin-x64/13.0.0:
     resolution: {integrity: sha512-qsUhUdoFuRJiaJ7LnvTQ6GZv1QnMDcRXCIjxaN0FNVXwrjkq++U7KjBUaxXkRzLV4C7u0NHLNOp0iZwNNE7ypw==}
     engines: {node: '>= 10'}
@@ -2648,6 +2716,15 @@ packages:
     dev: false
     optional: true
 
+  /@next/swc-darwin-x64/13.0.6:
+    resolution: {integrity: sha512-SasCDJlshglsPnbzhWaIF6VEGkQy2NECcAOxPwaPr0cwbbt4aUlZ7QmskNzgolr5eAjFS/xTr7CEeKJtZpAAtQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@next/swc-freebsd-x64/13.0.0:
     resolution: {integrity: sha512-sCdyCbboS7CwdnevKH9J6hkJI76LUw1jVWt4eV7kISuLiPba3JmehZSWm80oa4ADChRVAwzhLAo2zJaYRrInbg==}
     engines: {node: '>= 10'}
@@ -2666,6 +2743,15 @@ packages:
     dev: false
     optional: true
 
+  /@next/swc-freebsd-x64/13.0.6:
+    resolution: {integrity: sha512-6Lbxd9gAdXneTkwHyYW/qtX1Tdw7ND9UbiGsGz/SP43ZInNWnW6q0au4hEVPZ9bOWWRKzcVoeTBdoMpQk9Hx9w==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@next/swc-linux-arm-gnueabihf/13.0.0:
     resolution: {integrity: sha512-/X/VxfFA41C9jrEv+sUsPLQ5vbDPVIgG0CJrzKvrcc+b+4zIgPgtfsaWq9ockjHFQi3ycvlZK4TALOXO8ovQ6Q==}
     engines: {node: '>= 10'}
@@ -2684,6 +2770,15 @@ packages:
     dev: false
     optional: true
 
+  /@next/swc-linux-arm-gnueabihf/13.0.6:
+    resolution: {integrity: sha512-wNdi5A519e1P+ozEuYOhWPzzE6m1y7mkO6NFwn6watUwO0X9nZs7fT9THmnekvmFQpaZ6U+xf2MQ9poQoCh6jQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@next/swc-linux-arm64-gnu/13.0.0:
     resolution: {integrity: sha512-x6Oxr1GIi0ZtNiT6jbw+JVcbEi3UQgF7mMmkrgfL4mfchOwXtWSHKTSSPnwoJWJfXYa0Vy1n8NElWNTGAqoWFw==}
     engines: {node: '>= 10'}
@@ -2702,6 +2797,15 @@ packages:
     dev: false
     optional: true
 
+  /@next/swc-linux-arm64-gnu/13.0.6:
+    resolution: {integrity: sha512-e8KTRnleQY1KLk5PwGV5hrmvKksCc74QRpHl5ffWnEEAtL2FE0ave5aIkXqErsPdXkiKuA/owp3LjQrP+/AH7Q==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@next/swc-linux-arm64-musl/13.0.0:
     resolution: {integrity: sha512-SnMH9ngI+ipGh3kqQ8+mDtWunirwmhQnQeZkEq9e/9Xsgjf04OetqrqRHKM1HmJtG2qMUJbyXFJ0F81TPuT+3g==}
     engines: {node: '>= 10'}
@@ -2720,6 +2824,15 @@ packages:
     dev: false
     optional: true
 
+  /@next/swc-linux-arm64-musl/13.0.6:
+    resolution: {integrity: sha512-/7RF03C3mhjYpHN+pqOolgME3guiHU5T3TsejuyteqyEyzdEyLHod+jcYH6ft7UZ71a6TdOewvmbLOtzHW2O8A==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@next/swc-linux-x64-gnu/13.0.0:
     resolution: {integrity: sha512-VSQwTX9EmdbotArtA1J67X8964oQfe0xHb32x4tu+JqTR+wOHyG6wGzPMdXH2oKAp6rdd7BzqxUXXf0J+ypHlw==}
     engines: {node: '>= 10'}
@@ -2738,6 +2851,15 @@ packages:
     dev: false
     optional: true
 
+  /@next/swc-linux-x64-gnu/13.0.6:
+    resolution: {integrity: sha512-kxyEXnYHpOEkFnmrlwB1QlzJtjC6sAJytKcceIyFUHbCaD3W/Qb5tnclcnHKTaFccizZRePXvV25Ok/eUSpKTw==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@next/swc-linux-x64-musl/13.0.0:
     resolution: {integrity: sha512-xBCP0nnpO0q4tsytXkvIwWFINtbFRyVY5gxa1zB0vlFtqYR9lNhrOwH3CBrks3kkeaePOXd611+8sjdUtrLnXA==}
     engines: {node: '>= 10'}
@@ -2756,6 +2878,15 @@ packages:
     dev: false
     optional: true
 
+  /@next/swc-linux-x64-musl/13.0.6:
+    resolution: {integrity: sha512-N0c6gubS3WW1oYYgo02xzZnNatfVQP/CiJq2ax+DJ55ePV62IACbRCU99TZNXXg+Kos6vNW4k+/qgvkvpGDeyA==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@next/swc-win32-arm64-msvc/13.0.0:
     resolution: {integrity: sha512-NutwDafqhGxqPj/eiUixJq9ImS/0sgx6gqlD7jRndCvQ2Q8AvDdu1+xKcGWGNnhcDsNM/n1avf1e62OG1GaqJg==}
     engines: {node: '>= 10'}
@@ -2774,6 +2905,15 @@ packages:
     dev: false
     optional: true
 
+  /@next/swc-win32-arm64-msvc/13.0.6:
+    resolution: {integrity: sha512-QjeMB2EBqBFPb/ac0CYr7GytbhUkrG4EwFWbcE0vsRp4H8grt25kYpFQckL4Jak3SUrp7vKfDwZ/SwO7QdO8vw==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@next/swc-win32-ia32-msvc/13.0.0:
     resolution: {integrity: sha512-zNaxaO+Kl/xNz02E9QlcVz0pT4MjkXGDLb25qxtAzyJL15aU0+VjjbIZAYWctG59dvggNIUNDWgoBeVTKB9xLg==}
     engines: {node: '>= 10'}
@@ -2792,6 +2932,15 @@ packages:
     dev: false
     optional: true
 
+  /@next/swc-win32-ia32-msvc/13.0.6:
+    resolution: {integrity: sha512-EQzXtdqRTcmhT/tCq81rIwE36Y3fNHPInaCuJzM/kftdXfa0F+64y7FAoMO13npX8EG1+SamXgp/emSusKrCXg==}
+    engines: {node: '>= 10'}
+    cpu: [ia32]
+    os: [win32]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@next/swc-win32-x64-msvc/13.0.0:
     resolution: {integrity: sha512-FFOGGWwTCRMu9W7MF496Urefxtuo2lttxF1vwS+1rIRsKvuLrWhVaVTj3T8sf2EBL6gtJbmh4TYlizS+obnGKA==}
     engines: {node: '>= 10'}
@@ -2810,6 +2959,15 @@ packages:
     dev: false
     optional: true
 
+  /@next/swc-win32-x64-msvc/13.0.6:
+    resolution: {integrity: sha512-pSkqZ//UP/f2sS9T7IvHLfEWDPTX0vRyXJnAUNisKvO3eF3e1xdhDX7dix/X3Z3lnN4UjSwOzclAI87JFbOwmQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@nodelib/fs.scandir/2.1.5:
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
@@ -4451,7 +4609,6 @@ packages:
     dependencies:
       mini-svg-data-uri: 1.4.4
       tailwindcss: 3.2.4_postcss@8.4.19
-    dev: true
 
   /@tailwindcss/typography/0.5.8_tailwindcss@3.2.4:
     resolution: {integrity: sha512-xGQEp8KXN8Sd8m6R4xYmwxghmswrd0cPnNI2Lc6fmrC3OojysTBJJGSIVwPV56q4t6THFUK3HJ0EaWwpglSxWw==}
@@ -5127,12 +5284,10 @@ packages:
       acorn: 7.4.1
       acorn-walk: 7.2.0
       xtend: 4.0.2
-    dev: true
 
   /acorn-walk/7.2.0:
     resolution: {integrity: sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==}
     engines: {node: '>=0.4.0'}
-    dev: true
 
   /acorn/6.4.2:
     resolution: {integrity: sha512-XtGIhXwF8YM8bJhGxG5kXgjkEuNGLTkoYqVE+KMR+aspr4KGYmKYg7yUe3KghyQ9yheNwLnjmzh/7+gfDBmHCQ==}
@@ -5144,7 +5299,6 @@ packages:
     resolution: {integrity: sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==}
     engines: {node: '>=0.4.0'}
     hasBin: true
-    dev: true
 
   /acorn/8.8.1:
     resolution: {integrity: sha512-7zFpHzhnqYKrkYdUjF1HI1bzd0VygEGX8lFk4k5zVMqHEoES+P+7TKI+EvLO9WVMJ8eekdO0aDEK044xTXwPPA==}
@@ -5355,7 +5509,6 @@ packages:
     dependencies:
       normalize-path: 3.0.0
       picomatch: 2.3.1
-    dev: true
 
   /app-root-dir/1.0.2:
     resolution: {integrity: sha512-jlpIfsOoNoafl92Sz//64uQHGSyMrD2vYG5d8o2a4qGvyNCvXur7bzIsWtAC/6flI2RYAp3kv8rsfBtaLm7w0g==}
@@ -5412,7 +5565,6 @@ packages:
 
   /arg/5.0.2:
     resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
-    dev: true
 
   /argparse/1.0.10:
     resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==}
@@ -5861,7 +6013,6 @@ packages:
   /binary-extensions/2.2.0:
     resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
     engines: {node: '>=8'}
-    dev: true
 
   /bindings/1.5.0:
     resolution: {integrity: sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==}
@@ -6281,7 +6432,6 @@ packages:
   /camelcase-css/2.0.1:
     resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
     engines: {node: '>= 6'}
-    dev: true
 
   /camelcase-keys/2.1.0:
     resolution: {integrity: sha512-bA/Z/DERHKqoEOrp+qeGKw1QlvEQkGZSc0XaY6VnTxZr+Kv1G5zFwttpjv8qxZ/sBPT4nthwZaAcsAZTJlSKXQ==}
@@ -6481,7 +6631,6 @@ packages:
       readdirp: 3.6.0
     optionalDependencies:
       fsevents: 2.3.2
-    dev: true
 
   /chownr/1.1.4:
     resolution: {integrity: sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==}
@@ -7120,7 +7269,6 @@ packages:
     resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
     engines: {node: '>=4'}
     hasBin: true
-    dev: true
 
   /csstype/3.1.1:
     resolution: {integrity: sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==}
@@ -7370,7 +7518,6 @@ packages:
 
   /defined/1.0.1:
     resolution: {integrity: sha512-hsBd2qSVCRE+5PmNdHt1uzyrFu5d3RwmFDKzyNZMFq/EwDNJF7Ee5+D5oEKF0hU6LhtoUF1macFvOe4AskQC1Q==}
-    dev: true
 
   /del/6.1.1:
     resolution: {integrity: sha512-ua8BhapfP0JUJKC/zV9yHHDW/rDoDxP4Zhn3AkA6/xT6gY7jYXJiaeyBZznYVujhZZET+UgcbZiQ7sN3WqcImg==}
@@ -7452,11 +7599,9 @@ packages:
       acorn-node: 1.8.2
       defined: 1.0.1
       minimist: 1.2.7
-    dev: true
 
   /didyoumean/1.2.2:
     resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
-    dev: true
 
   /diff/5.1.0:
     resolution: {integrity: sha512-D+mk+qE8VC/PAUrlAU34N+VfXev0ghe5ywmpqrawphmVZc1bEfn56uo9qpyGp1p4xpzOHkSW4ztBd6L7Xx4ACw==}
@@ -7486,7 +7631,6 @@ packages:
 
   /dlv/1.1.3:
     resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
-    dev: true
 
   /doctrine/2.1.0:
     resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
@@ -9121,7 +9265,6 @@ packages:
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
     os: [darwin]
     requiresBuild: true
-    dev: true
     optional: true
 
   /function-bind/1.1.1:
@@ -10032,7 +10175,6 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       binary-extensions: 2.2.0
-    dev: true
 
   /is-boolean-object/1.1.2:
     resolution: {integrity: sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==}
@@ -10824,7 +10966,6 @@ packages:
   /lilconfig/2.0.6:
     resolution: {integrity: sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg==}
     engines: {node: '>=10'}
-    dev: true
 
   /lines-and-columns/1.2.4:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
@@ -11849,7 +11990,6 @@ packages:
   /mini-svg-data-uri/1.4.4:
     resolution: {integrity: sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==}
     hasBin: true
-    dev: true
 
   /minimalistic-assert/1.0.1:
     resolution: {integrity: sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==}
@@ -12288,6 +12428,50 @@ packages:
       - babel-plugin-macros
     dev: false
 
+  /next/13.0.6_biqbaboplfbrettd7655fr4n2y:
+    resolution: {integrity: sha512-COvigvms2LRt1rrzfBQcMQ2GZd86Mvk1z+LOLY5pniFtL4VrTmhZ9salrbKfSiXbhsD01TrDdD68ec3ABDyscA==}
+    engines: {node: '>=14.6.0'}
+    hasBin: true
+    peerDependencies:
+      fibers: '>= 3.1.0'
+      node-sass: ^6.0.0 || ^7.0.0
+      react: ^18.2.0
+      react-dom: ^18.2.0
+      sass: ^1.3.0
+    peerDependenciesMeta:
+      fibers:
+        optional: true
+      node-sass:
+        optional: true
+      sass:
+        optional: true
+    dependencies:
+      '@next/env': 13.0.6
+      '@swc/helpers': 0.4.14
+      caniuse-lite: 1.0.30001435
+      postcss: 8.4.14
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+      styled-jsx: 5.1.0_react@18.2.0
+    optionalDependencies:
+      '@next/swc-android-arm-eabi': 13.0.6
+      '@next/swc-android-arm64': 13.0.6
+      '@next/swc-darwin-arm64': 13.0.6
+      '@next/swc-darwin-x64': 13.0.6
+      '@next/swc-freebsd-x64': 13.0.6
+      '@next/swc-linux-arm-gnueabihf': 13.0.6
+      '@next/swc-linux-arm64-gnu': 13.0.6
+      '@next/swc-linux-arm64-musl': 13.0.6
+      '@next/swc-linux-x64-gnu': 13.0.6
+      '@next/swc-linux-x64-musl': 13.0.6
+      '@next/swc-win32-arm64-msvc': 13.0.6
+      '@next/swc-win32-ia32-msvc': 13.0.6
+      '@next/swc-win32-x64-msvc': 13.0.6
+    transitivePeerDependencies:
+      - '@babel/core'
+      - babel-plugin-macros
+    dev: false
+
   /nextjs-cors/2.1.2_next@13.0.5:
     resolution: {integrity: sha512-2yOVivaaf2ILe4f/qY32hnj3oC77VCOsUQJQfhVMGsXE/YMEWUY2zy78sH9FKUCM7eG42/l3pDofIzMD781XGA==}
     peerDependencies:
@@ -12386,7 +12570,6 @@ packages:
   /normalize-path/3.0.0:
     resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /normalize-range/0.1.2:
     resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
@@ -12464,7 +12647,6 @@ packages:
   /object-hash/3.0.0:
     resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
     engines: {node: '>= 6'}
-    dev: true
 
   /object-inspect/1.12.2:
     resolution: {integrity: sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==}
@@ -12994,7 +13176,6 @@ packages:
   /pify/2.3.0:
     resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /pify/3.0.0:
     resolution: {integrity: sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg==}
@@ -13082,7 +13263,6 @@ packages:
       postcss-value-parser: 4.2.0
       read-cache: 1.0.0
       resolve: 1.22.1
-    dev: true
 
   /postcss-js/4.0.0_postcss@8.4.19:
     resolution: {integrity: sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==}
@@ -13092,7 +13272,6 @@ packages:
     dependencies:
       camelcase-css: 2.0.1
       postcss: 8.4.19
-    dev: true
 
   /postcss-load-config/3.1.4:
     resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==}
@@ -13125,7 +13304,6 @@ packages:
       lilconfig: 2.0.6
       postcss: 8.4.19
       yaml: 1.10.2
-    dev: true
 
   /postcss-loader/4.3.0_gzaxsinx64nntyd3vmdqwl7coe:
     resolution: {integrity: sha512-M/dSoIiNDOo8Rk0mUqoj4kpGq91gcxCfb9PoyZVdZ76/AuhxylHDYZblNE8o+EQ9AMSASeMFEKxZf5aU6wlx1Q==}
@@ -13183,7 +13361,6 @@ packages:
     dependencies:
       postcss: 8.4.19
       postcss-selector-parser: 6.0.11
-    dev: true
 
   /postcss-selector-parser/6.0.10:
     resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==}
@@ -13199,7 +13376,6 @@ packages:
     dependencies:
       cssesc: 3.0.0
       util-deprecate: 1.0.2
-    dev: true
 
   /postcss-value-parser/3.3.1:
     resolution: {integrity: sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==}
@@ -13232,7 +13408,6 @@ packages:
       nanoid: 3.3.4
       picocolors: 1.0.0
       source-map-js: 1.0.2
-    dev: true
 
   /preact-render-to-string/5.2.6_preact@10.11.3:
     resolution: {integrity: sha512-JyhErpYOvBV1hEPwIxc/fHWXPfnEGdRKxc8gFdAZ7XV4tlzyzG847XAyEZqoDnynP88akM4eaHcSOzNcLWFguw==}
@@ -13525,7 +13700,6 @@ packages:
   /quick-lru/5.1.1:
     resolution: {integrity: sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==}
     engines: {node: '>=10'}
-    dev: true
 
   /ramda/0.28.0:
     resolution: {integrity: sha512-9QnLuG/kPVgWvMQ4aODhsBUFKOUmnbUnsSXACv+NCQZcHbeb+v8Lodp8OVxtRULN1/xOyYLLaL6npE6dMq5QTA==}
@@ -13788,7 +13962,6 @@ packages:
     resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
     dependencies:
       pify: 2.3.0
-    dev: true
 
   /read-pkg-up/1.0.1:
     resolution: {integrity: sha512-WD9MTlNtI55IwYUS27iHh9tK3YoIVhxis8yKhLpTqWtml739uXc9NWTpxoHkfZf3+DkCCsXox94/VWZniuZm6A==}
@@ -13882,7 +14055,6 @@ packages:
     engines: {node: '>=8.10.0'}
     dependencies:
       picomatch: 2.3.1
-    dev: true
 
   /readme-badger/0.3.0:
     resolution: {integrity: sha512-+sMOLSs1imZUISZ2Rhz7qqVd77QtpcAPbGeIraFdgJmijb04YtdlPjGNBvDChTNtLbeQ6JNGQy3pOgslWfaP3g==}
@@ -15295,7 +15467,6 @@ packages:
       resolve: 1.22.1
     transitivePeerDependencies:
       - ts-node
-    dev: true
 
   /tapable/1.1.3:
     resolution: {integrity: sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==}
@@ -16375,7 +16546,6 @@ packages:
 
   /util-deprecate/1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
-    dev: true
 
   /util.promisify/1.0.0:
     resolution: {integrity: sha512-i+6qA2MPhvoKLuxnJNpXAGhg7HphQOSUq2LKMZD0m15EiskXUkMvKdF4Uui0WYeCUGea+o2cw/ZuwehtfsrNkA==}
@@ -16940,7 +17110,6 @@ packages:
   /yaml/1.10.2:
     resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
     engines: {node: '>= 6'}
-    dev: true
 
   /yaml/2.1.3:
     resolution: {integrity: sha512-AacA8nRULjKMX2DvWvOAdBZMOfQlypSFkjcOcu9FalllIDJ1kvlREzcdIZmidQUqqeMv7jorHjq2HlLv/+c2lg==}