replace og image endpoint with static & manually optimized image

app/opengraph-image.tsx

@@ -1,77 +0,0 @@
-import { title, description, font } from '@/constants'
-import { ImageResponse } from 'next/og'
-
-export const runtime = 'edge'
-
-export const alt = title
-export const size = { width: 1200, height: 630 }
-export const contentType = 'image/png'
-
-export default async function Image() {
-  const fontDataBold = await fetch(
-    new URL('./opengraph-image-assets/HankenGrotesk-Bold.ttf', import.meta.url)
-  ).then((res) => res.arrayBuffer())
-  const fontDataRegular = await fetch(
-    new URL(
-      './opengraph-image-assets/HankenGrotesk-Regular.ttf',
-      import.meta.url
-    )
-  ).then((res) => res.arrayBuffer())
-
-  return new ImageResponse(
-    (
-      <div
-        style={{
-          backgroundImage:
-            'radial-gradient(circle at 30% 0%, rgb(27, 40, 62) 0%, rgb(15, 18, 33) 30%, rgb(0, 0, 0) 100%)',
-          color: 'rgb(200, 200, 200)',
-          width: '100%',
-          height: '100%',
-          display: 'flex',
-          justifyContent: 'center',
-          flexDirection: 'column',
-          textAlign: 'left',
-          padding: '0 100px'
-        }}
-      >
-        <h1 style={{ fontSize: 90, marginBottom: '0', color: 'white' }}>
-          {title}
-        </h1>
-        <p style={{ fontSize: 43, marginTop: '0' }}>{description}</p>
-        <p style={{ fontSize: 30, display: 'flex', alignItems: 'center' }}>
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="1em"
-            height="1em"
-            viewBox="0 0 512 512"
-            style={{ marginRight: '0.25em', borderRadius: '50%' }}
-          >
-            <rect fill="#e7eef4" width="512" height="512" />
-            <path
-              fill="#6b7f88"
-              d="M397,91 L421,115 L114,421 L91,398 L397,91 Z M397,182 L421,206 L205,421 L182,398 L397,182 Z M307,91 L330,115 L114,330 L91,307 L307,91 Z"
-            />
-          </svg>
-          <span style={{ opacity: 0.7 }}>krema.eth</span>
-        </p>
-      </div>
-    ),
-    {
-      ...size,
-      fonts: [
-        {
-          name: 'Hanken Grotesk',
-          data: fontDataBold,
-          style: 'normal',
-          weight: 700
-        },
-        {
-          name: 'Hanken Grotesk',
-          data: fontDataRegular,
-          style: 'normal',
-          weight: 400
-        }
-      ]
-    }
-  )
-}