Many an update!
This commit is contained in:
parent
85195d6c7a
commit
d588c49946
35 changed files with 3528 additions and 1142 deletions
281
app/pages/welcome.vue
Normal file
281
app/pages/welcome.vue
Normal file
|
|
@ -0,0 +1,281 @@
|
|||
<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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue