Update nave
This commit is contained in:
parent
bce86ee840
commit
85195d6c7a
3 changed files with 14 additions and 207 deletions
|
|
@ -40,6 +40,18 @@
|
|||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- Contact Email -->
|
||||
<div class="mt-8 pt-6 border-t border-ghost-800/50">
|
||||
<p class="text-ghost-500 text-xs">
|
||||
Contact us:
|
||||
<a
|
||||
href="mailto:hello@ghostguild.org"
|
||||
class="text-ghost-400 hover:text-ghost-300 transition-colors"
|
||||
>hello@ghostguild.org</a
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Color Mode Switcher -->
|
||||
<div class="mb-6">
|
||||
<UColorModeButton size="md" class="w-full" />
|
||||
|
|
@ -149,7 +161,6 @@ const publicNavigationItems = [
|
|||
{ label: "About", path: "/about", accent: "who we are" },
|
||||
{ label: "Events", path: "/events", accent: "gatherings" },
|
||||
{ label: "Join", path: "/join", accent: "become one" },
|
||||
{ label: "Contact", path: "/contact", accent: "reach out" },
|
||||
];
|
||||
|
||||
const memberNavigationItems = [
|
||||
|
|
|
|||
|
|
@ -1,204 +0,0 @@
|
|||
<template>
|
||||
<div class="relative">
|
||||
<!-- Hero Section -->
|
||||
<section class="mb-24">
|
||||
<div class="relative">
|
||||
<h1
|
||||
class="text-6xl md:text-8xl font-bold text-ghost-100 ethereal-text leading-tight mb-8"
|
||||
>
|
||||
Get in Touch
|
||||
</h1>
|
||||
|
||||
<div class="mb-16">
|
||||
<p class="text-ghost-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="mb-32 relative">
|
||||
<div class="mb-12">
|
||||
<h2 class="text-3xl font-light text-ghost-200 mb-4">
|
||||
Send us a message (or email hello@ghostguild.org)
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<!-- Submit Button -->
|
||||
<div class="pt-4">
|
||||
<UButton
|
||||
type="submit"
|
||||
:loading="isSubmitting"
|
||||
:disabled="!isFormValid"
|
||||
size="xl"
|
||||
class="px-12 border border-ghost-600 text-ghost-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 v-if="error" class="mt-6 p-4 border border-ghost-700 bg-ghost-900">
|
||||
<p class="text-ghost-300 text-center">
|
||||
{{ error }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</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" },
|
||||
];
|
||||
|
||||
// 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
|
||||
);
|
||||
});
|
||||
|
||||
// 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;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -153,7 +153,7 @@
|
|||
class="flex flex-col p-6 rounded-lg border-2 cursor-pointer transition-all hover:shadow-md"
|
||||
:class="
|
||||
form.circle === option.value
|
||||
? 'border-neutral-900 bg-[--ui-bg]'
|
||||
? 'border-primary bg-primary/5'
|
||||
: 'border-neutral-200 hover:border-neutral-400'
|
||||
"
|
||||
>
|
||||
|
|
@ -162,7 +162,7 @@
|
|||
type="radio"
|
||||
:value="option.value"
|
||||
name="circle"
|
||||
class="mb-3"
|
||||
class="sr-only"
|
||||
/>
|
||||
<div class="font-medium text-lg mb-2">{{ option.label }}</div>
|
||||
<div class="text-sm text-[--ui-text-muted]">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue