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

---
 frontend/src/components/home/Hero.tsx | 36 ++++++++++++++++++++-------
 1 file changed, 27 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/home/Hero.tsx b/frontend/src/components/home/Hero.tsx
index bd1767b..9b96b09 100644
--- a/frontend/src/components/home/Hero.tsx
+++ b/frontend/src/components/home/Hero.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { motion, useScroll, useTransform } from 'framer-motion'
 import { Link } from 'react-router-dom'
-import { ArrowLeftIcon, ChevronDownIcon } from 'lucide-react'
+import { ArrowLeftIcon, Building2Icon, ChevronDownIcon } from 'lucide-react'
 import { ButtonLink } from '../Button'
 import { useSite } from '../../api'
 import { useLang } from '../../i18n/lang'
@@ -126,19 +126,37 @@ export function Hero() {
           </motion.div>
         </div>
 
-        {/* کادر آمار شناور (گوشه پایین چپ): شیشه‌ای با لبه‌های گرد مدرن */}
+        {/* کادر آمار شناور (گوشه پایین چپ) — شیشهٔ چندلایه، خط مویی مسی، هالهٔ نرم و نشان زنده */}
         <motion.div
           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="absolute bottom-28 ltr:right-6 rtl:left-6 hidden w-64 rounded-2xl border border-ivory/15 bg-char/70 p-6 backdrop-blur-xl shadow-2xl shadow-black/40 lg:block lg:ltr:right-10 lg:rtl:left-10"
+          className="group absolute bottom-28 ltr:right-6 rtl:left-6 hidden w-72 lg:block lg:ltr:right-10 lg:rtl:left-10"
         >
-          <p className="text-3xl font-bold text-copper font-mono">
-            <InlineEdit value={hero.badge_value} onSave={(v) => saveHero('badge_value', v)} />
-          </p>
-          <p className="mt-2 text-sm font-light leading-7 text-ivory/70">
-            <InlineEdit multiline value={hero.badge_label} onSave={(v) => saveHero('badge_label', v)} />
-          </p>
+          <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">
+            {/* خط مویی مسی روی لبهٔ شروع */}
+            <span aria-hidden="true" className="absolute inset-y-0 start-0 w-[3px] bg-gradient-to-b from-copper/90 via-copper/30 to-transparent" />
+            {/* هالهٔ مسی نرم گوشهٔ مقابل — با هاور پررنگ‌تر */}
+            <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">
+                <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="mt-2.5 text-[13px] font-light leading-6 text-ivory/75">
+                  <InlineEdit multiline value={hero.badge_label} onSave={(v) => saveHero('badge_label', v)} />
+                </p>
+              </div>
+            </div>
+          </div>
         </motion.div>
       </motion.div>