perf(hero): split HeroVideo into a Server Component to bypass React Hydration LCP block

app/[locale]/team/opengraph-image.tsx

@@ -0,0 +1,25 @@
+import { ImageResponse } from 'next/og';
+import { getTranslations } from 'next-intl/server';
+import { OGImageTemplate } from '@/components/OGImageTemplate';
+import { getOgFonts, OG_IMAGE_SIZE } from '@/lib/og-helper';
+
+export const size = OG_IMAGE_SIZE;
+export const contentType = 'image/png';
+export const runtime = 'nodejs';
+
+export default async function Image({ params }: { params: Promise<{ locale: string }> }) {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: 'Team' });
+  const fonts = await getOgFonts();
+
+  const title = t('meta.title') || t('hero.subtitle');
+  const description = t('meta.description') || t('hero.title');
+
+  return new ImageResponse(
+    <OGImageTemplate title={title} description={description} label="Our Team" />,
+    {
+      ...OG_IMAGE_SIZE,
+      fonts,
+    },
+  );
+}