280 lines
9.9 KiB
Vue
280 lines
9.9 KiB
Vue
<template>
|
|
<div>
|
|
<PageHeader
|
|
title="Welcome to Ghost Guild"
|
|
subtitle="You're officially part of the community!"
|
|
size="large"
|
|
/>
|
|
|
|
<section class="py-16 bg-guild-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-display font-bold text-guild-100 mb-4">
|
|
Hey {{ memberData?.name || "there" }}!
|
|
</h2>
|
|
<p class="text-lg text-guild-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-guild-800/50 rounded-xl border border-guild-700">
|
|
<div
|
|
class="w-12 h-12 bg-candlelight-500/20 rounded-lg flex items-center justify-center mb-4"
|
|
>
|
|
<Icon
|
|
name="heroicons:user-circle"
|
|
class="w-6 h-6 text-candlelight-400"
|
|
/>
|
|
</div>
|
|
<h3 class="font-semibold text-guild-100 mb-2">
|
|
<span class="text-ui-label text-candlelight-400 mr-2">1.</span>Complete Your Profile
|
|
</h3>
|
|
<p class="text-sm text-guild-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-guild-800/50 rounded-xl border border-guild-700">
|
|
<div
|
|
class="w-12 h-12 bg-candlelight-500/20 rounded-lg flex items-center justify-center mb-4"
|
|
>
|
|
<Icon
|
|
name="heroicons:calendar-days"
|
|
class="w-6 h-6 text-candlelight-400"
|
|
/>
|
|
</div>
|
|
<h3 class="font-semibold text-guild-100 mb-2">
|
|
<span class="text-ui-label text-candlelight-400 mr-2">2.</span>Join an Event
|
|
</h3>
|
|
<p class="text-sm text-guild-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-guild-800/50 rounded-xl border border-guild-700">
|
|
<div
|
|
class="w-12 h-12 bg-candlelight-500/20 rounded-lg flex items-center justify-center mb-4"
|
|
>
|
|
<Icon name="heroicons:users" class="w-6 h-6 text-candlelight-400" />
|
|
</div>
|
|
<h3 class="font-semibold text-guild-100 mb-2">
|
|
<span class="text-ui-label text-candlelight-400 mr-2">3.</span>Meet the Community
|
|
</h3>
|
|
<p class="text-sm text-guild-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-guild-800/30 rounded-2xl border border-guild-700 mb-16"
|
|
>
|
|
<h3 class="text-display-sm font-bold text-guild-100 mb-4">
|
|
Understanding Circles
|
|
</h3>
|
|
<p class="text-guild-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'
|
|
? 'circle-surface-community border border-[var(--color-circle-community)]/50'
|
|
: 'bg-guild-800/50'
|
|
"
|
|
>
|
|
<h4 class="font-semibold text-guild-100 mb-2">
|
|
Community Circle
|
|
<span
|
|
v-if="memberData?.circle === 'community'"
|
|
class="text-candlelight-400 text-sm ml-2"
|
|
>← You're here</span
|
|
>
|
|
</h4>
|
|
<p class="text-sm text-guild-400">
|
|
For those exploring solidarity economics and alternative
|
|
studio models.
|
|
</p>
|
|
</div>
|
|
|
|
<div
|
|
class="p-4 rounded-lg"
|
|
:class="
|
|
memberData?.circle === 'founder'
|
|
? 'circle-surface-founder border border-[var(--color-circle-founder)]/50'
|
|
: 'bg-guild-800/50'
|
|
"
|
|
>
|
|
<h4 class="font-semibold text-guild-100 mb-2">
|
|
Founder Circle
|
|
<span
|
|
v-if="memberData?.circle === 'founder'"
|
|
class="text-candlelight-400 text-sm ml-2"
|
|
>← You're here</span
|
|
>
|
|
</h4>
|
|
<p class="text-sm text-guild-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'
|
|
? 'circle-surface-practitioner border border-[var(--color-circle-practitioner)]/50'
|
|
: 'bg-guild-800/50'
|
|
"
|
|
>
|
|
<h4 class="font-semibold text-guild-100 mb-2">
|
|
Practitioner Circle
|
|
<span
|
|
v-if="memberData?.circle === 'practitioner'"
|
|
class="text-candlelight-400 text-sm ml-2"
|
|
>← You're here</span
|
|
>
|
|
</h4>
|
|
<p class="text-sm text-guild-400">
|
|
For consultants, advisors, and professionals supporting
|
|
cooperative game studios.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Resources -->
|
|
<div
|
|
class="p-8 bg-guild-800/30 rounded-2xl border border-guild-700 mb-16"
|
|
>
|
|
<h3 class="text-display-sm font-bold text-guild-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-candlelight-500/20 rounded-lg flex items-center justify-center flex-shrink-0"
|
|
>
|
|
<Icon
|
|
name="heroicons:book-open"
|
|
class="w-5 h-5 text-candlelight-400"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-semibold text-guild-100 mb-1">
|
|
Resource Library
|
|
</h4>
|
|
<p class="text-sm text-guild-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-ember-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-ember-400"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-semibold text-guild-100 mb-1">
|
|
Peer Support
|
|
</h4>
|
|
<p class="text-sm text-guild-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>
|