Enhance application structure: Add runtime configuration for environment variables, integrate new dependencies for Cloudinary and UI components, and refactor member management features including improved forms and member dashboard. Update styles and layout for better user experience.
This commit is contained in:
parent
6e7e27ac4e
commit
e4a0a9ab0f
61 changed files with 7902 additions and 950 deletions
322
app/pages/contact.vue
Normal file
322
app/pages/contact.vue
Normal file
|
|
@ -0,0 +1,322 @@
|
|||
<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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue