58 lines
2.6 KiB
Plaintext
58 lines
2.6 KiB
Plaintext
---
|
|
import Base from '../layouts/Base.astro';
|
|
import PageHero from '../components/PageHero.astro';
|
|
import ContactForm from '../components/ContactForm.astro';
|
|
import contactHero from '../assets/img/contact-hero.jpg';
|
|
import T from '../components/content/T.astro';
|
|
import { t, getImageOverride } from '../lib/content';
|
|
export const prerender = false;
|
|
const mapsQuery = encodeURIComponent(`${t('global.contact.address')}, ${t('global.contact.city-line')}`);
|
|
---
|
|
<Base title={t('contact.meta.title')} description={t('contact.meta.description')}>
|
|
<PageHero title={t('contact.hero.title')} bgImage={getImageOverride('contact.hero.image') ?? contactHero} />
|
|
<section class="section">
|
|
<div class="container cgrid">
|
|
<div class="cmap" id="map-box">
|
|
<button class="btn btn--dark" id="map-load">{t('contact.map.button')}</button>
|
|
<p class="cmap__note">{t('contact.map.note')}</p>
|
|
</div>
|
|
<ContactForm variant="full" />
|
|
</div>
|
|
<div class="container cinfo">
|
|
<div>
|
|
<T tag="contact.info.address-label" as="h3" />
|
|
<p>{t('global.contact.address')} {t('global.contact.city-line')}</p>
|
|
</div>
|
|
<div>
|
|
<T tag="contact.info.phone-label" as="h3" />
|
|
<p>{t('global.contact.phone')}</p>
|
|
</div>
|
|
<div>
|
|
<T tag="contact.info.email-label" as="h3" />
|
|
<p><a href={`mailto:${t('global.contact.email')}`}>{t('global.contact.email')}</a></p>
|
|
</div>
|
|
</div>
|
|
<div class="container">
|
|
<T tag="contact.invite" as="p" class="cinvite" />
|
|
</div>
|
|
</section>
|
|
</Base>
|
|
|
|
<style>
|
|
.cgrid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 50px; margin-bottom: 50px; }
|
|
.cmap { background: var(--c-bg-alt); min-height: 420px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
|
|
.cmap iframe { width: 100%; height: 100%; border: 0; min-height: 420px; }
|
|
.cmap__note { font-size: .8rem; color: var(--c-text-light); }
|
|
.cinfo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-bottom: 30px; }
|
|
.cinfo h3 { font-size: .85rem; text-transform: uppercase; letter-spacing: .16em; }
|
|
.cinvite { max-width: 640px; }
|
|
@media (max-width: 991px) { .cgrid, .cinfo { grid-template-columns: 1fr; } }
|
|
</style>
|
|
|
|
<script define:vars={{ mapsQuery }}>
|
|
document.getElementById('map-load')?.addEventListener('click', () => {
|
|
const box = document.getElementById('map-box');
|
|
box.innerHTML = `<iframe src="https://www.google.com/maps?q=${mapsQuery}&output=embed" loading="lazy" title="Mappa InsanityLab" referrerpolicy="no-referrer-when-downgrade"></iframe>`;
|
|
});
|
|
</script>
|