feat: add MkSaaS logo component and update blog image references

content/blog/what-is-mksaas.mdx

@@ -64,7 +64,7 @@ Something a wise person once told me about typography is:
 It's probably important that images look okay here by default as well:
 
 <Image
-  src="/images/blog/mkdirs-opengraph.png"
+  src="/images/blog/mksaas-og.png"
   width="718"
   height="404"
   alt="Image"

src/components/logo-mksaas.tsx

@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils";
+import Image from "next/image";
+
+export function MkSaaSLogo({ className }: { className?: string }) {
+  return (
+    <Image
+      src="/mksaas.png"
+      alt="Logo of MkSaaS"
+      title="Logo of MkSaaS"
+      width={96}
+      height={96}
+      className={cn("size-8 rounded-md", className)}
+    />
+  );
+}

src/components/shared/built-with-button.tsx

@@ -1,7 +1,7 @@
+import { buttonVariants } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import Link from "next/link";
-import { Logo } from "@/components/logo";
+import { MkSaaSLogo } from "@/components/logo-mksaas";
-import { buttonVariants } from "@/components/ui/button";
 
 export default function BuiltWithButton() {
   return (
@@ -15,7 +15,7 @@ export default function BuiltWithButton() {
     >
       <span>Built with</span>
       <span>
-        <Logo className="size-5 rounded-full" />
+        <MkSaaSLogo className="size-5 rounded-full" />
       </span>
       <span className="font-semibold">MkSaaS</span>
     </Link>