Logo color revamp (#142)

* update formbricks logo
* update colors

Co-authored-by: knugget <johannes@knugget.de>

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

@@ -4,7 +4,7 @@ import { useRouter } from "next/router";
 import clsx from "clsx";
 
 import { Hero } from "@/components/shared/Hero";
-import { Logo, Logomark } from "@/components/shared/Logo";
+import { FooterLogo, Logomark } from "@/components/shared/Logo";
 import { MobileNavigation } from "@/components/shared/MobileNavigation";
 import { Navigation } from "@/components/shared/Navigation";
 import { Prose } from "@/components/shared/Prose";
@@ -12,6 +12,7 @@ import { Search } from "@/components/shared/Search";
 import { ThemeSelector } from "@/components/shared/ThemeSelector";
 import navigation from "@/lib/docsNavigation";
 import Button from "../shared/Button";
+import MetaInformation from "../shared/MetaInformation";
 
 function GitHubIcon(props: any) {
   return (
@@ -39,9 +40,9 @@ function Header({ navigation }: any) {
   return (
     <header
       className={clsx(
-        "sticky top-0 z-50 flex flex-wrap items-center justify-between bg-white px-4 py-5 shadow-md shadow-blue-900/5 transition duration-500 dark:shadow-none sm:px-6 lg:px-8",
+        "sticky top-0 z-50 flex flex-wrap items-center justify-between bg-white px-4 py-5 shadow-md shadow-slate-900/5 transition duration-500 dark:shadow-none sm:px-6 lg:px-8",
         isScrolled
-          ? "dark:bg-blue-900/95 dark:backdrop-blur dark:[@supports(backdrop-filter:blur(0))]:bg-blue-900/75"
+          ? "dark:bg-slate-900/95 dark:backdrop-blur dark:[@supports(backdrop-filter:blur(0))]:bg-slate-900/75"
           : "dark:bg-transparent"
       )}>
       <div className="mr-6 flex lg:hidden">
@@ -50,7 +51,7 @@ function Header({ navigation }: any) {
       <div className="relative flex flex-grow basis-0 items-center">
         <Link href="/" aria-label="Home page">
           <Logomark className="h-9 w-9 lg:hidden" />
-          <Logo className="hidden h-9 w-auto fill-blue-700 dark:fill-sky-100 lg:block" />
+          <FooterLogo className="hidden h-9 w-auto fill-slate-700 dark:fill-slate-100 lg:block" />
         </Link>
         <div>
           <Button
@@ -68,7 +69,7 @@ function Header({ navigation }: any) {
       <div className="relative flex basis-0 justify-end gap-6 sm:gap-8 md:flex-grow">
         <ThemeSelector className="relative z-10" />
         <Link href="https://github.com" className="group" aria-label="GitHub">
-          <GitHubIcon className="h-6 w-6 fill-blue-400 group-hover:fill-blue-500 dark:group-hover:fill-blue-300" />
+          <GitHubIcon className="h-6 w-6 fill-slate-400 group-hover:fill-slate-500 dark:group-hover:fill-slate-300" />
         </Link>
       </div>
     </header>
@@ -93,15 +94,19 @@ export function Layout({ children, meta }: LayoutProps) {
 
   return (
     <>
+      <MetaInformation
+        title="Formbricks Documentation"
+        description="Modular, customizable, extendable. Take what you like, build on top what you need. Build your next big thing faster."
+      />
       <Header navigation={navigation} />
 
       {isHomePage && <Hero />}
 
       <div className="max-w-8xl relative mx-auto flex justify-center sm:px-2 lg:px-8 xl:px-12">
         <div className="hidden lg:relative lg:block lg:flex-none">
-          <div className="absolute inset-y-0 right-0 w-[50vw] bg-blue-50 dark:hidden" />
-          <div className="absolute top-16 bottom-0 right-0 hidden h-12 w-px bg-gradient-to-t from-blue-800 dark:block" />
-          <div className="absolute top-28 bottom-0 right-0 hidden w-px bg-blue-800 dark:block" />
+          <div className="absolute inset-y-0 right-0 w-[50vw] bg-slate-50 dark:hidden" />
+          <div className="absolute top-16 bottom-0 right-0 hidden h-12 w-px bg-gradient-to-t from-slate-800 dark:block" />
+          <div className="absolute top-28 bottom-0 right-0 hidden w-px bg-slate-800 dark:block" />
           <div className="sticky top-[4.5rem] -ml-0.5 h-[calc(100vh-4.5rem)] overflow-y-auto overflow-x-hidden py-16 pl-0.5">
             <Navigation navigation={navigation} className="w-64 pr-8 xl:w-72 xl:pr-16" />
           </div>
@@ -110,9 +115,13 @@ export function Layout({ children, meta }: LayoutProps) {
           <article>
             {(meta.title || section) && (
               <header className="mb-9 space-y-1">
-                {section && <p className="font-display text-sm font-medium text-sky-500">{section.title}</p>}
+                {section && (
+                  <p className="font-display text-brand-light dark:text-brand-dark text-sm font-medium">
+                    {section.title}
+                  </p>
+                )}
                 {meta.title && (
-                  <h1 className="font-display text-blue text-3xl tracking-tight dark:text-white">
+                  <h1 className="font-display text-3xl tracking-tight text-slate-800 dark:text-slate-100">
                     {meta.title}
                   </h1>
                 )}
@@ -120,14 +129,16 @@ export function Layout({ children, meta }: LayoutProps) {
             )}
             <Prose className="">{children}</Prose>
           </article>
-          <dl className="mt-12 flex border-t border-blue-200 pt-6 dark:border-blue-800">
+          <dl className="mt-12 flex border-t border-slate-200 pt-6 dark:border-slate-800">
             {previousPage && (
               <div>
-                <dt className="font-display text-blue text-sm font-medium dark:text-white">Previous</dt>
+                <dt className="font-display text-brand-dark dark:text-brand-light text-sm font-medium">
+                  Previous
+                </dt>
                 <dd className="mt-1">
                   <Link
                     href={previousPage.href}
-                    className="text-base font-semibold text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300">
+                    className="text-base font-semibold text-slate-500 hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300">
                     <span aria-hidden="true">&larr;</span> {previousPage.title}
                   </Link>
                 </dd>
@@ -135,11 +146,13 @@ export function Layout({ children, meta }: LayoutProps) {
             )}
             {nextPage && (
               <div className="ml-auto text-right">
-                <dt className="font-display text-blue text-sm font-medium dark:text-white">Next</dt>
+                <dt className="font-display text-brand-dark dark:text-brand-light text-sm font-medium">
+                  Next
+                </dt>
                 <dd className="mt-1">
                   <Link
                     href={nextPage.href}
-                    className="text-base font-semibold text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300">
+                    className="text-base font-semibold text-slate-500 hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300">
                     {nextPage.title} <span aria-hidden="true">&rarr;</span>
                   </Link>
                 </dd>

apps/formbricks-com/components/docs/MobileNavigation.jsx

@@ -45,17 +45,17 @@ export function MobileNavigation({ navigation }) {
   return (
     <>
       <button type="button" onClick={() => setIsOpen(true)} className="relative" aria-label="Open navigation">
-        <MenuIcon className="h-6 w-6 stroke-blue-500" />
+        <MenuIcon className="h-6 w-6 stroke-slate-500" />
       </button>
       <Dialog
         open={isOpen}
         onClose={setIsOpen}
-        className="fixed inset-0 z-50 flex items-start overflow-y-auto bg-blue-900/50 pr-10 backdrop-blur lg:hidden"
+        className="fixed inset-0 z-50 flex items-start overflow-y-auto bg-slate-900/50 pr-10 backdrop-blur lg:hidden"
         aria-label="Navigation">
-        <Dialog.Panel className="min-h-full w-full max-w-xs bg-white px-4 pt-5 pb-12 dark:bg-blue-900 sm:px-6">
+        <Dialog.Panel className="min-h-full w-full max-w-xs bg-white px-4 pt-5 pb-12 dark:bg-slate-900 sm:px-6">
           <div className="flex items-center">
             <button type="button" onClick={() => setIsOpen(false)} aria-label="Close navigation">
-              <CloseIcon className="h-6 w-6 stroke-blue-500" />
+              <CloseIcon className="h-6 w-6 stroke-slate-500" />
             </button>
             <Link href="/" className="ml-6" aria-label="Home page">
               <Logomark className="h-9 w-9" />

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

@@ -7,7 +7,7 @@ import {
   RectangleGroupIcon,
 } from "@heroicons/react/24/outline";
 import clsx from "clsx";
-import HeadingCentered from "../shared/HeadingCenetered";
+import HeadingCentered from "../shared/HeadingCentered";
 
 const features = [
   {
@@ -70,28 +70,32 @@ export default function Features() {
             <li
               key={feature.id}
               className={clsx(
-                feature.comingSoon ? "dark:to-blue dark:from-blue-900" : "dark:from-black dark:to-blue-900",
-                "relative col-span-1 mt-16 flex flex-col rounded-xl bg-gradient-to-b from-blue-200 to-gray-100 text-center drop-shadow-sm"
+                feature.comingSoon
+                  ? "bg-gradient-to-b from-slate-200  to-slate-100 dark:from-slate-800 dark:to-slate-900"
+                  : "bg-slate-200 drop-shadow-sm dark:bg-slate-800 ",
+                "relative col-span-1 mt-16 flex flex-col rounded-xl text-center"
               )}>
               <div className="absolute -mt-12 w-full">
                 <div
                   className={clsx(
                     feature.comingSoon
-                      ? "dark:to-blue bg-gradient-to-br from-blue-200 to-gray-100 dark:from-blue-900 dark:via-blue-900"
-                      : "via-blue to-blue dark bg-gradient-to-br from-black ",
-                    "mx-auto flex h-20 w-20 items-center justify-center rounded-full shadow"
+                      ? "from-slate-100 via-slate-200  to-slate-200 dark:from-slate-800  dark:to-slate-900"
+                      : "from-slate-200 via-slate-100  to-slate-100 dark:from-slate-900 dark:to-slate-700 ",
+                    "mx-auto flex h-20 w-20 items-center justify-center rounded-full bg-gradient-to-br shadow"
                   )}>
-                  <feature.icon className="mx-auto h-10 w-10 flex-shrink-0 text-teal-500" />
+                  <feature.icon className="text-brand-dark dark:text-brand-light mx-auto h-10 w-10 flex-shrink-0" />
                 </div>
               </div>
               <div className="flex flex-1 flex-col p-10">
-                <h3 className="text-blue my-4 text-lg font-medium dark:text-blue-100">{feature.name}</h3>
+                <h3 className="my-4 text-lg font-medium text-slate-800 dark:text-slate-200">
+                  {feature.name}
+                </h3>
                 <dl className="mt-1 flex flex-grow flex-col justify-between">
                   <dt className="sr-only">Description</dt>
-                  <dd className="text-sm text-gray-600 dark:text-blue-400">{feature.description}</dd>
+                  <dd className="text-sm text-gray-600 dark:text-slate-400">{feature.description}</dd>
                   {feature.comingSoon && (
                     <dd className="mt-4">
-                      <span className="rounded-full bg-gray-400 px-3 py-1 text-xs font-medium text-blue-50">
+                      <span className="rounded-full bg-slate-200 px-3 py-1 text-xs font-medium text-slate-500 dark:bg-slate-700 dark:text-slate-300">
                         coming soon
                       </span>
                     </dd>

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

@@ -13,15 +13,16 @@ export default function Highlights({}) {
         <div className="mx-auto max-w-md px-4 sm:max-w-3xl sm:px-6 lg:max-w-7xl lg:px-8">
           <div className="grid lg:grid-cols-2 lg:items-center lg:gap-24">
             <div className="order-last lg:order-first">
-              <h2 className="text-blue text-2xl font-bold tracking-tight dark:text-blue-100 sm:text-3xl">
-                Build forms in minutes with our <span className="font-light text-teal-500">lightweight</span>{" "}
-                React Form Builder.
+              <h2 className="text-2xl font-bold tracking-tight text-slate-800 dark:text-slate-200 sm:text-3xl">
+                Build forms in minutes with our{" "}
+                <span className="text-brand-dark dark:text-brand-light font-light">lightweight</span> React
+                Form Builder.
               </h2>
-              <p className="text-md mt-6 max-w-3xl leading-7 text-blue-500 dark:text-blue-300">
+              <p className="text-md mt-6 max-w-3xl leading-7 text-slate-500 dark:text-slate-400">
                 Loads of question types, validation, multi-page forms, logic jumps, i18n, custom styles - all
                 the good stuff you want, but don&apos;t want to build yourself.
-              </p>
-              <p className="text-md mt-6 max-w-3xl leading-7 text-blue-500 dark:text-blue-300">
+                <br />
+                <br />
                 Build <span className="font-semibold">exactly</span> the form you want in a fraction of the
                 time.
               </p>
@@ -40,13 +41,13 @@ export default function Highlights({}) {
           <div className="lg:grid lg:grid-cols-2 lg:items-center lg:gap-24">
             <Image src={ImageDataPipelines} alt="react library" className="mb-8 rounded-lg lg:mb-0" />
             <div>
-              <h2 className="text-blue text-2xl font-bold tracking-tight dark:text-blue-100 sm:text-3xl">
-                <span className="text-teal-500 ">API</span> all the way
+              <h2 className="text-2xl font-bold tracking-tight text-slate-800 dark:text-slate-100 sm:text-3xl">
+                <span className="text-brand-dark dark:text-brand-light ">API</span> all the way
               </h2>
-              <p className="text-md mt-6 max-w-3xl leading-7 text-blue-500 dark:text-blue-300">
+              <p className="text-md mt-6 max-w-3xl leading-7 text-slate-500 dark:text-slate-400">
                 Your form looks perfect? Time to build integrations...
-              </p>
-              <p className="text-md mt-6 max-w-3xl leading-7 text-blue-500 dark:text-blue-300">
+                <br />
+                <br />
                 <span className="font-semibold">Or use our prebuilt data pipelines.</span> Pipe submissions
                 right into your database. Set up webhooks, email notifications and 3rd party integrations in
                 our webUI.

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

@@ -68,24 +68,24 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
         variant === "highlight" &&
           (disabled
             ? "border border-transparent bg-gray-400 text-white"
-            : "border border-transparent dark:text-blue-800 text-black bg-teal-500 dark:bg-teal-500 hover:bg-opacity-90 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-teal-900"),
+            : "text-slate-900 bg-gradient-to-b from-brand-light to-brand-dark hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-slate-900 transition ease-in-out delay-50 hover:scale-105"),
         variant === "primary" &&
           (disabled
             ? "border border-transparent bg-gray-400 text-white"
-            : "border border-transparent dark:text-black text-blue-100 bg-blue-800 dark:bg-gradient-to-b dark:from-blue-200 dark:to-gray-100 hover:bg-opacity-90 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-teal-900"),
+            : "text-slate-900 bg-gradient-to-b from-brand-light to-brand-dark  hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-slate-900"),
 
         variant === "secondary" &&
           (disabled
             ? "border border-gray-200 text-gray-400 bg-white"
-            : "border-2 border-blue-800 text-blue-800 bg-blue-50 hover:bg-white hover:text-blue-800 hover:shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-neutral-900 dark:bg-blue-900 dark:text-gray-100 dark:hover:bg-black"),
+            : "hover:text-slate-600 hover:bg-slate-300 bg-slate-200 text-slate-700 hover:shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-neutral-900 dark:text-slate-400 dark:hover:text-slate-300 dark:bg-slate-800 dark:hover:bg-slate-700 transition ease-in-out delay-50 hover:scale-105"),
         variant === "alert" &&
           (disabled
             ? "border border-transparent bg-gray-400 text-white"
             : "border border-transparent dark:text-darkmodebrandcontrast text-brandcontrast bg-red-600 dark:bg-darkmodebrand hover:bg-opacity-90 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-neutral-900"),
         variant === "minimal" &&
           (disabled
-            ? "text-gray-400 bg-transparent"
-            : "text-gray-50 bg-blue dark:bg-blue-700 hover:bg-black focus:outline-none focus:ring-2 focus:ring-offset-1 dark:focus:bg-blue-900 focus:bg-blue-700 focus:ring-neutral-500"),
+            ? "text-slate-400 dark:text-slate-500 bg-slate-200 dark:bg-slate-800"
+            : "text-slate-600 hover:text-slate-500 bg-slate-200 hover:bg-slate-100 dark:bg-slate-800 dark:text-slate-300 dark:hover:text-slate-400 dark:hover:bg-slate-900 focus:outline-none focus:ring-2 focus:ring-offset-1 dark:focus:bg-slate-900 focus:bg-slate-700 focus:ring-neutral-500 transition ease-in-out delay-50 hover:scale-105"),
         variant === "warn" &&
           (disabled
             ? "text-gray-400 bg-transparent"
@@ -118,7 +118,7 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
           <svg
             className={clsx(
               "mx-4 h-5 w-5 animate-spin",
-              variant === "primary" ? "text-white dark:text-black" : "text-black"
+              variant === "primary" ? "text-white dark:text-slate-900" : "text-slate-900"
             )}
             xmlns="http://www.w3.org/2000/svg"
             fill="none"

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

@@ -1,6 +1,6 @@
 import Button from "@/components/shared/Button";
 import { useRouter } from "next/router";
-import HeadingCentered from "./HeadingCenetered";
+import HeadingCentered from "./HeadingCentered";
 
 export default function CTA() {
   const router = useRouter();
@@ -10,17 +10,17 @@ export default function CTA() {
         <HeadingCentered closer teaser="Get started" heading="Ready for the last form tool you need?" />
 
         <div className="mt-12 grid grid-cols-1 content-center md:grid-cols-2">
-          <div className="-mb-4 rounded-t-xl bg-gradient-to-br from-teal-600 to-teal-700  px-8 py-24 text-center text-gray-100 md:mb-0 md:ml-2.5 md:-mr-5 md:rounded-l-xl lg:p-24">
+          <div className="-mb-4 rounded-t-xl bg-gradient-to-br from-slate-300 to-slate-200 px-8 py-24  text-center text-gray-900 dark:from-slate-800 dark:to-slate-900 dark:text-gray-100 md:mb-0 md:ml-2.5 md:-mr-5 md:rounded-l-xl lg:p-24">
             <h3 className="text-3xl font-bold">Self-hosted</h3>
             <p className="mt-2 mb-4">Run locally e.g. with docker-compose.</p>
-            <Button variant="primary" onClick={() => router.push("/docs")} className="mt-3">
+            <Button variant="secondary" onClick={() => router.push("/docs")} className="mt-3">
               Read docs
             </Button>
           </div>
-          <div className="rounded-xl bg-gradient-to-br from-blue-700 to-blue-800 py-24 text-center text-white">
+          <div className="rounded-xl bg-gradient-to-br from-slate-400 to-slate-300 py-24 text-center text-gray-800 dark:from-slate-800 dark:to-slate-700 dark:text-gray-100">
             <h3 className="text-3xl font-bold">Cloud</h3>
             <p className="mt-2 mb-4">Use our free managed service.</p>
-            <Button variant="primary" onClick={() => router.push("/get-started")} className="mt-3">
+            <Button variant="secondary" onClick={() => router.push("/get-started")} className="mt-3">
               Get started
             </Button>
           </div>

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

@@ -4,14 +4,14 @@ import { Icon } from "@/components/shared/Icon";
 
 const styles = {
   note: {
-    container: "bg-sky-50 dark:bg-slate-800/60 dark:ring-1 dark:ring-slate-300/10",
-    title: "text-sky-900 dark:text-sky-400",
-    body: "text-sky-800 [--tw-prose-background:theme(colors.sky.50)] prose-a:text-sky-900 prose-code:text-sky-900 dark:text-slate-300 dark:prose-code:text-slate-300",
+    container: "bg-slate-50 dark:bg-slate-800/60 dark:ring-1 dark:ring-slate-300/10",
+    title: "text-slate-900 dark:text-slate-400",
+    body: "text-slate-800 [--tw-prose-background:theme(colors.slate.50)] prose-a:text-slate-900 prose-code:text-slate-900 dark:text-slate-300 dark:prose-code:text-slate-300",
   },
   warning: {
     container: "bg-amber-50 dark:bg-slate-800/60 dark:ring-1 dark:ring-slate-300/10",
     title: "text-amber-900 dark:text-amber-500",
-    body: "text-amber-800 [--tw-prose-underline:theme(colors.amber.400)] [--tw-prose-background:theme(colors.amber.50)] prose-a:text-amber-900 prose-code:text-amber-900 dark:text-slate-300 dark:[--tw-prose-underline:theme(colors.sky.700)] dark:prose-code:text-slate-300",
+    body: "text-amber-800 [--tw-prose-underline:theme(colors.amber.400)] [--tw-prose-background:theme(colors.amber.50)] prose-a:text-amber-900 prose-code:text-amber-900 dark:text-slate-300 dark:[--tw-prose-underline:theme(colors.slate.700)] dark:prose-code:text-slate-300",
   },
 };
 

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

@@ -18,7 +18,7 @@ export function Card({ as: Component = "div", className, children }) {
 Card.Link = function CardLink({ children, ...props }) {
   return (
     <>
-      <div className="absolute -inset-y-6 -inset-x-4 scale-95 bg-zinc-50 opacity-0 transition group-hover:scale-100 group-hover:opacity-100 dark:bg-zinc-800/50 sm:-inset-x-6 sm:rounded-2xl" />
+      <div className="absolute -inset-y-6 -inset-x-4 scale-95 bg-slate-50 opacity-0 transition group-hover:scale-100 group-hover:opacity-100 dark:bg-slate-800 sm:-inset-x-6 sm:rounded-2xl" />
       <Link {...props}>
         <span className="absolute -inset-y-6 -inset-x-4 sm:-inset-x-6 sm:rounded-2xl" />
         <span className="relative">{children}</span>
@@ -29,19 +29,21 @@ Card.Link = function CardLink({ children, ...props }) {
 
 Card.Title = function CardTitle({ as: Component = "h2", href, children }) {
   return (
-    <Component className="text-base font-semibold tracking-tight text-zinc-800 dark:text-zinc-100">
+    <Component className="text-base font-semibold tracking-tight text-slate-800 dark:text-slate-100">
       {href ? <Card.Link href={href}>{children}</Card.Link> : children}
     </Component>
   );
 };
 
 Card.Description = function CardDescription({ children }) {
-  return <p className="relative mt-2 text-sm text-zinc-600 dark:text-zinc-400">{children}</p>;
+  return <p className="relative mt-2 text-sm text-slate-600 dark:text-slate-400">{children}</p>;
 };
 
 Card.Cta = function CardCta({ children }) {
   return (
-    <div aria-hidden="true" className="relative mt-4 flex items-center text-sm font-medium text-teal-500">
+    <div
+      aria-hidden="true"
+      className="relative mt-4 flex items-center text-sm font-medium text-brand-dark dark:text-brand-light">
       {children}
       <ChevronRightIcon className="ml-1 h-4 w-4 stroke-current" />
     </div>
@@ -59,13 +61,13 @@ Card.Eyebrow = function CardEyebrow({
     <Component
       className={clsx(
         className,
-        "relative order-first mb-3 flex items-center text-sm text-zinc-400 dark:text-zinc-500",
+        "relative order-first mb-3 flex items-center text-sm text-slate-400 dark:text-slate-500",
         decorate && "pl-3.5"
       )}
       {...props}>
       {decorate && (
         <span className="absolute inset-y-0 left-0 flex items-center" aria-hidden="true">
-          <span className="h-4 w-0.5 rounded-full bg-zinc-200 dark:bg-zinc-500" />
+          <span className="h-4 w-0.5 rounded-full bg-slate-200 dark:bg-slate-500" />
         </span>
       )}
       {children}

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

@@ -1,46 +0,0 @@
-import clsx from "clsx";
-
-interface Props {
-  features: any[];
-}
-
-export default function FeatureHighlights({ features }: Props) {
-  return (
-    <ul role="list" className="grid grid-cols-1 gap-6 pt-8 sm:grid-cols-2 md:grid-cols-3">
-      {features.map((feature: any) => (
-        <li
-          key={feature.id}
-          className={clsx(
-            feature.comingSoon ? "dark:to-blue dark:from-blue-900" : "dark:from-black dark:to-blue-900",
-            "relative col-span-1 mt-16 flex flex-col rounded-xl bg-gradient-to-b from-blue-200 to-gray-100 text-center drop-shadow-sm dark:from-black dark:to-blue-900"
-          )}>
-          <div className="absolute -mt-12 w-full">
-            <div
-              className={clsx(
-                feature.comingSoon
-                  ? "dark:to-blue bg-gradient-to-br from-blue-200 to-gray-100 dark:from-blue-900 dark:via-blue-900"
-                  : "via-blue to-blue dark bg-gradient-to-br from-black ",
-                "mx-auto flex h-20 w-20 items-center justify-center rounded-full shadow"
-              )}>
-              <feature.icon className="mx-auto h-10 w-10 flex-shrink-0 text-teal-500" />
-            </div>
-          </div>
-          <div className="flex flex-1 flex-col p-10">
-            <h3 className="text-blue my-4 text-lg font-medium dark:text-blue-100">{feature.name}</h3>
-            <dl className="mt-1 flex flex-grow flex-col justify-between">
-              <dt className="sr-only">Description</dt>
-              <dd className="text-sm text-gray-600 dark:text-blue-400">{feature.description}</dd>
-              {feature.comingSoon && (
-                <dd className="mt-4">
-                  <span className="rounded-full bg-gray-400 px-3 py-1 text-xs font-medium text-blue-50">
-                    coming soon
-                  </span>
-                </dd>
-              )}
-            </dl>
-          </div>
-        </li>
-      ))}
-    </ul>
-  );
-}

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

@@ -9,9 +9,18 @@ interface Props {
   isImgLeft?: boolean;
   cta?: string;
   href?: string;
+  disabled?: boolean;
 }
 
-export default function FeatureHighlights({ featureTitle, text, img, isImgLeft, cta, href }: Props) {
+export default function FeatureHighlights({
+  featureTitle,
+  text,
+  img,
+  isImgLeft,
+  cta,
+  href,
+  disabled,
+}: Props) {
   const router = useRouter();
 
   return (
@@ -19,15 +28,20 @@ export default function FeatureHighlights({ featureTitle, text, img, isImgLeft,
       <div className="mx-auto max-w-md px-4 sm:max-w-3xl sm:px-6 lg:max-w-7xl lg:px-8">
         <div className="md:grid-cols-2 lg:grid lg:items-center lg:gap-24">
           <div className={clsx(isImgLeft ? "order-last" : "")}>
-            <h2 className="text-blue text-2xl font-bold tracking-tight dark:text-blue-100 sm:text-3xl">
+            <h2 className="text-2xl font-bold tracking-tight text-slate-800 dark:text-slate-200 sm:text-3xl">
               {featureTitle}
             </h2>
-            <div className="text-md mt-6 whitespace-pre-line leading-7 text-blue-500 dark:text-blue-300">
+            <div className="text-md mt-6 whitespace-pre-line leading-7 text-slate-500 dark:text-slate-400">
               {text}
             </div>
             <div className="mt-6">
               {cta && href && (
-                <Button variant="minimal" size="sm" className="mb-8" onClick={() => router.push(href)}>
+                <Button
+                  disabled={disabled}
+                  variant="minimal"
+                  size="sm"
+                  className="mb-8"
+                  onClick={() => router.push(href)}>
                   {cta}
                 </Button>
               )}

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

@@ -1,11 +1,11 @@
 import Link from "next/link";
 import clsx from "clsx";
-import { Logo } from "./Logo";
+import { FooterLogo } from "./Logo";
 
 const navigation = {
   creation: [
     { name: "React Form Builder", href: "/react-form-library", status: true },
-    { name: "Visual Builder", href: "/visual-builder", status: true },
+    { name: "No Code Builder", href: "/visual-builder", status: true },
     { name: "Templates", href: "#", status: false },
   ],
   pipelines: [
@@ -22,8 +22,6 @@ const navigation = {
     { name: "Community", href: "/community", status: true },
     { name: "Docs", href: "/docs", status: true },
     { name: "Blog", href: "/blog", status: true },
-    { name: "vs. React Hook Form", href: "/vs-react-hook-form", status: false },
-    { name: "vs. Formspree", href: "/vs-formspree", status: false },
   ],
   social: [
     {
@@ -54,7 +52,7 @@ const navigation = {
 export default function Footer() {
   return (
     <footer
-      className="dark:from-blue bg-gradient-to-b from-blue-100 to-blue-300 dark:to-black"
+      className="bg-gradient-to-b from-slate-100 to-slate-300 dark:from-slate-900 dark:to-slate-800"
       aria-labelledby="footer-heading">
       <h2 id="footer-heading" className="sr-only">
         Footer
@@ -62,13 +60,13 @@ export default function Footer() {
       <div className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:py-16 lg:px-8">
         <div className="xl:grid xl:grid-cols-3 xl:gap-8">
           <div className="space-y-8 xl:col-span-1">
-            <Logo className="h-8 w-auto sm:h-10" />
-            <p className="text-base text-blue-600 dark:text-blue-400">
+            <FooterLogo className="h-8 w-auto sm:h-10" />
+            <p className="text-base text-slate-500 dark:text-slate-400">
               The Open Source Forms & Survey Toolbox
             </p>
             <div className="flex space-x-6">
               {navigation.social.map((item) => (
-                <Link key={item.name} href={item.href} className="text-blue-400 hover:text-gray-400">
+                <Link key={item.name} href={item.href} className="text-slate-400 hover:text-gray-500">
                   <span className="sr-only">{item.name}</span>
                   <item.icon className="h-6 w-6" aria-hidden="true" />
                 </Link>
@@ -78,7 +76,7 @@ export default function Footer() {
           <div className="mt-12 grid grid-cols-2 gap-8 xl:col-span-2 xl:mt-0">
             <div className="md:grid md:grid-cols-2 md:gap-8">
               <div>
-                <h3 className="text-sm font-bold text-blue-800 dark:text-blue-50">Form Creation</h3>
+                <h3 className="text-sm font-bold text-slate-700 dark:text-slate-300">Form Creation</h3>
                 <ul role="list" className="mt-4 space-y-4">
                   {navigation.creation.map((item) => (
                     <li key={item.name}>
@@ -87,8 +85,8 @@ export default function Footer() {
                         scroll={item.status}
                         className={clsx(
                           item.status
-                            ? "cursor-pointer text-blue-700 hover:text-blue-400 dark:text-blue-400 dark:hover:text-blue-300"
-                            : "cursor-default text-blue-300 dark:text-blue-600",
+                            ? "cursor-pointer text-slate-600 hover:text-slate-500 dark:text-slate-400 dark:hover:text-slate-300"
+                            : "cursor-default text-slate-400 dark:text-slate-600",
                           "text-base"
                         )}>
                         {item.name}
@@ -98,17 +96,17 @@ export default function Footer() {
                 </ul>
               </div>
               <div className="mt-12 md:mt-0">
-                <h3 className="text-sm font-bold text-blue-800 dark:text-blue-50">Data Pipelines</h3>
+                <h3 className="text-sm font-bold text-slate-700 dark:text-slate-300">Data Pipelines</h3>
                 <ul role="list" className="mt-4 space-y-4">
                   {navigation.pipelines.map((item) => (
                     <li key={item.name}>
                       <Link
-                        scroll={item.status}
                         href={item.href}
+                        scroll={item.status}
                         className={clsx(
                           item.status
-                            ? "cursor-pointer text-blue-700 hover:text-blue-400 dark:text-blue-400 dark:hover:text-blue-300"
-                            : "cursor-default text-blue-300 dark:text-blue-600",
+                            ? "cursor-pointer text-slate-600 hover:text-slate-500 dark:text-slate-400 dark:hover:text-slate-300"
+                            : "cursor-default text-slate-400 dark:text-slate-600",
                           "text-base"
                         )}>
                         {item.name}
@@ -120,7 +118,7 @@ export default function Footer() {
             </div>
             <div className="md:grid md:grid-cols-2 md:gap-8">
               <div>
-                <h3 className="text-sm font-bold text-blue-800 dark:text-blue-50">Data Insights</h3>
+                <h3 className="text-sm font-bold text-slate-700 dark:text-slate-300">Data Insights</h3>
                 <ul role="list" className="mt-4 space-y-4">
                   {navigation.insights.map((item) => (
                     <li key={item.name}>
@@ -129,8 +127,8 @@ export default function Footer() {
                         scroll={item.status}
                         className={clsx(
                           item.status
-                            ? "cursor-pointer text-blue-700 hover:text-blue-400 dark:text-blue-400 dark:hover:text-blue-300"
-                            : "cursor-default text-blue-300 dark:text-blue-600",
+                            ? "cursor-pointer text-slate-600 hover:text-slate-500 dark:text-slate-400 dark:hover:text-slate-300"
+                            : "cursor-default text-slate-400 dark:text-slate-600",
                           "text-base"
                         )}>
                         {item.name}
@@ -140,16 +138,17 @@ export default function Footer() {
                 </ul>
               </div>
               <div className="mt-12 md:mt-0">
-                <h3 className="text-sm font-bold text-blue-800 dark:text-blue-50">Other</h3>
+                <h3 className="text-sm font-bold text-slate-700 dark:text-slate-300">Other</h3>
                 <ul role="list" className="mt-4 space-y-4">
                   {navigation.other.map((item) => (
                     <li key={item.name}>
                       <Link
                         href={item.href}
+                        scroll={item.status}
                         className={clsx(
                           item.status
-                            ? "cursor-pointer text-blue-700 hover:text-blue-400 dark:text-blue-400 dark:hover:text-blue-300"
-                            : "cursor-default text-blue-300 dark:text-blue-600",
+                            ? "cursor-pointer text-slate-600 hover:text-slate-500 dark:text-slate-400 dark:hover:text-slate-300"
+                            : "cursor-default text-slate-400 dark:text-slate-600",
                           "text-base"
                         )}>
                         {item.name}
@@ -162,7 +161,7 @@ export default function Footer() {
           </div>
         </div>
         <div className="mt-12 border-gray-500 pt-8">
-          <p className="text-sm text-blue-600 dark:text-gray-300 xl:text-center">
+          <p className="text-sm text-slate-400 dark:text-gray-500 xl:text-center">
             &copy; 2022. All rights reserved.
             <br />
             <Link href="/imprint">Imprint</Link> | <Link href="/privacy">Privacy Policy</Link>

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

@@ -18,7 +18,7 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import { Fragment } from "react";
 import Button from "./Button";
-import { Logo } from "./Logo";
+import { FooterLogo } from "./Logo";
 import { ThemeSelector } from "./ThemeSelector";
 
 const creation = [
@@ -103,11 +103,11 @@ export default function Header() {
         <div className="flex justify-start lg:w-0 lg:flex-1">
           <Link href="/">
             <span className="sr-only">Formbricks</span>
-            <Logo className="h-8 w-auto sm:h-10" />
+            <FooterLogo className="h-8 w-auto sm:h-10" />
           </Link>
         </div>
         <div className="-my-2 -mr-2 md:hidden">
-          <Popover.Button className="inline-flex items-center justify-center rounded-md bg-gray-100 p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-teal-500 dark:bg-blue-700 dark:text-blue-200">
+          <Popover.Button className="inline-flex items-center justify-center rounded-md bg-gray-100 p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-teal-500 dark:bg-slate-700 dark:text-slate-200">
             <span className="sr-only">Open menu</span>
             <Bars3Icon className="h-6 w-6" aria-hidden="true" />
           </Popover.Button>
@@ -118,19 +118,11 @@ export default function Header() {
               <>
                 <Popover.Button
                   className={clsx(
-                    open
-                      ? "text-gray-300 "
-                      : "text-gray-500  hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-50",
-                    "group inline-flex items-center rounded-md text-base font-medium hover:text-gray-300 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-offset-2 dark:hover:text-gray-50"
+                    open ? "text-slate-700" : "text-slate-400",
+                    "group inline-flex items-center rounded-md text-base font-medium hover:text-slate-700 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-offset-2 dark:hover:text-slate-300"
                   )}>
                   <span>Bricks</span>
-                  <ChevronDownIcon
-                    className={clsx(
-                      open ? "text-gray-600" : "text-gray-400",
-                      "ml-2 h-5 w-5 group-hover:text-gray-500"
-                    )}
-                    aria-hidden="true"
-                  />
+                  <ChevronDownIcon className="ml-2 h-5 w-5 " aria-hidden="true" />
                 </Popover.Button>
 
                 <Transition
@@ -143,81 +135,111 @@ export default function Header() {
                   leaveTo="opacity-0 translate-y-1">
                   <Popover.Panel className="absolute z-10 mt-3 -ml-4 w-screen max-w-lg transform lg:left-1/2 lg:ml-0 lg:max-w-4xl lg:-translate-x-1/2">
                     <div className="overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5">
-                      <div className="relative grid gap-6 bg-white px-5 py-6 sm:gap-6 sm:p-8 lg:grid-cols-3">
+                      <div className="relative grid gap-6 bg-slate-50 px-5 py-6 dark:bg-slate-700 sm:gap-6 sm:p-8 lg:grid-cols-3">
                         <div>
-                          <h4 className="mb-6 ml-16 text-sm text-blue-400">Form Creation</h4>
+                          <h4 className="mb-6 ml-16 text-sm text-slate-400">Form Creation</h4>
                           {creation.map((brick) => (
                             <Link
                               key={brick.name}
                               href={brick.href}
                               className={clsx(
-                                brick.status ? "cursor-pointer hover:bg-gray-50" : "cursor-default",
+                                brick.status
+                                  ? "cursor-pointer hover:bg-slate-100  dark:hover:bg-slate-600 dark:hover:bg-opacity-50"
+                                  : "cursor-default",
                                 "-m-3 flex items-start rounded-lg p-3 py-4"
                               )}>
-                              <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-md text-teal-500 sm:h-12 sm:w-12">
+                              <div
+                                className={clsx(
+                                  brick.status ? "text-brand-dark dark:text-brand-light" : "text-slate-500",
+                                  "flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-md sm:h-12 sm:w-12"
+                                )}>
                                 <brick.icon className="h-6 w-6" aria-hidden="true" />
                               </div>
                               <div className="ml-4">
                                 <p
                                   className={clsx(
-                                    brick.status ? "text-gray-900" : "text-gray-400",
+                                    brick.status
+                                      ? "text-slate-800 dark:text-slate-50"
+                                      : "text-slate-500 dark:text-slate-400",
                                     "text-lg font-semibold"
                                   )}>
                                   {brick.name}
                                 </p>
-                                <p className="text-sm text-gray-400">{brick.description}</p>
+                                <p className="text-sm text-slate-400 dark:text-slate-500">
+                                  {brick.description}
+                                </p>
                               </div>
                             </Link>
                           ))}
                         </div>
                         <div>
-                          <h4 className="mb-6 ml-16 text-sm text-blue-400">Data Pipelines</h4>
+                          <h4 className="mb-6 ml-16 text-sm text-slate-400">Data Pipelines</h4>
                           {pipes.map((brick) => (
                             <Link
                               key={brick.name}
                               href={brick.href}
                               className={clsx(
-                                brick.status ? "cursor-pointer hover:bg-gray-50" : "cursor-default",
+                                brick.status
+                                  ? "cursor-pointer hover:bg-slate-100  dark:hover:bg-slate-600 dark:hover:bg-opacity-50"
+                                  : "cursor-default",
                                 "-m-3 flex items-start rounded-lg p-3 py-4"
                               )}>
-                              <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center text-teal-500 sm:h-12 sm:w-12">
+                              <div
+                                className={clsx(
+                                  brick.status ? "text-brand-dark dark:text-brand-light" : "text-slate-500",
+                                  "flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-md sm:h-12 sm:w-12"
+                                )}>
                                 <brick.icon className="h-6 w-6" aria-hidden="true" />
                               </div>
                               <div className="ml-4">
                                 <p
                                   className={clsx(
-                                    brick.status ? "text-gray-900" : "text-gray-400",
+                                    brick.status
+                                      ? "text-slate-800 dark:text-slate-50"
+                                      : "text-slate-500 dark:text-slate-400",
                                     "text-lg font-semibold"
                                   )}>
                                   {brick.name}
                                 </p>
-                                <p className="text-sm text-gray-400">{brick.description}</p>
+                                <p className="text-sm text-slate-400 dark:text-slate-500">
+                                  {brick.description}
+                                </p>
                               </div>
                             </Link>
                           ))}
                         </div>
                         <div>
-                          <h4 className="mb-6 ml-16 text-sm text-blue-400">Data Insights</h4>
+                          <h4 className="mb-6 ml-16 text-sm text-slate-400">Data Insights</h4>
                           {insights.map((brick) => (
                             <Link
                               key={brick.name}
                               href={brick.href}
                               className={clsx(
-                                brick.status ? "cursor-pointer hover:bg-gray-50" : "cursor-default",
+                                brick.status
+                                  ? "cursor-pointer hover:bg-slate-100  dark:hover:bg-slate-600 dark:hover:bg-opacity-50"
+                                  : "cursor-default",
                                 "-m-3 flex items-start rounded-lg p-3 py-4"
                               )}>
-                              <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-md text-teal-500 sm:h-12 sm:w-12">
+                              <div
+                                className={clsx(
+                                  brick.status ? "text-brand-dark dark:text-brand-light" : "text-slate-500",
+                                  "flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-md sm:h-12 sm:w-12"
+                                )}>
                                 <brick.icon className="h-6 w-6" aria-hidden="true" />
                               </div>
                               <div className="ml-4">
                                 <p
                                   className={clsx(
-                                    brick.status ? "text-gray-900" : "text-gray-400",
+                                    brick.status
+                                      ? "text-slate-800 dark:text-slate-50"
+                                      : "text-slate-500 dark:text-slate-400",
                                     "text-lg font-semibold"
                                   )}>
                                   {brick.name}
                                 </p>
-                                <p className="text-sm text-gray-400">{brick.description}</p>
+                                <p className="text-sm text-slate-400 dark:text-slate-500">
+                                  {brick.description}
+                                </p>
                               </div>
                             </Link>
                           ))}
@@ -232,17 +254,17 @@ export default function Header() {
 
           <Link
             href="/community"
-            className="text-base font-medium text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-50">
+            className="text-base font-medium text-slate-400 hover:text-slate-700  dark:hover:text-slate-300">
             Community
           </Link>
           <Link
             href="/blog"
-            className="text-base font-medium text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-50">
+            className="text-base font-medium text-slate-400 hover:text-slate-700  dark:hover:text-slate-300">
             Blog
           </Link>
           <Link
             href="/docs"
-            className="text-base font-medium text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-50">
+            className="text-base font-medium text-slate-400 hover:text-slate-700  dark:hover:text-slate-300">
             Docs
           </Link>
         </Popover.Group>
@@ -251,7 +273,7 @@ export default function Header() {
           <Button
             variant="secondary"
             EndIcon={GitHubIcon}
-            endIconClassName="fill-blue-900 dark:fill-blue-50"
+            endIconClassName="fill-slate-800 dark:fill-slate-200"
             onClick={() => router.push("https://github.com/formbricks/formbricks")}>
             View on Github
           </Button>
@@ -272,21 +294,21 @@ export default function Header() {
         <Popover.Panel
           focus
           className="absolute inset-x-0 top-0 z-20 origin-top-right transform p-2 transition md:hidden">
-          <div className="dark:divide-blue divide-y-2 divide-gray-50 rounded-lg bg-gray-100 shadow-lg ring-1 ring-black ring-opacity-5 dark:bg-blue-900">
+          <div className="dark:divide-slate divide-y-2 divide-gray-50 rounded-lg bg-gray-100 shadow-lg ring-1 ring-black ring-opacity-5 dark:bg-slate-900">
             <div className="px-5 pt-5 pb-6">
               <div className="flex items-center justify-between">
                 <div>
-                  <Logo className="h-8 w-auto" />
+                  <FooterLogo className="h-8 w-auto" />
                 </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-teal-500 dark:bg-blue-700 dark:text-blue-200">
+                  <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-teal-500 dark:bg-slate-700 dark:text-slate-200">
                     <span className="sr-only">Close menu</span>
                     <XMarkIcon className="h-6 w-6" aria-hidden="true" />
                   </Popover.Button>
                 </div>
               </div>
 
-              <nav className="relative bg-gray-100 px-5 py-6 dark:bg-blue-900">
+              <nav className="relative bg-gray-100 px-5 py-6 dark:bg-slate-900">
                 <div>
                   <h4 className="mb-3 text-sm text-gray-900 dark:text-gray-300">Form Creation</h4>
                   {creation.map((brick) => (
@@ -297,7 +319,7 @@ export default function Header() {
                         brick.status ? "cursor-pointer" : "cursor-default",
                         "-m-3 flex items-start rounded-lg p-3 py-3"
                       )}>
-                      <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-md text-teal-500 sm:h-12 sm:w-12">
+                      <div className="text-brand-dark dark:text-brand-light flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-md sm:h-12 sm:w-12">
                         <brick.icon className="h-6 w-6" aria-hidden="true" />
                       </div>
                       <div className="ml-4">
@@ -333,7 +355,7 @@ export default function Header() {
                         brick.status ? "cursor-pointer" : "cursor-default",
                         "-m-3 flex items-start rounded-lg p-3 py-3"
                       )}>
-                      <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center text-teal-500 sm:h-12 sm:w-12">
+                      <div className="text-brand-dark dark:text-brand-light flex h-10 w-10 flex-shrink-0 items-center justify-center sm:h-12 sm:w-12">
                         <brick.icon className="h-6 w-6" aria-hidden="true" />
                       </div>
                       <div className="ml-4">
@@ -369,7 +391,7 @@ export default function Header() {
                         brick.status ? "cursor-pointer" : "cursor-default",
                         "-m-3 flex items-start rounded-lg p-3 py-3"
                       )}>
-                      <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-md text-teal-500 sm:h-12 sm:w-12">
+                      <div className="text-brand-dark dark:text-brand-light flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-md sm:h-12 sm:w-12">
                         <brick.icon className="h-6 w-6" aria-hidden="true" />
                       </div>
                       <div className="ml-4">
@@ -398,7 +420,7 @@ export default function Header() {
               </nav>
             </div>
             <div className="px-5 py-6">
-              <div className="grid grid-cols-3 text-center text-sm font-medium text-gray-900 hover:text-gray-700 dark:text-blue-200 sm:text-base">
+              <div className="grid grid-cols-3 text-center text-sm font-medium text-gray-900 hover:text-gray-700 dark:text-slate-200 sm:text-base">
                 <Link href="/community">Community</Link>
 
                 <Link href="/blog">Blog</Link>

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

@@ -10,13 +10,15 @@ interface Props {
 export default function HeadingCentered({ teaser, heading, subheading, closer }: Props) {
   return (
     <div className={clsx(closer ? "pt-16 lg:pt-24" : "pt-24 lg:pt-40", "px-2 pb-4 text-center md:pb-12")}>
-      <p className="text-md from-teal mx-auto mb-3 max-w-2xl bg-gradient-to-b to-teal-600 bg-clip-text font-semibold uppercase text-transparent sm:mt-4">
+      <p className="text-md text-brand-dark dark:text-brand-light mx-auto mb-3 max-w-2xl font-semibold uppercase sm:mt-4">
         {teaser}
       </p>
-      <h2 className="text-blue text-3xl font-bold tracking-tight dark:text-blue-100 sm:text-4xl">
+      <h2 className="text-3xl font-bold tracking-tight text-slate-800 dark:text-slate-100 sm:text-4xl">
         {heading}
       </h2>
-      <p className="mx-auto mt-3 max-w-3xl text-xl text-blue-500 dark:text-blue-300 sm:mt-4">{subheading}</p>
+      <p className="mx-auto mt-3 max-w-3xl text-xl text-slate-500 dark:text-slate-300 sm:mt-4">
+        {subheading}
+      </p>
     </div>
   );
 }

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

@@ -34,7 +34,7 @@ function TrafficLightsIcon(props) {
 
 export function Hero() {
   return (
-    <div className="overflow-hidden bg-blue-900 dark:-mb-32 dark:mt-[-4.5rem] dark:pb-32 dark:pt-[4.5rem] dark:lg:mt-[-4.75rem] dark:lg:pt-[4.75rem]">
+    <div className="overflow-hidden bg-slate-900 dark:-mb-32 dark:mt-[-4.5rem] dark:pb-32 dark:pt-[4.5rem] dark:lg:mt-[-4.75rem] dark:lg:pt-[4.75rem]">
       <div className="py-16 sm:px-2 lg:relative lg:py-20 lg:px-0">
         <div className="mx-auto grid max-w-2xl grid-cols-1 items-center gap-y-16 gap-x-8 px-4 lg:max-w-8xl lg:grid-cols-2 lg:px-8 xl:gap-x-16 xl:px-12">
           <div className="relative z-10 md:text-center lg:text-left">
@@ -48,10 +48,10 @@ export function Hero() {
               priority
             />
             <div className="relative">
-              <p className="inline bg-gradient-to-r from-indigo-200 via-sky-400 to-indigo-200 bg-clip-text font-display text-5xl tracking-tight text-transparent">
+              <p className="inline bg-gradient-to-r from-indigo-200 via-slate-400 to-indigo-200 bg-clip-text font-display text-5xl tracking-tight text-transparent">
                 Never miss the cache again.
               </p>
-              <p className="mt-3 text-2xl tracking-tight text-blue-400">
+              <p className="mt-3 text-2xl tracking-tight text-slate-400">
                 Cache every single thing your app could ever do ahead of time, so your code never even has to
                 run at all.
               </p>
@@ -86,13 +86,13 @@ export function Hero() {
                 unoptimized
                 priority
               />
-              <div className="absolute inset-0 rounded-2xl bg-gradient-to-tr from-sky-300 via-sky-300/70 to-blue-300 opacity-10 blur-lg" />
-              <div className="absolute inset-0 rounded-2xl bg-gradient-to-tr from-sky-300 via-sky-300/70 to-blue-300 opacity-10" />
+              <div className="absolute inset-0 rounded-2xl bg-gradient-to-tr from-slate-300 via-slate-300/70 to-slate-300 opacity-10 blur-lg" />
+              <div className="absolute inset-0 rounded-2xl bg-gradient-to-tr from-slate-300 via-slate-300/70 to-slate-300 opacity-10" />
               <div className="relative rounded-2xl bg-[#0A101F]/80 ring-1 ring-white/10 backdrop-blur">
-                <div className="absolute -top-px left-20 right-11 h-px bg-gradient-to-r from-sky-300/0 via-sky-300/70 to-sky-300/0" />
-                <div className="absolute -bottom-px left-11 right-20 h-px bg-gradient-to-r from-blue-400/0 via-blue-400 to-blue-400/0" />
+                <div className="absolute -top-px left-20 right-11 h-px bg-gradient-to-r from-slate-300/0 via-slate-300/70 to-slate-300/0" />
+                <div className="absolute -bottom-px left-11 right-20 h-px bg-gradient-to-r from-slate-400/0 via-slate-400 to-slate-400/0" />
                 <div className="pl-4 pt-4">
-                  <TrafficLightsIcon className="h-2.5 w-auto stroke-blue-500/30" />
+                  <TrafficLightsIcon className="h-2.5 w-auto stroke-slate-500/30" />
                   <div className="mt-4 flex space-x-2 text-xs">
                     {tabs.map((tab) => (
                       <div
@@ -100,13 +100,13 @@ export function Hero() {
                         className={clsx(
                           "flex h-6 rounded-full",
                           tab.isActive
-                            ? "bg-gradient-to-r from-sky-400/30 via-sky-400 to-sky-400/30 p-px font-medium text-sky-300"
-                            : "text-blue-500"
+                            ? "bg-gradient-to-r from-slate-400/30 via-slate-400 to-slate-400/30 p-px font-medium text-slate-300"
+                            : "text-slate-500"
                         )}>
                         <div
                           className={clsx(
                             "flex items-center rounded-full px-2.5",
-                            tab.isActive && "bg-blue-800"
+                            tab.isActive && "bg-slate-800"
                           )}>
                           {tab.name}
                         </div>
@@ -116,7 +116,7 @@ export function Hero() {
                   <div className="mt-6 flex items-start px-1 text-sm">
                     <div
                       aria-hidden="true"
-                      className="select-none border-r border-blue-300/5 pr-4 font-mono text-blue-600">
+                      className="select-none border-r border-slate-300/5 pr-4 font-mono text-slate-600">
                       {Array.from({
                         length: code.split("\n").length,
                       }).map((_, index) => (

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

@@ -9,14 +9,14 @@ interface Props {
 export default function HeroTitle({ headingPt1, headingTeal, headingPt2, subheading, children }: Props) {
   return (
     <div className="px-4 py-20 text-center sm:px-6 lg:px-8 lg:py-28">
-      <h1 className="text-blue text-3xl font-bold tracking-tight dark:text-blue-100 sm:text-4xl md:text-5xl">
+      <h1 className="text-3xl font-bold tracking-tight text-slate-800 dark:text-slate-200 sm:text-4xl md:text-5xl">
         <span className="xl:inline">{headingPt1}</span>{" "}
-        <span className="from-teal bg-gradient-to-b to-teal-600 bg-clip-text text-transparent xl:inline">
+        <span className="from-brand-light to-brand-dark bg-gradient-to-b bg-clip-text text-transparent xl:inline">
           {headingTeal}
         </span>{" "}
         <span className="inline ">{headingPt2}</span>
       </h1>
-      <p className="mx-auto mt-3 max-w-md text-base text-blue-500 dark:text-blue-300 sm:text-lg md:mt-5 md:max-w-2xl md:text-xl">
+      <p className="mx-auto mt-3 max-w-md text-base text-slate-500 dark:text-slate-300 sm:text-lg md:mt-5 md:max-w-2xl md:text-xl">
         {subheading}
       </p>
       <div className="mx-auto mt-5 max-w-md sm:flex sm:justify-center md:mt-8">{children}</div>

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

@@ -18,11 +18,11 @@ const icons = {
 };
 
 const iconStyles = {
-  blue: "[--icon-foreground:theme(colors.slate.900)] [--icon-background:theme(colors.white)]",
+  slate: "[--icon-foreground:theme(colors.slate.900)] [--icon-background:theme(colors.white)]",
   amber: "[--icon-foreground:theme(colors.amber.900)] [--icon-background:theme(colors.amber.100)]",
 };
 
-export function Icon({ color = "blue", icon, className, ...props }) {
+export function Icon({ color = "slate", icon, className, ...props }) {
   let id = useId();
   let IconComponent = icons[icon];
 
@@ -39,7 +39,7 @@ export function Icon({ color = "blue", icon, className, ...props }) {
 }
 
 const gradients = {
-  blue: [
+  slate: [
     { stopColor: "#0EA5E9" },
     { stopColor: "#22D3EE", offset: ".527" },
     { stopColor: "#818CF8", offset: 1 },
@@ -50,7 +50,7 @@ const gradients = {
   ],
 };
 
-export function Gradient({ color = "blue", ...props }) {
+export function Gradient({ color = "slate", ...props }) {
   return (
     <radialGradient cx={0} cy={0} r={1} gradientUnits="userSpaceOnUse" {...props}>
       {gradients[color].map((stop, stopIndex) => (

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

@@ -22,7 +22,7 @@ export default function LayoutMdx({ meta, children }: Props) {
           {meta.title && (
             <header className="mb-9 space-y-1">
               {meta.title && (
-                <h1 className="font-display text-blue text-3xl tracking-tight dark:text-gray-100">
+                <h1 className="font-display text-3xl tracking-tight text-slate-800 dark:text-gray-100">
                   {meta.title}
                 </h1>
               )}

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

@@ -1,20 +1,35 @@
 import Image from "next/image";
-import logomark from "@/images/logomark.svg";
-import logo from "@/images/logo.svg";
-import logoDark from "@/images/logo_dark.svg";
+import logomark from "@/images/logo/logomark.svg";
+import logo from "@/images/logo/logo.svg";
+import logoDark from "@/images/logo/logo_dark.svg";
+import footerLogo from "@/images/logo/footerlogo.svg";
+import footerLogoDark from "@/images/logo/footerlogo-dark.svg";
 
 export function Logomark(props: any) {
-  return <Image src={logomark} {...props} alt="Formbricks Logomark" />;
+  return <Image src={logomark} {...props} alt="Formbricks Open source Forms & Surveys Logomark" />;
 }
 
 export function Logo(props: any) {
   return (
     <div>
       <div className="block dark:hidden">
-        <Image src={logo} {...props} alt="Formbricks Logo" />
+        <Image src={logo} {...props} alt="Formbricks Open source Forms & Surveys Logo" />
       </div>
       <div className="hidden dark:block">
-        <Image src={logoDark} {...props} alt="Formbricks Logo" />
+        <Image src={logoDark} {...props} alt="Formbricks Open source Forms & Surveys Logo" />
+      </div>
+    </div>
+  );
+}
+
+export function FooterLogo(props: any) {
+  return (
+    <div>
+      <div className="block dark:hidden">
+        <Image src={footerLogo} {...props} alt="Formbricks Open source Forms & Surveys Logo" />
+      </div>
+      <div className="hidden dark:block">
+        <Image src={footerLogoDark} {...props} alt="Formbricks Open source Forms & Surveys Logo" />
       </div>
     </div>
   );

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

@@ -7,11 +7,13 @@ export default function HeadingCentered() {
   return (
     <div className="mx-auto grid grid-cols-1 content-center gap-10 pt-24 pb-12 md:grid-cols-2">
       <div className="">
-        <p className="text-md font-semibold uppercase text-teal-500">What are you waiting for?</p>
-        <p className="text-blue my-0 text-4xl font-semibold tracking-tight dark:text-blue-100">
+        <p className="text-md text-brand-dark dark:text-brand-light font-semibold uppercase">
+          What are you waiting for?
+        </p>
+        <p className="my-0 text-4xl font-semibold tracking-tight text-slate-800 dark:text-slate-100">
           Try it right now!
         </p>
-        <p className="text-blue-500 dark:text-blue-300 ">
+        <p className="text-slate-500 dark:text-slate-300 ">
           Dive right in or browse docs for examples. Questions? Join our Discord, we’re happy to help
         </p>
         <Button variant="secondary" onClick={() => router.push("/discord")}>
@@ -22,7 +24,7 @@ export default function HeadingCentered() {
         </Button>
       </div>
       <div className="flex items-center pt-10">
-        <div className="flex h-20 w-full items-center justify-between rounded-lg bg-blue-900 px-8 text-gray-100 ">
+        <div className="flex h-20 w-full items-center justify-between rounded-lg bg-slate-900 px-8 text-gray-100 ">
           <p>npm install @formbricks/react</p>
           <button onClick={() => navigator.clipboard.writeText("npm install @formbricks/react")}>
             <DocumentDuplicateIcon className="h-8 w-8" />

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

@@ -45,17 +45,17 @@ export function MobileNavigation({ navigation }) {
   return (
     <>
       <button type="button" onClick={() => setIsOpen(true)} className="relative" aria-label="Open navigation">
-        <MenuIcon className="h-6 w-6 stroke-blue-500" />
+        <MenuIcon className="h-6 w-6 stroke-slate-500" />
       </button>
       <Dialog
         open={isOpen}
         onClose={setIsOpen}
-        className="fixed inset-0 z-50 flex items-start overflow-y-auto bg-blue-900/50 pr-10 backdrop-blur lg:hidden"
+        className="fixed inset-0 z-50 flex items-start overflow-y-auto bg-slate-900/50 pr-10 backdrop-blur lg:hidden"
         aria-label="Navigation">
-        <Dialog.Panel className="min-h-full w-full max-w-xs bg-white px-4 pt-5 pb-12 dark:bg-blue-900 sm:px-6">
+        <Dialog.Panel className="min-h-full w-full max-w-xs bg-white px-4 pt-5 pb-12 dark:bg-slate-900 sm:px-6">
           <div className="flex items-center">
             <button type="button" onClick={() => setIsOpen(false)} aria-label="Close navigation">
-              <CloseIcon className="h-6 w-6 stroke-blue-500" />
+              <CloseIcon className="h-6 w-6 stroke-slate-500" />
             </button>
             <Link href="/" className="ml-6" aria-label="Home page">
               <Logomark className="h-9 w-9" />

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

@@ -21,10 +21,10 @@ export function Navigation({ navigation, className }: NavigationProps) {
       <ul role="list" className="space-y-9">
         {navigation.map((section) => (
           <li key={section.title}>
-            <h2 className="font-display text-blue font-medium dark:text-white">{section.title}</h2>
+            <h2 className="font-display font-medium text-slate-800 dark:text-slate-100">{section.title}</h2>
             <ul
               role="list"
-              className="mt-2 space-y-2 border-l-2 border-blue-100 dark:border-blue-800 lg:mt-4 lg:space-y-4 lg:border-blue-200">
+              className="mt-2 space-y-2 border-l-2 border-slate-100 dark:border-slate-800 lg:mt-4 lg:space-y-4 lg:border-slate-200">
               {section.links.map((link) => (
                 <li key={link.href} className="relative">
                   <Link
@@ -32,8 +32,8 @@ export function Navigation({ navigation, className }: NavigationProps) {
                     className={clsx(
                       "block w-full pl-3.5 before:pointer-events-none before:absolute before:-left-1 before:top-1/2 before:h-1.5 before:w-1.5 before:-translate-y-1/2 before:rounded-full",
                       link.href === router.pathname
-                        ? "font-semibold text-sky-500 before:bg-sky-500"
-                        : "text-blue-500 before:hidden before:bg-blue-300 hover:text-blue-600 hover:before:block dark:text-blue-400 dark:before:bg-blue-700 dark:hover:text-blue-300"
+                        ? "text-brand before:bg-brand font-semibold"
+                        : "text-slate-500 before:hidden before:bg-slate-300 hover:text-slate-600 hover:before:block dark:text-slate-400 dark:before:bg-slate-700 dark:hover:text-slate-300"
                     )}>
                     {link.title}
                   </Link>

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

@@ -5,19 +5,19 @@ export function Prose({ as: Component = "div", className, ...props }) {
     <Component
       className={clsx(
         className,
-        "prose prose-blue max-w-none dark:prose-invert dark:text-blue-400",
+        "prose prose-slate max-w-none dark:prose-invert dark:text-slate-400",
         // headings
         "prose-headings:scroll-mt-28 prose-headings:font-display prose-headings:font-normal lg:prose-headings:scroll-mt-[8.5rem]",
         // lead
-        "prose-lead:text-blue-500 dark:prose-lead:text-blue-400",
+        "prose-lead:text-slate-500 dark:prose-lead:text-slate-400",
         // links
-        "prose-a:font-semibold dark:prose-a:text-sky-400",
+        "prose-a:font-semibold dark:prose-a:text-brand",
         // link underline
-        "prose-a:no-underline prose-a:shadow-[inset_0_-2px_0_0_var(--tw-prose-background,#fff),inset_0_calc(-1*(var(--tw-prose-underline-size,4px)+2px))_0_0_var(--tw-prose-underline,theme(colors.sky.300))] hover:prose-a:[--tw-prose-underline-size:6px] dark:[--tw-prose-background:theme(colors.blue.900)] dark:prose-a:shadow-[inset_0_calc(-1*var(--tw-prose-underline-size,2px))_0_0_var(--tw-prose-underline,theme(colors.sky.800))] dark:hover:prose-a:[--tw-prose-underline-size:6px]",
+        "prose-a:no-underline prose-a:shadow-[inset_0_-2px_0_0_var(--tw-prose-background,#fff),inset_0_calc(-1*(var(--tw-prose-underline-size,4px)+2px))_0_0_var(--tw-prose-underline,theme(colors.brand.dark))] hover:prose-a:[--tw-prose-underline-size:6px] dark:[--tw-prose-background:theme(colors.slate.900)] dark:prose-a:shadow-[inset_0_calc(-1*var(--tw-prose-underline-size,2px))_0_0_var(--tw-prose-underline,theme(colors.slate.800))] dark:hover:prose-a:[--tw-prose-underline-size:6px]",
         // pre
-        "prose-pre:rounded-xl prose-pre:bg-blue-900 prose-pre:shadow-lg dark:prose-pre:bg-blue-800/60 dark:prose-pre:shadow-none dark:prose-pre:ring-1 dark:prose-pre:ring-blue-300/10",
+        "prose-pre:rounded-xl prose-pre:bg-slate-900 prose-pre:shadow-lg dark:prose-pre:bg-slate-800/60 dark:prose-pre:shadow-none dark:prose-pre:ring-1 dark:prose-pre:ring-slate-300/10",
         // hr
-        "dark:prose-hr:border-blue-800"
+        "dark:prose-hr:border-slate-800"
       )}
       {...props}
     />

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

@@ -49,14 +49,14 @@ export function Search() {
     <>
       <button
         type="button"
-        className="group flex h-6 w-6 items-center justify-center sm:justify-start md:h-auto md:w-80 md:flex-none md:rounded-lg md:py-2.5 md:pl-4 md:pr-3.5 md:text-sm md:ring-1 md:ring-blue-200 md:hover:ring-blue-300 dark:md:bg-blue-800/75 dark:md:ring-inset dark:md:ring-white/5 dark:md:hover:bg-blue-700/40 dark:md:hover:ring-blue-500 lg:w-96"
+        className="group flex h-6 w-6 items-center justify-center sm:justify-start md:h-auto md:w-80 md:flex-none md:rounded-lg md:py-2.5 md:pl-4 md:pr-3.5 md:text-sm md:ring-1 md:ring-slate-200 md:hover:ring-slate-300 dark:md:bg-slate-800/75 dark:md:ring-inset dark:md:ring-white/5 dark:md:hover:bg-slate-700/40 dark:md:hover:ring-slate-500 lg:w-96"
         onClick={onOpen}>
-        <SearchIcon className="h-5 w-5 flex-none fill-blue-400 group-hover:fill-blue-500 dark:fill-blue-500 md:group-hover:fill-blue-400" />
-        <span className="sr-only md:not-sr-only md:ml-2 md:text-blue-500 md:dark:text-blue-400">
+        <SearchIcon className="h-5 w-5 flex-none fill-slate-400 group-hover:fill-slate-500 dark:fill-slate-500 md:group-hover:fill-slate-400" />
+        <span className="sr-only md:not-sr-only md:ml-2 md:text-slate-500 md:dark:text-slate-400">
           Search docs
         </span>
         {modifierKey && (
-          <kbd className="ml-auto hidden font-medium text-blue-400 dark:text-blue-500 md:block">
+          <kbd className="ml-auto hidden font-medium text-slate-400 dark:text-slate-500 md:block">
             <kbd className="font-sans">{modifierKey}</kbd>
             <kbd className="font-sans">K</kbd>
           </kbd>

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

@@ -72,8 +72,8 @@ export function ThemeSelector(props) {
       <Listbox.Button
         className="flex h-6 w-6 items-center justify-center rounded-lg shadow-md shadow-black/5 ring-1 ring-black/5 dark:bg-slate-700 dark:ring-inset dark:ring-white/5"
         aria-label={selectedTheme?.name}>
-        <LightIcon className="hidden h-4 w-4 fill-teal-500 [[data-theme=light]_&]:block" />
-        <DarkIcon className="hidden h-4 w-4 fill-teal-500 [[data-theme=dark]_&]:block" />
+        <LightIcon className="hidden h-4 w-4 fill-brand [[data-theme=light]_&]:block" />
+        <DarkIcon className="hidden h-4 w-4 fill-brand [[data-theme=dark]_&]:block" />
         <LightIcon className="hidden h-4 w-4 fill-slate-400 [:not(.dark)[data-theme=system]_&]:block" />
         <DarkIcon className="hidden h-4 w-4 fill-slate-400 [.dark[data-theme=system]_&]:block" />
       </Listbox.Button>
@@ -84,8 +84,8 @@ export function ThemeSelector(props) {
             value={theme}
             className={({ active, selected }) =>
               clsx("flex cursor-pointer select-none items-center rounded-[0.625rem] p-1", {
-                "text-teal-500": selected,
-                "text-blue dark:text-white": active && !selected,
+                "text-brand-dark dark:text-brand-light": selected,
+                "text-slate-800 dark:text-slate-100": active && !selected,
                 "text-slate-700 dark:text-slate-400": !active && !selected,
                 "bg-slate-100 dark:bg-slate-900/40": active,
               })
@@ -96,7 +96,7 @@ export function ThemeSelector(props) {
                   <theme.icon
                     className={clsx(
                       "h-4 w-4",
-                      selected ? "fill-teal-500 dark:fill-teal-500" : "fill-slate-400"
+                      selected ? "fill-brand-dark dark:fill-brand-light" : "fill-slate-400"
                     )}
                   />
                 </div>

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

@@ -7,14 +7,15 @@ export default function HeadingCentered() {
   return (
     <div className="mx-auto grid max-w-md grid-cols-1 content-center gap-10 px-4 py-12 sm:max-w-3xl sm:px-6 md:grid-cols-2 md:pt-24 md:pb-36 lg:max-w-6xl lg:px-8">
       <div className="">
-        <p className="text-md mb-3 font-semibold uppercase text-teal-500">What are you waiting for?</p>
-        <h2 className="text-blue text-3xl font-bold tracking-tight dark:text-blue-100 sm:text-4xl">
+        <p className="text-md text-brand-dark dark:text-brand-light mb-3 font-semibold uppercase">
+          What are you waiting for?
+        </p>
+        <h2 className="text-3xl font-bold tracking-tight text-slate-800 dark:text-slate-100 sm:text-4xl">
           Try it right now!
         </h2>
-        <p className="mt-3 text-blue-500 dark:text-blue-300 sm:mt-4 md:text-lg">
+        <p className="my-3 text-slate-500 dark:text-slate-300 sm:mb-6 sm:mt-4 md:text-lg">
           Dive right in or browse docs for examples.
-        </p>
-        <p className="mb-3 text-blue-500 dark:text-blue-300 sm:mb-4 md:text-lg">
+          <br />
           Questions? Join our Discord, we’re happy to help!
         </p>
         <Button variant="secondary" onClick={() => router.push("/docs")}>
@@ -25,7 +26,7 @@ export default function HeadingCentered() {
         </Button>
       </div>
       <div className="flex items-center">
-        <div className="flex h-20 w-full items-center justify-between rounded-lg bg-blue-900 px-8 text-gray-100 ">
+        <div className="flex h-20 w-full items-center justify-between rounded-lg bg-slate-800 px-8 text-gray-100 ">
           <p>npm install @formbricks/react</p>
           <button onClick={() => navigator.clipboard.writeText("npm install @formbricks/react")}>
             <DocumentDuplicateIcon className="h-8 w-8" />

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

@@ -42,29 +42,34 @@ const features = [
 
 export default function FeatureTable({}) {
   return (
-    <div className="mt-32 rounded-xl bg-gradient-to-br from-blue-900 via-blue-900 to-black lg:mt-56">
+    <div className="mt-32 rounded-xl bg-gradient-to-br from-slate-900 via-slate-900 to-slate-800 dark:from-slate-200  dark:to-slate-300 lg:mt-56">
       <div className="mx-auto max-w-4xl px-4 py-8 sm:px-6 sm:pt-8 sm:pb-12 lg:max-w-7xl lg:px-8 lg:pt-12">
-        <p className="text-md mb-3 max-w-2xl font-semibold uppercase text-teal-500 sm:mt-4">
+        <p className="text-md dark:text-brand-dark text-brand-light mb-3 max-w-2xl font-semibold uppercase sm:mt-4">
           Why Formbricks?
         </p>
-        <h2 className="mt-4 text-3xl font-bold tracking-tight text-white">
+        <h2 className="mt-4 text-3xl font-bold tracking-tight text-slate-200 dark:text-slate-800">
           The only complete open source option.
         </h2>
-        <p className="mt-4 max-w-3xl text-lg text-blue-300">
-          We needed this, so we are building it. We experienced first hand how form needs develop as companies
-          grow. Make the right choice today, congratulate yourself tomorrow :)
+        <p className="mt-4 max-w-3xl text-lg text-slate-300 dark:text-slate-500">
+          We experienced how form needs develop as companies grow. We could&#39nt find a solution which ticked
+          all of the boxes. Now we&apos;re building it.
         </p>
         <div className="mt-12 grid grid-cols-1 gap-x-6 gap-y-12 sm:grid-cols-2 lg:mt-16 lg:grid-cols-3 lg:gap-x-8 lg:gap-y-16">
           {features.map((feature) => (
             <div key={feature.name}>
               <div>
-                <span className="flex h-12 w-12 items-center justify-center rounded-md bg-teal-50 bg-opacity-10">
-                  <feature.icon className="h-6 w-6 text-teal-500" aria-hidden="true" />
+                <span className="flex h-12 w-12 items-center justify-center rounded-md bg-slate-800 dark:bg-slate-300">
+                  <feature.icon
+                    className="dark:text-brand-dark text-brand-light h-6 w-6"
+                    aria-hidden="true"
+                  />
                 </span>
               </div>
               <div className="mt-6">
-                <h3 className="text-lg font-semibold text-white">{feature.name}</h3>
-                <p className="mt-2 text-base leading-6 text-blue-400">{feature.description}</p>
+                <h3 className="text-lg font-semibold text-slate-200 dark:text-slate-700">{feature.name}</h3>
+                <p className="mt-2 text-base leading-6 text-slate-400 dark:text-slate-500">
+                  {feature.description}
+                </p>
               </div>
             </div>
           ))}

apps/formbricks-com/images/logo.svg

@@ -1,23 +0,0 @@
-<svg width="835" height="184" viewBox="0 0 835 184" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M123.303 67.78V73.1542H112.094V90.8124H123.303V153H144.032V90.8124H160.308V73.1542H144.032V68.0871C144.032 61.7916 146.95 58.567 153.092 58.567H158.466V40.9088H149.867C133.744 40.9088 123.303 51.6573 123.303 67.78ZM201.28 154.996C226.001 154.996 243.813 136.263 243.813 113.231C243.813 90.1982 226.001 71.3116 201.28 71.3116C176.558 71.3116 158.747 90.1982 158.747 113.231C158.747 136.263 176.558 154.996 201.28 154.996ZM179.476 113.231C179.476 100.793 188.075 90.1982 201.28 90.1982C214.485 90.1982 223.084 100.793 223.084 113.231C223.084 125.668 214.485 136.11 201.28 136.11C188.075 136.11 179.476 125.668 179.476 113.231ZM251.452 153H272.181V112.156C272.181 98.797 281.394 90.8124 293.371 90.8124H296.289V71.3116C282.469 70.5439 274.331 76.8394 271.567 88.3556V73.1542H251.452V153ZM301.65 153H322.379V109.238C322.379 95.4189 330.21 89.4305 338.962 89.4305C349.25 89.4305 356.16 95.4189 356.16 109.238V153H376.889V109.238C376.889 93.8834 383.492 89.4305 393.165 89.4305C402.532 89.4305 409.134 95.4189 409.134 109.238V153H429.863V104.171C429.863 84.0563 416.658 71.3116 399.461 71.3116C385.488 71.3116 377.81 76.6859 372.436 86.3595C367.215 76.6859 357.695 71.3116 346.486 71.3116C334.202 71.3116 326.218 75.9181 322.072 84.824V73.1542H301.65V153ZM485.779 154.996C507.737 154.996 525.242 136.417 525.242 113.384C525.242 90.3518 507.737 71.4652 485.779 71.4652C472.114 71.4652 464.897 76.993 460.597 85.4382V40.9088H439.868V153H459.983V139.948C464.283 149.008 471.499 154.996 485.779 154.996ZM459.983 113.384C459.983 100.947 468.735 90.1982 482.401 90.1982C495.607 90.1982 504.513 100.793 504.513 113.231C504.513 125.361 495.607 136.263 482.401 136.263C468.735 136.263 459.983 125.822 459.983 113.384ZM532.952 153H553.681V112.156C553.681 98.797 562.894 90.8124 574.871 90.8124H577.788V71.3116C563.969 70.5439 555.83 76.8394 553.067 88.3556V73.1542H532.952V153ZM583.149 153H603.878V73.1542H583.149V153ZM580.999 54.2677C580.999 61.0238 586.374 66.5516 593.437 66.5516C600.654 66.5516 605.874 61.1774 605.874 54.2677C605.874 47.665 600.654 42.1372 593.437 42.1372C586.374 42.1372 580.999 47.665 580.999 54.2677ZM652.683 154.996C668.345 154.996 679.401 149.315 686.925 139.641L671.877 126.589C667.731 132.117 662.51 136.11 654.526 136.11C641.32 136.11 632.261 125.515 632.261 113.077C632.261 100.64 640.86 90.0447 654.065 90.0447C661.128 90.0447 667.27 93.5763 670.955 99.1041L686.925 86.0524C680.168 76.6859 668.345 71.0045 653.758 71.1581C629.343 71.3116 611.532 89.8911 611.532 113.077C611.532 136.263 629.804 154.996 652.683 154.996ZM746.412 153H773.897L736.124 110.313L773.744 73.1542H744.262L714.32 105.4V40.9088H693.591V153H714.32V115.073L746.412 153ZM800.51 154.996C818.169 154.996 831.527 143.941 831.527 129.2C831.527 117.223 826.153 108.624 802.967 102.636C793.447 100.179 792.219 97.7222 792.219 94.9583C792.219 90.0447 796.518 87.895 802.199 87.895C807.574 87.895 812.487 90.3518 816.326 96.4938L831.374 84.9776C823.236 74.3826 814.637 71.1581 801.739 71.1581C783.006 71.1581 771.95 81.5995 771.95 95.5725C771.95 105.707 775.175 115.38 796.518 120.447C809.109 123.365 811.105 125.668 811.105 129.814C811.105 134.574 807.113 138.106 800.05 138.106C793.294 138.106 787.152 134.881 781.317 128.279L767.344 141.023C776.096 150.39 786.998 154.996 800.51 154.996Z" fill="#000A1C"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M17.5279 44.2825C17.5279 42.921 17.5279 42.2403 17.7971 41.7222C18.0239 41.2856 18.3799 40.9296 18.8165 40.7027C19.3346 40.4336 20.0153 40.4336 21.3768 40.4336H33.8367C35.1982 40.4336 35.8789 40.4336 36.397 40.7027C36.8336 40.9296 37.1896 41.2856 37.4164 41.7222C37.6856 42.2403 37.6856 42.921 37.6856 44.2825V46.9623C37.6856 47.4208 37.6856 47.8022 37.6753 48.1261H49.0895C49.0792 47.8022 49.0792 47.4208 49.0792 46.9623V44.2825C49.0792 42.921 49.0792 42.2403 49.3484 41.7222C49.5752 41.2856 49.9312 40.9296 50.3678 40.7027C50.886 40.4336 51.5667 40.4336 52.9281 40.4336H65.3881C66.7495 40.4336 67.4302 40.4336 67.9483 40.7027C68.385 40.9296 68.741 41.2856 68.9678 41.7222C69.2369 42.2403 69.2369 42.921 69.2369 44.2825V46.9623C69.2369 47.4208 69.2369 47.8022 69.2266 48.1261H76.1321C81.4133 48.1261 85.6945 52.4073 85.6945 57.6885V73.3823C85.6945 78.6634 81.4133 82.9446 76.1321 82.9446H9.56237C4.28121 82.9446 0 78.6634 0 73.3823V57.6885C0 52.4073 4.28122 48.1261 9.56238 48.1261H17.5382C17.5279 47.8022 17.5279 47.4208 17.5279 46.9623V44.2825Z" fill="#00E5CA"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M17.5279 44.2825C17.5279 42.921 17.5279 42.2403 17.7971 41.7222C18.0239 41.2856 18.3799 40.9296 18.8165 40.7027C19.3346 40.4336 20.0153 40.4336 21.3768 40.4336H33.8367C35.1982 40.4336 35.8789 40.4336 36.397 40.7027C36.8336 40.9296 37.1896 41.2856 37.4164 41.7222C37.6856 42.2403 37.6856 42.921 37.6856 44.2825V46.9623C37.6856 47.4208 37.6856 47.8022 37.6753 48.1261H49.0895C49.0792 47.8022 49.0792 47.4208 49.0792 46.9623V44.2825C49.0792 42.921 49.0792 42.2403 49.3484 41.7222C49.5752 41.2856 49.9312 40.9296 50.3678 40.7027C50.886 40.4336 51.5667 40.4336 52.9281 40.4336H65.3881C66.7495 40.4336 67.4302 40.4336 67.9483 40.7027C68.385 40.9296 68.741 41.2856 68.9678 41.7222C69.2369 42.2403 69.2369 42.921 69.2369 44.2825V46.9623C69.2369 47.4208 69.2369 47.8022 69.2266 48.1261H76.1321C81.4133 48.1261 85.6945 52.4073 85.6945 57.6885V73.3823C85.6945 78.6634 81.4133 82.9446 76.1321 82.9446H9.56237C4.28121 82.9446 0 78.6634 0 73.3823V57.6885C0 52.4073 4.28122 48.1261 9.56238 48.1261H17.5382C17.5279 47.8022 17.5279 47.4208 17.5279 46.9623V44.2825Z" fill="url(#paint0_linear_2303_6099)" fill-opacity="0.05"/>
-<path d="M0 92.5072C0 87.2261 4.28122 82.9448 9.56238 82.9448H76.1321C81.4133 82.9448 85.6945 87.226 85.6945 92.5072V109.168C85.6945 114.449 81.4133 118.731 76.1321 118.731H9.56237C4.28121 118.731 0 114.449 0 109.168V92.5072Z" fill="#002941"/>
-<path d="M0 92.5072C0 87.2261 4.28122 82.9448 9.56238 82.9448H76.1321C81.4133 82.9448 85.6945 87.226 85.6945 92.5072V109.168C85.6945 114.449 81.4133 118.731 76.1321 118.731H9.56237C4.28121 118.731 0 114.449 0 109.168V92.5072Z" fill="url(#paint1_linear_2303_6099)" fill-opacity="0.05"/>
-<path d="M0 128.293C0 123.012 4.28122 118.731 9.56238 118.731H76.1321C81.4133 118.731 85.6945 123.012 85.6945 128.293V143.987C85.6945 149.268 81.4133 153.549 76.1321 153.549H9.56237C4.28121 153.549 0 149.268 0 143.987V128.293Z" fill="#000A1C"/>
-<path d="M0 128.293C0 123.012 4.28122 118.731 9.56238 118.731H76.1321C81.4133 118.731 85.6945 123.012 85.6945 128.293V143.987C85.6945 149.268 81.4133 153.549 76.1321 153.549H9.56237C4.28121 153.549 0 149.268 0 143.987V128.293Z" fill="url(#paint2_linear_2303_6099)" fill-opacity="0.05"/>
-<defs>
-<linearGradient id="paint0_linear_2303_6099" x1="42.8473" y1="42.3228" x2="42.8473" y2="82.9447" gradientUnits="userSpaceOnUse">
-<stop/>
-<stop offset="1" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint1_linear_2303_6099" x1="42.8473" y1="82.9448" x2="42.8473" y2="118.731" gradientUnits="userSpaceOnUse">
-<stop/>
-<stop offset="1" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint2_linear_2303_6099" x1="42.8473" y1="118.731" x2="42.8473" y2="153.549" gradientUnits="userSpaceOnUse">
-<stop/>
-<stop offset="1" stop-opacity="0"/>
-</linearGradient>
-</defs>
-</svg>

apps/formbricks-com/images/logo/footerlogo-dark.svg

@@ -0,0 +1,76 @@
+<svg width="725" height="150" viewBox="0 0 725 150" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M143 116H157V87.4H183.6V75H157V58.6H184.1V46H143V116ZM217.309 117.3C233.409 117.3 245.009 105.1 245.009 90.1C245.009 75.1 233.409 62.8 217.309 62.8C201.209 62.8 189.609 75.1 189.609 90.1C189.609 105.1 201.209 117.3 217.309 117.3ZM203.109 90.1C203.109 82 208.709 75.1 217.309 75.1C225.909 75.1 231.509 82 231.509 90.1C231.509 98.2 225.909 105 217.309 105C208.709 105 203.109 98.2 203.109 90.1ZM250.984 116H264.484V89.4C264.484 80.7 270.484 75.5 278.284 75.5H280.184V62.8C271.184 62.3 265.884 66.4 264.084 73.9V64H250.984V116ZM288.676 116H302.176V87.5C302.176 78.5 307.276 74.6 312.976 74.6C319.676 74.6 324.176 78.5 324.176 87.5V116H337.676V87.5C337.676 77.5 341.976 74.6 348.276 74.6C354.376 74.6 358.676 78.5 358.676 87.5V116H372.176V84.2C372.176 71.1 363.576 62.8 352.376 62.8C343.276 62.8 338.276 66.3 334.776 72.6C331.376 66.3 325.176 62.8 317.876 62.8C309.876 62.8 304.676 65.8 301.976 71.6V64H288.676V116ZM413.591 117.3C427.891 117.3 439.291 105.2 439.291 90.2C439.291 75.2 427.891 62.9 413.591 62.9C404.691 62.9 399.991 66.5 397.191 72V43H383.691V116H396.791V107.5C399.591 113.4 404.291 117.3 413.591 117.3ZM396.791 90.2C396.791 82.1 402.491 75.1 411.391 75.1C419.991 75.1 425.791 82 425.791 90.1C425.791 98 419.991 105.1 411.391 105.1C402.491 105.1 396.791 98.3 396.791 90.2ZM447.313 116H460.813V89.4C460.813 80.7 466.813 75.5 474.613 75.5H476.513V62.8C467.513 62.3 462.213 66.4 460.413 73.9V64H447.313V116ZM485.004 116H498.504V64H485.004V116ZM483.604 51.7C483.604 56.1 487.104 59.7 491.704 59.7C496.404 59.7 499.804 56.2 499.804 51.7C499.804 47.4 496.404 43.8 491.704 43.8C487.104 43.8 483.604 47.4 483.604 51.7ZM531.288 117.3C541.488 117.3 548.688 113.6 553.588 107.3L543.788 98.8C541.088 102.4 537.688 105 532.488 105C523.888 105 517.988 98.1 517.988 90C517.988 81.9 523.588 75 532.188 75C536.788 75 540.788 77.3 543.188 80.9L553.588 72.4C549.188 66.3 541.488 62.6 531.988 62.7C516.088 62.8 504.488 74.9 504.488 90C504.488 105.1 516.388 117.3 531.288 117.3ZM593.33 116H611.23L586.63 88.2L611.13 64H591.93L572.43 85V43H558.93V116H572.43V91.3L593.33 116ZM633.562 117.3C645.062 117.3 653.762 110.1 653.762 100.5C653.762 92.7 650.262 87.1 635.162 83.2C628.962 81.6 628.162 80 628.162 78.2C628.162 75 630.962 73.6 634.662 73.6C638.162 73.6 641.362 75.2 643.862 79.2L653.662 71.7C648.362 64.8 642.762 62.7 634.362 62.7C622.162 62.7 614.962 69.5 614.962 78.6C614.962 85.2 617.062 91.5 630.962 94.8C639.162 96.7 640.462 98.2 640.462 100.9C640.462 104 637.862 106.3 633.262 106.3C628.862 106.3 624.862 104.2 621.062 99.9L611.962 108.2C617.662 114.3 624.762 117.3 633.562 117.3Z" fill="#F1F5F9"/>
+<path d="M0 98.6416H25.3585V111.321C25.3585 118.323 19.6818 124 12.6792 124V124C5.67669 124 0 118.323 0 111.321V98.6416Z" fill="url(#paint0_linear_2626_5860)"/>
+<path d="M0 69.3208H50.717C57.7195 69.3208 63.3962 74.9975 63.3962 82V82C63.3962 89.0026 57.7195 94.6793 50.717 94.6793H0V69.3208Z" fill="url(#paint1_linear_2626_5860)"/>
+<path d="M0 60C0 48.9543 8.9543 40 20 40H50.717C57.7195 40 63.3962 45.6767 63.3962 52.6792V52.6792C63.3962 59.6818 57.7195 65.3585 50.717 65.3585H0V60Z" fill="url(#paint2_linear_2626_5860)"/>
+<mask id="mask0_2626_5860" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="40" width="64" height="84">
+<path d="M0 98.6416H25.3585V111.321C25.3585 118.323 19.6818 124 12.6792 124V124C5.67669 124 0 118.323 0 111.321V98.6416Z" fill="url(#paint3_linear_2626_5860)"/>
+<path d="M0 69.3208H50.717C57.7195 69.3208 63.3962 74.9975 63.3962 82V82C63.3962 89.0026 57.7195 94.6793 50.717 94.6793H0V69.3208Z" fill="url(#paint4_linear_2626_5860)"/>
+<path d="M0 60C0 48.9543 8.9543 40 20 40H50.717C57.7195 40 63.3962 45.6767 63.3962 52.6792V52.6792C63.3962 59.6818 57.7195 65.3585 50.717 65.3585H0V60Z" fill="url(#paint5_linear_2626_5860)"/>
+</mask>
+<g mask="url(#mask0_2626_5860)">
+<g filter="url(#filter0_d_2626_5860)">
+<mask id="mask1_2626_5860" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="40" width="64" height="84">
+<path d="M0 98.6416H25.3585V111.321C25.3585 118.323 19.6818 124 12.6792 124V124C5.67669 124 0 118.323 0 111.321V98.6416Z" fill="black" fill-opacity="0.1"/>
+<path d="M0 60C0 48.9543 8.9543 40 20 40H50.717C57.7195 40 63.3962 45.6767 63.3962 52.6792V52.6792C63.3962 59.6818 57.7195 65.3585 50.717 65.3585H0V60Z" fill="black" fill-opacity="0.1"/>
+<path d="M0 69.3208H50.717C57.7195 69.3208 63.3962 74.9975 63.3962 82V82C63.3962 89.0026 57.7195 94.6793 50.717 94.6793H0V69.3208Z" fill="black" fill-opacity="0.1"/>
+</mask>
+<g mask="url(#mask1_2626_5860)">
+<path d="M1.33026 18.158C11.2638 8.46307 36.4526 18.158 36.4526 18.158H1.33026C-1.10954 20.5391 -2.62906 24.09 -2.62906 29.2415C-2.62906 55.3672 25.6715 64.8676 25.6715 83.0764C25.6715 100.901 -1.4485 111.898 -2.59186 136.119H36.4526C36.4526 136.119 -2.62906 163.037 -2.62906 137.703C-2.62906 137.169 -2.61648 136.641 -2.59186 136.119H-19.8115L-16.4424 18.158H1.33026Z" fill="black" fill-opacity="0.1"/>
+</g>
+</g>
+<g filter="url(#filter1_f_2626_5860)">
+<circle cx="-7.92441" cy="112.906" r="23.7736" fill="#00C4B8"/>
+</g>
+<g filter="url(#filter2_f_2626_5860)">
+<circle cx="-7.92441" cy="52.6793" r="23.7736" fill="#00C4B8"/>
+</g>
+</g>
+<line x1="102.75" y1="38" x2="102.75" y2="125" stroke="#475569" stroke-width="1.5"/>
+<defs>
+<filter id="filter0_d_2626_5860" x="-2" y="28" width="60.4526" height="108" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="10"/>
+<feGaussianBlur stdDeviation="6"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2626_5860"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2626_5860" result="shape"/>
+</filter>
+<filter id="filter1_f_2626_5860" x="-51.698" y="69.1321" width="87.5471" height="87.5471" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur_2626_5860"/>
+</filter>
+<filter id="filter2_f_2626_5860" x="-51.698" y="8.90576" width="87.5471" height="87.5471" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur_2626_5860"/>
+</filter>
+<linearGradient id="paint0_linear_2626_5860" x1="25.4688" y1="110.861" x2="-0.00218275" y2="110.964" gradientUnits="userSpaceOnUse">
+<stop stop-color="#00E6CA"/>
+<stop offset="1" stop-color="#00C4B8"/>
+</linearGradient>
+<linearGradient id="paint1_linear_2626_5860" x1="63.6719" y1="81.5407" x2="7.75704e-09" y2="82.1838" gradientUnits="userSpaceOnUse">
+<stop stop-color="#00E6CA"/>
+<stop offset="1" stop-color="#00C4B8"/>
+</linearGradient>
+<linearGradient id="paint2_linear_2626_5860" x1="63.6719" y1="52.2199" x2="7.75704e-09" y2="52.863" gradientUnits="userSpaceOnUse">
+<stop stop-color="#00E6CA"/>
+<stop offset="1" stop-color="#00C4B8"/>
+</linearGradient>
+<linearGradient id="paint3_linear_2626_5860" x1="25.4688" y1="110.861" x2="-0.00218275" y2="110.964" gradientUnits="userSpaceOnUse">
+<stop stop-color="#00FFE1"/>
+<stop offset="1" stop-color="#01E0C6"/>
+</linearGradient>
+<linearGradient id="paint4_linear_2626_5860" x1="63.6719" y1="81.5407" x2="7.75704e-09" y2="82.1838" gradientUnits="userSpaceOnUse">
+<stop stop-color="#00FFE1"/>
+<stop offset="1" stop-color="#01E0C6"/>
+</linearGradient>
+<linearGradient id="paint5_linear_2626_5860" x1="63.6719" y1="52.2199" x2="7.75704e-09" y2="52.863" gradientUnits="userSpaceOnUse">
+<stop stop-color="#00FFE1"/>
+<stop offset="1" stop-color="#01E0C6"/>
+</linearGradient>
+</defs>
+</svg>

apps/formbricks-com/images/logo/footerlogo.svg

@@ -0,0 +1,76 @@
+<svg width="725" height="150" viewBox="0 0 725 150" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M143 116H157V87.4H183.6V75H157V58.6H184.1V46H143V116ZM217.309 117.3C233.409 117.3 245.009 105.1 245.009 90.1C245.009 75.1 233.409 62.8 217.309 62.8C201.209 62.8 189.609 75.1 189.609 90.1C189.609 105.1 201.209 117.3 217.309 117.3ZM203.109 90.1C203.109 82 208.709 75.1 217.309 75.1C225.909 75.1 231.509 82 231.509 90.1C231.509 98.2 225.909 105 217.309 105C208.709 105 203.109 98.2 203.109 90.1ZM250.984 116H264.484V89.4C264.484 80.7 270.484 75.5 278.284 75.5H280.184V62.8C271.184 62.3 265.884 66.4 264.084 73.9V64H250.984V116ZM288.676 116H302.176V87.5C302.176 78.5 307.276 74.6 312.976 74.6C319.676 74.6 324.176 78.5 324.176 87.5V116H337.676V87.5C337.676 77.5 341.976 74.6 348.276 74.6C354.376 74.6 358.676 78.5 358.676 87.5V116H372.176V84.2C372.176 71.1 363.576 62.8 352.376 62.8C343.276 62.8 338.276 66.3 334.776 72.6C331.376 66.3 325.176 62.8 317.876 62.8C309.876 62.8 304.676 65.8 301.976 71.6V64H288.676V116ZM413.591 117.3C427.891 117.3 439.291 105.2 439.291 90.2C439.291 75.2 427.891 62.9 413.591 62.9C404.691 62.9 399.991 66.5 397.191 72V43H383.691V116H396.791V107.5C399.591 113.4 404.291 117.3 413.591 117.3ZM396.791 90.2C396.791 82.1 402.491 75.1 411.391 75.1C419.991 75.1 425.791 82 425.791 90.1C425.791 98 419.991 105.1 411.391 105.1C402.491 105.1 396.791 98.3 396.791 90.2ZM447.313 116H460.813V89.4C460.813 80.7 466.813 75.5 474.613 75.5H476.513V62.8C467.513 62.3 462.213 66.4 460.413 73.9V64H447.313V116ZM485.004 116H498.504V64H485.004V116ZM483.604 51.7C483.604 56.1 487.104 59.7 491.704 59.7C496.404 59.7 499.804 56.2 499.804 51.7C499.804 47.4 496.404 43.8 491.704 43.8C487.104 43.8 483.604 47.4 483.604 51.7ZM531.288 117.3C541.488 117.3 548.688 113.6 553.588 107.3L543.788 98.8C541.088 102.4 537.688 105 532.488 105C523.888 105 517.988 98.1 517.988 90C517.988 81.9 523.588 75 532.188 75C536.788 75 540.788 77.3 543.188 80.9L553.588 72.4C549.188 66.3 541.488 62.6 531.988 62.7C516.088 62.8 504.488 74.9 504.488 90C504.488 105.1 516.388 117.3 531.288 117.3ZM593.33 116H611.23L586.63 88.2L611.13 64H591.93L572.43 85V43H558.93V116H572.43V91.3L593.33 116ZM633.562 117.3C645.062 117.3 653.762 110.1 653.762 100.5C653.762 92.7 650.262 87.1 635.162 83.2C628.962 81.6 628.162 80 628.162 78.2C628.162 75 630.962 73.6 634.662 73.6C638.162 73.6 641.362 75.2 643.862 79.2L653.662 71.7C648.362 64.8 642.762 62.7 634.362 62.7C622.162 62.7 614.962 69.5 614.962 78.6C614.962 85.2 617.062 91.5 630.962 94.8C639.162 96.7 640.462 98.2 640.462 100.9C640.462 104 637.862 106.3 633.262 106.3C628.862 106.3 624.862 104.2 621.062 99.9L611.962 108.2C617.662 114.3 624.762 117.3 633.562 117.3Z" fill="#0F172A"/>
+<path d="M0 98.6416H25.3585V111.321C25.3585 118.323 19.6818 124 12.6792 124V124C5.67669 124 0 118.323 0 111.321V98.6416Z" fill="url(#paint0_linear_2625_5904)"/>
+<path d="M0 69.3208H50.717C57.7195 69.3208 63.3962 74.9975 63.3962 82V82C63.3962 89.0026 57.7195 94.6793 50.717 94.6793H0V69.3208Z" fill="url(#paint1_linear_2625_5904)"/>
+<path d="M0 60C0 48.9543 8.9543 40 20 40H50.717C57.7195 40 63.3962 45.6767 63.3962 52.6792V52.6792C63.3962 59.6818 57.7195 65.3585 50.717 65.3585H0V60Z" fill="url(#paint2_linear_2625_5904)"/>
+<mask id="mask0_2625_5904" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="40" width="64" height="84">
+<path d="M0 98.6416H25.3585V111.321C25.3585 118.323 19.6818 124 12.6792 124V124C5.67669 124 0 118.323 0 111.321V98.6416Z" fill="url(#paint3_linear_2625_5904)"/>
+<path d="M0 69.3208H50.717C57.7195 69.3208 63.3962 74.9975 63.3962 82V82C63.3962 89.0026 57.7195 94.6793 50.717 94.6793H0V69.3208Z" fill="url(#paint4_linear_2625_5904)"/>
+<path d="M0 60C0 48.9543 8.9543 40 20 40H50.717C57.7195 40 63.3962 45.6767 63.3962 52.6792V52.6792C63.3962 59.6818 57.7195 65.3585 50.717 65.3585H0V60Z" fill="url(#paint5_linear_2625_5904)"/>
+</mask>
+<g mask="url(#mask0_2625_5904)">
+<g filter="url(#filter0_d_2625_5904)">
+<mask id="mask1_2625_5904" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="40" width="64" height="84">
+<path d="M0 98.6416H25.3585V111.321C25.3585 118.323 19.6818 124 12.6792 124V124C5.67669 124 0 118.323 0 111.321V98.6416Z" fill="black" fill-opacity="0.1"/>
+<path d="M0 60C0 48.9543 8.9543 40 20 40H50.717C57.7195 40 63.3962 45.6767 63.3962 52.6792V52.6792C63.3962 59.6818 57.7195 65.3585 50.717 65.3585H0V60Z" fill="black" fill-opacity="0.1"/>
+<path d="M0 69.3208H50.717C57.7195 69.3208 63.3962 74.9975 63.3962 82V82C63.3962 89.0026 57.7195 94.6793 50.717 94.6793H0V69.3208Z" fill="black" fill-opacity="0.1"/>
+</mask>
+<g mask="url(#mask1_2625_5904)">
+<path d="M1.33026 18.158C11.2638 8.46307 36.4526 18.158 36.4526 18.158H1.33026C-1.10954 20.5391 -2.62906 24.09 -2.62906 29.2415C-2.62906 55.3672 25.6715 64.8676 25.6715 83.0764C25.6715 100.901 -1.4485 111.898 -2.59186 136.119H36.4526C36.4526 136.119 -2.62906 163.037 -2.62906 137.703C-2.62906 137.169 -2.61648 136.641 -2.59186 136.119H-19.8115L-16.4424 18.158H1.33026Z" fill="black" fill-opacity="0.1"/>
+</g>
+</g>
+<g filter="url(#filter1_f_2625_5904)">
+<circle cx="-7.92441" cy="112.906" r="23.7736" fill="#00C4B8"/>
+</g>
+<g filter="url(#filter2_f_2625_5904)">
+<circle cx="-7.92441" cy="52.6793" r="23.7736" fill="#00C4B8"/>
+</g>
+</g>
+<line x1="102.75" y1="38" x2="102.75" y2="125" stroke="#CBD5E1" stroke-width="1.5"/>
+<defs>
+<filter id="filter0_d_2625_5904" x="-2" y="28" width="60.4526" height="108" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="10"/>
+<feGaussianBlur stdDeviation="6"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2625_5904"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2625_5904" result="shape"/>
+</filter>
+<filter id="filter1_f_2625_5904" x="-51.698" y="69.1321" width="87.5471" height="87.5471" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur_2625_5904"/>
+</filter>
+<filter id="filter2_f_2625_5904" x="-51.698" y="8.90576" width="87.5471" height="87.5471" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur_2625_5904"/>
+</filter>
+<linearGradient id="paint0_linear_2625_5904" x1="25.4688" y1="110.861" x2="-0.00218275" y2="110.964" gradientUnits="userSpaceOnUse">
+<stop stop-color="#00E6CA"/>
+<stop offset="1" stop-color="#00C4B8"/>
+</linearGradient>
+<linearGradient id="paint1_linear_2625_5904" x1="63.6719" y1="81.5407" x2="7.75704e-09" y2="82.1838" gradientUnits="userSpaceOnUse">
+<stop stop-color="#00E6CA"/>
+<stop offset="1" stop-color="#00C4B8"/>
+</linearGradient>
+<linearGradient id="paint2_linear_2625_5904" x1="63.6719" y1="52.2199" x2="7.75704e-09" y2="52.863" gradientUnits="userSpaceOnUse">
+<stop stop-color="#00E6CA"/>
+<stop offset="1" stop-color="#00C4B8"/>
+</linearGradient>
+<linearGradient id="paint3_linear_2625_5904" x1="25.4688" y1="110.861" x2="-0.00218275" y2="110.964" gradientUnits="userSpaceOnUse">
+<stop stop-color="#00FFE1"/>
+<stop offset="1" stop-color="#01E0C6"/>
+</linearGradient>
+<linearGradient id="paint4_linear_2625_5904" x1="63.6719" y1="81.5407" x2="7.75704e-09" y2="82.1838" gradientUnits="userSpaceOnUse">
+<stop stop-color="#00FFE1"/>
+<stop offset="1" stop-color="#01E0C6"/>
+</linearGradient>
+<linearGradient id="paint5_linear_2625_5904" x1="63.6719" y1="52.2199" x2="7.75704e-09" y2="52.863" gradientUnits="userSpaceOnUse">
+<stop stop-color="#00FFE1"/>
+<stop offset="1" stop-color="#01E0C6"/>
+</linearGradient>
+</defs>
+</svg>

apps/formbricks-com/images/logo/logo.svg

@@ -0,0 +1,10 @@
+<svg width="523" height="150" viewBox="0 0 523 150" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2598_5862)">
+<path d="M5 110H19V81.4H45.6V69H19V52.6H46.1V40H5V110ZM79.3094 111.3C95.4094 111.3 107.009 99.1 107.009 84.1C107.009 69.1 95.4094 56.8 79.3094 56.8C63.2094 56.8 51.6094 69.1 51.6094 84.1C51.6094 99.1 63.2094 111.3 79.3094 111.3ZM65.1094 84.1C65.1094 76 70.7094 69.1 79.3094 69.1C87.9094 69.1 93.5094 76 93.5094 84.1C93.5094 92.2 87.9094 99 79.3094 99C70.7094 99 65.1094 92.2 65.1094 84.1ZM112.984 110H126.484V83.4C126.484 74.7 132.484 69.5 140.284 69.5H142.184V56.8C133.184 56.3 127.884 60.4 126.084 67.9V58H112.984V110ZM150.676 110H164.176V81.5C164.176 72.5 169.276 68.6 174.976 68.6C181.676 68.6 186.176 72.5 186.176 81.5V110H199.676V81.5C199.676 71.5 203.976 68.6 210.276 68.6C216.376 68.6 220.676 72.5 220.676 81.5V110H234.176V78.2C234.176 65.1 225.576 56.8 214.376 56.8C205.276 56.8 200.276 60.3 196.776 66.6C193.376 60.3 187.176 56.8 179.876 56.8C171.876 56.8 166.676 59.8 163.976 65.6V58H150.676V110ZM275.591 111.3C289.891 111.3 301.291 99.2 301.291 84.2C301.291 69.2 289.891 56.9 275.591 56.9C266.691 56.9 261.991 60.5 259.191 66V37H245.691V110H258.791V101.5C261.591 107.4 266.291 111.3 275.591 111.3ZM258.791 84.2C258.791 76.1 264.491 69.1 273.391 69.1C281.991 69.1 287.791 76 287.791 84.1C287.791 92 281.991 99.1 273.391 99.1C264.491 99.1 258.791 92.3 258.791 84.2ZM309.313 110H322.813V83.4C322.813 74.7 328.813 69.5 336.613 69.5H338.513V56.8C329.513 56.3 324.213 60.4 322.413 67.9V58H309.313V110ZM347.004 110H360.504V58H347.004V110ZM345.604 45.7C345.604 50.1 349.104 53.7 353.704 53.7C358.404 53.7 361.804 50.2 361.804 45.7C361.804 41.4 358.404 37.8 353.704 37.8C349.104 37.8 345.604 41.4 345.604 45.7ZM393.288 111.3C403.488 111.3 410.688 107.6 415.588 101.3L405.788 92.8C403.088 96.4 399.688 99 394.488 99C385.888 99 379.988 92.1 379.988 84C379.988 75.9 385.588 69 394.188 69C398.788 69 402.788 71.3 405.188 74.9L415.588 66.4C411.188 60.3 403.488 56.6 393.988 56.7C378.088 56.8 366.488 68.9 366.488 84C366.488 99.1 378.388 111.3 393.288 111.3ZM455.33 110H473.23L448.63 82.2L473.13 58H453.93L434.43 79V37H420.93V110H434.43V85.3L455.33 110ZM495.562 111.3C507.062 111.3 515.762 104.1 515.762 94.5C515.762 86.7 512.262 81.1 497.162 77.2C490.962 75.6 490.162 74 490.162 72.2C490.162 69 492.962 67.6 496.662 67.6C500.162 67.6 503.362 69.2 505.862 73.2L515.662 65.7C510.362 58.8 504.762 56.7 496.362 56.7C484.162 56.7 476.962 63.5 476.962 72.6C476.962 79.2 479.062 85.5 492.962 88.8C501.162 90.7 502.462 92.2 502.462 94.9C502.462 98 499.862 100.3 495.262 100.3C490.862 100.3 486.862 98.2 483.062 93.9L473.962 102.2C479.662 108.3 486.762 111.3 495.562 111.3Z" fill="#0F172A"/>
+</g>
+<defs>
+<clipPath id="clip0_2598_5862">
+<rect width="523" height="150" fill="white"/>
+</clipPath>
+</defs>
+</svg>

apps/formbricks-com/images/logo/logo_dark.svg

@@ -0,0 +1,10 @@
+<svg width="523" height="150" viewBox="0 0 523 150" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2625_5902)">
+<path d="M5 110H19V81.4H45.6V69H19V52.6H46.1V40H5V110ZM79.3094 111.3C95.4094 111.3 107.009 99.1 107.009 84.1C107.009 69.1 95.4094 56.8 79.3094 56.8C63.2094 56.8 51.6094 69.1 51.6094 84.1C51.6094 99.1 63.2094 111.3 79.3094 111.3ZM65.1094 84.1C65.1094 76 70.7094 69.1 79.3094 69.1C87.9094 69.1 93.5094 76 93.5094 84.1C93.5094 92.2 87.9094 99 79.3094 99C70.7094 99 65.1094 92.2 65.1094 84.1ZM112.984 110H126.484V83.4C126.484 74.7 132.484 69.5 140.284 69.5H142.184V56.8C133.184 56.3 127.884 60.4 126.084 67.9V58H112.984V110ZM150.676 110H164.176V81.5C164.176 72.5 169.276 68.6 174.976 68.6C181.676 68.6 186.176 72.5 186.176 81.5V110H199.676V81.5C199.676 71.5 203.976 68.6 210.276 68.6C216.376 68.6 220.676 72.5 220.676 81.5V110H234.176V78.2C234.176 65.1 225.576 56.8 214.376 56.8C205.276 56.8 200.276 60.3 196.776 66.6C193.376 60.3 187.176 56.8 179.876 56.8C171.876 56.8 166.676 59.8 163.976 65.6V58H150.676V110ZM275.591 111.3C289.891 111.3 301.291 99.2 301.291 84.2C301.291 69.2 289.891 56.9 275.591 56.9C266.691 56.9 261.991 60.5 259.191 66V37H245.691V110H258.791V101.5C261.591 107.4 266.291 111.3 275.591 111.3ZM258.791 84.2C258.791 76.1 264.491 69.1 273.391 69.1C281.991 69.1 287.791 76 287.791 84.1C287.791 92 281.991 99.1 273.391 99.1C264.491 99.1 258.791 92.3 258.791 84.2ZM309.313 110H322.813V83.4C322.813 74.7 328.813 69.5 336.613 69.5H338.513V56.8C329.513 56.3 324.213 60.4 322.413 67.9V58H309.313V110ZM347.004 110H360.504V58H347.004V110ZM345.604 45.7C345.604 50.1 349.104 53.7 353.704 53.7C358.404 53.7 361.804 50.2 361.804 45.7C361.804 41.4 358.404 37.8 353.704 37.8C349.104 37.8 345.604 41.4 345.604 45.7ZM393.288 111.3C403.488 111.3 410.688 107.6 415.588 101.3L405.788 92.8C403.088 96.4 399.688 99 394.488 99C385.888 99 379.988 92.1 379.988 84C379.988 75.9 385.588 69 394.188 69C398.788 69 402.788 71.3 405.188 74.9L415.588 66.4C411.188 60.3 403.488 56.6 393.988 56.7C378.088 56.8 366.488 68.9 366.488 84C366.488 99.1 378.388 111.3 393.288 111.3ZM455.33 110H473.23L448.63 82.2L473.13 58H453.93L434.43 79V37H420.93V110H434.43V85.3L455.33 110ZM495.562 111.3C507.062 111.3 515.762 104.1 515.762 94.5C515.762 86.7 512.262 81.1 497.162 77.2C490.962 75.6 490.162 74 490.162 72.2C490.162 69 492.962 67.6 496.662 67.6C500.162 67.6 503.362 69.2 505.862 73.2L515.662 65.7C510.362 58.8 504.762 56.7 496.362 56.7C484.162 56.7 476.962 63.5 476.962 72.6C476.962 79.2 479.062 85.5 492.962 88.8C501.162 90.7 502.462 92.2 502.462 94.9C502.462 98 499.862 100.3 495.262 100.3C490.862 100.3 486.862 98.2 483.062 93.9L473.962 102.2C479.662 108.3 486.762 111.3 495.562 111.3Z" fill="#F1F5F9"/>
+</g>
+<defs>
+<clipPath id="clip0_2625_5902">
+<rect width="523" height="150" fill="white"/>
+</clipPath>
+</defs>
+</svg>

apps/formbricks-com/images/logo/logomark.svg

@@ -0,0 +1,79 @@
+<svg width="101" height="150" viewBox="0 0 101 150" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2627_5881)">
+<path d="M0 101.547H40.4528V122C40.4528 133.046 31.4985 142 20.4528 142H20C8.9543 142 0 133.046 0 122V101.547Z" fill="url(#paint0_linear_2627_5881)"/>
+<path d="M0 54.7737H81.1321C92.1778 54.7737 101.132 63.728 101.132 74.7737V75.2265C101.132 86.2722 92.1778 95.2265 81.1321 95.2265H0V54.7737Z" fill="url(#paint1_linear_2627_5881)"/>
+<path d="M0 28C0 16.9543 8.95431 8 20 8H81.1321C92.1778 8 101.132 16.9543 101.132 28V28.4528C101.132 39.4985 92.1778 48.4528 81.1321 48.4528H0V28Z" fill="url(#paint2_linear_2627_5881)"/>
+<mask id="mask0_2627_5881" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="8" width="102" height="134">
+<path d="M0 101.547H40.4528V122C40.4528 133.046 31.4985 142 20.4528 142H20C8.9543 142 0 133.046 0 122V101.547Z" fill="url(#paint3_linear_2627_5881)"/>
+<path d="M0 54.7737H81.1321C92.1778 54.7737 101.132 63.728 101.132 74.7737V75.2265C101.132 86.2722 92.1778 95.2265 81.1321 95.2265H0V54.7737Z" fill="url(#paint4_linear_2627_5881)"/>
+<path d="M0 28C0 16.9543 8.95431 8 20 8H81.1321C92.1778 8 101.132 16.9543 101.132 28V28.4528C101.132 39.4985 92.1778 48.4528 81.1321 48.4528H0V28Z" fill="url(#paint5_linear_2627_5881)"/>
+</mask>
+<g mask="url(#mask0_2627_5881)">
+<g filter="url(#filter0_d_2627_5881)">
+<mask id="mask1_2627_5881" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="8" width="102" height="134">
+<path d="M0 101.547H40.4528V122C40.4528 133.046 31.4985 142 20.4528 142H20C8.9543 142 0 133.046 0 122V101.547Z" fill="black" fill-opacity="0.1"/>
+<path d="M0 28C0 16.9543 8.95431 8 20 8H81.1321C92.1778 8 101.132 16.9543 101.132 28V28.4528C101.132 39.4985 92.1778 48.4528 81.1321 48.4528H0V28Z" fill="black" fill-opacity="0.1"/>
+<path d="M0 54.7737H81.1321C92.1778 54.7737 101.132 63.728 101.132 74.7737V75.2265C101.132 86.2722 92.1778 95.2265 81.1321 95.2265H0V54.7737Z" fill="black" fill-opacity="0.1"/>
+</mask>
+<g mask="url(#mask1_2627_5881)">
+<path d="M2.12216 -26.8434C17.9685 -42.3091 58.1507 -26.8434 58.1507 -26.8434H2.12216C-1.76989 -23.0449 -4.19388 -17.3804 -4.19388 -9.16251C-4.19388 32.5141 40.9522 47.6695 40.9522 76.7169C40.9522 105.152 -2.3106 122.695 -4.13455 161.333H58.1507C58.1507 161.333 -4.19388 204.273 -4.19388 163.859C-4.19388 163.007 -4.17382 162.165 -4.13455 161.333H-31.604L-26.2295 -26.8434H2.12216Z" fill="black" fill-opacity="0.1"/>
+</g>
+</g>
+<g filter="url(#filter1_f_2627_5881)">
+<circle cx="-12.6414" cy="124.302" r="37.9245" fill="#00C4B8"/>
+</g>
+<g filter="url(#filter2_f_2627_5881)">
+<circle cx="-12.6414" cy="28.2265" r="37.9245" fill="#00C4B8"/>
+</g>
+</g>
+</g>
+<defs>
+<filter id="filter0_d_2627_5881" x="-2" y="-4" width="82.1506" height="158" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="10"/>
+<feGaussianBlur stdDeviation="6"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2627_5881"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2627_5881" result="shape"/>
+</filter>
+<filter id="filter1_f_2627_5881" x="-70.5659" y="66.3774" width="115.849" height="115.849" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur_2627_5881"/>
+</filter>
+<filter id="filter2_f_2627_5881" x="-70.5659" y="-29.698" width="115.849" height="115.849" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur_2627_5881"/>
+</filter>
+<linearGradient id="paint0_linear_2627_5881" x1="40.6287" y1="121.041" x2="-0.003482" y2="121.205" gradientUnits="userSpaceOnUse">
+<stop stop-color="#00E6CA"/>
+<stop offset="1" stop-color="#00C4B8"/>
+</linearGradient>
+<linearGradient id="paint1_linear_2627_5881" x1="101.572" y1="74.2673" x2="1.27605e-08" y2="75.2932" gradientUnits="userSpaceOnUse">
+<stop stop-color="#00E6CA"/>
+<stop offset="1" stop-color="#00C4B8"/>
+</linearGradient>
+<linearGradient id="paint2_linear_2627_5881" x1="101.572" y1="27.4936" x2="1.27605e-08" y2="28.5195" gradientUnits="userSpaceOnUse">
+<stop stop-color="#00E6CA"/>
+<stop offset="1" stop-color="#00C4B8"/>
+</linearGradient>
+<linearGradient id="paint3_linear_2627_5881" x1="40.6287" y1="121.041" x2="-0.003482" y2="121.205" gradientUnits="userSpaceOnUse">
+<stop stop-color="#00FFE1"/>
+<stop offset="1" stop-color="#01E0C6"/>
+</linearGradient>
+<linearGradient id="paint4_linear_2627_5881" x1="101.572" y1="74.2673" x2="1.27605e-08" y2="75.2932" gradientUnits="userSpaceOnUse">
+<stop stop-color="#00FFE1"/>
+<stop offset="1" stop-color="#01E0C6"/>
+</linearGradient>
+<linearGradient id="paint5_linear_2627_5881" x1="101.572" y1="27.4936" x2="1.27605e-08" y2="28.5195" gradientUnits="userSpaceOnUse">
+<stop stop-color="#00FFE1"/>
+<stop offset="1" stop-color="#01E0C6"/>
+</linearGradient>
+<clipPath id="clip0_2627_5881">
+<rect width="101" height="150" fill="white"/>
+</clipPath>
+</defs>
+</svg>

apps/formbricks-com/images/logo_dark.svg

@@ -1,23 +0,0 @@
-<svg width="829" height="180" viewBox="0 0 829 180" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M120.077 66.7213V71.9731H109.123V89.229H120.077V150H140.334V89.229H156.24V71.9731H140.334V67.0214C140.334 60.8693 143.185 57.7182 149.187 57.7182H154.439V40.4622H146.036C130.281 40.4622 120.077 50.9658 120.077 66.7213ZM197.778 151.951C221.936 151.951 239.342 133.644 239.342 111.137C239.342 88.6288 221.936 70.1725 197.778 70.1725C173.62 70.1725 156.214 88.6288 156.214 111.137C156.214 133.644 173.62 151.951 197.778 151.951ZM176.471 111.137C176.471 98.9824 184.874 88.6288 197.778 88.6288C210.683 88.6288 219.085 98.9824 219.085 111.137C219.085 123.291 210.683 133.494 197.778 133.494C184.874 133.494 176.471 123.291 176.471 111.137ZM248.308 150H268.565V110.086C268.565 97.0317 277.568 89.229 289.272 89.229H292.123V70.1725C278.618 69.4222 270.666 75.5743 267.965 86.8282V71.9731H248.308V150ZM298.863 150H319.12V107.235C319.12 93.7306 326.772 87.8786 335.325 87.8786C345.379 87.8786 352.131 93.7306 352.131 107.235V150H372.388V107.235C372.388 92.2301 378.84 87.8786 388.293 87.8786C397.447 87.8786 403.899 93.7306 403.899 107.235V150H424.156V102.284C424.156 82.6268 411.251 70.1725 394.446 70.1725C380.791 70.1725 373.288 75.4243 368.036 84.8775C362.935 75.4243 353.631 70.1725 342.678 70.1725C330.674 70.1725 322.871 74.674 318.819 83.377V71.9731H298.863V150ZM480.299 151.951C501.756 151.951 518.862 133.794 518.862 111.287C518.862 88.7789 501.756 70.3225 480.299 70.3225C466.944 70.3225 459.892 75.7244 455.69 83.9772V40.4622H435.433V150H455.09V137.246C459.291 146.099 466.344 151.951 480.299 151.951ZM455.09 111.287C455.09 99.1325 463.643 88.6288 476.997 88.6288C489.902 88.6288 498.605 98.9824 498.605 111.137C498.605 122.991 489.902 133.644 476.997 133.644C463.643 133.644 455.09 123.441 455.09 111.287ZM527.897 150H548.154V110.086C548.154 97.0317 557.157 89.229 568.861 89.229H571.712V70.1725C558.207 69.4222 550.254 75.5743 547.553 86.8282V71.9731H527.897V150ZM578.451 150H598.708V71.9731H578.451V150ZM576.35 53.5167C576.35 60.119 581.602 65.5209 588.505 65.5209C595.557 65.5209 600.659 60.2691 600.659 53.5167C600.659 47.0645 595.557 41.6626 588.505 41.6626C581.602 41.6626 576.35 47.0645 576.35 53.5167ZM647.902 151.951C663.207 151.951 674.011 146.399 681.363 136.945L666.658 124.191C662.607 129.593 657.505 133.494 649.702 133.494C636.798 133.494 627.945 123.141 627.945 110.987C627.945 98.8324 636.348 88.4788 649.252 88.4788C656.155 88.4788 662.157 91.93 665.758 97.3318L681.363 84.5774C674.761 75.4243 663.207 69.8724 648.952 70.0224C625.094 70.1725 607.688 88.3287 607.688 110.987C607.688 133.644 625.544 151.951 647.902 151.951ZM740.996 150H767.855L730.942 108.286L767.705 71.9731H738.895L709.635 103.484V40.4622H689.378V150H709.635V112.937L740.996 150ZM795.363 151.951C812.619 151.951 825.673 141.147 825.673 126.742C825.673 115.038 820.421 106.635 797.763 100.783C788.46 98.3822 787.26 95.9814 787.26 93.2804C787.26 88.4788 791.461 86.3781 797.013 86.3781C802.265 86.3781 807.067 88.7789 810.818 94.781L825.523 83.5271C817.57 73.1735 809.167 70.0224 796.563 70.0224C778.257 70.0224 767.453 80.2259 767.453 93.8806C767.453 103.784 770.604 113.237 791.461 118.189C803.766 121.04 805.716 123.291 805.716 127.342C805.716 131.994 801.815 135.445 794.912 135.445C788.31 135.445 782.308 132.294 776.606 125.842L762.951 138.296C771.504 147.449 782.158 151.951 795.363 151.951Z" fill="#EEF3F7"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M17.0536 43.7753C17.0536 42.4449 17.0536 41.7797 17.3166 41.2734C17.5382 40.8467 17.8861 40.4988 18.3128 40.2772C18.8191 40.0142 19.4843 40.0142 20.8148 40.0142H32.9017C34.2321 40.0142 34.8973 40.0142 35.4037 40.2772C35.8303 40.4988 36.1782 40.8467 36.3999 41.2734C36.6629 41.7797 36.6629 42.4449 36.6629 43.7753V46.3482C36.6629 46.8016 36.6629 47.1778 36.6525 47.4967H47.7532C47.7427 47.1778 47.7427 46.8016 47.7427 46.3482V43.7753C47.7427 42.4449 47.7427 41.7797 48.0058 41.2734C48.2274 40.8467 48.5753 40.4988 49.002 40.2772C49.5083 40.0142 50.1735 40.0142 51.5039 40.0142H63.5909C64.9213 40.0142 65.5865 40.0142 66.0928 40.2772C66.5195 40.4988 66.8674 40.8467 67.0891 41.2734C67.3521 41.7797 67.3521 42.4449 67.3521 43.7753V46.3482C67.3521 46.8016 67.3521 47.1778 67.3417 47.4967H74.0188C79.1796 47.4967 83.3633 51.6804 83.3633 56.8413V72.0235C83.3633 77.1844 79.1796 81.3681 74.0188 81.3681H9.34456C4.1837 81.3681 0 77.1844 0 72.0235V56.8413C0 51.6804 4.1837 47.4967 9.34455 47.4967H17.064C17.0536 47.1778 17.0536 46.8016 17.0536 46.3482V43.7753Z" fill="#00E5CA"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M17.0536 43.7753C17.0536 42.4449 17.0536 41.7797 17.3166 41.2734C17.5382 40.8467 17.8861 40.4988 18.3128 40.2772C18.8191 40.0142 19.4843 40.0142 20.8148 40.0142H32.9017C34.2321 40.0142 34.8973 40.0142 35.4037 40.2772C35.8303 40.4988 36.1782 40.8467 36.3999 41.2734C36.6629 41.7797 36.6629 42.4449 36.6629 43.7753V46.3482C36.6629 46.8016 36.6629 47.1778 36.6525 47.4967H47.7532C47.7427 47.1778 47.7427 46.8016 47.7427 46.3482V43.7753C47.7427 42.4449 47.7427 41.7797 48.0058 41.2734C48.2274 40.8467 48.5753 40.4988 49.002 40.2772C49.5083 40.0142 50.1735 40.0142 51.5039 40.0142H63.5909C64.9213 40.0142 65.5865 40.0142 66.0928 40.2772C66.5195 40.4988 66.8674 40.8467 67.0891 41.2734C67.3521 41.7797 67.3521 42.4449 67.3521 43.7753V46.3482C67.3521 46.8016 67.3521 47.1778 67.3417 47.4967H74.0188C79.1796 47.4967 83.3633 51.6804 83.3633 56.8413V72.0235C83.3633 77.1844 79.1796 81.3681 74.0188 81.3681H9.34456C4.1837 81.3681 0 77.1844 0 72.0235V56.8413C0 51.6804 4.1837 47.4967 9.34455 47.4967H17.064C17.0536 47.1778 17.0536 46.8016 17.0536 46.3482V43.7753Z" fill="url(#paint0_linear_2344_5715)" fill-opacity="0.05"/>
-<path d="M0 90.7132C0 85.5524 4.1837 81.3687 9.34455 81.3687H74.0188C79.1796 81.3687 83.3633 85.5524 83.3633 90.7132V106.836C83.3633 111.997 79.1796 116.181 74.0188 116.181H9.34456C4.1837 116.181 0 111.997 0 106.836V90.7132Z" fill="#D3E3ED"/>
-<path d="M0 90.7132C0 85.5524 4.1837 81.3687 9.34455 81.3687H74.0188C79.1796 81.3687 83.3633 85.5524 83.3633 90.7132V106.836C83.3633 111.997 79.1796 116.181 74.0188 116.181H9.34456C4.1837 116.181 0 111.997 0 106.836V90.7132Z" fill="url(#paint1_linear_2344_5715)" fill-opacity="0.05"/>
-<path d="M0 125.526C0 120.365 4.1837 116.181 9.34455 116.181H74.0188C79.1796 116.181 83.3633 120.365 83.3633 125.526V140.708C83.3633 145.869 79.1796 150.052 74.0188 150.052H9.34456C4.1837 150.052 0 145.869 0 140.708V125.526Z" fill="#8B94A4"/>
-<path d="M0 125.526C0 120.365 4.1837 116.181 9.34455 116.181H74.0188C79.1796 116.181 83.3633 120.365 83.3633 125.526V140.708C83.3633 145.869 79.1796 150.052 74.0188 150.052H9.34456C4.1837 150.052 0 145.869 0 140.708V125.526Z" fill="url(#paint2_linear_2344_5715)" fill-opacity="0.05"/>
-<defs>
-<linearGradient id="paint0_linear_2344_5715" x1="41.6817" y1="41.852" x2="41.6817" y2="81.3681" gradientUnits="userSpaceOnUse">
-<stop/>
-<stop offset="1" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint1_linear_2344_5715" x1="41.6817" y1="81.3687" x2="41.6817" y2="116.181" gradientUnits="userSpaceOnUse">
-<stop/>
-<stop offset="1" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint2_linear_2344_5715" x1="41.6817" y1="116.181" x2="41.6817" y2="150.052" gradientUnits="userSpaceOnUse">
-<stop/>
-<stop offset="1" stop-opacity="0"/>
-</linearGradient>
-</defs>
-</svg>

apps/formbricks-com/images/logomark.svg

@@ -1,22 +0,0 @@
-<svg width="301" height="302" viewBox="0 0 301 302" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M99.2803 43.0414C99.2803 40.2394 99.2803 38.8385 99.8342 37.7721C100.301 36.8735 101.034 36.1408 101.932 35.674C102.999 35.1201 104.4 35.1201 107.201 35.1201H132.845C135.647 35.1201 137.048 35.1201 138.114 35.674C139.013 36.1408 139.746 36.8735 140.212 37.7721C140.766 38.8385 140.766 40.2394 140.766 43.0414V48.5566C140.766 49.5003 140.766 50.2851 140.745 50.9518H164.232C164.211 50.2851 164.211 49.5003 164.211 48.5566V43.0414C164.211 40.2394 164.211 38.8385 164.765 37.7721C165.232 36.8735 165.965 36.1408 166.863 35.674C167.93 35.1201 169.33 35.1201 172.132 35.1201H197.776C200.578 35.1201 201.979 35.1201 203.045 35.674C203.944 36.1408 204.676 36.8735 205.143 37.7721C205.697 38.8385 205.697 40.2394 205.697 43.0414V48.5566C205.697 49.5003 205.697 50.2851 205.676 50.9518H219.89C230.759 50.9518 239.57 59.7628 239.57 70.6318V102.931C239.57 113.8 230.759 122.611 219.89 122.611H82.8842C72.0152 122.611 63.2041 113.8 63.2041 102.931V70.6319C63.2041 59.7628 72.0152 50.9518 82.8842 50.9518H99.3014C99.2803 50.2851 99.2803 49.5003 99.2803 48.5566V43.0414Z" fill="#00E5CA"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M99.2803 43.0414C99.2803 40.2394 99.2803 38.8385 99.8342 37.7721C100.301 36.8735 101.034 36.1408 101.932 35.674C102.999 35.1201 104.4 35.1201 107.201 35.1201H132.845C135.647 35.1201 137.048 35.1201 138.114 35.674C139.013 36.1408 139.746 36.8735 140.212 37.7721C140.766 38.8385 140.766 40.2394 140.766 43.0414V48.5566C140.766 49.5003 140.766 50.2851 140.745 50.9518H164.232C164.211 50.2851 164.211 49.5003 164.211 48.5566V43.0414C164.211 40.2394 164.211 38.8385 164.765 37.7721C165.232 36.8735 165.965 36.1408 166.863 35.674C167.93 35.1201 169.33 35.1201 172.132 35.1201H197.776C200.578 35.1201 201.979 35.1201 203.045 35.674C203.944 36.1408 204.676 36.8735 205.143 37.7721C205.697 38.8385 205.697 40.2394 205.697 43.0414V48.5566C205.697 49.5003 205.697 50.2851 205.676 50.9518H219.89C230.759 50.9518 239.57 59.7628 239.57 70.6318V102.931C239.57 113.8 230.759 122.611 219.89 122.611H82.8842C72.0152 122.611 63.2041 113.8 63.2041 102.931V70.6319C63.2041 59.7628 72.0152 50.9518 82.8842 50.9518H99.3014C99.2803 50.2851 99.2803 49.5003 99.2803 48.5566V43.0414Z" fill="url(#paint0_linear_2240_5955)" fill-opacity="0.05"/>
-<path d="M63.2041 142.291C63.2041 131.422 72.0152 122.611 82.8842 122.611H219.89C230.759 122.611 239.57 131.422 239.57 142.291V176.581C239.57 187.45 230.759 196.261 219.89 196.261H82.8842C72.0152 196.261 63.2041 187.45 63.2041 176.581V142.291Z" fill="#002941"/>
-<path d="M63.2041 142.291C63.2041 131.422 72.0152 122.611 82.8842 122.611H219.89C230.759 122.611 239.57 131.422 239.57 142.291V176.581C239.57 187.45 230.759 196.261 219.89 196.261H82.8842C72.0152 196.261 63.2041 187.45 63.2041 176.581V142.291Z" fill="url(#paint1_linear_2240_5955)" fill-opacity="0.05"/>
-<path d="M63.2041 215.941C63.2041 205.072 72.0152 196.261 82.8842 196.261H219.89C230.759 196.261 239.57 205.072 239.57 215.941V248.24C239.57 259.109 230.759 267.92 219.89 267.92H82.8842C72.0152 267.92 63.2041 259.109 63.2041 248.24V215.941Z" fill="#000A1C"/>
-<path d="M63.2041 215.941C63.2041 205.072 72.0152 196.261 82.8842 196.261H219.89C230.759 196.261 239.57 205.072 239.57 215.941V248.24C239.57 259.109 230.759 267.92 219.89 267.92H82.8842C72.0152 267.92 63.2041 259.109 63.2041 248.24V215.941Z" fill="url(#paint2_linear_2240_5955)" fill-opacity="0.05"/>
-<defs>
-<linearGradient id="paint0_linear_2240_5955" x1="151.387" y1="39.0083" x2="151.387" y2="122.611" gradientUnits="userSpaceOnUse">
-<stop/>
-<stop offset="1" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint1_linear_2240_5955" x1="151.387" y1="122.611" x2="151.387" y2="196.261" gradientUnits="userSpaceOnUse">
-<stop/>
-<stop offset="1" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint2_linear_2240_5955" x1="151.387" y1="196.261" x2="151.387" y2="267.92" gradientUnits="userSpaceOnUse">
-<stop/>
-<stop offset="1" stop-opacity="0"/>
-</linearGradient>
-</defs>
-</svg>

apps/formbricks-com/pages/_document.tsx

@@ -54,7 +54,7 @@ export default function Document() {
         <meta name="msapplication-config" content="/faveicon/browserconfig.xml" />
         <meta name="theme-color" content="#ffffff" />
       </Head>
-      <body className="dark:bg-blue bg-blue-100">
+      <body className="bg-slate-100 dark:bg-slate-900">
         <Main />
         <NextScript />
       </body>

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

@@ -3,6 +3,7 @@ import { Card } from "@/components/shared/Card";
 import Layout from "@/components/shared/Layout";
 import { getAllArticles } from "@/lib/articles";
 import { formatDate } from "@/lib/utils";
+import HeroTitle from "@/components/shared/HeroTitle";
 
 function Article({ article }: any) {
   return (
@@ -28,7 +29,8 @@ export default function ArticlesIndex({ articles }: any) {
       <Layout
         title="Blog"
         description="Articles around Formbricks, feature updates, the open source ecosystem and the future of form and survey software.">
-        <div className="mx-auto my-20 max-w-3xl px-4 md:border-l md:border-blue-100 md:pl-6 md:dark:border-blue-700/40">
+        <HeroTitle headingPt1="What's" headingTeal="new?" />
+        <div className="mx-auto mb-20 max-w-3xl px-4 md:border-l md:border-slate-100 md:pl-6 md:dark:border-slate-800">
           <div className="flex flex-col space-y-16 px-4">
             {articles.map((article: any) => (
               <Article key={article.slug} article={article} />

apps/formbricks-com/pages/community.tsx

@@ -33,40 +33,56 @@ const GetStartedPage = () => (
     description="You're building open source forms and surveys? So are we! Get support for anything your building - or just say hi!">
     <HeroTitle headingPt1="Join the" headingTeal="Formbricks" headingPt2="Community" />
     <div className="mb-32 grid grid-cols-1 px-4 md:grid-cols-2 md:gap-8 md:px-16">
-      <div className="mb-6 rounded-lg bg-gradient-to-b from-blue-200 to-gray-50 px-10 py-6 dark:from-blue-300 dark:to-gray-100 md:mb-0">
-        <h2 className="text-blue mt-7 text-3xl font-bold xl:text-4xl">Top Contributors</h2>
-        <p className="text-sm text-gray-500">The leader board of the Formbricks community contributors 🙌</p>
+      <div className="mb-6 rounded-lg bg-gradient-to-b from-slate-200 to-slate-300 px-10 py-6 dark:from-slate-800 dark:to-slate-700 md:mb-0">
+        <h2 className="mt-7 text-3xl font-bold text-slate-800 dark:text-slate-200 xl:text-4xl">
+          Top Contributors
+        </h2>
+        <p className="mt-2 text-sm text-slate-500 dark:text-slate-400">
+          The leader board of the Formbricks community contributors 🙌
+        </p>
         <ol className="mt-10 ml-4 list-decimal">
           {topContributors.map((MVP) => (
-            <li key={MVP.name} className="text-blue my-3 text-lg font-bold hover:text-blue-600">
+            <li
+              key={MVP.name}
+              className="my-3 text-lg font-bold text-slate-700 hover:text-slate-600 dark:text-slate-300 dark:hover:text-slate-400">
               <a href={MVP.href} className="" target="_blank" rel="noreferrer">
                 {MVP.name}
 
-                <ArrowTopRightOnSquareIcon className="mb-1 ml-1 inline h-5 w-5 text-teal-600" />
+                <ArrowTopRightOnSquareIcon className="text-brand-dark dark:text-brand-light mb-1 ml-1 inline h-5 w-5" />
               </a>
             </li>
           ))}
         </ol>
       </div>
       <div>
-        <div className="from-blue rounded-lg bg-gradient-to-b to-black px-10 pt-6 pb-12 dark:from-blue-300 dark:to-gray-100">
-          <h3 className="text-blue mt-7 text-3xl font-bold xl:text-4xl">Community Discord</h3>
-          <p className="text-sm text-gray-500">Get support for anything your building - or just say hi 👋</p>
+        <div className="rounded-lg bg-gradient-to-b from-slate-200 to-slate-300 px-10 pt-6 pb-12 dark:from-slate-800 dark:to-slate-700">
+          <h3 className="mt-7 text-3xl font-bold text-slate-800 dark:text-slate-200 xl:text-4xl">
+            Community Discord
+          </h3>
+          <p className="mt-2 text-sm text-slate-500 dark:text-slate-400">
+            Get support for anything your building - or just say hi 👋
+          </p>
           <Button className="mt-7 w-full justify-center font-bold" variant="highlight">
             Join Discord <ChatBubbleOvalLeftEllipsisIcon className="ml-1 inline h-5 w-5" />
           </Button>
         </div>
         <div className="mt-7 flex">
-          <a href="https://twitter.com/formbricks" target="_blank" rel="noreferrer" className="w-1/2">
-            <div className="mr-3 flex justify-center rounded-lg bg-gradient-to-b from-blue-200 to-gray-50 py-6 dark:from-blue-300 dark:to-gray-100">
+          <a
+            href="https://twitter.com/formbricks"
+            target="_blank"
+            rel="noreferrer"
+            className="delay-50 w-1/2 transition ease-in-out hover:scale-105">
+            <div className="mr-3 flex justify-center rounded-lg bg-gradient-to-b from-slate-200 to-slate-300 py-6 dark:from-slate-800 dark:to-slate-700">
               <svg fill="currentColor" viewBox="0 0 24 24" className="h-20 w-20 text-[#1DA1F2]">
                 <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>
             </div>
           </a>
-          <a href="mailto:hola@formbricks.com" className="w-1/2 ">
-            <div className="ml-3 flex justify-center rounded-lg bg-gradient-to-b from-blue-200 to-gray-50 py-6 dark:from-blue-300 dark:to-gray-100">
-              <EnvelopeIcon className="text-gray ml-1 h-20 w-20 hover:text-gray-400" />
+          <a
+            href="mailto:hola@formbricks.com"
+            className="delay-50 w-1/2 transition ease-in-out hover:scale-105">
+            <div className="ml-3 flex justify-center rounded-lg bg-gradient-to-b from-slate-200 to-slate-300 py-6 dark:from-slate-800 dark:to-slate-700">
+              <EnvelopeIcon className="ml-1 h-20 w-20 text-slate-400 " />
             </div>
           </a>
         </div>

apps/formbricks-com/pages/core-api.tsx

@@ -46,17 +46,17 @@ const CoreAPIPage = () => (
       {features.map((feature) => (
         <li
           key={feature.id}
-          className="relative col-span-1 mt-16 flex flex-col rounded-xl bg-gradient-to-b from-blue-200 to-gray-100 text-center drop-shadow-sm dark:from-black dark:to-blue-900">
+          className="relative col-span-1 mt-16 flex flex-col rounded-xl bg-slate-200 text-center drop-shadow-sm dark:bg-slate-800">
           <div className="absolute -mt-12 w-full">
-            <div className="via-blue to-blue mx-auto flex h-20 w-20 items-center justify-center rounded-full bg-gradient-to-br from-black shadow">
-              <feature.icon className="mx-auto h-10 w-10 flex-shrink-0 text-teal-500" />
+            <div className="mx-auto flex  h-20 w-20 items-center justify-center rounded-full bg-gradient-to-br from-slate-200 via-slate-100 to-slate-100 shadow dark:from-slate-900 dark:to-slate-700">
+              <feature.icon className="text-brand-dark dark:text-brand-light mx-auto h-10 w-10 flex-shrink-0" />
             </div>
           </div>
           <div className="flex flex-1 flex-col p-10">
-            <h3 className="text-blue my-4 text-lg font-medium dark:text-blue-100">{feature.name}</h3>
+            <h3 className="my-4 text-lg font-medium text-slate-800 dark:text-slate-200">{feature.name}</h3>
             <dl className="mt-1 flex flex-grow flex-col justify-between">
               <dt className="sr-only">Description</dt>
-              <dd className="text-sm text-gray-600 dark:text-blue-400">{feature.description}</dd>
+              <dd className="text-sm text-gray-600 dark:text-slate-400">{feature.description}</dd>
             </dl>
           </div>
         </li>

apps/formbricks-com/pages/docs/index.mdx

@@ -1,5 +1,5 @@
 import { Layout } from "@/components/docs/Layout";
-import HeroAnimation from "./hero-animation-still.svg";
+import HeroAnimation from "./open source tool for form and survey overview.png";
 import Image from "next/image";
 
 export const meta = {

apps/formbricks-com/pages/email.tsx

@@ -44,17 +44,17 @@ const EmailPage = () => (
       {features.map((feature) => (
         <li
           key={feature.id}
-          className="relative col-span-1 mt-16 flex flex-col rounded-xl bg-gradient-to-b from-blue-200 to-gray-100 text-center drop-shadow-sm dark:from-black dark:to-blue-900">
+          className="relative col-span-1 mt-16 flex flex-col rounded-xl bg-slate-200 text-center drop-shadow-sm dark:bg-slate-800">
           <div className="absolute -mt-12 w-full">
-            <div className="via-blue to-blue mx-auto flex h-20 w-20 items-center justify-center rounded-full bg-gradient-to-br from-black shadow">
-              <feature.icon className="mx-auto h-10 w-10 flex-shrink-0 text-teal-500" />
+            <div className="mx-auto flex  h-20 w-20 items-center justify-center rounded-full bg-gradient-to-br from-slate-200 via-slate-100 to-slate-100 shadow dark:from-slate-900 dark:to-slate-700">
+              <feature.icon className="text-brand-dark dark:text-brand-light mx-auto h-10 w-10 flex-shrink-0" />
             </div>
           </div>
           <div className="flex flex-1 flex-col p-10">
-            <h3 className="text-blue my-4 text-lg font-medium dark:text-blue-100">{feature.name}</h3>
+            <h3 className="my-4 text-lg font-medium text-slate-800 dark:text-slate-200">{feature.name}</h3>
             <dl className="mt-1 flex flex-grow flex-col justify-between">
               <dt className="sr-only">Description</dt>
-              <dd className="text-sm text-gray-600 dark:text-blue-400">{feature.description}</dd>
+              <dd className="text-sm text-gray-600 dark:text-slate-400">{feature.description}</dd>
             </dl>
           </div>
         </li>

apps/formbricks-com/pages/form-hq.tsx

@@ -3,7 +3,7 @@ import Layout from "@/components/shared/Layout";
 import CTA from "../components/shared/CTA";
 import ImageFormHQ from "../images/form-hq.png";
 import Image from "next/image";
-import HeadingCentered from "@/components/shared/HeadingCenetered";
+import HeadingCentered from "@/components/shared/HeadingCentered";
 import {
   CodeBracketIcon,
   SquaresPlusIcon,
@@ -75,28 +75,30 @@ const FormHQPage = () => (
         <li
           key={feature.id}
           className={clsx(
-            feature.comingSoon ? "dark:to-blue dark:from-blue-900" : "dark:from-black dark:to-blue-900",
-            "relative col-span-1 mt-16 flex flex-col rounded-xl bg-gradient-to-b from-blue-200 to-gray-100 text-center drop-shadow-sm"
+            feature.comingSoon
+              ? "bg-gradient-to-b from-slate-200  to-slate-100 dark:from-slate-800 dark:to-slate-900"
+              : "bg-slate-200 drop-shadow-sm dark:bg-slate-800 ",
+            "relative col-span-1 mt-16 flex flex-col rounded-xl text-center"
           )}>
           <div className="absolute -mt-12 w-full">
             <div
               className={clsx(
                 feature.comingSoon
-                  ? "dark:to-blue bg-gradient-to-br from-blue-200 to-gray-100 dark:from-blue-900 dark:via-blue-900"
-                  : "via-blue to-blue bg-gradient-to-br from-black ",
-                "mx-auto flex h-20 w-20 items-center justify-center rounded-full shadow"
+                  ? "from-slate-100 via-slate-200  to-slate-200 dark:from-slate-800  dark:to-slate-900"
+                  : "from-slate-200 via-slate-100  to-slate-100 dark:from-slate-900 dark:to-slate-700 ",
+                "mx-auto flex h-20 w-20 items-center justify-center rounded-full bg-gradient-to-br shadow"
               )}>
-              <feature.icon className="mx-auto h-10 w-10 flex-shrink-0 text-teal-500" />
+              <feature.icon className="text-brand-dark dark:text-brand-light mx-auto h-10 w-10 flex-shrink-0" />
             </div>
           </div>
           <div className="flex flex-1 flex-col p-10">
-            <h3 className="text-blue my-4 text-lg font-medium dark:text-blue-100">{feature.name}</h3>
+            <h3 className="my-4 text-lg font-medium text-slate-800 dark:text-slate-200">{feature.name}</h3>
             <dl className="mt-1 flex flex-grow flex-col justify-between">
               <dt className="sr-only">Description</dt>
-              <dd className="text-sm text-gray-600 dark:text-blue-400">{feature.description}</dd>
+              <dd className="text-sm text-gray-600 dark:text-slate-400">{feature.description}</dd>
               {feature.comingSoon && (
                 <dd className="mt-4">
-                  <span className="rounded-full bg-gray-400 px-3 py-1 text-xs font-medium text-blue-50">
+                  <span className="rounded-full bg-slate-200 px-3 py-1 text-xs font-medium text-slate-500 dark:bg-slate-700 dark:text-slate-300">
                     coming soon
                   </span>
                 </dd>

apps/formbricks-com/pages/get-started.tsx

@@ -18,55 +18,56 @@ const GetStartedPage = () => (
     description="We offer our open source form & survey software for self-hosters and in our managed cloud. Get started within minutes!">
     <HeroTitle headingPt1="How do you want to" headingTeal="run" headingPt2="Formbricks?" />
     <div className="mb-32 grid px-6 md:grid-cols-2 md:gap-8 md:px-16">
-      <div className="mb-6 rounded-lg bg-gradient-to-b from-blue-200 to-gray-50 px-10 py-6 dark:from-blue-300 dark:to-gray-100 md:mb-0">
-        <CloudIcon className="h-20 w-20 flex-shrink-0 text-blue-500" />
-        <h2 className="text-blue mt-7 text-4xl font-bold">Cloud</h2>
-        <p className="text-sm text-gray-500">Managed hosting by Formbricks core team</p>
-        <p className="mt-7 font-semibold">
-          <span className="font-bold text-blue-900">Free</span> for 500 submissions/mo
+      <div className="mb-6 rounded-lg bg-gradient-to-b from-slate-200 to-slate-300 px-10 py-6 dark:from-slate-800 dark:to-slate-700 md:mb-0">
+        <CloudIcon className="h-20 w-20 flex-shrink-0 text-slate-600 dark:text-slate-400" />
+        <h2 className="mt-7 text-4xl font-bold text-slate-800 dark:text-slate-200">Cloud</h2>
+        <p className="text-sm text-slate-500">Managed hosting by Formbricks core team</p>
+        <p className="mt-7 font-semibold text-slate-700 dark:text-slate-300">
+          <span className="font-bold ">Free</span> for 500 submissions/mo
         </p>
-        <p className="text-sm text-gray-500">then $0.01/submission</p>
-        <div className="text-blue font-medium">
+        <p className="text-sm text-slate-500 dark:text-slate-500">then $0.01/submission</p>
+        <div className="font-medium text-slate-500 dark:text-slate-400">
           <div className="mt-7 flex items-center py-1">
-            <InboxArrowDownIcon className="mr-3 h-7 w-7 flex-shrink-0 text-blue-500" />
+            <InboxArrowDownIcon className="mr-3 h-7 w-7 flex-shrink-0 text-slate-600 dark:text-slate-300" />
             <p>Start receiving submissions right away</p>
           </div>
           <div className="flex items-center py-1">
-            <ArrowPathIcon className="mr-3 h-7 w-7 flex-shrink-0 text-blue-500" />
+            <ArrowPathIcon className="mr-3 h-7 w-7 flex-shrink-0 text-slate-600 dark:text-slate-300" />
             <p>Automatic upgrades</p>
           </div>
           <div className="flex items-center py-1">
-            <PuzzlePieceIcon className="mr-3 h-7 w-7 flex-shrink-0 text-blue-500" />
+            <PuzzlePieceIcon className="mr-3 h-7 w-7 flex-shrink-0 text-slate-600 dark:text-slate-300" />
             <p>All enterprise features included</p>
           </div>
         </div>
-        <Button className="mt-7 w-full justify-center text-center font-bold" variant="highlight">
+        <Button disabled className="mt-7 w-full justify-center text-center font-bold" variant="highlight">
           Start FREE on Formbricks Cloud
         </Button>
       </div>
-      <div className="rounded-lg bg-gradient-to-b from-blue-200 to-gray-50 px-10 py-6 dark:from-blue-300 dark:to-gray-100">
-        <ServerStackIcon className="h-20 w-20 flex-shrink-0 text-blue-500" />
-        <h2 className="text-blue mt-7 text-4xl font-bold">Self-host</h2>
+
+      <div className="rounded-lg bg-gradient-to-b from-slate-200 to-slate-300 px-10 py-6 dark:from-slate-800 dark:to-slate-700 ">
+        <ServerStackIcon className="h-20 w-20 flex-shrink-0 text-slate-600 dark:text-slate-400" />
+        <h2 className="mt-7 text-4xl font-bold text-slate-800 dark:text-slate-200">Self-host</h2>
         <p className="text-sm text-gray-500">Submission data never leaves your infrastructure</p>
-        <p className="mt-7 font-semibold">
-          <span className="font-bold text-blue-900">Free</span> for 500 submissions/mo
+        <p className="mt-7 font-semibold text-slate-700 dark:text-slate-300">
+          <span className="font-bold ">Free</span> for 500 submissions/mo
         </p>
-        <p className="text-sm text-gray-500">then $0.01/submission</p>
-        <div className="text-blue font-medium">
+        <p className="text-sm text-slate-500 dark:text-slate-500">then $0.01/submission</p>
+        <div className="font-medium text-slate-500 dark:text-slate-400">
           <div className="mt-7 flex items-center py-1">
-            <ShieldCheckIcon className="h- mr-3 w-7 flex-shrink-0 text-blue-500" />
+            <ShieldCheckIcon className="h- mr-3 w-7 flex-shrink-0 text-slate-600 dark:text-slate-300" />
             <p>Easy deploy for most private cloud platforms</p>
           </div>
           <div className="flex items-center py-1">
-            <CommandLineIcon className="mr-3 h-7 w-7 flex-shrink-0 text-blue-500" />
+            <CommandLineIcon className="mr-3 h-7 w-7 flex-shrink-0 text-slate-600 dark:text-slate-300" />
             <p>Full access to production instance</p>
           </div>
           <div className="flex items-center py-1">
-            <BuildingLibraryIcon className="mr-3 h-7 w-7 flex-shrink-0 text-blue-500" />
+            <BuildingLibraryIcon className="mr-3 h-7 w-7 flex-shrink-0 text-slate-600 dark:text-slate-300" />
             <p>Full compliance with all data privacy regulation</p>
           </div>
         </div>
-        <Button className="mt-7 w-full justify-center text-center font-bold" variant="highlight">
+        <Button disabled className="mt-7 w-full justify-center text-center font-bold" variant="highlight">
           Get started
         </Button>
       </div>

apps/formbricks-com/pages/react-form-library.tsx

@@ -3,7 +3,7 @@ import HeroTitle from "@/components/shared/HeroTitle";
 import Image from "next/image";
 import ImageReactLib from "@/images/react-lib.png";
 import ImageSchemaGeneration from "@/images/schema-generation-svg.svg";
-import HeadingCentered from "@/components/shared/HeadingCenetered";
+import HeadingCentered from "@/components/shared/HeadingCentered";
 import { CheckIcon, PlusIcon } from "@heroicons/react/24/outline";
 import CTA from "../components/shared/CTA";
 import FeatureHighlight from "@/components/shared/FeatureHighlight";
@@ -72,7 +72,7 @@ const ReactFormBuilderPage = () => (
     <HeroTitle headingPt1="React" headingTeal="Form Builder" headingPt2="Library" />
     <FeatureHighlight
       featureTitle="Building React forms has never been quicker. But there is more..."
-      text={`Loads of question types, validation, multi-page forms, logic jumps, i18n, custom styles - all the good stuff you want, but don't want to build yourself.\nBuilding forms fast is great, but where do you pipe your data? And what is it worth without a schema?"`}
+      text={`Loads of question types, validation, multi-page forms, logic jumps, i18n, custom styles - all the good stuff you want, but don't want to build yourself.\n\nBuilding forms fast is great, but where do you pipe your data? And what is it worth without a schema?"`}
       img={<Image src={ImageReactLib} alt="react library" className="rounded-lg" />}
       isImgLeft
     />
@@ -93,8 +93,11 @@ const ReactFormBuilderPage = () => (
         {hereFeatures.map((feature) => (
           <div key={feature.name}>
             <dt className="flex items-center">
-              <CheckIcon className="text-teal absolute ml-4 h-6 w-6 md:ml-0" aria-hidden="true" />
-              <p className="ml-14 text-lg leading-loose text-gray-500 dark:text-gray-200 md:ml-9">
+              <CheckIcon
+                className="text-brand-light dark:text-brand-light absolute ml-4 h-6 w-6 md:ml-0"
+                aria-hidden="true"
+              />
+              <p className="ml-14 text-lg leading-loose text-slate-500 dark:text-slate-200 md:ml-9">
                 {feature.name}
               </p>
             </dt>
@@ -105,10 +108,10 @@ const ReactFormBuilderPage = () => (
         {nextFeatures.map((feature) => (
           <div key={feature.name}>
             <dt className="mx-auto flex max-w-sm items-center">
-              <div className="bg-teal ml-2 rounded-full px-1.5 text-xs font-semibold text-black">
+              <div className="bg-brand-dark dark:bg-brand-light ml-2 rounded-full px-1.5 text-xs font-semibold text-slate-900">
                 <p>next</p>
               </div>
-              <p className="ml-3 text-lg leading-loose text-gray-500 dark:text-gray-200">{feature.name}</p>
+              <p className="ml-3 text-lg leading-loose text-slate-500 dark:text-slate-200">{feature.name}</p>
             </dt>
           </div>
         ))}
@@ -117,17 +120,20 @@ const ReactFormBuilderPage = () => (
         {soonFeatures.map((feature) => (
           <div key={feature.name}>
             <dt className="mx-auto flex max-w-sm items-center">
-              <div className="text-teal ml-2 rounded-full bg-gray-100 px-1.5 text-xs font-bold dark:bg-black dark:font-normal">
+              <div className="text-brand-dark dark:text-brand-light ml-2 rounded-full bg-gray-200 px-1.5 text-xs font-bold dark:bg-gray-800 dark:font-normal">
                 <p>soon</p>
               </div>
-              <p className="ml-3 text-lg leading-loose text-gray-500 dark:text-gray-200">{feature.name}</p>
+              <p className="ml-3 text-lg leading-loose text-slate-500 dark:text-slate-200">{feature.name}</p>
             </dt>
           </div>
         ))}
         <a href="mailto:johannes@formbricks.com">
           <div className="mx-auto flex max-w-sm items-center transition delay-100 duration-200 ease-in-out hover:scale-105">
-            <PlusIcon className="text-teal ml-4 h-6 w-6 md:ml-5" aria-hidden="true" />
-            <p className="ml-5 text-lg leading-loose text-gray-500 underline underline-offset-4 dark:text-gray-200">
+            <PlusIcon
+              className="text-brand-dark dark:text-brand-lightml-4 h-6 w-6 md:ml-5"
+              aria-hidden="true"
+            />
+            <p className="ml-5 text-lg leading-loose text-slate-500 underline underline-offset-4 dark:text-slate-200">
               Add feature to roadmap
             </p>
           </div>

apps/formbricks-com/pages/visual-builder.tsx

@@ -3,7 +3,7 @@ import Layout from "@/components/shared/Layout";
 import CTA from "../components/shared/CTA";
 import Image from "next/image";
 import ImageEmail from "../images/email.svg";
-import HeadingCentered from "@/components/shared/HeadingCenetered";
+import HeadingCentered from "@/components/shared/HeadingCentered";
 import FeatureHighlight from "@/components/shared/FeatureHighlight";
 import { CheckIcon, PlusIcon } from "@heroicons/react/24/outline";
 
@@ -68,7 +68,7 @@ const FormHQPage = () => (
     <HeroTitle headingPt1="Visual Form" headingTeal="Builder" />
     <FeatureHighlight
       featureTitle="Make beautiful surveys with our free & open source form builder"
-      text={`Typeform, Jotform, Google Forms alternative but open-source and free to use? We got you! \n Use our visual web form builder to create beautiful forms and surveys in minutes. All the question types you need, multi-page forms, conditional logic - you name it!`}
+      text={`Typeform, Jotform, Google Forms alternative but open-source and free to use? We got you! \n\n  Use our visual web form builder to create beautiful forms and surveys in minutes. All the question types you need, multi-page forms, conditional logic - you name it!`}
       img={
         <video
           autoPlay
@@ -84,10 +84,11 @@ const FormHQPage = () => (
       isImgLeft
       cta="coming soon"
       href="#"
+      disabled
     />
     <FeatureHighlight
       featureTitle="Get responses via email or analyze them online."
-      text={`All survey responses get collected in your Form HQ. View and manage responses in your personal dashboard. \n Set up an email notification or send the complete submission data to your email.`}
+      text={`All survey responses get collected in your Form HQ. View and manage responses in your personal dashboard. \n\n  Set up an email notification or send the complete submission data to your email.`}
       img={<Image src={ImageEmail} alt="react library" className="rounded-lg" />}
     />
     <HeadingCentered
@@ -101,7 +102,10 @@ const FormHQPage = () => (
         {hereFeatures.map((feature) => (
           <div key={feature.name}>
             <dt className="flex items-center">
-              <CheckIcon className="text-teal absolute ml-4 h-6 w-6 md:ml-0" aria-hidden="true" />
+              <CheckIcon
+                className="text-brand-dark dark:text-brand-lightabsolute ml-4 h-6 w-6 md:ml-0"
+                aria-hidden="true"
+              />
               <p className="ml-14 text-lg leading-loose text-gray-500 dark:text-gray-200 md:ml-9">
                 {feature.name}
               </p>
@@ -113,7 +117,7 @@ const FormHQPage = () => (
         {nextFeatures.map((feature) => (
           <div key={feature.name}>
             <dt className="mx-auto flex max-w-sm items-center">
-              <div className="bg-teal ml-2 rounded-full px-1.5 text-xs font-semibold text-black">
+              <div className="bg-brand-dark dark:bg-brand-light ml-2 rounded-full px-1.5 text-xs font-semibold text-slate-900">
                 <p>next</p>
               </div>
               <p className="ml-3 text-lg leading-loose text-gray-500 dark:text-gray-200">{feature.name}</p>
@@ -125,7 +129,7 @@ const FormHQPage = () => (
         {soonFeatures.map((feature) => (
           <div key={feature.name}>
             <dt className="mx-auto flex max-w-sm items-center">
-              <div className="text-teal ml-2 rounded-full bg-gray-100 px-1.5 text-xs font-bold dark:bg-black dark:font-normal">
+              <div className="text-brand-dark dark:text-brand-lightml-2 rounded-full bg-gray-100 px-1.5 text-xs font-bold dark:bg-black dark:font-normal">
                 <p>soon</p>
               </div>
               <p className="ml-3 text-lg leading-loose text-gray-500 dark:text-gray-200">{feature.name}</p>
@@ -134,7 +138,10 @@ const FormHQPage = () => (
         ))}
         <a href="mailto:johannes@formbricks.com">
           <div className="mx-auto flex max-w-sm items-center transition delay-100 duration-200 ease-in-out hover:scale-105">
-            <PlusIcon className="text-teal ml-4 h-6 w-6 md:ml-5" aria-hidden="true" />
+            <PlusIcon
+              className="text-brand-dark dark:text-brand-lightml-4 h-6 w-6 md:ml-5"
+              aria-hidden="true"
+            />
             <p className="ml-5 text-lg leading-loose text-gray-500 underline underline-offset-4 dark:text-gray-200">
               Add feature to roadmap
             </p>

apps/formbricks-com/pages/vs-formspree.mdx

@@ -3,7 +3,7 @@ import Image from "next/image";
 import { Callout } from "@/components/shared/Callout";
 import HeroAnimation from "@/components/shared/HeroAnimation.tsx";
 import MdxTryItCTA from "@/components/shared/MdxTryItCTA.tsx";
-import HeaderImage from "/images/Formspree open source alternative vs Formbricks FormHQ comparison post for form backend as a service.png";
+import HeaderImage from "/images/SEO/Formspree open source alternative vs Formbricks FormHQ comparison post for form backend as a service.png";
 
 export const meta = {
   title: "Open source Formspree alternative",

apps/formbricks-com/pages/vs-react-hook-form.mdx

@@ -3,7 +3,7 @@ import Image from "next/image";
 import { Callout } from "@/components/shared/Callout";
 import HeroAnimation from "@/components/shared/HeroAnimation.tsx";
 import MdxTryItCTA from "@/components/shared/MdxTryItCTA.tsx";
-import HeaderImage from "/images/Formbricks React Form Library vs React Hook Form comparison post to build forms fast in reactjs smaller.png";
+import HeaderImage from "/images/SEO/Formbricks React Form Library vs React Hook Form comparison post to build forms fast in reactjs smaller.png";
 
 export const meta = {
   title: "Formbricks React vs React Hook Form",

apps/formbricks-com/public/faveicon/browserconfig.xml

@@ -2,8 +2,8 @@
 <browserconfig>
     <msapplication>
         <tile>
-            <square150x150logo src="\apps\formbricks-com\images\faveicon/mstile-150x150.png"/>
-            <TileColor>#002941</TileColor>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#0f172a</TileColor>
         </tile>
     </msapplication>
 </browserconfig>

apps/formbricks-com/public/faveicon/formbricks-icon-300x300.svg

@@ -1,32 +0,0 @@
-<svg width="301" height="301" viewBox="0 0 301 301" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_2472_5827)">
-<rect width="300.216" height="300.216" rx="42.1355" fill="url(#paint0_linear_2472_5827)"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M87.7994 16.5089C87.7994 13.707 87.7994 12.306 88.3533 11.2397C88.8201 10.3411 89.5528 9.60836 90.4514 9.14157C91.5178 8.58765 92.9187 8.58765 95.7206 8.58765H130.505C133.307 8.58765 134.708 8.58765 135.774 9.14157C136.673 9.60836 137.405 10.3411 137.872 11.2397C138.426 12.306 138.426 13.707 138.426 16.5089V26.73C138.426 27.1532 138.426 27.5445 138.424 27.9074H167.038C167.037 27.5445 167.037 27.1532 167.037 26.73V16.5089C167.037 13.707 167.037 12.306 167.59 11.2397C168.057 10.3411 168.79 9.60836 169.689 9.14157C170.755 8.58765 172.156 8.58765 174.958 8.58765H209.742C212.544 8.58765 213.945 8.58765 215.011 9.14157C215.91 9.60836 216.643 10.3411 217.109 11.2397C217.663 12.306 217.663 13.707 217.663 16.5089V26.73C217.663 27.1532 217.663 27.5445 217.661 27.9074H239.319C250.188 27.9074 258.999 36.7185 258.999 47.5875V95.6754C258.999 106.544 250.188 115.355 239.319 115.355H63.4545C52.5855 115.355 43.7744 106.544 43.7744 95.6754V47.5875C43.7744 36.7185 52.5855 27.9074 63.4545 27.9074H87.8013C87.7994 27.5445 87.7994 27.1532 87.7994 26.73V16.5089Z" fill="#00E5CA"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M87.7994 16.5089C87.7994 13.707 87.7994 12.306 88.3533 11.2397C88.8201 10.3411 89.5528 9.60836 90.4514 9.14157C91.5178 8.58765 92.9187 8.58765 95.7206 8.58765H130.505C133.307 8.58765 134.708 8.58765 135.774 9.14157C136.673 9.60836 137.405 10.3411 137.872 11.2397C138.426 12.306 138.426 13.707 138.426 16.5089V26.73C138.426 27.1532 138.426 27.5445 138.424 27.9074H167.038C167.037 27.5445 167.037 27.1532 167.037 26.73V16.5089C167.037 13.707 167.037 12.306 167.59 11.2397C168.057 10.3411 168.79 9.60836 169.689 9.14157C170.755 8.58765 172.156 8.58765 174.958 8.58765H209.742C212.544 8.58765 213.945 8.58765 215.011 9.14157C215.91 9.60836 216.643 10.3411 217.109 11.2397C217.663 12.306 217.663 13.707 217.663 16.5089V26.73C217.663 27.1532 217.663 27.5445 217.661 27.9074H239.319C250.188 27.9074 258.999 36.7185 258.999 47.5875V95.6754C258.999 106.544 250.188 115.355 239.319 115.355H63.4545C52.5855 115.355 43.7744 106.544 43.7744 95.6754V47.5875C43.7744 36.7185 52.5855 27.9074 63.4545 27.9074H87.8013C87.7994 27.5445 87.7994 27.1532 87.7994 26.73V16.5089Z" fill="url(#paint1_linear_2472_5827)" fill-opacity="0.05"/>
-<path d="M43.7744 135.036C43.7744 124.167 52.5855 115.356 63.4545 115.356H239.319C250.188 115.356 258.999 124.167 258.999 135.036V185.553C258.999 196.422 250.188 205.233 239.319 205.233H63.4545C52.5855 205.233 43.7744 196.422 43.7744 185.553V135.036Z" fill="#002941"/>
-<path d="M43.7744 135.036C43.7744 124.167 52.5855 115.356 63.4545 115.356H239.319C250.188 115.356 258.999 124.167 258.999 135.036V185.553C258.999 196.422 250.188 205.233 239.319 205.233H63.4545C52.5855 205.233 43.7744 196.422 43.7744 185.553V135.036Z" fill="url(#paint2_linear_2472_5827)" fill-opacity="0.05"/>
-<path d="M43.7744 224.913C43.7744 214.044 52.5855 205.233 63.4545 205.233H239.319C250.188 205.233 258.999 214.044 258.999 224.913V273.001C258.999 283.87 250.188 292.681 239.319 292.681H63.4545C52.5855 292.681 43.7744 283.87 43.7744 273.001V224.913Z" fill="#000A1C"/>
-<path d="M43.7744 224.913C43.7744 214.044 52.5855 205.233 63.4545 205.233H239.319C250.188 205.233 258.999 214.044 258.999 224.913V273.001C258.999 283.87 250.188 292.681 239.319 292.681H63.4545C52.5855 292.681 43.7744 283.87 43.7744 273.001V224.913Z" fill="url(#paint3_linear_2472_5827)" fill-opacity="0.05"/>
-</g>
-<defs>
-<linearGradient id="paint0_linear_2472_5827" x1="150.108" y1="300.216" x2="150.108" y2="-6.37745e-06" gradientUnits="userSpaceOnUse">
-<stop offset="0.648958" stop-color="#E5EAEF"/>
-<stop offset="1" stop-color="#D3DDE7"/>
-</linearGradient>
-<linearGradient id="paint1_linear_2472_5827" x1="151.387" y1="13.3326" x2="151.387" y2="115.356" gradientUnits="userSpaceOnUse">
-<stop/>
-<stop offset="1" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint2_linear_2472_5827" x1="151.387" y1="115.356" x2="151.387" y2="205.233" gradientUnits="userSpaceOnUse">
-<stop/>
-<stop offset="1" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint3_linear_2472_5827" x1="151.387" y1="205.233" x2="151.387" y2="292.681" gradientUnits="userSpaceOnUse">
-<stop/>
-<stop offset="1" stop-opacity="0"/>
-</linearGradient>
-<clipPath id="clip0_2472_5827">
-<rect width="300.216" height="300.216" fill="white"/>
-</clipPath>
-</defs>
-</svg>

apps/formbricks-com/public/faveicon/formbricks-icon-dark-300x300.svg

@@ -1,32 +0,0 @@
-<svg width="301" height="301" viewBox="0 0 301 301" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_2472_5836)">
-<rect x="-0.000976562" width="300.216" height="300.216" rx="42.1355" fill="url(#paint0_linear_2472_5836)"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M88.9434 19.4156C88.9434 16.6137 88.9434 15.2128 89.4973 14.1464C89.9641 13.2478 90.6968 12.5151 91.5954 12.0483C92.6618 11.4944 94.0627 11.4944 96.8646 11.4944H130.425C133.227 11.4944 134.628 11.4944 135.695 12.0483C136.593 12.5151 137.326 13.2478 137.793 14.1464C138.347 15.2128 138.347 16.6137 138.347 19.4156V29.0068C138.347 29.494 138.347 29.9389 138.344 30.3471H166.264C166.261 29.9389 166.261 29.494 166.261 29.0068V19.4156C166.261 16.6137 166.261 15.2128 166.815 14.1464C167.281 13.2478 168.014 12.5151 168.913 12.0483C169.979 11.4944 171.38 11.4944 174.182 11.4944H207.743C210.544 11.4944 211.945 11.4944 213.012 12.0483C213.91 12.5151 214.643 13.2478 215.11 14.1464C215.664 15.2128 215.664 16.6137 215.664 19.4156V29.0068C215.664 29.494 215.664 29.9389 215.661 30.3471H236.321C247.19 30.3471 256.001 39.1581 256.001 50.0272V96.0014C256.001 106.87 247.19 115.681 236.321 115.681H65.6576C54.7886 115.681 45.9775 106.87 45.9775 96.0014V50.0271C45.9775 39.1581 54.7886 30.3471 65.6576 30.3471H88.9463C88.9434 29.9389 88.9434 29.494 88.9434 29.0068V19.4156Z" fill="#00E5CA"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M88.9434 19.4156C88.9434 16.6137 88.9434 15.2128 89.4973 14.1464C89.9641 13.2478 90.6968 12.5151 91.5954 12.0483C92.6618 11.4944 94.0627 11.4944 96.8646 11.4944H130.425C133.227 11.4944 134.628 11.4944 135.695 12.0483C136.593 12.5151 137.326 13.2478 137.793 14.1464C138.347 15.2128 138.347 16.6137 138.347 19.4156V29.0068C138.347 29.494 138.347 29.9389 138.344 30.3471H166.264C166.261 29.9389 166.261 29.494 166.261 29.0068V19.4156C166.261 16.6137 166.261 15.2128 166.815 14.1464C167.281 13.2478 168.014 12.5151 168.913 12.0483C169.979 11.4944 171.38 11.4944 174.182 11.4944H207.743C210.544 11.4944 211.945 11.4944 213.012 12.0483C213.91 12.5151 214.643 13.2478 215.11 14.1464C215.664 15.2128 215.664 16.6137 215.664 19.4156V29.0068C215.664 29.494 215.664 29.9389 215.661 30.3471H236.321C247.19 30.3471 256.001 39.1581 256.001 50.0272V96.0014C256.001 106.87 247.19 115.681 236.321 115.681H65.6576C54.7886 115.681 45.9775 106.87 45.9775 96.0014V50.0271C45.9775 39.1581 54.7886 30.3471 65.6576 30.3471H88.9463C88.9434 29.9389 88.9434 29.494 88.9434 29.0068V19.4156Z" fill="url(#paint1_linear_2472_5836)" fill-opacity="0.05"/>
-<path d="M45.9766 135.362C45.9766 124.493 54.7876 115.682 65.6567 115.682H236.32C247.189 115.682 256 124.493 256 135.362V183.707C256 194.576 247.189 203.387 236.32 203.387H65.6567C54.7876 203.387 45.9766 194.576 45.9766 183.707V135.362Z" fill="#D3E3ED"/>
-<path d="M45.9766 135.362C45.9766 124.493 54.7876 115.682 65.6567 115.682H236.32C247.189 115.682 256 124.493 256 135.362V183.707C256 194.576 247.189 203.387 236.32 203.387H65.6567C54.7876 203.387 45.9766 194.576 45.9766 183.707V135.362Z" fill="url(#paint2_linear_2472_5836)" fill-opacity="0.05"/>
-<path d="M45.9766 223.068C45.9766 212.199 54.7876 203.388 65.6567 203.388H236.32C247.189 203.388 256 212.199 256 223.068V269.042C256 279.911 247.189 288.722 236.32 288.722H65.6567C54.7876 288.722 45.9766 279.911 45.9766 269.042V223.068Z" fill="#8B94A4"/>
-<path d="M45.9766 223.068C45.9766 212.199 54.7876 203.388 65.6567 203.388H236.32C247.189 203.388 256 212.199 256 223.068V269.042C256 279.911 247.189 288.722 236.32 288.722H65.6567C54.7876 288.722 45.9766 279.911 45.9766 269.042V223.068Z" fill="url(#paint3_linear_2472_5836)" fill-opacity="0.05"/>
-</g>
-<defs>
-<linearGradient id="paint0_linear_2472_5836" x1="51.9054" y1="19.6403" x2="249.711" y2="276.367" gradientUnits="userSpaceOnUse">
-<stop offset="0.315625" stop-color="#000A1C"/>
-<stop offset="1" stop-color="#002941"/>
-</linearGradient>
-<linearGradient id="paint1_linear_2472_5836" x1="150.989" y1="16.1246" x2="150.989" y2="115.681" gradientUnits="userSpaceOnUse">
-<stop/>
-<stop offset="1" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint2_linear_2472_5836" x1="150.988" y1="115.682" x2="150.988" y2="203.387" gradientUnits="userSpaceOnUse">
-<stop/>
-<stop offset="1" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint3_linear_2472_5836" x1="150.988" y1="203.388" x2="150.988" y2="288.722" gradientUnits="userSpaceOnUse">
-<stop/>
-<stop offset="1" stop-opacity="0"/>
-</linearGradient>
-<clipPath id="clip0_2472_5836">
-<rect width="300.216" height="300.216" fill="white"/>
-</clipPath>
-</defs>
-</svg>

apps/formbricks-com/public/faveicon/safari-pinned-tab.svg

@@ -9,23 +9,16 @@ Created by potrace 1.14, written by Peter Selinger 2001-2017
 </metadata>
 <g transform="translate(0.000000,700.000000) scale(0.100000,-0.100000)"
 fill="#000000" stroke="none">
-<path d="M807 6984 c-380 -69 -683 -353 -779 -730 l-23 -89 0 -2655 0 -2655
-23 -89 c27 -107 95 -254 156 -340 24 -34 82 -98 129 -142 121 -115 265 -194
-438 -241 60 -16 228 -18 2699 -20 2302 -3 2646 -1 2721 12 382 65 696 364 786
-745 17 71 18 222 18 2735 0 2507 -1 2664 -18 2729 -26 101 -72 211 -125 296
--56 90 -174 216 -258 276 -83 59 -231 128 -334 156 l-85 23 -2635 2 c-2229 1
--2647 -1 -2713 -13z m2370 -287 l28 -27 5 -188 5 -187 327 -3 327 -2 3 190 3
-190 28 27 27 28 511 0 511 0 29 -33 29 -32 0 -185 0 -185 273 0 c304 0 352 -7
-446 -63 101 -60 184 -175 210 -288 7 -27 11 -274 11 -640 0 -647 1 -639 -57
--754 -51 -100 -192 -205 -299 -221 -55 -8 -57 -20 -3 -27 65 -9 168 -65 227
--124 34 -34 66 -80 90 -130 l37 -78 3 -657 c3 -645 2 -658 -18 -719 -56 -165
--183 -276 -360 -312 l-65 -13 58 -6 c121 -13 262 -110 327 -223 58 -101 60
--123 60 -760 0 -630 -1 -638 -56 -747 -52 -102 -167 -192 -289 -224 -41 -11
--419 -14 -2090 -14 -1802 0 -2048 2 -2100 15 -174 46 -306 189 -334 365 -14
-87 -14 1122 0 1210 30 193 190 354 375 378 l59 8 -65 12 c-179 35 -320 165
--365 337 -23 88 -23 1262 0 1350 42 159 176 294 326 326 73 17 79 25 23 33
--158 21 -317 181 -353 354 -7 35 -11 247 -11 623 0 636 2 658 66 766 61 103
-161 178 279 209 36 10 132 14 353 14 l302 0 0 169 c0 188 8 224 54 252 30 18
-53 19 528 17 l498 -3 27 -28z"/>
+<path d="M2030 6463 c-392 -63 -688 -348 -758 -728 -4 -22 -7 -269 -7 -550 l0
+-510 1815 1 c998 0 1842 3 1875 7 139 14 256 58 386 143 266 175 404 445 395
+774 -8 281 -111 488 -340 683 -47 41 -166 105 -246 133 -153 54 -123 53 -1665
+52 -786 -1 -1441 -3 -1455 -5z"/>
+<path d="M1260 3500 l0 -896 1843 1 c1013 1 1865 5 1892 10 28 4 89 20 137 36
+302 98 527 355 595 679 3 14 6 82 8 151 8 263 -74 468 -260 655 -103 104 -207
+170 -337 213 -135 45 -91 44 -2025 46 l-1853 2 0 -897z"/>
+<path d="M1263 2314 c-6 -17 2 -1036 9 -1059 3 -11 11 -40 17 -65 27 -105 104
+-256 171 -334 184 -216 432 -328 708 -321 142 4 171 8 270 41 313 105 532 351
+597 672 14 70 16 153 16 573 0 270 -2 494 -6 497 -4 4 -405 7 -892 7 -649 0
+-887 -3 -890 -11z"/>
 </g>
 </svg>

apps/formbricks-com/public/faveicon/site.webmanifest

@@ -3,12 +3,12 @@
     "short_name": "",
     "icons": [
         {
-            "src": "android-chrome-192x192.png",
+            "src": "/android-chrome-192x192.png",
             "sizes": "192x192",
             "type": "image/png"
         },
         {
-            "src": "android-chrome-512x512.png",
+            "src": "/android-chrome-512x512.png",
             "sizes": "512x512",
             "type": "image/png"
         }

apps/formbricks-com/public/sitemap-0.xml

@@ -1,30 +1,31 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
-<url><loc>https://formbricks.com</loc><lastmod>2022-11-15T13:03:09.642Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/blog</loc><lastmod>2022-11-15T13:03:09.642Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/blog/open-source-forms-will-save-the-world</loc><lastmod>2022-11-15T13:03:09.642Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/blog/snoopforms-becomes-formbricks</loc><lastmod>2022-11-15T13:03:09.642Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/blog/why-open-source-no-code-is-the-future-of-enterprise-gov-software</loc><lastmod>2022-11-15T13:03:09.642Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/community</loc><lastmod>2022-11-15T13:03:09.642Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/core-api</loc><lastmod>2022-11-15T13:03:09.642Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/docs</loc><lastmod>2022-11-15T13:03:09.642Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/docs/data-insights/form-hq</loc><lastmod>2022-11-15T13:03:09.642Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/docs/data-pipelines/core-api</loc><lastmod>2022-11-15T13:03:09.642Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/docs/data-pipelines/email-notifications</loc><lastmod>2022-11-15T13:03:09.642Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/docs/data-pipelines/webhooks</loc><lastmod>2022-11-15T13:03:09.642Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/docs/form-creation/react-form-library</loc><lastmod>2022-11-15T13:03:09.642Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/docs/introduction/how-to-achieve-this</loc><lastmod>2022-11-15T13:03:09.642Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/docs/introduction/quick-start</loc><lastmod>2022-11-15T13:03:09.642Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/docs/introduction/what-is-formbricks</loc><lastmod>2022-11-15T13:03:09.642Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/docs/introduction/why-formbricks</loc><lastmod>2022-11-15T13:03:09.642Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/email</loc><lastmod>2022-11-15T13:03:09.642Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/form-hq</loc><lastmod>2022-11-15T13:03:09.642Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/get-started</loc><lastmod>2022-11-15T13:03:09.642Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/imprint</loc><lastmod>2022-11-15T13:03:09.642Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/privacy</loc><lastmod>2022-11-15T13:03:09.642Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/react-form-library</loc><lastmod>2022-11-15T13:03:09.642Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/visual-builder</loc><lastmod>2022-11-15T13:03:09.642Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/vs-formspree</loc><lastmod>2022-11-15T13:03:09.642Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/vs-react-hook-form</loc><lastmod>2022-11-15T13:03:09.642Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://formbricks.com/webhooks</loc><lastmod>2022-11-15T13:03:09.642Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://formbricks.com</loc><lastmod>2022-11-15T15:07:40.272Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://formbricks.com/blog</loc><lastmod>2022-11-15T15:07:40.272Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://formbricks.com/blog/open-source-forms-will-save-the-world</loc><lastmod>2022-11-15T15:07:40.272Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://formbricks.com/blog/snoopforms-becomes-formbricks</loc><lastmod>2022-11-15T15:07:40.272Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://formbricks.com/blog/why-open-source-no-code-is-the-future-of-enterprise-gov-software</loc><lastmod>2022-11-15T15:07:40.272Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://formbricks.com/community</loc><lastmod>2022-11-15T15:07:40.272Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://formbricks.com/core-api</loc><lastmod>2022-11-15T15:07:40.272Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://formbricks.com/docs</loc><lastmod>2022-11-15T15:07:40.272Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://formbricks.com/docs/data-insights/form-hq</loc><lastmod>2022-11-15T15:07:40.272Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://formbricks.com/docs/data-pipelines/core-api</loc><lastmod>2022-11-15T15:07:40.272Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://formbricks.com/docs/data-pipelines/email-notifications</loc><lastmod>2022-11-15T15:07:40.272Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://formbricks.com/docs/data-pipelines/webhooks</loc><lastmod>2022-11-15T15:07:40.272Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://formbricks.com/docs/introduction/how-to-achieve-this</loc><lastmod>2022-11-15T15:07:40.272Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://formbricks.com/docs/introduction/quick-start</loc><lastmod>2022-11-15T15:07:40.272Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://formbricks.com/docs/introduction/what-is-formbricks</loc><lastmod>2022-11-15T15:07:40.272Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://formbricks.com/docs/introduction/why-formbricks</loc><lastmod>2022-11-15T15:07:40.272Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://formbricks.com/docs/react-form-library/getting-started</loc><lastmod>2022-11-15T15:07:40.272Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://formbricks.com/docs/react-form-library/introduction</loc><lastmod>2022-11-15T15:07:40.272Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://formbricks.com/email</loc><lastmod>2022-11-15T15:07:40.272Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://formbricks.com/form-hq</loc><lastmod>2022-11-15T15:07:40.272Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://formbricks.com/get-started</loc><lastmod>2022-11-15T15:07:40.272Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://formbricks.com/imprint</loc><lastmod>2022-11-15T15:07:40.272Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://formbricks.com/privacy</loc><lastmod>2022-11-15T15:07:40.272Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://formbricks.com/react-form-library</loc><lastmod>2022-11-15T15:07:40.272Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://formbricks.com/visual-builder</loc><lastmod>2022-11-15T15:07:40.272Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://formbricks.com/vs-formspree</loc><lastmod>2022-11-15T15:07:40.272Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://formbricks.com/vs-react-hook-form</loc><lastmod>2022-11-15T15:07:40.272Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://formbricks.com/webhooks</loc><lastmod>2022-11-15T15:07:40.272Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
 </urlset>

apps/formbricks-com/styles/docsearch.css

@@ -2,51 +2,50 @@
 :root {
   --docsearch-primary-color: red;
   --docsearch-highlight-color: var(--docsearch-primary-color);
-  --docsearch-muted-color: theme('colors.slate.500');
-  --docsearch-emphasis-color: theme('colors.slate.900');
+  --docsearch-muted-color: theme("colors.slate.500");
+  --docsearch-emphasis-color: theme("colors.slate.900");
   --docsearch-logo-color: #5468ff;
   --docsearch-modal-width: 35rem;
   --docsearch-modal-height: 37.5rem;
-  --docsearch-modal-background: theme('colors.white');
-  --docsearch-modal-shadow: theme('boxShadow.xl');
+  --docsearch-modal-background: theme("colors.white");
+  --docsearch-modal-shadow: theme("boxShadow.xl");
   --docsearch-searchbox-height: 3rem;
-  --docsearch-hit-color: theme('colors.slate.700');
-  --docsearch-hit-active-color: theme('colors.sky.600');
-  --docsearch-hit-active-background: theme('colors.slate.100');
+  --docsearch-hit-color: theme("colors.slate.700");
+  --docsearch-hit-active-color: theme("colors.slate.600");
+  --docsearch-hit-active-background: theme("colors.slate.100");
   --docsearch-footer-height: 3rem;
-  --docsearch-border-color: theme('colors.slate.200');
-  --docsearch-input-color: theme('colors.slate.900');
-  --docsearch-heading-color: theme('colors.slate.900');
-  --docsearch-key-background: theme('colors.slate.100');
-  --docsearch-key-hover-background: theme('colors.slate.200');
-  --docsearch-key-color: theme('colors.slate.500');
-  --docsearch-action-color: theme('colors.slate.400');
-  --docsearch-action-active-background: theme('colors.slate.200');
-  --docsearch-loading-background: theme('colors.slate.400');
-  --docsearch-loading-foreground: theme('colors.slate.900');
+  --docsearch-border-color: theme("colors.slate.200");
+  --docsearch-input-color: theme("colors.slate.900");
+  --docsearch-heading-color: theme("colors.slate.900");
+  --docsearch-key-background: theme("colors.slate.100");
+  --docsearch-key-hover-background: theme("colors.slate.200");
+  --docsearch-key-color: theme("colors.slate.500");
+  --docsearch-action-color: theme("colors.slate.400");
+  --docsearch-action-active-background: theme("colors.slate.200");
+  --docsearch-loading-background: theme("colors.slate.400");
+  --docsearch-loading-foreground: theme("colors.slate.900");
 }
 
 .dark {
   --docsearch-highlight-color: var(--docsearch-primary-color);
-  --docsearch-muted-color: theme('colors.slate.400');
-  --docsearch-emphasis-color: theme('colors.white');
-  --docsearch-logo-color: theme('colors.slate.300');
-  --docsearch-modal-background: theme('colors.slate.800');
-  --docsearch-modal-shadow: 0 0 0 1px theme('colors.slate.700'),
-    theme('boxShadow.xl');
-  --docsearch-hit-color: theme('colors.slate.300');
-  --docsearch-hit-active-color: theme('colors.sky.400');
+  --docsearch-muted-color: theme("colors.slate.400");
+  --docsearch-emphasis-color: theme("colors.white");
+  --docsearch-logo-color: theme("colors.slate.300");
+  --docsearch-modal-background: theme("colors.slate.800");
+  --docsearch-modal-shadow: 0 0 0 1px theme("colors.slate.700"), theme("boxShadow.xl");
+  --docsearch-hit-color: theme("colors.slate.300");
+  --docsearch-hit-active-color: theme("colors.brand.dark");
   --docsearch-hit-active-background: rgb(51 65 85 / 0.3);
   --docsearch-border-color: rgb(148 163 184 / 0.1);
-  --docsearch-heading-color: theme('colors.white');
+  --docsearch-heading-color: theme("colors.white");
   --docsearch-key-background: rgb(51 65 85 / 0.4);
   --docsearch-key-hover-background: rgb(51 65 85 / 0.8);
-  --docsearch-key-color: theme('colors.slate.400');
-  --docsearch-input-color: theme('colors.white');
-  --docsearch-action-color: theme('colors.slate.500');
-  --docsearch-action-active-background: theme('colors.slate.700');
-  --docsearch-loading-background: theme('colors.slate.500');
-  --docsearch-loading-foreground: theme('colors.white');
+  --docsearch-key-color: theme("colors.slate.400");
+  --docsearch-input-color: theme("colors.white");
+  --docsearch-action-color: theme("colors.slate.500");
+  --docsearch-action-active-background: theme("colors.slate.700");
+  --docsearch-loading-background: theme("colors.slate.500");
+  --docsearch-loading-foreground: theme("colors.white");
 }
 
 .DocSearch--active {
@@ -63,7 +62,7 @@
   height: -webkit-fill-available;
   height: calc(var(--docsearch-vh, 1vh) * 100);
   background-color: rgb(15 23 42 / 0.5);
-  backdrop-filter: blur(theme('backdropBlur.DEFAULT'));
+  backdrop-filter: blur(theme("backdropBlur.DEFAULT"));
   cursor: auto;
 }
 
@@ -110,7 +109,7 @@
 }
 
 .DocSearch-Input::placeholder {
-  color: theme('colors.slate.400');
+  color: theme("colors.slate.400");
   opacity: 1;
 }
 
@@ -184,14 +183,12 @@
 .DocSearch-Dropdown {
   height: 100%;
   max-height: calc(
-    var(--docsearch-vh, 1vh) * 100 - var(--docsearch-searchbox-height) -
-      var(--docsearch-footer-height)
+    var(--docsearch-vh, 1vh) * 100 - var(--docsearch-searchbox-height) - var(--docsearch-footer-height)
   );
   overflow-y: auto;
   overflow-y: overlay;
   padding: 1rem 0.5rem;
-  scrollbar-color: var(--docsearch-muted-color)
-    var(--docsearch-modal-background);
+  scrollbar-color: var(--docsearch-muted-color) var(--docsearch-modal-background);
   scrollbar-width: thin;
 }
 
@@ -275,14 +272,14 @@
 .DocSearch-Hit a {
   display: block;
   width: 100%;
-  border-radius: theme('borderRadius.lg');
+  border-radius: theme("borderRadius.lg");
 }
 
 .DocSearch-Hit-source,
 .DocSearch-NoResults .DocSearch-Help {
   margin-left: 0.75rem;
   margin-bottom: 0.5rem;
-  font-family: theme('fontFamily.display');
+  font-family: theme("fontFamily.display");
   color: var(--docsearch-heading-color);
   font-size: 0.875rem;
   font-weight: 500;
@@ -297,14 +294,14 @@
   display: none;
 }
 
-.DocSearch-Hit[aria-selected='true'] a,
+.DocSearch-Hit[aria-selected="true"] a,
 .DocSearch-Prefill:hover,
 .DocSearch-Prefill:focus {
   background-color: var(--docsearch-hit-active-background);
   outline: none;
 }
 
-.DocSearch-Hit[aria-selected='true'] mark {
+.DocSearch-Hit[aria-selected="true"] mark {
   text-decoration: underline;
 }
 
@@ -348,7 +345,7 @@ svg.DocSearch-Hit-Select-Icon {
   display: none;
 }
 
-.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-Select-Icon {
+.DocSearch-Hit[aria-selected="true"] .DocSearch-Hit-Select-Icon {
   display: block;
 }
 
@@ -381,10 +378,10 @@ svg.DocSearch-Hit-Select-Icon {
   line-height: 1rem;
 }
 
-.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-path,
-.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-text,
-.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-title,
-.DocSearch-Hit[aria-selected='true'] mark,
+.DocSearch-Hit[aria-selected="true"] .DocSearch-Hit-path,
+.DocSearch-Hit[aria-selected="true"] .DocSearch-Hit-text,
+.DocSearch-Hit[aria-selected="true"] .DocSearch-Hit-title,
+.DocSearch-Hit[aria-selected="true"] mark,
 .DocSearch-Prefill:hover,
 .DocSearch-Prefill:focus {
   color: var(--docsearch-hit-active-color);
@@ -407,7 +404,7 @@ svg.DocSearch-Hit-Select-Icon {
 
 .DocSearch-Prefill {
   width: 100%;
-  border-radius: theme('borderRadius.lg');
+  border-radius: theme("borderRadius.lg");
 }
 
 .DocSearch-Footer {
@@ -436,7 +433,7 @@ svg.DocSearch-Hit-Select-Icon {
   flex: none;
   font-size: 0.75rem;
   user-select: none;
-  border-radius: theme('borderRadius.md');
+  border-radius: theme("borderRadius.md");
   padding: 0 0.375rem;
   height: 1.5rem;
   margin-right: 1rem;
@@ -453,7 +450,7 @@ svg.DocSearch-Hit-Select-Icon {
 
   .DocSearch-Modal {
     height: auto;
-    border-radius: theme('borderRadius.xl');
+    border-radius: theme("borderRadius.xl");
     box-shadow: var(--docsearch-modal-shadow);
     margin: 4rem auto auto;
     width: auto;
@@ -489,15 +486,14 @@ svg.DocSearch-Hit-Select-Icon {
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: theme('borderRadius.md');
+    border-radius: theme("borderRadius.md");
     margin-right: 0.375rem;
   }
 
   .DocSearch-Dropdown {
     height: auto;
     max-height: calc(
-      var(--docsearch-modal-height) - var(--docsearch-searchbox-height) -
-        var(--docsearch-footer-height)
+      var(--docsearch-modal-height) - var(--docsearch-searchbox-height) - var(--docsearch-footer-height)
     );
   }
 }

apps/formbricks-com/styles/prism.css

@@ -1,5 +1,5 @@
-pre[class*='language-'] {
-  color: theme('colors.slate.50');
+pre[class*="language-"] {
+  color: theme("colors.slate.50");
 }
 
 .token.tag,
@@ -8,7 +8,7 @@ pre[class*='language-'] {
 .token.selector .class,
 .token.selector.class,
 .token.function {
-  color: theme('colors.pink.400');
+  color: theme("colors.pink.400");
 }
 
 .token.attr-name,
@@ -16,32 +16,32 @@ pre[class*='language-'] {
 .token.rule,
 .token.pseudo-class,
 .token.important {
-  color: theme('colors.slate.300');
+  color: theme("colors.slate.300");
 }
 
 .token.module {
-  color: theme('colors.pink.400');
+  color: theme("colors.pink.400");
 }
 
 .token.attr-value,
 .token.class,
 .token.string,
 .token.property {
-  color: theme('colors.sky.300');
+  color: theme("colors.teal.400");
 }
 
 .token.punctuation,
 .token.attr-equals {
-  color: theme('colors.slate.500');
+  color: theme("colors.slate.500");
 }
 
 .token.unit,
 .language-css .token.function {
-  color: theme('colors.teal.200');
+  color: theme("colors.teal.200");
 }
 
 .token.comment,
 .token.operator,
 .token.combinator {
-  color: theme('colors.slate.400');
+  color: theme("colors.slate.400");
 }

apps/formbricks-com/tailwind.config.js

@@ -23,50 +23,14 @@ module.exports = {
 
     extend: {
       colors: {
-        teal: {
-          DEFAULT: "#00E5CA",
-          50: "#9EFFF4",
-          100: "#89FFF1",
-          200: "#60FFEC",
-          300: "#38FFE7",
-          400: "#0FFFE3",
-          500: "#00E5CA",
-          600: "#0EDAC2",
-          700: "#007567",
-          800: "#003D36",
-          900: "#000504",
+        brand: {
+          DEFAULT: "#00E6CA",
+          light: "#00E6CA",
+          dark: "#00C4B8",
         },
 
         black: {
-          DEFAULT: "#000A1C",
-        },
-
-        blue: {
-          DEFAULT: "#002941",
-          50: "#f5f7fa",
-          100: "#eaeef4",
-          200: "#d3dde7",
-          300: "#a9bed0",
-          400: "#7a9bb6",
-          500: "#597d9e",
-          600: "#466483",
-          700: "#39516b",
-          800: "#002941",
-          900: "#001E30",
-        },
-
-        gray: {
-          DEFAULT: "#647176",
-          50: "#f5f7f9",
-          100: "#e5eaef",
-          200: "#ccd2d5",
-          300: "#a9b2b7",
-          400: "#7f8c91",
-          500: "#647176",
-          600: "#576167",
-          700: "#495055",
-          800: "#414649",
-          900: "#393d40",
+          DEFAULT: "#0F172A",
         },
       },