feat(gurubu-client): open graph image generator added

gurubu-client/src/app/layout.tsx

@@ -1,4 +1,3 @@
-import type { Metadata } from "next";
 import { Inter, Space_Grotesk } from "next/font/google";
 import classNames from "classnames";
 import "@/styles/globals.scss";
@@ -9,11 +8,6 @@ const spaceGrotesk = Space_Grotesk({
   variable: "--font-space-grotesk",
 });
 
-export const metadata: Metadata = {
-  title: "Gurubu | Simple, fast and practical grooming",
-  description: "Simple, fast and practical grooming.",
-};
-
 export default function RootLayout({
   children,
 }: {

gurubu-client/src/app/opengraph-image.tsx

@@ -0,0 +1,42 @@
+import { ImageResponse } from "next/og";
+import { CSSProperties } from "react";
+
+export const contentType = "image/png";
+
+const imageStyle: CSSProperties = {
+  backgroundColor: "#ffffff",
+  backgroundSize: "150px 150px",
+  height: "100%",
+  width: "100%",
+  display: "flex",
+  textAlign: "center",
+  alignItems: "center",
+  justifyContent: "center",
+  flexDirection: "column",
+  flexWrap: "nowrap",
+  fontSize: "48px",
+};
+
+export const size = {
+  width: 1200,
+  height: 630,
+};
+
+export default async function Image() {
+  return new ImageResponse(
+    (
+      <div style={imageStyle}>
+        <img
+          width={372}
+          height={90}
+          src={"https://gurubu.vercel.app/gurubu-logo.svg"}
+          alt="GuruBu logo"
+        />
+        Simple, fast and practical grooming.
+      </div>
+    ),
+    {
+      ...size,
+    }
+  );
+}