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

frontend/src/pages/Investment.tsx

@@ -4,53 +4,32 @@ import { Reveal } from '../components/Reveal'
 import { SectionHeading } from '../components/SectionHeading'
 import { Stats } from '../components/home/Stats'
 import { ContactSection } from '../components/ContactSection'
-import { IMAGES } from '../data/site'
-
-const MODELS = [
-  {
-    title: 'مشارکت در ساخت',
-    desc: 'مالک زمین و گروه ساختمانی آرامش در سود پروژه شریک می‌شوند؛ اجرا، مجوزها و فروش بر عهده ماست.',
-    points: ['ارزیابی رایگان زمین', 'قرارداد شفاف با ضمانت اجرا', 'گزارش ماهانه پیشرفت'],
-  },
-  {
-    title: 'صندوق پروژه‌محور',
-    desc: 'سرمایه‌گذاری روی یک پروژه مشخص با واحدهای قابل خرید و بازدهی محاسبه‌شده در پایان دوره.',
-    points: ['حداقل دوره ۲۴ ماه', 'گزارش ارزش‌گذاری فصلی', 'امکان انتقال واحد سرمایه'],
-  },
-  {
-    title: 'پیش‌خرید واحد',
-    desc: 'خرید واحد مسکونی یا تجاری در مراحل ابتدایی ساخت با قیمت پیش از تکمیل و پرداخت مرحله‌ای.',
-    points: ['پرداخت مرحله‌ای متناسب با پیشرفت', 'امکان شخصی‌سازی پلان', 'تضمین زمان تحویل'],
-  },
-]
+import { usePageHero, useSectionHeading, useSite } from '../api'
 
 export function Investment() {
+  const { investment_models } = useSite()
+  const hero = usePageHero('investment')
+  const heading = useSectionHeading('investment_models')
+
   return (
     <>
-      <PageHero
-        title="سرمایه‌گذاری"
-        lead="سه مسیر روشن برای ورود به بازار ساخت‌وساز لوکس، با ساختار مالی شفاف و گزارش‌دهی منظم."
-        image={IMAGES[4]}
-      />
+      <PageHero title={hero.title} lead={hero.lead} image={hero.image} />
 
       <section className="bg-ink py-24 lg:py-32" aria-labelledby="models-title">
         <div className="mx-auto max-w-site px-6 lg:px-10">
-          <SectionHeading
-            title="مدل‌های همکاری"
-            lead="بسته به میزان سرمایه، افق زمانی و سطح ریسکی که می‌پذیرید، یکی از این سه مسیر مناسب شماست."
-          />
+          <SectionHeading title={heading.title} lead={heading.lead} />
           <div className="mt-14 grid gap-6 lg:grid-cols-3">
-            {MODELS.map((model, i) => (
-              <Reveal key={model.title} delay={0.06 * i} className="h-full">
+            {investment_models.map((model, i) => (
+              <Reveal key={model.id} delay={0.06 * i} className="h-full">
                 <article className="group flex h-full flex-col border border-ivory/10 bg-char p-10 transition-all duration-300 ease-out hover:-translate-y-2 hover:border-copper/40 hover:shadow-lift transform-gpu will-change-transform">
                   <p className="text-sm font-bold text-copper/80">۰{(i + 1).toLocaleString('fa-IR')}</p>
-                  
+
                   <h3 className="mt-6 text-2xl font-bold text-ivory transition-colors duration-300 ease-out group-hover:text-copper">
                     {model.title}
                   </h3>
-                  
+
                   <p className="mt-5 text-sm font-light leading-9 text-ivory/65">{model.desc}</p>
-                  
+
                   <div className="mt-auto pt-10">
                     <ul className="space-y-4 border-t border-ivory/10 pt-8">
                       {model.points.map((point) => (
@@ -72,4 +51,4 @@ export function Investment() {
       <ContactSection />
     </>
   )
-}
+}