From 94f0cf490f5feccfbb6bef4b94a4648a62438ecf Mon Sep 17 00:00:00 2001 From: knugget Date: Mon, 30 Jan 2023 14:07:29 +0100 Subject: [PATCH] PMFPage --- .../formbricks-com/components/docs/Layout.tsx | 2 +- .../components/engine/SurveyPage.tsx | 2 +- .../components/engine/ThankYouPlans.tsx | 2 +- .../components/home/Features.tsx | 3 - apps/formbricks-com/components/home/Hero.tsx | 2 +- .../components/shared/BreakerCTA.tsx | 2 +- .../components/shared/Button.tsx | 149 ------------------ apps/formbricks-com/components/shared/CTA.tsx | 2 +- .../components/shared/EarlyBirdDeal.tsx | 35 ++++ .../components/shared/FeatureHighlight.tsx | 2 +- .../components/shared/Header.tsx | 2 +- .../components/shared/HeaderPMF.tsx | 107 +++++++++++++ .../components/shared/HeaderWithMenu.tsx | 2 +- .../formbricks-com/components/shared/Hero.jsx | 2 +- .../components/shared/LayoutPMF.tsx | 24 +++ .../components/shared/MdxCTA.tsx | 2 +- .../components/shared/MdxTryItCTA.tsx | 2 +- .../components/shared/NewsletterSignup.tsx | 2 +- .../components/shared/TryItCTA.tsx | 2 +- .../components/shared/pmfPricing.tsx | 64 +++----- apps/formbricks-com/pages/community.tsx | 2 +- apps/formbricks-com/pages/pmf.tsx | 61 ++++--- apps/formbricks-com/public/robots.txt | 2 + packages/ui/src/Button.tsx | 2 +- 24 files changed, 243 insertions(+), 234 deletions(-) delete mode 100644 apps/formbricks-com/components/shared/Button.tsx create mode 100644 apps/formbricks-com/components/shared/EarlyBirdDeal.tsx create mode 100644 apps/formbricks-com/components/shared/HeaderPMF.tsx create mode 100644 apps/formbricks-com/components/shared/LayoutPMF.tsx diff --git a/apps/formbricks-com/components/docs/Layout.tsx b/apps/formbricks-com/components/docs/Layout.tsx index e2ffec365a..ed98092835 100644 --- a/apps/formbricks-com/components/docs/Layout.tsx +++ b/apps/formbricks-com/components/docs/Layout.tsx @@ -11,7 +11,7 @@ import { Prose } from "@/components/shared/Prose"; import { Search } from "@/components/shared/Search"; import { ThemeSelector } from "@/components/shared/ThemeSelector"; import navigation from "@/lib/docsNavigation"; -import Button from "../shared/Button"; +import { Button } from "@formbricks/ui"; import MetaInformation from "../shared/MetaInformation"; function GitHubIcon(props: any) { diff --git a/apps/formbricks-com/components/engine/SurveyPage.tsx b/apps/formbricks-com/components/engine/SurveyPage.tsx index 66f6c1834b..241e4366d5 100644 --- a/apps/formbricks-com/components/engine/SurveyPage.tsx +++ b/apps/formbricks-com/components/engine/SurveyPage.tsx @@ -2,7 +2,7 @@ import clsx from "clsx"; import { usePlausible } from "next-plausible"; import { useEffect, useRef, useState } from "react"; import { useForm } from "react-hook-form"; -import Button from "../shared/Button"; +import { Button } from "@formbricks/ui"; import { SurveyPage } from "./engineTypes"; interface SurveyProps { diff --git a/apps/formbricks-com/components/engine/ThankYouPlans.tsx b/apps/formbricks-com/components/engine/ThankYouPlans.tsx index bb5edcecd7..4881a3c29a 100644 --- a/apps/formbricks-com/components/engine/ThankYouPlans.tsx +++ b/apps/formbricks-com/components/engine/ThankYouPlans.tsx @@ -1,4 +1,4 @@ -import Button from "../shared/Button"; +import { Button } from "@formbricks/ui"; import { SurveyElement } from "./engineTypes"; import { useRouter } from "next/router"; diff --git a/apps/formbricks-com/components/home/Features.tsx b/apps/formbricks-com/components/home/Features.tsx index 2d9b833090..066d624616 100644 --- a/apps/formbricks-com/components/home/Features.tsx +++ b/apps/formbricks-com/components/home/Features.tsx @@ -24,9 +24,6 @@ const features = [ export default function Features() { return (
-
-
-
>; - -export type ButtonBaseProps = { - variant?: "highlight" | "primary" | "secondary" | "minimal" | "warn" | "alert"; - size?: "base" | "sm" | "lg" | "fab" | "icon"; - loading?: boolean; - disabled?: boolean; - onClick?: (event: React.MouseEvent) => void; - StartIcon?: SVGComponent; - startIconClassName?: string; - EndIcon?: SVGComponent; - endIconClassName?: string; - shallow?: boolean; -}; -export type ButtonProps = ButtonBaseProps & - ( - | (Omit & LinkProps) - | (Omit & { href?: never }) - ); - -export const Button = forwardRef(function Button( - props: ButtonProps, - forwardedRef -) { - const { - loading = false, - variant = "primary", - size = "base", - StartIcon, - startIconClassName, - endIconClassName, - EndIcon, - shallow, - // attributes propagated from `HTMLAnchorProps` or `HTMLButtonProps` - ...passThroughProps - } = props; - // Buttons are **always** disabled if we're in a `loading` state - const disabled = props.disabled || loading; - - // If pass an `href`-attr is passed it's ``, otherwise it's a ` +
+

+ This saves you $588 every year. +

+
+ formbricks favicon open source forms typeform alternative +
+
+
+ ); +} diff --git a/apps/formbricks-com/components/shared/FeatureHighlight.tsx b/apps/formbricks-com/components/shared/FeatureHighlight.tsx index fe34c0bd51..f5c3d99f61 100644 --- a/apps/formbricks-com/components/shared/FeatureHighlight.tsx +++ b/apps/formbricks-com/components/shared/FeatureHighlight.tsx @@ -1,4 +1,4 @@ -import Button from "./Button"; +import { Button } from "@formbricks/ui"; import { useRouter } from "next/router"; import clsx from "clsx"; diff --git a/apps/formbricks-com/components/shared/Header.tsx b/apps/formbricks-com/components/shared/Header.tsx index 071fb45d51..5c2a9aec23 100644 --- a/apps/formbricks-com/components/shared/Header.tsx +++ b/apps/formbricks-com/components/shared/Header.tsx @@ -3,7 +3,7 @@ import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline"; import Link from "next/link"; import { useRouter } from "next/router"; import { Fragment } from "react"; -import Button from "./Button"; +import { Button } from "@formbricks/ui"; import { FooterLogo } from "./Logo"; import { ThemeSelector } from "./ThemeSelector"; diff --git a/apps/formbricks-com/components/shared/HeaderPMF.tsx b/apps/formbricks-com/components/shared/HeaderPMF.tsx new file mode 100644 index 0000000000..ce2a398691 --- /dev/null +++ b/apps/formbricks-com/components/shared/HeaderPMF.tsx @@ -0,0 +1,107 @@ +import { Popover, Transition } from "@headlessui/react"; +import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline"; +import Link from "next/link"; +import { useRouter } from "next/router"; +import { Fragment } from "react"; +import { Button } from "@formbricks/ui"; +import { FooterLogo } from "./Logo"; +import { ThemeSelector } from "./ThemeSelector"; + +export default function Header() { + const router = useRouter(); + return ( + +
+
+ + Formbricks + + +
+
+ + Open menu + +
+ + + How it works + + + Pricing

50%

+ + +
+ + + +
+
+ + + +
+
+
+
+ +
+
+ + Close menu + +
+
+
+
+
+ Community + Blog + + +
+
+
+ + + + ); +} + +function GitHubIcon(props: any) { + return ( + + ); +} diff --git a/apps/formbricks-com/components/shared/HeaderWithMenu.tsx b/apps/formbricks-com/components/shared/HeaderWithMenu.tsx index bf21c10b1e..0b41b9e446 100644 --- a/apps/formbricks-com/components/shared/HeaderWithMenu.tsx +++ b/apps/formbricks-com/components/shared/HeaderWithMenu.tsx @@ -17,7 +17,7 @@ import clsx from "clsx"; import Link from "next/link"; import { useRouter } from "next/router"; import { Fragment } from "react"; -import Button from "./Button"; +import { Button } from "@formbricks/ui"; import { FooterLogo } from "./Logo"; import { ThemeSelector } from "./ThemeSelector"; diff --git a/apps/formbricks-com/components/shared/Hero.jsx b/apps/formbricks-com/components/shared/Hero.jsx index e161b30c9f..5569671df9 100644 --- a/apps/formbricks-com/components/shared/Hero.jsx +++ b/apps/formbricks-com/components/shared/Hero.jsx @@ -3,7 +3,7 @@ import Image from "next/image"; import clsx from "clsx"; import Highlight, { defaultProps } from "prism-react-renderer"; -import { Button } from "@/components/shared/Button"; +import { Button } from "@formbricks/ui"; import { HeroBackground } from "@/components/shared/HeroBackground"; import blurCyanImage from "@/images/blur-cyan.png"; import blurIndigoImage from "@/images/blur-indigo.png"; diff --git a/apps/formbricks-com/components/shared/LayoutPMF.tsx b/apps/formbricks-com/components/shared/LayoutPMF.tsx new file mode 100644 index 0000000000..f6bd59a51f --- /dev/null +++ b/apps/formbricks-com/components/shared/LayoutPMF.tsx @@ -0,0 +1,24 @@ +import Footer from "./Footer"; +import HeaderPMF from "./HeaderPMF"; +import MetaInformation from "./MetaInformation"; + +interface LayoutProps { + children: React.ReactNode; + title: string; + description: string; +} + +export default function Layout({ title, description, children }: LayoutProps) { + return ( +
+ + + { +
+ {children} +
+ } +
+
+ ); +} diff --git a/apps/formbricks-com/components/shared/MdxCTA.tsx b/apps/formbricks-com/components/shared/MdxCTA.tsx index 6ffa1ffd1b..7737c01183 100644 --- a/apps/formbricks-com/components/shared/MdxCTA.tsx +++ b/apps/formbricks-com/components/shared/MdxCTA.tsx @@ -1,4 +1,4 @@ -import Button from "@/components/shared/Button"; +import { Button } from "@formbricks/ui"; import { useRouter } from "next/router"; import HeadingCentered from "./HeadingCentered"; diff --git a/apps/formbricks-com/components/shared/MdxTryItCTA.tsx b/apps/formbricks-com/components/shared/MdxTryItCTA.tsx index 8e2c52abb5..410f18484c 100644 --- a/apps/formbricks-com/components/shared/MdxTryItCTA.tsx +++ b/apps/formbricks-com/components/shared/MdxTryItCTA.tsx @@ -1,4 +1,4 @@ -import Button from "./Button"; +import { Button } from "@formbricks/ui"; import { DocumentDuplicateIcon } from "@heroicons/react/24/outline"; import { useRouter } from "next/router"; diff --git a/apps/formbricks-com/components/shared/NewsletterSignup.tsx b/apps/formbricks-com/components/shared/NewsletterSignup.tsx index 7a206bbc1b..75290bcc26 100644 --- a/apps/formbricks-com/components/shared/NewsletterSignup.tsx +++ b/apps/formbricks-com/components/shared/NewsletterSignup.tsx @@ -1,5 +1,5 @@ import Image from "next/image"; -import Button from "@/components/shared/Button"; +import { Button } from "@formbricks/ui"; import Friends from "@/images/newsletter-signup-gif.gif"; export default function WaitlistForm() { diff --git a/apps/formbricks-com/components/shared/TryItCTA.tsx b/apps/formbricks-com/components/shared/TryItCTA.tsx index 5e8713e82d..078ac2db88 100644 --- a/apps/formbricks-com/components/shared/TryItCTA.tsx +++ b/apps/formbricks-com/components/shared/TryItCTA.tsx @@ -1,4 +1,4 @@ -import Button from "../shared/Button"; +import { Button } from "@formbricks/ui"; import { DocumentDuplicateIcon } from "@heroicons/react/24/outline"; import { useRouter } from "next/router"; diff --git a/apps/formbricks-com/components/shared/pmfPricing.tsx b/apps/formbricks-com/components/shared/pmfPricing.tsx index de2aa7a824..d0b1326cd9 100644 --- a/apps/formbricks-com/components/shared/pmfPricing.tsx +++ b/apps/formbricks-com/components/shared/pmfPricing.tsx @@ -1,18 +1,16 @@ -import { ArrowRightIcon, EnvelopeIcon } from "@heroicons/react/20/solid"; import { useRouter } from "next/router"; -import { Fragment, useState } from "react"; import HeadingCentered from "./HeadingCentered"; import clsx from "clsx"; -import Button from "@/components/shared/Button"; -import Image from "next/image"; -import EarlyBird from "@/images/early bird deal for open source jotform alternative typeform and surveymonkey_v2.svg"; +import { Button } from "@formbricks/ui"; +import EarlyBirdDeal from "./EarlyBirdDeal"; const tiers = [ { name: "Self-hosting", href: "#", - priceMonthly: "$99", + priceMonthly: "tba", button: "secondary", + discounted: false, highlight: false, paymentRythm: "/month", description: "Host Formbricks on your own server.", @@ -24,38 +22,42 @@ const tiers = [ href: "#", priceMonthly: "$99", button: "highlight", + discounted: true, highlight: true, paymentRythm: "/month", description: "Use the managed cloud, gather insights immediately.", - ctaName: "Sign Up", + ctaName: "Sign up now", ctaAction: () => window.open("https://app.formbricks.com"), }, ]; -export default function Pricelist() { +export default function PmfPricing() { const router = useRouter(); return ( -
-
- +
+
+
{tiers.map((tier) => (
+ className={clsx( + `rounded-lg shadow-sm`, + tier.highlight ? "border-2 border-slate-400 bg-slate-300" : "bg-slate-100" + )}>

{tier.name}

{tier.description}

@@ -63,14 +65,16 @@ export default function Pricelist() { {tier.priceMonthly} {" "} + {tier.discounted && "$49"} {tier.paymentRythm} @@ -79,7 +83,7 @@ export default function Pricelist() { )} @@ -88,30 +92,8 @@ export default function Pricelist() { ))}
-
-
-
-

- 50% off for early birds. -

-

- Limited Early Bird deal. Only{" "} - 12 left. -

- -
- -
-

- This saves you $588 every year. -

-
- formbricks favicon open source forms typeform alternative -
-
-
+
+
); diff --git a/apps/formbricks-com/pages/community.tsx b/apps/formbricks-com/pages/community.tsx index 0d3c5a7607..dee74a00c0 100644 --- a/apps/formbricks-com/pages/community.tsx +++ b/apps/formbricks-com/pages/community.tsx @@ -1,6 +1,6 @@ import Layout from "@/components/shared/Layout"; import HeroTitle from "@/components/shared/HeroTitle"; -import Button from "@/components/shared/Button"; +import { Button } from "@formbricks/ui"; import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/outline"; import { useRouter } from "next/router"; import { ChatBubbleOvalLeftEllipsisIcon, EnvelopeIcon } from "@heroicons/react/24/solid"; diff --git a/apps/formbricks-com/pages/pmf.tsx b/apps/formbricks-com/pages/pmf.tsx index c86d0122f1..c7119981e1 100644 --- a/apps/formbricks-com/pages/pmf.tsx +++ b/apps/formbricks-com/pages/pmf.tsx @@ -1,19 +1,20 @@ -import Layout from "@/components/shared/Layout"; -import Button from "@/components/shared/Button"; +import LayoutPMF from "@/components/shared/LayoutPMF"; +import { Button } from "@formbricks/ui"; import { useRouter } from "next/router"; import BreakerCTA from "@/components/shared/BreakerCTA"; import Features from "@/components/home/Features"; -import Pricing from "@/components/shared/PmfPricing"; +import PmfPricing from "@/components/shared/PmfPricing"; import Image from "next/image"; import DashboardMockup from "@/images/dashboard-mockup.png"; import Pipelines from "@/images/pipelines.png"; import PreSegmentation from "@/images/pre-segmentation.png"; import PmfDummy from "@/components/shared/PmfDummy"; +import EarlyBirdDeal from "@/components/shared/EarlyBirdDeal"; export default function GetStartedPage() { const router = useRouter(); return ( -
@@ -52,30 +53,30 @@ export default function GetStartedPage() { {/* Video */} {/* Steps */} -
+
-
+

Step 1

1. Pre-Segmentation

Signed up for more than 4 weeks? Used a specific feature? Set up a custom condition to{" "} - only survey the right subset of your users. + only survey the right subset of your user base.

- react library + react library {/* react library */}
@@ -85,9 +86,10 @@ export default function GetStartedPage() {
-
- {/* react library - react library */} +
+
+ +

Step 2

@@ -105,7 +107,7 @@ export default function GetStartedPage() {
-
+

Step 3

Loop in your team @@ -116,16 +118,21 @@ export default function GetStartedPage() {

- react library + react library
-
+
- react library{" "} + react library{" "} {/* react library */}
@@ -135,23 +142,27 @@ export default function GetStartedPage() { Make better decisions

- A dashboard specifically built to gauge Product-Market Fit survey. Beat confirmation bias and + A dashboard specifically built to gauge Product-Market Fit. Beat confirmation bias and build conviction for the next product decision.

+ - - - + /> */} +
+ {" "} + +
+ ); } diff --git a/apps/formbricks-com/public/robots.txt b/apps/formbricks-com/public/robots.txt index 71a3a790ab..43c1f8d2eb 100644 --- a/apps/formbricks-com/public/robots.txt +++ b/apps/formbricks-com/public/robots.txt @@ -1,7 +1,9 @@ # * User-agent: * +Disallow: /pmf Allow: / + # Host Host: https://formbricks.com diff --git a/packages/ui/src/Button.tsx b/packages/ui/src/Button.tsx index 2599c00bf8..5235acd4c8 100644 --- a/packages/ui/src/Button.tsx +++ b/packages/ui/src/Button.tsx @@ -68,7 +68,7 @@ export const Button = forwardRef