feat: update UI to glassmorphic design and copper theme

frontend/src/components/PageHero.tsx

@@ -2,52 +2,88 @@ import React from 'react'
 import { Link } from 'react-router-dom'
 import { motion } from 'framer-motion'
 import { ChevronLeftIcon } from 'lucide-react'
+import { usePageHero } from '../api'
+import { useFieldSaver } from '../admin/AdminContext'
+import { SingletonPill } from '../admin/Editable'
+import { InlineEdit } from './admin/InlineEdit'
+import { ImageField } from './admin/ImageField'
 
 type PageHeroProps = {
-  title: string
-  lead: string
-  image: string
+  /** کلید هیرو صفحه در دیتابیس — عنوان/توضیح درجا ویرایش‌پذیر می‌شوند */
+  pageKey: string
 }
 
-export function PageHero({ title, lead, image }: PageHeroProps) {
+export function PageHero({ pageKey }: PageHeroProps) {
+  const hero = usePageHero(pageKey)
+  const save = useFieldSaver()
+
+  const saveField = (field: 'title' | 'lead' | 'image', value: string) =>
+    save('page-heroes', hero.id, { [field]: value }, (d) => {
+      const h = d.page_heroes.find((p) => p.id === hero.id)
+      if (h) (h as Record<string, unknown>)[field] = value
+    })
+
   return (
     <section className="relative flex h-[58vh] min-h-[420px] items-end overflow-hidden">
-      <img src={image} alt="" aria-hidden="true" className="absolute inset-0 h-full w-full object-cover" />
-      
+      {hero.image && <img src={hero.image} alt="" aria-hidden="true" className="absolute inset-0 h-full w-full object-cover" />}
+
       <div className="absolute inset-0 bg-ink/50" aria-hidden="true" />
-      
+
       <div
         className="absolute inset-0"
         style={{ background: 'linear-gradient(to top, #27221c 6%, rgba(39,34,28,0.1) 70%)' }}
         aria-hidden="true"
       />
-      
+
       <div className="relative mx-auto w-full max-w-site px-6 pb-16 lg:px-10">
         <nav aria-label="مسیر صفحه" className="flex items-center gap-2 text-xs font-light text-ivory/50">
           <Link to="/" className="transition-colors hover:text-copper">
             صفحه اصلی
           </Link>
           <ChevronLeftIcon className="h-3.5 w-3.5" />
-          <span className="text-copper">{title}</span>
+          <span className="text-copper">{hero.title}</span>
         </nav>
         <motion.h1
           initial={{ opacity: 0, y: 24 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.7, ease: [0.23, 1, 0.32, 1] }}
-          className="mt-5 max-w-[700px] text-hero font-bold text-ivory"
+          className="mt-5 max-w-[700px]"
         >
-          {title}
+          <InlineEdit
+            as="span"
+            value={hero.title}
+            onSave={(v) => saveField('title', v)}
+            className="block text-hero font-bold text-ivory"
+          />
         </motion.h1>
         <motion.p
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.7, delay: 0.1, ease: [0.23, 1, 0.32, 1] }}
-          className="mt-5 max-w-2xl text-base font-light leading-9 text-ivory/65"
+          className="mt-5 max-w-2xl"
         >
-          {lead}
+          <InlineEdit
+            as="span"
+            multiline
+            value={hero.lead}
+            onSave={(v) => saveField('lead', v)}
+            className="block text-base font-light leading-9 text-ivory/65"
+          />
         </motion.p>
         <div className="mt-8 h-px w-28 bg-copper" />
+
+        {/* ویرایش تصویر پس‌زمینه و سئوی صفحه — فقط در حالت ویرایش ادمین */}
+        <div className="mt-6 flex items-start gap-3 [&>div]:!mt-0">
+          <SingletonPill
+            resource="seo-meta"
+            label="عنوان و توضیح سئوی این صفحه"
+            select={(d) => d.seo_meta.find((s) => s.page_key === pageKey)}
+            // اگر ردیف سئوی این صفحه هنوز ساخته نشده باشد، همین‌جا ساخته می‌شود
+            createDefaults={() => ({ page_key: pageKey, title: '', description: '' })}
+          />
+          <ImageField label="تصویر پس‌زمینه" value={hero.image} onSave={(url) => saveField('image', url)} />
+        </div>
       </div>
     </section>
   )
-}
+}