Add light/dark mode support with CSS variables
This commit is contained in:
parent
970b185151
commit
fb02688166
25 changed files with 1293 additions and 1177 deletions
|
|
@ -9,13 +9,13 @@
|
|||
/>
|
||||
|
||||
<!-- Membership Sign Up Form -->
|
||||
<section class="py-20 bg-white dark:bg-gray-900">
|
||||
<section class="py-20 bg-[--ui-bg]">
|
||||
<UContainer class="max-w-4xl">
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
<h2 class="text-3xl font-bold text-[--ui-text] mb-4">
|
||||
Membership Sign Up
|
||||
</h2>
|
||||
<p class="text-lg text-gray-700 dark:text-gray-300">
|
||||
<p class="text-lg text-[--ui-text]">
|
||||
Choose your circle to connect with others at your stage. Choose your
|
||||
contribution based on what you can afford. Everyone gets full
|
||||
access.
|
||||
|
|
@ -30,8 +30,8 @@
|
|||
:class="[
|
||||
'w-10 h-10 rounded-full flex items-center justify-center font-semibold',
|
||||
currentStep >= 1
|
||||
? 'bg-gray-900 dark:bg-white text-white dark:text-gray-900'
|
||||
: 'bg-gray-200 dark:bg-gray-700 text-gray-500',
|
||||
? 'bg-neutral-900 text-neutral-50'
|
||||
: 'bg-neutral-200 text-neutral-500',
|
||||
]"
|
||||
>
|
||||
1
|
||||
|
|
@ -39,21 +39,16 @@
|
|||
<span
|
||||
class="ml-2 font-medium"
|
||||
:class="
|
||||
currentStep === 1
|
||||
? 'text-gray-900 dark:text-white'
|
||||
: 'text-gray-500'
|
||||
currentStep === 1 ? 'text-[--ui-text]' : 'text-neutral-500'
|
||||
"
|
||||
>
|
||||
Information
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="needsPayment"
|
||||
class="w-16 h-1 bg-gray-200 dark:bg-gray-700"
|
||||
>
|
||||
<div v-if="needsPayment" class="w-16 h-1 bg-neutral-200">
|
||||
<div
|
||||
class="h-full bg-gray-900 dark:bg-white transition-all"
|
||||
class="h-full bg-neutral-900 transition-all"
|
||||
:style="{ width: currentStep >= 2 ? '100%' : '0%' }"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -63,8 +58,8 @@
|
|||
:class="[
|
||||
'w-10 h-10 rounded-full flex items-center justify-center font-semibold',
|
||||
currentStep >= 2
|
||||
? 'bg-gray-900 dark:bg-white text-white dark:text-gray-900'
|
||||
: 'bg-gray-200 dark:bg-gray-700 text-gray-500',
|
||||
? 'bg-neutral-900 text-neutral-50'
|
||||
: 'bg-neutral-200 text-neutral-500',
|
||||
]"
|
||||
>
|
||||
2
|
||||
|
|
@ -72,18 +67,16 @@
|
|||
<span
|
||||
class="ml-2 font-medium"
|
||||
:class="
|
||||
currentStep === 2
|
||||
? 'text-gray-900 dark:text-white'
|
||||
: 'text-gray-500'
|
||||
currentStep === 2 ? 'text-[--ui-text]' : 'text-neutral-500'
|
||||
"
|
||||
>
|
||||
Payment
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="w-16 h-1 bg-gray-200 dark:bg-gray-700">
|
||||
<div class="w-16 h-1 bg-neutral-200">
|
||||
<div
|
||||
class="h-full bg-gray-900 dark:bg-white transition-all"
|
||||
class="h-full bg-neutral-900 transition-all"
|
||||
:style="{ width: currentStep >= 3 ? '100%' : '0%' }"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -93,8 +86,8 @@
|
|||
:class="[
|
||||
'w-10 h-10 rounded-full flex items-center justify-center font-semibold',
|
||||
currentStep >= 3
|
||||
? 'bg-gray-900 dark:bg-white text-white dark:text-gray-900'
|
||||
: 'bg-gray-200 dark:bg-gray-700 text-gray-500',
|
||||
? 'bg-neutral-900 text-neutral-50'
|
||||
: 'bg-neutral-200 text-neutral-500',
|
||||
]"
|
||||
>
|
||||
<span v-if="needsPayment">3</span>
|
||||
|
|
@ -103,9 +96,7 @@
|
|||
<span
|
||||
class="ml-2 font-medium"
|
||||
:class="
|
||||
currentStep === 3
|
||||
? 'text-gray-900 dark:text-white'
|
||||
: 'text-gray-500'
|
||||
currentStep === 3 ? 'text-[--ui-text]' : 'text-neutral-500'
|
||||
"
|
||||
>
|
||||
Confirmation
|
||||
|
|
@ -120,7 +111,7 @@
|
|||
</div>
|
||||
|
||||
<!-- Step 1: Information -->
|
||||
<div v-if="currentStep === 1" class="bg-white dark:bg-gray-800">
|
||||
<div v-if="currentStep === 1" class="bg-[--ui-bg-elevated]">
|
||||
<UForm :state="form" class="space-y-8" @submit="handleSubmit">
|
||||
<!-- Personal Information -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
|
|
@ -154,8 +145,8 @@
|
|||
class="flex flex-col p-6 rounded-lg border-2 cursor-pointer transition-all hover:shadow-md"
|
||||
:class="
|
||||
form.circle === option.value
|
||||
? 'border-gray-900 dark:border-white bg-gray-50 dark:bg-gray-800'
|
||||
: 'border-gray-200 dark:border-gray-700 hover:border-gray-400 dark:hover:border-gray-500'
|
||||
? 'border-neutral-900 bg-[--ui-bg]'
|
||||
: 'border-neutral-200 hover:border-neutral-400'
|
||||
"
|
||||
>
|
||||
<input
|
||||
|
|
@ -166,12 +157,12 @@
|
|||
class="mb-3"
|
||||
/>
|
||||
<div class="font-medium text-lg mb-2">{{ option.label }}</div>
|
||||
<div class="text-sm text-gray-600 dark:text-gray-400">
|
||||
<div class="text-sm text-[--ui-text-muted]">
|
||||
{{ option.description }}
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mt-3 italic">
|
||||
<p class="text-sm text-[--ui-text-muted] mt-3 italic">
|
||||
Not sure? Start with Community - you can always move.
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -213,23 +204,23 @@
|
|||
<!-- Step 2: Payment -->
|
||||
<div
|
||||
v-if="currentStep === 2"
|
||||
class="bg-white dark:bg-gray-800 rounded-xl p-8"
|
||||
class="bg-[--ui-bg-elevated] rounded-xl p-8"
|
||||
>
|
||||
<div class="mb-6">
|
||||
<h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-2">
|
||||
<h3 class="text-2xl font-bold text-[--ui-text] mb-2">
|
||||
Payment Information
|
||||
</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400">
|
||||
<p class="text-[--ui-text-muted]">
|
||||
You're signing up for the {{ selectedTier.label }} plan
|
||||
</p>
|
||||
<p class="text-lg font-semibold text-gray-900 dark:text-white mt-2">
|
||||
<p class="text-lg font-semibold text-[--ui-text] mt-2">
|
||||
${{ selectedTier.amount }} CAD / month
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Payment Instructions -->
|
||||
<div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-6 mb-6">
|
||||
<p class="text-gray-700 dark:text-gray-300">
|
||||
<div class="bg-[--ui-bg] rounded-lg p-6 mb-6">
|
||||
<p class="text-[--ui-text]">
|
||||
Click "Complete Payment" below to open the secure payment modal
|
||||
and verify your payment method.
|
||||
</p>
|
||||
|
|
@ -254,11 +245,11 @@
|
|||
<!-- Step 3: Confirmation -->
|
||||
<div
|
||||
v-if="currentStep === 3"
|
||||
class="bg-white dark:bg-gray-800 rounded-xl p-8"
|
||||
class="bg-[--ui-bg-elevated] rounded-xl p-8"
|
||||
>
|
||||
<div class="text-center">
|
||||
<div
|
||||
class="w-20 h-20 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center mx-auto mb-6"
|
||||
class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6"
|
||||
>
|
||||
<svg
|
||||
class="w-10 h-10 text-green-500"
|
||||
|
|
@ -275,7 +266,7 @@
|
|||
</svg>
|
||||
</div>
|
||||
|
||||
<h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
<h3 class="text-2xl font-bold text-[--ui-text] mb-4">
|
||||
Welcome to Ghost Guild!
|
||||
</h3>
|
||||
|
||||
|
|
@ -283,43 +274,39 @@
|
|||
<UAlert color="green" :title="successMessage" />
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="bg-gray-50 dark:bg-gray-700 rounded-lg p-6 mb-6 text-left"
|
||||
>
|
||||
<div class="bg-[--ui-bg] rounded-lg p-6 mb-6 text-left">
|
||||
<h4 class="font-semibold mb-3">Membership Details:</h4>
|
||||
<dl class="space-y-2">
|
||||
<div class="flex justify-between">
|
||||
<dt class="text-gray-600 dark:text-gray-400">Name:</dt>
|
||||
<dt class="text-[--ui-text-muted]">Name:</dt>
|
||||
<dd class="font-medium">{{ form.name }}</dd>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<dt class="text-gray-600 dark:text-gray-400">Email:</dt>
|
||||
<dt class="text-[--ui-text-muted]">Email:</dt>
|
||||
<dd class="font-medium">{{ form.email }}</dd>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<dt class="text-gray-600 dark:text-gray-400">Circle:</dt>
|
||||
<dt class="text-[--ui-text-muted]">Circle:</dt>
|
||||
<dd class="font-medium capitalize">{{ form.circle }}</dd>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<dt class="text-gray-600 dark:text-gray-400">
|
||||
Contribution:
|
||||
</dt>
|
||||
<dt class="text-[--ui-text-muted]">Contribution:</dt>
|
||||
<dd class="font-medium">{{ selectedTier.label }}</dd>
|
||||
</div>
|
||||
<div v-if="customerCode" class="flex justify-between">
|
||||
<dt class="text-gray-600 dark:text-gray-400">Member ID:</dt>
|
||||
<dt class="text-[--ui-text-muted]">Member ID:</dt>
|
||||
<dd class="font-medium">{{ customerCode }}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<p class="text-gray-600 dark:text-gray-400 mb-4">
|
||||
<p class="text-[--ui-text-muted] mb-4">
|
||||
We've sent a confirmation email to {{ form.email }} with your
|
||||
membership details.
|
||||
</p>
|
||||
|
||||
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 mb-8">
|
||||
<p class="text-gray-700 dark:text-gray-300 text-center">
|
||||
<div class="bg-[--ui-bg] rounded-lg p-4 mb-8">
|
||||
<p class="text-[--ui-text] text-center">
|
||||
You will be automatically redirected to your dashboard in a few
|
||||
seconds...
|
||||
</p>
|
||||
|
|
@ -339,14 +326,14 @@
|
|||
</section>
|
||||
|
||||
<!-- How Ghost Guild Works -->
|
||||
<section class="py-20 bg-gray-50 dark:bg-gray-800">
|
||||
<section class="py-20 bg-[--ui-bg-elevated]">
|
||||
<UContainer>
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
<h2 class="text-3xl font-bold text-[--ui-text] mb-4">
|
||||
How Ghost Guild Works
|
||||
</h2>
|
||||
<p class="text-lg text-gray-700 dark:text-gray-300">
|
||||
<p class="text-lg text-[--ui-text]">
|
||||
Every member gets everything. Your circle helps you find relevant
|
||||
content and peers. Your contribution helps sustain our solidarity
|
||||
economy.
|
||||
|
|
@ -355,13 +342,11 @@
|
|||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<!-- Full Access -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl p-6">
|
||||
<h3
|
||||
class="text-xl font-semibold mb-4 text-gray-900 dark:text-white"
|
||||
>
|
||||
<div class="bg-[--ui-bg] rounded-xl p-6">
|
||||
<h3 class="text-xl font-semibold mb-4 text-[--ui-text]">
|
||||
Full Access
|
||||
</h3>
|
||||
<ul class="text-gray-700 dark:text-gray-300 space-y-2">
|
||||
<ul class="text-[--ui-text] space-y-2">
|
||||
<li>Complete resource library</li>
|
||||
<li>All workshops and events</li>
|
||||
<li>Slack community</li>
|
||||
|
|
@ -371,13 +356,11 @@
|
|||
</div>
|
||||
|
||||
<!-- Circle-Specific Guidance -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl p-6">
|
||||
<h3
|
||||
class="text-xl font-semibold mb-4 text-gray-900 dark:text-white"
|
||||
>
|
||||
<div class="bg-[--ui-bg] rounded-xl p-6">
|
||||
<h3 class="text-xl font-semibold mb-4 text-[--ui-text]">
|
||||
Circle-Specific Guidance
|
||||
</h3>
|
||||
<ul class="text-gray-700 dark:text-gray-300 space-y-2">
|
||||
<ul class="text-[--ui-text] space-y-2">
|
||||
<li>Curated resources for your stage</li>
|
||||
<li>Connection with peers on similar journeys</li>
|
||||
<li>Relevant workshop recommendations</li>
|
||||
|
|
@ -390,25 +373,23 @@
|
|||
</section>
|
||||
|
||||
<!-- How to Join -->
|
||||
<section class="py-20 bg-white dark:bg-gray-900">
|
||||
<section class="py-20 bg-[--ui-bg]">
|
||||
<UContainer>
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<div class="space-y-8">
|
||||
<div class="flex items-start gap-6">
|
||||
<div class="flex-shrink-0">
|
||||
<div
|
||||
class="w-12 h-12 bg-gray-900 dark:bg-white rounded-full flex items-center justify-center text-white dark:text-gray-900 font-bold text-xl"
|
||||
class="w-12 h-12 bg-neutral-900 rounded-full flex items-center justify-center text-neutral-50 font-bold text-xl"
|
||||
>
|
||||
1
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3
|
||||
class="text-xl font-semibold mb-2 text-gray-900 dark:text-white"
|
||||
>
|
||||
<h3 class="text-xl font-semibold mb-2 text-[--ui-text]">
|
||||
Pick your circle
|
||||
</h3>
|
||||
<p class="text-gray-700 dark:text-gray-300">
|
||||
<p class="text-[--ui-text]">
|
||||
Where are you in your co-op journey? Select based on where you
|
||||
are in your cooperative journey - exploring, building, or
|
||||
practicing. Not sure? Start with Community.
|
||||
|
|
@ -419,18 +400,16 @@
|
|||
<div class="flex items-start gap-6">
|
||||
<div class="flex-shrink-0">
|
||||
<div
|
||||
class="w-12 h-12 bg-gray-900 dark:bg-white rounded-full flex items-center justify-center text-white dark:text-gray-900 font-bold text-xl"
|
||||
class="w-12 h-12 bg-neutral-900 rounded-full flex items-center justify-center text-neutral-50 font-bold text-xl"
|
||||
>
|
||||
2
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3
|
||||
class="text-xl font-semibold mb-2 text-gray-900 dark:text-white"
|
||||
>
|
||||
<h3 class="text-xl font-semibold mb-2 text-[--ui-text]">
|
||||
Choose your contribution
|
||||
</h3>
|
||||
<p class="text-gray-700 dark:text-gray-300">
|
||||
<p class="text-[--ui-text]">
|
||||
What can you afford? ($0-50+/month) Choose based on your
|
||||
financial capacity. From $0 for those who need support to $50+
|
||||
for those who can sponsor others. You can adjust anytime.
|
||||
|
|
@ -441,18 +420,16 @@
|
|||
<div class="flex items-start gap-6">
|
||||
<div class="flex-shrink-0">
|
||||
<div
|
||||
class="w-12 h-12 bg-gray-900 dark:bg-white rounded-full flex items-center justify-center text-white dark:text-gray-900 font-bold text-xl"
|
||||
class="w-12 h-12 bg-neutral-900 rounded-full flex items-center justify-center text-neutral-50 font-bold text-xl"
|
||||
>
|
||||
3
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3
|
||||
class="text-xl font-semibold mb-2 text-gray-900 dark:text-white"
|
||||
>
|
||||
<h3 class="text-xl font-semibold mb-2 text-[--ui-text]">
|
||||
Join the community
|
||||
</h3>
|
||||
<p class="text-gray-700 dark:text-gray-300">
|
||||
<p class="text-[--ui-text]">
|
||||
Get instant access to everything. Fill out your profile, agree
|
||||
to our community guidelines, and complete payment (if
|
||||
applicable). You'll get instant access to our community.
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue