MMD
5ed082631e
لایه ویرایش بصری روی سایت واقعی (بدون داشبورد جدا): - ورود ادمین از مسیر پنهان /admin/login با توکن JWT (localStorage) و AdminContext شامل isEditMode و وضعیت ذخیره (همگام/در حال ذخیره/خطا) - AdminBar شناور پایین صفحه (فقط برای کاربر واردشده): کلید حالت ویرایش، وضعیت ذخیره، خروج — حالت ویرایش در sessionStorage می‌ماند - InlineEdit: در حالت عادی دقیقاً همان HTML قبلی (بدون تغییر چیدمان)؛ در حالت ویرایش کادرخط‌چین + contentEditable با ذخیره خودکار در blur (Enter ذخیره، Esc لغو) — وایرایش‌شده روی همه متن‌های سایت: هیرو، تیتر بخش‌ها، هیرو صفحات، داستان، فرم تماس، خبرنامه، فوتر، منو، برچسب‌های وضعیت پروژه و... - کشوی عمومی EntityDrawer با پیکربندی متمرکز برای ۱۴ مجموعه (خدمات، پروژه‌ها، مقالات، نظرات، سوالات، تیم، تایم‌لاین، آمار، چرا آرامش، مدل‌های سرمایه‌گذاری، مراحل کار، دفاتر، گالری، منو): ویرایش چندفیلدی، افزودن، حذف و جابه‌جایی ترتیب (▲▼) با ذخیره خودکار هر فیلد - دکمه‌های شناور ویرایش/حذف/ترتیب فقط در حالت ویرایش روی آیتم‌ها - کشوهای یگانه: برند و لوگو، تنظیمات هیرو، فرم تماس، خبرنامه، فوتر، قبل/بعد و نقل‌قول داستان — آپلود تصویر به MinIO از همان‌جا - به‌روزرسانی خوش‌بینانه SiteContext (updateSite) پس از هر PATCH؛ مسیرها در حالت ویرایش کلیک نمی‌شوند؛ breadcrumb محافظ beforeunload
58 lines
2.5 KiB
TypeScript
58 lines
2.5 KiB
TypeScript
import React from 'react'
|
||
import { PageHero } from '../components/PageHero'
|
||
import { Reveal } from '../components/Reveal'
|
||
import { SectionHeading } from '../components/SectionHeading'
|
||
import { Stats } from '../components/home/Stats'
|
||
import { ContactSection } from '../components/ContactSection'
|
||
import { useSectionHeading, useSite } from '../api'
|
||
import { AddItemButton, EditableItem } from '../admin/Editable'
|
||
|
||
export function Investment() {
|
||
const { investment_models } = useSite()
|
||
const heading = useSectionHeading('investment_models')
|
||
|
||
return (
|
||
<>
|
||
<PageHero pageKey="investment" />
|
||
|
||
<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={heading.title} lead={heading.lead} />
|
||
<div className="mt-14 grid gap-6 lg:grid-cols-3">
|
||
{investment_models.map((model, i) => (
|
||
<Reveal key={model.id} delay={0.06 * i} className="h-full">
|
||
<EditableItem resource="investment_models" item={model} 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) => (
|
||
<li key={point} className="flex items-start gap-3 text-sm font-light leading-8 text-ivory/65">
|
||
<span className="mt-3.5 h-1 w-1 shrink-0 rounded-full bg-copper transition-transform duration-300 ease-out group-hover:scale-[1.5]" aria-hidden="true" />
|
||
{point}
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
</article>
|
||
</EditableItem>
|
||
</Reveal>
|
||
))}
|
||
<AddItemButton resource="investment_models" />
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<Stats />
|
||
<ContactSection />
|
||
</>
|
||
)
|
||
}
|