refactor: website facelift (#10823)

apps/website/src/app/opengraph-image.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable react/no-unknown-property */
+
 import { ImageResponse } from 'next/og';
 
 export const runtime = 'edge';
@@ -11,15 +12,19 @@ export const size = {
 export const contentType = 'image/png';
 
 export default async function Image() {
+	const fontData = await fetch(new URL('../assets/Geist-Black.ttf', import.meta.url), {
+		next: { revalidate: 604_800 },
+	}).then(async (res) => res.arrayBuffer());
+
 	return new ImageResponse(
 		(
-			<div tw="flex bg-[#121212] h-full w-full">
+			<div tw="flex bg-[#121214] h-full w-full">
 				<div tw="mx-auto flex items-center h-full">
 					<div tw="flex">
 						<div tw="flex">
-							<div tw="flex flex-col font-black text-[5.5rem] text-white">
+							<div tw="flex flex-col font-black text-8xl text-white leading-tight">
 								<div tw="flex flex-row">
-									The <span tw="bg-[#5865f2] rounded-lg py-1 px-6 ml-4">most popular</span>
+									The <span tw="bg-[#5865f2] rounded-md px-3 py-2 ml-4 bottom-2">most popular</span>
 								</div>
 								<span>way to build Discord</span>
 								<span>bots.</span>
@@ -31,6 +36,14 @@ export default async function Image() {
 		),
 		{
 			...size,
+			fonts: [
+				{
+					name: 'Geist',
+					data: fontData,
+					weight: 900,
+					style: 'normal',
+				},
+			],
 		},
 	);
 }