chore: cleanup

app.vue

@@ -29,6 +29,7 @@ useSeoMeta({
   titleTemplate: `%s - ${seo?.siteName}`,
   ogSiteName: seo?.siteName,
   ogUrl: 'https://docs.zksync.io/',
+  ogImage: '/social-card.png',
   ogImageAlt: 'zkSync — Accelerating the mass adoption of crypto for personal sovereignty.',
   ogDescription:
     'zkSync Docs bring you all information you need about our protocol, APIs, SDKs, ZK Stack, and hyperchains. Start with our guides and tutorials, or go deep into our architecture and protocol specification.',
@@ -39,7 +40,7 @@ useSeoMeta({
   twitterImageAlt: 'zkSync — Accelerating the mass adoption of crypto for personal sovereignty.',
 });
 
-defineOgImage({ component: 'OgImageDocs' });
+defineOgImage({ component: 'OgImageCommunityCode' });
 
 provide('navigation', navigation);
 </script>

components/OgImage/OgImageCommunityCode.vue

@@ -0,0 +1,29 @@
+<script lang="ts" setup>
+defineOptions({
+  inheritAttrs: false,
+});
+
+defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+  description: {
+    type: String,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <div class="flex h-full w-full flex-col justify-center bg-slate-900 p-8 text-center">
+    <div class="relative">
+      <h1 class="mb-4 text-8xl text-white">
+        {{ title }}
+      </h1>
+      <p class="text-5xl leading-tight text-gray-200">
+        {{ description }}
+      </p>
+    </div>
+  </div>
+</template>