121 lines
6.6 KiB
PHP
121 lines
6.6 KiB
PHP
<div style="min-height:75vh; background-color:var(--background-primary); display:flex; flex-direction:column; padding-left:1.5rem; padding-right:1.5rem;">
|
|
|
|
<div style="margin:0 auto; padding-top:0.5rem; padding-bottom:2rem; border-bottom:1px solid var(--border-color); text-align:center;">
|
|
<h2 style="font-size:2rem; font-weight:700; margin-bottom:0.5rem; color:var(--text-primary);">
|
|
Contact Us
|
|
</h2>
|
|
<div style="font-size:1rem; color:var(--text-secondary);">
|
|
Get in touch with our team. We're here to help!
|
|
</div>
|
|
</div>
|
|
|
|
<div style="flex:1; width:100%; margin:0 auto; padding-left:1rem; padding-right:1rem;">
|
|
|
|
|
|
@if($sent)
|
|
<div class="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-6 mb-6">
|
|
<div class="flex items-center">
|
|
<svg class="w-6 h-6 text-green-600 dark:text-green-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
|
</svg>
|
|
<div>
|
|
<h3 style="font-weight:600; color:var(--text-primary); margin-bottom:0.25rem;">Message Sent Successfully!</h3>
|
|
<p style="color:var(--text-secondary); font-size:0.875rem;">Thank you for contacting us. We will get back to you soon.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@else
|
|
<form wire:submit="submit" class="space-y-6">
|
|
<div class="bg-background-secondary dark:bg-background-secondary/80 border border-neutral rounded-lg p-6 shadow-md">
|
|
|
|
<div class="mb-4">
|
|
<label for="name" class="block text-sm font-medium text-text-primary mb-2">
|
|
Full Name (First Name, Surname)<span class="text-red-500">*</span>
|
|
</label>
|
|
<input type="text"
|
|
id="name"
|
|
wire:model="name"
|
|
class="w-full px-4 py-3 rounded-md border border-neutral bg-background-primary text-text-primary focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
|
|
placeholder="Enter your full name">
|
|
@error('name') <span class="text-red-500 text-sm mt-1">{{ $message }}</span> @enderror
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label for="email" class="block text-sm font-medium text-text-primary mb-2">
|
|
Email Address (Primary Contact Email)<span class="text-red-500">*</span>
|
|
</label>
|
|
<input type="email"
|
|
id="email"
|
|
wire:model="email"
|
|
class="w-full px-4 py-3 rounded-md border border-neutral bg-background-primary text-text-primary focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
|
|
placeholder="Enter your email address">
|
|
@error('email') <span class="text-red-500 text-sm mt-1">{{ $message }}</span> @enderror
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label for="subject" class="block text-sm font-medium text-text-primary mb-2">
|
|
Subject
|
|
</label>
|
|
<input type="text"
|
|
id="subject"
|
|
wire:model="subject"
|
|
class="w-full px-4 py-3 rounded-md border border-neutral bg-background-primary text-text-primary focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
|
|
placeholder="Brief description of your inquiry">
|
|
@error('subject') <span class="text-red-500 text-sm mt-1">{{ $message }}</span> @enderror
|
|
</div>
|
|
|
|
<div class="mb-6">
|
|
<label for="message" class="block text-sm font-medium text-text-primary mb-2">
|
|
Message <span class="text-red-500">*</span>
|
|
</label>
|
|
<textarea id="message"
|
|
wire:model="message"
|
|
rows="6"
|
|
class="w-full px-4 py-3 rounded-md border border-neutral bg-background-primary text-text-primary focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent resize-vertical"
|
|
placeholder="Please provide details about your inquiry..."></textarea>
|
|
@error('message') <span class="text-red-500 text-sm mt-1">{{ $message }}</span> @enderror
|
|
</div>
|
|
|
|
<!-- Captcha Left, Submit Button Right -->
|
|
<div class="flex justify-between items-center flex-wrap gap-4 mt-6">
|
|
<div class="flex-shrink-0">
|
|
<x-captcha :form="'contact'" />
|
|
</div>
|
|
|
|
<button type="submit"
|
|
wire:loading.attr="disabled"
|
|
class="bg-primary text-white px-6 py-3 rounded-md font-semibold hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors w-[160px]">
|
|
<span wire:loading.remove>Send Message</span>
|
|
<span wire:loading class="flex items-center">
|
|
<svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
Sending...
|
|
</span>
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
</form>
|
|
@endif
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
@push('styles')
|
|
<style>
|
|
@media (max-width: 768px) {
|
|
div[style*="padding-left:1.5rem; padding-right:1.5rem;"] {
|
|
padding-left: 1rem !important;
|
|
padding-right: 1rem !important;
|
|
}
|
|
|
|
div[style*="max-width:600px;"] {
|
|
max-width: 100% !important;
|
|
}
|
|
}
|
|
</style>
|
|
@endpush |