jennie/ghostguild-org
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Readying for design

Browse source
This commit is contained in:
Jennie Robinson Faber 2026-03-04 18:24:20 +00:00
parent d73256ca2b
commit fadf473dde
50 changed files with 1478 additions and 1259 deletions
Download patch file Download diff file Expand all files Collapse all files

50
app/pages/join.vue
View file

@ -5,14 +5,12 @@
v-if="!isAuthenticated"
title="Join Ghost Guild"
subtitle=""
theme="gray"
size="large"
/>
<PageHeader
v-else
title="You're Already a Member!"
:subtitle="`Welcome back, ${memberData?.name || 'member'}. You're already part of Ghost Guild in the ${memberData?.circle || 'community'} circle.`"
theme="gray"
size="large"
/>
@ -20,7 +18,7 @@
<section class="py-20 bg-[--ui-bg-elevated]">
<UContainer>
<div class="max-w-2xl">
<h2 class="text-3xl font-bold text-[--ui-text] mb-6">
<h2 class="text-display font-bold text-[--ui-text] mb-6">
How Membership Works
</h2>
<p class="text-lg text-[--ui-text] mb-4">
@ -41,7 +39,7 @@
<section v-if="!isAuthenticated" class="py-20 bg-[--ui-bg]">
<UContainer class="max-w-4xl">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-[--ui-text] mb-4">
<h2 class="text-display font-bold text-[--ui-text] mb-4">
Membership Sign Up
</h2>
</div>
@ -52,10 +50,10 @@
<div class="flex items-center">
<div
:class="[
'w-10 h-10 rounded-full flex items-center justify-center font-semibold',
'w-10 h-10 rounded-full flex items-center justify-center text-ui-mono font-semibold',
currentStep >= 1
? 'bg-neutral-900 text-neutral-50'
: 'bg-neutral-200 text-neutral-500',
? 'bg-guild-800 text-candlelight-400'
: 'bg-guild-700 text-guild-500',
]"
>
1
@ -63,16 +61,16 @@
<span
class="ml-2 font-medium"
:class="
currentStep === 1 ? 'text-[--ui-text]' : 'text-neutral-500'
currentStep === 1 ? 'text-[--ui-text]' : 'text-guild-500'
"
>
Information
</span>
</div>
<div v-if="needsPayment" class="w-16 h-1 bg-neutral-200">
<div v-if="needsPayment" class="w-16 h-1 bg-guild-700">
<div
class="h-full bg-neutral-900 transition-all"
class="h-full bg-candlelight-500 transition-all"
:style="{ width: currentStep >= 2 ? '100%' : '0%' }"
/>
</div>
@ -80,10 +78,10 @@
<div v-if="needsPayment" class="flex items-center">
<div
:class="[
'w-10 h-10 rounded-full flex items-center justify-center font-semibold',
'w-10 h-10 rounded-full flex items-center justify-center text-ui-mono font-semibold',
currentStep >= 2
? 'bg-neutral-900 text-neutral-50'
: 'bg-neutral-200 text-neutral-500',
? 'bg-guild-800 text-candlelight-400'
: 'bg-guild-700 text-guild-500',
]"
>
2
@ -91,16 +89,16 @@
<span
class="ml-2 font-medium"
:class="
currentStep === 2 ? 'text-[--ui-text]' : 'text-neutral-500'
currentStep === 2 ? 'text-[--ui-text]' : 'text-guild-500'
"
>
Payment
</span>
</div>
<div class="w-16 h-1 bg-neutral-200">
<div class="w-16 h-1 bg-guild-700">
<div
class="h-full bg-neutral-900 transition-all"
class="h-full bg-candlelight-500 transition-all"
:style="{ width: currentStep >= 3 ? '100%' : '0%' }"
/>
</div>
@ -108,10 +106,10 @@
<div class="flex items-center">
<div
:class="[
'w-10 h-10 rounded-full flex items-center justify-center font-semibold',
'w-10 h-10 rounded-full flex items-center justify-center text-ui-mono font-semibold',
currentStep >= 3
? 'bg-neutral-900 text-neutral-50'
: 'bg-neutral-200 text-neutral-500',
? 'bg-guild-800 text-candlelight-400'
: 'bg-guild-700 text-guild-500',
]"
>
<span v-if="needsPayment">3</span>
@ -120,7 +118,7 @@
<span
class="ml-2 font-medium"
:class="
currentStep === 3 ? 'text-[--ui-text]' : 'text-neutral-500'
currentStep === 3 ? 'text-[--ui-text]' : 'text-guild-500'
"
>
Confirmation
@ -231,7 +229,7 @@
class="bg-[--ui-bg-elevated] rounded-xl p-8"
>
<div class="mb-6">
<h3 class="text-2xl font-bold text-[--ui-text] mb-2">
<h3 class="text-display-sm font-bold text-[--ui-text] mb-2">
Payment Information
</h3>
<p class="text-[--ui-text-muted]">
@ -273,10 +271,10 @@
>
<div class="text-center">
<div
class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6"
class="w-20 h-20 bg-candlelight-900/20 rounded-full flex items-center justify-center mx-auto mb-6"
>
<svg
class="w-10 h-10 text-green-500"
class="w-10 h-10 text-candlelight-400"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
@ -290,7 +288,7 @@
</svg>
</div>
<h3 class="text-2xl font-bold text-[--ui-text] mb-4">
<h3 class="text-display-sm font-bold text-[--ui-text] mb-4">
Welcome to Ghost Guild!
</h3>
@ -353,7 +351,7 @@
<section v-if="isAuthenticated" class="py-20 bg-[--ui-bg]">
<UContainer class="max-w-4xl">
<div class="bg-[--ui-bg-elevated] rounded-xl p-8 mb-8">
<h2 class="text-2xl font-bold text-[--ui-text] mb-6">
<h2 class="text-display-sm font-bold text-[--ui-text] mb-6">
Your Membership
</h2>
@ -387,7 +385,7 @@
</div>
</div>
<div class="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-6">
<div class="bg-guild-800 rounded-lg p-6">
<h3 class="text-lg font-semibold text-[--ui-text] mb-3">
Want to change your circle or contribution?
</h3>