281 lines
9.6 KiB
Vue
281 lines
9.6 KiB
Vue
<template>
|
|
<div>
|
|
<PageHeader
|
|
title="Welcome to Ghost Guild"
|
|
subtitle="You're officially part of the community!"
|
|
theme="purple"
|
|
size="large"
|
|
/>
|
|
|
|
<section class="py-16 bg-ghost-900">
|
|
<UContainer>
|
|
<div class="max-w-4xl mx-auto">
|
|
<!-- Welcome Message -->
|
|
<div class="text-center mb-16">
|
|
<div class="w-24 h-24 mx-auto mb-6">
|
|
<img
|
|
v-if="memberData?.avatar"
|
|
:src="`/ghosties/Ghost-${memberData.avatar.charAt(0).toUpperCase() + memberData.avatar.slice(1)}.png`"
|
|
:alt="memberData.name"
|
|
class="w-full h-full object-contain"
|
|
/>
|
|
<img
|
|
v-else
|
|
src="/ghosties/Ghost-Sweet.png"
|
|
alt="Ghost Guild"
|
|
class="w-full h-full object-contain"
|
|
/>
|
|
</div>
|
|
<h2 class="text-2xl font-bold text-ghost-100 mb-4">
|
|
Hey {{ memberData?.name || "there" }}!
|
|
</h2>
|
|
<p class="text-lg text-ghost-300 max-w-2xl mx-auto">
|
|
You've joined a an awesome community!!👻 Welcome to Ghost guild…
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Getting Started Steps -->
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
|
|
<div class="p-6 bg-ghost-800/50 rounded-xl border border-ghost-700">
|
|
<div
|
|
class="w-12 h-12 bg-purple-500/20 rounded-lg flex items-center justify-center mb-4"
|
|
>
|
|
<Icon
|
|
name="heroicons:user-circle"
|
|
class="w-6 h-6 text-purple-400"
|
|
/>
|
|
</div>
|
|
<h3 class="font-semibold text-ghost-100 mb-2">
|
|
1. Complete Your Profile
|
|
</h3>
|
|
<p class="text-sm text-ghost-400 mb-4">
|
|
Tell the community about yourself, your skills, and what you're
|
|
looking for.
|
|
</p>
|
|
<UButton to="/member/profile" variant="outline" size="sm">
|
|
Edit Profile
|
|
</UButton>
|
|
</div>
|
|
|
|
<div class="p-6 bg-ghost-800/50 rounded-xl border border-ghost-700">
|
|
<div
|
|
class="w-12 h-12 bg-blue-500/20 rounded-lg flex items-center justify-center mb-4"
|
|
>
|
|
<Icon
|
|
name="heroicons:calendar-days"
|
|
class="w-6 h-6 text-blue-400"
|
|
/>
|
|
</div>
|
|
<h3 class="font-semibold text-ghost-100 mb-2">
|
|
2. Join an Event
|
|
</h3>
|
|
<p class="text-sm text-ghost-400 mb-4">
|
|
From workshops to game nights, events are the heart of our
|
|
community.
|
|
</p>
|
|
<UButton to="/events" variant="outline" size="sm">
|
|
Browse Events
|
|
</UButton>
|
|
</div>
|
|
|
|
<div class="p-6 bg-ghost-800/50 rounded-xl border border-ghost-700">
|
|
<div
|
|
class="w-12 h-12 bg-green-500/20 rounded-lg flex items-center justify-center mb-4"
|
|
>
|
|
<Icon name="heroicons:users" class="w-6 h-6 text-green-400" />
|
|
</div>
|
|
<h3 class="font-semibold text-ghost-100 mb-2">
|
|
3. Meet the Community
|
|
</h3>
|
|
<p class="text-sm text-ghost-400 mb-4">
|
|
Connect with other members and find peers for support and
|
|
collaboration.
|
|
</p>
|
|
<UButton to="/members" variant="outline" size="sm">
|
|
View Members
|
|
</UButton>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- About Circles -->
|
|
<div
|
|
class="p-8 bg-ghost-800/30 rounded-2xl border border-ghost-700 mb-16"
|
|
>
|
|
<h3 class="text-xl font-bold text-ghost-100 mb-4">
|
|
Understanding Circles
|
|
</h3>
|
|
<p class="text-ghost-300 mb-6">
|
|
Ghost Guild is organized into three circles based on where you are
|
|
in your journey. Your circle helps us tailor events and resources
|
|
to your needs.
|
|
</p>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<div
|
|
class="p-4 rounded-lg"
|
|
:class="
|
|
memberData?.circle === 'community'
|
|
? 'bg-purple-500/20 border border-purple-500/50'
|
|
: 'bg-ghost-800/50'
|
|
"
|
|
>
|
|
<h4 class="font-semibold text-ghost-100 mb-2">
|
|
Community Circle
|
|
<span
|
|
v-if="memberData?.circle === 'community'"
|
|
class="text-purple-400 text-sm ml-2"
|
|
>← You're here</span
|
|
>
|
|
</h4>
|
|
<p class="text-sm text-ghost-400">
|
|
For those exploring solidarity economics and alternative
|
|
studio models.
|
|
</p>
|
|
</div>
|
|
|
|
<div
|
|
class="p-4 rounded-lg"
|
|
:class="
|
|
memberData?.circle === 'founder'
|
|
? 'bg-purple-500/20 border border-purple-500/50'
|
|
: 'bg-ghost-800/50'
|
|
"
|
|
>
|
|
<h4 class="font-semibold text-ghost-100 mb-2">
|
|
Founder Circle
|
|
<span
|
|
v-if="memberData?.circle === 'founder'"
|
|
class="text-purple-400 text-sm ml-2"
|
|
>← You're here</span
|
|
>
|
|
</h4>
|
|
<p class="text-sm text-ghost-400">
|
|
For those actively building or running a cooperative or
|
|
solidarity-based studio.
|
|
</p>
|
|
</div>
|
|
|
|
<div
|
|
class="p-4 rounded-lg"
|
|
:class="
|
|
memberData?.circle === 'practitioner'
|
|
? 'bg-purple-500/20 border border-purple-500/50'
|
|
: 'bg-ghost-800/50'
|
|
"
|
|
>
|
|
<h4 class="font-semibold text-ghost-100 mb-2">
|
|
Practitioner Circle
|
|
<span
|
|
v-if="memberData?.circle === 'practitioner'"
|
|
class="text-purple-400 text-sm ml-2"
|
|
>← You're here</span
|
|
>
|
|
</h4>
|
|
<p class="text-sm text-ghost-400">
|
|
For consultants, advisors, and professionals supporting
|
|
cooperative game studios.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Resources -->
|
|
<div
|
|
class="p-8 bg-ghost-800/30 rounded-2xl border border-ghost-700 mb-16"
|
|
>
|
|
<h3 class="text-xl font-bold text-ghost-100 mb-4">
|
|
Resources & Support
|
|
</h3>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div class="flex items-start gap-4">
|
|
<div
|
|
class="w-10 h-10 bg-amber-500/20 rounded-lg flex items-center justify-center flex-shrink-0"
|
|
>
|
|
<Icon
|
|
name="heroicons:book-open"
|
|
class="w-5 h-5 text-amber-400"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-semibold text-ghost-100 mb-1">
|
|
Resource Library
|
|
</h4>
|
|
<p class="text-sm text-ghost-400 mb-2">
|
|
Templates, guides, and tools for building solidarity-based
|
|
studios.
|
|
</p>
|
|
<UButton
|
|
to="https://wiki.ghostguild.org"
|
|
target="_blank"
|
|
variant="link"
|
|
size="sm"
|
|
class="p-0"
|
|
>
|
|
Browse Resources →
|
|
</UButton>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-start gap-4">
|
|
<div
|
|
class="w-10 h-10 bg-pink-500/20 rounded-lg flex items-center justify-center flex-shrink-0"
|
|
>
|
|
<Icon
|
|
name="heroicons:chat-bubble-left-right"
|
|
class="w-5 h-5 text-pink-400"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-semibold text-ghost-100 mb-1">
|
|
Peer Support
|
|
</h4>
|
|
<p class="text-sm text-ghost-400 mb-2">
|
|
Connect 1:1 with community members for advice and support.
|
|
</p>
|
|
<UButton
|
|
to="/members?peerSupport=true"
|
|
variant="link"
|
|
size="sm"
|
|
class="p-0"
|
|
>
|
|
Find Peers →
|
|
</UButton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CTA -->
|
|
<div class="text-center">
|
|
<UButton to="/member/dashboard" size="xl" class="px-12">
|
|
Go to Your Dashboard
|
|
</UButton>
|
|
</div>
|
|
</div>
|
|
</UContainer>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const { memberData, checkMemberStatus } = useAuth();
|
|
|
|
// Ensure user is authenticated
|
|
definePageMeta({
|
|
middleware: ["auth"],
|
|
});
|
|
|
|
onMounted(async () => {
|
|
await checkMemberStatus();
|
|
});
|
|
|
|
useHead({
|
|
title: "Welcome - Ghost Guild",
|
|
meta: [
|
|
{
|
|
name: "description",
|
|
content: "Welcome to Ghost Guild! Get started with your membership.",
|
|
},
|
|
],
|
|
});
|
|
</script>
|