انتقال تمام محتوای متنی سایت به دیتابیس — همه متن‌های فرانت‌اند از GET /api/site خوانده می‌شوند

frontend/src/components/home/Hero.tsx

@@ -5,12 +5,27 @@ import { ButtonLink } from '../Button'
 import { useSite } from '../../api'
 
 export function Hero() {
-  const { brand } = useSite()
+  const { brand, hero } = useSite()
   const { scrollY } = useScroll()
   const imageY = useTransform(scrollY, [0, 700], [0, 110])
   const contentY = useTransform(scrollY, [0, 700], [0, -55])
   const overlay = useTransform(scrollY, [0, 600], [0.5, 0.78])
 
+  // واژه highlight در میانه تیتر با رنگ مسی رندر می‌شود
+  const renderTitle = () => {
+    if (hero.title_highlight && hero.title.includes(hero.title_highlight)) {
+      const [before, ...rest] = hero.title.split(hero.title_highlight)
+      return (
+        <>
+          {before}
+          <span className="text-copper">{hero.title_highlight}</span>
+          {rest.join(hero.title_highlight)}
+        </>
+      )
+    }
+    return hero.title
+  }
+
   return (
     <section className="relative h-screen min-h-[640px] w-full overflow-hidden" aria-label="معرفی گروه ساختمانی آرامش">
       <motion.img
@@ -40,7 +55,7 @@ export function Hero() {
             transition={{ duration: 0.7, delay: 2.1, ease: [0.23, 1, 0.32, 1] }}
             className="text-sm font-light text-copper"
           >
-            از سال ۱۳۸۳ — تهران، اصفهان، سواحل شمال
+            {hero.kicker}
           </motion.p>
 
           <motion.h1
@@ -49,9 +64,7 @@ export function Hero() {
             transition={{ duration: 0.85, delay: 2.2, ease: [0.23, 1, 0.32, 1] }}
             className="mt-6 text-hero font-bold text-ivory"
           >
-            ساختمانی که آرامش را
-            <span className="text-copper"> معماری </span>
-            می‌کند
+            {renderTitle()}
           </motion.h1>
 
           <motion.p
@@ -60,8 +73,7 @@ export function Hero() {
             transition={{ duration: 0.85, delay: 2.32, ease: [0.23, 1, 0.32, 1] }}
             className="mt-7 max-w-xl text-base font-light leading-9 text-ivory/70"
           >
-            طراحی، ساخت و سرمایه‌گذاری در پروژه‌های مسکونی و تجاری لوکس؛ با استانداردی که در جزئیات دیده می‌شود و در
-            سال‌ها دوام می‌آورد.
+            {hero.subtitle}
           </motion.p>
 
           <motion.div
@@ -70,12 +82,12 @@ export function Hero() {
             transition={{ duration: 0.85, delay: 2.44, ease: [0.23, 1, 0.32, 1] }}
             className="mt-10 flex flex-wrap items-center gap-4"
           >
-            <ButtonLink to="/projects" variant="copper">
-              مشاهده پروژه‌ها
+            <ButtonLink to={hero.cta_primary_href} variant="copper">
+              {hero.cta_primary_label}
               <ArrowLeftIcon className="h-4 w-4" />
             </ButtonLink>
-            <ButtonLink to="/contact" variant="outline" className="font-light">
-              مشاوره سرمایه‌گذاری
+            <ButtonLink to={hero.cta_secondary_href} variant="outline" className="font-light">
+              {hero.cta_secondary_label}
             </ButtonLink>
           </motion.div>
         </div>
@@ -86,10 +98,8 @@ export function Hero() {
           transition={{ duration: 0.9, delay: 2.6, ease: [0.23, 1, 0.32, 1] }}
           className="absolute bottom-28 left-6 hidden w-60 border border-ivory/15 bg-char/60 p-6 backdrop-blur-md lg:block lg:left-10"
         >
-          <p className="text-3xl font-bold text-copper">۴۷</p>
-          <p className="mt-2 text-sm font-light leading-7 text-ivory/70">
-            پروژه تحویل‌شده در بیست‌ویک سال فعالیت حرفه‌ای
-          </p>
+          <p className="text-3xl font-bold text-copper">{hero.badge_value}</p>
+          <p className="mt-2 text-sm font-light leading-7 text-ivory/70">{hero.badge_label}</p>
         </motion.div>
       </motion.div>
 
@@ -98,7 +108,7 @@ export function Hero() {
         aria-label="رفتن به بخش بعدی"
         className="absolute bottom-8 right-1/2 z-10 flex translate-x-1/2 flex-col items-center gap-2 text-ivory/50 transition-colors duration-200 ease-lux hover:text-copper"
       >
-        <span className="text-xs font-light">اسکرول کنید</span>
+        <span className="text-xs font-light">{hero.scroll_label}</span>
         <ChevronDownIcon className="h-4 w-4 animate-bounce" />
       </a>
     </section>