feat(contact): یک تصویر پیوسته برای کل صفحهٔ تماس — هیرو و فرم روی همان پسزمینه؛ حذف تکرار عکس (هوم دستنخورده)
This commit is contained in:
@@ -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">
|
||||
|
||||
@@ -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" />
|
||||
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user