Behrad/aramesh-backend
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(home): بازطراحی کادر آمار هیرو — شیشهٔ چندلایه با خط مویی مسی، هالهٔ نرم، نشان زنده و سلسله‌مراتب عدد/برچسب؛ محتوا: +۶۴ پروژه تحویل‌شده در ۲۴ سال

Browse Source
This commit is contained in:
aramesh-site deploy
2026-10-07 09:41:04 +00:00
parent 2c4fd5a9d4
commit 436acf3cca
1 changed files with 27 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/home/Hero.tsx
+27 -9
View File
@@ -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>