77 lines
4.7 KiB
Plaintext
77 lines
4.7 KiB
Plaintext
---
|
|
import ContactButtons from '../components/ContactButtons.astro';
|
|
import Footer from '../components/Footer.astro';
|
|
import Header from '../components/Header.astro';
|
|
import BaseLayout from '../layouts/BaseLayout.astro';
|
|
import { EMAIL, HOURS, PHONE_DISPLAY } from '../lib/contact';
|
|
import { site } from '../site';
|
|
---
|
|
|
|
<BaseLayout title="Kontaktai - Juozas Auto" description="Susisiekite telefonu, el. paštu arba WhatsApp dėl automobilio apžiūros Lietuvoje." canonicalPath="/kontaktai">
|
|
<Header />
|
|
<main class="mx-auto grid max-w-7xl gap-12 px-5 py-10 sm:px-8 lg:grid-cols-[0.8fr_1.2fr] lg:px-10">
|
|
<section>
|
|
<p class="text-xs font-semibold uppercase tracking-[0.18em] text-burgundy-700">Kontaktai</p>
|
|
<h1 class="mt-4 text-3xl font-semibold tracking-[-0.06em]">Susitarkime dėl apžiūros.</h1>
|
|
<p class="mt-5 max-w-xl text-lg text-muted">Greičiausias būdas susisiekti yra skambutis arba WhatsApp žinutė. Atsakome darbo valandomis.</p>
|
|
<div class="mt-8 max-w-md">
|
|
<ContactButtons />
|
|
</div>
|
|
<dl class="mt-10 space-y-4 text-sm">
|
|
<div><dt class="text-muted">Telefonas</dt><dd class="mt-1 font-semibold tabular">{PHONE_DISPLAY}</dd></div>
|
|
<div><dt class="text-muted">El. paštas</dt><dd class="mt-1 font-semibold">{EMAIL}</dd></div>
|
|
<div><dt class="text-muted">Darbo laikas</dt><dd class="mt-1 font-semibold">{HOURS}</dd></div>
|
|
</dl>
|
|
</section>
|
|
|
|
<section class="rounded-[2rem] border border-line bg-paper p-6 shadow-soft sm:p-8" aria-labelledby="sell-heading">
|
|
<h2 id="sell-heading" class="text-2xl font-semibold tracking-[-0.05em]">Norite parduoti automobilį?</h2>
|
|
<p class="mt-3 text-muted">Palikite kontaktą ir trumpą informaciją. Nuotraukas galėsite atsiųsti atsakius į užklausą.</p>
|
|
{!site.formAction && (
|
|
<p class="mt-5 rounded-2xl bg-burgundy-50 px-4 py-3 text-sm text-burgundy-900">
|
|
Forma paruošta prijungimui. Iki tol greičiausias kontaktas yra telefonas arba WhatsApp.
|
|
</p>
|
|
)}
|
|
<form class="mt-7 grid gap-4" action={site.formAction || undefined} method="post" data-sell-form data-meta-params={JSON.stringify({ content_category: 'SellerLead', content_name: 'Sell car inquiry' })}>
|
|
<label class="grid gap-2 text-sm font-semibold">Vardas<input class="rounded-2xl border border-line bg-paper px-4 py-3 font-normal" name="name" autocomplete="name" required /></label>
|
|
<label class="grid gap-2 text-sm font-semibold">Telefonas<input class="rounded-2xl border border-line bg-paper px-4 py-3 font-normal" name="phone" autocomplete="tel" required /></label>
|
|
<label class="grid gap-2 text-sm font-semibold">Automobilis<input class="rounded-2xl border border-line bg-paper px-4 py-3 font-normal" name="car" placeholder="BMW 320d, 2018" required /></label>
|
|
<label class="grid gap-2 text-sm font-semibold">Pastaba<textarea class="min-h-32 rounded-2xl border border-line bg-paper px-4 py-3 font-normal" name="message" placeholder="Trumpai apie komplektaciją, ridą, būklę ir nuotraukas." /></label>
|
|
<p class="text-sm text-muted">Nuotraukų įkėlimas šiame etape nenaudojamas dėl paprasto ir greito statinio puslapio.</p>
|
|
<button class="rounded-full bg-burgundy-700 px-5 py-4 font-semibold text-paper transition-transform duration-200 ease-out-quart hover:-translate-y-0.5 disabled:cursor-not-allowed disabled:opacity-60" type="submit" disabled={!site.formAction}>Siųsti užklausą</button>
|
|
<p class="text-sm text-muted" role="status" data-form-status></p>
|
|
</form>
|
|
</section>
|
|
</main>
|
|
<Footer />
|
|
</BaseLayout>
|
|
|
|
<script is:inline>
|
|
const form = document.querySelector('[data-sell-form]');
|
|
const status = document.querySelector('[data-form-status]');
|
|
if (form && form.action) {
|
|
form.addEventListener('submit', async (event) => {
|
|
event.preventDefault();
|
|
const submit = form.querySelector('button[type="submit"]');
|
|
if (submit) submit.disabled = true;
|
|
if (status) status.textContent = 'Siunčiama...';
|
|
try {
|
|
const response = await fetch(form.action, {
|
|
method: 'POST',
|
|
body: new FormData(form),
|
|
headers: { Accept: 'application/json' },
|
|
});
|
|
if (!response.ok) throw new Error('Form submit failed');
|
|
if (window.juozasTrackMeta) {
|
|
window.juozasTrackMeta('Lead', JSON.parse(form.dataset.metaParams || '{}'));
|
|
}
|
|
form.reset();
|
|
if (status) status.textContent = 'Užklausa išsiųsta. Susisieksime artimiausiu metu.';
|
|
} catch {
|
|
if (status) status.textContent = 'Nepavyko išsiųsti. Paskambinkite arba parašykite per WhatsApp.';
|
|
if (submit) submit.disabled = false;
|
|
}
|
|
});
|
|
}
|
|
</script>
|