Launch hq blog (#173)

* draft-1

* update

Co-authored-by: knugget <johannes@knugget.de>

README.md

@@ -5,7 +5,7 @@
   <h3 align="center">Formbricks</h3>
 
   <p align="center">
-    The Open Source Forms & Survey Toolbox
+    The Open Source Survey Toolbox
     <br />
     <a href="https://formbricks.com/">Website</a>  |  <a href="https://formbricks.com/discord">Join Discord community</a>
   </p>

apps/formbricks-com/components/home/Features.tsx

@@ -12,8 +12,8 @@ import HeadingCentered from "../shared/HeadingCentered";
 const features = [
   {
     id: "formCreation",
-    name: "Fast Form Creation",
-    description: "Build complex forms with our React Lib. Our data pipes also work with any other form.",
+    name: "Fast Survey Creation",
+    description: "Build complex forms with our React Lib. Use templates to assure consistent data.",
     icon: PlusIcon,
   },
   {
@@ -30,8 +30,8 @@ const features = [
   },
   {
     id: "nocodeBuilder",
-    name: "No-Code Builder",
-    description: "Let your operators create and change forms. Stick with React to style and embed forms.",
+    name: "100% customizable",
+    description: "Delight your users and get more responses with a native look & feel.",
     icon: RectangleGroupIcon,
     comingSoon: true,
   },
@@ -60,8 +60,8 @@ export default function Features() {
         <HeadingCentered
           closer
           teaser="the Swiss army knife for forms & surveys"
-          heading="Home-cooked taste, delivered in minutes"
-          subheading="Build a 'home-cooked' solution at the fraction of the time. We do the heavy lifting, you customize
+          heading="Build native surveys in minutes"
+          subheading="Build a 'home-cooked' solution in a fraction of the time. We do the heavy lifting, you customize
             to your needs."
         />
 

apps/formbricks-com/components/home/Hero.tsx

@@ -12,9 +12,9 @@ export default function Hero({}: Props) {
       <HeroTitle
         headingPt1="The"
         headingTeal="Open Source"
-        headingPt2="Forms & Survey Toolbox"
-        subheading="We're building all essential form functionality so you don't have to. Modular, customizable,
-        extendable. And open source.">
+        headingPt2="Form & Survey Toolbox"
+        subheading="Bring all qualitative user data on one open source platform. Modular, customizable,
+        extendable.">
         <Button variant="secondary" onClick={() => router.push("/docs")}>
           Read docs
         </Button>

apps/formbricks-com/components/shared/Footer.tsx

@@ -63,9 +63,7 @@ export default function Footer() {
         <div className="xl:grid xl:grid-cols-3 xl:gap-8">
           <div className="space-y-8 xl:col-span-1">
             <FooterLogo className="h-8 w-auto sm:h-10" />
-            <p className="text-base text-slate-500 dark:text-slate-400">
-              The Open Source Forms & Survey Toolbox
-            </p>
+            <p className="text-base text-slate-500 dark:text-slate-400">The Open Source Survey Toolbox</p>
             <div className="flex space-x-6">
               {navigation.social.map((item) => (
                 <Link key={item.name} href={item.href} className="text-slate-400 hover:text-gray-500">
@@ -78,7 +76,7 @@ export default function Footer() {
           <div className="mt-12 grid grid-cols-2 gap-8 xl:col-span-2 xl:mt-0">
             <div className="md:grid md:grid-cols-2 md:gap-8">
               <div>
-                <h3 className="text-sm font-bold text-slate-700 dark:text-slate-300">Form Creation</h3>
+                <h3 className="text-sm font-bold text-slate-700 dark:text-slate-300">Survey Creation</h3>
                 <ul role="list" className="mt-4 space-y-4">
                   {navigation.creation.map((item) => (
                     <li key={item.name}>

apps/formbricks-com/components/shared/Header.tsx

@@ -24,7 +24,7 @@ import { ThemeSelector } from "./ThemeSelector";
 const creation = [
   {
     name: "React Library",
-    description: "Build forms with React.js",
+    description: "Build surveys with React.js",
     href: "/react-form-library",
     icon: CodeBracketSquareIcon,
     status: true,
@@ -48,7 +48,7 @@ const creation = [
 const pipes = [
   {
     name: "Core API",
-    description: "The OS form engine",
+    description: "The OS survey engine",
     href: "/core-api",
     icon: CpuChipIcon,
     status: true,
@@ -137,7 +137,7 @@ export default function Header() {
                     <div className="overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5">
                       <div className="relative grid gap-6 bg-slate-50 px-5 py-6 dark:bg-slate-700 sm:gap-6 sm:p-8 lg:grid-cols-3">
                         <div>
-                          <h4 className="mb-6 ml-16 text-sm text-slate-400">Form Creation</h4>
+                          <h4 className="mb-6 ml-16 text-sm text-slate-400">Survey Creation</h4>
                           {creation.map((brick) => (
                             <Link
                               key={brick.name}
@@ -310,7 +310,7 @@ export default function Header() {
 
               <nav className="relative bg-gray-200 px-5 py-6 dark:bg-slate-800">
                 <div>
-                  <h4 className="mb-3 text-sm text-gray-900 dark:text-gray-300">Form Creation</h4>
+                  <h4 className="mb-3 text-sm text-gray-900 dark:text-gray-300">Survey Creation</h4>
                   {creation.map((brick) => (
                     <Link
                       key={brick.name}

apps/formbricks-com/pages/blog/launch-formbricks-hq/index.mdx

@@ -0,0 +1,89 @@
+import Image from "next/image";
+import LayoutMdx from "@/components/shared/LayoutMdx";
+import NewsletterSignup from "@/components/shared/NewsletterSignup";
+
+import LaunchDay from "./launch formbricks HQ open source alternative formspree.png";
+import Polling from "../weekly-update-021222/chart-3.webp";
+import Schema from "../../docs/formbricks-hq/schema/data-visualisation-open-source-survey-builder.png";
+import NoSchema from "../../docs/formbricks-hq/schema/no-schema-visualisation-of-open-source-data-form-builder-creator-webform.png";
+import NPS1 from "./NPS-filled-out.webp";
+import NPS2 from "./NPS-feedback-summary.webp";
+import NPS3 from "./NPS-feedback-overview.webp";
+import API from "./API-endpoint.webp";
+
+export const meta = {
+  title: "Formbricks HQ launched! 🚀",
+  description:
+    "we are thrilled to announce the launch of Formbricks HQ, the newest addition to our suite of open source survey tools!",
+  date: "2022-12-08",
+};
+
+<Image src={LaunchDay} alt="Formbricks HQ launched" className="rounded-lg" />
+
+_Today, we are thrilled to announce the launch of Formbricks HQ, the newest addition to our suite of open source survey tools! Formbricks HQ is an easy-to-use product that allows developers to quickly and easily create, manage, and deploy forms for their websites, without the need for a server._
+
+### What can you use it for?
+
+In our last [Weekly Update](/blog/weekly-update-021222), we already shared the use case of polling users natively in your app or webshop and showing them the results right away.
+
+<Image src={Polling} alt="Polling users natively in-app" className="rounded-lg" />
+
+## Use case: Native NPS survey
+
+To showcase the power of Formbricks HQ, we built another common use case: The NPS survey. We used Formbricks React to build the survey natively into our example app. When the survey is submitted, the data is sent to Formbricks HQ and displayed.
+
+### Step 1: Create NPS survey in Formbricks HQ
+
+With a few clicks you create a new form in Formbricks HQ:
+
+<Image src={API} alt="Polling users natively in-app" className="rounded-lg" />
+
+### Step 2: Using Formbricks React to build the survey
+
+We built the NPS survey with Formbricks React. It is a simple form with two questions and a submit button. The form is built with the following code:
+
+```jsx
+code;
+```
+
+<Image src={NPS1} alt="NPS natively embedded into app" className="rounded-lg" />
+
+From the HQ you can copy the endpoint to your form action. The endpoint is a POST request which accepts JSON data. The data is then sent to your personal endpoint hosted on Formbricks HQ.
+
+### Step 3: Displaying the results
+
+The results are displayed in the HQ dashboard. You can see the results in real-time. The dashboard is built with Formbricks Charts and uses the same schema as Formbricks React.
+
+<Image src={NPS2} alt="Results summary" className="rounded-lg" />
+
+<Image src={NPS3} alt="Results overview" className="rounded-lg" />
+
+### What is a schema good for?
+
+The cool thing - apart from you being able to self-host and customize the complete solution - is that Frombricks React and HQ are using the same schema.
+
+We’ve wrote about the [benefit in-depth in our Docs](/docs/formbricks-hq/schema), but here is the benefit in a nutshell:
+
+You get a full image of the survey data including questions and not selected options. Without a schema, your stuck with the data which is sent along so the selected value and the input label. Here is the difference:
+
+<Image src={NoSchema} alt="Open Source Form with Question about favorite food" className="rounded-lg" />
+<Image src={Schema} alt="Open Source Form with Question about favorite food" className="rounded-lg" />
+
+And just like that you have a native NPS survey with full data insights! 🚀
+
+## What else can you use Formbricks HQ for?
+
+Apart from the use case above, you can send any form data to your personal endpoint. Here is a short tutorial on how to do that, [the full guide is in our docs](/docs/react-form-library/link-formbricks-hq):
+
+1. Sign up at [hq.formbricks.com](http://hq.formbricks.com)
+2. Create a new form
+3. Copy the endpoint to your form action
+4. Receive responses
+
+### What do you think?
+
+[Join our Discord to share feedback and request features!](https://formbricks.com/discord)
+
+<NewsletterSignup />
+
+export default ({ children }) => <LayoutMdx meta={meta}>{children}</LayoutMdx>;