feat: logo

2026-06-21 19:04:29 +03:30
parent 3c6a9c79df
commit fc30597835
15 changed files with 237 additions and 53 deletions
@@ -0,0 +1,43 @@
+// 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").
+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>
+  );
+}
+
+export default LotusLogo;