chore: Author page for blog (SEO) (#2356)

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

@@ -5,20 +5,20 @@ import HeadingCentered from "../shared/HeadingCentered";
 const features = [
   {
     id: "compliance",
-    name: "Smoothly Compliant",
+    name: "Smoothly compliant",
     description: "Use our GDPR-compliant Cloud or self-host the entire solution.",
     icon: EyeIcon,
   },
   {
     id: "customizable",
-    name: "Fully Customizable",
+    name: "Fully customizable",
     description: "Full customizability and extendability. Integrate with your stack easily.",
     icon: HandPuzzleIcon,
   },
   {
     id: "independent",
     name: "Stay independent",
-    description: "The code is open-source. Do with it what your organization needs.",
+    description: "The code is open source. Do with it what your organization needs.",
     icon: CodeFileIcon,
   },
 ];
@@ -26,8 +26,8 @@ export const Features: React.FC = () => {
   return (
     <div className="relative">
       <HeadingCentered
-        teaser="Data Privacy at heart"
-        heading="The only open-source solution"
+        teaser="Data privacy at heart"
+        heading="Open Source Experience Management"
         subheading="Comply with all data privacy regulation with ease. Self-host if you want."
       />
 

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

@@ -63,7 +63,7 @@ export const Hero: React.FC = ({}) => {
 
         <div className="hidden pt-14 md:block">
           <Button
-            variant="highlight"
+            variant="darkCTA"
             className="mr-3 px-6"
             onClick={() => {
               router.push("https://app.formbricks.com/auth/signup");

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

@@ -0,0 +1,55 @@
+import InappMockup from "@/images/survey-type-inapp.png";
+import LinkMockup from "@/images/survey-type-link.webp";
+import WebsiteMockup from "@/images/survey-type-website.png";
+import Image from "next/image";
+import { useRouter } from "next/router";
+
+import { OptionCard } from "@formbricks/ui/OptionCard";
+
+import HeadingCentered from "../shared/HeadingCentered";
+
+export const SurveyTypeSelection: React.FC = () => {
+  const router = useRouter();
+
+  return (
+    <div className="relative">
+      <HeadingCentered
+        teaser="Measure satisfaction continuously"
+        heading="Ask anywhere, get insights in one place"
+        subheading="Follow individual feedback trails or zoom out for the big picture. All in one place."
+      />
+
+      <div className="flex space-x-8 text-center">
+        <OptionCard
+          size="lg"
+          title="On your website"
+          description="Target specific visitors on your websites."
+          onSelect={() => {
+            router.push("/website-survey");
+          }}>
+          <Image src={WebsiteMockup} alt="" height={350} />
+        </OptionCard>
+        <OptionCard
+          size="lg"
+          title="In emails"
+          description="Create on brand surveys, embedded in your emails."
+          onSelect={() => {
+            router.push("/open-source-form-builder");
+          }}>
+          <Image src={LinkMockup} alt="" height={350} />
+        </OptionCard>
+        <OptionCard
+          size="lg"
+          title="In your app"
+          description="Research any user cohort in your app."
+          onSelect={() => {
+            router.push("/in-app-survey");
+          }}>
+          <Image src={InappMockup} alt="" height={350} />
+        </OptionCard>
+      </div>
+    </div>
+  );
+};
+
+export default SurveyTypeSelection;

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

@@ -1,8 +1,8 @@
 import AuthorJohannes from "@/images/blog/johannes-co-founder-formbricks-small.jpg";
-import AuthorOla from "@/images/blog/ola-content-writer.jpg";
 import AuthorShubham from "@/images/blog/shubham-engineer.png";
 import AuthorSudhanshu from "@/images/blog/sudhanshu-engineer.jpeg";
 import Image from "next/image";
+import Link from "next/link";
 
 interface AuthorBoxProps {
   name: string;
@@ -14,7 +14,6 @@ interface AuthorBoxProps {
 
 const authorImages = {
   Johannes: AuthorJohannes,
-  Ola: AuthorOla,
   Shubham: AuthorShubham,
   Sudhanshu: AuthorSudhanshu,
 };
@@ -34,7 +33,9 @@ export default function AuthorBox({ name, title, date, duration, author }: Autho
       />
       <div className="flex w-full items-end justify-between">
         <div>
-          <p className="leading-0 !m-0  font-medium text-slate-600 dark:text-slate-300">{name}</p>
+          <Link href={`/blog/author/${name.toLowerCase()}`}>
+            <p className="leading-0 !m-0  font-medium text-slate-600 dark:text-slate-300">{name}</p>
+          </Link>
           <p className="!m-0 text-sm text-slate-400">{title}</p>
         </div>
         <div className="text-right">

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

@@ -6,8 +6,9 @@ export default function InsightOppos() {
   return (
     <div id="best-practices">
       <HeadingCentered
-        heading="Get started with Best Practices"
-        subheading="Run battle-tested approaches for qualitative user research in minutes."
+        teaser="Do what works"
+        heading="Get started with best practices"
+        subheading="Run battle-tested approaches for user research in minutes."
       />
       <BestPracticeNavigation />
     </div>

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

@@ -27,7 +27,7 @@ export default function BreakerCTA({ inverted = false, teaser, headline, subhead
       <div className="relative px-4 py-8 sm:px-6 sm:pb-12 sm:pt-8 lg:px-8 lg:pt-12">
         <div className="xs:block xs:absolute xs:right-10 hidden md:top-1/2 md:-translate-y-1/2">
           <Button
-            variant="highlight"
+            variant="darkCTA"
             onClick={() => {
               plausible("Breaker_CTAs");
               router.push(`${href}`);

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

@@ -13,9 +13,9 @@ export default function HeadingCentered({ teaser, heading, subheading }: Props)
       <h2 className="text-3xl font-bold tracking-tight text-slate-800 sm:text-4xl dark:text-slate-100">
         {heading}
       </h2>
-      <p className="mx-auto mt-3 max-w-3xl text-xl text-slate-500 sm:mt-4 dark:text-slate-300">
+      <h4 className="mx-auto mt-3 max-w-3xl text-xl text-slate-500 sm:mt-4 dark:text-slate-300">
         {subheading}
-      </p>
+      </h4>
     </div>
   );
 }

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

@@ -32,6 +32,7 @@ interface Props {
     authors: string[];
     section: string;
     tags: string[];
+    ogImage: string;
   };
   children: JSX.Element;
 }
@@ -47,6 +48,7 @@ export default function LayoutMdx({ meta, children }: Props) {
         authors={meta.authors}
         section={meta.section}
         tags={meta.tags}
+        ogImage={meta.ogImage}
       />
       <HeaderLight />
       <main className="min-w-0 max-w-2xl flex-auto px-4 lg:max-w-none lg:pl-8 lg:pr-0 xl:px-16">

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

@@ -9,6 +9,7 @@ interface Props {
   authors?: string[];
   section?: string;
   tags?: string[];
+  ogImage?: string;
 }
 
 export default function MetaInformation({
@@ -19,6 +20,7 @@ export default function MetaInformation({
   authors,
   section,
   tags,
+  ogImage,
 }: Props) {
   const router = useRouter();
   const pageTitle = `${title}`;
@@ -31,7 +33,7 @@ export default function MetaInformation({
       <meta property="og:title" content={title} />
       <meta property="og:description" content={description} />
       <meta name="image" content={`https://${BASE_URL}/favicon.ico`} />
-      <meta property="og:image" content={`https://${BASE_URL}/social-image.png`} />
+      <meta property="og:image" content={`https://${BASE_URL}${ogImage ? ogImage : `/social-image.png`}`} />
       <link rel="icon" type="image/x-icon" href={`https://${BASE_URL}/favicon.ico`} />
       <link rel="canonical" href={canonicalLink} />
       <meta name="msapplication-TileColor" content="#00C4B8" />

apps/formbricks-com/pages/blog/author/johannes.tsx

@@ -0,0 +1,61 @@
+import LayoutMdx from "@/components/shared/LayoutMdx";
+import Johannes from "@/images/blog/johannes-co-founder-formbricks-small.jpg";
+import { GithubIcon, LinkedinIcon, LucideTwitter } from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
+
+export const meta = {
+  title: "Johannes Dancker",
+  description: "Co-Founder and CEO @ Formbricks GmbH",
+  date: "2024-03-21",
+  publishedTime: "2024-03-21T12:00:00",
+  authors: ["Johannes Dancker"],
+  section: "Authors",
+  tags: ["Commecial Open Source", "Entrepreneurship", "Open Source"],
+  ogImage: "/social-image.png",
+};
+
+export default function AuthorBox({}) {
+  return (
+    <LayoutMdx meta={meta}>
+      <div className="mb-8 flex items-center space-x-4 rounded-lg border border-slate-200 bg-slate-100 p-6 ">
+        <div className="flex w-full items-end justify-between">
+          <div>
+            <Image
+              alt="Johannes Dancker"
+              className="m-0 rounded-lg"
+              src={Johannes}
+              width={150}
+              height={150}
+              quality={100}
+              placeholder="blur"
+              style={{ objectFit: "contain" }}
+            />
+            <p className="!mb-0 !mt-6 !text-xl font-medium text-slate-600">Johannes Dancker</p>
+            <p className="!m-0 text-sm text-slate-500">Co-Founder and CEO, Formbricks GmbH</p>
+          </div>
+          <div className=" text-right">
+            <Link href="https://twitter.com/jobenjada" target="_blank">
+              <p className="!m-0 flex items-center justify-end font-medium text-slate-600 hover:text-slate-800 dark:text-slate-300">
+                Twitter
+                <LucideTwitter className="ml-3" />
+              </p>
+            </Link>
+            <Link href="https://github.com/jobenjada" target="_blank">
+              <p className="!m-0 flex items-center justify-end font-medium text-slate-600 hover:text-slate-800 dark:text-slate-300">
+                GitHub
+                <GithubIcon className="ml-3" />
+              </p>
+            </Link>
+            <Link href="https://www.linkedin.com/in/johannes-dancker/" target="_blank">
+              <p className="!m-0 flex items-center justify-end font-medium text-slate-600 hover:text-slate-800 dark:text-slate-300">
+                LinkedIn
+                <LinkedinIcon className="ml-3" />
+              </p>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </LayoutMdx>
+  );
+}

apps/formbricks-com/pages/blog/author/shubham.tsx

@@ -0,0 +1,61 @@
+import LayoutMdx from "@/components/shared/LayoutMdx";
+import Shubham from "@/images/blog/shubham-engineer.png";
+import { GithubIcon, LinkedinIcon, LucideTwitter } from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
+
+export const meta = {
+  title: "Shubham Palriwala",
+  description: "Full-Stack Engineer and Open Source Enthusiast",
+  date: "2024-03-21",
+  publishedTime: "2024-03-21T12:00:00",
+  authors: ["Shubham"],
+  section: "Authors",
+  tags: ["Commecial Open Source", "Entrepreneurship", "Open Source"],
+  ogImage: "/social-image.png",
+};
+
+export default function AuthorBox({}) {
+  return (
+    <LayoutMdx meta={meta}>
+      <div className="mb-8 flex items-center space-x-4 rounded-lg border border-slate-200 bg-slate-100 p-6 ">
+        <div className="flex w-full items-end justify-between">
+          <div>
+            <Image
+              alt="Shubham Palriwala"
+              className="m-0 rounded-lg"
+              src={Shubham}
+              width={150}
+              height={150}
+              quality={100}
+              placeholder="blur"
+              style={{ objectFit: "contain" }}
+            />
+            <p className="!mb-0 !mt-6 !text-xl font-medium text-slate-600">Shubham Palriwala</p>
+            <p className="!m-0 text-sm text-slate-500">Full-Stack Engineer and Open Source Enthusiast</p>
+          </div>
+          <div className=" text-right">
+            <Link href="https://twitter.com/ShubhamInTech" target="_blank">
+              <p className="!m-0 flex items-center justify-end font-medium text-slate-600 hover:text-slate-800 dark:text-slate-300">
+                Twitter
+                <LucideTwitter className="ml-3" />
+              </p>
+            </Link>
+            <Link href="https://github.com/shubhampalriwala" target="_blank">
+              <p className="!m-0 flex items-center justify-end font-medium text-slate-600 hover:text-slate-800 dark:text-slate-300">
+                GitHub
+                <GithubIcon className="ml-3" />
+              </p>
+            </Link>
+            <Link href="https://www.linkedin.com/in/shubhampalriwala/" target="_blank">
+              <p className="!m-0 flex items-center justify-end font-medium text-slate-600 hover:text-slate-800 dark:text-slate-300">
+                LinkedIn
+                <LinkedinIcon className="ml-3" />
+              </p>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </LayoutMdx>
+  );
+}

apps/formbricks-com/pages/blog/author/sudhanshu.tsx

@@ -0,0 +1,61 @@
+import LayoutMdx from "@/components/shared/LayoutMdx";
+import Sudhanshu from "@/images/blog/sudhanshu-engineer.jpeg";
+import { GithubIcon, LinkedinIcon, LucideTwitter } from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
+
+export const meta = {
+  title: "Sudhanshu Pandey",
+  description: "Cloud Engineer",
+  date: "2024-03-21",
+  publishedTime: "2024-03-21T12:00:00",
+  authors: ["Sudhanshu Pandey"],
+  section: "Authors",
+  tags: ["Commecial Open Source", "Entrepreneurship", "Open Source"],
+  ogImage: "/social-image.png",
+};
+
+export default function AuthorBox({}) {
+  return (
+    <LayoutMdx meta={meta}>
+      <div className="mb-8 flex items-center space-x-4 rounded-lg border border-slate-200 bg-slate-100 p-6 ">
+        <div className="flex w-full items-end justify-between">
+          <div>
+            <Image
+              alt="Sudhanshu Pandey"
+              className="m-0 rounded-lg"
+              src={Sudhanshu}
+              width={150}
+              height={150}
+              quality={100}
+              placeholder="blur"
+              style={{ objectFit: "contain" }}
+            />
+            <p className="!mb-0 !mt-6 !text-xl font-medium text-slate-600">Sudhanshu Pandey</p>
+            <p className="!m-0 text-sm text-slate-500">Cloud Engineer</p>
+          </div>
+          <div className=" text-right">
+            <Link href="https://twitter.com/s_pandey101" target="_blank">
+              <p className="!m-0 flex items-center justify-end font-medium text-slate-600 hover:text-slate-800 dark:text-slate-300">
+                Twitter
+                <LucideTwitter className="ml-3" />
+              </p>
+            </Link>
+            <Link href="https://github.com/sp6370" target="_blank">
+              <p className="!m-0 flex items-center justify-end font-medium text-slate-600 hover:text-slate-800 dark:text-slate-300">
+                GitHub
+                <GithubIcon className="ml-3" />
+              </p>
+            </Link>
+            <Link href="https://www.linkedin.com/in/sp6370/" target="_blank">
+              <p className="!m-0 flex items-center justify-end font-medium text-slate-600 hover:text-slate-800 dark:text-slate-300">
+                LinkedIn
+                <LinkedinIcon className="ml-3" />
+              </p>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </LayoutMdx>
+  );
+}

apps/formbricks-com/pages/blog/best-feedback-app-and-how-to-use-them/index.mdx

@@ -17,7 +17,7 @@ export const meta = {
     "We looked at the best in-app feedback tools 2024 and found a clear winner. Gather feedback in your app for free with Formbricks.",
   date: "2023-12-21",
   publishedTime: "2023-12-21T12:00:00",
-  authors: ["Olasunkanmi Balogun"],
+  authors: ["Johannes Dancker"],
   section: "Feedback Apps",
   tags: ["Feedback Apps", "Formbricks", "Userpilot", "Pendo", "Appcues", "Survicate", "Qualaroo"],
 };
@@ -25,11 +25,11 @@ export const meta = {
 <Image src={Header} alt="Gather in-app feedback for free with these 6 tools." className="w-full rounded-lg" />
 
 <AuthorBox
-  name="Olasunkanmi Balogun"
-  title="Content Writer"
+  name="Johannes"
+  title="Co-Founder and CEO"
   date="December 21st, 2023"
   duration="15"
-  author={"Ola"}
+  author={"Johannes"}
 />
 
 _Only when you understand your users and customers will they come back and tell others about your service. AI makes it easier and easier to crank out code, but are you building the right thing?_

apps/formbricks-com/pages/blog/best-hotjar-alternatives-2024-incl-open-source/index.mdx

@@ -15,19 +15,20 @@ export const meta = {
     "Looking for HotJar alternatives? We curated a list of the best HotJar alternatives going into 2024 for you.",
   date: "2023-12-29",
   publishedTime: "2023-12-29T12:00:00",
-  authors: ["Olasunkanmi Balogun"],
+  authors: ["Johannes Dancker"],
   section: "Feedback Apps",
   tags: ["Feedback Apps", "Formbricks", "Smartlook", "Lucky Orange", "Fullstory", "Mouseflow"],
+    ogImage: "/blog/hotjar.jpg"
 };
 
 <Image src={Header} alt="Get the best HotJar features with these 5 tools." className="w-full rounded-lg" />
 
 <AuthorBox
-  name="Olasunkanmi Balogun"
-  title="Content Writer"
+  name="Johannes"
+  title="Co-Founder and CEO"
   date="December 29th, 2023"
   duration="10"
-  author={"Ola"}
+  author={"Johannes"}
 />
 
 HotJar is a popular product experience insights platform that provides you with valuable data and insights into how users interact with your websites. It offers features such as heatmaps and recordings, surveys, and funnels to help you get these insights.

apps/formbricks-com/pages/blog/best-open-source-survey-software-2023/index.mdx

@@ -11,11 +11,12 @@ export const meta = {
   title: "5 Open Source Survey and Form Tools maintained in 2024",
   description:
     "Most open source projects get abandoned after a while. But these 5 open source survey tools are still alive and kicking in 2024.",
-  date: "2023-04-12",
-  publishedTime: "2023-04-12T12:00:00",
+  date: "2024-03-20",
+  publishedTime: "2024-03-20T12:00:00",
   authors: ["Johannes"],
   section: "Open Source Surveys",
   tags: ["Open Source Surveys", "Formbricks", "Typeform", "SurveyJS", "Typebot", "OpnForm", "LimeSurvey"],
+    ogImage: "/blog/best-oss-2024.png"
 };
 
 <AuthorBox name="Johannes" title="Co-Founder" date="April 7th, 2023" duration="4" author={"Johannes"} />

apps/formbricks-com/pages/blog/best-website-feedback-tools-2024/index.mdx

@@ -20,19 +20,20 @@ export const meta = {
     "The best website feedback tools play a crucial role in both enhancing the user experience and optimizing conversion rates. In this article, we cover 10 of the recommended ones.",
   date: "2024-01-16",
   publishedTime: "2024-01-16T12:00:00",
-  authors: ["Olasunkanmi Balogun"],
+  authors: ["Johannes Dancker"],
   section: "Website Feedback Tools",
   tags: ["Feedback Tools", "Formbricks", "SurveyMonkey", "Mopinion", "Qualaroo", "IdeaScale", "UserReport", "Sprinklr", "Hotjar", "UserSnap", "CrazyEgg"],
+    ogImage: "/blog/best-oss-2024.png"
 };
 
  <Image src={CoverImage} alt="Best Open Source Website Feedback Tools 2024" className="w-full rounded-lg" />
 
 <AuthorBox
-  name="Olasunkanmi Balogun"
-  title="Content Writer"
+  name="Johannes"
+  title="Co-Founder and CEO"
   date="January 16th, 2024"
   duration="10"
-  author={"Ola"}
+  author={"Johannes"}
 />
 
 As users navigate your website, their feedback serves as a compass, guiding you toward improvements that resonate with them. Feedback from users provides valuable insights into areas where they might be facing challenges or experiencing dissatisfaction. This information is instrumental in identifying and rectifying pain points within your website's design, navigation, or functionality.

apps/formbricks-com/pages/blog/experience-management-open-source/index.mdx

@@ -1,14 +1,14 @@
-import Image from "next/image";
-import LayoutMdx from "@/components/shared/LayoutMdx";
-import { Callout } from "@/components/shared/Callout";
 import AuthorBox from "@/components/shared/AuthorBox";
+import { Callout } from "@/components/shared/Callout";
+import LayoutMdx from "@/components/shared/LayoutMdx";
+import Image from "next/image";
+import TitleImage from "../github-accelerator-experience/formbricks-sponsored-by-github-accelerator-2023.webp";
+import EmailResult from "./email-results-PMF-cal.png";
+import MattiJojo from "./matti-jojo.jpg";
 import TweetPeer from "./peer-tweet-typeform-open-source.png";
+import PMFDashboard from "./pmf-survey-dashboard.png";
 import SnoopForms from "./snoopforms-open-source-typeform-alternative.png";
 import TwitterResult from "./twitter-results-PMF-cal.png";
-import EmailResult from "./email-results-PMF-cal.png";
-import TitleImage from "../github-accelerator-experience/formbricks-sponsored-by-github-accelerator-2023.webp";
-import PMFDashboard from "./pmf-survey-dashboard.png";
-import MattiJojo from "./matti-jojo.jpg";
 
 export const meta = {
   title: "Formbricks v1 - How we got here 🤸",
@@ -19,6 +19,7 @@ export const meta = {
   authors: ["Johannes"],
   section: "Open Source Experience Management",
   tags: ["Open Source", "Experience Management", "Formbricks"],
+    ogImage: "/blog/xm-tool.png"
 };
 
 <AuthorBox name="Johannes" title="Co-Founder" date="April 7th, 2023" duration="4" author={"Johannes"}/>

apps/formbricks-com/pages/blog/first-end-to-endcommunity-feature/index.mdx

@@ -1,6 +1,6 @@
-import Image from "next/image";
-import LayoutMdx from "@/components/shared/LayoutMdx";
 import AuthorBox from "@/components/shared/AuthorBox";
+import LayoutMdx from "@/components/shared/LayoutMdx";
+import Image from "next/image";
 import EmailGIF from "./email-embed.gif";
 import FigmaMock from "./figma-mock.webp";
 import PiyushPR from "./pr-merged.webp";
@@ -14,6 +14,7 @@ export const meta = {
   authors: ["Johannes"],
   section: "Open Source Design",
   tags: ["Open Source Surveys", "Open Source Design", "Design", "Community Design"],
+    ogImage: "/blog/piyush-pr.png"
 };
 
 <AuthorBox name="Johannes" title="Co-Founder" date="October 11th, 2023" duration="4" author={"Johannes"} />

apps/formbricks-com/pages/blog/github-accelerator-experience/index.mdx

@@ -1,11 +1,11 @@
-import Image from "next/image";
-import LayoutMdx from "@/components/shared/LayoutMdx";
-import TitleImage from "./formbricks-sponsored-by-github-accelerator-2023.webp";
-import Demo from "./our-experience-github-acc-demo-screenshot.png";
-import Mail from "./github-accelerator-selection-mail.png";
-import Teams from "./github-accelerator-2022-teams.png";
-import NewsletterSignup from "@/components/shared/NewsletterSignup";
 import AuthorBox from "@/components/shared/AuthorBox";
+import LayoutMdx from "@/components/shared/LayoutMdx";
+import NewsletterSignup from "@/components/shared/NewsletterSignup";
+import Image from "next/image";
+import TitleImage from "./formbricks-sponsored-by-github-accelerator-2023.webp";
+import Teams from "./github-accelerator-2022-teams.png";
+import Mail from "./github-accelerator-selection-mail.png";
+import Demo from "./our-experience-github-acc-demo-screenshot.png";
 
 export const meta = {
   title: "Our GitHub Accelerator Experience 👀",
@@ -16,6 +16,7 @@ export const meta = {
   authors: ["Johannes"],
   section: "GitHub Accelerator",
   tags: ["GitHub Accelerator", "Open-Source", "Startup"],
+    ogImage: "/blog/github-xp.jpg"
 };
 
 <AuthorBox name="Johannes" title="Co-Founder" date="April 7th, 2023" duration="4" author={"Johannes"} />

apps/formbricks-com/pages/blog/granular-targeting-in-app-surveys/index.mdx

@@ -18,6 +18,7 @@ export const meta = {
   authors: ["Johannes Dancker"],
   section: "In-App Surveys",
   tags: ["In app surveys", "Micro surveys", "Embedded surveys", "Targeting", "Segmentation", "Embed Surveys"],
+    ogImage: "/blog/targeting.jpg"
 };
 
 <div  className=" mb-4">
@@ -29,7 +30,7 @@ export const meta = {
 </div>
 
 <AuthorBox
-  name="Johannes Dancker"
+  name="Johannes"
   title="Co-founder and CEO"
   date="March 17th, 2024"
   duration="4"

apps/formbricks-com/pages/blog/how-smart-writers-use-formbricks-open-source-tool-to-measure-the-quality-of-their-newsletter-content/index.mdx

@@ -14,19 +14,20 @@ export const meta = {
     "Newsletters boast the highest ROI in email marketing but grasping your audience's resonance is key. Formbricks steps in to empower you with tools to measure your content quality and explore reader engagement in newsletters.",
   date: "2024-01-24",
   publishedTime: "2024-01-24T12:00:00",
-  authors: ["Olasunkanmi Balogun"],
+  authors: ["Johannes Dancker"],
   section: "Newsletter Survey",
   tags: ["Improve Newsletter Content"],
+    ogImage: "/blog/newsletter.jpg"
 };
 
 <Image src={Header} alt="Gather in-app feedback for free with these 6 tools." className="w-full rounded-lg" />
 
 <AuthorBox
-  name="Olasunkanmi Balogun"
-  title="Content Writer"
+  name="Johannes"
+  title="Co-Founder and CEO"
   date="January 24th, 2024"
   duration="5"
-  author={"Ola"}
+  author={"Johannes"}
 />
 
 _Newsletters are a form of email marketing which has the highest ROI of all marketing channels. According to the research (source below), for every dollar spent you can get a return of $36 to $40._

apps/formbricks-com/pages/blog/inaugural-batch-github-accelerator/index.mdx

@@ -14,6 +14,7 @@ export const meta = {
   authors: ["Johannes"],
   section: "GitHub Accelerator",
   tags: ["GitHub Accelerator", "Open-Source"],
+    ogImage: "/blog/github-xp.jpg"
 };
 
 <AuthorBox name="Johannes" title="Co-Founder" date="April 7th, 2023" duration="4" author={"Johannes"} />

apps/formbricks-com/pages/blog/join-the-formtribe/index.mdx

@@ -15,6 +15,7 @@ export const meta = {
   authors: ["Johannes"],
   section: "Open-Source",
   tags: ["Open-Source", "No-Code", "Formbricks", "Geting started", "Welcome guide"],
+    ogImage: "/blog/community.jpg"
 };
 
 <AuthorBox name="Johannes" title="Co-Founder" date="October 1st, 2023" duration="4" author={"Johannes"} />

apps/formbricks-com/pages/blog/open-source-forms-will-save-the-world/index.mdx

@@ -1,10 +1,10 @@
-import Image from "next/image";
+import AuthorBox from "@/components/shared/AuthorBox";
 import LayoutMdx from "@/components/shared/LayoutMdx";
+import Image from "next/image";
+import ResponsiveEmbed from "react-responsive-embed";
+import EverythinEverywhereAllAtOnce from "./everything_everywhere_all_at_once.png";
 import RobinHoodMeme from "./robin-hood-meme.png";
 import WhyWeDoIt from "./why-we-do-it.png";
-import EverythinEverywhereAllAtOnce from "./everything_everywhere_all_at_once.png";
-import ResponsiveEmbed from "react-responsive-embed";
-import AuthorBox from "@/components/shared/AuthorBox";
 
 
 export const meta = {
@@ -15,6 +15,7 @@ export const meta = {
   authors: ["Johannes"],
   section: "Open Source Survey Tool",
   tags: ["Open Source", "Survey Tool", "Forms"],
+    ogImage: "/blog/robin-hood-meme.png"
 };
 
 <AuthorBox name="Johannes" title="Co-Founder" date="April 7th, 2023" duration="4" author={"Johannes"} />

apps/formbricks-com/pages/blog/open-source-qualtrics-beats-typeform/index.mdx

@@ -1,14 +1,14 @@
-import Image from "next/image";
+import AuthorBox from "@/components/shared/AuthorBox";
+import { Callout } from "@/components/shared/Callout";
 import LayoutMdx from "@/components/shared/LayoutMdx";
-import Tellform from "./tellform.png";
-import Tripetto from "./tripetto.png";
+import Image from "next/image";
+import FormbricksSneak from "./formbricks-sneak.png";
 import Ohmyform from "./ohmyform.png";
 import Snoopforms from "./snoopforms-how-it-began.png";
-import FormbricksSneak from "./formbricks-sneak.png";
-import Wrestling from "./wrestling.jpg";
+import Tellform from "./tellform.png";
+import Tripetto from "./tripetto.png";
 import TypeformValue from "./typeform-value-prop.png";
-import { Callout } from "@/components/shared/Callout";
-import AuthorBox from "@/components/shared/AuthorBox";
+import Wrestling from "./wrestling.jpg";
 
 
 export const meta = {
@@ -20,6 +20,7 @@ export const meta = {
   authors: ["Johannes"],
   section: "Open Source Experience Management",
   tags: ["Open Source", "Experience Management", "Typeform", "Qualtrics"],
+    ogImage: "/blog/best-oss-2024.png"
 };
 
 <AuthorBox name="Johannes" title="Co-Founder" date="April 7th, 2023" duration="4" author={"Johannes"} />

apps/formbricks-com/pages/blog/remove-branding-for-free/index.mdx

@@ -12,12 +12,13 @@ export const meta = {
   authors: ["Johannes Dancker"],
   section: "Feedback Apps",
   tags: ["Open Source Community", "Formbricks", "Typeform", "Branding Removal"],
+    ogImage: "/blog/social-image.png"
 };
 
 <Image src={Header} alt="Remove branding from all survey types of self-hosted" className="w-full rounded-lg" />
 
 <AuthorBox
-  name="Johannes Dancker"
+  name="Johannes"
   title="Co-Founder"
   date="March 21st, 2024"
   duration="3"

apps/formbricks-com/pages/blog/snoopforms-becomes-formbricks/index.mdx

@@ -1,8 +1,8 @@
-import Image from "next/image";
-import LayoutMdx from "@/components/shared/LayoutMdx";
-import HeaderImage from "./formbricks-logo-header-open-source-form-infrastructure.svg";
-import HeroAnimation from "../../../components/shared/HeroAnimation.tsx";
 import AuthorBox from "@/components/shared/AuthorBox";
+import LayoutMdx from "@/components/shared/LayoutMdx";
+import Image from "next/image";
+import HeroAnimation from "../../../components/shared/HeroAnimation.tsx";
+import HeaderImage from "./formbricks-logo-header-open-source-form-infrastructure.svg";
 
 
 export const meta = {
@@ -13,6 +13,7 @@ export const meta = {
   authors: ["Johannes"],
   section: "Formbricks",
   tags: ["Formbricks", "snoopForms", "Open Source"],
+    ogImage: "/blog/xm-tool.png"
 };
 
 <AuthorBox name="Johannes" title="Co-Founder" date="April 7th, 2023" duration="4" author={"Johannes"} />

apps/formbricks-com/pages/blog/terraform-ecs-aws-self-hosting/index.mdx

@@ -14,6 +14,7 @@ export const meta = {
   authors: ["Sudhanshu Pandey"],
   section: "AWS ECS",
   tags: ["AWS ECS", "Terraform", "Self-hosting XM"],
+  ogImage: "/blog/aws-ecs.png"
 };
 
 <Image
@@ -23,8 +24,8 @@ export const meta = {
 />
 
 <AuthorBox
-  name="Sudhanshu Pandey"
-  title="Clound Engineer"
+  name="Sudhanshu"
+  title="Cloud Engineer"
   date="March 26th, 2024"
   duration="6"
   author={"Sudhanshu"}

apps/formbricks-com/pages/blog/the-perfect-waitlist-survey/index.mdx

@@ -15,19 +15,20 @@ export const meta = {
     "Using a waitlist for product validation is tough. Use this waitlist best practice to gain clarity with actionable tips on questions to ask and insights utilization in this article.",
   date: "2024-01-23",
   publishedTime: "2022-01-23T11:52:00",
-  authors: ["Olasunkanmi Balogun"],
+  authors: ["Johannes Dancker"],
   section: "Waitlist Survey",
   tags: ["Waitlist survey", "Waitlist Best Practice", "Waitlist Survey Questions"],
+    ogImage: "/blog/waitlist.jpg"
 };
 
 <Image src={Header} alt="Waitlist Survey Questions asked right: Waitlist Best Practice" className="rounded-lg w-full" />
 
 <AuthorBox
-  name="Olasunkanmi Balogun"
-  title="Content Writer"
+  name="Johannes"
+  title="Co-Founder and CEO"
   date="January 23rd, 2024"
   duration="8"
-  author={"Ola"}
+  author={"Johannes"}
 />
 
 *Setting up a waitlist is easy; there are hundreds of tools for it. Using a waitlist as **a tool to validate your initial product and market hypothesis** is a lot harder: What do you ask? How much is too much? And what do you do with the insights?*

apps/formbricks-com/pages/blog/understanding-formbricks-self-hosting/index.mdx

@@ -20,12 +20,13 @@ export const meta = {
   authors: ["Shubham Palriwala"],
   section: "Infrastructure",
   tags: ["Infrastructure", "Docker", "Docker Compose", "Bash Script", "Self-Hosting"],
+    ogImage: "/blog/self-hosting.jpg"
 };
 
 <Image src={Header} alt="How to effectively self host Formbricks" className="w-full rounded-lg" />
 
 <AuthorBox
-  name="Shubham Palriwala"
+  name="Shubham"
   title="Open Source Engineer"
   date="January 23rd, 2024"
   duration="20"

apps/formbricks-com/pages/blog/why-open-source-no-code-is-the-future-of-enterprise-gov-software/index.mdx

@@ -15,6 +15,7 @@ export const meta = {
   authors: ["Johannes"],
   section: "Open-Source",
   tags: ["Open-Source", "No-Code", "Enterprise", "Government"],
+    ogImage: "/blog/title-image.png"
 };
 
 <AuthorBox name="Johannes" title="Co-Founder" date="April 7th, 2023" duration="4" author={"Johannes"}/>

apps/formbricks-com/pages/community/index.tsx

@@ -472,7 +472,7 @@ const members = [
     imgUrl: "https://avatars.githubusercontent.com/u/17407010?v=4",
   },
   {
-    name: "Olasunkanmi Balogun",
+    name: "Johannes Dancker",
     githubId: "SiR-PENt",
     points: "100",
     level: "rookie",

apps/formbricks-com/pages/in-app-survey/index.tsx

@@ -227,7 +227,7 @@ export default function LinkSurveyPage() {
           author="Bailey Pumfleet, Co-CEO @ Cal.com"
           imgSrc={Bailey}
           imgAlt="Cal.com co-founder Bailey Pumfleet speaks about how Formbricks in-app surveys feel like a native part of the UI of their product."
-          textSize="large"
+          textSize="base"
         />
       </div>
       <SalesPageFeature

apps/formbricks-com/pages/index.tsx

@@ -1,9 +1,10 @@
 import Faq from "@/components/home/Faq";
-import Features from "@/components/home/Features";
+import OpenSourceBenefits from "@/components/home/Features";
 import Hero from "@/components/home/Hero";
 import Highlights from "@/components/home/Highlights";
 import ScrollToTopButton from "@/components/home/ScrollToTop";
 import Steps from "@/components/home/Steps";
+import SurveyTypeSelection from "@/components/home/SurveyTypeSelection";
 import BestPractices from "@/components/shared/BestPractices";
 import BreakerCTA from "@/components/shared/BreakerCTA";
 import Layout from "@/components/shared/Layout";
@@ -17,18 +18,20 @@ const IndexPage = () => (
     description="Build qualitative user research into your product. Leverage Best practices to increase Product-Market Fit.">
     <Hero />
     <HeroAnimation fallbackImage={AnimationFallback} />
-    <Features />
-    <Highlights />
-    <ScrollToTopButton />
+    <SurveyTypeSelection />
+    <OpenSourceBenefits />
     <div className="hidden lg:block">
       <BreakerCTA
         teaser="READY?"
-        headline="Get started in minutes."
+        headline="Set Formbricks up in minutes."
         subheadline="Dive right in, no credit card required."
         cta="Get started"
         href="https://app.formbricks.com/auth/signup"
       />
     </div>
+    <BestPractices />
+    <Highlights />
+    <ScrollToTopButton />
     <Steps />
     <BreakerCTA
       teaser="Curious?"
@@ -39,7 +42,6 @@ const IndexPage = () => (
       inverted
     />
     <Faq />
-    <BestPractices />
   </Layout>
 );