Add SVG for Open Graph image featuring brand and service details

assets/home/styles.css

@@ -3,10 +3,10 @@
    Light & airy · indigo headings · coral + blue pills · flat illustrations
    =========================================================== */
 
-@font-face { font-family:'Vazirmatn'; src:url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
+@font-face { font-family:'Vazirmatn'; src:url('/fonts/Vazirmatn-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
-@font-face { font-family:'Vazirmatn'; src:url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Medium.woff2') format('woff2'); font-weight:500; font-display:swap; }
+@font-face { font-family:'Vazirmatn'; src:url('/fonts/Vazirmatn-Medium.woff2') format('woff2'); font-weight:500; font-display:swap; }
-@font-face { font-family:'Vazirmatn'; src:url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-SemiBold.woff2') format('woff2'); font-weight:600; font-display:swap; }
+@font-face { font-family:'Vazirmatn'; src:url('/fonts/Vazirmatn-SemiBold.woff2') format('woff2'); font-weight:600; font-display:swap; }
-@font-face { font-family:'Vazirmatn'; src:url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Bold.woff2') format('woff2'); font-weight:700; font-display:swap; }
+@font-face { font-family:'Vazirmatn'; src:url('/fonts/Vazirmatn-Bold.woff2') format('woff2'); font-weight:700; font-display:swap; }
 
 :root {
   --ink:        oklch(0.37 0.095 285);   /* deep indigo headings */

graphify-out/manifest.json

@@ -1835,8 +1835,8 @@
     "semantic_hash": ""
   },
   "webpack.config.js": {
-    "mtime": 1781248985.2552576,
+    "mtime": 1782673407.0593028,
-    "ast_hash": "515aab0d011bb713c4d968fe8a85cdaa",
+    "ast_hash": "71e12f71509122e00c4029e1d2f34685",
     "semantic_hash": ""
   },
   ".claude/prompt/admin-pwa.md": {
@@ -3278,5 +3278,15 @@
     "mtime": 1782672834.274309,
     "ast_hash": "7b148f2bee655e2b1e70adf6476b5598",
     "semantic_hash": ""
+  },
+  "public/og-image.png": {
+    "mtime": 1782673183.848443,
+    "ast_hash": "a4ae2b446e543c75e984f180d8cd0aec",
+    "semantic_hash": ""
+  },
+  "public/og-image.svg": {
+    "mtime": 1782673172.9846177,
+    "ast_hash": "ad555ec6db4ea096da240087e1e0b025",
+    "semantic_hash": ""
   }
 }

public/og-image.svg

@@ -0,0 +1,37 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="630" viewBox="0 0 1200 630">
+  <rect width="1200" height="630" fill="#eef2fd"/>
+  <circle cx="1080" cy="270" r="300" fill="#dbe4fb"/>
+
+  <!-- brand wordmark -->
+  <g transform="translate(96,140)">
+    <circle cx="0" cy="-16" r="14" fill="#f17a6b"/>
+    <text x="32" y="0" font-family="Arial, Helvetica, sans-serif" font-size="72" font-weight="700" fill="#312f6e">ClinicPro</text>
+  </g>
+
+  <text x="96" y="280" font-family="Arial, Helvetica, sans-serif" font-size="54" font-weight="700" fill="#3a3a7d">Clinic &amp; Appointment</text>
+  <text x="96" y="344" font-family="Arial, Helvetica, sans-serif" font-size="54" font-weight="700" fill="#3a3a7d">Management</text>
+  <text x="96" y="402" font-family="Arial, Helvetica, sans-serif" font-size="26" fill="#5a5f8a">Online booking · Patient records · Billing</text>
+
+  <!-- pills -->
+  <g font-family="Arial, Helvetica, sans-serif" font-weight="700" font-size="26">
+    <rect x="96" y="452" width="236" height="62" rx="31" fill="#5666e0"/>
+    <text x="214" y="492" fill="#ffffff" text-anchor="middle">Get started free</text>
+    <rect x="352" y="452" width="186" height="62" rx="31" fill="#ffffff" stroke="#5666e0" stroke-width="2"/>
+    <text x="445" y="492" fill="#5666e0" text-anchor="middle">Request demo</text>
+  </g>
+
+  <!-- monitor motif -->
+  <g transform="translate(800,168)">
+    <rect x="0" y="0" width="320" height="220" rx="18" fill="#ffffff" stroke="#dde3f7" stroke-width="4"/>
+    <rect x="20" y="20" width="280" height="180" rx="10" fill="#f5f7fe"/>
+    <path d="M20 28a8 8 0 0 1 8-8h264a8 8 0 0 1 8 8v20H20z" fill="#5666e0"/>
+    <circle cx="40" cy="34" r="6" fill="#aebcff"/>
+    <rect x="56" y="29" width="60" height="10" rx="5" fill="#aebcff"/>
+    <path d="M40 144 l44 -42 32 32 50 -58 46 52 h50" fill="none" stroke="#5666e0" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
+    <circle cx="40" cy="144" r="7" fill="#f17a6b"/>
+    <rect x="40" y="166" width="120" height="14" rx="7" fill="#cdd6f4"/>
+    <rect x="40" y="184" width="80" height="14" rx="7" fill="#e1e7f7"/>
+  </g>
+
+  <text x="800" y="430" font-family="Arial, Helvetica, sans-serif" font-size="22" fill="#7a7fa3">clinic-pro.ir</text>
+</svg>

templates/public/home.html.twig

@@ -14,13 +14,13 @@
 		<meta property="og:title" content="کلینیک پرو — نرم‌افزار مدیریت مطب و نوبت‌دهی آنلاین"/>
 		<meta property="og:description" content="نوبت‌دهی آنلاین، پرونده‌ی بیمار و حساب مطب در یک پنل ساده و سریع."/>
 		<meta property="og:url" content="{{ base }}/"/>
-		<meta property="og:image" content="{{ base }}/icons/icon-512.png"/>
+		<meta property="og:image" content="{{ base }}/og-image.png"/>
 		<meta property="og:locale" content="fa_IR"/>
 
 		<meta name="twitter:card" content="summary_large_image"/>
 		<meta name="twitter:title" content="کلینیک پرو — نرم‌افزار مدیریت مطب و نوبت‌دهی آنلاین"/>
 		<meta name="twitter:description" content="نوبت‌دهی آنلاین، پرونده‌ی بیمار و حساب مطب در یک پنل ساده و سریع."/>
-		<meta name="twitter:image" content="{{ base }}/icons/icon-512.png"/>
+		<meta name="twitter:image" content="{{ base }}/og-image.png"/>
 
 		<script type="application/ld+json">
 		{
@@ -57,8 +57,8 @@
 			]
 		}
 		</script>
-		<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin/>
+		<link rel="preload" href="/fonts/Vazirmatn-Regular.woff2" as="font" type="font/woff2" crossorigin/>
-		<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap"/>
+		<link rel="preload" href="/fonts/Vazirmatn-Bold.woff2" as="font" type="font/woff2" crossorigin/>
 		{{ encore_entry_link_tags('home') }}
 		<script>
 			document.documentElement.classList.add('js');

webpack.config.js

@@ -23,6 +23,10 @@ Encore
     .enableTypeScriptLoader()
     .enablePostCssLoader()
 
+    .configureCssLoader((options) => {
+        options.url = { filter: (url) => !url.startsWith('/') };
+    })
+
     .enableStimulusBridge('./assets/controllers.json')
 
     .configureBabelPresetEnv((config) => {