From 5e2d5dfabb4f20d2c518599bf9489acd79a5303f Mon Sep 17 00:00:00 2001
From: aramesh-site deploy <deploy@aramesh-site.local>
Date: Fri, 9 Oct 2026 14:27:30 +0000
Subject: [PATCH] =?UTF-8?q?feat(contact):=20=DB=8C=DA=A9=20=D8=AA=D8=B5?=
 =?UTF-8?q?=D9=88=DB=8C=D8=B1=20=D9=BE=DB=8C=D9=88=D8=B3=D8=AA=D9=87=20?=
 =?UTF-8?q?=D8=A8=D8=B1=D8=A7=DB=8C=20=DA=A9=D9=84=20=D8=B5=D9=81=D8=AD?=
 =?UTF-8?q?=D9=87=D9=94=20=D8=AA=D9=85=D8=A7=D8=B3=20=E2=80=94=20=D9=87?=
 =?UTF-8?q?=DB=8C=D8=B1=D9=88=20=D9=88=20=D9=81=D8=B1=D9=85=20=D8=B1=D9=88?=
 =?UTF-8?q?=DB=8C=20=D9=87=D9=85=D8=A7=D9=86=20=D9=BE=D8=B3=E2=80=8C=D8=B2?=
 =?UTF-8?q?=D9=85=DB=8C=D9=86=D9=87=D8=9B=20=D8=AD=D8=B0=D9=81=20=D8=AA?=
 =?UTF-8?q?=DA=A9=D8=B1=D8=A7=D8=B1=20=D8=B9=DA=A9=D8=B3=20(=D9=87=D9=88?=
 =?UTF-8?q?=D9=85=20=D8=AF=D8=B3=D8=AA=E2=80=8C=D9=86=D8=AE=D9=88=D8=B1?=
 =?UTF-8?q?=D8=AF=D9=87)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/ContactSection.tsx | 20 +++++++-----
 frontend/src/components/PageHero.tsx       |  6 ++--
 frontend/src/pages/ContactPage.tsx         | 38 ++++++++++++++++++----
 3 files changed, 48 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/ContactSection.tsx b/frontend/src/components/ContactSection.tsx
index 0d71e09..3e45210 100644
--- a/frontend/src/components/ContactSection.tsx
+++ b/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,13 +100,17 @@ export function ContactSection() {
 
   return (
     <section id="contact" className="relative overflow-hidden py-24 lg:py-32" aria-labelledby="contact-title">
-      <img
-        src={brand.contact_bg}
-        alt=""
-        aria-hidden="true"
-        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]" />
+      {!bare && (
+        <>
+          <img
+            src={brand.contact_bg}
+            alt=""
+            aria-hidden="true"
+            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">
diff --git a/frontend/src/components/PageHero.tsx b/frontend/src/components/PageHero.tsx
index cfd822e..9be7bb4 100644
--- a/frontend/src/components/PageHero.tsx
+++ b/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" />
 
diff --git a/frontend/src/pages/ContactPage.tsx b/frontend/src/pages/ContactPage.tsx
index 415ca15..410ec2c 100644
--- a/frontend/src/pages/ContactPage.tsx
+++ b/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 (
-    <>
-      <PageHero pageKey="contact" />
+    <div className="relative" aria-label={t('officesAria')}>
+      {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')} />
-
-      <ContactSection />
-    </>
+      <div className="relative">
+        <PageHero pageKey="contact" hideImage />
+        <ContactSection bare />
+      </div>
+    </div>
   )
 }