mirror/formbricks
1
0
Fork 0
mirror of https://github.com/formbricks/formbricks.git synced 2026-04-22 19:39:01 -05:00
Code Issues Packages Projects Releases 164 Wiki Activity

visual builder page pt 2

Browse Source
This commit is contained in:
knugget
2022-11-04 16:30:14 +02:00
parent dd48abffa1
commit 3b4adbc498
5 changed files with 49 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/formbricks-com/components/shared/CTA.tsx
+1 -1
View File
@@ -20,7 +20,7 @@ export default function CTA() {
<div className="py-24 text-center text-white rounded-xl bg-gradient-to-br from-blue-700 to-blue-800">
<h3 className="text-3xl font-bold">Cloud</h3>
<p className="mt-2 mb-4">Use our free managed service.</p>
<Button variant="primary" onClick={() => router.push("/docs")} className="mt-3">
<Button variant="primary" onClick={() => router.push("/get-started")} className="mt-3">
Get started
</Button>
</div>
apps/formbricks-com/pages/form-hq.tsx
+12 -8
View File
@@ -1,7 +1,8 @@
import HeroTitle from "@/components/shared/HeroTitle";
import Layout from "@/components/shared/Layout";
import TryItCTA from "../components/shared/TryItCTA";
import HeroAnimation from "../components/shared/HeroAnimation";
import ImageFormHQ from "../images/form-hq.png";
import Image from "next/image";
import HeadingCentered from "@/components/shared/HeadingCenetered";
import {
CodeBracketIcon,
@@ -60,7 +61,10 @@ const FormHQPage = () => (
title="FormHQ"
description="Manage all form data in one place. Analyze right here or pipe your data where you need it.">
<HeroTitle headingPt1="Form" headingTeal="HQ" />
<HeroAnimation />
<Image
src={ImageFormHQ}
alt="Form HQ by Formbricks user interface to create forms, manage submissions open source."
/>
<HeadingCentered
teaser="You have arrived"
heading="Everything you always wanted (from a form tool)"
@@ -74,7 +78,7 @@ const FormHQPage = () => (
feature.comingSoon ? "dark:to-blue dark:from-blue-900" : "dark:from-black dark:to-blue-900",
"relative col-span-1 mt-16 flex flex-col rounded-xl bg-gradient-to-b from-blue-200 to-gray-100 text-center drop-shadow-sm"
)}>
<div className="absolute -mt-12 w-full">
<div className="absolute w-full -mt-12">
<div
className={clsx(
feature.comingSoon
@@ -82,17 +86,17 @@ const FormHQPage = () => (
: "via-blue to-blue bg-gradient-to-br from-black ",
"mx-auto flex h-20 w-20 items-center justify-center rounded-full shadow"
)}>
<feature.icon className="mx-auto h-10 w-10 flex-shrink-0 text-teal-500" />
<feature.icon className="flex-shrink-0 w-10 h-10 mx-auto text-teal-500" />
</div>
</div>
<div className="flex flex-1 flex-col p-10">
<h3 className="text-blue my-4 text-lg font-medium dark:text-blue-100">{feature.name}</h3>
<dl className="mt-1 flex flex-grow flex-col justify-between">
<div className="flex flex-col flex-1 p-10">
<h3 className="my-4 text-lg font-medium text-blue dark:text-blue-100">{feature.name}</h3>
<dl className="flex flex-col justify-between flex-grow mt-1">
<dt className="sr-only">Description</dt>
<dd className="text-sm text-gray-600 dark:text-blue-400">{feature.description}</dd>
{feature.comingSoon && (
<dd className="mt-4">
<span className="rounded-full bg-gray-400 px-3 py-1 text-xs font-medium text-blue-50">
<span className="px-3 py-1 text-xs font-medium bg-gray-400 rounded-full text-blue-50">
coming soon
</span>
</dd>
apps/formbricks-com/pages/get-started.tsx
+25 -25
View File
@@ -17,52 +17,52 @@ const GetStartedPage = () => (
title="Get started"
description="Choose between managed form hosting in the cloud or self-hosting our open source software">
<HeroTitle headingPt1="How do you want to" headingTeal="run" headingPt2="Formbricks?" />
<div className="mb-32 grid grid-cols-2 gap-8 px-16">
<div className="rounded-lg bg-gradient-to-b from-blue-200 to-gray-50 px-10 py-6 dark:from-blue-300 dark:to-gray-100">
<CloudIcon className="h-20 w-20 flex-shrink-0 text-blue-500" />
<h2 className="text-blue mt-7 text-4xl font-bold">Cloud</h2>
<div className="grid grid-cols-2 gap-8 px-16 mb-32">
<div className="px-10 py-6 rounded-lg bg-gradient-to-b from-blue-200 to-gray-50 dark:from-blue-300 dark:to-gray-100">
<CloudIcon className="flex-shrink-0 w-20 h-20 text-blue-500" />
<h2 className="text-4xl font-bold text-blue mt-7">Cloud</h2>
<p className="text-sm text-gray-500">Managed hosting by Formbricks core team</p>
<p className="mt-7 font-semibold">
<p className="font-semibold mt-7">
<span className="font-bold text-black">Free</span> for 500 submissions/mo
</p>
<p className="text-sm text-gray-500">then $0.01/submission</p>
<div className="mt-7 flex items-center py-1">
<InboxArrowDownIcon className="h- mr-3 w-7 flex-shrink-0 text-blue-500" />
<p className="text-blue font-medium">Start receiving submissions right away</p>
<div className="flex items-center py-1 mt-7">
<InboxArrowDownIcon className="flex-shrink-0 mr-3 text-blue-500 h- w-7" />
<p className="font-medium text-blue">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-blue-500" />
<p className="text-blue font-medium">Automatic upgrades</p>
<ArrowPathIcon className="flex-shrink-0 mr-3 text-blue-500 h-7 w-7" />
<p className="font-medium text-blue">Automatic upgrades</p>
</div>
<div className="flex items-center py-1">
<PuzzlePieceIcon className="mr-3 h-7 w-7 flex-shrink-0 text-blue-500" />
<p className="text-blue font-medium">All enterprise features included</p>
<PuzzlePieceIcon className="flex-shrink-0 mr-3 text-blue-500 h-7 w-7" />
<p className="font-medium text-blue">All enterprise features included</p>
</div>
<Button className="mt-7 w-full text-center font-bold" variant="highlight">
<Button className="justify-center w-full font-bold text-center mt-7" variant="highlight">
Start FREE on Formbricks Cloud
</Button>
</div>
<div className="rounded-lg bg-gradient-to-b from-blue-200 to-gray-50 px-10 py-6 dark:from-blue-300 dark:to-gray-100">
<ServerStackIcon className="h-20 w-20 flex-shrink-0 text-blue-500" />
<h2 className="text-blue mt-7 text-4xl font-bold">Self-host</h2>
<div className="px-10 py-6 rounded-lg bg-gradient-to-b from-blue-200 to-gray-50 dark:from-blue-300 dark:to-gray-100">
<ServerStackIcon className="flex-shrink-0 w-20 h-20 text-blue-500" />
<h2 className="text-4xl font-bold text-blue mt-7">Self-host</h2>
<p className="text-sm text-gray-500">Submission data never leaves your infrastructure</p>
<p className="mt-7 font-semibold">
<p className="font-semibold mt-7">
<span className="font-bold text-black">Free</span> for 500 submissions/mo
</p>
<p className="text-sm text-gray-500">then $0.01/submission</p>
<div className="mt-7 flex items-center py-1">
<ShieldCheckIcon className="h- mr-3 w-7 flex-shrink-0 text-blue-500" />
<p className="text-blue font-medium">Easy deploy for most private cloud platforms</p>
<div className="flex items-center py-1 mt-7">
<ShieldCheckIcon className="flex-shrink-0 mr-3 text-blue-500 h- w-7" />
<p className="font-medium text-blue">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-blue-500" />
<p className="text-blue font-medium">Full access to production instance</p>
<CommandLineIcon className="flex-shrink-0 mr-3 text-blue-500 h-7 w-7" />
<p className="font-medium text-blue">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-blue-500" />
<p className="text-blue font-medium">Full compliance with all data privacy regulation</p>
<BuildingLibraryIcon className="flex-shrink-0 mr-3 text-blue-500 h-7 w-7" />
<p className="font-medium text-blue">Full compliance with all data privacy regulation</p>
</div>
<Button className="mt-7 w-full text-center font-bold" variant="highlight">
<Button className="justify-center w-full font-bold text-center mt-7" variant="highlight">
Get started
</Button>
</div>
apps/formbricks-com/pages/react-form-builder.tsx
+9 -9
View File
@@ -5,7 +5,7 @@ import ImageReactLib from "@/images/react-lib.png";
import ImageSchemaGeneration from "@/images/schema-generation-svg.svg";
import HeadingCentered from "@/components/shared/HeadingCenetered";
import { CheckIcon, PlusIcon } from "@heroicons/react/24/outline";
import TryItCTA from "../components/shared/TryItCTA";
import CTA from "../components/shared/CTA";
import FeatureHighlight from "@/components/shared/FeatureHighlight";
const hereFeatures = [
@@ -49,7 +49,7 @@ const nextFeatures = [
const soonFeatures = [
{
name: "Email notifications",
name: "AI supported analysis",
},
{
name: "Form logic",
@@ -93,8 +93,8 @@ const ReactFormBuilderPage = () => (
{hereFeatures.map((feature) => (
<div key={feature.name}>
<dt className="flex items-center">
<CheckIcon className="text-teal absolute 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">
<CheckIcon className="absolute w-6 h-6 ml-4 text-teal md:ml-0" aria-hidden="true" />
<p className="text-lg leading-loose text-gray-500 ml-14 dark:text-gray-200 md:ml-9">
{feature.name}
</p>
</dt>
@@ -104,7 +104,7 @@ const ReactFormBuilderPage = () => (
<dl>
{nextFeatures.map((feature) => (
<div key={feature.name}>
<dt className="mx-auto flex max-w-sm items-center">
<dt className="flex items-center max-w-sm mx-auto">
<div className="bg-teal ml-2 rounded-full px-1.5 text-xs font-semibold text-black">
<p>next</p>
</div>
@@ -116,7 +116,7 @@ const ReactFormBuilderPage = () => (
<dl>
{soonFeatures.map((feature) => (
<div key={feature.name}>
<dt className="mx-auto flex max-w-sm items-center">
<dt className="flex items-center max-w-sm mx-auto">
<div className="text-teal ml-2 rounded-full bg-gray-100 px-1.5 text-xs font-bold dark:bg-black dark:font-normal">
<p>soon</p>
</div>
@@ -125,8 +125,8 @@ const ReactFormBuilderPage = () => (
</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-teal ml-4 h-6 w-6 md:ml-5" aria-hidden="true" />
<div className="flex items-center max-w-sm mx-auto transition duration-200 ease-in-out delay-100 hover:scale-105">
<PlusIcon className="w-6 h-6 ml-4 text-teal 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>
@@ -134,7 +134,7 @@ const ReactFormBuilderPage = () => (
</a>
</dl>
</div>
<TryItCTA />
<CTA />
</Layout>
);
apps/formbricks-com/pages/visual-builder.tsx
+2 -2
View File
@@ -1,6 +1,6 @@
import HeroTitle from "@/components/shared/HeroTitle";
import Layout from "@/components/shared/Layout";
import TryItCTA from "../components/shared/TryItCTA";
import CTA from "../components/shared/CTA";
import Image from "next/image";
import ImageEmail from "../images/email.svg";
import HeadingCentered from "@/components/shared/HeadingCenetered";
@@ -142,7 +142,7 @@ const FormHQPage = () => (
</a>
</dl>
</div>
<TryItCTA />
<CTA />
</Layout>
);