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>
|
</li>
|
||||||
</ul>
|
</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 -->
|
<!-- Color Mode Switcher -->
|
||||||
<div class="mb-6">
|
<div class="mb-6">
|
||||||
<UColorModeButton size="md" class="w-full" />
|
<UColorModeButton size="md" class="w-full" />
|
||||||
|
|
@ -149,7 +161,6 @@ const publicNavigationItems = [
|
||||||
{ label: "About", path: "/about", accent: "who we are" },
|
{ label: "About", path: "/about", accent: "who we are" },
|
||||||
{ label: "Events", path: "/events", accent: "gatherings" },
|
{ label: "Events", path: "/events", accent: "gatherings" },
|
||||||
{ label: "Join", path: "/join", accent: "become one" },
|
{ label: "Join", path: "/join", accent: "become one" },
|
||||||
{ label: "Contact", path: "/contact", accent: "reach out" },
|
|
||||||
];
|
];
|
||||||
|
|
||||||
const memberNavigationItems = [
|
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="flex flex-col p-6 rounded-lg border-2 cursor-pointer transition-all hover:shadow-md"
|
||||||
:class="
|
:class="
|
||||||
form.circle === option.value
|
form.circle === option.value
|
||||||
? 'border-neutral-900 bg-[--ui-bg]'
|
? 'border-primary bg-primary/5'
|
||||||
: 'border-neutral-200 hover:border-neutral-400'
|
: 'border-neutral-200 hover:border-neutral-400'
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
|
|
@ -162,7 +162,7 @@
|
||||||
type="radio"
|
type="radio"
|
||||||
:value="option.value"
|
:value="option.value"
|
||||||
name="circle"
|
name="circle"
|
||||||
class="mb-3"
|
class="sr-only"
|
||||||
/>
|
/>
|
||||||
<div class="font-medium text-lg mb-2">{{ option.label }}</div>
|
<div class="font-medium text-lg mb-2">{{ option.label }}</div>
|
||||||
<div class="text-sm text-[--ui-text-muted]">
|
<div class="text-sm text-[--ui-text-muted]">
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue