mirror/formbricks-formbricks
1
0
Fork 0
mirror of https://github.com/formbricks/formbricks.git synced 2026-02-09 08:09:46 -06:00
Code Issues Packages Projects Releases 100 Wiki Activity

PMFPage

Browse Source
This commit is contained in:
knugget
2023-01-30 14:07:29 +01:00
parent 825a6e8c39
commit 94f0cf490f
24 changed files with 243 additions and 234 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/formbricks-com/components/docs/Layout.tsx
View File

@@ -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) {

2
apps/formbricks-com/components/engine/SurveyPage.tsx
View File

@@ -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 {

2
apps/formbricks-com/components/engine/ThankYouPlans.tsx
View File

@@ -1,4 +1,4 @@
import Button from "../shared/Button";
import { Button } from "@formbricks/ui";
import { SurveyElement } from "./engineTypes";
import { useRouter } from "next/router";

3
apps/formbricks-com/components/home/Features.tsx
View File

@@ -24,9 +24,6 @@ const features = [
export default function Features() {
return (
<div className="relative px-4 pt-16 pb-20 sm:px-6 lg:px-8 lg:pt-24 lg:pb-28">
<div className="absolute inset-0">
<div className="h-1/3 sm:h-2/3" />
</div>
<div className="relative mx-auto max-w-7xl">
<HeadingCentered
closer

2
apps/formbricks-com/components/home/Hero.tsx
View File

@@ -1,4 +1,4 @@
import Button from "../shared/Button";
import { Button } from "@formbricks/ui";
import HeroAnimation from "../shared/HeroAnimation";
import { useRouter } from "next/router";

2
apps/formbricks-com/components/shared/BreakerCTA.tsx
View File

@@ -1,4 +1,4 @@
import Button from "./Button";
import { Button } from "@formbricks/ui";
import { useRouter } from "next/router";
import clsx from "clsx";

149
apps/formbricks-com/components/shared/Button.tsx
View File

@@ -1,149 +0,0 @@
import Link, { LinkProps } from "next/link";
import React, { forwardRef } from "react";
import clsx from "clsx";
type SVGComponent = React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
export type ButtonBaseProps = {
variant?: "highlight" | "primary" | "secondary" | "minimal" | "warn" | "alert";
size?: "base" | "sm" | "lg" | "fab" | "icon";
loading?: boolean;
disabled?: boolean;
onClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
StartIcon?: SVGComponent;
startIconClassName?: string;
EndIcon?: SVGComponent;
endIconClassName?: string;
shallow?: boolean;
};
export type ButtonProps = ButtonBaseProps &
(
| (Omit<JSX.IntrinsicElements["a"], "href" | "onClick"> & LinkProps)
| (Omit<JSX.IntrinsicElements["button"], "onClick"> & { href?: never })
);
export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonProps>(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 `<a>`, otherwise it's a `<button />`
const isLink = typeof props.href !== "undefined";
const elementType = isLink ? "a" : "button";
const element = React.createElement(
elementType,
{
...passThroughProps,
disabled,
ref: forwardedRef,
className: clsx(
// base styles independent what type of button it is
"inline-flex items-center appearance-none",
// different styles depending on size
size === "sm" && "px-3 py-2 text-sm leading-4 font-medium rounded-lg",
size === "base" && "px-6 py-2 text-sm font-medium rounded-xl",
size === "lg" && "px-4 py-2 text-base font-medium rounded-lg",
size === "icon" &&
"w-10 h-10 justify-center group p-2 border rounded-lg border-transparent text-neutral-400 hover:border-gray-200 transition",
// turn button into a floating action button (fab)
size === "fab" ? "fixed" : "relative",
size === "fab" && "justify-center bottom-20 right-8 rounded-full p-4 w-14 h-14",
// different styles depending on variant
variant === "highlight" &&
(disabled
? "border border-transparent bg-gray-400 text-white"
: "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"
: "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"
: "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-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"
: "text-gray-700 bg-transparent hover:text-red-700 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:bg-red-50 focus:ring-red-500"),
// set not-allowed cursor if disabled
loading ? "cursor-wait" : disabled ? "cursor-not-allowed" : "",
props.className
),
// if we click a disabled button, we prevent going through the click handler
onClick: disabled
? (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
e.preventDefault();
}
: props.onClick,
},
<>
{StartIcon && (
<StartIcon
className={clsx(
"inline",
size === "icon" ? "h-4 w-4 " : "-ml-1 h-4 w-4 ltr:mr-2 rtl:ml-2 rtl:-mr-1",
startIconClassName || ""
)}
/>
)}
{props.children}
{loading && (
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transform">
<svg
className={clsx(
"mx-4 h-5 w-5 animate-spin",
variant === "primary" ? "text-white dark:text-slate-900" : "text-slate-900"
)}
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24">
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
<path
className="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
/>
</svg>
</div>
)}
{EndIcon && (
<EndIcon className={clsx("-mr-1 inline h-5 w-5 ltr:ml-2 rtl:mr-2", endIconClassName || "")} />
)}
</>
);
return props.href ? (
<Link passHref href={props.href} shallow={shallow && shallow}>
{element}
</Link>
) : (
element
);
});
export default Button;

2
apps/formbricks-com/components/shared/CTA.tsx
View File

@@ -1,4 +1,4 @@
import Button from "@/components/shared/Button";
import { Button } from "@formbricks/ui";
import { useRouter } from "next/router";
import HeadingCentered from "./HeadingCentered";

35
apps/formbricks-com/components/shared/EarlyBirdDeal.tsx Normal file
View File

@@ -0,0 +1,35 @@
import { useRouter } from "next/router";
import { Button } from "@formbricks/ui";
import Image from "next/image";
import EarlyBird from "@/images/early bird deal for open source jotform alternative typeform and surveymonkey_v2.svg";
export default function EarlyBirdDeal() {
const router = useRouter();
return (
<div className="bg-brand-dark relative max-w-7xl overflow-hidden rounded-xl p-6 pb-16 sm:p-8 sm:pb-16 md:py-8 md:px-12 lg:flex lg:items-center">
<div className="lg:w-0 lg:flex-1 ">
<h2
className="mb-1 text-2xl font-bold tracking-tight text-white sm:text-2xl"
id="newsletter-headline">
50% off for early birds.
</h2>
<h2 className="text-xl font-semibold tracking-tight text-slate-200 sm:text-lg">
Limited Early Bird deal. Only{" "}
<span className="bg- rounded-sm bg-slate-200/40 px-2 py-0.5 text-slate-100">17</span> left.
</h2>
<div className="mt-6">
<Button variant="secondary" onClick={() => router.push("https://app.formbricks.com")}>
Get Early Bird Deal
</Button>
</div>
<p className="mt-2 mb-24 max-w-3xl text-xs tracking-tight text-slate-200 md:mb-0 md:max-w-sm lg:max-w-none">
This saves you $588 every year.
</p>
<div className="absolute -right-20 -bottom-36 mx-auto h-96 w-96 scale-75 sm:-right-10">
<Image src={EarlyBird} fill alt="formbricks favicon open source forms typeform alternative" />
</div>
</div>
</div>
);
}

2
apps/formbricks-com/components/shared/FeatureHighlight.tsx
View File

@@ -1,4 +1,4 @@
import Button from "./Button";
import { Button } from "@formbricks/ui";
import { useRouter } from "next/router";
import clsx from "clsx";

2
apps/formbricks-com/components/shared/Header.tsx
View File

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

107
apps/formbricks-com/components/shared/HeaderPMF.tsx Normal file
View File

@@ -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 (
<Popover className="relative" as="header">
<div className="flex items-center justify-between px-4 py-6 sm:px-6 md:justify-start ">
<div className="flex w-0 flex-1 justify-start">
<Link href="/">
<span className="sr-only">Formbricks</span>
<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-slate-700 dark:text-slate-200">
<span className="sr-only">Open menu</span>
<Bars3Icon className="h-6 w-6" aria-hidden="true" />
</Popover.Button>
</div>
<Popover.Group as="nav" className="hidden space-x-10 md:flex">
<Link
href="#howitworks"
className="text-base font-medium text-slate-400 hover:text-slate-700 dark:hover:text-slate-300">
How it works
</Link>
<Link
href="#pricing"
className="text-base font-medium text-slate-400 hover:text-slate-700 dark:hover:text-slate-300">
Pricing <p className="bg-brand inline rounded-full px-2 text-xs text-white">50%</p>
</Link>
</Popover.Group>
<div className="hidden flex-1 items-center justify-end md:flex">
<ThemeSelector className="relative z-10 mr-5" />
<Button variant="secondary" className="ml-2" href="https://demo.formbricks.com" target="_blank">
Try Demo
</Button>
<Button variant="highlight" className="ml-2" href="https://app.formbricks.com" target="_blank">
Sign Up
</Button>
</div>
</div>
<Transition
as={Fragment}
enter="duration-200 ease-out"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="duration-100 ease-in"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95">
<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-slate divide-y-2 divide-gray-100 rounded-lg bg-gray-200 shadow-lg ring-1 ring-black ring-opacity-5 dark:divide-gray-700 dark:bg-slate-800">
<div className="px-5 pt-5 pb-6">
<div className="flex items-center justify-between">
<div>
<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-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>
</div>
<div className="px-5 py-6">
<div className="flex flex-col space-y-5 text-center text-sm dark:text-slate-300">
<Link href="/community">Community</Link>
<Link href="/blog">Blog</Link>
<Button
variant="secondary"
EndIcon={GitHubIcon}
onClick={() => router.push("https://github.com/formbricks/formbricks")}
className="flex w-full justify-center fill-slate-800 dark:fill-slate-200">
View on Github
</Button>
<Button
variant="primary"
onClick={() => router.push("/waitlist")}
className="flex w-full justify-center">
Get access
</Button>
</div>
</div>
</div>
</Popover.Panel>
</Transition>
</Popover>
);
}
function GitHubIcon(props: any) {
return (
<svg aria-hidden="true" viewBox="0 0 16 16" {...props}>
<path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" />
</svg>
);
}

2
apps/formbricks-com/components/shared/HeaderWithMenu.tsx
View File

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

2
apps/formbricks-com/components/shared/Hero.jsx
View File

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

24
apps/formbricks-com/components/shared/LayoutPMF.tsx Normal file
View File

@@ -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 (
<div className="flex h-screen flex-col justify-between">
<MetaInformation title={title} description={description} />
<HeaderPMF />
{
<main className="max-w-8xl relative mx-auto mb-auto flex w-full flex-col justify-center sm:px-2 lg:px-8 xl:px-12">
{children}
</main>
}
<Footer />
</div>
);
}

2
apps/formbricks-com/components/shared/MdxCTA.tsx
View File

@@ -1,4 +1,4 @@
import Button from "@/components/shared/Button";
import { Button } from "@formbricks/ui";
import { useRouter } from "next/router";
import HeadingCentered from "./HeadingCentered";

2
apps/formbricks-com/components/shared/MdxTryItCTA.tsx
View File

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

2
apps/formbricks-com/components/shared/NewsletterSignup.tsx
View File

@@ -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() {

2
apps/formbricks-com/components/shared/TryItCTA.tsx
View File

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

64
apps/formbricks-com/components/shared/pmfPricing.tsx
View File

@@ -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 (
<div className="bg-gradient-radial from-deeppurple-light to-deeppurple pb-20">
<div className="mx-auto max-w-7xl py-4 pt-20 sm:py-16 sm:px-6 sm:pt-24 lg:px-8 lg:pt-32">
<HeadingCentered heading="One price, all features." teaser="Pricing" />
<div className="-mt-10 pb-20">
<div className="mx-auto max-w-7xl py-4 sm:px-6 sm:pb-6 lg:px-8 ">
<HeadingCentered heading="One price, unlimited usage." teaser="Pricing" />
<div className="mx-auto space-y-4 px-4 sm:grid sm:grid-cols-2 sm:gap-6 sm:space-y-0 md:px-0 lg:max-w-5xl">
{tiers.map((tier) => (
<div
key={tier.name}
className={clsx(`rounded-lg shadow-sm`, tier.highlight ? "bg-slate-300" : "bg-slate-100")}>
className={clsx(
`rounded-lg shadow-sm`,
tier.highlight ? "border-2 border-slate-400 bg-slate-300" : "bg-slate-100"
)}>
<div className="p-8">
<h2
className={clsx(
"inline-flex text-3xl font-bold",
tier.highlight ? "text-slate-700" : "text-slate-400"
tier.highlight ? "text-slate-700" : "text-slate-500"
)}>
{tier.name}
</h2>
<p
className={clsx(
"mt-4 whitespace-pre-wrap text-sm",
tier.highlight ? "text-gray-600" : "text-gray-400"
tier.highlight ? "text-gray-600" : "text-gray-500"
)}>
{tier.description}
</p>
@@ -63,14 +65,16 @@ export default function Pricelist() {
<span
className={clsx(
`text-4xl font-light`,
tier.highlight ? "text-slate-800" : "text-slate-400"
tier.highlight ? "text-slate-800" : "text-slate-500",
tier.discounted ? "decoration-brand line-through" : ""
)}>
{tier.priceMonthly}
</span>{" "}
<span className="text-4xl font-bold text-slate-900">{tier.discounted && "$49"}</span>
<span
className={clsx(
"text-base font-medium",
tier.highlight ? "text-gray-500" : "text-gray-300"
tier.highlight ? "text-gray-500" : "text-gray-400"
)}>
{tier.paymentRythm}
</span>
@@ -79,7 +83,7 @@ export default function Pricelist() {
<Button
onClick={tier.ctaAction}
className="mt-6 w-full justify-center py-4 text-lg shadow-sm"
variant={tier.button}>
variant={tier.highlight ? "highlight" : "secondary"}>
{tier.ctaName}
</Button>
)}
@@ -88,30 +92,8 @@ export default function Pricelist() {
))}
</div>
</div>
<div className="mx-auto max-w-7xl px-4 sm:px-8">
<div className="from-red to-pink relative max-w-7xl overflow-hidden rounded-xl bg-gradient-to-r p-6 pb-16 sm:p-8 sm:pb-16 md:py-8 md:px-12 lg:flex lg:items-center">
<div className="lg:w-0 lg:flex-1 ">
<h2
className="mb-1 text-2xl font-bold tracking-tight text-white sm:text-2xl"
id="newsletter-headline">
50% off for early birds.
</h2>
<h2 className="text-xl font-semibold tracking-tight text-red-200 sm:text-lg">
Limited Early Bird deal. Only{" "}
<span className="text-red rounded-sm bg-red-200 px-2 py-0.5">12</span> left.
</h2>
<div className="mt-6">
<Button onClick={() => router.push("https://app.formbricks.com")}>Get Early Bird Deal</Button>
</div>
<p className="mt-2 mb-24 max-w-3xl text-xs tracking-tight text-red-200 md:mb-0 md:max-w-sm lg:max-w-none">
This saves you $588 every year.
</p>
<div className="absolute -right-20 -bottom-36 mx-auto h-96 w-96 scale-75 sm:-right-10">
<Image src={EarlyBird} fill alt="formbricks favicon open source forms typeform alternative" />
</div>
</div>
</div>
<div className="mx-auto max-w-5xl">
<EarlyBirdDeal />
</div>
</div>
);

2
apps/formbricks-com/pages/community.tsx
View File

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

61
apps/formbricks-com/pages/pmf.tsx
View File

@@ -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 (
<Layout
<LayoutPMF
title="Continuous Product-Market Fit Score"
description="Measure the Product-Market Fit continuously. Use the Superhuman Product-Market-Fit to your advantage.">
<div className="px-4 py-20 text-center sm:px-6 lg:px-8 lg:py-28">
@@ -52,30 +53,30 @@ export default function GetStartedPage() {
{/* Video */}
<BreakerCTA
teaser="Get started"
headline="Measure your Product-Market Fit."
subheadline="Feel the pulse of your user base. Get actionable insights."
cta="Sign up"
href="https://app.formbricks.com"
teaser="No sign up required"
headline="Experience what you're missing"
subheadline="Play around with out Demo - no sign up needed."
cta="Try Demo"
href="https://demo.formbricks.com"
inverted
/>
{/* Steps */}
<div className="mx-auto mt-8 mb-12 max-w-lg md:mt-32 md:mb-0 md:max-w-none">
<div id="howitworks" className="mx-auto mt-8 mb-12 max-w-lg md:mt-32 md:mb-0 md:max-w-none">
<div className="px-4 sm:max-w-4xl sm:px-6 lg:max-w-7xl lg:px-8">
<div className="grid md:grid-cols-2 md:items-center md:gap-16">
<div className="pb-8 md:pb-0">
<div className="pb-8 sm:pl-10 md:pb-0">
<h4 className="text-brand-dark font-bold">Step 1</h4>
<h2 className="xs:text-3xl text-2xl font-bold tracking-tight text-slate-800 dark:text-slate-200">
1. Pre-Segmentation
</h2>
<p className="text-md mt-6 max-w-lg leading-7 text-slate-500 dark:text-slate-400">
Signed up for more than 4 weeks? Used a specific feature? Set up a custom condition to{" "}
<strong>only survey the right subset</strong> of your users.
<strong>only survey the right subset</strong> of your user base.
</p>
</div>
<div className="rounded-lg bg-slate-100 p-4 dark:bg-slate-800 sm:p-8">
<Image src={PreSegmentation} alt="react library" className="block dark:hidden" />
<Image src={PreSegmentation} quality="100" alt="react library" className="block dark:hidden" />
{/*
<Image src={ImageDarkAnalytics} alt="react library" className="hidden rounded-lg dark:block" /> */}
</div>
@@ -85,9 +86,10 @@ export default function GetStartedPage() {
<div className="mx-auto mt-8 mb-12 max-w-lg md:mt-32 md:mb-0 md:max-w-none">
<div className="px-4 sm:max-w-4xl sm:px-6 lg:max-w-7xl lg:px-8">
<div className="grid md:grid-cols-2 md:items-center md:gap-16">
<div className="order-last rounded-lg bg-slate-100 p-4 dark:bg-slate-800 sm:p-8 md:order-first">
{/* <Image src={Pipelines} alt="react library" className="block rounded-lg dark:hidden" />
<Image src={ImageDarkInsights} alt="react library" className="hidden rounded-lg dark:block" /> */}
<div className="order-last w-full rounded-lg bg-slate-100 p-4 dark:bg-slate-800 sm:py-8 md:order-first">
<div className="mx-auto md:w-3/4">
<PmfDummy />
</div>
</div>
<div className="pb-8 md:pb-0">
<h4 className="text-brand-dark font-bold">Step 2</h4>
@@ -105,7 +107,7 @@ export default function GetStartedPage() {
<div className="mx-auto mt-8 mb-12 max-w-lg md:mt-32 md:mb-0 md:max-w-none">
<div className="px-4 sm:max-w-4xl sm:px-6 lg:max-w-7xl lg:px-8">
<div className="grid md:grid-cols-2 md:items-center md:gap-16">
<div className="pb-8 md:pb-0">
<div className="pb-8 sm:pl-10 md:pb-0">
<h4 className="text-brand-dark font-bold">Step 3</h4>
<h2 className="xs:text-3xl text-2xl font-bold tracking-tight text-slate-800 dark:text-slate-200 sm:text-3xl">
Loop in your team
@@ -116,16 +118,21 @@ export default function GetStartedPage() {
</p>
</div>
<div className="w-full rounded-lg bg-slate-100 p-8 dark:bg-slate-800">
<Image src={Pipelines} alt="react library" className="block rounded-lg dark:hidden" />
<Image
src={Pipelines}
quality="100"
alt="react library"
className="block rounded-lg dark:hidden"
/>
</div>
</div>
</div>
</div>
<div className="mx-auto mt-8 mb-12 max-w-lg md:mt-32 md:mb-0 md:max-w-none">
<div className="mx-auto mt-8 mb-12 max-w-lg md:mt-32 md:mb-32 md:max-w-none">
<div className="px-4 sm:max-w-4xl sm:px-6 lg:max-w-7xl lg:px-8">
<div className="grid md:grid-cols-2 md:items-center md:gap-16">
<div className="order-last scale-125 sm:p-8 md:order-first">
<Image src={DashboardMockup} alt="react library" className="block dark:hidden" />{" "}
<Image src={DashboardMockup} quality="100" alt="react library" className="block dark:hidden" />{" "}
{/*
<Image src={ImageDarkInsights} alt="react library" className="hidden rounded-lg dark:block" /> */}
</div>
@@ -135,23 +142,27 @@ export default function GetStartedPage() {
Make better decisions
</h2>
<p className="text-md mt-6 max-w-lg leading-7 text-slate-500 dark:text-slate-400">
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
<strong> build conviction for the next product decision.</strong>
</p>
</div>
</div>
</div>
</div>
<EarlyBirdDeal />
<Features />
<BreakerCTA
{/* <BreakerCTA
teaser="Get started"
headline="Measure your Product-Market Fit."
subheadline="Feel the pulse of your user base. Get actionable insights."
cta="Sign up"
href="https://app.formbricks.com"
/>
<Pricing />
</Layout>
/> */}
<div id="pricing">
{" "}
<PmfPricing />
</div>
</LayoutPMF>
);
}

2
apps/formbricks-com/public/robots.txt
View File

@@ -1,7 +1,9 @@
# *
User-agent: *
Disallow: /pmf
Allow: /
# Host
Host: https://formbricks.com

2
packages/ui/src/Button.tsx
View File

@@ -68,7 +68,7 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
variant === "highlight" &&
(disabled
? "border border-transparent bg-gray-400 text-white"
: "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"),
: "text-white 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"