42 lines
1.6 KiB
TypeScript
42 lines
1.6 KiB
TypeScript
import React from 'react'
|
|
import { PageHero } from '../components/PageHero'
|
|
import { ContactSection } from '../components/ContactSection'
|
|
import { Reveal } from '../components/Reveal'
|
|
import { useSite } from '../api'
|
|
import { useLang } from '../i18n/lang'
|
|
import { AddItemButton, EditableItem } from '../admin/Editable'
|
|
|
|
export function ContactPage() {
|
|
const { offices } = useSite()
|
|
const { t } = useLang()
|
|
|
|
return (
|
|
<>
|
|
<PageHero pageKey="contact" />
|
|
|
|
<section className="bg-ink py-24" aria-label={t('officesAria')}>
|
|
<div className="mx-auto grid max-w-site gap-6 px-6 md:grid-cols-3 lg:px-10">
|
|
{offices.map((office, i) => (
|
|
<Reveal key={office.id} delay={0.06 * i} className="h-full">
|
|
<EditableItem resource="offices" item={office} className="h-full">
|
|
<article className="flex h-full flex-col border border-ivory/10 bg-char px-8 py-12 text-center transition-all duration-300 ease-out hover:-translate-y-2 hover:border-copper/40 hover:shadow-lift transform-gpu will-change-transform">
|
|
<h2 className="text-2xl font-bold text-copper">{office.city}</h2>
|
|
<p className="mt-6 text-sm font-light leading-9 text-ivory/70">{office.address}</p>
|
|
<div className="mt-auto pt-10">
|
|
<p className="border-t border-ivory/10 pt-6 text-xs font-light text-ivory/50">
|
|
{office.hours}
|
|
</p>
|
|
</div>
|
|
</article>
|
|
</EditableItem>
|
|
</Reveal>
|
|
))}
|
|
<AddItemButton resource="offices" />
|
|
</div>
|
|
</section>
|
|
|
|
<ContactSection />
|
|
</>
|
|
)
|
|
}
|