85 lines
3.8 KiB
HTML
85 lines
3.8 KiB
HTML
{% extends "base.html" %}
|
||
{% block title %}Contact — {{ brand }}{% endblock %}
|
||
{% block content %}
|
||
<section class="max-w-7xl mx-auto px-6 py-16">
|
||
{% with msgs = get_flashed_messages(with_categories=true) %}
|
||
{% if msgs %}
|
||
{% for cat,msg in msgs %}
|
||
<div class="mb-4 rounded border p-3 {{ 'border-red-700 bg-red-900/40 text-red-200' if cat=='error' else 'border-emerald-700 bg-emerald-900/30 text-emerald-100' }}">{{ msg }}</div>
|
||
{% endfor %}
|
||
{% endif %}
|
||
{% endwith %}
|
||
|
||
<div class="grid lg:grid-cols-2 gap-8">
|
||
<!-- Direct Contact Card -->
|
||
<div class="rounded-2xl bg-bh.card/70 border border-bh.ring p-6">
|
||
<h1 class="text-3xl font-bold">Get in touch</h1>
|
||
<p class="mt-2 text-white/75">Prefer email or a quick call? Reach me directly.</p>
|
||
|
||
<div class="mt-5 rounded-xl bg-white/5 border border-white/10 p-4">
|
||
<div class="text-xl font-semibold">{{ CONTACT.name }}</div>
|
||
<div class="text-white/70">{{ CONTACT.title }}</div>
|
||
<div class="mt-3 grid gap-2 text-sm">
|
||
<div class="flex items-center gap-2">
|
||
<span class="opacity-70">Email:</span>
|
||
<a id="emailLink" href="mailto:{{ CONTACT.email }}" class="underline">{{ CONTACT.email }}</a>
|
||
<button class="ml-2 px-2 py-0.5 rounded bg-bh-accent/20 hover:bg-bh-accent/30 text-bh-accent text-xs" onclick="copyTxt('{{ CONTACT.email }}')">Copy</button>
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<span class="opacity-70">Phone:</span>
|
||
<a id="phoneLink" href="tel:{{ CONTACT.phone|replace(' ', '') }}" class="underline">{{ CONTACT.phone }}</a>
|
||
<button class="ml-2 px-2 py-0.5 rounded bg-bh-accent/20 hover:bg-bh-accent/30 text-bh-accent text-xs" onclick="copyTxt('{{ CONTACT.phone }}')">Copy</button>
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<span class="opacity-70">Hours:</span>
|
||
<span>{{ CONTACT.hours }}</span>
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<span class="opacity-70">Location:</span>
|
||
<span>{{ CONTACT.city }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-4 flex flex-wrap gap-2">
|
||
{% if CONTACT.cal %}
|
||
<a href="{{ CONTACT.cal }}" target="_blank" class="inline-flex items-center rounded-lg bg-bh-accent/90 hover:bg-bh-accent text-black px-4 py-2 font-semibold shadow-glow">Book a call</a>
|
||
{% endif %}
|
||
{% if CONTACT.link %}
|
||
<a href="{{ CONTACT.link }}" target="_blank" class="inline-flex items-center rounded-lg border border-bh.ring hover:border-bh-accent/60 px-4 py-2">LinkedIn</a>
|
||
{% endif %}
|
||
<a href="{{ url_for('contact_vcf') }}" class="inline-flex items-center rounded-lg border border-bh.ring hover:border-bh-accent/60 px-4 py-2">Download vCard</a>
|
||
</div>
|
||
|
||
<!-- New “Get a Quote” button -->
|
||
<div class="mt-5">
|
||
<a href="https://netdeploy.net"
|
||
target="_blank"
|
||
class="inline-flex items-center justify-center rounded-lg w-full bg-bh-accent/90 hover:bg-bh-accent text-black font-semibold py-3 shadow-glow transition-all duration-200">
|
||
Get a Quote
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<p class="mt-6 text-white/70 text-sm">Or use the form — we’ll reply with a short plan and timeline.</p>
|
||
</div>
|
||
|
||
<!-- Inquiry Form (Link to netdeploy.net) -->
|
||
</div>
|
||
</section>
|
||
|
||
{% block scripts %}
|
||
<script>
|
||
function copyTxt(txt){
|
||
navigator.clipboard.writeText(txt).then(()=> {
|
||
const el = document.createElement('div');
|
||
el.textContent = 'Copied!';
|
||
el.className = 'fixed bottom-4 right-4 px-3 py-2 rounded bg-bh-accent text-black text-sm shadow-glow';
|
||
document.body.appendChild(el);
|
||
setTimeout(()=> el.remove(), 900);
|
||
});
|
||
}
|
||
</script>
|
||
{% endblock %}
|
||
{% endblock %}
|
||
|