Adding features
This commit is contained in:
parent
600fef2b7c
commit
2b55ca4104
75 changed files with 9796 additions and 2759 deletions
|
|
@ -1,322 +1,204 @@
|
|||
<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"
|
||||
/>
|
||||
<div class="relative">
|
||||
<!-- Hero Section -->
|
||||
<section class="mb-24">
|
||||
<div class="relative">
|
||||
<h1
|
||||
class="text-6xl md:text-8xl font-bold text-stone-100 ethereal-text leading-tight mb-8"
|
||||
>
|
||||
Get in Touch
|
||||
</h1>
|
||||
|
||||
<div class="mb-16">
|
||||
<p class="text-stone-100 text-lg max-w-md">
|
||||
We'd be happy to answer any questions<br />
|
||||
you might have about Ghost Guild
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 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>
|
||||
<section class="mb-32 relative">
|
||||
<div class="mb-12">
|
||||
<h2 class="text-3xl font-light text-stone-200 mb-4">
|
||||
Send us a message (or email hello@ghostguild.org)
|
||||
</h2>
|
||||
</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"
|
||||
<div class="border border-ghost-700">
|
||||
<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>
|
||||
|
||||
<!-- Message -->
|
||||
<UFormField label="Message" name="message" required>
|
||||
<UTextarea
|
||||
v-model="form.message"
|
||||
placeholder="Tell us how we can help you..."
|
||||
:rows="6"
|
||||
<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>
|
||||
|
||||
<!-- 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>
|
||||
<!-- Subject -->
|
||||
<UFormField label="Subject" name="subject" required>
|
||||
<USelect
|
||||
v-model="form.subject"
|
||||
:options="subjectOptions"
|
||||
placeholder="Select a subject"
|
||||
size="xl"
|
||||
class="w-full"
|
||||
/>
|
||||
</UFormField>
|
||||
|
||||
<!-- 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.
|
||||
<!-- 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>
|
||||
|
||||
<!-- Submit Button -->
|
||||
<div class="pt-4">
|
||||
<UButton
|
||||
type="submit"
|
||||
:loading="isSubmitting"
|
||||
:disabled="!isFormValid"
|
||||
size="xl"
|
||||
class="px-12 border border-ghost-600 text-stone-200 hover:bg-ghost-800 hover:border-whisper-500 hover:ethereal-text transition-all duration-500"
|
||||
>
|
||||
Send Message
|
||||
</UButton>
|
||||
</div>
|
||||
</UForm>
|
||||
|
||||
<!-- Success/Error Messages -->
|
||||
<div
|
||||
v-if="success"
|
||||
class="mt-6 p-4 border border-whisper-600 bg-ghost-900/50"
|
||||
>
|
||||
<p class="text-whisper-300 text-center">
|
||||
Thank you! Your message has been sent successfully. We'll get back
|
||||
to you soon.
|
||||
</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.
|
||||
<div v-if="error" class="mt-6 p-4 border border-ghost-700 bg-ghost-900">
|
||||
<p class="text-stone-300 text-center">
|
||||
{{ error }}
|
||||
</p>
|
||||
|
||||
<UButton
|
||||
@click="scrollToForm"
|
||||
size="xl"
|
||||
color="primary"
|
||||
class="px-12 py-4"
|
||||
>
|
||||
Contact Us Now
|
||||
</UButton>
|
||||
</div>
|
||||
</UContainer>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref, computed } from 'vue'
|
||||
import { reactive, ref, computed } from "vue";
|
||||
|
||||
// Form state
|
||||
const form = reactive({
|
||||
name: '',
|
||||
email: '',
|
||||
subject: '',
|
||||
message: '',
|
||||
newsletter: false
|
||||
})
|
||||
name: "",
|
||||
email: "",
|
||||
subject: "",
|
||||
message: "",
|
||||
newsletter: false,
|
||||
});
|
||||
|
||||
// UI state
|
||||
const isSubmitting = ref(false)
|
||||
const error = ref('')
|
||||
const success = ref(false)
|
||||
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' }
|
||||
]
|
||||
{ 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" },
|
||||
];
|
||||
|
||||
// Support options
|
||||
const supportOptions = [
|
||||
{
|
||||
title: "Help Center",
|
||||
description:
|
||||
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Browse our comprehensive help articles.",
|
||||
details: ["Documentation", "FAQs", "Tutorials"],
|
||||
},
|
||||
{
|
||||
title: "Community Support",
|
||||
description:
|
||||
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Connect with other members in our community.",
|
||||
details: ["Discord", "Forums", "Slack"],
|
||||
},
|
||||
{
|
||||
title: "Direct Support",
|
||||
description:
|
||||
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Get personalized help from our team.",
|
||||
details: ["Email", "Priority response", "One-on-one assistance"],
|
||||
},
|
||||
];
|
||||
|
||||
// Form validation
|
||||
const isFormValid = computed(() => {
|
||||
return form.name && form.email && form.subject && form.message && form.message.length >= 10
|
||||
})
|
||||
return (
|
||||
form.name &&
|
||||
form.email &&
|
||||
form.subject &&
|
||||
form.message &&
|
||||
form.message.length >= 10
|
||||
);
|
||||
});
|
||||
|
||||
// Form submission
|
||||
const handleSubmit = async () => {
|
||||
if (isSubmitting.value) return
|
||||
if (isSubmitting.value) return;
|
||||
|
||||
isSubmitting.value = true
|
||||
error.value = ''
|
||||
success.value = false
|
||||
isSubmitting.value = true;
|
||||
error.value = "";
|
||||
success.value = false;
|
||||
|
||||
try {
|
||||
// Simulate API call
|
||||
await new Promise(resolve => setTimeout(resolve, 1500))
|
||||
|
||||
await new Promise((resolve) => setTimeout(resolve, 1500));
|
||||
|
||||
// For now, just show success message
|
||||
success.value = true
|
||||
|
||||
success.value = true;
|
||||
|
||||
// Reset form after success
|
||||
setTimeout(() => {
|
||||
Object.assign(form, {
|
||||
name: '',
|
||||
email: '',
|
||||
subject: '',
|
||||
message: '',
|
||||
newsletter: false
|
||||
})
|
||||
success.value = false
|
||||
}, 5000)
|
||||
|
||||
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.'
|
||||
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
|
||||
isSubmitting.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// Scroll to form function
|
||||
const scrollToForm = () => {
|
||||
const formSection = document.querySelector('form')
|
||||
if (formSection) {
|
||||
formSection.scrollIntoView({ behavior: 'smooth', block: 'center' })
|
||||
}
|
||||
}
|
||||
</script>
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue