100 lines
6.1 KiB
Plaintext
100 lines
6.1 KiB
Plaintext
@page
|
|
@model ContactModel
|
|
@{
|
|
ViewData["Title"] = "Contact";
|
|
}
|
|
|
|
<!-- Hero Section -->
|
|
<section class="relative overflow-hidden pt-16 pb-16 lg:pt-24 lg:pb-20 bg-gradient-to-b from-white via-slate-50 to-brand-light/30">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
|
<div class="max-w-3xl mx-auto space-y-4 text-center">
|
|
<span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-brand-light text-brand text-xs font-bold uppercase tracking-wider">
|
|
<i class="fa-solid fa-circle-nodes"></i> Get in Touch
|
|
</span>
|
|
<h1 class="text-4xl sm:text-5xl font-extrabold text-slate-900 tracking-tight leading-tight">
|
|
Contact <span class="text-[#1c8098]">Plus Health Tech</span>
|
|
</h1>
|
|
<p class="text-lg text-slate-600">
|
|
Questions about interoperability, product fit, or a live demo — send us a note and we'll get back to you.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Contact Form -->
|
|
<section class="pb-24 bg-slate-50">
|
|
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
@if (Model.Error != null)
|
|
{
|
|
<div class="mb-6 p-4 rounded-xl bg-red-50 border border-red-200 text-red-800 text-sm flex items-start gap-3">
|
|
<i class="fa-solid fa-circle-exclamation mt-0.5"></i>
|
|
<span>@Model.Error</span>
|
|
</div>
|
|
}
|
|
|
|
@if (Model.Success != null)
|
|
{
|
|
<div class="bg-white p-8 rounded-2xl border border-emerald-200 shadow-sm text-center space-y-4">
|
|
<div class="w-14 h-14 mx-auto rounded-full bg-emerald-100 text-emerald-600 flex items-center justify-center text-xl">
|
|
<i class="fa-solid fa-check"></i>
|
|
</div>
|
|
<h2 class="text-xl font-bold text-slate-900">Message sent</h2>
|
|
<p class="text-slate-600">@Model.Success</p>
|
|
<a href="/" class="inline-flex items-center gap-1 text-brand font-semibold text-sm hover:underline">
|
|
<i class="fa-solid fa-arrow-left text-xs"></i> Back to home
|
|
</a>
|
|
</div>
|
|
}
|
|
else
|
|
{
|
|
<div class="bg-white p-8 rounded-2xl border border-slate-100 shadow-sm">
|
|
<form asp-page="/Contact" method="post">
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
|
|
<div>
|
|
<label asp-for="Name" class="block text-sm font-semibold text-slate-700 mb-1.5">Name *</label>
|
|
<input asp-for="Name" class="w-full px-4 py-3 rounded-xl border border-slate-200 bg-white text-sm text-slate-800 placeholder:text-slate-400 focus:outline-none focus:border-brand focus:ring-2 focus:ring-brand/20" placeholder="Dr. Jane Smith" />
|
|
<span asp-validation-for="Name" class="mt-1 block text-xs text-red-600"></span>
|
|
</div>
|
|
<div>
|
|
<label asp-for="Email" class="block text-sm font-semibold text-slate-700 mb-1.5">Work email *</label>
|
|
<input asp-for="Email" type="email" class="w-full px-4 py-3 rounded-xl border border-slate-200 bg-white text-sm text-slate-800 placeholder:text-slate-400 focus:outline-none focus:border-brand focus:ring-2 focus:ring-brand/20" placeholder="[email protected]" />
|
|
<span asp-validation-for="Email" class="mt-1 block text-xs text-red-600"></span>
|
|
</div>
|
|
<div>
|
|
<label asp-for="Organization" class="block text-sm font-semibold text-slate-700 mb-1.5">Organization</label>
|
|
<input asp-for="Organization" class="w-full px-4 py-3 rounded-xl border border-slate-200 bg-white text-sm text-slate-800 placeholder:text-slate-400 focus:outline-none focus:border-brand focus:ring-2 focus:ring-brand/20" placeholder="Acme Health" />
|
|
<span asp-validation-for="Organization" class="mt-1 block text-xs text-red-600"></span>
|
|
</div>
|
|
<div>
|
|
<label asp-for="Phone" class="block text-sm font-semibold text-slate-700 mb-1.5">Phone</label>
|
|
<input asp-for="Phone" type="tel" class="w-full px-4 py-3 rounded-xl border border-slate-200 bg-white text-sm text-slate-800 placeholder:text-slate-400 focus:outline-none focus:border-brand focus:ring-2 focus:ring-brand/20" placeholder="+1 555 0100" />
|
|
<span asp-validation-for="Phone" class="mt-1 block text-xs text-red-600"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-5">
|
|
<label asp-for="Message" class="block text-sm font-semibold text-slate-700 mb-1.5">Message *</label>
|
|
<textarea asp-for="Message" rows="6" class="w-full px-4 py-3 rounded-xl border border-slate-200 bg-white text-sm text-slate-800 placeholder:text-slate-400 focus:outline-none focus:border-brand focus:ring-2 focus:ring-brand/20" placeholder="Tell us what you're trying to solve…"></textarea>
|
|
<span asp-validation-for="Message" class="mt-1 block text-xs text-red-600"></span>
|
|
</div>
|
|
|
|
<div class="mt-6 flex flex-col sm:flex-row items-center gap-4">
|
|
<button type="submit" class="w-full sm:w-auto bg-[#1c8098] hover:bg-[#145f72] text-white font-semibold px-8 py-3.5 rounded-xl shadow-sm shadow-brand/20 transition-all">
|
|
Send message <i class="fa-solid fa-arrow-right ml-2"></i>
|
|
</button>
|
|
<p class="text-xs text-slate-500 flex items-center gap-2">
|
|
<i class="fa-solid fa-shield-halved text-brand"></i>
|
|
We reply to the email address you provide — nothing else is stored.
|
|
</p>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
}
|
|
</div>
|
|
</section>
|
|
|
|
@section Scripts {
|
|
<partial name="_ValidationScriptsPartial" />
|
|
}
|