mirror of
https://github.com/formbricks/formbricks.git
synced 2026-03-17 23:56:49 -05:00
merged change
This commit is contained in:
Matthias Nannt
@@ -18,12 +18,22 @@ export default function PmfButton() {
|
||||
formbricksUrl: "http://localhost:3000",
|
||||
formId: "cldbru2nu000s19t6mtc4bhk4",
|
||||
containerId: "formbricks",
|
||||
style: {
|
||||
brandColor: "#0891b2",
|
||||
contact: {
|
||||
name: "Jonathan",
|
||||
position: "Co-Founder",
|
||||
imgUrl: "https://avatars.githubusercontent.com/u/41432658?v=4",
|
||||
},
|
||||
customer: {
|
||||
name: "John Doe",
|
||||
email: "john@doe.com",
|
||||
id: "test@crowd.dev",
|
||||
name: "Test Customer",
|
||||
email: "test@crowd.dev",
|
||||
},
|
||||
style: {
|
||||
brandColor: "#e94f2e",
|
||||
headerBGColor: "#F9FAFB",
|
||||
boxBGColor: "#ffffff",
|
||||
textColor: "#140505",
|
||||
buttonHoverColor: "#F9FAFB",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@@ -1,71 +0,0 @@
|
||||
import HeroTitle from "@/components/shared/HeroTitle";
|
||||
import Layout from "@/components/shared/Layout";
|
||||
import ImageCoreApi from "@/images/core-api.svg";
|
||||
import Image from "next/image";
|
||||
import CTA from "../components/shared/CTA";
|
||||
import WhyFormbricks from "../components/shared/WhyFormbricks";
|
||||
import FeatureHighlight from "@/components/shared/FeatureHighlight";
|
||||
import { CodeBracketSquareIcon, TableCellsIcon, ServerStackIcon } from "@heroicons/react/24/outline";
|
||||
|
||||
const features = [
|
||||
{
|
||||
id: "allForms",
|
||||
name: "Works with Every Form",
|
||||
description: "Javascript forms, HTML forms, form widgets - all works. Send it over, take it from here.",
|
||||
icon: CodeBracketSquareIcon,
|
||||
},
|
||||
{
|
||||
id: "schemaSupport",
|
||||
name: "Schema Support",
|
||||
description: "Add as many email addresses as you like. Send responses and notifications.",
|
||||
icon: TableCellsIcon,
|
||||
},
|
||||
{
|
||||
id: "selfHost",
|
||||
name: "Self-host or Cloud",
|
||||
description: "Manage submissions in our FormHQ or host the entire solution yourself.",
|
||||
icon: ServerStackIcon,
|
||||
},
|
||||
];
|
||||
|
||||
const CoreAPIPage = () => (
|
||||
<Layout
|
||||
title="Core API | Formbricks Open Source Forms & Surveys"
|
||||
description="Our core API handles all of the submission handling of your open source forms and surveys.">
|
||||
<HeroTitle headingPt1="Core" headingTeal="API" />
|
||||
<FeatureHighlight
|
||||
featureTitle="The OS form engine"
|
||||
text="Our core API handles all of the submission handling of your forms and surveys. Our main objective is versatility, so that you can use it with any currently existing form.
|
||||
Soon we will integrate it with our React Form Builder. This allows for handling schemas so that you get a full image of your submission data. "
|
||||
img={<Image src={ImageCoreApi} alt="react library" className="rounded-lg" />}
|
||||
isImgLeft
|
||||
/>
|
||||
<ul
|
||||
role="list"
|
||||
className="-mb-16 grid grid-cols-1 gap-6 px-3 pt-2 sm:grid-cols-2 md:grid-cols-3 lg:px-12">
|
||||
{features.map((feature) => (
|
||||
<li
|
||||
key={feature.id}
|
||||
className="relative col-span-1 mt-16 flex flex-col rounded-xl bg-slate-200 text-center drop-shadow-sm dark:bg-slate-800">
|
||||
<div className="absolute -mt-12 w-full">
|
||||
<div className="mx-auto flex h-20 w-20 items-center justify-center rounded-full bg-gradient-to-br from-slate-200 via-slate-100 to-slate-100 shadow dark:from-slate-900 dark:to-slate-700">
|
||||
<feature.icon className="text-brand-dark dark:text-brand-light mx-auto h-10 w-10 flex-shrink-0" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-1 flex-col p-10">
|
||||
<h3 className="my-4 text-lg font-medium text-slate-800 dark:text-slate-200">{feature.name}</h3>
|
||||
<dl className="mt-1 flex flex-grow flex-col justify-between">
|
||||
<dt className="sr-only">Description</dt>
|
||||
<dd className="text-sm text-gray-600 dark:text-slate-400">{feature.description}</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<WhyFormbricks />
|
||||
<div className="h-12"></div>
|
||||
<CTA />
|
||||
</Layout>
|
||||
);
|
||||
|
||||
export default CoreAPIPage;
|
||||
@@ -1,67 +0,0 @@
|
||||
import HeroTitle from "@/components/shared/HeroTitle";
|
||||
import Layout from "@/components/shared/Layout";
|
||||
import ImageEmail from "@/images/email.svg";
|
||||
import Image from "next/image";
|
||||
import TryItCTA from "../components/shared/TryItCTA";
|
||||
import FeatureHighlight from "@/components/shared/FeatureHighlight";
|
||||
import { CodeBracketSquareIcon, EnvelopeOpenIcon, ServerStackIcon } from "@heroicons/react/24/outline";
|
||||
|
||||
const features = [
|
||||
{
|
||||
id: "allForms",
|
||||
name: "Works with Every Form",
|
||||
description: "Javascript forms, HTML forms, form widgets - all works. Send it over, take it from here.",
|
||||
icon: CodeBracketSquareIcon,
|
||||
},
|
||||
{
|
||||
id: "dataInsights",
|
||||
name: "Multiple Email Addresses",
|
||||
description: "Add as many email addresses as you like. Send responses and notifications.",
|
||||
icon: EnvelopeOpenIcon,
|
||||
},
|
||||
{
|
||||
id: "selfHost",
|
||||
name: "Self-host or Cloud",
|
||||
description: "Set your emails up in our Formbricks HQ or self-host the entire solution yourself.",
|
||||
icon: ServerStackIcon,
|
||||
},
|
||||
];
|
||||
|
||||
const EmailPage = () => (
|
||||
<Layout
|
||||
title="Email Notifications"
|
||||
description="In some cases, the good old email is the way to go. In the Formbricks HQ you can setup forwarding submission data to one or more emails.">
|
||||
<HeroTitle headingPt1="Email" />
|
||||
<FeatureHighlight
|
||||
featureTitle="Get responses to your inbox"
|
||||
text="In some cases, the good old email is the way to go. In the Formbricks HQ you can setup forwarding submission data to one or more emails."
|
||||
img={<Image src={ImageEmail} alt="react library" className="rounded-lg" />}
|
||||
isImgLeft
|
||||
cta="Get started"
|
||||
href="/waitlist"
|
||||
/>
|
||||
<ul role="list" className="grid grid-cols-1 gap-6 px-12 pt-2 pb-16 sm:grid-cols-2 md:grid-cols-3">
|
||||
{features.map((feature) => (
|
||||
<li
|
||||
key={feature.id}
|
||||
className="relative col-span-1 mt-16 flex flex-col rounded-xl bg-slate-200 text-center drop-shadow-sm dark:bg-slate-800">
|
||||
<div className="absolute -mt-12 w-full">
|
||||
<div className="mx-auto flex h-20 w-20 items-center justify-center rounded-full bg-gradient-to-br from-slate-200 via-slate-100 to-slate-100 shadow dark:from-slate-900 dark:to-slate-700">
|
||||
<feature.icon className="text-brand-dark dark:text-brand-light mx-auto h-10 w-10 flex-shrink-0" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-1 flex-col p-10">
|
||||
<h3 className="my-4 text-lg font-medium text-slate-800 dark:text-slate-200">{feature.name}</h3>
|
||||
<dl className="mt-1 flex flex-grow flex-col justify-between">
|
||||
<dt className="sr-only">Description</dt>
|
||||
<dd className="text-sm text-gray-600 dark:text-slate-400">{feature.description}</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<TryItCTA />
|
||||
</Layout>
|
||||
);
|
||||
|
||||
export default EmailPage;
|
||||
@@ -1,115 +0,0 @@
|
||||
import HeroTitle from "@/components/shared/HeroTitle";
|
||||
import Layout from "@/components/shared/Layout";
|
||||
import CTA from "../components/shared/CTA";
|
||||
import ImageFormHQ from "../images/form-hq.png";
|
||||
import Image from "next/image";
|
||||
import HeadingCentered from "@/components/shared/HeadingCentered";
|
||||
import {
|
||||
CodeBracketIcon,
|
||||
SquaresPlusIcon,
|
||||
ChartBarIcon,
|
||||
ArrowTrendingUpIcon,
|
||||
DocumentPlusIcon,
|
||||
RectangleGroupIcon,
|
||||
} from "@heroicons/react/24/outline";
|
||||
import clsx from "clsx";
|
||||
|
||||
const features = [
|
||||
{
|
||||
id: "dataPipelines",
|
||||
name: "Data Pipelines",
|
||||
description: "Save your data where you need it. Use webhooks or pre-built integrations.",
|
||||
icon: SquaresPlusIcon,
|
||||
},
|
||||
{
|
||||
id: "dataInsights",
|
||||
name: "Powerful Data Insights",
|
||||
description: "View and manage your results quicker. Handle submissions in our dahsboard.",
|
||||
icon: ChartBarIcon,
|
||||
},
|
||||
{
|
||||
id: "fullOwnership",
|
||||
name: "Full Data Ownership",
|
||||
description: "We run open source. Self-host your instance and your data never leaves your servers.",
|
||||
icon: CodeBracketIcon,
|
||||
},
|
||||
{
|
||||
id: "nocodeBuilder",
|
||||
name: "No-Code Builder",
|
||||
description: "Let your operators create and change forms. Stick with React to style and embed forms.",
|
||||
icon: RectangleGroupIcon,
|
||||
comingSoon: true,
|
||||
},
|
||||
{
|
||||
id: "analytics",
|
||||
name: "Built-in Analytics",
|
||||
description: "Opening rate, drop-offs, conversions. Use privacy-first analytics out of the box.",
|
||||
icon: ArrowTrendingUpIcon,
|
||||
comingSoon: true,
|
||||
},
|
||||
{
|
||||
id: "templates",
|
||||
name: "Survey Templates",
|
||||
description: "NPS, CSAT, Employee Surveys. Name your business objective, we have the questions.",
|
||||
icon: DocumentPlusIcon,
|
||||
comingSoon: true,
|
||||
},
|
||||
];
|
||||
|
||||
const FormHQPage = () => (
|
||||
<Layout
|
||||
title="Formbricks HQ"
|
||||
description="Manage all form data in one place. Analyze right here or pipe your data where you need it.">
|
||||
<HeroTitle headingPt1="Formbricks" headingTeal="HQ" />
|
||||
<Image
|
||||
src={ImageFormHQ}
|
||||
alt="Formbricks HQ user interface to create forms, manage submissions open source."
|
||||
/>
|
||||
<HeadingCentered
|
||||
teaser="You have arrived"
|
||||
heading="Everything you always wanted (from a form tool)"
|
||||
subheading="The days of scattered response data are counted. Manage all form data in one place. Analyze right here or pipe your data where you need it."
|
||||
/>
|
||||
<ul role="list" className="grid grid-cols-1 gap-6 px-2 pt-4 pb-16 sm:grid-cols-2 md:grid-cols-3">
|
||||
{features.map((feature) => (
|
||||
<li
|
||||
key={feature.id}
|
||||
className={clsx(
|
||||
feature.comingSoon
|
||||
? "bg-gradient-to-b from-slate-200 to-slate-100 dark:from-slate-800 dark:to-slate-900"
|
||||
: "bg-slate-200 drop-shadow-sm dark:bg-slate-800 ",
|
||||
"relative col-span-1 mt-16 flex flex-col rounded-xl text-center"
|
||||
)}>
|
||||
<div className="absolute -mt-12 w-full">
|
||||
<div
|
||||
className={clsx(
|
||||
feature.comingSoon
|
||||
? "from-slate-100 via-slate-200 to-slate-200 dark:from-slate-800 dark:to-slate-900"
|
||||
: "from-slate-200 via-slate-100 to-slate-100 dark:from-slate-900 dark:to-slate-700 ",
|
||||
"mx-auto flex h-20 w-20 items-center justify-center rounded-full bg-gradient-to-br shadow"
|
||||
)}>
|
||||
<feature.icon className="text-brand-dark dark:text-brand-light mx-auto h-10 w-10 flex-shrink-0" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-1 flex-col p-10">
|
||||
<h3 className="my-4 text-lg font-medium text-slate-800 dark:text-slate-200">{feature.name}</h3>
|
||||
<dl className="mt-1 flex flex-grow flex-col justify-between">
|
||||
<dt className="sr-only">Description</dt>
|
||||
<dd className="text-sm text-gray-600 dark:text-slate-400">{feature.description}</dd>
|
||||
{feature.comingSoon && (
|
||||
<dd className="mt-4">
|
||||
<span className="rounded-full bg-slate-200 px-3 py-1 text-xs font-medium text-slate-500 dark:bg-slate-700 dark:text-slate-300">
|
||||
coming soon
|
||||
</span>
|
||||
</dd>
|
||||
)}
|
||||
</dl>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<CTA />
|
||||
</Layout>
|
||||
);
|
||||
|
||||
export default FormHQPage;
|
||||
@@ -1,124 +0,0 @@
|
||||
import Layout from "@/components/shared/Layout";
|
||||
import HeroTitle from "@/components/shared/HeroTitle";
|
||||
import Button from "../components/shared/Button";
|
||||
import { useRouter } from "next/router";
|
||||
import {
|
||||
CloudIcon,
|
||||
ArrowPathIcon,
|
||||
InboxArrowDownIcon,
|
||||
PuzzlePieceIcon,
|
||||
ServerStackIcon,
|
||||
ShieldCheckIcon,
|
||||
CommandLineIcon,
|
||||
BuildingLibraryIcon,
|
||||
} from "@heroicons/react/24/outline";
|
||||
|
||||
export default function GetStartedPage() {
|
||||
const router = useRouter();
|
||||
return (
|
||||
<Layout
|
||||
title="Get started"
|
||||
description="We offer our open source form & survey software for self-hosters and in our managed cloud. Get started within minutes!">
|
||||
<HeroTitle headingPt1="How do you want to" headingTeal="run" headingPt2="Formbricks?" />
|
||||
|
||||
<div className="mb-32 grid px-6 md:grid-cols-2 md:gap-8 md:px-16">
|
||||
<div className="mb-6 rounded-lg bg-gradient-to-b from-slate-200 to-slate-300 px-10 py-6 dark:from-slate-800 dark:to-slate-700 md:mb-0">
|
||||
<CloudIcon className="h-20 w-20 flex-shrink-0 text-slate-600 dark:text-slate-400" />
|
||||
<h2 className="mt-7 text-4xl font-bold text-slate-800 dark:text-slate-200">Cloud</h2>
|
||||
<p className="text-sm text-slate-500">Managed hosting by Formbricks core team</p>
|
||||
<p className="mt-7 font-semibold text-slate-700 dark:text-slate-300">
|
||||
<span className="font-bold ">Free</span> for 200 submissions/mo
|
||||
</p>
|
||||
<p className="text-sm text-slate-500 dark:text-slate-500">then $0.01/submission</p>
|
||||
<div className="font-medium text-slate-500 dark:text-slate-400">
|
||||
<div className="mt-7 flex items-center py-1">
|
||||
<InboxArrowDownIcon className="mr-3 h-7 w-7 flex-shrink-0 text-slate-600 dark:text-slate-300" />
|
||||
<p>Start receiving submissions right away</p>
|
||||
</div>
|
||||
<div className="flex items-center py-1">
|
||||
<ArrowPathIcon className="mr-3 h-7 w-7 flex-shrink-0 text-slate-600 dark:text-slate-300" />
|
||||
<p>Automatic upgrades</p>
|
||||
</div>
|
||||
<div className="flex items-center py-1">
|
||||
<PuzzlePieceIcon className="mr-3 h-7 w-7 flex-shrink-0 text-slate-600 dark:text-slate-300" />
|
||||
<p>All enterprise features included</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* <Button
|
||||
className="mt-7 w-full justify-center text-center font-bold"
|
||||
variant="highlight"
|
||||
onClick={() => router.push("https://hq.formbricks.com")}>
|
||||
Start FREE on Formbricks Cloud
|
||||
</Button> */}
|
||||
<Button
|
||||
className="mt-7 w-full justify-center text-center font-bold"
|
||||
variant="highlight"
|
||||
onClick={() => router.push("https://hq.formbricks.com")}
|
||||
disabled>
|
||||
Coming soon
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* <div className="rounded-lg bg-gradient-to-b from-slate-200 to-slate-300 px-10 py-6 dark:from-slate-800 dark:to-slate-700 ">
|
||||
<ServerStackIcon className="h-20 w-20 flex-shrink-0 text-slate-600 dark:text-slate-400" />
|
||||
<h2 className="mt-7 text-4xl font-bold text-slate-800 dark:text-slate-200">Self-host</h2>
|
||||
<p className="text-sm text-gray-500">Submission data never leaves your infrastructure</p>
|
||||
<p className="mt-7 font-semibold text-slate-700 dark:text-slate-300">
|
||||
<span className="font-bold ">Free</span> for 500 submissions/mo
|
||||
</p>
|
||||
<p className="text-sm text-slate-500 dark:text-slate-500">then $0.01/submission</p>
|
||||
<div className="font-medium text-slate-500 dark:text-slate-400">
|
||||
<div className="mt-7 flex items-center py-1">
|
||||
<ShieldCheckIcon className="h- mr-3 w-7 flex-shrink-0 text-slate-600 dark:text-slate-300" />
|
||||
<p>Easy deploy for most private cloud platforms</p>
|
||||
</div>
|
||||
<div className="flex items-center py-1">
|
||||
<CommandLineIcon className="mr-3 h-7 w-7 flex-shrink-0 text-slate-600 dark:text-slate-300" />
|
||||
<p>Full access to production instance</p>
|
||||
</div>
|
||||
<div className="flex items-center py-1">
|
||||
<BuildingLibraryIcon className="mr-3 h-7 w-7 flex-shrink-0 text-slate-600 dark:text-slate-300" />
|
||||
<p>Full compliance with all data privacy regulation</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
className="mt-7 w-full justify-center text-center font-bold"
|
||||
variant="secondary"
|
||||
onClick={() => router.push("/discord")}>
|
||||
Sign up for beta test
|
||||
</Button>
|
||||
</div> */}
|
||||
<div className="rounded-lg bg-gradient-to-b from-slate-200 to-slate-300 px-10 py-6 dark:from-slate-800 dark:to-slate-700 ">
|
||||
<ServerStackIcon className="h-20 w-20 flex-shrink-0 text-slate-600 dark:text-slate-400" />
|
||||
<h2 className="mt-7 text-4xl font-bold text-slate-800 dark:text-slate-200">Self-host</h2>
|
||||
<p className="text-sm text-gray-500">Submission data never leaves your infrastructure</p>
|
||||
<p className="mt-7 font-semibold text-slate-700 dark:text-slate-300">
|
||||
Open-Source, free forever
|
||||
<br />
|
||||
<br />
|
||||
</p>
|
||||
<div className="font-medium text-slate-500 dark:text-slate-400">
|
||||
<div className="mt-7 flex items-center py-1">
|
||||
<ShieldCheckIcon className="h- mr-3 w-7 flex-shrink-0 text-slate-600 dark:text-slate-300" />
|
||||
<p>Easy deploy for most private cloud platforms</p>
|
||||
</div>
|
||||
<div className="flex items-center py-1">
|
||||
<CommandLineIcon className="mr-3 h-7 w-7 flex-shrink-0 text-slate-600 dark:text-slate-300" />
|
||||
<p>Infinite Customization Capabilities</p>
|
||||
</div>
|
||||
<div className="flex items-center py-1">
|
||||
<BuildingLibraryIcon className="mr-3 h-7 w-7 flex-shrink-0 text-slate-600 dark:text-slate-300" />
|
||||
<p>Open Source under MIT License</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
className="mt-7 w-full justify-center text-center font-bold"
|
||||
variant="primary"
|
||||
onClick={() => router.push("https://github.com/formbricks/formbricks")}>
|
||||
View on Github
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
@@ -1,147 +0,0 @@
|
||||
import Layout from "@/components/shared/Layout";
|
||||
import HeroTitle from "@/components/shared/HeroTitle";
|
||||
import Image from "next/image";
|
||||
import ImageReactLib from "@/images/react-lib.png";
|
||||
import ImageSchemaGeneration from "@/images/schema-generation-svg.svg";
|
||||
import HeadingCentered from "@/components/shared/HeadingCentered";
|
||||
import { CheckIcon, PlusIcon } from "@heroicons/react/24/outline";
|
||||
import TryItCTA from "../components/shared/TryItCTA";
|
||||
import FeatureHighlight from "@/components/shared/FeatureHighlight";
|
||||
|
||||
const hereFeatures = [
|
||||
{
|
||||
name: "Unlimited forms",
|
||||
},
|
||||
{
|
||||
name: "Unlimited submissions",
|
||||
},
|
||||
{
|
||||
name: "Multiple choice questions",
|
||||
},
|
||||
{
|
||||
name: "Free text questions",
|
||||
},
|
||||
{
|
||||
name: "Custom “ThankYou” Page",
|
||||
},
|
||||
{
|
||||
name: "Webhooks",
|
||||
},
|
||||
{
|
||||
name: "Email Notifications",
|
||||
},
|
||||
];
|
||||
|
||||
const nextFeatures = [
|
||||
{
|
||||
name: "20+ question types",
|
||||
},
|
||||
{
|
||||
name: "Integrations",
|
||||
},
|
||||
{
|
||||
name: "Granular data piping",
|
||||
},
|
||||
{
|
||||
name: "In-depth analytics",
|
||||
},
|
||||
];
|
||||
|
||||
const soonFeatures = [
|
||||
{
|
||||
name: "AI supported analysis",
|
||||
},
|
||||
{
|
||||
name: "Form logic",
|
||||
},
|
||||
{
|
||||
name: "Hidden fields ",
|
||||
},
|
||||
{
|
||||
name: "A/B Test of wording",
|
||||
},
|
||||
{
|
||||
name: "Vue.js Library",
|
||||
},
|
||||
];
|
||||
|
||||
const ReactFormBuilderPage = () => (
|
||||
<Layout
|
||||
title="React Form Library"
|
||||
description="Loads of question types, validation, multi-page forms, logic jumps, i18n, custom styles - all the good stuff you want, but don't want to build yourself.">
|
||||
<HeroTitle headingPt1="React" headingTeal="Form Builder" headingPt2="Library" />
|
||||
<FeatureHighlight
|
||||
featureTitle="Building React forms has never been quicker. But there is more..."
|
||||
text={`Loads of question types, validation, multi-page forms, logic jumps, i18n, custom styles - all the good stuff you want, but don't want to build yourself.\n\nBuilding forms fast is great, but where do you pipe your data? And what is it worth without a schema?"`}
|
||||
img={<Image src={ImageReactLib} alt="react library" className="rounded-lg" />}
|
||||
isImgLeft
|
||||
/>
|
||||
<FeatureHighlight
|
||||
featureTitle="Automatic schema generation for reliable insights"
|
||||
text="You can only reliably analyze your submissions when the form schema is sent along with the form.
|
||||
|
||||
Use our React Forms Library with the Formbricks Data Pipes and get a full image of the data sent. Analyze it in our dashboard or forward it to your database."
|
||||
img={<Image src={ImageSchemaGeneration} alt="react library" className="rounded-lg" />}
|
||||
/>
|
||||
<HeadingCentered
|
||||
teaser="all you need in one package"
|
||||
heading="Tons of powerful features (in the pipeline)"
|
||||
subheading="20+ question types, easy multi-page forms and validation are on the roadmap. Check what’s already here:"
|
||||
/>
|
||||
<div className="mx-auto mt-8 mb-28 md:inline-flex md:gap-x-5 lg:gap-x-20">
|
||||
<dl>
|
||||
{hereFeatures.map((feature) => (
|
||||
<div key={feature.name}>
|
||||
<dt className="flex items-center">
|
||||
<CheckIcon
|
||||
className="text-brand-light dark:text-brand-light absolute ml-4 h-6 w-6 md:ml-0"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<p className="ml-14 text-lg leading-loose text-slate-500 dark:text-slate-200 md:ml-9">
|
||||
{feature.name}
|
||||
</p>
|
||||
</dt>
|
||||
</div>
|
||||
))}
|
||||
</dl>
|
||||
<dl>
|
||||
{nextFeatures.map((feature) => (
|
||||
<div key={feature.name}>
|
||||
<dt className="mx-auto flex max-w-sm items-center">
|
||||
<div className="bg-brand-dark dark:bg-brand-light ml-2 rounded-full px-1.5 text-xs font-semibold text-slate-900">
|
||||
<p>next</p>
|
||||
</div>
|
||||
<p className="ml-3 text-lg leading-loose text-slate-500 dark:text-slate-200">{feature.name}</p>
|
||||
</dt>
|
||||
</div>
|
||||
))}
|
||||
</dl>
|
||||
<dl>
|
||||
{soonFeatures.map((feature) => (
|
||||
<div key={feature.name}>
|
||||
<dt className="mx-auto flex max-w-sm items-center">
|
||||
<div className="text-brand-dark dark:text-brand-light ml-2 rounded-full bg-gray-200 px-1.5 text-xs font-bold dark:bg-gray-800 dark:font-normal">
|
||||
<p>soon</p>
|
||||
</div>
|
||||
<p className="ml-3 text-lg leading-loose text-slate-500 dark:text-slate-200">{feature.name}</p>
|
||||
</dt>
|
||||
</div>
|
||||
))}
|
||||
<a href="https://github.com/formbricks/formbricks/issues/new/choose">
|
||||
<div className="mx-auto flex max-w-sm items-center transition delay-100 duration-200 ease-in-out hover:scale-105">
|
||||
<PlusIcon
|
||||
className="text-brand-dark dark:text-brand-lightml-4 h-6 w-6 md:ml-5"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<p className="ml-5 text-lg leading-loose text-slate-500 underline underline-offset-4 dark:text-slate-200">
|
||||
Add feature to roadmap
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</dl>
|
||||
</div>
|
||||
<TryItCTA />
|
||||
</Layout>
|
||||
);
|
||||
|
||||
export default ReactFormBuilderPage;
|
||||
@@ -1,156 +0,0 @@
|
||||
import HeroTitle from "@/components/shared/HeroTitle";
|
||||
import Layout from "@/components/shared/Layout";
|
||||
import CTA from "../components/shared/CTA";
|
||||
import Image from "next/image";
|
||||
import ImageEmail from "../images/email.svg";
|
||||
import HeadingCentered from "@/components/shared/HeadingCentered";
|
||||
import FeatureHighlight from "@/components/shared/FeatureHighlight";
|
||||
import { CheckIcon, PlusIcon } from "@heroicons/react/24/outline";
|
||||
|
||||
const hereFeatures = [
|
||||
{
|
||||
name: "Unlimited forms",
|
||||
},
|
||||
{
|
||||
name: "Unlimited submissions",
|
||||
},
|
||||
{
|
||||
name: "Multiple choice questions",
|
||||
},
|
||||
{
|
||||
name: "Free text questions",
|
||||
},
|
||||
{
|
||||
name: "Custom “ThankYou” Page",
|
||||
},
|
||||
{
|
||||
name: "Webhooks",
|
||||
},
|
||||
{
|
||||
name: "Email Notifications",
|
||||
},
|
||||
];
|
||||
|
||||
const nextFeatures = [
|
||||
{
|
||||
name: "20+ question types",
|
||||
},
|
||||
{
|
||||
name: "Integrations",
|
||||
},
|
||||
{
|
||||
name: "Granular data piping",
|
||||
},
|
||||
{
|
||||
name: "In-depth analytics",
|
||||
},
|
||||
];
|
||||
|
||||
const soonFeatures = [
|
||||
{
|
||||
name: "Survey Templates",
|
||||
},
|
||||
{
|
||||
name: "Form logic",
|
||||
},
|
||||
{
|
||||
name: "Hidden fields ",
|
||||
},
|
||||
{
|
||||
name: "A/B Test of wording",
|
||||
},
|
||||
];
|
||||
|
||||
const FormHQPage = () => (
|
||||
<Layout
|
||||
title="Visual Builder"
|
||||
description="Free open source Typeform alternative. Build beautiful forms in minutes for free.">
|
||||
<HeroTitle headingPt1="Visual Form" headingTeal="Builder" />
|
||||
<FeatureHighlight
|
||||
featureTitle="Make beautiful surveys with our free & open source form builder"
|
||||
text={`Typeform, Jotform, Google Forms alternative but open-source and free to use? We got you! \n\n Use our visual web form builder to create beautiful forms and surveys in minutes. All the question types you need, multi-page forms, conditional logic - you name it!`}
|
||||
img={
|
||||
<video
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
src="/videos/visual-builder-vid.mp4"
|
||||
className="rounded-xl"
|
||||
poster="/videos/thumbnail-visual-form-builder.png">
|
||||
<source src="movie.mp4" type="video/mp4" />
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
}
|
||||
isImgLeft
|
||||
cta="coming soon"
|
||||
href="#"
|
||||
disabled
|
||||
/>
|
||||
<FeatureHighlight
|
||||
featureTitle="Get responses via email or analyze them online."
|
||||
text={`All survey responses get collected in your Formbricks HQ. View and manage responses in your personal dashboard. \n\n Set up an email notification or send the complete submission data to your email.`}
|
||||
img={<Image src={ImageEmail} alt="react library" className="rounded-lg" />}
|
||||
/>
|
||||
<HeadingCentered
|
||||
teaser="free & open-source"
|
||||
heading="Build exactly the form you want"
|
||||
subheading="Like a proper Typeform or Google Forms alternative, you can build forms and surveys and manage the responses easily."
|
||||
/>
|
||||
|
||||
<div className="mx-auto mt-8 mb-28 md:inline-flex md:gap-x-5 lg:gap-x-20">
|
||||
<dl>
|
||||
{hereFeatures.map((feature) => (
|
||||
<div key={feature.name}>
|
||||
<dt className="flex items-center">
|
||||
<CheckIcon
|
||||
className="text-brand-dark dark:text-brand-lightabsolute ml-4 h-6 w-6 md:ml-0"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<p className="ml-14 text-lg leading-loose text-gray-500 dark:text-gray-200 md:ml-9">
|
||||
{feature.name}
|
||||
</p>
|
||||
</dt>
|
||||
</div>
|
||||
))}
|
||||
</dl>
|
||||
<dl>
|
||||
{nextFeatures.map((feature) => (
|
||||
<div key={feature.name}>
|
||||
<dt className="mx-auto flex max-w-sm items-center">
|
||||
<div className="bg-brand-dark dark:bg-brand-light ml-2 rounded-full px-1.5 text-xs font-semibold text-slate-900">
|
||||
<p>next</p>
|
||||
</div>
|
||||
<p className="ml-3 text-lg leading-loose text-gray-500 dark:text-gray-200">{feature.name}</p>
|
||||
</dt>
|
||||
</div>
|
||||
))}
|
||||
</dl>
|
||||
<dl>
|
||||
{soonFeatures.map((feature) => (
|
||||
<div key={feature.name}>
|
||||
<dt className="mx-auto flex max-w-sm items-center">
|
||||
<div className="text-brand-dark dark:text-brand-lightml-2 rounded-full bg-gray-100 px-1.5 text-xs font-bold dark:bg-black dark:font-normal">
|
||||
<p>soon</p>
|
||||
</div>
|
||||
<p className="ml-3 text-lg leading-loose text-gray-500 dark:text-gray-200">{feature.name}</p>
|
||||
</dt>
|
||||
</div>
|
||||
))}
|
||||
<a href="mailto:johannes@formbricks.com">
|
||||
<div className="mx-auto flex max-w-sm items-center transition delay-100 duration-200 ease-in-out hover:scale-105">
|
||||
<PlusIcon
|
||||
className="text-brand-dark dark:text-brand-lightml-4 h-6 w-6 md:ml-5"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<p className="ml-5 text-lg leading-loose text-gray-500 underline underline-offset-4 dark:text-gray-200">
|
||||
Add feature to roadmap
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</dl>
|
||||
</div>
|
||||
<CTA />
|
||||
</Layout>
|
||||
);
|
||||
|
||||
export default FormHQPage;
|
||||
@@ -1,26 +0,0 @@
|
||||
import HeroTitle from "@/components/shared/HeroTitle";
|
||||
import Layout from "@/components/shared/Layout";
|
||||
import ImageWebhooks from "@/images/webhook-png.png";
|
||||
import Image from "next/image";
|
||||
import CTA from "../components/shared/CTA";
|
||||
import FeatureHighlight from "@/components/shared/FeatureHighlight";
|
||||
|
||||
const WebhooksPage = () => (
|
||||
<Layout
|
||||
title="Webhooks"
|
||||
description="Don't be limited by our choice of integrations, pipe your data exactly where you need it.">
|
||||
<HeroTitle headingPt1="Webhooks" />
|
||||
<FeatureHighlight
|
||||
featureTitle="Versatile data handling"
|
||||
text="Don't be limited by our choice of integrations, pipe your data exactly where you need it. Set up webhooks in our Formbricks HQ with just a few clicks.
|
||||
Don't miss any piece of information by sending partial submissions alongside complete ones."
|
||||
img={<Image src={ImageWebhooks} alt="react library" className="rounded-lg" />}
|
||||
isImgLeft
|
||||
cta="Read docs"
|
||||
href="/docs"
|
||||
/>
|
||||
<CTA />
|
||||
</Layout>
|
||||
);
|
||||
|
||||
export default WebhooksPage;
|
||||
@@ -105,10 +105,16 @@
|
||||
border-radius: var(--formbricks-border-radius);
|
||||
resize: none;
|
||||
transition: all 0.3s ease-out;
|
||||
overflow: auto;
|
||||
outline: none;
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.formbricks-textarea:focus {
|
||||
border-color: var(--formbricks-brand-color);
|
||||
box-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
||||
}
|
||||
|
||||
/* Radio */
|
||||
|
||||
Reference in New Issue
Block a user