From 7ea11133d8accbdd72447ec69739d6f7db0baba7 Mon Sep 17 00:00:00 2001
From: Johannes <72809645+jobenjada@users.noreply.github.com>
Date: Thu, 19 Oct 2023 10:10:54 +0200
Subject: [PATCH] lp: fix demo page header (#1312)

---
 .../components/shared/BestPractices.tsx       |  1 +
 .../components/shared/Header.tsx              |  2 +-
 .../formbricks-com/pages/demo/HeaderLight.tsx | 43 +++++++++++++++++++
 .../pages/{formtribe => demo}/LayoutLight.tsx |  4 +-
 apps/formbricks-com/pages/demo/index.tsx      |  2 +-
 .../{HeaderLight.tsx => HeaderTribe.tsx}      |  0
 .../pages/formtribe/LayoutTribe.tsx           | 24 +++++++++++
 apps/formbricks-com/pages/formtribe/index.tsx |  6 +--
 8 files changed, 75 insertions(+), 7 deletions(-)
 create mode 100644 apps/formbricks-com/pages/demo/HeaderLight.tsx
 rename apps/formbricks-com/pages/{formtribe => demo}/LayoutLight.tsx (84%)
 rename apps/formbricks-com/pages/formtribe/{HeaderLight.tsx => HeaderTribe.tsx} (100%)
 create mode 100644 apps/formbricks-com/pages/formtribe/LayoutTribe.tsx

diff --git a/apps/formbricks-com/components/shared/BestPractices.tsx b/apps/formbricks-com/components/shared/BestPractices.tsx
index fb0567c1b8..6280683dce 100644
--- a/apps/formbricks-com/components/shared/BestPractices.tsx
+++ b/apps/formbricks-com/components/shared/BestPractices.tsx
@@ -24,6 +24,7 @@ export default function InsightOppos() {
 
       <div className="mx-auto mt-4 w-fit px-4 py-2 text-center">
         <Button
+          className="hidden md:block"
           variant="highlight"
           onClick={() => {
             router.push("/demo");
diff --git a/apps/formbricks-com/components/shared/Header.tsx b/apps/formbricks-com/components/shared/Header.tsx
index 0e0e002bb8..15a99024fe 100644
--- a/apps/formbricks-com/components/shared/Header.tsx
+++ b/apps/formbricks-com/components/shared/Header.tsx
@@ -121,7 +121,7 @@ export default function Header() {
   return (
     <Popover className={`${stickyNavClass}`} as="header">
       <a href="https://www.producthunt.com/products/formbricks" target="_blank">
-        <div className="bg-[#ff6154] px-4 py-2 text-center text-sm text-white lg:py-0">
+        <div className="hidden bg-[#ff6154] px-4 py-2 text-center text-sm text-white md:block lg:py-0">
           We&apos;re launching soon on Product Hunt - get notified 🚀
         </div>
       </a>
diff --git a/apps/formbricks-com/pages/demo/HeaderLight.tsx b/apps/formbricks-com/pages/demo/HeaderLight.tsx
new file mode 100644
index 0000000000..107bf9283e
--- /dev/null
+++ b/apps/formbricks-com/pages/demo/HeaderLight.tsx
@@ -0,0 +1,43 @@
+import { Button } from "@formbricks/ui/Button";
+import { Popover } from "@headlessui/react";
+import { usePlausible } from "next-plausible";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { FooterLogo } from "../../components/shared/Logo";
+
+export default function HeaderLight() {
+  const plausible = usePlausible();
+  const router = useRouter();
+  return (
+    <Popover className="relative" as="header">
+      <div className="max-w-8xl mx-auto flex items-center justify-between py-6 sm:px-2  md:justify-start lg:px-8 xl:px-12">
+        <div className="flex w-0 flex-1 justify-start">
+          <Link href="/">
+            <span className="sr-only">Formbricks</span>
+            <FooterLogo className="ml-7 h-8 w-auto sm:h-10" />
+          </Link>
+        </div>
+
+        <div className="hidden flex-1 items-center justify-end md:flex">
+          <Button
+            variant="secondary"
+            onClick={() => {
+              router.push("https://cal.com/johannes/formbricks-demo");
+              plausible("Demo_CTA_TalkToUs");
+            }}>
+            Talk to us
+          </Button>
+          <Button
+            variant="highlight"
+            className="ml-2"
+            onClick={() => {
+              router.push("https://app.formbricks.com/auth/signup");
+              plausible("Demo_CTA_TryForFree");
+            }}>
+            Start for free
+          </Button>
+        </div>
+      </div>
+    </Popover>
+  );
+}
diff --git a/apps/formbricks-com/pages/formtribe/LayoutLight.tsx b/apps/formbricks-com/pages/demo/LayoutLight.tsx
similarity index 84%
rename from apps/formbricks-com/pages/formtribe/LayoutLight.tsx
rename to apps/formbricks-com/pages/demo/LayoutLight.tsx
index a9069a27de..b95f6211a4 100644
--- a/apps/formbricks-com/pages/formtribe/LayoutLight.tsx
+++ b/apps/formbricks-com/pages/demo/LayoutLight.tsx
@@ -10,11 +10,11 @@ interface LayoutProps {
 
 export default function Layout({ title, description, children }: LayoutProps) {
   return (
-    <div className="max-w-8xl mx-auto">
+    <div className="mx-auto w-full">
       <MetaInformation title={title} description={description} />
       <HeaderLight />
       {
-        <main className="relative mx-auto flex w-full max-w-6xl flex-col justify-center px-2 lg:px-8 xl:px-12">
+        <main className="max-w-8xl relative mx-auto flex w-full flex-col justify-center px-2 lg:px-8 xl:px-12">
           {children}
         </main>
       }
diff --git a/apps/formbricks-com/pages/demo/index.tsx b/apps/formbricks-com/pages/demo/index.tsx
index 2713807fb8..eb969e0319 100644
--- a/apps/formbricks-com/pages/demo/index.tsx
+++ b/apps/formbricks-com/pages/demo/index.tsx
@@ -1,5 +1,5 @@
 import DemoView from "@/components/dummyUI/DemoView";
-import LayoutWaitlist from "@/pages/formtribe/LayoutLight";
+import LayoutWaitlist from "@/pages/demo/LayoutLight";
 
 export default function DemoPage() {
   return (
diff --git a/apps/formbricks-com/pages/formtribe/HeaderLight.tsx b/apps/formbricks-com/pages/formtribe/HeaderTribe.tsx
similarity index 100%
rename from apps/formbricks-com/pages/formtribe/HeaderLight.tsx
rename to apps/formbricks-com/pages/formtribe/HeaderTribe.tsx
diff --git a/apps/formbricks-com/pages/formtribe/LayoutTribe.tsx b/apps/formbricks-com/pages/formtribe/LayoutTribe.tsx
new file mode 100644
index 0000000000..e98252b343
--- /dev/null
+++ b/apps/formbricks-com/pages/formtribe/LayoutTribe.tsx
@@ -0,0 +1,24 @@
+import Footer from "../../components/shared/Footer";
+import MetaInformation from "../../components/shared/MetaInformation";
+import HeaderTribe from "./HeaderTribe";
+
+interface LayoutProps {
+  children: React.ReactNode;
+  title: string;
+  description: string;
+}
+
+export default function Layout({ title, description, children }: LayoutProps) {
+  return (
+    <div className="max-w-8xl mx-auto">
+      <MetaInformation title={title} description={description} />
+      <HeaderTribe />
+      {
+        <main className="relative mx-auto flex w-full max-w-6xl flex-col justify-center px-2 lg:px-8 xl:px-12">
+          {children}
+        </main>
+      }
+      <Footer />
+    </div>
+  );
+}
diff --git a/apps/formbricks-com/pages/formtribe/index.tsx b/apps/formbricks-com/pages/formtribe/index.tsx
index dd6a7de5d8..a823d272e6 100644
--- a/apps/formbricks-com/pages/formtribe/index.tsx
+++ b/apps/formbricks-com/pages/formtribe/index.tsx
@@ -1,8 +1,8 @@
-import LayoutLight from "@/pages/formtribe/LayoutLight";
 import { Button } from "@formbricks/ui/Button";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@formbricks/ui/Tooltip";
 import Head from "next/head";
 import Image from "next/image";
+import LayoutTribe from "./LayoutTribe";
 
 import Dhru from "@/images/formtribe/dhru.jpeg";
 import Jojo from "@/images/formtribe/jojo.jpeg";
@@ -623,7 +623,7 @@ export default function FormTribeHackathon() {
     document.documentElement.classList.remove("dark");
   }, []);
   return (
-    <LayoutLight
+    <LayoutTribe
       title="FormTribe Hackathon"
       description="Can we ship an Open Source Typeform alternative in 30 days?">
       <Head>
@@ -1036,7 +1036,7 @@ export default function FormTribeHackathon() {
       </Button>
       {/* Breaker 3 */}
       <Breaker icon="👋" title="Join the Tribe!" />
-    </LayoutLight>
+    </LayoutTribe>
   );
 }