feat(hero): نشان پروژهٔ فعال وسط‌چین، بزرگ‌تر و متناسب با کادر (کامپوننت اختصاصی با فاصلهٔ یکنواخت آیکون/متن)

2026-10-09 15:46:01 +00:00
parent e2f6853c2c
commit e5fc0e1705
2 changed files with 31 additions and 20 deletions
@@ -0,0 +1,26 @@
+import { Building2Icon } from 'lucide-react'
+
+/**
+ * نشان «پروژه فعال» هیرو — آیکون و متن کنار هم، با فاصلهٔ یکنواخت و
+ * چیدمان وسط‌چین. فلکس‌باکس ستون را از بین می‌برد تا فاصلهٔ آیکون و متن
+ * یکدست بماند و آیکون درست با متن هم‌تراز شود.
+ */
+export function HeroProjectBadge({ value, label }: { value: string; label: string }) {
+  return (
+    <div className="flex items-center gap-3.5 text-center">
+      {/* آیکون در کادر مربعی با نشان زندهٔ مسی */}
+      <span className="relative flex h-14 w-14 shrink-0 items-center justify-center rounded-xl border border-copper/40 bg-copper/10">
+        <Building2Icon className="h-6 w-6 text-copper" aria-hidden="true" />
+        <span className="absolute -end-1 -top-1 flex h-3 w-3" aria-hidden="true">
+          <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-copper opacity-60" />
+          <span className="relative inline-flex h-3 w-3 rounded-full border border-ink bg-copper" />
+        </span>
+      </span>
+
+      <div className="flex flex-col items-center">
+        {value && <p className="font-mono text-[2.5rem] font-bold leading-none tracking-tight text-copper">{value}</p>}
+        <p className={`text-center text-[15px] font-light leading-7 text-ivory/85 ${value ? 'mt-2' : ''}`}>{label}</p>
+      </div>
+    </div>
+  )
+}