Migrate design system from ethereal/cool to warm/craft/guild theme
Replace ghost/whisper/sparkle color palettes with guild/candlelight/parchment/ember/earth tokens. Switch typography from NB Television Pro to Quietism serif. Update all 25 Vue components, layouts, and pages to new design system. Add circle color tokens, typography scale, prose-guild class, and warm texture effects. Clean up stale documentation files.
This commit is contained in:
parent
d588c49946
commit
a62e167876
39 changed files with 1300 additions and 2087 deletions
|
|
@ -11,37 +11,116 @@
|
|||
<!-- Main Content -->
|
||||
<section class="py-20 bg-[--ui-bg]">
|
||||
<UContainer>
|
||||
<div class="max-w-3xl">
|
||||
<!-- TODO: Add copy about history and connection to Baby Ghosts -->
|
||||
<p class="text-lg text-[--ui-text-muted]">
|
||||
Ghost Guild is a community of learning and practice for anyone,
|
||||
anywhere interested in a video game industry-wide shift to
|
||||
worker-owned studio models. It is also the membership program of
|
||||
Baby Ghosts, a Canadian nonprofit that provides resources and
|
||||
support for worker-owned studios. After running our Peer Accelerator
|
||||
program for three years, we are now scaling up our operations to
|
||||
support more studios and expand our reach. As we build our knowledge
|
||||
commons, more folks unable to participate in the program can benefit
|
||||
from collectively compiled knowledge and find community.
|
||||
</p>
|
||||
<p>
|
||||
something here about the work to make Slack integration smooth and
|
||||
safe; more about purpose??
|
||||
</p>
|
||||
<p>
|
||||
We are pretty interested in saying _fuck you_ to hierarchy however
|
||||
it shows up in our work. So the Ghost Guild membership program is
|
||||
tier-less… but peer-full. We've loosely named some circles you can
|
||||
join that will help us connect you with folks at the same stage of
|
||||
development as you, and with resources that are in line with your
|
||||
needs and interests. But none of these circles is superior, and
|
||||
there's no harm or shame in sticking with one for a while, or moving
|
||||
between them to find the best fit. Choosing your financial
|
||||
contribution level is also not about paying for access to additional
|
||||
resources - everything is available to every member, no matter their
|
||||
circle or contribution level. Rather, it's about finding a dues
|
||||
level that's meaningful to you but not a burden.
|
||||
</p>
|
||||
<div class="max-w-3xl prose prose-lg dark:prose-invert">
|
||||
<!-- directives:[] -->
|
||||
<div id="content">
|
||||
<p>
|
||||
Ghost Guild is a community of learning and practice for anyone,
|
||||
anywhere interested in a video game industry-wide shift to
|
||||
worker-owned studio models.
|
||||
</p>
|
||||
<p>
|
||||
We reject hierarchy wherever it shows up. Ghost Guild is
|
||||
tier-less, but peer-full.
|
||||
</p>
|
||||
<h2 id="our-story">Our Story</h2>
|
||||
<p>
|
||||
Ghost Guild is the membership program of Baby Ghosts, a Canadian
|
||||
nonprofit that provides resources and support for worker-owned
|
||||
game studios.
|
||||
</p>
|
||||
<p>
|
||||
For three years, Baby Ghosts has run the Peer Accelerator - an
|
||||
intensive program pairing early-stage studios with mentorship,
|
||||
peer learning, and grants. Twenty-five studios have graduated. The
|
||||
model works! Peer learning builds stronger foundations than
|
||||
top-down advice ever could.
|
||||
</p>
|
||||
<p>
|
||||
But not everyone can commit to a six-month cohort. Some folks are
|
||||
still exploring. Others are already running established
|
||||
cooperatives and want to give back. Many are scattered across the
|
||||
world and just need to know they're not alone in wanting to build
|
||||
something different.
|
||||
</p>
|
||||
<p><em>Ghost Guild is how we open the doors wider.</em></p>
|
||||
<p>
|
||||
As we build our knowledge commons, more folks can benefit from
|
||||
collectively compiled wisdom and find community - whether or not
|
||||
they ever apply to the Peer Accelerator. The intensive program
|
||||
continues. Ghost Guild expands access to everything around it.
|
||||
</p>
|
||||
<h2 id="the-circles">The Circles</h2>
|
||||
<p>
|
||||
We've loosely named some circles you can join. This is not to rank
|
||||
you, but to connect you with folks at a similar stage and with
|
||||
resources that fit where you are right now.
|
||||
</p>
|
||||
<p>
|
||||
No circle is superior. There's no shame in sticking with one for a
|
||||
while, or moving between them to find the best fit.
|
||||
</p>
|
||||
<p>
|
||||
The Community Circle is for individuals exploring cooperative
|
||||
principles. Whether you're working in the industry or in academia,
|
||||
you'll get access to the knowledge commons, workshops, resources,
|
||||
guides, community Slack and peer support, and social events and
|
||||
networking.
|
||||
</p>
|
||||
<p>
|
||||
The Founder Circle is for those actively building a worker-owned
|
||||
studio. You'll have access to everything within the platform, just
|
||||
like any other member, but you might be particularly interested in
|
||||
peer matching with studios at similar stages and Peer Accelerator
|
||||
alumni, and templates for governance, financial modelling, and
|
||||
decision-making.
|
||||
</p>
|
||||
<p>
|
||||
The Practitioner Circle is for Peer Accelerator alumni and
|
||||
experienced cooperative studio leaders. You'll hopefully find
|
||||
yourself providing paid support to other members, as well as
|
||||
engaging in collaborative research opportunities with academic
|
||||
partners, connecting to other coops for business development, and
|
||||
helping build a platform for changing industry practices.
|
||||
</p>
|
||||
<h2 id="how-contribution-works">How Contribution Works</h2>
|
||||
<p>
|
||||
Choosing your financial contribution is also not about paying for
|
||||
access. Everything is available to every member, no matter their
|
||||
circle or contribution level.
|
||||
</p>
|
||||
<p>
|
||||
Rather, it's about finding a dues level that's meaningful to you
|
||||
without being a burden.
|
||||
</p>
|
||||
<p>
|
||||
The knowledge commons is open to all Ghosties. Your contribution
|
||||
sustains a community you believe in.
|
||||
</p>
|
||||
<p>
|
||||
If dues are a barrier, that's okay. Members who are able to
|
||||
contribute more can direct additional funds to the Solidarity
|
||||
Fund, which covers dues for those who need support.
|
||||
</p>
|
||||
<h2 id="community">Community</h2>
|
||||
<p>
|
||||
When you join Ghost Guild, you join a community of Ghosties -
|
||||
folks at every stage of the journey, learning from each other.
|
||||
</p>
|
||||
<p>
|
||||
Our Slack community is built with care. New members are welcomed
|
||||
thoughtfully, channels are structured to help you find your
|
||||
people, and we grow at a pace that protects what makes this space
|
||||
special.
|
||||
</p>
|
||||
<p>
|
||||
This is a cascading mentorship structure where everyone is both
|
||||
learning and teaching. Practitioners mentor Founders. Founders
|
||||
mentor Community members. And Community members bring fresh
|
||||
perspectives that keep everyone honest.
|
||||
</p>
|
||||
<p>Welcome, Ghostie! 👻</p>
|
||||
</div>
|
||||
</div>
|
||||
</UContainer>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,23 +1,23 @@
|
|||
<template>
|
||||
<div
|
||||
v-if="pending"
|
||||
class="min-h-screen bg-ghost-900 flex items-center justify-center"
|
||||
class="min-h-screen bg-guild-900 flex items-center justify-center"
|
||||
>
|
||||
<div class="text-center">
|
||||
<div
|
||||
class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mx-auto mb-4"
|
||||
></div>
|
||||
<p class="text-ghost-200">Loading event details...</p>
|
||||
<p class="text-guild-200">Loading event details...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else-if="error"
|
||||
class="min-h-screen bg-ghost-900 flex items-center justify-center"
|
||||
class="min-h-screen bg-guild-900 flex items-center justify-center"
|
||||
>
|
||||
<div class="text-center">
|
||||
<h2 class="text-2xl font-bold text-ghost-100 mb-2">Event Not Found</h2>
|
||||
<p class="text-ghost-300 mb-6">
|
||||
<h2 class="text-2xl font-bold text-guild-100 mb-2">Event Not Found</h2>
|
||||
<p class="text-guild-300 mb-6">
|
||||
The event you're looking for doesn't exist.
|
||||
</p>
|
||||
<NuxtLink to="/events" class="text-blue-400 hover:underline">
|
||||
|
|
@ -74,35 +74,35 @@
|
|||
<PageHeader v-else :title="event.title" theme="blue" size="medium" />
|
||||
|
||||
<!-- Event Details Section -->
|
||||
<section class="py-16 bg-ghost-900">
|
||||
<section class="py-16 bg-guild-900">
|
||||
<UContainer>
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<!-- Event Meta Info -->
|
||||
<div class="mb-8">
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-6">
|
||||
<div>
|
||||
<p class="text-sm text-ghost-400">Date</p>
|
||||
<p class="font-semibold text-ghost-100">
|
||||
<p class="text-sm text-guild-400">Date</p>
|
||||
<p class="font-semibold text-guild-100">
|
||||
{{ formatDate(event.startDate) }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="text-sm text-ghost-400">Time</p>
|
||||
<p class="font-semibold text-ghost-100">
|
||||
<p class="text-sm text-guild-400">Time</p>
|
||||
<p class="font-semibold text-guild-100">
|
||||
{{ formatTime(event.startDate, event.endDate) }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="text-sm text-ghost-400">Location</p>
|
||||
<p class="font-semibold text-ghost-100">
|
||||
<p class="text-sm text-guild-400">Location</p>
|
||||
<p class="font-semibold text-guild-100">
|
||||
{{ event.location }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="text-sm text-ghost-400">Calendar</p>
|
||||
<p class="text-sm text-guild-400">Calendar</p>
|
||||
<UButton
|
||||
:href="`/api/events/${route.params.id}/calendar`"
|
||||
download
|
||||
|
|
@ -150,7 +150,7 @@
|
|||
>
|
||||
<div class="flex items-center space-x-2">
|
||||
<span
|
||||
class="text-sm font-medium text-gray-800 dark:text-ghost-200"
|
||||
class="text-sm font-medium text-gray-800 dark:text-guild-200"
|
||||
>Recommended for:</span
|
||||
>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
|
|
@ -167,31 +167,31 @@
|
|||
|
||||
<!-- Event Description -->
|
||||
<div class="prose prose-lg dark:prose-invert max-w-none mb-12">
|
||||
<h2 class="text-2xl font-bold text-ghost-100 mb-4">
|
||||
<h2 class="text-2xl font-bold text-guild-100 mb-4">
|
||||
About This Event
|
||||
</h2>
|
||||
|
||||
<!-- Series Description -->
|
||||
<div
|
||||
v-if="event.series?.isSeriesEvent && event.series.description"
|
||||
class="event-series-description mb-6 p-4 bg-ghost-800/30 dark:bg-ghost-700/20 rounded-lg border border-ghost-600 dark:border-ghost-600"
|
||||
class="event-series-description mb-6 p-4 bg-guild-800/30 dark:bg-guild-700/20 rounded-lg border border-guild-600 dark:border-guild-600"
|
||||
>
|
||||
<h3
|
||||
class="event-series-description__title text-lg font-semibold text-ghost-100 dark:text-ghost-100 mb-2"
|
||||
class="event-series-description__title text-lg font-semibold text-guild-100 dark:text-guild-100 mb-2"
|
||||
>
|
||||
About the {{ event.series.title }} Series
|
||||
</h3>
|
||||
<p class="event-series-description__text text-ghost-200">
|
||||
<p class="event-series-description__text text-guild-200">
|
||||
{{ event.series.description }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p class="text-ghost-200">
|
||||
<p class="text-guild-200">
|
||||
{{ event.description }}
|
||||
</p>
|
||||
|
||||
<div v-if="event.agenda && event.agenda.length > 0" class="mt-8">
|
||||
<h3 class="text-xl font-semibold text-ghost-100 mb-4">
|
||||
<h3 class="text-xl font-semibold text-guild-100 mb-4">
|
||||
Event Agenda
|
||||
</h3>
|
||||
<ul class="space-y-3">
|
||||
|
|
@ -205,7 +205,7 @@
|
|||
>
|
||||
{{ index + 1 }}
|
||||
</span>
|
||||
<span class="text-ghost-200">{{ item }}</span>
|
||||
<span class="text-guild-200">{{ item }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -214,7 +214,7 @@
|
|||
v-if="event.speakers && event.speakers.length > 0"
|
||||
class="mt-8"
|
||||
>
|
||||
<h3 class="text-xl font-semibold text-ghost-100 mb-4">
|
||||
<h3 class="text-xl font-semibold text-guild-100 mb-4">
|
||||
Speakers
|
||||
</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
|
|
@ -224,13 +224,13 @@
|
|||
class="flex items-start space-x-4"
|
||||
>
|
||||
<div>
|
||||
<p class="font-semibold text-ghost-100">
|
||||
<p class="font-semibold text-guild-100">
|
||||
{{ speaker.name }}
|
||||
</p>
|
||||
<p class="text-sm text-ghost-300">
|
||||
<p class="text-sm text-guild-300">
|
||||
{{ speaker.role }}
|
||||
</p>
|
||||
<p class="text-sm text-ghost-400 mt-1">
|
||||
<p class="text-sm text-guild-400 mt-1">
|
||||
{{ speaker.bio }}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -367,7 +367,7 @@
|
|||
v-else-if="memberData && (!event.membersOnly || isMember)"
|
||||
class="text-center"
|
||||
>
|
||||
<p class="text-lg text-ghost-200 mb-6">
|
||||
<p class="text-lg text-guild-200 mb-6">
|
||||
You are logged in, {{ memberData.name }}.
|
||||
</p>
|
||||
<UButton
|
||||
|
|
@ -383,14 +383,14 @@
|
|||
|
||||
<!-- Not Logged In - Show Registration Form -->
|
||||
<div v-else>
|
||||
<h3 class="text-xl font-bold text-ghost-100 mb-6">
|
||||
<h3 class="text-xl font-bold text-guild-100 mb-6">
|
||||
Register for This Event
|
||||
</h3>
|
||||
<form @submit.prevent="handleRegistration" class="space-y-4">
|
||||
<div>
|
||||
<label
|
||||
for="name"
|
||||
class="block text-sm font-medium text-ghost-200 mb-2"
|
||||
class="block text-sm font-medium text-guild-200 mb-2"
|
||||
>
|
||||
Full Name
|
||||
</label>
|
||||
|
|
@ -406,7 +406,7 @@
|
|||
<div>
|
||||
<label
|
||||
for="email"
|
||||
class="block text-sm font-medium text-ghost-200 mb-2"
|
||||
class="block text-sm font-medium text-guild-200 mb-2"
|
||||
>
|
||||
Email Address
|
||||
</label>
|
||||
|
|
@ -422,7 +422,7 @@
|
|||
<div>
|
||||
<label
|
||||
for="membershipLevel"
|
||||
class="block text-sm font-medium text-ghost-200 mb-2"
|
||||
class="block text-sm font-medium text-guild-200 mb-2"
|
||||
>
|
||||
Membership Status
|
||||
</label>
|
||||
|
|
@ -452,17 +452,17 @@
|
|||
<!-- Event Capacity -->
|
||||
<div
|
||||
v-if="event.maxAttendees"
|
||||
class="mt-6 pt-6 border-t border-ghost-700"
|
||||
class="mt-6 pt-6 border-t border-guild-700"
|
||||
>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm text-ghost-300">Event Capacity</span>
|
||||
<span class="text-sm text-guild-300">Event Capacity</span>
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="text-sm font-semibold text-ghost-100">
|
||||
<span class="text-sm font-semibold text-guild-100">
|
||||
{{ event.registeredCount || 0 }} /
|
||||
{{ event.maxAttendees }}
|
||||
</span>
|
||||
<div
|
||||
class="w-24 h-2 bg-ghost-700 rounded-full overflow-hidden"
|
||||
class="w-24 h-2 bg-guild-700 rounded-full overflow-hidden"
|
||||
>
|
||||
<div
|
||||
class="h-full bg-blue-500 rounded-full"
|
||||
|
|
@ -476,7 +476,7 @@
|
|||
<!-- Waitlist Section -->
|
||||
<div
|
||||
v-if="event.tickets?.waitlist?.enabled && isEventFull"
|
||||
class="mt-6 pt-6 border-t border-ghost-700"
|
||||
class="mt-6 pt-6 border-t border-guild-700"
|
||||
>
|
||||
<!-- Already on Waitlist -->
|
||||
<div v-if="isOnWaitlist" class="text-center">
|
||||
|
|
@ -534,9 +534,9 @@
|
|||
</div>
|
||||
|
||||
<!-- Additional Information -->
|
||||
<div class="mt-8 p-6 rounded-xl border border-ghost-700">
|
||||
<h4 class="font-semibold text-ghost-100 mb-3">Questions?</h4>
|
||||
<p class="text-sm text-ghost-200 mb-3">
|
||||
<div class="mt-8 p-6 rounded-xl border border-guild-700">
|
||||
<h4 class="font-semibold text-guild-100 mb-3">Questions?</h4>
|
||||
<p class="text-sm text-guild-200 mb-3">
|
||||
If you have any questions about this event please drop us a line.
|
||||
</p>
|
||||
<a
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
/>
|
||||
|
||||
<!-- Events Section with Tabs -->
|
||||
<section class="bg-ghost-900 dark:bg-ghost-950">
|
||||
<section class="bg-guild-900 dark:bg-guild-950">
|
||||
<UContainer>
|
||||
<UTabs
|
||||
v-model="activeTab"
|
||||
|
|
@ -51,7 +51,7 @@
|
|||
<div
|
||||
class="flex flex-col items-center md:items-start gap-2"
|
||||
>
|
||||
<label class="text-sm font-medium text-ghost-200">
|
||||
<label class="text-sm font-medium text-guild-200">
|
||||
Show past events?
|
||||
</label>
|
||||
<USwitch v-model="includePastEvents" />
|
||||
|
|
@ -79,10 +79,10 @@
|
|||
|
||||
<template #panel="{ close }">
|
||||
<div
|
||||
class="bg-ghost-800 dark:bg-ghost-900 p-6 rounded-md shadow-lg w-80 space-y-4"
|
||||
class="bg-guild-800 dark:bg-guild-900 p-6 rounded-md shadow-lg w-80 space-y-4"
|
||||
>
|
||||
<div class="space-y-2">
|
||||
<label class="text-sm font-medium text-ghost-200">
|
||||
<label class="text-sm font-medium text-guild-200">
|
||||
Filter by category
|
||||
</label>
|
||||
<USelectMenu
|
||||
|
|
@ -107,7 +107,7 @@
|
|||
|
||||
<!-- Search Status Message -->
|
||||
<div v-if="isSearching" class="mt-6 text-center">
|
||||
<p class="text-ghost-300 text-sm">
|
||||
<p class="text-guild-300 text-sm">
|
||||
{{
|
||||
filteredEvents.length > 0
|
||||
? `Found ${filteredEvents.length} event${
|
||||
|
|
@ -129,10 +129,10 @@
|
|||
class="group flex items-start gap-4 py-2 hover:opacity-80 transition-opacity"
|
||||
>
|
||||
<div class="flex-shrink-0 text-center">
|
||||
<div class="text-2xl font-bold text-ghost-100">
|
||||
<div class="text-2xl font-bold text-guild-100">
|
||||
{{ event.start.getDate() }}
|
||||
</div>
|
||||
<div class="text-xs text-ghost-400 uppercase">
|
||||
<div class="text-xs text-guild-400 uppercase">
|
||||
{{
|
||||
event.start.toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
|
|
@ -144,7 +144,7 @@
|
|||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-start gap-2 mb-1">
|
||||
<h3
|
||||
class="text-lg font-semibold text-ghost-100 group-hover:text-primary transition-colors"
|
||||
class="text-lg font-semibold text-guild-100 group-hover:text-primary transition-colors"
|
||||
>
|
||||
{{ event.title }}
|
||||
</h3>
|
||||
|
|
@ -155,7 +155,7 @@
|
|||
/>
|
||||
</div>
|
||||
|
||||
<p class="text-sm text-ghost-300 mb-2 line-clamp-2">
|
||||
<p class="text-sm text-guild-300 mb-2 line-clamp-2">
|
||||
{{ event.content }}
|
||||
</p>
|
||||
|
||||
|
|
@ -171,7 +171,7 @@
|
|||
|
||||
<Icon
|
||||
name="heroicons:arrow-right"
|
||||
class="w-5 h-5 text-ghost-400 group-hover:text-primary group-hover:translate-x-1 transition-all flex-shrink-0 mt-1"
|
||||
class="w-5 h-5 text-guild-400 group-hover:text-primary group-hover:translate-x-1 transition-all flex-shrink-0 mt-1"
|
||||
/>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
|
@ -183,13 +183,13 @@
|
|||
<ClientOnly>
|
||||
<div
|
||||
v-if="pending"
|
||||
class="min-h-[400px] bg-ghost-800 rounded-xl flex items-center justify-center"
|
||||
class="min-h-[400px] bg-guild-800 rounded-xl flex items-center justify-center"
|
||||
>
|
||||
<div class="text-center">
|
||||
<div
|
||||
class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4"
|
||||
></div>
|
||||
<p class="text-ghost-200">Loading calendar...</p>
|
||||
<p class="text-guild-200">Loading calendar...</p>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else style="min-height: 600px">
|
||||
|
|
@ -198,7 +198,7 @@
|
|||
:events="calendarEvents"
|
||||
:time="false"
|
||||
active-view="month"
|
||||
class="ghost-calendar"
|
||||
class="guild-calendar"
|
||||
:disable-views="['years', 'year']"
|
||||
:hide-view-selector="false"
|
||||
events-on-month-view="short"
|
||||
|
|
@ -209,13 +209,13 @@
|
|||
</div>
|
||||
<template #fallback>
|
||||
<div
|
||||
class="min-h-[400px] bg-ghost-800 rounded-xl flex items-center justify-center"
|
||||
class="min-h-[400px] bg-guild-800 rounded-xl flex items-center justify-center"
|
||||
>
|
||||
<div class="text-center">
|
||||
<div
|
||||
class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4"
|
||||
></div>
|
||||
<p class="text-ghost-200">Loading calendar...</p>
|
||||
<p class="text-guild-200">Loading calendar...</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -229,7 +229,7 @@
|
|||
|
||||
<!-- Event Series -->
|
||||
<div v-if="activeSeries.length > 0" class="text-center my-12">
|
||||
<h2 class="text-3xl font-bold text-ghost-100 mb-8">
|
||||
<h2 class="text-3xl font-bold text-guild-100 mb-8">
|
||||
Current Event Series
|
||||
</h2>
|
||||
</div>
|
||||
|
|
@ -242,17 +242,17 @@
|
|||
v-for="series in activeSeries.slice(0, 6)"
|
||||
:key="series.id"
|
||||
:to="`/series/${series.id}`"
|
||||
class="series-list-item block bg-ghost-800/50 dark:bg-ghost-700/30 rounded-xl p-6 border border-ghost-600 dark:border-ghost-600 hover:border-ghost-500 hover:bg-ghost-800/70 dark:hover:bg-ghost-700/50 transition-all duration-300"
|
||||
class="series-list-item block bg-guild-800/50 dark:bg-guild-700/30 rounded-xl p-6 border border-guild-600 dark:border-guild-600 hover:border-guild-500 hover:bg-guild-800/70 dark:hover:bg-guild-700/50 transition-all duration-300"
|
||||
>
|
||||
<div class="flex items-start justify-between mb-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<span
|
||||
class="series-list-item__label text-sm font-semibold text-ghost-300 dark:text-ghost-300"
|
||||
class="series-list-item__label text-sm font-semibold text-guild-300 dark:text-guild-300"
|
||||
>
|
||||
Event Series
|
||||
</span>
|
||||
<span
|
||||
class="series-list-item__count inline-flex items-center px-2 py-0.5 rounded-md bg-ghost-700/50 dark:bg-ghost-600/50 text-sm font-medium text-ghost-200 dark:text-ghost-200"
|
||||
class="series-list-item__count inline-flex items-center px-2 py-0.5 rounded-md bg-guild-700/50 dark:bg-guild-600/50 text-sm font-medium text-guild-200 dark:text-guild-200"
|
||||
>
|
||||
{{ series.eventCount }} events
|
||||
</span>
|
||||
|
|
@ -272,13 +272,13 @@
|
|||
</div>
|
||||
|
||||
<h3
|
||||
class="series-list-item__title text-lg font-semibold text-ghost-100 dark:text-ghost-100 mb-2"
|
||||
class="series-list-item__title text-lg font-semibold text-guild-100 dark:text-guild-100 mb-2"
|
||||
>
|
||||
{{ series.title }}
|
||||
</h3>
|
||||
|
||||
<p
|
||||
class="series-list-item__description text-sm text-ghost-300 dark:text-ghost-300 mb-4 line-clamp-2"
|
||||
class="series-list-item__description text-sm text-guild-300 dark:text-guild-300 mb-4 line-clamp-2"
|
||||
>
|
||||
{{ series.description }}
|
||||
</p>
|
||||
|
|
@ -291,31 +291,31 @@
|
|||
>
|
||||
<div class="flex items-center gap-2">
|
||||
<div
|
||||
class="series-list-item__event-number w-6 h-6 bg-ghost-700/50 dark:bg-ghost-600/50 text-ghost-200 dark:text-ghost-200 rounded-full flex items-center justify-center text-xs font-medium border border-ghost-600 dark:border-ghost-500"
|
||||
class="series-list-item__event-number w-6 h-6 bg-guild-700/50 dark:bg-guild-600/50 text-guild-200 dark:text-guild-200 rounded-full flex items-center justify-center text-xs font-medium border border-guild-600 dark:border-guild-500"
|
||||
>
|
||||
{{ event.series?.position || index + 1 }}
|
||||
</div>
|
||||
<span
|
||||
class="series-list-item__event-title text-ghost-200 dark:text-ghost-200 truncate"
|
||||
class="series-list-item__event-title text-guild-200 dark:text-guild-200 truncate"
|
||||
>{{ event.title }}</span
|
||||
>
|
||||
</div>
|
||||
<span
|
||||
class="series-list-item__event-date text-ghost-300 dark:text-ghost-300"
|
||||
class="series-list-item__event-date text-guild-300 dark:text-guild-300"
|
||||
>
|
||||
{{ formatEventDate(event.startDate) }}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="series.events.length > 3"
|
||||
class="series-list-item__more-events text-xs text-ghost-300 dark:text-ghost-300 text-center pt-1"
|
||||
class="series-list-item__more-events text-xs text-guild-300 dark:text-guild-300 text-center pt-1"
|
||||
>
|
||||
+{{ series.events.length - 3 }} more events
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="series-list-item__date-range text-sm text-ghost-300 dark:text-ghost-300"
|
||||
class="series-list-item__date-range text-sm text-guild-300 dark:text-guild-300"
|
||||
>
|
||||
{{ formatDateRange(series.startDate, series.endDate) }}
|
||||
</div>
|
||||
|
|
@ -323,27 +323,27 @@
|
|||
</div>
|
||||
|
||||
<!-- Attend Our Events -->
|
||||
<section class="py-20 bg-ghost-800 dark:bg-ghost-900">
|
||||
<section class="py-20 bg-guild-800 dark:bg-guild-900">
|
||||
<UContainer>
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-3xl font-bold text-ghost-100 mb-8">
|
||||
<h2 class="text-3xl font-bold text-guild-100 mb-8">
|
||||
Attend Our Events
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<div
|
||||
class="bg-ghost-900 rounded-2xl p-8 border border-ghost-700 mb-12"
|
||||
class="bg-guild-900 rounded-2xl p-8 border border-guild-700 mb-12"
|
||||
>
|
||||
<div class="prose prose-lg dark:prose-invert max-w-none">
|
||||
<p class="text-lg leading-relaxed text-ghost-200 mb-6">
|
||||
<p class="text-lg leading-relaxed text-guild-200 mb-6">
|
||||
Our events bring together game developers, founders, and practitioners
|
||||
who are building more equitable workplaces. From hands-on workshops
|
||||
about governance and finance to casual co-working sessions and game nights,
|
||||
there's something for every stage of your journey.
|
||||
</p>
|
||||
|
||||
<p class="text-lg leading-relaxed text-ghost-200 mb-6">
|
||||
<p class="text-lg leading-relaxed text-guild-200 mb-6">
|
||||
All events are designed to be accessible, with most offered free to members
|
||||
and sliding-scale pricing for non-members. Can't make it live?
|
||||
Many sessions are recorded and shared in our resource library.
|
||||
|
|
@ -353,31 +353,31 @@
|
|||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<div class="text-center">
|
||||
<h3 class="text-lg font-semibold text-ghost-100 mb-2">
|
||||
<h3 class="text-lg font-semibold text-guild-100 mb-2">
|
||||
Monthly Meetups
|
||||
</h3>
|
||||
|
||||
<p class="text-sm text-ghost-300">
|
||||
<p class="text-sm text-guild-300">
|
||||
Casual knowledge sharing sessions
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<h3 class="text-lg font-semibold text-ghost-100 mb-2">
|
||||
<h3 class="text-lg font-semibold text-guild-100 mb-2">
|
||||
Workshops
|
||||
</h3>
|
||||
|
||||
<p class="text-sm text-ghost-300">
|
||||
<p class="text-sm text-guild-300">
|
||||
Hands-on learning about cooperative and worker-centric business
|
||||
models
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<h3 class="text-lg font-semibold text-ghost-100 mb-2">
|
||||
<h3 class="text-lg font-semibold text-guild-100 mb-2">
|
||||
Social Events
|
||||
</h3>
|
||||
<p class="text-sm text-ghost-300">
|
||||
<p class="text-sm text-guild-300">
|
||||
Game nights, socials, and more
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -638,47 +638,47 @@ const getSeriesTypeBadgeClass = (type) => {
|
|||
}
|
||||
|
||||
/* Calendar styling based on tranzac design principles */
|
||||
.ghost-calendar :deep(.vuecal__event) {
|
||||
.guild-calendar :deep(.vuecal__event) {
|
||||
border-radius: 0.5rem;
|
||||
border: 2px solid #292524;
|
||||
transform: translateZ(0);
|
||||
transition: transform 300ms;
|
||||
}
|
||||
|
||||
.ghost-calendar :deep(.vuecal__event:hover) {
|
||||
.guild-calendar :deep(.vuecal__event:hover) {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.ghost-calendar :deep(.vuecal__event-title) {
|
||||
.guild-calendar :deep(.vuecal__event-title) {
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.ghost-calendar :deep(.vuecal__event-time) {
|
||||
.guild-calendar :deep(.vuecal__event-time) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ghost-calendar :deep(.vuecal__event.event-community) {
|
||||
.guild-calendar :deep(.vuecal__event.event-community) {
|
||||
background-color: #2563eb;
|
||||
color: #f5f5f4;
|
||||
border-color: #1d4ed8;
|
||||
}
|
||||
|
||||
.ghost-calendar :deep(.vuecal__event.event-workshop) {
|
||||
.guild-calendar :deep(.vuecal__event.event-workshop) {
|
||||
background-color: #059669;
|
||||
color: #f5f5f4;
|
||||
border-color: #047857;
|
||||
}
|
||||
|
||||
.ghost-calendar :deep(.vuecal__event.event-social) {
|
||||
.guild-calendar :deep(.vuecal__event.event-social) {
|
||||
background-color: #7c3aed;
|
||||
color: #f5f5f4;
|
||||
border-color: #6d28d9;
|
||||
}
|
||||
|
||||
.ghost-calendar :deep(.vuecal__event.event-showcase) {
|
||||
.guild-calendar :deep(.vuecal__event.event-showcase) {
|
||||
background-color: #d97706;
|
||||
color: #f5f5f4;
|
||||
border-color: #b45309;
|
||||
|
|
@ -829,7 +829,7 @@ const getSeriesTypeBadgeClass = (type) => {
|
|||
}
|
||||
|
||||
/* Ghost calendar theme */
|
||||
.ghost-calendar {
|
||||
.guild-calendar {
|
||||
--vuecal-primary-color: #fff;
|
||||
--vuecal-text-color: #e7e5e4;
|
||||
--vuecal-border-color: #57534e;
|
||||
|
|
@ -838,120 +838,120 @@ const getSeriesTypeBadgeClass = (type) => {
|
|||
background-color: #292524;
|
||||
}
|
||||
|
||||
.ghost-calendar :deep(.vuecal__bg) {
|
||||
.guild-calendar :deep(.vuecal__bg) {
|
||||
background-color: #292524;
|
||||
}
|
||||
|
||||
.ghost-calendar :deep(.vuecal__header) {
|
||||
.guild-calendar :deep(.vuecal__header) {
|
||||
background-color: #1c1917;
|
||||
border-bottom: 1px solid #57534e;
|
||||
}
|
||||
|
||||
.ghost-calendar :deep(.vuecal__title-bar) {
|
||||
.guild-calendar :deep(.vuecal__title-bar) {
|
||||
background-color: #1c1917;
|
||||
}
|
||||
|
||||
.ghost-calendar :deep(.vuecal__title) {
|
||||
.guild-calendar :deep(.vuecal__title) {
|
||||
color: #e7e5e4;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.ghost-calendar :deep(.vuecal__weekdays-headings) {
|
||||
.guild-calendar :deep(.vuecal__weekdays-headings) {
|
||||
background-color: #1c1917;
|
||||
border-bottom: 1px solid #57534e;
|
||||
}
|
||||
|
||||
.ghost-calendar :deep(.vuecal__heading) {
|
||||
.guild-calendar :deep(.vuecal__heading) {
|
||||
color: #a8a29e;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.ghost-calendar :deep(.vuecal__cell) {
|
||||
.guild-calendar :deep(.vuecal__cell) {
|
||||
background-color: #292524;
|
||||
border-color: #57534e;
|
||||
color: #e7e5e4;
|
||||
}
|
||||
|
||||
.ghost-calendar :deep(.vuecal__cell:hover) {
|
||||
.guild-calendar :deep(.vuecal__cell:hover) {
|
||||
background-color: #44403c;
|
||||
border-color: #78716c;
|
||||
}
|
||||
|
||||
.ghost-calendar :deep(.vuecal__cell-content) {
|
||||
.guild-calendar :deep(.vuecal__cell-content) {
|
||||
color: #e7e5e4;
|
||||
}
|
||||
|
||||
.ghost-calendar :deep(.vuecal__cell--today) {
|
||||
.guild-calendar :deep(.vuecal__cell--today) {
|
||||
background-color: rgba(59, 130, 246, 0.1);
|
||||
border: 2px solid #3b82f6;
|
||||
}
|
||||
|
||||
.ghost-calendar :deep(.vuecal__cell--out-of-scope) {
|
||||
.guild-calendar :deep(.vuecal__cell--out-of-scope) {
|
||||
background-color: #1c1917;
|
||||
color: #78716c;
|
||||
}
|
||||
|
||||
.ghost-calendar :deep(.vuecal__arrow) {
|
||||
.guild-calendar :deep(.vuecal__arrow) {
|
||||
color: #a8a29e;
|
||||
}
|
||||
|
||||
.ghost-calendar :deep(.vuecal__arrow:hover) {
|
||||
.guild-calendar :deep(.vuecal__arrow:hover) {
|
||||
background-color: #44403c;
|
||||
}
|
||||
|
||||
.ghost-calendar :deep(.vuecal__today-btn) {
|
||||
.guild-calendar :deep(.vuecal__today-btn) {
|
||||
background-color: #44403c;
|
||||
color: #fff;
|
||||
border: 1px solid #78716c;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.ghost-calendar :deep(.vuecal__today-btn:hover) {
|
||||
.guild-calendar :deep(.vuecal__today-btn:hover) {
|
||||
background-color: #57534e;
|
||||
border-color: #a8a29e;
|
||||
}
|
||||
|
||||
.ghost-calendar :deep(.vuecal__view-btn),
|
||||
.ghost-calendar :deep(button[class*="view"]) {
|
||||
.guild-calendar :deep(.vuecal__view-btn),
|
||||
.guild-calendar :deep(button[class*="view"]) {
|
||||
background-color: #44403c !important;
|
||||
color: #ffffff !important;
|
||||
border: 1px solid #78716c !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
.ghost-calendar :deep(.vuecal__view-btn:hover),
|
||||
.ghost-calendar :deep(button[class*="view"]:hover) {
|
||||
.guild-calendar :deep(.vuecal__view-btn:hover),
|
||||
.guild-calendar :deep(button[class*="view"]:hover) {
|
||||
background-color: #57534e !important;
|
||||
border-color: #a8a29e !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.ghost-calendar :deep(.vuecal__view-btn--active),
|
||||
.ghost-calendar :deep(button[class*="view"][class*="active"]) {
|
||||
.guild-calendar :deep(.vuecal__view-btn--active),
|
||||
.guild-calendar :deep(button[class*="view"][class*="active"]) {
|
||||
background-color: #0c0a09 !important;
|
||||
color: #ffffff !important;
|
||||
border-color: #a8a29e !important;
|
||||
}
|
||||
|
||||
.ghost-calendar :deep(.vuecal__view-btn--active:hover),
|
||||
.ghost-calendar :deep(button[class*="view"][class*="active"]:hover) {
|
||||
.guild-calendar :deep(.vuecal__view-btn--active:hover),
|
||||
.guild-calendar :deep(button[class*="view"][class*="active"]:hover) {
|
||||
background-color: #1c1917 !important;
|
||||
border-color: #d6d3d1 !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.ghost-calendar :deep(.vuecal__title-bar button) {
|
||||
.guild-calendar :deep(.vuecal__title-bar button) {
|
||||
color: #ffffff !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
.ghost-calendar :deep(.vuecal__title-bar .default-view-btn) {
|
||||
.guild-calendar :deep(.vuecal__title-bar .default-view-btn) {
|
||||
background-color: #44403c !important;
|
||||
color: #ffffff !important;
|
||||
border: 1px solid #78716c !important;
|
||||
}
|
||||
|
||||
.ghost-calendar :deep(.vuecal__title-bar .default-view-btn.active) {
|
||||
.guild-calendar :deep(.vuecal__title-bar .default-view-btn.active) {
|
||||
background-color: #0c0a09 !important;
|
||||
border-color: #a8a29e !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,109 +1,139 @@
|
|||
<template>
|
||||
<div class="relative">
|
||||
<!-- Experimental Hero Section -->
|
||||
<section class="mb-24">
|
||||
<div class="relative">
|
||||
<!-- Large artistic title -->
|
||||
<div class="max-w-6xl mx-auto px-6 md:px-8">
|
||||
<!-- Hero Section -->
|
||||
<section class="py-16 md:py-24">
|
||||
<div class="max-w-2xl">
|
||||
<h1
|
||||
class="text-6xl md:text-8xl font-bold text-ghost-100 ethereal-text leading-tight mb-8"
|
||||
class="text-4xl md:text-5xl font-light text-guild-100 leading-tight mb-2"
|
||||
>
|
||||
Become a Ghostie
|
||||
Build your co-op studio
|
||||
</h1>
|
||||
<p
|
||||
class="text-4xl md:text-5xl font-light text-guild-500 leading-tight mb-8"
|
||||
>
|
||||
with people who get it.
|
||||
</p>
|
||||
|
||||
<!-- Floating subtitle -->
|
||||
<div class="mb-16">
|
||||
<p class="text-ghost-100 text-lg max-w-md">
|
||||
A peer community for creatives and game devs<br />
|
||||
exploring cooperative models
|
||||
<p class="text-lg text-guild-400 leading-relaxed mb-8 max-w-xl">
|
||||
Ghost Guild is a peer community for game developers exploring
|
||||
cooperative models. Find support, share knowledge, grow together.
|
||||
</p>
|
||||
|
||||
<!-- Signup Form -->
|
||||
<form @submit.prevent="handleJoinSubmit" class="mb-4">
|
||||
<div class="flex flex-col sm:flex-row gap-3">
|
||||
<UInput
|
||||
v-model="joinEmail"
|
||||
type="email"
|
||||
placeholder="your.email@example.com"
|
||||
size="lg"
|
||||
class="flex-1"
|
||||
:disabled="isSubmitting"
|
||||
/>
|
||||
<UButton
|
||||
type="submit"
|
||||
size="lg"
|
||||
:loading="isSubmitting"
|
||||
:disabled="!isEmailValid"
|
||||
>
|
||||
Join Us
|
||||
</UButton>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<p class="text-sm text-guild-600">Free to join. Pay what you can.</p>
|
||||
|
||||
<!-- Success/Error Messages -->
|
||||
<div
|
||||
v-if="submitSuccess"
|
||||
class="mt-4 p-3 bg-primary-500/10 border border-primary-500/30 rounded-lg"
|
||||
>
|
||||
<p class="text-primary-400 text-sm">
|
||||
Check your email to complete signup!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Decorative elements -->
|
||||
<div
|
||||
class="absolute top-0 right-0 w-32 h-32 border border-ghost-800 rounded-full opacity-20"
|
||||
/>
|
||||
<div
|
||||
class="absolute top-20 -left-8 w-16 h-px bg-whisper-500 opacity-40"
|
||||
/>
|
||||
v-if="submitError"
|
||||
class="mt-4 p-3 bg-red-500/10 border border-red-500/30 rounded-lg"
|
||||
>
|
||||
<p class="text-red-400 text-sm">{{ submitError }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Join Section - Offset Layout -->
|
||||
<section class="mb-32 relative">
|
||||
<div>
|
||||
<!-- Value Props Section -->
|
||||
<section class="py-16 border-t border-guild-800">
|
||||
<div class="grid md:grid-cols-3 gap-8 md:gap-12">
|
||||
<div>
|
||||
<p class="text-sm font-medium text-primary-400 mb-3">Peer Support</p>
|
||||
<p class="text-guild-400 leading-relaxed">
|
||||
Connect with founders at your stage and practitioners who've been
|
||||
there. Real conversations, real help.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-medium text-primary-400 mb-3">
|
||||
Shared Knowledge
|
||||
</p>
|
||||
<p class="text-guild-400 leading-relaxed">
|
||||
Templates, governance docs, financial models—tools built by co-ops,
|
||||
for co-ops. All members get full access.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-medium text-primary-400 mb-3">
|
||||
Solidarity Economics
|
||||
</p>
|
||||
<p class="text-guild-400 leading-relaxed">
|
||||
Those who can, support those who can't. No tiers, no gatekeeping.
|
||||
Everyone gets everything.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Circles Section -->
|
||||
<section class="py-16 border-t border-guild-800">
|
||||
<p class="text-sm text-guild-600 mb-8">Find your people</p>
|
||||
|
||||
<div class="space-y-4 mb-8">
|
||||
<NuxtLink
|
||||
to="/join"
|
||||
class="inline-block px-8 py-3 border border-ghost-600 text-ghost-200 hover:bg-ghost-800 hover:border-whisper-500 hover:ethereal-text transition-all duration-500"
|
||||
v-for="circle in circles"
|
||||
:key="circle.value"
|
||||
to="/about/circles"
|
||||
class="flex items-baseline gap-8 group py-2"
|
||||
>
|
||||
Join Us Today →
|
||||
<span
|
||||
class="text-guild-300 group-hover:text-guild-100 transition-colors w-32 md:w-40"
|
||||
>
|
||||
{{ circle.label }}
|
||||
</span>
|
||||
<span class="text-guild-600">
|
||||
{{ circle.shortDescription }}
|
||||
</span>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
<!-- Decorative corner element -->
|
||||
<div
|
||||
class="absolute -right-4 top-0 w-20 h-20 border-t border-r border-ghost-800 opacity-30"
|
||||
/>
|
||||
<p class="text-sm text-guild-600 italic">
|
||||
These reflect your journey, not your status. Move between them as you
|
||||
grow.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!-- Circles - Asymmetrical Grid -->
|
||||
<section class="mb-32">
|
||||
<div class="space-y-8">
|
||||
<div
|
||||
v-for="(circle, index) in circles"
|
||||
:key="circle.value"
|
||||
class="flex gap-8 items-start"
|
||||
>
|
||||
<!-- Content -->
|
||||
<div class="flex-1 max-w-lg">
|
||||
<h3 class="text-xl text-ghost-100 mb-3">{{ circle.label }}</h3>
|
||||
<p class="text-ghost-200 text-sm leading-relaxed mb-4">
|
||||
{{ circle.description }}
|
||||
</p>
|
||||
|
||||
<!-- Features as inline text -->
|
||||
<div class="text-sm text-ghost-400">
|
||||
<span v-for="(feature, i) in circle.features" :key="feature">
|
||||
{{ feature
|
||||
}}<span v-if="i < circle.features.length - 1"> • </span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Side accent -->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Why Join? - Diagonal Layout -->
|
||||
<section class="mb-32 relative">
|
||||
<div class="transform -rotate-1">
|
||||
<h2 class="text-3xl font-light text-ghost-200 mb-12">Why Join?</h2>
|
||||
</div>
|
||||
|
||||
<div class="ml-12 relative">
|
||||
<div
|
||||
class="absolute -left-4 top-0 w-32 h-px bg-whisper-500 opacity-30 transform rotate-12"
|
||||
/>
|
||||
|
||||
<div class="max-w-2xl">
|
||||
<p class="text-ghost-300 leading-loose text-lg mb-8">
|
||||
Ghost Guild is Baby Ghosts' membership program, and a community of
|
||||
game makers building studios that center workers, not just profits.
|
||||
</p>
|
||||
|
||||
<p class="text-ghost-400 leading-relaxed ml-8">
|
||||
There's space for you no matter where you are in your cooperative
|
||||
journey and no matter where in the world you are! You'll find peers,
|
||||
resources, and support here.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="absolute -bottom-8 right-0 text-6xl text-ghost-800 opacity-20 font-bold"
|
||||
>
|
||||
?
|
||||
</div>
|
||||
</div>
|
||||
<!-- Bottom CTA Section -->
|
||||
<section class="py-24 border-t border-guild-800 text-center">
|
||||
<p class="text-sm text-guild-600 mb-4">Part of the Baby Ghosts family</p>
|
||||
<h2 class="text-3xl md:text-4xl font-light text-guild-200 mb-8">
|
||||
Ready to find your people?
|
||||
</h2>
|
||||
<UButton
|
||||
to="/join"
|
||||
variant="outline"
|
||||
size="lg"
|
||||
class="hover:bg-primary-500/10"
|
||||
>
|
||||
Become a Ghostie
|
||||
</UButton>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -111,5 +141,40 @@
|
|||
<script setup>
|
||||
import { getCircleOptions } from "~/config/circles";
|
||||
|
||||
definePageMeta({
|
||||
layout: "landing",
|
||||
});
|
||||
|
||||
const circles = getCircleOptions();
|
||||
|
||||
// Join form state
|
||||
const joinEmail = ref("");
|
||||
const isSubmitting = ref(false);
|
||||
const submitSuccess = ref(false);
|
||||
const submitError = ref("");
|
||||
|
||||
const isEmailValid = computed(() => {
|
||||
return joinEmail.value && joinEmail.value.includes("@");
|
||||
});
|
||||
|
||||
const handleJoinSubmit = async () => {
|
||||
if (!isEmailValid.value || isSubmitting.value) return;
|
||||
|
||||
isSubmitting.value = true;
|
||||
submitSuccess.value = false;
|
||||
submitError.value = "";
|
||||
|
||||
try {
|
||||
// Redirect to join page with email pre-filled
|
||||
await navigateTo({
|
||||
path: "/join",
|
||||
query: { email: joinEmail.value },
|
||||
});
|
||||
} catch (err) {
|
||||
console.error("Join error:", err);
|
||||
submitError.value = "Something went wrong. Please try again.";
|
||||
} finally {
|
||||
isSubmitting.value = false;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -16,9 +16,9 @@
|
|||
>
|
||||
<div class="text-center">
|
||||
<div
|
||||
class="w-8 h-8 border-4 border-whisper-500 border-t-transparent rounded-full animate-spin mx-auto mb-4"
|
||||
class="w-8 h-8 border-4 border-candlelight-500 border-t-transparent rounded-full animate-spin mx-auto mb-4"
|
||||
/>
|
||||
<p class="text-ghost-300">Loading your dashboard...</p>
|
||||
<p class="text-guild-300">Loading your dashboard...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -28,11 +28,11 @@
|
|||
class="flex justify-center items-center py-20"
|
||||
>
|
||||
<div class="text-center max-w-md">
|
||||
<div class="w-16 h-16 bg-ghost-800 border border-ghost-600 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<Icon name="heroicons:lock-closed" class="w-8 h-8 text-ghost-400" />
|
||||
<div class="w-16 h-16 bg-guild-800 border border-guild-600 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<Icon name="heroicons:lock-closed" class="w-8 h-8 text-guild-400" />
|
||||
</div>
|
||||
<h2 class="text-xl font-semibold text-ghost-100 mb-2">Sign in required</h2>
|
||||
<p class="text-ghost-400 mb-6">Please sign in to access your member dashboard.</p>
|
||||
<h2 class="text-xl font-semibold text-guild-100 mb-2">Sign in required</h2>
|
||||
<p class="text-guild-400 mb-6">Please sign in to access your member dashboard.</p>
|
||||
<UButton @click="openLoginModal({ title: 'Sign in to your dashboard', description: 'Enter your email to access your member dashboard' })">
|
||||
Sign In
|
||||
</UButton>
|
||||
|
|
@ -45,23 +45,23 @@
|
|||
<MemberStatusBanner :dismissible="true" />
|
||||
<!-- Welcome Card -->
|
||||
<UCard
|
||||
class="sparkle-field"
|
||||
|
||||
:ui="{
|
||||
root: 'bg-ghost-900 border border-ghost-700',
|
||||
header: 'border-b border-ghost-700',
|
||||
body: 'bg-ghost-900',
|
||||
root: 'bg-guild-900 border border-guild-700',
|
||||
header: 'border-b border-guild-700',
|
||||
body: 'bg-guild-900',
|
||||
}"
|
||||
>
|
||||
<template #header>
|
||||
<div class="flex items-start justify-between gap-4">
|
||||
<div class="flex-1">
|
||||
<h1 class="text-2xl font-bold text-ghost-100 ethereal-text">
|
||||
<h1 class="text-2xl font-bold text-guild-100 warm-text">
|
||||
Welcome to Ghost Guild, {{ memberData?.name }}!
|
||||
</h1>
|
||||
<p
|
||||
:class="[
|
||||
'mt-2',
|
||||
isActive ? 'text-ghost-300' : statusConfig.textColor,
|
||||
isActive ? 'text-guild-300' : statusConfig.textColor,
|
||||
]"
|
||||
>
|
||||
{{
|
||||
|
|
@ -78,7 +78,7 @@
|
|||
</div>
|
||||
<div v-else class="flex-shrink-0">
|
||||
<div
|
||||
class="w-16 h-16 bg-ghost-700 border border-ghost-600 flex items-center justify-center text-ghost-200 font-bold text-xl"
|
||||
class="w-16 h-16 bg-guild-700 border border-guild-600 flex items-center justify-center text-guild-200 font-bold text-xl"
|
||||
>
|
||||
{{ memberData?.name?.charAt(0)?.toUpperCase() }}
|
||||
</div>
|
||||
|
|
@ -87,14 +87,14 @@
|
|||
</template>
|
||||
|
||||
<div class="flex flex-wrap gap-4 text-sm">
|
||||
<div class="bg-ghost-800 border border-ghost-600 px-4 py-2">
|
||||
<span class="text-ghost-200">Circle:</span>
|
||||
<div class="bg-guild-800 border border-guild-600 px-4 py-2">
|
||||
<span class="text-guild-200">Circle:</span>
|
||||
<span class="font-medium text-stone-50 ml-1 capitalize">{{
|
||||
memberData?.circle
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="bg-ghost-800 border border-ghost-600 px-4 py-2">
|
||||
<span class="text-ghost-200">Contribution:</span>
|
||||
<div class="bg-guild-800 border border-guild-600 px-4 py-2">
|
||||
<span class="text-guild-200">Contribution:</span>
|
||||
<span class="font-medium text-stone-50 ml-1"
|
||||
>${{ memberData?.contributionTier }} CAD/month</span
|
||||
>
|
||||
|
|
@ -105,13 +105,13 @@
|
|||
<!-- Quick Links -->
|
||||
<UCard
|
||||
:ui="{
|
||||
root: 'bg-ghost-900 border border-ghost-700',
|
||||
header: 'border-b border-ghost-700 bg-ghost-900',
|
||||
body: 'bg-ghost-900',
|
||||
root: 'bg-guild-900 border border-guild-700',
|
||||
header: 'border-b border-guild-700 bg-guild-900',
|
||||
body: 'bg-guild-900',
|
||||
}"
|
||||
>
|
||||
<template #header>
|
||||
<h2 class="text-xl font-bold text-ghost-100 ethereal-text">
|
||||
<h2 class="text-xl font-bold text-guild-100 warm-text">
|
||||
Quick Links
|
||||
</h2>
|
||||
</template>
|
||||
|
|
@ -122,9 +122,9 @@
|
|||
variant="outline"
|
||||
:disabled="!canPeerSupport"
|
||||
:class="[
|
||||
'border-ghost-600 text-ghost-200 justify-start',
|
||||
'border-guild-600 text-guild-200 justify-start',
|
||||
canPeerSupport
|
||||
? 'hover:bg-ghost-800 hover:border-whisper-500'
|
||||
? 'hover:bg-guild-800 hover:border-candlelight-500'
|
||||
: 'opacity-50 cursor-not-allowed',
|
||||
]"
|
||||
block
|
||||
|
|
@ -141,7 +141,7 @@
|
|||
to="https://wiki.ghostguild.org"
|
||||
target="_blank"
|
||||
variant="outline"
|
||||
class="border-ghost-600 text-ghost-200 hover:bg-ghost-800 hover:border-whisper-500 justify-start"
|
||||
class="border-guild-600 text-guild-200 hover:bg-guild-800 hover:border-candlelight-500 justify-start"
|
||||
block
|
||||
>
|
||||
Browse Resources
|
||||
|
|
@ -150,7 +150,7 @@
|
|||
<UButton
|
||||
to="/member/profile"
|
||||
variant="outline"
|
||||
class="border-ghost-600 text-ghost-200 hover:bg-ghost-800 hover:border-whisper-500 justify-start"
|
||||
class="border-guild-600 text-guild-200 hover:bg-guild-800 hover:border-candlelight-500 justify-start"
|
||||
block
|
||||
>
|
||||
Update Profile
|
||||
|
|
@ -159,7 +159,7 @@
|
|||
<UButton
|
||||
to="/events"
|
||||
variant="outline"
|
||||
class="border-ghost-600 text-ghost-200 hover:bg-ghost-800 hover:border-whisper-500 justify-start"
|
||||
class="border-guild-600 text-guild-200 hover:bg-guild-800 hover:border-candlelight-500 justify-start"
|
||||
block
|
||||
>
|
||||
View Events
|
||||
|
|
@ -168,7 +168,7 @@
|
|||
<UButton
|
||||
to="/members"
|
||||
variant="outline"
|
||||
class="border-ghost-600 text-ghost-200 hover:bg-ghost-800 hover:border-whisper-500 justify-start"
|
||||
class="border-guild-600 text-guild-200 hover:bg-guild-800 hover:border-candlelight-500 justify-start"
|
||||
block
|
||||
>
|
||||
Browse Members
|
||||
|
|
@ -177,7 +177,7 @@
|
|||
<UButton
|
||||
to="/member/profile#account"
|
||||
variant="outline"
|
||||
class="border-ghost-600 text-ghost-200 hover:bg-ghost-800 hover:border-whisper-500 justify-start"
|
||||
class="border-guild-600 text-guild-200 hover:bg-guild-800 hover:border-candlelight-500 justify-start"
|
||||
block
|
||||
>
|
||||
Manage Account
|
||||
|
|
@ -188,14 +188,14 @@
|
|||
<!-- Your Registered Events -->
|
||||
<UCard
|
||||
:ui="{
|
||||
root: 'bg-ghost-900 border border-ghost-700',
|
||||
header: 'border-b border-ghost-700 bg-ghost-900',
|
||||
body: 'bg-ghost-900',
|
||||
root: 'bg-guild-900 border border-guild-700',
|
||||
header: 'border-b border-guild-700 bg-guild-900',
|
||||
body: 'bg-guild-900',
|
||||
}"
|
||||
>
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between">
|
||||
<h2 class="text-xl font-bold text-ghost-100 ethereal-text">
|
||||
<h2 class="text-xl font-bold text-guild-100 warm-text">
|
||||
Your Upcoming Events
|
||||
</h2>
|
||||
<div class="flex items-center gap-2">
|
||||
|
|
@ -204,7 +204,7 @@
|
|||
@click="copyCalendarLink"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
class="text-ghost-300 hover:text-ghost-100"
|
||||
class="text-guild-300 hover:text-guild-100"
|
||||
icon="heroicons:calendar"
|
||||
>
|
||||
{{
|
||||
|
|
@ -215,7 +215,7 @@
|
|||
to="/events"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
class="text-ghost-300 hover:text-ghost-100"
|
||||
class="text-guild-300 hover:text-guild-100"
|
||||
>
|
||||
Browse All Events
|
||||
</UButton>
|
||||
|
|
@ -225,7 +225,7 @@
|
|||
|
||||
<div v-if="loadingEvents" class="text-center py-8">
|
||||
<div
|
||||
class="w-6 h-6 border-2 border-whisper-500 border-t-transparent rounded-full animate-spin mx-auto"
|
||||
class="w-6 h-6 border-2 border-candlelight-500 border-t-transparent rounded-full animate-spin mx-auto"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
|
|
@ -234,7 +234,7 @@
|
|||
v-for="evt in registeredEvents"
|
||||
:key="evt._id"
|
||||
:to="`/events/${evt.slug || evt._id}`"
|
||||
class="block p-4 border border-ghost-700 hover:border-whisper-500 transition-colors"
|
||||
class="block p-4 border border-guild-700 hover:border-candlelight-500 transition-colors"
|
||||
>
|
||||
<div class="flex items-start gap-4">
|
||||
<div
|
||||
|
|
@ -252,18 +252,18 @@
|
|||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="flex-shrink-0 w-20 h-20 bg-ghost-800 border border-ghost-600 flex items-center justify-center"
|
||||
class="flex-shrink-0 w-20 h-20 bg-guild-800 border border-guild-600 flex items-center justify-center"
|
||||
>
|
||||
<Icon
|
||||
name="heroicons:calendar-days"
|
||||
class="w-8 h-8 text-whisper-400"
|
||||
class="w-8 h-8 text-candlelight-400"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<h3 class="font-semibold text-ghost-100 mb-1">
|
||||
<h3 class="font-semibold text-guild-100 mb-1">
|
||||
{{ evt.title }}
|
||||
</h3>
|
||||
<div class="flex items-center gap-4 text-sm text-ghost-400">
|
||||
<div class="flex items-center gap-4 text-sm text-guild-400">
|
||||
<span class="flex items-center gap-1">
|
||||
<Icon name="heroicons:calendar" class="w-4 h-4" />
|
||||
{{ formatEventDate(evt.startDate) }}
|
||||
|
|
@ -277,7 +277,7 @@
|
|||
<div class="flex-shrink-0">
|
||||
<Icon
|
||||
name="heroicons:chevron-right"
|
||||
class="w-5 h-5 text-ghost-500"
|
||||
class="w-5 h-5 text-guild-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -287,15 +287,15 @@
|
|||
<div v-else class="text-center py-8">
|
||||
<Icon
|
||||
name="heroicons:calendar-days"
|
||||
class="w-12 h-12 text-ghost-600 mx-auto mb-3"
|
||||
class="w-12 h-12 text-guild-600 mx-auto mb-3"
|
||||
/>
|
||||
<p class="text-ghost-400 mb-4">
|
||||
<p class="text-guild-400 mb-4">
|
||||
You haven't registered for any upcoming events
|
||||
</p>
|
||||
<UButton
|
||||
to="/events"
|
||||
size="sm"
|
||||
class="border-ghost-600 text-ghost-200 hover:bg-ghost-800 hover:border-whisper-500"
|
||||
class="border-guild-600 text-guild-200 hover:bg-guild-800 hover:border-candlelight-500"
|
||||
>
|
||||
Browse Events
|
||||
</UButton>
|
||||
|
|
@ -304,15 +304,15 @@
|
|||
<!-- Calendar subscription instructions -->
|
||||
<div
|
||||
v-if="registeredEvents.length > 0 && showCalendarInstructions"
|
||||
class="mt-4 p-4 bg-ghost-800 border border-ghost-600"
|
||||
class="mt-4 p-4 bg-guild-800 border border-guild-600"
|
||||
>
|
||||
<div class="flex items-start justify-between gap-4">
|
||||
<div class="flex-1">
|
||||
<h4 class="text-sm font-semibold text-ghost-100 mb-2">
|
||||
<h4 class="text-sm font-semibold text-guild-100 mb-2">
|
||||
How to Subscribe to Your Calendar
|
||||
</h4>
|
||||
<ul
|
||||
class="text-xs text-ghost-300 space-y-1 list-disc list-inside"
|
||||
class="text-xs text-guild-300 space-y-1 list-disc list-inside"
|
||||
>
|
||||
<li>
|
||||
<strong>Google Calendar:</strong> Click "+" → "From URL" →
|
||||
|
|
@ -327,14 +327,14 @@
|
|||
→ Paste the link
|
||||
</li>
|
||||
</ul>
|
||||
<p class="text-xs text-ghost-400 mt-2">
|
||||
<p class="text-xs text-guild-400 mt-2">
|
||||
Your calendar will automatically update when you register or
|
||||
unregister from events.
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
@click="showCalendarInstructions = false"
|
||||
class="text-ghost-400 hover:text-ghost-200"
|
||||
class="text-guild-400 hover:text-guild-200"
|
||||
>
|
||||
<Icon name="heroicons:x-mark" class="w-5 h-5" />
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -11,8 +11,8 @@
|
|||
<UContainer class="px-4">
|
||||
<!-- Stats -->
|
||||
<div v-if="isAuthenticated && !pending" class="mb-8 flex items-center justify-between">
|
||||
<div class="text-ghost-300">
|
||||
<span class="text-2xl font-bold text-ghost-100">{{ total }}</span>
|
||||
<div class="text-guild-300">
|
||||
<span class="text-2xl font-bold text-guild-100">{{ total }}</span>
|
||||
{{ total === 1 ? "update" : "updates" }} posted
|
||||
</div>
|
||||
<UButton to="/updates/new" icon="i-lucide-plus"> New Update </UButton>
|
||||
|
|
@ -25,9 +25,9 @@
|
|||
>
|
||||
<div class="text-center">
|
||||
<div
|
||||
class="w-8 h-8 border-4 border-ghost-500 border-t-transparent rounded-full animate-spin mx-auto mb-4"
|
||||
class="w-8 h-8 border-4 border-guild-500 border-t-transparent rounded-full animate-spin mx-auto mb-4"
|
||||
></div>
|
||||
<p class="text-ghost-400">Loading your updates...</p>
|
||||
<p class="text-guild-400">Loading your updates...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -37,11 +37,11 @@
|
|||
class="flex justify-center items-center py-20"
|
||||
>
|
||||
<div class="text-center max-w-md">
|
||||
<div class="w-16 h-16 bg-ghost-800 border border-ghost-600 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<Icon name="heroicons:lock-closed" class="w-8 h-8 text-ghost-400" />
|
||||
<div class="w-16 h-16 bg-guild-800 border border-guild-600 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<Icon name="heroicons:lock-closed" class="w-8 h-8 text-guild-400" />
|
||||
</div>
|
||||
<h2 class="text-xl font-semibold text-ghost-100 mb-2">Sign in required</h2>
|
||||
<p class="text-ghost-400 mb-6">Please sign in to view your updates.</p>
|
||||
<h2 class="text-xl font-semibold text-guild-100 mb-2">Sign in required</h2>
|
||||
<p class="text-guild-400 mb-6">Please sign in to view your updates.</p>
|
||||
<UButton @click="openLoginModal({ title: 'Sign in to view your updates', description: 'Enter your email to access your updates' })">
|
||||
Sign In
|
||||
</UButton>
|
||||
|
|
@ -79,7 +79,7 @@
|
|||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
class="text-ghost-600"
|
||||
class="text-guild-600"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
|
|
@ -89,10 +89,10 @@
|
|||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-medium text-ghost-300 mb-2">
|
||||
<h3 class="text-lg font-medium text-guild-300 mb-2">
|
||||
No updates yet
|
||||
</h3>
|
||||
<p class="text-ghost-400 mb-6">
|
||||
<p class="text-guild-400 mb-6">
|
||||
Share your first update with the community
|
||||
</p>
|
||||
<UButton to="/updates/new" icon="i-lucide-plus">
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
<div
|
||||
class="w-8 h-8 border-4 border-blue-500 border-t-transparent rounded-full animate-spin mx-auto mb-4"
|
||||
></div>
|
||||
<p class="text-gray-600 dark:text-ghost-400">
|
||||
<p class="text-gray-600 dark:text-guild-400">
|
||||
Loading your profile...
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -30,11 +30,11 @@
|
|||
class="flex justify-center items-center py-20"
|
||||
>
|
||||
<div class="text-center max-w-md">
|
||||
<div class="w-16 h-16 bg-ghost-800 border border-ghost-600 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<Icon name="heroicons:lock-closed" class="w-8 h-8 text-ghost-400" />
|
||||
<div class="w-16 h-16 bg-guild-800 border border-guild-600 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<Icon name="heroicons:lock-closed" class="w-8 h-8 text-guild-400" />
|
||||
</div>
|
||||
<h2 class="text-xl font-semibold text-ghost-100 mb-2">Sign in required</h2>
|
||||
<p class="text-ghost-400 mb-6">Please sign in to access your profile settings.</p>
|
||||
<h2 class="text-xl font-semibold text-guild-100 mb-2">Sign in required</h2>
|
||||
<p class="text-guild-400 mb-6">Please sign in to access your profile settings.</p>
|
||||
<UButton @click="openLoginModal({ title: 'Sign in to your profile', description: 'Enter your email to manage your profile settings' })">
|
||||
Sign In
|
||||
</UButton>
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
<!-- Basic Information -->
|
||||
<div>
|
||||
<h2
|
||||
class="text-2xl font-semibold mb-8 text-gray-900 dark:text-ghost-100 ethereal-text"
|
||||
class="text-2xl font-semibold mb-8 text-gray-900 dark:text-guild-100 warm-text"
|
||||
>
|
||||
Basic Information
|
||||
</h2>
|
||||
|
|
@ -124,7 +124,7 @@
|
|||
:class="
|
||||
formData.avatar === ghost.value
|
||||
? 'border-blue-400 bg-blue-500/20'
|
||||
: 'border-ghost-700 bg-ghost-800/50 hover:border-ghost-600'
|
||||
: 'border-guild-700 bg-guild-800/50 hover:border-guild-600'
|
||||
"
|
||||
@click="formData.avatar = ghost.value"
|
||||
>
|
||||
|
|
@ -153,7 +153,7 @@
|
|||
<!-- Professional Info -->
|
||||
<div>
|
||||
<h2
|
||||
class="text-2xl font-semibold mb-8 text-gray-900 dark:text-ghost-100 ethereal-text"
|
||||
class="text-2xl font-semibold mb-8 text-gray-900 dark:text-guild-100 warm-text"
|
||||
>
|
||||
Professional Information
|
||||
</h2>
|
||||
|
|
@ -222,7 +222,7 @@
|
|||
<!-- Community Connections -->
|
||||
<div>
|
||||
<h2
|
||||
class="text-2xl font-semibold mb-8 text-gray-900 dark:text-ghost-100 ethereal-text"
|
||||
class="text-2xl font-semibold mb-8 text-gray-900 dark:text-guild-100 warm-text"
|
||||
>
|
||||
Community Connections
|
||||
</h2>
|
||||
|
|
@ -238,7 +238,7 @@
|
|||
<!-- Tags input -->
|
||||
<div>
|
||||
<label
|
||||
class="block text-sm font-medium text-gray-800 dark:text-ghost-200 mb-2"
|
||||
class="block text-sm font-medium text-gray-800 dark:text-guild-200 mb-2"
|
||||
>
|
||||
Skills & Topics
|
||||
</label>
|
||||
|
|
@ -270,7 +270,7 @@
|
|||
<!-- Description textarea -->
|
||||
<div>
|
||||
<label
|
||||
class="block text-sm font-medium text-gray-800 dark:text-ghost-200 mb-2"
|
||||
class="block text-sm font-medium text-gray-800 dark:text-guild-200 mb-2"
|
||||
>
|
||||
Details
|
||||
</label>
|
||||
|
|
@ -300,7 +300,7 @@
|
|||
<!-- Tags input -->
|
||||
<div>
|
||||
<label
|
||||
class="block text-sm font-medium text-gray-800 dark:text-ghost-200 mb-2"
|
||||
class="block text-sm font-medium text-gray-800 dark:text-guild-200 mb-2"
|
||||
>
|
||||
Skills & Topics
|
||||
</label>
|
||||
|
|
@ -332,7 +332,7 @@
|
|||
<!-- Description textarea -->
|
||||
<div>
|
||||
<label
|
||||
class="block text-sm font-medium text-gray-800 dark:text-ghost-200 mb-2"
|
||||
class="block text-sm font-medium text-gray-800 dark:text-guild-200 mb-2"
|
||||
>
|
||||
Details
|
||||
</label>
|
||||
|
|
@ -357,7 +357,7 @@
|
|||
<!-- Peer Support -->
|
||||
<div>
|
||||
<h2
|
||||
class="text-2xl font-semibold mb-8 text-gray-900 dark:text-ghost-100 ethereal-text"
|
||||
class="text-2xl font-semibold mb-8 text-gray-900 dark:text-guild-100 warm-text"
|
||||
>
|
||||
Peer Support
|
||||
</h2>
|
||||
|
|
@ -368,12 +368,12 @@
|
|||
<USwitch v-model="formData.peerSupportEnabled" />
|
||||
<div>
|
||||
<p
|
||||
class="font-medium text-gray-800 dark:text-ghost-200"
|
||||
class="font-medium text-gray-800 dark:text-guild-200"
|
||||
>
|
||||
Offer Peer Support
|
||||
</p>
|
||||
<p
|
||||
class="text-sm text-gray-600 dark:text-ghost-400 mt-1"
|
||||
class="text-sm text-gray-600 dark:text-guild-400 mt-1"
|
||||
>
|
||||
Make yourself available to support other members
|
||||
</p>
|
||||
|
|
@ -478,7 +478,7 @@
|
|||
/>
|
||||
<template #hint>
|
||||
<span
|
||||
class="text-xs text-gray-500 dark:text-ghost-500"
|
||||
class="text-xs text-gray-500 dark:text-guild-500"
|
||||
>
|
||||
{{ formData.peerSupportMessage?.length || 0 }}/200
|
||||
characters
|
||||
|
|
@ -506,7 +506,7 @@
|
|||
<!-- Directory Settings -->
|
||||
<div>
|
||||
<h2
|
||||
class="text-2xl font-semibold mb-8 text-gray-900 dark:text-ghost-100 ethereal-text"
|
||||
class="text-2xl font-semibold mb-8 text-gray-900 dark:text-guild-100 warm-text"
|
||||
>
|
||||
Directory Visibility
|
||||
</h2>
|
||||
|
|
@ -514,10 +514,10 @@
|
|||
<div class="flex items-start gap-4">
|
||||
<USwitch v-model="formData.showInDirectory" />
|
||||
<div>
|
||||
<p class="font-medium text-gray-800 dark:text-ghost-200">
|
||||
<p class="font-medium text-gray-800 dark:text-guild-200">
|
||||
Show in Member Directory
|
||||
</p>
|
||||
<p class="text-sm text-gray-600 dark:text-ghost-400 mt-1">
|
||||
<p class="text-sm text-gray-600 dark:text-guild-400 mt-1">
|
||||
Allow other members to discover and connect with you
|
||||
through the directory
|
||||
</p>
|
||||
|
|
@ -544,7 +544,7 @@
|
|||
|
||||
<!-- Actions -->
|
||||
<div
|
||||
class="flex justify-between items-center pt-4 border-t border-ghost-800/50"
|
||||
class="flex justify-between items-center pt-4 border-t border-guild-800/50"
|
||||
>
|
||||
<UButton
|
||||
type="button"
|
||||
|
|
@ -574,20 +574,20 @@
|
|||
<!-- Current Membership -->
|
||||
<div>
|
||||
<h2
|
||||
class="text-2xl font-semibold mb-6 text-gray-900 dark:text-ghost-100 ethereal-text"
|
||||
class="text-2xl font-semibold mb-6 text-gray-900 dark:text-guild-100 warm-text"
|
||||
>
|
||||
Current Membership
|
||||
</h2>
|
||||
|
||||
<div
|
||||
class="backdrop-blur-sm bg-white/80 dark:bg-ghost-800/50 border border-gray-200 dark:border-ghost-700 rounded-lg p-6 space-y-4"
|
||||
class="backdrop-blur-sm bg-white/80 dark:bg-guild-800/50 border border-gray-200 dark:border-guild-700 rounded-lg p-6 space-y-4"
|
||||
>
|
||||
<!-- Status Badge -->
|
||||
<div
|
||||
class="flex items-center justify-between pb-4 border-b border-gray-200 dark:border-ghost-700"
|
||||
class="flex items-center justify-between pb-4 border-b border-gray-200 dark:border-guild-700"
|
||||
>
|
||||
<div>
|
||||
<p class="text-sm text-gray-600 dark:text-ghost-400">
|
||||
<p class="text-sm text-gray-600 dark:text-guild-400">
|
||||
Membership Status
|
||||
</p>
|
||||
<div class="flex items-center gap-2 mt-1">
|
||||
|
|
@ -620,21 +620,21 @@
|
|||
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<p class="text-sm text-gray-600 dark:text-ghost-400">
|
||||
<p class="text-sm text-gray-600 dark:text-guild-400">
|
||||
Circle
|
||||
</p>
|
||||
<p
|
||||
class="text-lg font-medium text-gray-900 dark:text-ghost-100 capitalize"
|
||||
class="text-lg font-medium text-gray-900 dark:text-guild-100 capitalize"
|
||||
>
|
||||
{{ memberData.circle }}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm text-gray-600 dark:text-ghost-400">
|
||||
<p class="text-sm text-gray-600 dark:text-guild-400">
|
||||
Contribution Level
|
||||
</p>
|
||||
<p
|
||||
class="text-lg font-medium text-gray-900 dark:text-ghost-100"
|
||||
class="text-lg font-medium text-gray-900 dark:text-guild-100"
|
||||
>
|
||||
${{ contributionTierDetails?.amount }}/month
|
||||
</p>
|
||||
|
|
@ -642,10 +642,10 @@
|
|||
</div>
|
||||
|
||||
<div v-if="memberData.subscriptionStartDate">
|
||||
<p class="text-sm text-gray-600 dark:text-ghost-400">
|
||||
<p class="text-sm text-gray-600 dark:text-guild-400">
|
||||
Member Since
|
||||
</p>
|
||||
<p class="text-gray-900 dark:text-ghost-100">
|
||||
<p class="text-gray-900 dark:text-guild-100">
|
||||
{{ formatDate(memberData.subscriptionStartDate) }}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -656,10 +656,10 @@
|
|||
memberData.contributionTier !== '0'
|
||||
"
|
||||
>
|
||||
<p class="text-sm text-gray-600 dark:text-ghost-400">
|
||||
<p class="text-sm text-gray-600 dark:text-guild-400">
|
||||
Next Billing Date
|
||||
</p>
|
||||
<p class="text-gray-900 dark:text-ghost-100">
|
||||
<p class="text-gray-900 dark:text-guild-100">
|
||||
{{ formatDate(memberData.nextBillingDate) }}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -669,15 +669,15 @@
|
|||
<!-- Change Contribution Level -->
|
||||
<div>
|
||||
<h2
|
||||
class="text-2xl font-semibold mb-6 text-gray-900 dark:text-ghost-100 ethereal-text"
|
||||
class="text-2xl font-semibold mb-6 text-gray-900 dark:text-guild-100 warm-text"
|
||||
>
|
||||
Change Contribution Level
|
||||
</h2>
|
||||
|
||||
<div
|
||||
class="backdrop-blur-sm bg-white/80 dark:bg-ghost-800/50 border border-gray-200 dark:border-ghost-700 rounded-lg p-6"
|
||||
class="backdrop-blur-sm bg-white/80 dark:bg-guild-800/50 border border-gray-200 dark:border-guild-700 rounded-lg p-6"
|
||||
>
|
||||
<p class="text-gray-700 dark:text-ghost-300 mb-6">
|
||||
<p class="text-gray-700 dark:text-guild-300 mb-6">
|
||||
Choose a new contribution level that works for you.
|
||||
Changes will take effect on your next billing cycle.
|
||||
</p>
|
||||
|
|
@ -691,14 +691,14 @@
|
|||
'w-full text-left p-4 rounded-lg border-2 transition-all',
|
||||
selectedContributionTier === tier.value
|
||||
? 'border-blue-400 bg-blue-500/20'
|
||||
: 'border-gray-300 dark:border-ghost-600 bg-gray-50 dark:bg-ghost-900/30 hover:border-blue-300 dark:hover:border-ghost-500',
|
||||
: 'border-gray-300 dark:border-guild-600 bg-gray-50 dark:bg-guild-900/30 hover:border-blue-300 dark:hover:border-guild-500',
|
||||
]"
|
||||
@click="selectedContributionTier = tier.value"
|
||||
>
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p
|
||||
class="font-medium text-gray-900 dark:text-ghost-100"
|
||||
class="font-medium text-gray-900 dark:text-guild-100"
|
||||
>
|
||||
{{ tier.label }}
|
||||
</p>
|
||||
|
|
@ -745,20 +745,20 @@
|
|||
<!-- Cancel Membership -->
|
||||
<div>
|
||||
<h2
|
||||
class="text-2xl font-semibold mb-6 text-gray-900 dark:text-ghost-100 ethereal-text"
|
||||
class="text-2xl font-semibold mb-6 text-gray-900 dark:text-guild-100 warm-text"
|
||||
>
|
||||
Cancel Membership
|
||||
</h2>
|
||||
|
||||
<div
|
||||
class="backdrop-blur-sm bg-white/80 dark:bg-ghost-800/50 border border-gray-200 dark:border-ghost-700 rounded-lg p-6"
|
||||
class="backdrop-blur-sm bg-white/80 dark:bg-guild-800/50 border border-gray-200 dark:border-guild-700 rounded-lg p-6"
|
||||
>
|
||||
<p class="text-gray-700 dark:text-ghost-300 mb-4">
|
||||
<p class="text-gray-700 dark:text-guild-300 mb-4">
|
||||
We're sorry to see you go. If you cancel, you'll lose
|
||||
access to member benefits at the end of your current
|
||||
billing period.
|
||||
</p>
|
||||
<p class="text-sm text-gray-600 dark:text-ghost-400 mb-6">
|
||||
<p class="text-sm text-gray-600 dark:text-guild-400 mb-6">
|
||||
Need a break? Consider switching to the free tier instead.
|
||||
</p>
|
||||
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@
|
|||
<!-- Skills Filter -->
|
||||
<div v-if="availableSkills && availableSkills.length > 0">
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="text-sm text-ghost-400 mr-2 self-center"
|
||||
<span class="text-sm text-guild-400 mr-2 self-center"
|
||||
>Filter by skill:</span
|
||||
>
|
||||
<button
|
||||
|
|
@ -57,7 +57,7 @@
|
|||
:class="
|
||||
selectedSkills.includes(skill)
|
||||
? 'bg-purple-100 dark:bg-purple-500/20 text-purple-700 dark:text-purple-300 border-purple-300 dark:border-purple-500/50'
|
||||
: 'bg-gray-100 dark:bg-ghost-800/50 text-gray-700 dark:text-ghost-400 border-gray-300 dark:border-ghost-700 hover:border-gray-400 dark:hover:border-ghost-600'
|
||||
: 'bg-gray-100 dark:bg-guild-800/50 text-gray-700 dark:text-guild-400 border-gray-300 dark:border-guild-700 hover:border-gray-400 dark:hover:border-guild-600'
|
||||
"
|
||||
@click="toggleSkill(skill)"
|
||||
>
|
||||
|
|
@ -81,7 +81,7 @@
|
|||
<!-- Peer Support Topics Filter -->
|
||||
<div v-if="availableTopics && availableTopics.length > 0">
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="text-sm text-ghost-400 mr-2 self-center"
|
||||
<span class="text-sm text-guild-400 mr-2 self-center"
|
||||
>Filter by peer support topic:</span
|
||||
>
|
||||
<button
|
||||
|
|
@ -95,7 +95,7 @@
|
|||
:class="
|
||||
selectedTopics.includes(topic)
|
||||
? 'bg-purple-100 dark:bg-purple-500/20 text-purple-700 dark:text-purple-300 border-purple-300 dark:border-purple-500/50'
|
||||
: 'bg-gray-100 dark:bg-ghost-800/50 text-gray-700 dark:text-ghost-400 border-gray-300 dark:border-ghost-700 hover:border-gray-400 dark:hover:border-ghost-600'
|
||||
: 'bg-gray-100 dark:bg-guild-800/50 text-gray-700 dark:text-guild-400 border-gray-300 dark:border-guild-700 hover:border-gray-400 dark:hover:border-guild-600'
|
||||
"
|
||||
@click="toggleTopic(topic)"
|
||||
>
|
||||
|
|
@ -126,7 +126,7 @@
|
|||
"
|
||||
class="flex items-center gap-2 text-sm flex-wrap"
|
||||
>
|
||||
<span class="text-ghost-400">Active filters:</span>
|
||||
<span class="text-guild-400">Active filters:</span>
|
||||
<span
|
||||
v-if="selectedCircle && selectedCircle !== 'all'"
|
||||
class="px-2 py-1 bg-purple-100 dark:bg-purple-500/20 text-purple-700 dark:text-purple-300 rounded-full border border-purple-300 dark:border-purple-500/30 flex items-center gap-1"
|
||||
|
|
@ -173,13 +173,13 @@
|
|||
<div
|
||||
class="w-8 h-8 border-4 border-purple-500 border-t-transparent rounded-full animate-spin mx-auto mb-4"
|
||||
></div>
|
||||
<p class="text-ghost-400">Loading members...</p>
|
||||
<p class="text-guild-400">Loading members...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Members List -->
|
||||
<div v-else-if="members.length > 0">
|
||||
<div class="mb-4 text-ghost-400 text-sm">
|
||||
<div class="mb-4 text-guild-400 text-sm">
|
||||
{{ totalCount }} {{ totalCount === 1 ? "member" : "members" }} found
|
||||
</div>
|
||||
|
||||
|
|
@ -187,7 +187,7 @@
|
|||
<div
|
||||
v-for="member in members"
|
||||
:key="member._id"
|
||||
class="relative backdrop-blur-sm bg-ghost-900/50 border border-ghost-700/50 rounded-lg p-6 hover:border-purple-500/50 transition-all group"
|
||||
class="relative backdrop-blur-sm bg-guild-900/50 border border-guild-700/50 rounded-lg p-6 hover:border-purple-500/50 transition-all group"
|
||||
>
|
||||
<!-- Peer Support Sticker Badge -->
|
||||
<PeerSupportBadge
|
||||
|
|
@ -199,7 +199,7 @@
|
|||
<div class="flex items-start gap-4 mb-4">
|
||||
<!-- Avatar -->
|
||||
<div
|
||||
class="w-16 h-16 rounded-lg bg-ghost-800 border border-ghost-700 flex items-center justify-center flex-shrink-0 group-hover:border-purple-500/50 transition-colors"
|
||||
class="w-16 h-16 rounded-lg bg-guild-800 border border-guild-700 flex items-center justify-center flex-shrink-0 group-hover:border-purple-500/50 transition-colors"
|
||||
>
|
||||
<img
|
||||
v-if="member.avatar"
|
||||
|
|
@ -207,16 +207,16 @@
|
|||
:alt="member.name"
|
||||
class="w-12 h-12 object-contain"
|
||||
/>
|
||||
<span v-else class="text-2xl text-ghost-600">👻</span>
|
||||
<span v-else class="text-2xl text-guild-600">👻</span>
|
||||
</div>
|
||||
|
||||
<!-- Name and Meta Info -->
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-baseline gap-2 flex-wrap mb-2">
|
||||
<h3 class="font-semibold text-lg text-ghost-100">
|
||||
<h3 class="font-semibold text-lg text-guild-100">
|
||||
{{ member.name }}
|
||||
</h3>
|
||||
<span v-if="member.pronouns" class="text-sm text-ghost-400">
|
||||
<span v-if="member.pronouns" class="text-sm text-guild-400">
|
||||
{{ member.pronouns }}
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -227,13 +227,13 @@
|
|||
>
|
||||
{{ circleLabels[member.circle] }}
|
||||
</span>
|
||||
<span v-if="member.studio" class="text-sm text-ghost-400">
|
||||
<span v-if="member.studio" class="text-sm text-guild-400">
|
||||
{{ member.studio }}
|
||||
</span>
|
||||
<span v-if="member.location" class="text-sm text-ghost-500">
|
||||
<span v-if="member.location" class="text-sm text-guild-500">
|
||||
📍 {{ member.location }}
|
||||
</span>
|
||||
<span v-if="member.timeZone" class="text-sm text-ghost-500">
|
||||
<span v-if="member.timeZone" class="text-sm text-guild-500">
|
||||
🕐 {{ member.timeZone }}
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -243,7 +243,7 @@
|
|||
<!-- Bio -->
|
||||
<div
|
||||
v-if="member.bio"
|
||||
class="mb-4 text-ghost-300 text-sm leading-relaxed prose prose-invert prose-sm max-w-none"
|
||||
class="mb-4 text-guild-300 text-sm leading-relaxed prose prose-invert prose-sm max-w-none"
|
||||
v-html="renderMarkdown(member.bio)"
|
||||
></div>
|
||||
|
||||
|
|
@ -280,7 +280,7 @@
|
|||
<!-- Personal Message -->
|
||||
<div
|
||||
v-if="member.peerSupport.personalMessage"
|
||||
class="text-sm text-ghost-300 italic mb-2"
|
||||
class="text-sm text-guild-300 italic mb-2"
|
||||
>
|
||||
"{{ member.peerSupport.personalMessage }}"
|
||||
</div>
|
||||
|
|
@ -288,7 +288,7 @@
|
|||
<!-- Availability -->
|
||||
<div
|
||||
v-if="member.peerSupport.availability"
|
||||
class="text-xs text-ghost-400 mb-2"
|
||||
class="text-xs text-guild-400 mb-2"
|
||||
>
|
||||
Availability: {{ member.peerSupport.availability }}
|
||||
</div>
|
||||
|
|
@ -326,7 +326,7 @@
|
|||
</h5>
|
||||
<p
|
||||
v-if="member.offering.description"
|
||||
class="text-ghost-300 text-sm"
|
||||
class="text-guild-300 text-sm"
|
||||
>
|
||||
{{ member.offering.description }}
|
||||
</p>
|
||||
|
|
@ -353,7 +353,7 @@
|
|||
</h5>
|
||||
<p
|
||||
v-if="member.lookingFor.description"
|
||||
class="text-ghost-300 text-sm"
|
||||
class="text-guild-300 text-sm"
|
||||
>
|
||||
{{ member.lookingFor.description }}
|
||||
</p>
|
||||
|
|
@ -386,7 +386,7 @@
|
|||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
class="text-ghost-600"
|
||||
class="text-guild-600"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
|
|
@ -396,10 +396,10 @@
|
|||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-medium text-ghost-300 mb-2">
|
||||
<h3 class="text-lg font-medium text-guild-300 mb-2">
|
||||
No members found
|
||||
</h3>
|
||||
<p class="text-ghost-400 mb-6">
|
||||
<p class="text-guild-400 mb-6">
|
||||
Try adjusting your search or filters
|
||||
</p>
|
||||
<UButton variant="outline" @click="clearAllFilters">
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
size="large"
|
||||
/>
|
||||
|
||||
<section class="py-16 bg-ghost-900">
|
||||
<section class="py-16 bg-guild-900">
|
||||
<UContainer>
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<!-- Welcome Message -->
|
||||
|
|
@ -26,17 +26,17 @@
|
|||
class="w-full h-full object-contain"
|
||||
/>
|
||||
</div>
|
||||
<h2 class="text-2xl font-bold text-ghost-100 mb-4">
|
||||
<h2 class="text-2xl font-bold text-guild-100 mb-4">
|
||||
Hey {{ memberData?.name || "there" }}!
|
||||
</h2>
|
||||
<p class="text-lg text-ghost-300 max-w-2xl mx-auto">
|
||||
<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-ghost-800/50 rounded-xl border border-ghost-700">
|
||||
<div class="p-6 bg-guild-800/50 rounded-xl border border-guild-700">
|
||||
<div
|
||||
class="w-12 h-12 bg-purple-500/20 rounded-lg flex items-center justify-center mb-4"
|
||||
>
|
||||
|
|
@ -45,10 +45,10 @@
|
|||
class="w-6 h-6 text-purple-400"
|
||||
/>
|
||||
</div>
|
||||
<h3 class="font-semibold text-ghost-100 mb-2">
|
||||
<h3 class="font-semibold text-guild-100 mb-2">
|
||||
1. Complete Your Profile
|
||||
</h3>
|
||||
<p class="text-sm text-ghost-400 mb-4">
|
||||
<p class="text-sm text-guild-400 mb-4">
|
||||
Tell the community about yourself, your skills, and what you're
|
||||
looking for.
|
||||
</p>
|
||||
|
|
@ -57,7 +57,7 @@
|
|||
</UButton>
|
||||
</div>
|
||||
|
||||
<div class="p-6 bg-ghost-800/50 rounded-xl border border-ghost-700">
|
||||
<div class="p-6 bg-guild-800/50 rounded-xl border border-guild-700">
|
||||
<div
|
||||
class="w-12 h-12 bg-blue-500/20 rounded-lg flex items-center justify-center mb-4"
|
||||
>
|
||||
|
|
@ -66,10 +66,10 @@
|
|||
class="w-6 h-6 text-blue-400"
|
||||
/>
|
||||
</div>
|
||||
<h3 class="font-semibold text-ghost-100 mb-2">
|
||||
<h3 class="font-semibold text-guild-100 mb-2">
|
||||
2. Join an Event
|
||||
</h3>
|
||||
<p class="text-sm text-ghost-400 mb-4">
|
||||
<p class="text-sm text-guild-400 mb-4">
|
||||
From workshops to game nights, events are the heart of our
|
||||
community.
|
||||
</p>
|
||||
|
|
@ -78,16 +78,16 @@
|
|||
</UButton>
|
||||
</div>
|
||||
|
||||
<div class="p-6 bg-ghost-800/50 rounded-xl border border-ghost-700">
|
||||
<div class="p-6 bg-guild-800/50 rounded-xl border border-guild-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">
|
||||
<h3 class="font-semibold text-guild-100 mb-2">
|
||||
3. Meet the Community
|
||||
</h3>
|
||||
<p class="text-sm text-ghost-400 mb-4">
|
||||
<p class="text-sm text-guild-400 mb-4">
|
||||
Connect with other members and find peers for support and
|
||||
collaboration.
|
||||
</p>
|
||||
|
|
@ -99,12 +99,12 @@
|
|||
|
||||
<!-- About Circles -->
|
||||
<div
|
||||
class="p-8 bg-ghost-800/30 rounded-2xl border border-ghost-700 mb-16"
|
||||
class="p-8 bg-guild-800/30 rounded-2xl border border-guild-700 mb-16"
|
||||
>
|
||||
<h3 class="text-xl font-bold text-ghost-100 mb-4">
|
||||
<h3 class="text-xl font-bold text-guild-100 mb-4">
|
||||
Understanding Circles
|
||||
</h3>
|
||||
<p class="text-ghost-300 mb-6">
|
||||
<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.
|
||||
|
|
@ -116,10 +116,10 @@
|
|||
:class="
|
||||
memberData?.circle === 'community'
|
||||
? 'bg-purple-500/20 border border-purple-500/50'
|
||||
: 'bg-ghost-800/50'
|
||||
: 'bg-guild-800/50'
|
||||
"
|
||||
>
|
||||
<h4 class="font-semibold text-ghost-100 mb-2">
|
||||
<h4 class="font-semibold text-guild-100 mb-2">
|
||||
Community Circle
|
||||
<span
|
||||
v-if="memberData?.circle === 'community'"
|
||||
|
|
@ -127,7 +127,7 @@
|
|||
>← You're here</span
|
||||
>
|
||||
</h4>
|
||||
<p class="text-sm text-ghost-400">
|
||||
<p class="text-sm text-guild-400">
|
||||
For those exploring solidarity economics and alternative
|
||||
studio models.
|
||||
</p>
|
||||
|
|
@ -138,10 +138,10 @@
|
|||
:class="
|
||||
memberData?.circle === 'founder'
|
||||
? 'bg-purple-500/20 border border-purple-500/50'
|
||||
: 'bg-ghost-800/50'
|
||||
: 'bg-guild-800/50'
|
||||
"
|
||||
>
|
||||
<h4 class="font-semibold text-ghost-100 mb-2">
|
||||
<h4 class="font-semibold text-guild-100 mb-2">
|
||||
Founder Circle
|
||||
<span
|
||||
v-if="memberData?.circle === 'founder'"
|
||||
|
|
@ -149,7 +149,7 @@
|
|||
>← You're here</span
|
||||
>
|
||||
</h4>
|
||||
<p class="text-sm text-ghost-400">
|
||||
<p class="text-sm text-guild-400">
|
||||
For those actively building or running a cooperative or
|
||||
solidarity-based studio.
|
||||
</p>
|
||||
|
|
@ -160,10 +160,10 @@
|
|||
:class="
|
||||
memberData?.circle === 'practitioner'
|
||||
? 'bg-purple-500/20 border border-purple-500/50'
|
||||
: 'bg-ghost-800/50'
|
||||
: 'bg-guild-800/50'
|
||||
"
|
||||
>
|
||||
<h4 class="font-semibold text-ghost-100 mb-2">
|
||||
<h4 class="font-semibold text-guild-100 mb-2">
|
||||
Practitioner Circle
|
||||
<span
|
||||
v-if="memberData?.circle === 'practitioner'"
|
||||
|
|
@ -171,7 +171,7 @@
|
|||
>← You're here</span
|
||||
>
|
||||
</h4>
|
||||
<p class="text-sm text-ghost-400">
|
||||
<p class="text-sm text-guild-400">
|
||||
For consultants, advisors, and professionals supporting
|
||||
cooperative game studios.
|
||||
</p>
|
||||
|
|
@ -181,9 +181,9 @@
|
|||
|
||||
<!-- Resources -->
|
||||
<div
|
||||
class="p-8 bg-ghost-800/30 rounded-2xl border border-ghost-700 mb-16"
|
||||
class="p-8 bg-guild-800/30 rounded-2xl border border-guild-700 mb-16"
|
||||
>
|
||||
<h3 class="text-xl font-bold text-ghost-100 mb-4">
|
||||
<h3 class="text-xl font-bold text-guild-100 mb-4">
|
||||
Resources & Support
|
||||
</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
|
|
@ -197,10 +197,10 @@
|
|||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold text-ghost-100 mb-1">
|
||||
<h4 class="font-semibold text-guild-100 mb-1">
|
||||
Resource Library
|
||||
</h4>
|
||||
<p class="text-sm text-ghost-400 mb-2">
|
||||
<p class="text-sm text-guild-400 mb-2">
|
||||
Templates, guides, and tools for building solidarity-based
|
||||
studios.
|
||||
</p>
|
||||
|
|
@ -226,10 +226,10 @@
|
|||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold text-ghost-100 mb-1">
|
||||
<h4 class="font-semibold text-guild-100 mb-1">
|
||||
Peer Support
|
||||
</h4>
|
||||
<p class="text-sm text-ghost-400 mb-2">
|
||||
<p class="text-sm text-guild-400 mb-2">
|
||||
Connect 1:1 with community members for advice and support.
|
||||
</p>
|
||||
<UButton
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue