87 lines
2.6 KiB
Svelte
87 lines
2.6 KiB
Svelte
<script lang="ts">
|
|
let formData = {
|
|
name: '',
|
|
email: '',
|
|
company: '',
|
|
message: ''
|
|
};
|
|
|
|
function handleSubmit() {
|
|
// Form submission would be handled here
|
|
console.log('Form submitted:', formData);
|
|
}
|
|
</script>
|
|
|
|
<section class="py-20 bg-surface">
|
|
<div class="container mx-auto px-4">
|
|
<div class="max-w-2xl mx-auto">
|
|
<h2 class="text-3xl md:text-4xl font-heading font-bold text-center text-primary mb-8">
|
|
Get in Touch
|
|
</h2>
|
|
<p class="text-lg text-text/80 text-center mb-12">
|
|
Ready to transform your business with expert Microsoft 365 support?
|
|
Fill out the form below and we'll get back to you within 24 hours.
|
|
</p>
|
|
|
|
<form on:submit|preventDefault={handleSubmit} class="space-y-6">
|
|
<div>
|
|
<label for="name" class="block text-sm font-medium text-text mb-2">
|
|
Name
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="name"
|
|
bind:value={formData.name}
|
|
class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-transparent"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="email" class="block text-sm font-medium text-text mb-2">
|
|
Email
|
|
</label>
|
|
<input
|
|
type="email"
|
|
id="email"
|
|
bind:value={formData.email}
|
|
class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-transparent"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="company" class="block text-sm font-medium text-text mb-2">
|
|
Company
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="company"
|
|
bind:value={formData.company}
|
|
class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-transparent"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="message" class="block text-sm font-medium text-text mb-2">
|
|
Message
|
|
</label>
|
|
<textarea
|
|
id="message"
|
|
bind:value={formData.message}
|
|
rows="4"
|
|
class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-transparent"
|
|
required
|
|
></textarea>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
class="w-full bg-primary hover:bg-link-hover text-white px-8 py-4 rounded-lg text-lg font-semibold transition-colors duration-200"
|
|
>
|
|
Send Message
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</section> |