From e5fc0e1705d759deba07055e9531251d37bbedd0 Mon Sep 17 00:00:00 2001
From: aramesh-site deploy <deploy@aramesh-site.local>
Date: Fri, 9 Oct 2026 15:46:01 +0000
Subject: [PATCH] =?UTF-8?q?feat(hero):=20=D9=86=D8=B4=D8=A7=D9=86=20=D9=BE?=
 =?UTF-8?q?=D8=B1=D9=88=DA=98=D9=87=D9=94=20=D9=81=D8=B9=D8=A7=D9=84=20?=
 =?UTF-8?q?=D9=88=D8=B3=D8=B7=E2=80=8C=DA=86=DB=8C=D9=86=D8=8C=20=D8=A8?=
 =?UTF-8?q?=D8=B2=D8=B1=DA=AF=E2=80=8C=D8=AA=D8=B1=20=D9=88=20=D9=85=D8=AA?=
 =?UTF-8?q?=D9=86=D8=A7=D8=B3=D8=A8=20=D8=A8=D8=A7=20=DA=A9=D8=A7=D8=AF?=
 =?UTF-8?q?=D8=B1=20(=DA=A9=D8=A7=D9=85=D9=BE=D9=88=D9=86=D9=86=D8=AA=20?=
 =?UTF-8?q?=D8=A7=D8=AE=D8=AA=D8=B5=D8=A7=D8=B5=DB=8C=20=D8=A8=D8=A7=20?=
 =?UTF-8?q?=D9=81=D8=A7=D8=B5=D9=84=D9=87=D9=94=20=DB=8C=DA=A9=D9=86=D9=88?=
 =?UTF-8?q?=D8=A7=D8=AE=D8=AA=20=D8=A2=DB=8C=DA=A9=D9=88=D9=86/=D9=85?=
 =?UTF-8?q?=D8=AA=D9=86)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/home/Hero.tsx         | 25 ++++--------------
 .../src/components/home/HeroProjectBadge.tsx  | 26 +++++++++++++++++++
 2 files changed, 31 insertions(+), 20 deletions(-)
 create mode 100644 frontend/src/components/home/HeroProjectBadge.tsx

diff --git a/frontend/src/components/home/Hero.tsx b/frontend/src/components/home/Hero.tsx
index 58680b7..700f820 100644
--- a/frontend/src/components/home/Hero.tsx
+++ b/frontend/src/components/home/Hero.tsx
@@ -1,12 +1,13 @@
 import React from 'react'
 import { motion, useScroll, useTransform } from 'framer-motion'
 import { Link } from 'react-router-dom'
-import { ArrowLeftIcon, Building2Icon, ChevronDownIcon } from 'lucide-react'
+import { ArrowLeftIcon, ChevronDownIcon } from 'lucide-react'
 import { ButtonLink } from '../Button'
 import { useSite } from '../../api'
 import { useLang } from '../../i18n/lang'
 import { useFieldSaver } from '../../admin/AdminContext'
 import { InlineEdit } from '../admin/InlineEdit'
+import { HeroProjectBadge } from './HeroProjectBadge'
 import { SingletonPill } from '../../admin/Editable'
 
 export function Hero() {
@@ -131,7 +132,7 @@ export function Hero() {
           initial={{ opacity: 0, x: -24 }}
           animate={{ opacity: 1, x: 0 }}
           transition={{ duration: 0.6, delay: 0.36, ease: [0.23, 1, 0.32, 1] }}
-          className="group absolute bottom-28 ltr:right-6 rtl:left-6 hidden w-72 lg:block lg:ltr:right-10 lg:rtl:left-10"
+          className="group absolute bottom-28 ltr:right-6 rtl:left-6 hidden w-fit max-w-[22rem] lg:block lg:ltr:right-10 lg:rtl:left-10"
         >
           <div className="relative overflow-hidden rounded-2xl border border-white/10 bg-ink/55 p-6 shadow-2xl shadow-black/50 backdrop-blur-2xl transition-colors duration-500 group-hover:border-copper/40">
             {/* خط مویی مسی روی لبهٔ شروع */}
@@ -139,24 +140,8 @@ export function Hero() {
             {/* هالهٔ مسی نرم گوشهٔ مقابل — با هاور پررنگ‌تر */}
             <span aria-hidden="true" className="absolute -top-20 -end-20 h-44 w-44 rounded-full bg-copper/10 blur-3xl transition-colors duration-700 group-hover:bg-copper/20" />
 
-            <div className="relative flex items-start gap-4">
-              <span className="relative mt-0.5 flex h-11 w-11 shrink-0 items-center justify-center rounded-xl border border-copper/40 bg-copper/10">
-                <Building2Icon className="h-5 w-5 text-copper" aria-hidden="true" />
-                <span className="absolute -end-1 -top-1 flex h-2.5 w-2.5" 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-2.5 w-2.5 rounded-full border border-ink bg-copper" />
-                </span>
-              </span>
-              <div className="min-w-0">
-                {String(hero.badge_value ?? '').trim() !== '' && (
-                  <p className="font-mono text-[2rem] font-bold leading-none tracking-tight text-copper">
-                    <InlineEdit value={hero.badge_value} onSave={(v) => saveHero('badge_value', v)} />
-                  </p>
-                )}
-                <p className={`text-[13px] font-light leading-6 text-ivory/75 ${String(hero.badge_value ?? '').trim() !== '' ? 'mt-2.5' : ''}`}>
-                  <InlineEdit multiline value={hero.badge_label} onSave={(v) => saveHero('badge_label', v)} />
-                </p>
-              </div>
+            <div className="relative">
+              <HeroProjectBadge value={String(hero.badge_value ?? '').trim()} label={hero.badge_label} />
             </div>
           </div>
         </motion.div>
diff --git a/frontend/src/components/home/HeroProjectBadge.tsx b/frontend/src/components/home/HeroProjectBadge.tsx
new file mode 100644
index 0000000..e524730
--- /dev/null
+++ b/frontend/src/components/home/HeroProjectBadge.tsx
@@ -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>
+  )
+}