feat(contact): یک تصویر پیوسته برای کل صفحهٔ تماس — هیرو و فرم روی همان پس‌زمینه؛ حذف تکرار عکس (هوم دست‌نخورده)

frontend/src/components/ContactSection.tsx

@@ -10,7 +10,7 @@ import { InlineEdit } from './admin/InlineEdit'
 import { SingletonPill } from '../admin/Editable'
 import { API_URL } from '../config'
 
-export function ContactSection() {
+export function ContactSection({ bare = false }: { bare?: boolean } = {}) {
   const { brand, contact_section: content } = useSite()
   const { t } = useLang()
   const save = useFieldSaver()
@@ -100,6 +100,8 @@ export function ContactSection() {
 
   return (
     <section id="contact" className="relative overflow-hidden py-24 lg:py-32" aria-labelledby="contact-title">
+      {!bare && (
+        <>
           <img
             src={brand.contact_bg}
             alt=""
@@ -107,6 +109,8 @@ export function ContactSection() {
             className="absolute inset-0 h-full w-full object-cover" loading="lazy" decoding="async"
           />
           <div className="absolute inset-0 bg-ink/75 backdrop-blur-[2px]" />
+        </>
+      )}
 
       <div className="relative mx-auto max-w-site px-6 lg:px-10">
         <div className="mx-auto grid max-w-6xl items-stretch gap-8 lg:grid-cols-12">

frontend/src/components/PageHero.tsx

@@ -12,9 +12,11 @@ import { ImageField } from './admin/ImageField'
 type PageHeroProps = {
   /** کلید هیرو صفحه در دیتابیس — عنوان/توضیح درجا ویرایش‌پذیر می‌شوند */
   pageKey: string
+  /** تصویر پس‌زمینه را رندر نکن — صفحه تصویر پیوستهٔ خودش را دارد */
+  hideImage?: boolean
 }
 
-export function PageHero({ pageKey }: PageHeroProps) {
+export function PageHero({ pageKey, hideImage = false }: PageHeroProps) {
   const hero = usePageHero(pageKey)
   const { t, href } = useLang()
   const save = useFieldSaver()
@@ -27,7 +29,7 @@ export function PageHero({ pageKey }: PageHeroProps) {
 
   return (
     <section className="relative flex h-[58vh] min-h-[420px] items-end overflow-hidden">
-      {hero.image && <img src={hero.image} alt="" aria-hidden="true" className="absolute inset-0 h-full w-full object-cover" fetchPriority="high" decoding="async" />}
+      {hero.image && !hideImage && <img src={hero.image} alt="" aria-hidden="true" className="absolute inset-0 h-full w-full object-cover" fetchPriority="high" decoding="async" />}
 
       <div className="absolute inset-0 bg-ink/50" aria-hidden="true" />
 

frontend/src/pages/ContactPage.tsx

@@ -1,18 +1,44 @@
 import React from 'react'
 import { PageHero } from '../components/PageHero'
 import { ContactSection } from '../components/ContactSection'
+import { usePageHero } from '../api'
 import { useLang } from '../i18n/lang'
 
+/**
+ * صفحهٔ تماس — یک تصویر پیوسته برای کل صفحه: عنوان هیرو و فرم/اطلاعات
+ * هر دو روی همان پس‌زمینه می‌نشینند تا تصویر دو بار تکرار نشود.
+ */
 export function ContactPage() {
   const { t } = useLang()
+  const hero = usePageHero('contact')
 
   return (
-    <>
+    <div className="relative" aria-label={t('officesAria')}>
-      <PageHero pageKey="contact" />
+      {hero.image && (
+        <img
+          src={hero.image}
+          alt=""
+          aria-hidden="true"
+          className="absolute inset-0 h-full w-full object-cover"
+          fetchPriority="high"
+          decoding="async"
+        />
+      )}
+      {/* پردهٔ تیره و گرادیان برای خوانایی — یک لایه برای کل صفحه */}
+      <div className="absolute inset-0 bg-ink/60" aria-hidden="true" />
+      <div
+        className="absolute inset-0"
+        style={{
+          background:
+            'linear-gradient(to top, #27221c 2%, rgba(39,34,28,0.55) 45%, rgba(39,34,28,0.35) 100%)',
+        }}
+        aria-hidden="true"
+      />
 
-      <section className="bg-ink py-2" aria-label={t('officesAria')} />
+      <div className="relative">
-
+        <PageHero pageKey="contact" hideImage />
-      <ContactSection />
+        <ContactSection bare />
-    </>
+      </div>
+    </div>
   )
 }