From b5928e71e52b7609b842c0a1d0158fd8608ea918 Mon Sep 17 00:00:00 2001 From: Johannes <72809645+jobenjada@users.noreply.github.com> Date: Fri, 12 May 2023 14:25:17 +0200 Subject: [PATCH] Add Best Practices to Landingpage (#281) * Update landingpage --- .../components/docs/DocsFeedback.tsx | 4 +- .../formbricks-com/components/docs/Layout.tsx | 2 +- .../components/dummyUI/CTAQuestion.tsx | 45 + .../components/dummyUI/ContentWrapper.tsx | 10 + .../components/dummyUI/DemoPreview.tsx | 44 + .../components/dummyUI/DemoView.tsx | 41 + .../components/dummyUI/Headline.tsx | 2 +- .../components/dummyUI/HtmlBody.tsx | 11 + .../components/dummyUI/Modal.tsx | 24 +- .../dummyUI/MultipleChoiceMultiQuestion.tsx | 107 +++ .../dummyUI/MultipleChoiceSingleQuestion.tsx | 33 +- .../components/dummyUI/NPSQuestion.tsx | 84 ++ .../components/dummyUI/OpenTextQuestion.tsx | 28 +- .../components/dummyUI/PreviewSurvey.tsx | 117 +-- .../dummyUI/QuestionConditional.tsx | 65 ++ .../components/dummyUI/RatingQuestion.tsx | 91 ++ .../components/dummyUI/TemplateList.tsx | 303 ++----- .../components/dummyUI/ThankYouCard.tsx | 52 ++ .../components/dummyUI/questionTypes.tsx | 26 - .../components/dummyUI/templateTypes.tsx | 12 - .../components/dummyUI/templates.ts | 817 +++++++++++++----- apps/formbricks-com/components/home/Hero.tsx | 24 +- apps/formbricks-com/components/home/Steps.tsx | 69 +- .../shared/BestPracticeNavigation.tsx | 114 +++ .../components/shared/BestPractices.tsx | 103 +-- .../components/shared/Callout.tsx | 2 +- .../components/shared/EarlyBirdDeal.tsx | 2 +- .../components/shared/Header.tsx | 268 +++++- .../components/shared/HeaderLight.tsx | 4 +- .../components/shared/LayoutLight.tsx | 2 +- .../components/shared/Pricing.tsx | 4 +- .../components/shared/UseCaseCTA.tsx | 29 + .../components/shared/UseCaseHeader.tsx | 24 + apps/formbricks-com/lib/cleanHtml.ts | 79 ++ apps/formbricks-com/lib/cn.ts | 6 + apps/formbricks-com/lib/docsNavigation.ts | 20 +- apps/formbricks-com/next.config.mjs | 2 +- apps/formbricks-com/package.json | 2 + apps/formbricks-com/pages/demo/index.tsx | 4 +- .../pages/docs-feedback/index.tsx | 44 + .../cancel-subscription/change-text.png | Bin 0 -> 95213 bytes .../create-cancel-flow.png | Bin 0 -> 105402 bytes .../cancel-subscription/index.mdx | 125 +++ .../cancel-subscription/publish-survey.png | Bin 0 -> 71671 bytes .../cancel-subscription/recontact-options.png | Bin 0 -> 37847 bytes .../cancel-subscription/select-action.png | Bin 0 -> 11478 bytes .../trigger-css-selector.png | Bin 0 -> 33258 bytes .../trigger-inner-text.png | Bin 0 -> 32835 bytes .../cancel-subscription/trigger-page-url.png | Bin 0 -> 60319 bytes .../best-practices/docs-feedback/index.mdx | 43 +- .../feature-chaser/action-css.png | Bin 0 -> 68872 bytes .../feature-chaser/action-text.png | Bin 0 -> 60696 bytes .../feature-chaser/change-text.png | Bin 0 -> 65366 bytes .../feature-chaser/create-survey.png | Bin 0 -> 84419 bytes .../best-practices/feature-chaser/index.mdx | 106 +++ .../best-practices/feature-chaser/publish.png | Bin 0 -> 66147 bytes .../feature-chaser/recontact-options.png | Bin 0 -> 36854 bytes .../feature-chaser/select-action.png | Bin 0 -> 16951 bytes .../feedback-box/add-action.png | Bin 0 -> 78119 bytes .../feedback-box/add-css-action.png | Bin 0 -> 32250 bytes .../feedback-box/add-html-action.png | Bin 0 -> 31118 bytes .../feedback-box/change-text-content.png | Bin 0 -> 69666 bytes .../create-feedback-box-by-template.png | Bin 0 -> 114942 bytes .../best-practices/feedback-box/index.mdx | 216 ++--- .../feedback-box/publish-survey.png | Bin 0 -> 60195 bytes .../select-feedback-button-action.png | Bin 0 -> 11382 bytes .../feedback-box/set-recontact-options.png | Bin 0 -> 38715 bytes .../improve-trial-cr/action-innertext.png | Bin 0 -> 59161 bytes .../improve-trial-cr/action-pageurl.png | Bin 0 -> 117427 bytes .../improve-trial-cr/change-text.png | Bin 0 -> 56170 bytes .../improve-trial-cr/create-survey.png | Bin 0 -> 107979 bytes .../best-practices/improve-trial-cr/index.mdx | 114 +++ .../improve-trial-cr/publish.png | Bin 0 -> 71081 bytes .../improve-trial-cr/recontact-options.png | Bin 0 -> 44063 bytes .../improve-trial-cr/select-action.png | Bin 0 -> 19312 bytes .../interview-prompt/action-css.png | Bin 0 -> 29875 bytes .../interview-prompt/action-innertext.png | Bin 0 -> 29831 bytes .../interview-prompt/action-pageurl.png | Bin 0 -> 55622 bytes .../interview-prompt/add-action.png | Bin 0 -> 15196 bytes .../interview-prompt/change-text.png | Bin 0 -> 75265 bytes .../interview-prompt/create-prompt.png | Bin 0 -> 82247 bytes .../best-practices/interview-prompt/index.mdx | 125 ++- .../interview-prompt/interview-example.png | Bin 0 -> 47863 bytes .../interview-prompt/publish-survey.png | Bin 0 -> 59664 bytes .../interview-prompt/recontact-options.png | Bin 0 -> 31648 bytes .../interview-prompt/select-action.png | Bin 0 -> 12458 bytes .../best-practices/pmf-survey/action-css.png | Bin 0 -> 29875 bytes .../pmf-survey/action-pageurl.png | Bin 0 -> 55622 bytes .../best-practices/pmf-survey/change-text.png | Bin 0 -> 77489 bytes .../pmf-survey/create-survey.png | Bin 0 -> 113822 bytes .../docs/best-practices/pmf-survey/index.mdx | 195 ++--- .../best-practices/pmf-survey/publish.png | Bin 0 -> 67331 bytes .../pmf-survey/recontact-options.png | Bin 0 -> 31648 bytes .../pmf-survey/select-action.png | Bin 0 -> 12458 bytes .../pages/feature-chaser/index.tsx | 43 + .../pages/feedback-box/index.tsx | 34 +- .../pages/improve-trial-conversion/index.tsx | 41 + .../pages/interview-prompt/index.tsx | 41 + .../pages/learn-from-churn/index.tsx | 41 + .../measure-product-market-fit/index.tsx | 164 ++++ .../pages/onboarding-segmentation/index.tsx | 41 + .../settings/billing/PricingTable.tsx | 2 +- .../surveys/templates/templates.ts | 139 ++- apps/web/app/layout.tsx | 2 +- packages/types/template.ts | 10 - packages/ui/components/Button.tsx | 2 +- pnpm-lock.yaml | 6 + 107 files changed, 3068 insertions(+), 1142 deletions(-) create mode 100644 apps/formbricks-com/components/dummyUI/CTAQuestion.tsx create mode 100644 apps/formbricks-com/components/dummyUI/ContentWrapper.tsx create mode 100644 apps/formbricks-com/components/dummyUI/DemoPreview.tsx create mode 100644 apps/formbricks-com/components/dummyUI/DemoView.tsx create mode 100644 apps/formbricks-com/components/dummyUI/HtmlBody.tsx create mode 100644 apps/formbricks-com/components/dummyUI/MultipleChoiceMultiQuestion.tsx create mode 100644 apps/formbricks-com/components/dummyUI/NPSQuestion.tsx create mode 100644 apps/formbricks-com/components/dummyUI/QuestionConditional.tsx create mode 100644 apps/formbricks-com/components/dummyUI/RatingQuestion.tsx create mode 100644 apps/formbricks-com/components/dummyUI/ThankYouCard.tsx delete mode 100644 apps/formbricks-com/components/dummyUI/questionTypes.tsx delete mode 100644 apps/formbricks-com/components/dummyUI/templateTypes.tsx create mode 100644 apps/formbricks-com/components/shared/BestPracticeNavigation.tsx create mode 100644 apps/formbricks-com/components/shared/UseCaseCTA.tsx create mode 100644 apps/formbricks-com/components/shared/UseCaseHeader.tsx create mode 100644 apps/formbricks-com/lib/cleanHtml.ts create mode 100644 apps/formbricks-com/lib/cn.ts create mode 100644 apps/formbricks-com/pages/docs-feedback/index.tsx create mode 100644 apps/formbricks-com/pages/docs/best-practices/cancel-subscription/change-text.png create mode 100644 apps/formbricks-com/pages/docs/best-practices/cancel-subscription/create-cancel-flow.png create mode 100644 apps/formbricks-com/pages/docs/best-practices/cancel-subscription/index.mdx create mode 100644 apps/formbricks-com/pages/docs/best-practices/cancel-subscription/publish-survey.png create mode 100644 apps/formbricks-com/pages/docs/best-practices/cancel-subscription/recontact-options.png create mode 100644 apps/formbricks-com/pages/docs/best-practices/cancel-subscription/select-action.png create mode 100644 apps/formbricks-com/pages/docs/best-practices/cancel-subscription/trigger-css-selector.png create mode 100644 apps/formbricks-com/pages/docs/best-practices/cancel-subscription/trigger-inner-text.png create mode 100644 apps/formbricks-com/pages/docs/best-practices/cancel-subscription/trigger-page-url.png create mode 100644 apps/formbricks-com/pages/docs/best-practices/feature-chaser/action-css.png create mode 100644 apps/formbricks-com/pages/docs/best-practices/feature-chaser/action-text.png create mode 100644 apps/formbricks-com/pages/docs/best-practices/feature-chaser/change-text.png create mode 100644 apps/formbricks-com/pages/docs/best-practices/feature-chaser/create-survey.png create mode 100644 apps/formbricks-com/pages/docs/best-practices/feature-chaser/index.mdx create mode 100644 apps/formbricks-com/pages/docs/best-practices/feature-chaser/publish.png create mode 100644 apps/formbricks-com/pages/docs/best-practices/feature-chaser/recontact-options.png create mode 100644 apps/formbricks-com/pages/docs/best-practices/feature-chaser/select-action.png create mode 100644 apps/formbricks-com/pages/docs/best-practices/feedback-box/add-action.png create mode 100644 apps/formbricks-com/pages/docs/best-practices/feedback-box/add-css-action.png create mode 100644 apps/formbricks-com/pages/docs/best-practices/feedback-box/add-html-action.png create mode 100644 apps/formbricks-com/pages/docs/best-practices/feedback-box/change-text-content.png create mode 100644 apps/formbricks-com/pages/docs/best-practices/feedback-box/create-feedback-box-by-template.png create mode 100644 apps/formbricks-com/pages/docs/best-practices/feedback-box/publish-survey.png create mode 100644 apps/formbricks-com/pages/docs/best-practices/feedback-box/select-feedback-button-action.png create mode 100644 apps/formbricks-com/pages/docs/best-practices/feedback-box/set-recontact-options.png create mode 100644 apps/formbricks-com/pages/docs/best-practices/improve-trial-cr/action-innertext.png create mode 100644 apps/formbricks-com/pages/docs/best-practices/improve-trial-cr/action-pageurl.png create mode 100644 apps/formbricks-com/pages/docs/best-practices/improve-trial-cr/change-text.png create mode 100644 apps/formbricks-com/pages/docs/best-practices/improve-trial-cr/create-survey.png create mode 100644 apps/formbricks-com/pages/docs/best-practices/improve-trial-cr/index.mdx create mode 100644 apps/formbricks-com/pages/docs/best-practices/improve-trial-cr/publish.png create mode 100644 apps/formbricks-com/pages/docs/best-practices/improve-trial-cr/recontact-options.png create mode 100644 apps/formbricks-com/pages/docs/best-practices/improve-trial-cr/select-action.png create mode 100644 apps/formbricks-com/pages/docs/best-practices/interview-prompt/action-css.png create mode 100644 apps/formbricks-com/pages/docs/best-practices/interview-prompt/action-innertext.png create mode 100644 apps/formbricks-com/pages/docs/best-practices/interview-prompt/action-pageurl.png create mode 100644 apps/formbricks-com/pages/docs/best-practices/interview-prompt/add-action.png create mode 100644 apps/formbricks-com/pages/docs/best-practices/interview-prompt/change-text.png create mode 100644 apps/formbricks-com/pages/docs/best-practices/interview-prompt/create-prompt.png create mode 100644 apps/formbricks-com/pages/docs/best-practices/interview-prompt/interview-example.png create mode 100644 apps/formbricks-com/pages/docs/best-practices/interview-prompt/publish-survey.png create mode 100644 apps/formbricks-com/pages/docs/best-practices/interview-prompt/recontact-options.png create mode 100644 apps/formbricks-com/pages/docs/best-practices/interview-prompt/select-action.png create mode 100644 apps/formbricks-com/pages/docs/best-practices/pmf-survey/action-css.png create mode 100644 apps/formbricks-com/pages/docs/best-practices/pmf-survey/action-pageurl.png create mode 100644 apps/formbricks-com/pages/docs/best-practices/pmf-survey/change-text.png create mode 100644 apps/formbricks-com/pages/docs/best-practices/pmf-survey/create-survey.png create mode 100644 apps/formbricks-com/pages/docs/best-practices/pmf-survey/publish.png create mode 100644 apps/formbricks-com/pages/docs/best-practices/pmf-survey/recontact-options.png create mode 100644 apps/formbricks-com/pages/docs/best-practices/pmf-survey/select-action.png create mode 100644 apps/formbricks-com/pages/feature-chaser/index.tsx create mode 100644 apps/formbricks-com/pages/improve-trial-conversion/index.tsx create mode 100644 apps/formbricks-com/pages/interview-prompt/index.tsx create mode 100644 apps/formbricks-com/pages/learn-from-churn/index.tsx create mode 100644 apps/formbricks-com/pages/measure-product-market-fit/index.tsx create mode 100644 apps/formbricks-com/pages/onboarding-segmentation/index.tsx delete mode 100644 packages/types/template.ts diff --git a/apps/formbricks-com/components/docs/DocsFeedback.tsx b/apps/formbricks-com/components/docs/DocsFeedback.tsx index 99ac645b10..719fb06be4 100644 --- a/apps/formbricks-com/components/docs/DocsFeedback.tsx +++ b/apps/formbricks-com/components/docs/DocsFeedback.tsx @@ -22,10 +22,10 @@ export const DocsFeedback: React.FC = () => { return (
Join our Discord and ask away. We're happy to help where we can!
diff --git a/apps/formbricks-com/components/dummyUI/CTAQuestion.tsx b/apps/formbricks-com/components/dummyUI/CTAQuestion.tsx new file mode 100644 index 0000000000..a6e3f2bf43 --- /dev/null +++ b/apps/formbricks-com/components/dummyUI/CTAQuestion.tsx @@ -0,0 +1,45 @@ +import type { CTAQuestion } from "@formbricks/types/questions"; +import Headline from "./Headline"; +import HtmlBody from "./HtmlBody"; + +interface CTAQuestionProps { + question: CTAQuestion; + onSubmit: (data: { [x: string]: any }) => void; + lastQuestion: boolean; + brandColor: string; +} + +export default function CTAQuestion({ question, onSubmit, lastQuestion, brandColor }: CTAQuestionProps) { + return ( +Preview
+Trusted by
-{bestPractice.description}
+{bestPractice.description}
-