clive
+103
-58
@@ -1,75 +1,120 @@
|
||||
@model clivelancaster.Models.ContactFormModel
|
||||
@{
|
||||
ViewData["Title"] = "Contact";
|
||||
Layout = "~/Views/Shared/_Layout.cshtml";
|
||||
Layout = "~/Views/Shared/_PageLayout.cshtml";
|
||||
}
|
||||
|
||||
<div class="container py-4">
|
||||
<header class="pb-3 mb-4 border-bottom">
|
||||
<span class="fs-4"><i class="bi bi-envelope-fill"></i> @ViewData["Title"]</span>
|
||||
</header>
|
||||
<div class="p-5 mb-4 bg-body-tertiary rounded-3 border">
|
||||
<div class="container-fluid py-5">
|
||||
<h2>Contact</h2>
|
||||
<partial name="_PartialPageNavigation" />
|
||||
|
||||
@if (ViewBag.Message != null)
|
||||
<header class="pt-32 pb-12 bg-slate-50 text-center px-6">
|
||||
<h1 class="text-4xl md:text-5xl font-bold text-slate-900 mb-4">Let's Start a Conversation</h1>
|
||||
<p class="text-lg text-slate-600 max-w-2xl mx-auto">Whether you have a product idea to validate or need expert consulting for your enterprise, I'm here to help.</p>
|
||||
</header>
|
||||
|
||||
<main class="flex-grow max-w-7xl mx-auto px-6 py-12 w-full">
|
||||
<div class="grid lg:grid-cols-2 gap-16">
|
||||
|
||||
<div>
|
||||
<div class="mb-10">
|
||||
<h2 class="text-2xl font-bold text-slate-900 mb-6">Get in Touch</h2>
|
||||
<p class="text-slate-600 mb-8 leading-relaxed">
|
||||
I am currently accepting new roles and consulting opportunities. Please fill out the form, and I will get back to you within 24 hours.
|
||||
</p>
|
||||
|
||||
<div class="space-y-6">
|
||||
<div class="flex items-start">
|
||||
<div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center text-blue-600 text-xl mr-4 flex-shrink-0">
|
||||
<a href="/img/CV_Clive_Lancaster.pdf" target="_blank"><i class="fas fa-download"></i></a>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-bold text-slate-900">Download</h3>
|
||||
<p class="text-slate-600">CV availble for <a href="/img/CV_Clive_Lancaster.pdf" target="_blank"><u>download</u></a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start">
|
||||
<div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center text-blue-600 text-xl mr-4 flex-shrink-0">
|
||||
<i class="fas fa-map-marker-alt"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-bold text-slate-900">Location</h3>
|
||||
<p class="text-slate-600">Based in Sydney, Australia.<br>Available for remote work globally.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border-t border-slate-200 pt-8">
|
||||
<h3 class="font-bold text-slate-900 mb-4">Frequently Asked Questions</h3>
|
||||
<div class="space-y-4">
|
||||
<details class="group bg-slate-50 p-4 rounded-lg cursor-pointer">
|
||||
<summary class="flex justify-between items-center font-medium list-none text-slate-800">
|
||||
<span>Are you actively searching for a new role?</span>
|
||||
<span class="transition group-open:rotate-180"><i class="fas fa-chevron-down text-sm"></i></span>
|
||||
</summary>
|
||||
<p class="text-slate-600 text-sm mt-3 leading-relaxed">Yes, I am always open to opportunities where I can add meaningful value and make a positive impact.</p>
|
||||
</details>
|
||||
<details class="group bg-slate-50 p-4 rounded-lg cursor-pointer">
|
||||
<summary class="flex justify-between items-center font-medium list-none text-slate-800">
|
||||
<span>Do you have a preference for full-time permanent or contract roles?</span>
|
||||
<span class="transition group-open:rotate-180"><i class="fas fa-chevron-down text-sm"></i></span>
|
||||
</summary>
|
||||
<p class="text-slate-600 text-sm mt-3 leading-relaxed">Permanent roles are preferred, though I am open to contract opportunities.</p>
|
||||
</details>
|
||||
<details class="group bg-slate-50 p-4 rounded-lg cursor-pointer">
|
||||
<summary class="flex justify-between items-center font-medium list-none text-slate-800">
|
||||
<span>Do you have full working rights in Australia or UK?</span>
|
||||
<span class="transition group-open:rotate-180"><i class="fas fa-chevron-down text-sm"></i></span>
|
||||
</summary>
|
||||
<p class="text-slate-600 text-sm mt-3 leading-relaxed">Yes, I have full working rights in Australia & UK.</p>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-8 rounded-2xl shadow-xl border border-slate-100">
|
||||
@if (@ViewBag.Message != null)
|
||||
{
|
||||
<div class="alert alert-info">@ViewBag.Message</div>
|
||||
}
|
||||
|
||||
<form asp-action="Index" method="post">
|
||||
<div class="form-group">
|
||||
<label asp-for="Name" class="incognito-field"></label>
|
||||
<input asp-for="Name" class="form-control incognito-field" autocomplete="off" tabindex="-1" />
|
||||
<label asp-for="NameIncognito"></label>
|
||||
<input asp-for="NameIncognito" class="form-control" />
|
||||
<h2 class="text-2xl font-bold text-blue-600">Thank you for getting in touch!</h2>
|
||||
<p class="text-slate-600 mb-8 leading-relaxed">We’ve received your message and will get back to you as soon as possible.</p>
|
||||
<a href="/Home" class="px-8 py-4 bg-white text-slate-700 border border-slate-200 font-semibold rounded-lg hover:bg-slate-50 transition text-center">Back to Home<i class="fas fa-home ml-2"></i></a>
|
||||
}
|
||||
else {
|
||||
<form asp-action="Index" method="post" id="contactForm" class="space-y-6">
|
||||
<div class="grid md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label asp-for="Name" class="incognito-field"></label>
|
||||
<input asp-for="Name" class="form-control incognito-field" autocomplete="off" tabindex="-1" />
|
||||
<label asp-for="NameIncognito" class="block text-sm font-semibold text-slate-700 mb-2"></label>
|
||||
<input asp-for="NameIncognito" class="w-full px-4 py-3 rounded-lg border border-slate-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 outline-none transition" placeholder="John Doe" />
|
||||
</div>
|
||||
<div>
|
||||
<label asp-for="Email" class="block text-sm font-semibold text-slate-700 mb-2"></label>
|
||||
<input asp-for="Email" class="w-full px-4 py-3 rounded-lg border border-slate-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 outline-none transition" placeholder="[email protected]" />
|
||||
<span asp-validation-for="Email" class="text-danger"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label asp-for="Email"></label>
|
||||
<input asp-for="Email" class="form-control" />
|
||||
<span asp-validation-for="Email" class="text-danger"></span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div>
|
||||
<label asp-for="Subject" class="incognito-field"></label>
|
||||
<input asp-for="Subject" class="form-control incognito-field" autocomplete="off" tabindex="-1" />
|
||||
<label asp-for="SubjectIncognito"></label>
|
||||
<input asp-for="SubjectIncognito" class="form-control" />
|
||||
<label asp-for="SubjectIncognito" class="block text-sm font-semibold text-slate-700 mb-2"></label>
|
||||
<select asp-for="SubjectIncognito" class="w-full px-4 py-3 rounded-lg border border-slate-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 outline-none transition bg-white">
|
||||
<option>General Inquiry</option>
|
||||
<option>Job Opportunity</option>
|
||||
<option>Software Development</option>
|
||||
<option>Product Strategy Consulting</option>
|
||||
<option>Speaking Opportunity</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div>
|
||||
<label asp-for="Message" class="incognito-field"></label>
|
||||
<textarea asp-for="Message" class="form-control incognito-field" autocomplete="off" tabindex="-1"></textarea>
|
||||
<label asp-for="MessageIncognito"></label>
|
||||
<textarea asp-for="MessageIncognito" class="form-control"></textarea>
|
||||
<label asp-for="MessageIncognito" for="message" class="block text-sm font-semibold text-slate-700 mb-2"></label>
|
||||
<textarea asp-for="MessageIncognito" rows="5" class="w-full px-4 py-3 rounded-lg border border-slate-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 outline-none transition" placeholder="Tell me a bit about your project..."></textarea>
|
||||
</div>
|
||||
<div class="p-2"></div>
|
||||
<button type="submit" class="btn btn-primary">Send Message</button>
|
||||
<button type="submit" class="w-full bg-blue-600 text-white font-bold py-4 rounded-lg hover:bg-blue-700 transition shadow-lg transform active:scale-95 flex items-center justify-center">Send Message<i class="fas fa-paper-plane ml-2"></i></button>
|
||||
</form>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row align-items-md-stretch">
|
||||
<div class="col-md-6">
|
||||
<div class="h-100 p-5 text-bg-dark rounded-3">
|
||||
<h2>Phone</h2>
|
||||
<i class="bi bi-telephone-fill"></i>
|
||||
<p><a href="tel:0401089305" style="color:#fff;">0401089305</a></p>
|
||||
<h2>Email</h2>
|
||||
<i class="bi bi-envelope-at-fill"></i>
|
||||
<p><a href="mailto:[email protected]" style="color:#fff;">[email protected]</a></p>
|
||||
<h2>Telegram</h2>
|
||||
<i class="bi bi-telegram"></i>
|
||||
<p><a href="https://t.me/clivelancaster" style="color:#fff;">https://t.me/clivelancaster</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="h-100 p-5 bg-body-tertiary border rounded-3">
|
||||
<h2>Location</h2>
|
||||
<i class="bi bi-geo-alt-fill"></i>
|
||||
<p>Sydney Australia</p>
|
||||
<h2>Social</h2>
|
||||
<i class="bi bi-linkedin"></i>
|
||||
<p><a href="https://www.linkedin.com/in/clivelancaster/" style="color:#5a5a5a;">https://www.linkedin.com/in/clivelancaster/</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
Reference in New Issue
Block a user