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,22 +9,22 @@
|
|||
/>
|
||||
|
||||
<!-- How Ghost Guild Works -->
|
||||
<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">
|
||||
<h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-6">
|
||||
<h2 class="text-3xl font-bold text-[--ui-text] mb-6">
|
||||
How Ghost Guild Works
|
||||
</h2>
|
||||
|
||||
<div class="prose prose-lg dark:prose-invert max-w-none">
|
||||
<p class="text-xl font-semibold text-gray-900 dark:text-white mb-6">
|
||||
<p class="text-xl font-semibold text-[--ui-text] mb-6">
|
||||
Everyone gets everything. Your circle reflects where you are in
|
||||
your cooperative journey. Your financial contribution reflects
|
||||
what you can afford. These are completely separate choices.
|
||||
</p>
|
||||
|
||||
<ul
|
||||
class="text-lg leading-relaxed text-gray-700 dark:text-gray-300 space-y-3 mb-12"
|
||||
class="text-lg leading-relaxed text-[--ui-text-muted] space-y-3 mb-12"
|
||||
>
|
||||
<li>
|
||||
<strong>Equal access:</strong> The entire knowledge commons, all
|
||||
|
|
@ -49,13 +49,13 @@
|
|||
</section>
|
||||
|
||||
<!-- Find Your Circle -->
|
||||
<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">
|
||||
<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">
|
||||
Find Your Circle
|
||||
</h2>
|
||||
<p class="text-lg text-gray-700 dark:text-gray-300 mb-12">
|
||||
<p class="text-lg text-[--ui-text-muted] mb-12">
|
||||
Circles help us provide relevant guidance and connect you with
|
||||
others at similar stages. Choose based on where you are, not what
|
||||
you want to access.
|
||||
|
|
@ -63,21 +63,19 @@
|
|||
|
||||
<div class="space-y-12">
|
||||
<!-- Community Circle -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl p-8">
|
||||
<h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-2">
|
||||
<div class="bg-[--ui-bg] rounded-xl p-8">
|
||||
<h3 class="text-2xl font-bold text-[--ui-text] mb-2">
|
||||
Community Circle
|
||||
</h3>
|
||||
<p class="text-lg text-gray-600 dark:text-gray-400 mb-6">
|
||||
<p class="text-lg text-[--ui-text-muted] mb-6">
|
||||
You're exploring what cooperatives could mean for your work
|
||||
</p>
|
||||
|
||||
<div class="mb-6">
|
||||
<h4
|
||||
class="text-lg font-semibold text-gray-900 dark:text-white mb-3"
|
||||
>
|
||||
<h4 class="text-lg font-semibold text-[--ui-text] mb-3">
|
||||
Where you might be:
|
||||
</h4>
|
||||
<ul class="text-gray-700 dark:text-gray-300 space-y-2">
|
||||
<ul class="text-[--ui-text-muted] space-y-2">
|
||||
<li>
|
||||
Curious about alternatives to traditional studio structures
|
||||
</li>
|
||||
|
|
@ -88,12 +86,10 @@
|
|||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<h4
|
||||
class="text-lg font-semibold text-gray-900 dark:text-white mb-3"
|
||||
>
|
||||
<h4 class="text-lg font-semibold text-[--ui-text] mb-3">
|
||||
We'll help you navigate:
|
||||
</h4>
|
||||
<ul class="text-gray-700 dark:text-gray-300 space-y-2">
|
||||
<ul class="text-[--ui-text-muted] space-y-2">
|
||||
<li>Understanding cooperative basics</li>
|
||||
<li>Connecting with others asking similar questions</li>
|
||||
<li>Exploring real examples from game studios</li>
|
||||
|
|
@ -102,12 +98,10 @@
|
|||
</div>
|
||||
|
||||
<div>
|
||||
<h4
|
||||
class="text-lg font-semibold text-gray-900 dark:text-white mb-3"
|
||||
>
|
||||
<h4 class="text-lg font-semibold text-[--ui-text] mb-3">
|
||||
You might be:
|
||||
</h4>
|
||||
<ul class="text-gray-700 dark:text-gray-300 space-y-2">
|
||||
<ul class="text-[--ui-text-muted] space-y-2">
|
||||
<li>Individual game workers</li>
|
||||
<li>Researchers and students</li>
|
||||
<li>Industry allies and supporters</li>
|
||||
|
|
@ -117,11 +111,11 @@
|
|||
</div>
|
||||
|
||||
<!-- Founder Circle -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl p-8">
|
||||
<h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-2">
|
||||
<div class="bg-[--ui-bg] rounded-xl p-8">
|
||||
<h3 class="text-2xl font-bold text-[--ui-text] mb-2">
|
||||
Founder Circle
|
||||
</h3>
|
||||
<p class="text-lg text-gray-600 dark:text-gray-400 mb-6">
|
||||
<p class="text-lg text-[--ui-text-muted] mb-6">
|
||||
You're actively building or transitioning to a cooperative model
|
||||
</p>
|
||||
|
||||
|
|
@ -188,11 +182,11 @@
|
|||
</div>
|
||||
|
||||
<!-- Practitioner Circle -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl p-8">
|
||||
<h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-2">
|
||||
<div class="bg-[--ui-bg] rounded-xl p-8">
|
||||
<h3 class="text-2xl font-bold text-[--ui-text] mb-2">
|
||||
Practitioner Circle
|
||||
</h3>
|
||||
<p class="text-lg text-gray-600 dark:text-gray-400 mb-6">
|
||||
<p class="text-lg text-[--ui-text-muted] mb-6">
|
||||
You're operating a cooperative and contributing to the field
|
||||
</p>
|
||||
|
||||
|
|
@ -246,14 +240,14 @@
|
|||
</section>
|
||||
|
||||
<!-- Important Notes -->
|
||||
<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">
|
||||
<h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-8">
|
||||
<h2 class="text-3xl font-bold text-[--ui-text] mb-8">
|
||||
Important Notes
|
||||
</h2>
|
||||
|
||||
<div class="space-y-6 text-lg text-gray-700 dark:text-gray-300">
|
||||
<div class="space-y-6 text-lg text-[--ui-text-muted]">
|
||||
<p>
|
||||
<strong>Movement between circles is fluid.</strong> As you move
|
||||
along in your journey, you can shift circles anytime. Just let us
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue