mirror/formbricks
1
0
Fork 0
mirror of https://github.com/formbricks/formbricks.git synced 2026-05-01 03:33:40 -05:00
Code Issues Packages Projects Releases 169 Wiki Activity

pmf page v1

Browse Source
This commit is contained in:
knugget
2023-02-09 10:53:03 +01:00
parent 94f0cf490f
commit ad703df3b6
9 changed files with 78 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/formbricks-com/components/shared/BreakerCTA.tsx
+7 -2
View File
@@ -19,10 +19,10 @@ export default function BreakerCTA({ inverted = false, teaser, headline, subhead
inverted
? "from-slate-800 via-slate-800 to-slate-700 dark:from-slate-200 dark:to-slate-300"
: "from-slate-200 to-slate-300 dark:from-slate-800 dark:via-slate-800 dark:to-slate-700",
"mx-auto mb-12 w-full max-w-5xl bg-gradient-to-br sm:rounded-xl md:mb-0 "
"xs:mx-auto xs:w-full mx-4 mb-12 max-w-5xl rounded-xl bg-gradient-to-br md:mb-0 "
)}>
<div className="relative px-4 py-8 sm:px-6 sm:pt-8 sm:pb-12 lg:px-8 lg:pt-12">
<div className="absolute right-10 md:top-1/2 md:-translate-y-1/2">
<div className="xs:block xs:absolute xs:right-10 hidden md:top-1/2 md:-translate-y-1/2">
<Button variant="highlight" onClick={() => router.push(`${href}`)}>
{cta}
</Button>
@@ -44,6 +44,11 @@ export default function BreakerCTA({ inverted = false, teaser, headline, subhead
)}>
{subheadline}
</p>
<div className="xs:hidden mt-4">
<Button variant="highlight" onClick={() => router.push(`${href}`)}>
{cta}
</Button>
</div>
</div>
</div>
);
apps/formbricks-com/components/shared/EarlyBirdDeal.tsx
+2 -2
View File
@@ -6,7 +6,7 @@ import EarlyBird from "@/images/early bird deal for open source jotform alternat
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="bg-brand-dark relative mx-4 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"
@@ -19,7 +19,7 @@ export default function EarlyBirdDeal() {
</h2>
<div className="mt-6">
<Button variant="secondary" onClick={() => router.push("https://app.formbricks.com")}>
<Button variant="secondary" onClick={() => router.push("https://app.formbricks.com/auth/signup")}>
Get Early Bird Deal
</Button>
</div>
apps/formbricks-com/components/shared/HeaderPMF.tsx
+14 -9
View File
@@ -38,10 +38,14 @@ export default function Header() {
</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">
<Button variant="secondary" className="ml-2" href="https://app.formbricks.com/demo" target="_blank">
Try Demo
</Button>
<Button variant="highlight" className="ml-2" href="https://app.formbricks.com" target="_blank">
<Button
variant="highlight"
className="ml-2"
href="https://app.formbricks.com/auth/signup"
target="_blank">
Sign Up
</Button>
</div>
@@ -74,20 +78,21 @@ export default function Header() {
</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>
<Link href="#howitworks">How it works</Link>
<Link href="#pricing">Pricing</Link>
<Button
variant="secondary"
EndIcon={GitHubIcon}
onClick={() => router.push("https://github.com/formbricks/formbricks")}
target="_blank"
onClick={() => router.push("https://app.formbricks.com/demo")}
className="flex w-full justify-center fill-slate-800 dark:fill-slate-200">
View on Github
Try Demo
</Button>
<Button
variant="primary"
onClick={() => router.push("/waitlist")}
target="_blank"
onClick={() => router.push("https://app.formbricks.com/auth/signup")}
className="flex w-full justify-center">
Get access
Sign Up
</Button>
</div>
</div>
apps/formbricks-com/components/shared/pmfPricing.tsx → apps/formbricks-com/components/shared/PricingPmf.tsx
+18 -8
View File
@@ -27,11 +27,11 @@ const tiers = [
paymentRythm: "/month",
description: "Use the managed cloud, gather insights immediately.",
ctaName: "Sign up now",
ctaAction: () => window.open("https://app.formbricks.com"),
ctaAction: () => window.open("https://app.formbricks.com/auth/signup"),
},
];
export default function PmfPricing() {
export default function PricingPmf() {
const router = useRouter();
return (
<div className="-mt-10 pb-20">
@@ -44,20 +44,24 @@ export default function PmfPricing() {
key={tier.name}
className={clsx(
`rounded-lg shadow-sm`,
tier.highlight ? "border-2 border-slate-400 bg-slate-300" : "bg-slate-100"
tier.highlight
? "border border-slate-300 bg-slate-200 dark:border-slate-500 dark:bg-slate-600"
: "bg-slate-100 dark:bg-slate-700"
)}>
<div className="p-8">
<h2
className={clsx(
"inline-flex text-3xl font-bold",
tier.highlight ? "text-slate-700" : "text-slate-500"
tier.highlight
? "text-slate-700 dark:text-slate-200"
: "text-slate-500 dark:text-slate-300"
)}>
{tier.name}
</h2>
<p
className={clsx(
"mt-4 whitespace-pre-wrap text-sm",
tier.highlight ? "text-gray-600" : "text-gray-500"
tier.highlight ? "text-gray-600 dark:text-slate-300" : "text-gray-500 dark:text-slate-300"
)}>
{tier.description}
</p>
@@ -65,16 +69,22 @@ export default function PmfPricing() {
<span
className={clsx(
`text-4xl font-light`,
tier.highlight ? "text-slate-800" : "text-slate-500",
tier.highlight
? "text-slate-800 dark:text-slate-100"
: "text-slate-500 dark:text-slate-200",
tier.discounted ? "decoration-brand line-through" : ""
)}>
{tier.priceMonthly}
</span>{" "}
<span className="text-4xl font-bold text-slate-900">{tier.discounted && "$49"}</span>
<span className="text-4xl font-bold text-slate-900 dark:text-slate-50">
{tier.discounted && "$49"}
</span>
<span
className={clsx(
"text-base font-medium",
tier.highlight ? "text-gray-500" : "text-gray-400"
tier.highlight
? "text-gray-500 dark:text-slate-400"
: "text-gray-400 dark:text-slate-500"
)}>
{tier.paymentRythm}
</span>
apps/formbricks-com/images/dashboard-mockup-dark.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 270 KiB

apps/formbricks-com/images/pipelines-dark.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 75 KiB

apps/formbricks-com/images/pre-segmentation-dark.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 124 KiB

apps/formbricks-com/pages/pmf.tsx
+37 -14
View File
@@ -3,11 +3,14 @@ import { Button } from "@formbricks/ui";
import { useRouter } from "next/router";
import BreakerCTA from "@/components/shared/BreakerCTA";
import Features from "@/components/home/Features";
import PmfPricing from "@/components/shared/PmfPricing";
import PricingPmf from "@/components/shared/PricingPmf";
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 DashboardMockupDark from "@/images/dashboard-mockup-dark.png";
import PipelinesDark from "@/images/pipelines-dark.png";
import PreSegmentationDark from "@/images/pre-segmentation-dark.png";
import PmfDummy from "@/components/shared/PmfDummy";
import EarlyBirdDeal from "@/components/shared/EarlyBirdDeal";
@@ -37,14 +40,14 @@ export default function GetStartedPage() {
<div className="mx-auto mt-5 max-w-md sm:flex sm:justify-center md:mt-8">
<Button
variant="secondary"
onClick={() => router.push("https://demo.formbricks.com")}
onClick={() => router.push("https://app.formbricks.com/demo")}
target="_blank">
Try it out
</Button>
<Button
variant="highlight"
className="ml-3"
onClick={() => router.push("https://app.formbricks.com")}
onClick={() => router.push("https://app.formbricks.com/auth/signup")}
target="_blank">
Sign Up
</Button>
@@ -57,7 +60,7 @@ export default function GetStartedPage() {
headline="Experience what you're missing"
subheadline="Play around with out Demo - no sign up needed."
cta="Try Demo"
href="https://demo.formbricks.com"
href="https://app.formbricks.com/demo"
inverted
/>
@@ -76,9 +79,19 @@ export default function GetStartedPage() {
</p>
</div>
<div className="rounded-lg bg-slate-100 p-4 dark:bg-slate-800 sm:p-8">
<Image src={PreSegmentation} quality="100" alt="react library" className="block dark:hidden" />
{/*
<Image src={ImageDarkAnalytics} alt="react library" className="hidden rounded-lg dark:block" /> */}
<Image
src={PreSegmentation}
quality="100"
alt="Pre Segmentation"
className="block dark:hidden"
/>
<Image
src={PreSegmentationDark}
quality="100"
alt="Pre Segmentation"
className="hidden dark:block"
/>
</div>
</div>
</div>
@@ -121,9 +134,10 @@ export default function GetStartedPage() {
<Image
src={Pipelines}
quality="100"
alt="react library"
alt="Data Pipelines"
className="block rounded-lg dark:hidden"
/>
<Image src={PipelinesDark} quality="100" alt="Data Pipelines" className="hidden dark:block" />
</div>
</div>
</div>
@@ -131,10 +145,19 @@ export default function GetStartedPage() {
<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} quality="100" alt="react library" className="block dark:hidden" />{" "}
{/*
<Image src={ImageDarkInsights} alt="react library" className="hidden rounded-lg dark:block" /> */}
<div className="order-last sm:scale-125 sm:p-8 md:order-first">
<Image
src={DashboardMockup}
quality="100"
alt="PMF Dashboard Mockup"
className="block dark:hidden"
/>
<Image
src={DashboardMockupDark}
quality="100"
alt="PMF Dashboard Mockup"
className="hidden dark:block"
/>
</div>
<div className="pb-8 pl-4 md:pb-0">
<h4 className="text-brand-dark font-bold">Step 4</h4>
@@ -157,11 +180,11 @@ export default function GetStartedPage() {
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"
href="https://app.formbricks.com/auth/signup"
/> */}
<div id="pricing">
{" "}
<PmfPricing />
<PricingPmf />
</div>
</LayoutPMF>
);
apps/formbricks-com/pages/pmflist.tsx
-159
View File
@@ -1,159 +0,0 @@
import FeatureSelection from "@/components/engine/FeatureSelection";
import IconRadio from "@/components/engine/IconRadio";
import Input from "@/components/engine/Input";
import Scale from "@/components/engine/Scale";
import { Survey } from "@/components/engine/Survey";
import Textarea from "@/components/engine/Textarea";
import ThankYouHeading from "@/components/engine/ThankYouHeading";
import ThankYouPlans from "@/components/engine/ThankYouPlans";
import LayoutWaitlist from "@/components/shared/LayoutWaitlist";
import {
OnboardingIcon,
PMFIcon,
DogChaserIcon,
CancelSubscriptionIcon,
InterviewPromptIcon,
DoorIcon,
FeedbackIcon,
BugBlueIcon,
AngryBirdRageIcon,
FeatureRequestIcon,
FounderIcon,
EngineerIcon,
LaptopWorkerIcon,
UserCommentIcon,
UserGroupIcon,
BellIcon,
SkyscraperIcon,
CheckMarkIcon,
CrossMarkIcon,
UserCoupleIcon,
} from "@formbricks/ui";
const WaitlistPage = () => (
<LayoutWaitlist title="Waitlist" description="Join our Waitlist today">
<div className="mx-auto w-full max-w-5xl px-6 md:w-3/4">
<div className="px-4 pt-20 pb-4">
<h1 className="text-3xl font-bold tracking-tight text-slate-800 dark:text-slate-200 sm:text-4xl md:text-5xl">
<span className="xl:inline">Get</span>{" "}
<span className="from-brand-light to-brand-dark bg-gradient-to-b bg-clip-text text-transparent xl:inline">
early
</span>{" "}
<span className="inline ">access</span>
</h1>
<p className="mt-3 text-sm text-slate-400 dark:text-slate-300 md:text-base">
We are onboarding users continuously. Tell us more about you!
</p>
</div>
<div className="mx-auto my-6 w-full max-w-5xl rounded-xl bg-slate-100 px-8 py-10 dark:bg-slate-800 md:my-12 md:px-16 md:py-20">
<Survey
formbricksUrl={
process.env.NODE_ENV === "production" ? "https://app.formbricks.com" : "http://localhost:3000"
}
formId={
process.env.NODE_ENV === "production" ? "cld37mt2i0000ld08p9q572bc" : "clda41dvz0004u08k3gbawcky"
}
survey={{
config: {
progressBar: false,
},
pages: [
{
id: "pmfTypePage",
config: {
autoSubmit: true,
},
elements: [
{
id: "pmfType",
component: IconRadio,
type: "radio",
name: "pmfType",
label: "How disappointed would you be if you could no longer use our service?",
options: [
{ label: "Very disappointed", value: "veryDisappointed" },
{ label: "Somewhat disappointed", value: "somewhatDisappointed" },
{ label: "Not disappointed", value: "notDisappointed" },
],
},
],
},
{
id: "mainBenefitPage",
elements: [
{
id: "mainBenefit",
component: Textarea,
type: "text",
name: "mainBenefit",
label: "What is the main benefit you receive from our service?",
},
],
},
{
id: "userSegmentPage",
config: {
autoSubmit: true,
},
elements: [
{
id: "userSegment",
component: IconRadio,
type: "radio",
name: "userSegment",
label: "What is your job title?",
options: [
{ label: "Founder", value: "founder" },
{ label: "Executive", value: "executive" },
{ label: "Product Manager", value: "product manager" },
{ label: "Software Engineer", value: "engineer" },
],
},
],
},
{
id: "improvementPage",
elements: [
{
id: "improvement",
component: Textarea,
type: "text",
name: "improvement",
label: "How can we improve our service for you?",
},
],
},
{
id: "selfSegmentationPage",
elements: [
{
id: "selfSegmentation",
component: Textarea,
type: "text",
name: "selfSegmentation",
label: "What type of people would benefit most from using our service?",
},
],
},
{
id: "thankYouPage",
endScreen: true,
elements: [
{
id: "thankYou",
component: ThankYouHeading,
type: "html",
name: "thankYou",
},
],
},
],
}}
/>
</div>
</div>
</LayoutWaitlist>
);
export default WaitlistPage;