123 lines
8.2 KiB
Plaintext
123 lines
8.2 KiB
Plaintext
@page
|
|
@model RequestDemoModel
|
|
@{
|
|
ViewData["Title"] = "Request Demo";
|
|
}
|
|
|
|
<!-- 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> See It In Action
|
|
</span>
|
|
<h1 class="text-4xl sm:text-5xl font-extrabold text-slate-900 tracking-tight leading-tight">
|
|
Request a <span class="text-[#1c8098]">Live Demo</span>
|
|
</h1>
|
|
<p class="text-lg text-slate-600">
|
|
See how interoperable Clinical Decision Support, Patient Management, and Veterinary platforms fit your practice — in a walkthrough tailored to your team.
|
|
</p>
|
|
<div class="flex flex-wrap items-center justify-center gap-x-6 gap-y-2 pt-2 text-sm text-slate-600 font-medium">
|
|
<span class="inline-flex items-center gap-2"><i class="fa-solid fa-circle-check text-brand"></i> FHIR®-ready interoperability</span>
|
|
<span class="inline-flex items-center gap-2"><i class="fa-solid fa-circle-check text-brand"></i> 24/7 clinical support</span>
|
|
<span class="inline-flex items-center gap-2"><i class="fa-solid fa-circle-check text-brand"></i> 99.9% system uptime</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Request Demo 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">Demo request sent</h2>
|
|
<p class="text-slate-600">@Model.Success</p>
|
|
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 pt-2">
|
|
<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>
|
|
<a href="/Contact" class="inline-flex items-center gap-1 text-slate-600 font-semibold text-sm hover:text-brand hover:underline">
|
|
Prefer to talk? Visit the Contact page <i class="fa-solid fa-arrow-right text-xs"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
}
|
|
else
|
|
{
|
|
<div class="bg-white p-8 rounded-2xl border border-slate-100 shadow-sm">
|
|
<form asp-page="/RequestDemo" 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">Full 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="PracticeType" class="block text-sm font-semibold text-slate-700 mb-1.5">Practice type</label>
|
|
<select asp-for="PracticeType" asp-items="Model.PracticeTypeOptions" class="w-full px-4 py-3 rounded-xl border border-slate-200 bg-white text-sm text-slate-800 focus:outline-none focus:border-brand focus:ring-2 focus:ring-brand/20"></select>
|
|
<span asp-validation-for="PracticeType" class="mt-1 block text-xs text-red-600"></span>
|
|
</div>
|
|
<div>
|
|
<label asp-for="ProductsOfInterest" class="block text-sm font-semibold text-slate-700 mb-1.5">Products of interest</label>
|
|
<select asp-for="ProductsOfInterest" asp-items="Model.ProductsOfInterestOptions" class="w-full px-4 py-3 rounded-xl border border-slate-200 bg-white text-sm text-slate-800 focus:outline-none focus:border-brand focus:ring-2 focus:ring-brand/20"></select>
|
|
<span asp-validation-for="ProductsOfInterest" 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">Anything you'd like us to know?</label>
|
|
<textarea asp-for="Message" rows="5" 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 about your setup, go-live timeline, or anything you'd like to see…"></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">
|
|
Request demo <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'll only use your details to schedule your demo.
|
|
</p>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
}
|
|
|
|
<!-- Secondary CTA -->
|
|
<div class="mt-8 text-center">
|
|
<p class="text-sm text-slate-500">
|
|
Prefer to talk?
|
|
<a href="/Contact" class="text-brand font-semibold hover:underline">Visit the Contact page</a>
|
|
<i class="fa-solid fa-arrow-right text-xs inline-block"></i>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
@section Scripts {
|
|
<partial name="_ValidationScriptsPartial" />
|
|
}
|