322 lines
No EOL
12 KiB
Vue
322 lines
No EOL
12 KiB
Vue
<template>
|
|
<div>
|
|
<!-- Page Header -->
|
|
<PageHeader
|
|
title="Contact"
|
|
subtitle="Get in touch with us. We're here to help and answer any questions you might have about Ghost Guild."
|
|
theme="blue"
|
|
size="large"
|
|
/>
|
|
|
|
<!-- Contact Form -->
|
|
<section class="py-20 bg-white dark:bg-gray-900">
|
|
<UContainer class="max-w-4xl">
|
|
<div class="text-center mb-12">
|
|
<h2 class="text-3xl font-bold text-blue-600 dark:text-blue-400 mb-4">
|
|
Contact Form
|
|
</h2>
|
|
<p class="text-gray-600 dark:text-gray-300">
|
|
Send us a message and we'll get back to you as soon as possible
|
|
</p>
|
|
</div>
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-xl border border-blue-200 dark:border-blue-800">
|
|
<UForm :state="form" class="space-y-6" @submit="handleSubmit">
|
|
<!-- Name and Email Row -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<UFormField label="Your Name" name="name" required>
|
|
<UInput
|
|
v-model="form.name"
|
|
placeholder="Enter your full name"
|
|
size="xl"
|
|
class="w-full"
|
|
/>
|
|
</UFormField>
|
|
|
|
<UFormField label="Email Address" name="email" required>
|
|
<UInput
|
|
v-model="form.email"
|
|
type="email"
|
|
size="xl"
|
|
class="w-full"
|
|
placeholder="your.email@example.com"
|
|
/>
|
|
</UFormField>
|
|
</div>
|
|
|
|
<!-- Subject -->
|
|
<UFormField label="Subject" name="subject" required>
|
|
<USelect
|
|
v-model="form.subject"
|
|
:options="subjectOptions"
|
|
placeholder="Select a subject"
|
|
size="xl"
|
|
class="w-full"
|
|
/>
|
|
</UFormField>
|
|
|
|
<!-- Message -->
|
|
<UFormField label="Message" name="message" required>
|
|
<UTextarea
|
|
v-model="form.message"
|
|
placeholder="Tell us how we can help you..."
|
|
:rows="6"
|
|
size="xl"
|
|
class="w-full"
|
|
/>
|
|
</UFormField>
|
|
|
|
<!-- Additional Options -->
|
|
<div class="flex items-center gap-4 pt-2">
|
|
<UCheckbox
|
|
id="newsletter"
|
|
v-model="form.newsletter"
|
|
label="Subscribe to our newsletter"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Submit Button -->
|
|
<div class="flex justify-center pt-4">
|
|
<UButton
|
|
type="submit"
|
|
:loading="isSubmitting"
|
|
:disabled="!isFormValid"
|
|
size="xl"
|
|
class="px-12"
|
|
>
|
|
Send Message
|
|
</UButton>
|
|
</div>
|
|
</UForm>
|
|
|
|
<!-- Success/Error Messages -->
|
|
<div v-if="success" class="mt-6 p-4 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800">
|
|
<p class="text-green-700 dark:text-green-300 text-center">
|
|
✅ Thank you! Your message has been sent successfully. We'll get back to you soon.
|
|
</p>
|
|
</div>
|
|
|
|
<div v-if="error" class="mt-6 p-4 bg-red-50 dark:bg-red-900/20 rounded-lg border border-red-200 dark:border-red-800">
|
|
<p class="text-red-700 dark:text-red-300 text-center">
|
|
❌ {{ error }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</UContainer>
|
|
</section>
|
|
|
|
<!-- Support Information -->
|
|
<section class="py-20 bg-gray-50 dark:bg-gray-800">
|
|
<UContainer>
|
|
<div class="text-center mb-12">
|
|
<h2 class="text-3xl font-bold text-blue-600 dark:text-blue-400 mb-4">
|
|
Support
|
|
</h2>
|
|
<p class="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Here are various ways to get help and support.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
<!-- Help Center -->
|
|
<div class="bg-white dark:bg-gray-900 rounded-xl p-8 shadow-lg text-center">
|
|
<div class="w-16 h-16 bg-blue-100 dark:bg-blue-900/30 rounded-full flex items-center justify-center mx-auto mb-6">
|
|
<div class="w-8 h-8 bg-blue-500 rounded flex items-center justify-center">
|
|
<span class="text-white text-sm font-bold">?</span>
|
|
</div>
|
|
</div>
|
|
<h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">
|
|
Help Center
|
|
</h3>
|
|
<div class="space-y-2 mb-6">
|
|
<div class="h-1 bg-blue-500 rounded-full w-full" />
|
|
<div class="h-1 bg-blue-300 rounded-full w-4/5 mx-auto" />
|
|
<div class="h-1 bg-blue-200 rounded-full w-3/5 mx-auto" />
|
|
<div class="h-1 bg-blue-100 rounded-full w-2/5 mx-auto" />
|
|
</div>
|
|
<p class="text-gray-600 dark:text-gray-400 mb-6">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Browse our comprehensive help articles.
|
|
</p>
|
|
<UButton variant="outline" color="blue" size="sm">
|
|
Visit Help Center
|
|
</UButton>
|
|
</div>
|
|
|
|
<!-- Community Support -->
|
|
<div class="bg-white dark:bg-gray-900 rounded-xl p-8 shadow-lg text-center">
|
|
<div class="w-16 h-16 bg-emerald-100 dark:bg-emerald-900/30 rounded-full flex items-center justify-center mx-auto mb-6">
|
|
<div class="w-8 h-8 bg-emerald-500" style="clip-path: polygon(50% 0%, 0% 100%, 100% 100%)" />
|
|
</div>
|
|
<h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">
|
|
Community Support
|
|
</h3>
|
|
<div class="space-y-2 mb-6">
|
|
<div class="h-1 bg-emerald-500 rounded-full w-full" />
|
|
<div class="h-1 bg-emerald-300 rounded-full w-5/6 mx-auto" />
|
|
<div class="h-1 bg-emerald-200 rounded-full w-4/6 mx-auto" />
|
|
<div class="h-1 bg-emerald-100 rounded-full w-3/6 mx-auto" />
|
|
</div>
|
|
<p class="text-gray-600 dark:text-gray-400 mb-6">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Connect with other members in our community.
|
|
</p>
|
|
<UButton variant="outline" color="emerald" size="sm">
|
|
Join Discord
|
|
</UButton>
|
|
</div>
|
|
|
|
<!-- Direct Support -->
|
|
<div class="bg-white dark:bg-gray-900 rounded-xl p-8 shadow-lg text-center md:col-span-2 lg:col-span-1">
|
|
<div class="w-16 h-16 bg-purple-100 dark:bg-purple-900/30 rounded-full flex items-center justify-center mx-auto mb-6">
|
|
<div class="w-8 h-8 bg-purple-500 rounded-full flex items-center justify-center">
|
|
<span class="text-white text-xs">✉</span>
|
|
</div>
|
|
</div>
|
|
<h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">
|
|
Direct Support
|
|
</h3>
|
|
<div class="space-y-2 mb-6">
|
|
<div class="h-1 bg-purple-500 rounded-full w-full" />
|
|
<div class="h-1 bg-purple-300 rounded-full w-3/4 mx-auto" />
|
|
<div class="h-1 bg-purple-200 rounded-full w-5/6 mx-auto" />
|
|
<div class="h-1 bg-purple-100 rounded-full w-1/2 mx-auto" />
|
|
</div>
|
|
<p class="text-gray-600 dark:text-gray-400 mb-6">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Get personalized help from our team.
|
|
</p>
|
|
<UButton variant="outline" color="purple" size="sm">
|
|
Email Us
|
|
</UButton>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Contact Info -->
|
|
<div class="mt-16 grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
|
|
<div>
|
|
<h4 class="font-semibold text-gray-900 dark:text-white mb-2">Email</h4>
|
|
<p class="text-gray-600 dark:text-gray-400">hello@ghostguild.org</p>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-semibold text-gray-900 dark:text-white mb-2">Response Time</h4>
|
|
<p class="text-gray-600 dark:text-gray-400">Usually within 24 hours</p>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-semibold text-gray-900 dark:text-white mb-2">Best For</h4>
|
|
<p class="text-gray-600 dark:text-gray-400">General inquiries & support</p>
|
|
</div>
|
|
</div>
|
|
</UContainer>
|
|
</section>
|
|
|
|
<!-- Send Message CTA -->
|
|
<section class="py-20 bg-blue-50 dark:bg-blue-900/20">
|
|
<UContainer>
|
|
<div class="text-center max-w-3xl mx-auto">
|
|
<h2 class="text-3xl font-bold text-blue-600 dark:text-blue-400 mb-8">
|
|
Send Message
|
|
</h2>
|
|
|
|
<div class="space-y-6 mb-8">
|
|
<div class="flex justify-center">
|
|
<div class="h-2 bg-blue-500 rounded-full w-64" />
|
|
</div>
|
|
<div class="flex justify-center">
|
|
<div class="h-2 bg-blue-300 rounded-full w-48" />
|
|
</div>
|
|
<div class="flex justify-center">
|
|
<div class="h-2 bg-blue-500 rounded-full w-32" />
|
|
</div>
|
|
</div>
|
|
|
|
<p class="text-lg text-gray-600 dark:text-gray-300 mb-8">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ready to get in touch? We're here to help.
|
|
</p>
|
|
|
|
<UButton
|
|
@click="scrollToForm"
|
|
size="xl"
|
|
color="primary"
|
|
class="px-12 py-4"
|
|
>
|
|
Contact Us Now
|
|
</UButton>
|
|
</div>
|
|
</UContainer>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive, ref, computed } from 'vue'
|
|
|
|
// Form state
|
|
const form = reactive({
|
|
name: '',
|
|
email: '',
|
|
subject: '',
|
|
message: '',
|
|
newsletter: false
|
|
})
|
|
|
|
// UI state
|
|
const isSubmitting = ref(false)
|
|
const error = ref('')
|
|
const success = ref(false)
|
|
|
|
// Subject options
|
|
const subjectOptions = [
|
|
{ label: 'General Inquiry', value: 'general' },
|
|
{ label: 'Membership Questions', value: 'membership' },
|
|
{ label: 'Technical Support', value: 'technical' },
|
|
{ label: 'Partnership Opportunities', value: 'partnership' },
|
|
{ label: 'Press & Media', value: 'media' },
|
|
{ label: 'Other', value: 'other' }
|
|
]
|
|
|
|
// Form validation
|
|
const isFormValid = computed(() => {
|
|
return form.name && form.email && form.subject && form.message && form.message.length >= 10
|
|
})
|
|
|
|
// Form submission
|
|
const handleSubmit = async () => {
|
|
if (isSubmitting.value) return
|
|
|
|
isSubmitting.value = true
|
|
error.value = ''
|
|
success.value = false
|
|
|
|
try {
|
|
// Simulate API call
|
|
await new Promise(resolve => setTimeout(resolve, 1500))
|
|
|
|
// For now, just show success message
|
|
success.value = true
|
|
|
|
// Reset form after success
|
|
setTimeout(() => {
|
|
Object.assign(form, {
|
|
name: '',
|
|
email: '',
|
|
subject: '',
|
|
message: '',
|
|
newsletter: false
|
|
})
|
|
success.value = false
|
|
}, 5000)
|
|
|
|
} catch (err) {
|
|
console.error('Contact form error:', err)
|
|
error.value = 'Sorry, there was an error sending your message. Please try again or contact us directly at hello@ghostguild.org.'
|
|
} finally {
|
|
isSubmitting.value = false
|
|
}
|
|
}
|
|
|
|
// Scroll to form function
|
|
const scrollToForm = () => {
|
|
const formSection = document.querySelector('form')
|
|
if (formSection) {
|
|
formSection.scrollIntoView({ behavior: 'smooth', block: 'center' })
|
|
}
|
|
}
|
|
</script> |