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

This commit is contained in:
aramesh-site deploy
2026-10-09 14:27:30 +00:00
parent 9759ab2698
commit 5e2d5dfabb
3 changed files with 48 additions and 16 deletions
+12 -8
View File
@@ -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">
+4 -2
View File
@@ -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" />
+32 -6
View File
@@ -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>
)
}