9cfd926e9c
Full-service digital agency website built with Astro 5, Tailwind CSS v4, and TypeScript. Includes 10 pages: homepage, diensten (development, hosting, growth), pakketten, over ons, blog met eerste GEO-artikel, en contact. Features: dark theme design system, glassmorphism UI, structured data/schema markup voor SEO en GEO, content collections voor blog, responsive design, sitemap generation. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
120 lines
8.7 KiB
Plaintext
120 lines
8.7 KiB
Plaintext
---
|
|
import Layout from '../layouts/Layout.astro';
|
|
---
|
|
|
|
<Layout title="Contact" description="Neem contact op met SiteLoft. Vertel ons over je project en we reageren binnen 24 uur met een vrijblijvend voorstel.">
|
|
<section class="relative overflow-hidden">
|
|
<div class="absolute inset-0 -z-10"><div class="absolute top-1/4 left-1/4 h-96 w-96 rounded-full bg-accent-500/5 blur-3xl"></div></div>
|
|
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-24 sm:py-32">
|
|
<div class="mx-auto max-w-3xl text-center mb-16">
|
|
<h1 class="text-4xl sm:text-5xl font-extrabold tracking-tight text-slate-50 leading-[1.1]">Laten we <span class="text-gradient">kennismaken</span></h1>
|
|
<p class="mt-6 text-lg text-slate-400 max-w-2xl mx-auto leading-relaxed">Vertel ons over je project. We reageren binnen 24 uur op werkdagen met een vrijblijvend voorstel.</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-5 gap-12">
|
|
<!-- FORM -->
|
|
<div class="lg:col-span-3">
|
|
<div class="rounded-2xl glass p-8">
|
|
<form action="#" method="POST" class="space-y-6">
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
|
<div>
|
|
<label for="name" class="block text-sm font-medium text-slate-300 mb-2">Naam *</label>
|
|
<input type="text" id="name" name="name" required class="w-full rounded-xl bg-slate-900/50 px-4 py-3 text-sm text-slate-200 ring-1 ring-slate-700 placeholder:text-slate-600 focus:outline-none focus:ring-2 focus:ring-accent-500/50" placeholder="Je naam" />
|
|
</div>
|
|
<div>
|
|
<label for="email" class="block text-sm font-medium text-slate-300 mb-2">Email *</label>
|
|
<input type="email" id="email" name="email" required class="w-full rounded-xl bg-slate-900/50 px-4 py-3 text-sm text-slate-200 ring-1 ring-slate-700 placeholder:text-slate-600 focus:outline-none focus:ring-2 focus:ring-accent-500/50" placeholder="naam@bedrijf.nl" />
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
|
<div>
|
|
<label for="phone" class="block text-sm font-medium text-slate-300 mb-2">Telefoon</label>
|
|
<input type="tel" id="phone" name="phone" class="w-full rounded-xl bg-slate-900/50 px-4 py-3 text-sm text-slate-200 ring-1 ring-slate-700 placeholder:text-slate-600 focus:outline-none focus:ring-2 focus:ring-accent-500/50" placeholder="06 12345678" />
|
|
</div>
|
|
<div>
|
|
<label for="company" class="block text-sm font-medium text-slate-300 mb-2">Bedrijf</label>
|
|
<input type="text" id="company" name="company" class="w-full rounded-xl bg-slate-900/50 px-4 py-3 text-sm text-slate-200 ring-1 ring-slate-700 placeholder:text-slate-600 focus:outline-none focus:ring-2 focus:ring-accent-500/50" placeholder="Je bedrijfsnaam" />
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label for="budget" class="block text-sm font-medium text-slate-300 mb-2">Budget indicatie</label>
|
|
<select id="budget" name="budget" class="w-full rounded-xl bg-slate-900/50 px-4 py-3 text-sm text-slate-200 ring-1 ring-slate-700 focus:outline-none focus:ring-2 focus:ring-accent-500/50">
|
|
<option value="">Selecteer een range</option>
|
|
<option value="<2500">Minder dan €2.500</option>
|
|
<option value="2500-5000">€2.500 - €5.000</option>
|
|
<option value="5000-10000">€5.000 - €10.000</option>
|
|
<option value=">10000">Meer dan €10.000</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label for="message" class="block text-sm font-medium text-slate-300 mb-2">Bericht *</label>
|
|
<textarea id="message" name="message" rows="5" required class="w-full rounded-xl bg-slate-900/50 px-4 py-3 text-sm text-slate-200 ring-1 ring-slate-700 placeholder:text-slate-600 focus:outline-none focus:ring-2 focus:ring-accent-500/50 resize-none" placeholder="Vertel ons over je project, wensen en doelen..."></textarea>
|
|
</div>
|
|
<button type="submit" class="group w-full inline-flex items-center justify-center gap-2 rounded-xl bg-accent-500 px-8 py-3.5 text-base font-semibold text-slate-950 transition-all hover:bg-accent-400 hover:shadow-xl hover:shadow-accent-500/25">
|
|
Verstuur bericht
|
|
<svg class="h-4 w-4 transition-transform group-hover:translate-x-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5" /></svg>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SIDEBAR -->
|
|
<div class="lg:col-span-2 space-y-8">
|
|
<div class="rounded-2xl glass-light p-8">
|
|
<h3 class="text-lg font-semibold text-slate-100 mb-6">Contactgegevens</h3>
|
|
<div class="space-y-5">
|
|
<div class="flex items-start gap-4">
|
|
<div class="mt-0.5 flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-accent-500/10 text-accent-400">
|
|
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" /></svg>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm font-medium text-slate-300">Email</p>
|
|
<a href="mailto:info@siteloft.nl" class="text-sm text-accent-400 hover:text-accent-300 transition-colors">info@siteloft.nl</a>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-start gap-4">
|
|
<div class="mt-0.5 flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-accent-500/10 text-accent-400">
|
|
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" /><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" /></svg>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm font-medium text-slate-300">Locatie</p>
|
|
<p class="text-sm text-slate-500">Nederland</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-start gap-4">
|
|
<div class="mt-0.5 flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-accent-500/10 text-accent-400">
|
|
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm font-medium text-slate-300">Bereikbaarheid</p>
|
|
<p class="text-sm text-slate-500">Ma - Vr, 09:00 - 17:00</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rounded-2xl glass-light p-8">
|
|
<h3 class="text-lg font-semibold text-slate-100 mb-6">Wat kun je verwachten?</h3>
|
|
<div class="space-y-4">
|
|
{[
|
|
{ step: '1', title: 'Reactie binnen 24 uur', desc: 'We lezen je bericht en reageren op werkdagen binnen 24 uur.' },
|
|
{ step: '2', title: 'Vrijblijvend gesprek', desc: 'We plannen een kort gesprek om je wensen en doelen te bespreken.' },
|
|
{ step: '3', title: 'Voorstel op maat', desc: 'Je ontvangt een duidelijk voorstel met scope, planning en kosten.' },
|
|
{ step: '4', title: 'Start van je project', desc: 'Na akkoord starten we direct. Je bent altijd betrokken bij het proces.' },
|
|
].map(item => (
|
|
<div class="flex items-start gap-3">
|
|
<div class="mt-1 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-accent-500/20 text-accent-400 text-xs font-bold">{item.step}</div>
|
|
<div>
|
|
<p class="text-sm font-medium text-slate-300">{item.title}</p>
|
|
<p class="text-xs text-slate-500">{item.desc}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</Layout>
|