Add social card preview (#780)

* Update: Add social card preview

* Update the Documentation social description

* Add social card into Astar Collective page

Author: Juminstock

docs/learn/astar.md

@@ -1,13 +1,19 @@
 ---
 sidebar_position: 1
+description: Learn what is the Astar Collective.
+image: /img/astar-preview.png
 ---
 
+import Figure from '/src/components/figure'
+
 # About Astar Network
 
 [Astar Network]: https://astar.network/
 
 ## I. A Web3 Collective
 
+<Figure caption="Astar Collective Social Card" src={require('/img/astar-preview.png').default} width="100%" />
+
 Astar is a web3 collective focused on building products that bring users onchain while creating sustainable value for ASTR holders. Rather than operating as a traditional single-chain ecosystem, Astar coordinates multiple products and contributors across different blockchain networks through a unified economic and governance structure.
 
 At the foundation of this collective sits Astar Network, which serves as the anchor point for governance decisions, security mechanisms, and economic coordination across the entire ecosystem. The network ensures that all activities, whether occurring on Ethereum, Base, or other integrated chains, remain connected to a common framework that benefits the broader Astar community.

docusaurus.config.ts

@@ -6,7 +6,7 @@ import rehypeKatex from 'rehype-katex';
 
 const config: Config = {
   title: 'Welcome to Astar',
-  tagline: 'Here you will find documentation on how to develop dApps on Astar.',
+  tagline: 'Here you can find documentation about the Astar Collective and its ecosystem.',
   favicon: 'img/fav.png',
 
   future: {
@@ -42,6 +42,13 @@ const config: Config = {
         content: 'strict-origin-when-cross-origin',
       },
     },
+    {
+      tagName: 'meta',
+      attributes: {
+        name: 'twitter:card',
+        content: 'summary_large_image',
+      },
+    },
   ],
 
   stylesheets: [
@@ -81,7 +88,7 @@ const config: Config = {
   ],
 
   themeConfig: {
-    image: 'img/astar-logo-text.svg',
+    image: 'img/astar-preview.png',
     navbar: {
       logo: {
         alt: 'Astar',

src/pages/index.tsx

@@ -11,7 +11,7 @@ export default function Home(): JSX.Element {
   return (
     <Layout
       title={`${siteConfig.title}`}
-      description="Astar Network Official Documentation Portal - User Guides, Tutorials, and Tools for Developers."
+      description="Astar Collective Official Documentation with user guides, tutorials, technical information, and tools for developers."
     >
       <div className={styles.contentWrapper}>
         <Hero />