add author box

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

@@ -0,0 +1,36 @@
+import Image from "next/image";
+import AuthorJohannes from "@/images/blog/johannes-co-founder-formbricks-small.jpg";
+
+interface AuthorBoxProps {
+  name: string;
+  title: string;
+  date: string;
+  duration: string;
+}
+
+export default function AuthorBox({ name, title, date, duration }: AuthorBoxProps) {
+  return (
+    <div className="mb-8 flex items-center space-x-4 rounded-lg border border-slate-200 bg-slate-100 px-6 py-3 dark:border-slate-700 dark:bg-slate-800">
+      <Image
+        className="m-0 rounded-full"
+        src={AuthorJohannes}
+        alt={name}
+        width={45}
+        height={45}
+        quality={100}
+        placeholder="blur"
+        style={{ objectFit: "contain" }}
+      />
+      <div className="flex w-full items-end justify-between">
+        <div>
+          <p className="m-0 font-medium text-slate-600 dark:text-slate-300">{name}</p>
+          <p className="m-0 text-sm text-slate-400">{title}</p>
+        </div>
+        <div className="text-right">
+          <p className="m-0 font-medium text-slate-600 dark:text-slate-300">{duration} Minutes</p>
+          <p className="m-0 text-sm text-slate-400">{date}</p>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -1,5 +1,4 @@
 import clsx from "clsx";
-
 import { Icon } from "@/components/shared/Icon";
 
 const styles = {

apps/formbricks-com/pages/blog/v1-and-how-we-got-here/index.mdx

@@ -1,6 +1,8 @@
 import Image from "next/image";
 import LayoutMdx from "@/components/shared/LayoutMdx";
 import { Callout } from "@/components/shared/Callout";
+import AuthorBox from "@/components/shared/AuthorBox";
+import AuthorJohannes from "@/images/blog/johannes-co-founder-formbricks-small.jpg";
 
 import TweetPeer from "./peer-tweet-typeform-open-source.png";
 import SnoopForms from "./snoopforms-open-source-typeform-alternative.png";
@@ -17,6 +19,8 @@ export const meta = {
   date: "2023-07-14",
 };
 
+<AuthorBox name="Johannes" title="Co-Founder" date="April 7th, 2023" duration="4" />
+
 _A lot has happened since Matti and I had a chat about open-source surveys in May last year. The release of Formbricks v1.0 is a perfect opportunity to look back on how it all started._
 
 Funnily enough, it started with a tweet: