lp: fix demo page header (#1312)

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

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>

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>
+  );
+}

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>
       }

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 (

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>
+  );
+}

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>
   );
 }