feat: change logo and og

app/components/LotusLogo.jsx

@@ -1,42 +1,16 @@
-// Brand mark for آرام جان — a layered translucent lotus on a blue→indigo
-// gradient, matching the app icon. Self-contained SVG so it stays crisp at any
-// size and needs no image asset. Size it with `className` (e.g. "w-9 h-9").
+// Brand mark for آرام جان — the real app icon (blue→indigo lotus) served as a
+// vector from /logo.svg, so it stays crisp at any size and matches the store
+// icon exactly. Size it with `className` (e.g. "w-9 h-9"); corners are rounded
+// like an app icon.
 function LotusLogo({ className = "w-9 h-9", title = "آرام جان" }) {
-  const petal = "M50 72 C42 56 42 34 50 22 C58 34 58 56 50 72 Z";
-  const angles = [-50, -25, 0, 25, 50];
-
-  const opacityFor = (a) => {
-    if (a === 0) return 0.95;
-    if (Math.abs(a) === 25) return 0.72;
-    return 0.5;
-  };
-
   return (
-    <svg
-      viewBox="0 0 100 100"
-      className={className}
-      xmlns="http://www.w3.org/2000/svg"
-      role="img"
-      aria-label={title}
-    >
-      <defs>
-        <linearGradient id="aramjan-lotus-bg" x1="0" y1="0" x2="0" y2="1">
-          <stop offset="0%" stopColor="#5fa0ff" />
-          <stop offset="100%" stopColor="#6a4ff0" />
-        </linearGradient>
-      </defs>
-      <rect width="100" height="100" rx="26" fill="url(#aramjan-lotus-bg)" />
-      <g fill="#ffffff">
-        {angles.map((a) => (
-          <path
-            key={a}
-            d={petal}
-            transform={`rotate(${a} 50 72)`}
-            fillOpacity={opacityFor(a)}
-          />
-        ))}
-      </g>
-    </svg>
+    <span className={`inline-block overflow-hidden rounded-[22%] ${className}`}>
+      <img
+        src="/logo.svg"
+        alt={title}
+        className="w-full h-full object-cover"
+      />
+    </span>
   );
 }