add gitpod docs page, tweak pricing table

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

@@ -1,16 +1,16 @@
 "use client";
 
-import { useRef } from "react";
-import Link from "next/link";
-import { usePathname } from "next/navigation";
 import clsx from "clsx";
 import { AnimatePresence, motion, useIsPresent } from "framer-motion";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useRef } from "react";
 
+import { remToPx } from "@/lib/remToPx";
 import { Button } from "./Button";
 import { useIsInsideMobileNavigation } from "./MobileNavigation";
 import { useSectionStore } from "./SectionProvider";
 import { Tag } from "./Tag";
-import { remToPx } from "@/lib/remToPx";
 
 interface NavGroup {
   title: string;
@@ -255,6 +255,7 @@ export const navigation: Array<NavGroup> = [
       { title: "Introduction", href: "/docs/contributing/introduction" },
       { title: "How we code at Formbricks", href: "/docs/contributing/how-we-code" },
       { title: "Setup Dev Environment", href: "/docs/contributing/setup" },
+      { title: "Gitpod", href: "/docs/contributing/gitpod" },
       { title: "Demo App", href: "/docs/contributing/demo" },
       { title: "Troubleshooting", href: "/docs/contributing/troubleshooting" },
     ],

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

@@ -3,26 +3,24 @@ import { Button } from "@formbricks/ui";
 export const OpenSourceInfo = () => {
   return (
     <div className="my-8 md:my-20">
-      <div className="px-4 md:px-16">
-        <div className=" rounded-xl bg-slate-100 px-4 py-4 dark:bg-slate-800 md:px-12">
+      <div className="px-8 md:px-16">
+        <div className=" rounded-xl bg-slate-100 px-4 py-8 dark:bg-slate-800 md:px-12">
           <h2 className="text-lg font-semibold leading-7 tracking-tight text-slate-800 dark:text-slate-200 md:text-2xl">
             Open Source
           </h2>
 
-          <p className=" text-slate-800 dark:text-slate-200">
+          <p className=" my-2 text-slate-600 dark:text-slate-300">
             Formbricks is an open source project. You can self-host it for free. We provide multiple easy
             deployment options as per your customisation needs. We have documented the process of self-hosting
             Formbricks on your own server using Docker, Bash Scripting, and Building from Source.
           </p>
-          <div className="flex items-center justify-center">
+          <div className="mt-4 space-x-2">
             <Button
-              className="mr-4 mt-4 justify-center px-8 text-xs shadow-sm md:text-lg"
-              variant="highlight"
+              variant="darkCTA"
               onClick={() => window.open("https://github.com/formbricks/formbricks", "_blank")}>
               Star us on GitHub
             </Button>
             <Button
-              className="ml-4 mt-4 justify-center px-8 text-xs shadow-sm md:text-lg"
               onClick={() => window.open("/docs/self-hosting/deployment", "_blank")}
               variant="secondary">
               Read our Docs on Self Hosting

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

@@ -6,17 +6,17 @@ export const GetStartedWithPricing = ({ showDetailed }: { showDetailed: boolean
       <div className="flex items-center gap-x-4 px-4 pb-4 md:gap-4 md:px-16">
         <div className="w-1/3"></div>
         <div className="w-1/3 text-left text-sm text-slate-800 dark:text-slate-100">
-          <p className="font-semibold">Free</p>
+          <p className="text-base font-semibold">Free</p>
 
           {showDetailed && (
-            <p className="text-xs md:text-base">
+            <p className="leading text-xs text-slate-500 dark:text-slate-400 md:text-base">
               General free usage on every product. Best for early stage startups and hobbyists
             </p>
           )}
 
           <Button
-            className="mt-4 w-full justify-center bg-slate-300 px-4 text-xs shadow-sm hover:bg-slate-200 dark:bg-slate-600 dark:hover:bg-slate-500 md:text-lg"
-            variant={"secondary"}
+            className="mt-4 w-full justify-center"
+            variant="secondary"
             onClick={() => {
               window.open("https://app.formbricks.com/", "_blank");
             }}>
@@ -24,16 +24,16 @@ export const GetStartedWithPricing = ({ showDetailed }: { showDetailed: boolean
           </Button>
         </div>
         <div className="w-1/3 text-left text-sm text-slate-800 dark:text-slate-100">
-          <p className="font-semibold"> Paid</p>
+          <p className="text-base font-semibold"> Paid</p>
           {showDetailed && (
-            <p className="text-xs md:text-base">
+            <p className="leading text-xs text-slate-500 dark:text-slate-400 md:text-base">
               Formbricks with the next-generation features, Pay only for the tracked users.
             </p>
           )}
 
           <Button
-            className="mt-4 w-full justify-center px-4 text-xs shadow-sm md:text-lg"
-            variant={"highlight"}
+            className="mt-4 w-full justify-center"
+            variant="highlight"
             onClick={() => {
               window.open("https://app.formbricks.com/", "_blank");
             }}>

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

@@ -1,9 +1,9 @@
-import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from "@formbricks/ui";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@formbricks/ui";
 import { CheckIcon, XMarkIcon } from "@heroicons/react/24/outline";
 
 export const PricingTable = ({ leadRow, pricing, endRow }) => {
   return (
-    <div className="-mt-16 grid grid-cols-1 px-4 md:gap-4 md:px-16 ">
+    <div className="grid grid-cols-1 px-4 md:gap-4 md:px-16 ">
       <div className="rounded-xl px-4 md:px-12">
         <div className="flex items-center gap-x-4">
           <div className="w-1/3 text-left font-semibold text-slate-700 dark:text-slate-200 md:text-xl">
@@ -11,7 +11,7 @@ export const PricingTable = ({ leadRow, pricing, endRow }) => {
           </div>
           <div
             className="flex w-1/3 items-center justify-center text-center text-sm font-semibold
-           text-slate-700 dark:text-slate-200 md:text-lg">
+           text-slate-500 dark:text-slate-200 md:text-lg">
             {leadRow.free}
           </div>
 
@@ -34,7 +34,7 @@ export const PricingTable = ({ leadRow, pricing, endRow }) => {
             </div>
             <div className="flex w-1/3 items-center justify-center text-center text-sm text-slate-800 dark:text-slate-100">
               {feature.addOnText ? (
-                <TooltipProvider>
+                <TooltipProvider delayDuration={50}>
                   <Tooltip>
                     <TooltipTrigger>
                       <u>{feature.free}</u>

apps/formbricks-com/pages/pricing.tsx

@@ -1,9 +1,9 @@
 import HeroTitle from "@/components/shared/HeroTitle";
 import Layout from "@/components/shared/Layout";
-import { PricingTable } from "../components/shared/PricingTable";
-import { PricingCalculator } from "../components/shared/PricingCalculator";
-import { GetStartedWithPricing } from "@/components/shared/PricingGetStarted";
 import { OpenSourceInfo } from "@/components/shared/OpenSourceInfo";
+import { GetStartedWithPricing } from "@/components/shared/PricingGetStarted";
+import { PricingCalculator } from "../components/shared/PricingCalculator";
+import { PricingTable } from "../components/shared/PricingTable";
 
 const inProductSurveys = {
   leadRow: {
@@ -110,36 +110,33 @@ const PricingPage = () => {
         headingTeal="Pricing"
         subheading="Choose what's best for you! All our plans start free."
       />
+      <div className="space-y-24">
+        <div>
+          <GetStartedWithPricing showDetailed={true} />
 
-      <GetStartedWithPricing showDetailed={true} />
+          <PricingTable
+            leadRow={inProductSurveys.leadRow}
+            pricing={inProductSurveys.features}
+            endRow={inProductSurveys.endRow}
+          />
+        </div>
 
-      <PricingTable
-        leadRow={inProductSurveys.leadRow}
-        pricing={inProductSurveys.features}
-        endRow={inProductSurveys.endRow}
-      />
-      <div className="my-12 md:my-20"></div>
-      <PricingTable
-        leadRow={linkSurveys.leadRow}
-        pricing={linkSurveys.features}
-        endRow={linkSurveys.endRow}
-      />
+        <PricingTable
+          leadRow={linkSurveys.leadRow}
+          pricing={linkSurveys.features}
+          endRow={linkSurveys.endRow}
+        />
 
-      <div className="my-12 md:my-20"></div>
-
-      <PricingTable
-        leadRow={integrations.leadRow}
-        pricing={integrations.features}
-        endRow={integrations.endRow}
-      />
-
-      <div className="my-4"></div>
-
-      <GetStartedWithPricing showDetailed={false} />
-
-      <PricingCalculator />
-
-      <OpenSourceInfo />
+        <PricingTable
+          leadRow={integrations.leadRow}
+          pricing={integrations.features}
+          endRow={integrations.endRow}
+        />
+        <div>
+          <PricingCalculator />
+          <OpenSourceInfo />
+        </div>
+      </div>
     </Layout>
   );
 };