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
|
|
@ -1,7 +1,7 @@
|
|||
export default defineAppConfig({
|
||||
ui: {
|
||||
colors: {
|
||||
primary: "emerald",
|
||||
primary: "amber",
|
||||
neutral: "stone",
|
||||
},
|
||||
formField: {
|
||||
|
|
|
|||
|
|
@ -1,2 +1,43 @@
|
|||
/* Font declarations are now handled by @nuxt/fonts module */
|
||||
/* See nuxt.config.ts for font configuration */
|
||||
/*
|
||||
* Font declarations for Ghost Guild
|
||||
*
|
||||
* Quietism: Display/heading font (serif)
|
||||
* Place woff2 files in public/fonts/
|
||||
* Expected files: Quietism-Regular.woff2, Quietism-Medium.woff2,
|
||||
* Quietism-Bold.woff2, Quietism-Italic.woff2
|
||||
*
|
||||
* Inter and Ubuntu Mono are loaded via @nuxt/fonts module.
|
||||
* See nuxt.config.ts for configuration.
|
||||
*/
|
||||
|
||||
@font-face {
|
||||
font-family: "Quietism";
|
||||
src: url("/fonts/Quietism-Regular.woff2") format("woff2");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Quietism";
|
||||
src: url("/fonts/Quietism-Medium.woff2") format("woff2");
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Quietism";
|
||||
src: url("/fonts/Quietism-Bold.woff2") format("woff2");
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Quietism";
|
||||
src: url("/fonts/Quietism-Italic.woff2") format("woff2");
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,43 @@
|
|||
/*
|
||||
* Ghost Guild Design System
|
||||
* ========================
|
||||
*
|
||||
* Token naming convention:
|
||||
* --color-{palette}-{shade} Color palettes (50-950 scale)
|
||||
* --color-circle-{name}-{variant} Circle-specific tokens
|
||||
* --font-{role} Font family tokens
|
||||
* --text-{scale} Typographic scale
|
||||
* --leading-{role} Line heights
|
||||
* --tracking-{role} Letter spacing
|
||||
*
|
||||
* Palettes:
|
||||
* guild-* Warm neutral ground (dark hall / workshop)
|
||||
* candlelight-* Primary warm accent (amber/gold/ochre)
|
||||
* parchment-* Light content surfaces (cream/vellum)
|
||||
* ember-* Secondary warm accent (deeper amber/rust)
|
||||
* earth-* Tertiary muted tones (brown/ochre)
|
||||
*
|
||||
* Usage guidelines:
|
||||
* Backgrounds: guild-900/950 (dark), parchment-50/100 (light surfaces)
|
||||
* Text primary: guild-100 (dark mode), guild-900 (light mode)
|
||||
* Text secondary: guild-300/400
|
||||
* Borders: guild-700 (dark), guild-300 (light)
|
||||
* Accents: candlelight-* for links, highlights, interactive
|
||||
* Surfaces: parchment-* for readable content areas
|
||||
*
|
||||
* Effect classes:
|
||||
* .ink-grain Subtle noise overlay (mix-blend-mode: overlay)
|
||||
* .paper-texture Paper fiber overlay
|
||||
* .woodcut-border Irregular line border via border-image
|
||||
* .candlelight-glow Warm box-shadow (replaces .ethereal-glow)
|
||||
* .warm-text Warm text-shadow (replaces .ethereal-text)
|
||||
* .guild-stamp Circular decorative double-border frame
|
||||
* .halftone-texture Dot pattern overlay (updated for warm palette)
|
||||
* .dithered-bg Cross-hatch dither pattern
|
||||
* .dithered-warm Amber-tinted dither variant
|
||||
* .prose-guild Wiki/long-form content styling
|
||||
*/
|
||||
|
||||
@import "./fonts.css";
|
||||
@import "tailwindcss";
|
||||
@import "@nuxt/ui";
|
||||
|
|
@ -9,132 +49,229 @@
|
|||
--font-sans: "Inter", sans-serif;
|
||||
--font-body: "Inter", sans-serif;
|
||||
--font-mono: "Ubuntu Mono", monospace;
|
||||
--font-display: "NB Television Pro", monospace;
|
||||
--font-display: "Quietism", serif;
|
||||
--font-serif: "Quietism", serif;
|
||||
|
||||
/* Ethereal color palette - light mode (inverted for light backgrounds) */
|
||||
--color-ghost-50: #0a0a0a;
|
||||
--color-ghost-100: #1a1a1a;
|
||||
--color-ghost-200: #2a2a2a;
|
||||
--color-ghost-300: #3a3a3a;
|
||||
--color-ghost-400: #4a4a4a;
|
||||
--color-ghost-500: #6a6a6a;
|
||||
--color-ghost-600: #8a8a8a;
|
||||
--color-ghost-700: #b0b0b0;
|
||||
--color-ghost-800: #d0d0d0;
|
||||
--color-ghost-900: #f0f0f0;
|
||||
/* Guild - warm neutral ground (light mode: dark values for text on light bg) */
|
||||
--color-guild-50: #1a1510;
|
||||
--color-guild-100: #2a241c;
|
||||
--color-guild-200: #3a332a;
|
||||
--color-guild-300: #524939;
|
||||
--color-guild-400: #6b5f4d;
|
||||
--color-guild-500: #8a7c68;
|
||||
--color-guild-600: #a49585;
|
||||
--color-guild-700: #bfb3a2;
|
||||
--color-guild-800: #d9d0c3;
|
||||
--color-guild-900: #f0ebe4;
|
||||
--color-guild-950: #f8f5f0;
|
||||
|
||||
/* Subtle accent - barely visible blue-gray (light mode) */
|
||||
--color-whisper-50: #0f1419;
|
||||
--color-whisper-100: #1a1f2e;
|
||||
--color-whisper-200: #252d40;
|
||||
--color-whisper-300: #2f3b52;
|
||||
--color-whisper-400: #3a4964;
|
||||
--color-whisper-500: #4f5d7a;
|
||||
--color-whisper-600: #687291;
|
||||
--color-whisper-700: #8491a8;
|
||||
--color-whisper-800: #a8b3c7;
|
||||
--color-whisper-900: #d4dae6;
|
||||
/* Candlelight - primary warm accent (amber/gold/ochre) */
|
||||
--color-candlelight-50: #1f1708;
|
||||
--color-candlelight-100: #3d2c0f;
|
||||
--color-candlelight-200: #5c4118;
|
||||
--color-candlelight-300: #7b5822;
|
||||
--color-candlelight-400: #9a6f2c;
|
||||
--color-candlelight-500: #b8873a;
|
||||
--color-candlelight-600: #d09e4e;
|
||||
--color-candlelight-700: #e0b86e;
|
||||
--color-candlelight-800: #ecd09a;
|
||||
--color-candlelight-900: #f5e6c5;
|
||||
--color-candlelight-950: #faf2e0;
|
||||
|
||||
/* Sparkle accent (light mode) */
|
||||
--color-sparkle-50: #202020;
|
||||
--color-sparkle-100: #404040;
|
||||
--color-sparkle-200: #606060;
|
||||
--color-sparkle-300: #808080;
|
||||
--color-sparkle-400: #a0a0a0;
|
||||
--color-sparkle-500: #c0c0c0;
|
||||
--color-sparkle-600: #d0d0d0;
|
||||
--color-sparkle-700: #e8e8e8;
|
||||
--color-sparkle-800: #f0f0f0;
|
||||
--color-sparkle-900: #fafafa;
|
||||
/* Parchment - light content surfaces (cream/vellum) */
|
||||
--color-parchment-50: #1d1a14;
|
||||
--color-parchment-100: #332e24;
|
||||
--color-parchment-200: #4a4234;
|
||||
--color-parchment-300: #635844;
|
||||
--color-parchment-400: #7d6e56;
|
||||
--color-parchment-500: #97866c;
|
||||
--color-parchment-600: #afa088;
|
||||
--color-parchment-700: #c8baa5;
|
||||
--color-parchment-800: #ddd3c3;
|
||||
--color-parchment-900: #f0ebe0;
|
||||
--color-parchment-950: #f9f6f0;
|
||||
|
||||
/* Ember - secondary warm accent (deeper amber/rust) */
|
||||
--color-ember-50: #1e120b;
|
||||
--color-ember-100: #3b2215;
|
||||
--color-ember-200: #58321f;
|
||||
--color-ember-300: #76432a;
|
||||
--color-ember-400: #945535;
|
||||
--color-ember-500: #b26840;
|
||||
--color-ember-600: #c87e55;
|
||||
--color-ember-700: #da9a72;
|
||||
--color-ember-800: #e8b899;
|
||||
--color-ember-900: #f3d6c0;
|
||||
--color-ember-950: #f9ebe0;
|
||||
|
||||
/* Earth - tertiary muted tones (brown/ochre) */
|
||||
--color-earth-50: #17140e;
|
||||
--color-earth-100: #2d271c;
|
||||
--color-earth-200: #433a2a;
|
||||
--color-earth-300: #5a4d39;
|
||||
--color-earth-400: #726148;
|
||||
--color-earth-500: #8a7658;
|
||||
--color-earth-600: #a08c6d;
|
||||
--color-earth-700: #b7a487;
|
||||
--color-earth-800: #cebda4;
|
||||
--color-earth-900: #e5d7c2;
|
||||
--color-earth-950: #f2ece1;
|
||||
}
|
||||
|
||||
.dark {
|
||||
/* Ethereal color palette - dark mode (original values) */
|
||||
--color-ghost-50: #f0f0f0;
|
||||
--color-ghost-100: #d0d0d0;
|
||||
--color-ghost-200: #b0b0b0;
|
||||
--color-ghost-300: #8a8a8a;
|
||||
--color-ghost-400: #6a6a6a;
|
||||
--color-ghost-500: #4a4a4a;
|
||||
--color-ghost-600: #3a3a3a;
|
||||
--color-ghost-700: #2a2a2a;
|
||||
--color-ghost-800: #1a1a1a;
|
||||
--color-ghost-900: #0a0a0a;
|
||||
/* Guild - warm neutral (dark mode: light values) */
|
||||
--color-guild-50: #f0ebe4;
|
||||
--color-guild-100: #d9d0c3;
|
||||
--color-guild-200: #bfb3a2;
|
||||
--color-guild-300: #a49585;
|
||||
--color-guild-400: #8a7c68;
|
||||
--color-guild-500: #6b5f4d;
|
||||
--color-guild-600: #524939;
|
||||
--color-guild-700: #3a332a;
|
||||
--color-guild-800: #2a241c;
|
||||
--color-guild-900: #1a1510;
|
||||
--color-guild-950: #110e0a;
|
||||
|
||||
/* Subtle accent - barely visible blue-gray (dark mode) */
|
||||
--color-whisper-50: #d4dae6;
|
||||
--color-whisper-100: #a8b3c7;
|
||||
--color-whisper-200: #8491a8;
|
||||
--color-whisper-300: #687291;
|
||||
--color-whisper-400: #4f5d7a;
|
||||
--color-whisper-500: #3a4964;
|
||||
--color-whisper-600: #2f3b52;
|
||||
--color-whisper-700: #252d40;
|
||||
--color-whisper-800: #1a1f2e;
|
||||
--color-whisper-900: #0f1419;
|
||||
/* Candlelight - primary warm accent (dark mode) */
|
||||
--color-candlelight-50: #faf2e0;
|
||||
--color-candlelight-100: #f5e6c5;
|
||||
--color-candlelight-200: #ecd09a;
|
||||
--color-candlelight-300: #e0b86e;
|
||||
--color-candlelight-400: #d09e4e;
|
||||
--color-candlelight-500: #b8873a;
|
||||
--color-candlelight-600: #9a6f2c;
|
||||
--color-candlelight-700: #7b5822;
|
||||
--color-candlelight-800: #5c4118;
|
||||
--color-candlelight-900: #3d2c0f;
|
||||
--color-candlelight-950: #1f1708;
|
||||
|
||||
/* Sparkle accent (dark mode) */
|
||||
--color-sparkle-50: #fafafa;
|
||||
--color-sparkle-100: #f0f0f0;
|
||||
--color-sparkle-200: #e8e8e8;
|
||||
--color-sparkle-300: #d0d0d0;
|
||||
--color-sparkle-400: #c0c0c0;
|
||||
--color-sparkle-500: #a0a0a0;
|
||||
--color-sparkle-600: #808080;
|
||||
--color-sparkle-700: #606060;
|
||||
--color-sparkle-800: #404040;
|
||||
--color-sparkle-900: #202020;
|
||||
/* Parchment - light content surfaces (dark mode) */
|
||||
--color-parchment-50: #f9f6f0;
|
||||
--color-parchment-100: #f0ebe0;
|
||||
--color-parchment-200: #ddd3c3;
|
||||
--color-parchment-300: #c8baa5;
|
||||
--color-parchment-400: #afa088;
|
||||
--color-parchment-500: #97866c;
|
||||
--color-parchment-600: #7d6e56;
|
||||
--color-parchment-700: #635844;
|
||||
--color-parchment-800: #4a4234;
|
||||
--color-parchment-900: #332e24;
|
||||
--color-parchment-950: #1d1a14;
|
||||
|
||||
/* Ember - secondary warm accent (dark mode) */
|
||||
--color-ember-50: #f9ebe0;
|
||||
--color-ember-100: #f3d6c0;
|
||||
--color-ember-200: #e8b899;
|
||||
--color-ember-300: #da9a72;
|
||||
--color-ember-400: #c87e55;
|
||||
--color-ember-500: #b26840;
|
||||
--color-ember-600: #945535;
|
||||
--color-ember-700: #76432a;
|
||||
--color-ember-800: #58321f;
|
||||
--color-ember-900: #3b2215;
|
||||
--color-ember-950: #1e120b;
|
||||
|
||||
/* Earth - tertiary muted tones (dark mode) */
|
||||
--color-earth-50: #f2ece1;
|
||||
--color-earth-100: #e5d7c2;
|
||||
--color-earth-200: #cebda4;
|
||||
--color-earth-300: #b7a487;
|
||||
--color-earth-400: #a08c6d;
|
||||
--color-earth-500: #8a7658;
|
||||
--color-earth-600: #726148;
|
||||
--color-earth-700: #5a4d39;
|
||||
--color-earth-800: #433a2a;
|
||||
--color-earth-900: #2d271c;
|
||||
--color-earth-950: #17140e;
|
||||
}
|
||||
|
||||
/* Global ethereal background - light mode */
|
||||
/* Circle-specific tokens */
|
||||
:root {
|
||||
--ethereal-bg:
|
||||
/* Community - warm hearth amber */
|
||||
--color-circle-community: #b8873a;
|
||||
--color-circle-community-light: #e0b86e;
|
||||
--color-circle-community-dark: #7b5822;
|
||||
--color-circle-community-bg: rgba(184, 135, 58, 0.1);
|
||||
|
||||
/* Founder - forge copper/orange */
|
||||
--color-circle-founder: #b26840;
|
||||
--color-circle-founder-light: #da9a72;
|
||||
--color-circle-founder-dark: #76432a;
|
||||
--color-circle-founder-bg: rgba(178, 104, 64, 0.1);
|
||||
|
||||
/* Practitioner - deep gold/ochre */
|
||||
--color-circle-practitioner: #8a7658;
|
||||
--color-circle-practitioner-light: #b7a487;
|
||||
--color-circle-practitioner-dark: #5a4d39;
|
||||
--color-circle-practitioner-bg: rgba(138, 118, 88, 0.1);
|
||||
|
||||
/* Typographic scale */
|
||||
--text-display-xl: 3.5rem;
|
||||
--text-display-lg: 2.5rem;
|
||||
--text-display: 2rem;
|
||||
--text-display-sm: 1.5rem;
|
||||
--text-body-lg: 1.125rem;
|
||||
--text-body: 1rem;
|
||||
--text-body-sm: 0.875rem;
|
||||
--text-caption: 0.75rem;
|
||||
--text-overline: 0.6875rem;
|
||||
|
||||
/* Line heights */
|
||||
--leading-display: 1.15;
|
||||
--leading-body: 1.65;
|
||||
|
||||
/* Letter spacing */
|
||||
--tracking-display: -0.02em;
|
||||
--tracking-wide: 0.05em;
|
||||
|
||||
/* Ambient background - warm radial gradients */
|
||||
--ambient-bg:
|
||||
radial-gradient(
|
||||
circle at 20% 80%,
|
||||
rgba(40, 40, 40, 0.03) 0%,
|
||||
rgba(184, 135, 58, 0.03) 0%,
|
||||
transparent 50%
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 80% 20%,
|
||||
rgba(40, 40, 40, 0.02) 0%,
|
||||
rgba(178, 104, 64, 0.02) 0%,
|
||||
transparent 50%
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 40% 40%,
|
||||
rgba(40, 40, 40, 0.01) 0%,
|
||||
rgba(138, 118, 88, 0.01) 0%,
|
||||
transparent 50%
|
||||
);
|
||||
|
||||
--halftone-pattern: radial-gradient(
|
||||
circle,
|
||||
rgba(0, 0, 0, 0.1) 1px,
|
||||
rgba(42, 36, 28, 0.1) 1px,
|
||||
transparent 1px
|
||||
);
|
||||
--halftone-size: 8px 8px;
|
||||
}
|
||||
|
||||
/* Dark mode background */
|
||||
/* Dark mode */
|
||||
.dark:root {
|
||||
--ethereal-bg:
|
||||
--ambient-bg:
|
||||
radial-gradient(
|
||||
circle at 20% 80%,
|
||||
rgba(232, 232, 232, 0.03) 0%,
|
||||
rgba(224, 184, 110, 0.03) 0%,
|
||||
transparent 50%
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 80% 20%,
|
||||
rgba(232, 232, 232, 0.02) 0%,
|
||||
rgba(218, 154, 114, 0.02) 0%,
|
||||
transparent 50%
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 40% 40%,
|
||||
rgba(232, 232, 232, 0.01) 0%,
|
||||
rgba(183, 164, 135, 0.01) 0%,
|
||||
transparent 50%
|
||||
);
|
||||
|
||||
--halftone-pattern: radial-gradient(
|
||||
circle,
|
||||
rgba(255, 255, 255, 0.1) 1px,
|
||||
rgba(240, 235, 228, 0.1) 1px,
|
||||
transparent 1px
|
||||
);
|
||||
}
|
||||
|
|
@ -144,12 +281,41 @@ html {
|
|||
}
|
||||
|
||||
body {
|
||||
background: var(--ethereal-bg), #f0f0f0;
|
||||
background: var(--ambient-bg), #f0ebe4;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
.dark body {
|
||||
background: var(--ethereal-bg), #0a0a0a;
|
||||
background: var(--ambient-bg), #1a1510;
|
||||
}
|
||||
|
||||
/* Display typography utilities */
|
||||
.text-display-xl {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-display-xl);
|
||||
line-height: var(--leading-display);
|
||||
letter-spacing: var(--tracking-display);
|
||||
}
|
||||
|
||||
.text-display-lg {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-display-lg);
|
||||
line-height: var(--leading-display);
|
||||
letter-spacing: var(--tracking-display);
|
||||
}
|
||||
|
||||
.text-display {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-display);
|
||||
line-height: var(--leading-display);
|
||||
letter-spacing: var(--tracking-display);
|
||||
}
|
||||
|
||||
.text-display-sm {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-display-sm);
|
||||
line-height: var(--leading-display);
|
||||
letter-spacing: var(--tracking-display);
|
||||
}
|
||||
|
||||
/* Halftone texture overlay */
|
||||
|
|
@ -170,106 +336,93 @@ body {
|
|||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Sparkle effects */
|
||||
@keyframes sparkle {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.3;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
/* Craft/Material Effects */
|
||||
|
||||
/* Warm box-shadow (replaces .ethereal-glow) */
|
||||
.candlelight-glow {
|
||||
box-shadow:
|
||||
0 0 20px rgba(184, 135, 58, 0.12),
|
||||
0 0 40px rgba(184, 135, 58, 0.06),
|
||||
inset 0 1px 0 rgba(240, 235, 228, 0.08);
|
||||
}
|
||||
|
||||
@keyframes twinkle {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.2;
|
||||
}
|
||||
25% {
|
||||
opacity: 0.8;
|
||||
}
|
||||
75% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
/* Warm text-shadow (replaces .ethereal-text) */
|
||||
.warm-text {
|
||||
text-shadow: 0 0 10px rgba(224, 184, 110, 0.25);
|
||||
}
|
||||
|
||||
.sparkle-field {
|
||||
/* Subtle noise overlay */
|
||||
.ink-grain {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sparkle-field::after {
|
||||
.ink-grain::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image:
|
||||
radial-gradient(
|
||||
circle at 10% 20%,
|
||||
var(--color-sparkle-200) 1px,
|
||||
transparent 1px
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 90% 80%,
|
||||
var(--color-sparkle-400) 1px,
|
||||
transparent 1px
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 30% 70%,
|
||||
var(--color-sparkle-200) 0.5px,
|
||||
transparent 0.5px
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 70% 30%,
|
||||
var(--color-sparkle-400) 0.5px,
|
||||
transparent 0.5px
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 50% 10%,
|
||||
var(--color-sparkle-200) 1px,
|
||||
transparent 1px
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 20% 90%,
|
||||
var(--color-sparkle-400) 0.5px,
|
||||
transparent 0.5px
|
||||
);
|
||||
background-size:
|
||||
200px 200px,
|
||||
300px 300px,
|
||||
150px 150px,
|
||||
250px 250px,
|
||||
180px 180px,
|
||||
220px 220px;
|
||||
animation: twinkle 4s infinite ease-in-out;
|
||||
background-image: url("/textures/grain.png");
|
||||
background-repeat: repeat;
|
||||
background-size: 128px 128px;
|
||||
mix-blend-mode: overlay;
|
||||
opacity: 0.04;
|
||||
pointer-events: none;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* Ethereal glow effects */
|
||||
.ethereal-glow {
|
||||
box-shadow:
|
||||
0 0 20px rgba(232, 232, 232, 0.1),
|
||||
0 0 40px rgba(232, 232, 232, 0.05),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||
/* Paper fiber overlay */
|
||||
.paper-texture {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ethereal-text {
|
||||
text-shadow: 0 0 10px rgba(232, 232, 232, 0.3);
|
||||
.paper-texture::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image: url("/textures/paper.png");
|
||||
background-repeat: repeat;
|
||||
background-size: 256px 256px;
|
||||
opacity: 0.04;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Irregular line border */
|
||||
.woodcut-border {
|
||||
border-image: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--color-guild-700) 0px,
|
||||
var(--color-guild-600) 2px,
|
||||
var(--color-guild-700) 3px,
|
||||
transparent 3px,
|
||||
transparent 6px
|
||||
) 4;
|
||||
}
|
||||
|
||||
/* Circular decorative frame */
|
||||
.guild-stamp {
|
||||
border: 2px solid var(--color-candlelight-600);
|
||||
outline: 2px solid var(--color-candlelight-700);
|
||||
outline-offset: 3px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/* Warm interior feel for content areas */
|
||||
.guild-interior {
|
||||
background: var(--ambient-bg);
|
||||
box-shadow: inset 0 2px 8px rgba(26, 21, 16, 0.06);
|
||||
}
|
||||
|
||||
/* Dithered gradients */
|
||||
.dithered-bg {
|
||||
background:
|
||||
linear-gradient(45deg, var(--color-ghost-800) 25%, transparent 25%),
|
||||
linear-gradient(-45deg, var(--color-ghost-800) 25%, transparent 25%),
|
||||
linear-gradient(45deg, transparent 75%, var(--color-ghost-700) 75%),
|
||||
linear-gradient(-45deg, transparent 75%, var(--color-ghost-700) 75%);
|
||||
linear-gradient(45deg, var(--color-guild-800) 25%, transparent 25%),
|
||||
linear-gradient(-45deg, var(--color-guild-800) 25%, transparent 25%),
|
||||
linear-gradient(45deg, transparent 75%, var(--color-guild-700) 75%),
|
||||
linear-gradient(-45deg, transparent 75%, var(--color-guild-700) 75%);
|
||||
background-size: 4px 4px;
|
||||
background-position:
|
||||
0 0,
|
||||
|
|
@ -278,6 +431,58 @@ body {
|
|||
-2px 0px;
|
||||
}
|
||||
|
||||
/* Amber-tinted dither variant */
|
||||
.dithered-warm {
|
||||
background:
|
||||
linear-gradient(45deg, var(--color-candlelight-800) 25%, transparent 25%),
|
||||
linear-gradient(-45deg, var(--color-candlelight-800) 25%, transparent 25%),
|
||||
linear-gradient(45deg, transparent 75%, var(--color-candlelight-700) 75%),
|
||||
linear-gradient(-45deg, transparent 75%, var(--color-candlelight-700) 75%);
|
||||
background-size: 4px 4px;
|
||||
background-position:
|
||||
0 0,
|
||||
0 2px,
|
||||
2px -2px,
|
||||
-2px 0px;
|
||||
}
|
||||
|
||||
/* Prose overrides for guild wiki/long-form content */
|
||||
.prose-guild {
|
||||
max-width: 72ch;
|
||||
}
|
||||
|
||||
.prose-guild h1,
|
||||
.prose-guild h2,
|
||||
.prose-guild h3,
|
||||
.prose-guild h4 {
|
||||
font-family: var(--font-display);
|
||||
letter-spacing: var(--tracking-display);
|
||||
}
|
||||
|
||||
.prose-guild a {
|
||||
color: var(--color-candlelight-600);
|
||||
text-decoration-color: var(--color-candlelight-700);
|
||||
text-underline-offset: 3px;
|
||||
}
|
||||
|
||||
.prose-guild a:hover {
|
||||
color: var(--color-candlelight-500);
|
||||
text-decoration-color: var(--color-candlelight-500);
|
||||
}
|
||||
|
||||
.prose-guild blockquote {
|
||||
background-color: var(--color-parchment-900);
|
||||
border-left-color: var(--color-candlelight-600);
|
||||
border-left-width: 3px;
|
||||
padding: 1rem 1.5rem;
|
||||
border-radius: 0 0.5rem 0.5rem 0;
|
||||
}
|
||||
|
||||
.dark .prose-guild blockquote {
|
||||
background-color: var(--color-parchment-900);
|
||||
border-left-color: var(--color-candlelight-500);
|
||||
}
|
||||
|
||||
/* Mobile responsive utilities */
|
||||
@media (max-width: 1023px) {
|
||||
/* Prevent horizontal scroll on mobile */
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
>
|
||||
<!-- Left: Copyright and minimal info -->
|
||||
<div>
|
||||
<p class="text-ghost-500 text-xs mb-2">
|
||||
<p class="text-guild-500 text-xs mb-2">
|
||||
© {{ currentYear }} Ghost Guild
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
<div class="flex flex-wrap gap-6 text-xs">
|
||||
<a
|
||||
href="mailto:hello@ghostguild.org"
|
||||
class="text-ghost-500 hover:text-ghost-300 transition-colors"
|
||||
class="text-guild-500 hover:text-guild-300 transition-colors"
|
||||
>
|
||||
Contact
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -3,13 +3,13 @@
|
|||
:class="[
|
||||
isMobile
|
||||
? 'w-full flex flex-col bg-transparent'
|
||||
: 'w-64 lg:w-80 backdrop-blur-sm h-screen sticky top-0 flex flex-col bg-ghost-900 border-r border-ghost-700',
|
||||
: 'w-64 lg:w-80 backdrop-blur-sm h-screen sticky top-0 flex flex-col bg-guild-900 border-r border-guild-700',
|
||||
]"
|
||||
>
|
||||
<!-- Logo/Brand at top (desktop only) -->
|
||||
<div v-if="!isMobile" class="p-8 border-b border-ghost-700 bg-primary-500">
|
||||
<div v-if="!isMobile" class="p-8 border-b border-guild-700 bg-primary-500">
|
||||
<NuxtLink to="/" class="flex flex-col items-center gap-3 group">
|
||||
<span class="text-xl font-bold text-white ethereal-text tracking-wider"
|
||||
<span class="text-xl font-bold text-white warm-text tracking-wider"
|
||||
>Ghost Guild Logo</span
|
||||
>
|
||||
</NuxtLink>
|
||||
|
|
@ -31,8 +31,8 @@
|
|||
<!-- Hover indicator -->
|
||||
|
||||
<span
|
||||
class="text-ghost-200 hover:text-ghost-100 transition-all duration-300 text-lg tracking-wide block py-2 hover:ethereal-text"
|
||||
active-class="text-ghost-100 ethereal-text translate-x-2"
|
||||
class="text-guild-200 hover:text-guild-100 transition-all duration-300 text-lg tracking-wide block py-2 hover:warm-text"
|
||||
active-class="text-guild-100 warm-text translate-x-2"
|
||||
>
|
||||
{{ item.label }}
|
||||
</span>
|
||||
|
|
@ -41,12 +41,12 @@
|
|||
</ul>
|
||||
|
||||
<!-- Contact Email -->
|
||||
<div class="mt-8 pt-6 border-t border-ghost-800/50">
|
||||
<p class="text-ghost-500 text-xs">
|
||||
<div class="mt-8 pt-6 border-t border-guild-800/50">
|
||||
<p class="text-guild-500 text-xs">
|
||||
Contact us:
|
||||
<a
|
||||
href="mailto:hello@ghostguild.org"
|
||||
class="text-ghost-400 hover:text-ghost-300 transition-colors"
|
||||
class="text-guild-400 hover:text-guild-300 transition-colors"
|
||||
>hello@ghostguild.org</a
|
||||
>
|
||||
</p>
|
||||
|
|
@ -61,30 +61,30 @@
|
|||
<div
|
||||
:class="
|
||||
isMobile
|
||||
? 'mt-8 pt-6 border-t border-ghost-800/50'
|
||||
: 'mt-12 pt-8 border-t border-ghost-800/50'
|
||||
? 'mt-8 pt-6 border-t border-guild-800/50'
|
||||
: 'mt-12 pt-8 border-t border-guild-800/50'
|
||||
"
|
||||
>
|
||||
<div v-if="isAuthenticated" class="space-y-4">
|
||||
<NuxtLink
|
||||
to="/member/dashboard"
|
||||
class="block text-ghost-300 hover:text-ghost-100 hover:ethereal-text transition-all duration-300 py-2"
|
||||
class="block text-guild-300 hover:text-guild-100 hover:warm-text transition-all duration-300 py-2"
|
||||
@click="handleNavigate"
|
||||
>
|
||||
<span class="block text-sm text-whisper-400 mb-1">{{
|
||||
<span class="block text-sm text-candlelight-400 mb-1">{{
|
||||
memberData?.name || "Member"
|
||||
}}</span>
|
||||
Dashboard
|
||||
</NuxtLink>
|
||||
<button
|
||||
@click="handleLogout"
|
||||
class="text-ghost-500 hover:text-ghost-300 transition-all duration-300 text-sm"
|
||||
class="text-guild-500 hover:text-guild-300 transition-all duration-300 text-sm"
|
||||
>
|
||||
Logout
|
||||
</button>
|
||||
</div>
|
||||
<div v-else class="space-y-4">
|
||||
<p class="text-ghost-400 text-sm mb-4">
|
||||
<p class="text-guild-400 text-sm mb-4">
|
||||
Enter your email to receive a login link
|
||||
</p>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,18 +1,18 @@
|
|||
<template>
|
||||
<div
|
||||
class="series-badge p-4 bg-ghost-800/50 dark:bg-ghost-700/30 rounded-xl border border-ghost-600 dark:border-ghost-600"
|
||||
class="series-badge p-4 bg-guild-800/50 dark:bg-guild-700/30 rounded-xl border border-guild-600 dark:border-guild-600"
|
||||
>
|
||||
<div class="flex items-start justify-between gap-6">
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex flex-wrap items-center gap-2 mb-2">
|
||||
<span
|
||||
class="series-badge__label text-sm font-semibold text-ghost-300 dark:text-ghost-300"
|
||||
class="series-badge__label text-sm font-semibold text-guild-300 dark:text-guild-300"
|
||||
>
|
||||
Part of a Series
|
||||
</span>
|
||||
<span
|
||||
v-if="totalEvents"
|
||||
class="series-badge__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-badge__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"
|
||||
>
|
||||
<template v-if="position">
|
||||
Event {{ position }} of {{ totalEvents }}
|
||||
|
|
@ -21,13 +21,13 @@
|
|||
</span>
|
||||
</div>
|
||||
<h3
|
||||
class="series-badge__title text-lg font-semibold text-ghost-100 dark:text-ghost-100 mb-2"
|
||||
class="series-badge__title text-lg font-semibold text-guild-100 dark:text-guild-100 mb-2"
|
||||
>
|
||||
{{ title }}
|
||||
</h3>
|
||||
<p
|
||||
v-if="description"
|
||||
class="series-badge__description text-sm text-ghost-300 dark:text-ghost-300"
|
||||
class="series-badge__description text-sm text-guild-300 dark:text-guild-300"
|
||||
>
|
||||
{{ description }}
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div
|
||||
class="series-ticket-card border border-ghost-600 dark:border-ghost-600 rounded-xl overflow-hidden"
|
||||
class="series-ticket-card border border-guild-600 dark:border-guild-600 rounded-xl overflow-hidden"
|
||||
>
|
||||
<!-- Header -->
|
||||
<div
|
||||
|
|
@ -39,27 +39,27 @@
|
|||
</div>
|
||||
|
||||
<!-- Body -->
|
||||
<div class="p-6 bg-ghost-800/50 dark:bg-ghost-700/30">
|
||||
<div class="p-6 bg-guild-800/50 dark:bg-guild-700/30">
|
||||
<!-- What's Included -->
|
||||
<div class="mb-6">
|
||||
<h4 class="text-sm font-semibold text-ghost-200 dark:text-ghost-200 mb-3 uppercase tracking-wide">
|
||||
<h4 class="text-sm font-semibold text-guild-200 dark:text-guild-200 mb-3 uppercase tracking-wide">
|
||||
What's Included
|
||||
</h4>
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center gap-2 text-ghost-300 dark:text-ghost-300">
|
||||
<div class="flex items-center gap-2 text-guild-300 dark:text-guild-300">
|
||||
<Icon name="heroicons:check-circle" class="w-5 h-5 text-green-400" />
|
||||
<span>Access to all {{ totalEvents }} events in the series</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="ticket.isFree && !isMember"
|
||||
class="flex items-center gap-2 text-ghost-300 dark:text-ghost-300"
|
||||
class="flex items-center gap-2 text-guild-300 dark:text-guild-300"
|
||||
>
|
||||
<Icon name="heroicons:check-circle" class="w-5 h-5 text-green-400" />
|
||||
<span>Automatic registration for all sessions</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="memberSavings > 0"
|
||||
class="flex items-center gap-2 text-ghost-300 dark:text-ghost-300"
|
||||
class="flex items-center gap-2 text-guild-300 dark:text-guild-300"
|
||||
>
|
||||
<Icon name="heroicons:check-circle" class="w-5 h-5 text-green-400" />
|
||||
<span>Save {{ formatPrice(memberSavings, ticket.currency) }} as a member</span>
|
||||
|
|
@ -69,14 +69,14 @@
|
|||
|
||||
<!-- Events List Preview -->
|
||||
<div v-if="events && events.length > 0" class="mb-6">
|
||||
<h4 class="text-sm font-semibold text-ghost-200 dark:text-ghost-200 mb-3 uppercase tracking-wide">
|
||||
<h4 class="text-sm font-semibold text-guild-200 dark:text-guild-200 mb-3 uppercase tracking-wide">
|
||||
Series Schedule
|
||||
</h4>
|
||||
<div class="space-y-2">
|
||||
<div
|
||||
v-for="(event, index) in events.slice(0, 3)"
|
||||
:key="event.id"
|
||||
class="flex items-start gap-3 p-3 bg-ghost-700/50 dark:bg-ghost-600/30 rounded-lg"
|
||||
class="flex items-start gap-3 p-3 bg-guild-700/50 dark:bg-guild-600/30 rounded-lg"
|
||||
>
|
||||
<div
|
||||
class="w-8 h-8 rounded-full bg-purple-600/20 border border-purple-500/30 flex items-center justify-center flex-shrink-0"
|
||||
|
|
@ -84,17 +84,17 @@
|
|||
<span class="text-sm font-bold text-purple-300">{{ index + 1 }}</span>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="font-medium text-ghost-100 dark:text-ghost-100 text-sm">
|
||||
<div class="font-medium text-guild-100 dark:text-guild-100 text-sm">
|
||||
{{ event.title }}
|
||||
</div>
|
||||
<div class="text-xs text-ghost-400 dark:text-ghost-400 mt-1">
|
||||
<div class="text-xs text-guild-400 dark:text-guild-400 mt-1">
|
||||
{{ formatEventDate(event.startDate) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="events.length > 3"
|
||||
class="text-center text-sm text-ghost-400 dark:text-ghost-400 pt-2"
|
||||
class="text-center text-sm text-guild-400 dark:text-guild-400 pt-2"
|
||||
>
|
||||
+ {{ events.length - 3 }} more event{{ events.length - 3 !== 1 ? 's' : '' }}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
:class="[
|
||||
isSelected
|
||||
? 'border-primary bg-primary/5'
|
||||
: 'border-ghost-600 bg-ghost-800/50',
|
||||
: 'border-guild-600 bg-guild-800/50',
|
||||
isAvailable && !alreadyRegistered
|
||||
? 'hover:border-primary/50 cursor-pointer'
|
||||
: 'opacity-60 cursor-not-allowed',
|
||||
|
|
@ -14,10 +14,10 @@
|
|||
<!-- Ticket Header -->
|
||||
<div class="flex items-start justify-between mb-4">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-ghost-100">
|
||||
<h3 class="text-lg font-semibold text-guild-100">
|
||||
{{ ticketInfo.name }}
|
||||
</h3>
|
||||
<p v-if="ticketInfo.description" class="text-sm text-ghost-300 mt-1">
|
||||
<p v-if="ticketInfo.description" class="text-sm text-guild-300 mt-1">
|
||||
{{ ticketInfo.description }}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
<div class="flex items-baseline gap-2">
|
||||
<span
|
||||
class="text-3xl font-bold"
|
||||
:class="ticketInfo.isFree ? 'text-green-400' : 'text-ghost-100'"
|
||||
:class="ticketInfo.isFree ? 'text-green-400' : 'text-guild-100'"
|
||||
>
|
||||
{{ ticketInfo.formattedPrice }}
|
||||
</span>
|
||||
|
|
@ -56,7 +56,7 @@
|
|||
v-if="ticketInfo.isEarlyBird && ticketInfo.formattedRegularPrice"
|
||||
class="mt-1"
|
||||
>
|
||||
<span class="text-sm text-ghost-400 line-through">
|
||||
<span class="text-sm text-guild-400 line-through">
|
||||
Regular: {{ ticketInfo.formattedRegularPrice }}
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -80,7 +80,7 @@
|
|||
<Icon name="heroicons:check-circle" class="w-4 h-4 inline mr-1" />
|
||||
You save {{ formatPrice(ticketInfo.memberSavings) }} as a member!
|
||||
</p>
|
||||
<p class="text-xs text-ghost-400 mt-1">
|
||||
<p class="text-xs text-guild-400 mt-1">
|
||||
Public price: {{ ticketInfo.publicTicket.formattedPrice }}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -102,10 +102,10 @@
|
|||
<Icon name="heroicons:x-circle-solid" class="w-4 h-4" />
|
||||
Sold Out
|
||||
</span>
|
||||
<span v-else-if="ticketInfo.remaining !== null" class="text-ghost-300">
|
||||
<span v-else-if="ticketInfo.remaining !== null" class="text-guild-300">
|
||||
{{ ticketInfo.remaining }} remaining
|
||||
</span>
|
||||
<span v-else class="text-ghost-300"> Unlimited availability </span>
|
||||
<span v-else class="text-guild-300"> Unlimited availability </span>
|
||||
</div>
|
||||
|
||||
<!-- Selection Indicator -->
|
||||
|
|
@ -117,7 +117,7 @@
|
|||
<!-- Waitlist Option -->
|
||||
<div
|
||||
v-if="!isAvailable && ticketInfo.waitlistAvailable && !alreadyRegistered"
|
||||
class="mt-4 pt-4 border-t border-ghost-600"
|
||||
class="mt-4 pt-4 border-t border-guild-600"
|
||||
>
|
||||
<UButton
|
||||
color="gray"
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<div
|
||||
class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4"
|
||||
></div>
|
||||
<p class="text-ghost-300">Loading ticket information...</p>
|
||||
<p class="text-guild-300">Loading ticket information...</p>
|
||||
</div>
|
||||
|
||||
<!-- Error State -->
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
<strong>{{ ticketInfo.series?.title }}</strong> and requires a series
|
||||
pass to attend.
|
||||
</p>
|
||||
<p class="text-sm text-ghost-300 mb-6">
|
||||
<p class="text-sm text-guild-300 mb-6">
|
||||
Purchase a series pass to get access to all events in this series.
|
||||
</p>
|
||||
<UButton
|
||||
|
|
@ -70,7 +70,7 @@
|
|||
details.
|
||||
</template>
|
||||
</p>
|
||||
<p class="text-sm text-ghost-300">
|
||||
<p class="text-sm text-guild-300">
|
||||
See you on {{ formatEventDate(eventStartDate) }}!
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -89,7 +89,7 @@
|
|||
|
||||
<!-- Registration Form -->
|
||||
<div v-if="ticketInfo.available && !ticketInfo.alreadyRegistered">
|
||||
<h3 class="text-xl font-bold text-ghost-100 mb-4">
|
||||
<h3 class="text-xl font-bold text-guild-100 mb-4">
|
||||
{{ ticketInfo.isFree ? "Register" : "Purchase Ticket" }}
|
||||
</h3>
|
||||
|
||||
|
|
@ -98,7 +98,7 @@
|
|||
<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>
|
||||
|
|
@ -116,7 +116,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>
|
||||
|
|
@ -128,7 +128,7 @@
|
|||
placeholder="Enter your email"
|
||||
:disabled="processing || isLoggedIn"
|
||||
/>
|
||||
<p v-if="isLoggedIn" class="text-xs text-ghost-400 mt-1">
|
||||
<p v-if="isLoggedIn" class="text-xs text-guild-400 mt-1">
|
||||
Using your member email
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -185,10 +185,10 @@
|
|||
>
|
||||
<Icon
|
||||
name="heroicons:ticket"
|
||||
class="w-16 h-16 text-ghost-400 mx-auto mb-4"
|
||||
class="w-16 h-16 text-guild-400 mx-auto mb-4"
|
||||
/>
|
||||
<h3 class="text-xl font-bold text-ghost-100 mb-2">Event Sold Out</h3>
|
||||
<p class="text-ghost-300 mb-6">
|
||||
<h3 class="text-xl font-bold text-guild-100 mb-2">Event Sold Out</h3>
|
||||
<p class="text-guild-300 mb-6">
|
||||
This event is currently at capacity. Join the waitlist to be notified
|
||||
if spots become available.
|
||||
</p>
|
||||
|
|
@ -203,8 +203,8 @@
|
|||
name="heroicons:x-circle"
|
||||
class="w-16 h-16 text-red-400 mx-auto mb-4"
|
||||
/>
|
||||
<h3 class="text-xl font-bold text-ghost-100 mb-2">Event Sold Out</h3>
|
||||
<p class="text-ghost-300">
|
||||
<h3 class="text-xl font-bold text-guild-100 mb-2">Event Sold Out</h3>
|
||||
<p class="text-guild-300">
|
||||
Unfortunately, this event is at capacity and no longer accepting
|
||||
registrations.
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -5,12 +5,12 @@
|
|||
:description="description"
|
||||
:dismissible="dismissible"
|
||||
:ui="{
|
||||
content: 'bg-ghost-900 border border-ghost-700',
|
||||
header: 'bg-ghost-900 border-b border-ghost-700',
|
||||
body: 'bg-ghost-900',
|
||||
footer: 'bg-ghost-900 border-t border-ghost-700',
|
||||
title: 'text-ghost-100',
|
||||
description: 'text-ghost-400',
|
||||
content: 'bg-guild-900 border border-guild-700',
|
||||
header: 'bg-guild-900 border-b border-guild-700',
|
||||
body: 'bg-guild-900',
|
||||
footer: 'bg-guild-900 border-t border-guild-700',
|
||||
title: 'text-guild-100',
|
||||
description: 'text-guild-400',
|
||||
}"
|
||||
>
|
||||
<template #body>
|
||||
|
|
@ -20,9 +20,9 @@
|
|||
<div class="w-16 h-16 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<Icon name="heroicons:check-circle" class="w-10 h-10 text-green-400" />
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-ghost-100 mb-2">Check your email</h3>
|
||||
<p class="text-ghost-300">
|
||||
We've sent a magic link to <strong class="text-ghost-100">{{ loginForm.email }}</strong>.
|
||||
<h3 class="text-lg font-semibold text-guild-100 mb-2">Check your email</h3>
|
||||
<p class="text-guild-300">
|
||||
We've sent a magic link to <strong class="text-guild-100">{{ loginForm.email }}</strong>.
|
||||
Click the link to sign in.
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -37,16 +37,16 @@
|
|||
class="w-full"
|
||||
placeholder="your.email@example.com"
|
||||
:ui="{
|
||||
root: 'bg-ghost-800 border-ghost-600 text-ghost-100 placeholder-ghost-500',
|
||||
root: 'bg-guild-800 border-guild-600 text-guild-100 placeholder-guild-500',
|
||||
}"
|
||||
/>
|
||||
</UFormField>
|
||||
|
||||
<!-- Info Box -->
|
||||
<div class="bg-ghost-800 border border-ghost-600 p-4 rounded-lg mb-6">
|
||||
<div class="bg-guild-800 border border-guild-600 p-4 rounded-lg mb-6">
|
||||
<div class="flex items-start gap-3">
|
||||
<Icon name="heroicons:envelope" class="w-5 h-5 text-whisper-400 flex-shrink-0 mt-0.5" />
|
||||
<p class="text-sm text-ghost-300">
|
||||
<Icon name="heroicons:envelope" class="w-5 h-5 text-candlelight-400 flex-shrink-0 mt-0.5" />
|
||||
<p class="text-sm text-guild-300">
|
||||
We'll send you a secure magic link. No password needed!
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -73,12 +73,12 @@
|
|||
</UForm>
|
||||
|
||||
<!-- Join Link -->
|
||||
<div v-if="!loginSuccess" class="text-center pt-2 border-t border-ghost-700">
|
||||
<p class="text-ghost-400 text-sm pt-4">
|
||||
<div v-if="!loginSuccess" class="text-center pt-2 border-t border-guild-700">
|
||||
<p class="text-guild-400 text-sm pt-4">
|
||||
Don't have an account?
|
||||
<NuxtLink
|
||||
to="/join"
|
||||
class="text-whisper-400 hover:text-whisper-300 font-medium"
|
||||
class="text-candlelight-400 hover:text-candlelight-300 font-medium"
|
||||
@click="close"
|
||||
>
|
||||
Join Ghost Guild
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@
|
|||
<button
|
||||
v-if="dismissible"
|
||||
@click="isDismissed = true"
|
||||
class="text-ghost-400 hover:text-ghost-200 transition-colors"
|
||||
class="text-guild-400 hover:text-guild-200 transition-colors"
|
||||
:aria-label="`Dismiss ${statusConfig.label} banner`"
|
||||
>
|
||||
<Icon name="heroicons:x-mark" class="w-5 h-5" />
|
||||
|
|
@ -119,7 +119,7 @@ const getActionButtonClass = (color) => {
|
|||
const colorClasses = {
|
||||
orange: "bg-orange-600 text-white hover:bg-orange-700",
|
||||
blue: "bg-blue-600 text-white hover:bg-blue-700",
|
||||
gray: "bg-ghost-700 text-ghost-100 hover:bg-ghost-600",
|
||||
gray: "bg-guild-700 text-guild-100 hover:bg-guild-600",
|
||||
};
|
||||
return `${baseClass} ${colorClasses[color] || colorClasses.blue}`;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -26,8 +26,8 @@
|
|||
v-if="showInteractiveArea"
|
||||
:class="[
|
||||
'rounded-2xl p-6 md:p-8 mb-12 backdrop-blur-sm',
|
||||
props.theme === 'ethereal'
|
||||
? 'bg-ghost-800/60 border border-ghost-700 ethereal-glow halftone-texture'
|
||||
props.theme === 'guild'
|
||||
? 'bg-guild-800/60 border border-guild-700 candlelight-glow halftone-texture'
|
||||
: 'bg-[--ui-bg-elevated] shadow-xl border border-blue-200',
|
||||
]"
|
||||
>
|
||||
|
|
@ -35,8 +35,8 @@
|
|||
<button
|
||||
:class="[
|
||||
'p-2 md:p-3 rounded-full transition-all duration-300 flex-shrink-0',
|
||||
props.theme === 'ethereal'
|
||||
? 'bg-whisper-600/80 text-ghost-100 hover:bg-whisper-500 ethereal-glow'
|
||||
props.theme === 'guild'
|
||||
? 'bg-candlelight-600/80 text-guild-100 hover:bg-candlelight-500 candlelight-glow'
|
||||
: 'bg-blue-500 text-white hover:bg-blue-600',
|
||||
]"
|
||||
@click="$emit('prev')"
|
||||
|
|
@ -61,8 +61,8 @@
|
|||
<p
|
||||
:class="[
|
||||
'text-base md:text-lg',
|
||||
props.theme === 'ethereal'
|
||||
? 'text-ghost-200'
|
||||
props.theme === 'guild'
|
||||
? 'text-guild-200'
|
||||
: 'text-[--ui-text-muted]',
|
||||
]"
|
||||
>
|
||||
|
|
@ -77,8 +77,8 @@
|
|||
<button
|
||||
:class="[
|
||||
'p-2 md:p-3 rounded-full transition-all duration-300 flex-shrink-0',
|
||||
props.theme === 'ethereal'
|
||||
? 'bg-whisper-600/80 text-ghost-100 hover:bg-whisper-500 ethereal-glow'
|
||||
props.theme === 'guild'
|
||||
? 'bg-candlelight-600/80 text-guild-100 hover:bg-candlelight-500 candlelight-glow'
|
||||
: 'bg-blue-500 text-white hover:bg-blue-600',
|
||||
]"
|
||||
@click="$emit('next')"
|
||||
|
|
@ -137,7 +137,7 @@ const props = defineProps({
|
|||
type: String,
|
||||
default: "blue",
|
||||
validator: (value) =>
|
||||
["blue", "purple", "emerald", "gray", "ethereal"].includes(value),
|
||||
["blue", "purple", "emerald", "gray", "guild"].includes(value),
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
|
|
@ -182,8 +182,8 @@ const backgroundClass = computed(() => {
|
|||
purple: "bg-gradient-to-br from-purple-50 to-violet-100",
|
||||
emerald: "bg-gradient-to-br from-emerald-50 to-teal-100",
|
||||
gray: "bg-neutral-100",
|
||||
ethereal:
|
||||
"bg-gradient-to-br from-ghost-900 via-ghost-800 to-whisper-900 halftone-texture",
|
||||
guild:
|
||||
"bg-gradient-to-br from-guild-900 via-guild-800 to-candlelight-900 halftone-texture",
|
||||
};
|
||||
return themes[props.theme] || themes.blue;
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="flex items-center gap-3 text-sm">
|
||||
<span class="text-gray-700 dark:text-ghost-400 text-xs font-medium"
|
||||
<span class="text-gray-700 dark:text-guild-400 text-xs font-medium"
|
||||
>{{ label }}:</span
|
||||
>
|
||||
<div class="flex items-center gap-2">
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
class="text-xs transition-colors"
|
||||
:class="
|
||||
isPrivate
|
||||
? 'text-gray-500 dark:text-ghost-500'
|
||||
? 'text-gray-500 dark:text-guild-500'
|
||||
: 'text-blue-600 dark:text-blue-400 font-semibold'
|
||||
"
|
||||
>
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
:class="
|
||||
isPrivate
|
||||
? 'text-blue-600 dark:text-blue-400 font-semibold'
|
||||
: 'text-gray-500 dark:text-ghost-500'
|
||||
: 'text-gray-500 dark:text-guild-500'
|
||||
"
|
||||
>
|
||||
Private
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@
|
|||
<!-- Registration Form -->
|
||||
<div
|
||||
v-if="passInfo.available && !passInfo.alreadyRegistered"
|
||||
class="bg-ghost-800/50 dark:bg-ghost-700/30 rounded-xl border border-ghost-600 dark:border-ghost-600 p-6"
|
||||
class="bg-guild-800/50 dark:bg-guild-700/30 rounded-xl border border-guild-600 dark:border-guild-600 p-6"
|
||||
>
|
||||
<h3 class="text-xl font-bold text-[--ui-text] mb-6">
|
||||
{{
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
/>
|
||||
<div
|
||||
v-else
|
||||
class="w-12 h-12 rounded-full bg-ghost-700 flex items-center justify-center text-ghost-300 font-bold"
|
||||
class="w-12 h-12 rounded-full bg-guild-700 flex items-center justify-center text-guild-300 font-bold"
|
||||
>
|
||||
{{ update.author?.name?.charAt(0)?.toUpperCase() || "?" }}
|
||||
</div>
|
||||
|
|
@ -23,30 +23,30 @@
|
|||
<!-- Header -->
|
||||
<div class="flex items-start justify-between gap-4 mb-2">
|
||||
<div>
|
||||
<h3 class="font-semibold text-ghost-100">
|
||||
<h3 class="font-semibold text-guild-100">
|
||||
<NuxtLink
|
||||
v-if="update.author?._id"
|
||||
:to="`/updates/user/${update.author._id}`"
|
||||
class="hover:text-ghost-300 transition-colors"
|
||||
class="hover:text-guild-300 transition-colors"
|
||||
>
|
||||
{{ update.author.name }}
|
||||
</NuxtLink>
|
||||
<span v-else>Unknown Member</span>
|
||||
</h3>
|
||||
<div class="flex items-center gap-2 text-sm text-ghost-400">
|
||||
<div class="flex items-center gap-2 text-sm text-guild-400">
|
||||
<time :datetime="update.createdAt">
|
||||
{{ formatDate(update.createdAt) }}
|
||||
</time>
|
||||
<span v-if="isEdited" class="text-ghost-500">(edited)</span>
|
||||
<span v-if="isEdited" class="text-guild-500">(edited)</span>
|
||||
<span
|
||||
v-if="update.privacy === 'private'"
|
||||
class="px-2 py-0.5 bg-ghost-700 text-ghost-300 rounded text-xs"
|
||||
class="px-2 py-0.5 bg-guild-700 text-guild-300 rounded text-xs"
|
||||
>
|
||||
Private
|
||||
</span>
|
||||
<span
|
||||
v-if="update.privacy === 'public'"
|
||||
class="px-2 py-0.5 bg-ghost-700 text-ghost-300 rounded text-xs"
|
||||
class="px-2 py-0.5 bg-guild-700 text-guild-300 rounded text-xs"
|
||||
>
|
||||
Public
|
||||
</span>
|
||||
|
|
@ -73,12 +73,12 @@
|
|||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="text-ghost-200 whitespace-pre-wrap break-words mb-3">
|
||||
<div class="text-guild-200 whitespace-pre-wrap break-words mb-3">
|
||||
<template v-if="showPreview && update.content.length > 300">
|
||||
{{ update.content.substring(0, 300) }}...
|
||||
<NuxtLink
|
||||
:to="`/updates/${update._id}`"
|
||||
class="text-ghost-400 hover:text-ghost-300 ml-1"
|
||||
class="text-guild-400 hover:text-guild-300 ml-1"
|
||||
>
|
||||
Read more
|
||||
</NuxtLink>
|
||||
|
|
@ -100,14 +100,14 @@
|
|||
</div>
|
||||
|
||||
<!-- Footer actions -->
|
||||
<div class="flex items-center gap-4 text-sm text-ghost-400">
|
||||
<div class="flex items-center gap-4 text-sm text-guild-400">
|
||||
<NuxtLink
|
||||
:to="`/updates/${update._id}`"
|
||||
class="hover:text-ghost-300 transition-colors"
|
||||
class="hover:text-guild-300 transition-colors"
|
||||
>
|
||||
View full update
|
||||
</NuxtLink>
|
||||
<span v-if="update.commentsEnabled" class="text-ghost-500">
|
||||
<span v-if="update.commentsEnabled" class="text-guild-500">
|
||||
Comments (coming soon)
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -175,15 +175,15 @@ const formatDate = (date) => {
|
|||
|
||||
<style scoped>
|
||||
.update-card {
|
||||
background-color: rgb(41 37 36);
|
||||
border-color: rgb(87 83 78);
|
||||
background-color: var(--color-guild-800);
|
||||
border-color: var(--color-guild-600);
|
||||
}
|
||||
|
||||
.update-card:hover {
|
||||
border-color: rgb(120 113 108);
|
||||
border-color: var(--color-guild-500);
|
||||
}
|
||||
|
||||
:deep(.card) {
|
||||
background-color: rgb(41 37 36);
|
||||
background-color: var(--color-guild-800);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -11,19 +11,19 @@
|
|||
</UFormField>
|
||||
|
||||
<!-- Privacy Settings -->
|
||||
<div class="border border-ghost-700 rounded-lg p-4 bg-ghost-800/30">
|
||||
<h3 class="text-sm font-medium text-ghost-200 mb-4">Privacy Settings</h3>
|
||||
<div class="border border-guild-700 rounded-lg p-4 bg-guild-800/30">
|
||||
<h3 class="text-sm font-medium text-guild-200 mb-4">Privacy Settings</h3>
|
||||
<div class="space-y-3">
|
||||
<label class="flex items-center gap-3 cursor-pointer">
|
||||
<input
|
||||
v-model="formData.privacy"
|
||||
type="radio"
|
||||
value="public"
|
||||
class="w-4 h-4 text-ghost-400"
|
||||
class="w-4 h-4 text-guild-400"
|
||||
/>
|
||||
<div>
|
||||
<div class="text-ghost-200 font-medium">Public</div>
|
||||
<div class="text-sm text-ghost-400">
|
||||
<div class="text-guild-200 font-medium">Public</div>
|
||||
<div class="text-sm text-guild-400">
|
||||
Visible to everyone, including non-members
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -34,11 +34,11 @@
|
|||
v-model="formData.privacy"
|
||||
type="radio"
|
||||
value="members"
|
||||
class="w-4 h-4 text-ghost-400"
|
||||
class="w-4 h-4 text-guild-400"
|
||||
/>
|
||||
<div>
|
||||
<div class="text-ghost-200 font-medium">Members Only</div>
|
||||
<div class="text-sm text-ghost-400">
|
||||
<div class="text-guild-200 font-medium">Members Only</div>
|
||||
<div class="text-sm text-guild-400">
|
||||
Only visible to Ghost Guild members
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -49,11 +49,11 @@
|
|||
v-model="formData.privacy"
|
||||
type="radio"
|
||||
value="private"
|
||||
class="w-4 h-4 text-ghost-400"
|
||||
class="w-4 h-4 text-guild-400"
|
||||
/>
|
||||
<div>
|
||||
<div class="text-ghost-200 font-medium">Private</div>
|
||||
<div class="text-sm text-ghost-400">Only visible to you</div>
|
||||
<div class="text-guild-200 font-medium">Private</div>
|
||||
<div class="text-sm text-guild-400">Only visible to you</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
|
@ -66,8 +66,8 @@
|
|||
<div class="flex items-center gap-3">
|
||||
<USwitch v-model="formData.commentsEnabled" />
|
||||
<div>
|
||||
<div class="text-ghost-200 font-medium">Enable Comments</div>
|
||||
<div class="text-sm text-ghost-400">
|
||||
<div class="text-guild-200 font-medium">Enable Comments</div>
|
||||
<div class="text-sm text-guild-400">
|
||||
Allow members to comment on this update
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -75,7 +75,7 @@
|
|||
|
||||
<!-- Actions -->
|
||||
<div
|
||||
class="flex justify-between items-center pt-4 border-t border-ghost-700"
|
||||
class="flex justify-between items-center pt-4 border-t border-guild-700"
|
||||
>
|
||||
<UButton variant="ghost" color="neutral" @click="$emit('cancel')">
|
||||
Cancel
|
||||
|
|
@ -157,28 +157,28 @@ watch(
|
|||
<style scoped>
|
||||
/* Field labels */
|
||||
:deep(label) {
|
||||
color: rgb(231 229 228) !important;
|
||||
color: var(--color-guild-200) !important;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Textarea styling */
|
||||
:deep(textarea) {
|
||||
background-color: rgb(41 37 36) !important;
|
||||
color: rgb(231 229 228) !important;
|
||||
border-color: rgb(87 83 78) !important;
|
||||
background-color: var(--color-guild-800) !important;
|
||||
color: var(--color-guild-200) !important;
|
||||
border-color: var(--color-guild-600) !important;
|
||||
}
|
||||
|
||||
:deep(textarea::placeholder) {
|
||||
color: rgb(120 113 108) !important;
|
||||
color: var(--color-guild-500) !important;
|
||||
}
|
||||
|
||||
:deep(textarea:focus) {
|
||||
border-color: rgb(168 162 158) !important;
|
||||
background-color: rgb(44 40 39) !important;
|
||||
border-color: var(--color-guild-400) !important;
|
||||
background-color: var(--color-guild-700) !important;
|
||||
}
|
||||
|
||||
/* Radio buttons */
|
||||
input[type="radio"] {
|
||||
accent-color: rgb(168 162 158);
|
||||
accent-color: var(--color-candlelight-600);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,36 +1,48 @@
|
|||
// Central configuration for Ghost Guild Circles
|
||||
export const CIRCLES = {
|
||||
COMMUNITY: {
|
||||
value: 'community',
|
||||
label: 'Community Circle',
|
||||
description: 'For individuals interested in learning about cooperative principles',
|
||||
value: "community",
|
||||
label: "Community",
|
||||
shortDescription: "Learning about co-ops",
|
||||
description:
|
||||
"For individuals interested in learning about cooperative principles",
|
||||
features: [
|
||||
'Game workers curious about co-ops, researchers, industry allies',
|
||||
'People exploring alternative work models',
|
||||
'Access to community forums and resources'
|
||||
]
|
||||
"Game workers curious about coops",
|
||||
"People exploring alternative work models, including researchers and industry allies",
|
||||
"Access to community forums and resources",
|
||||
],
|
||||
colorToken: "circle-community",
|
||||
metaphor: "Reading Room",
|
||||
icon: null,
|
||||
},
|
||||
FOUNDER: {
|
||||
value: 'founder',
|
||||
label: 'Founder Circle',
|
||||
description: 'For those actively establishing or growing their cooperative studio',
|
||||
value: "founder",
|
||||
label: "Founders",
|
||||
shortDescription: "Building your studio",
|
||||
description: "For those actively establishing or growing their coop",
|
||||
features: [
|
||||
'Has two tracks: Peer Accelerator Prep Track and Indie Track',
|
||||
'Teams working toward PA application',
|
||||
'Early-stage co-op studios',
|
||||
'Studios transitioning to co-op model'
|
||||
]
|
||||
"Teams working toward applying for the Peer Accelerator",
|
||||
"Early-stage coop studios",
|
||||
"Studios transitioning to coop model",
|
||||
],
|
||||
colorToken: "circle-founder",
|
||||
metaphor: "Workshop",
|
||||
icon: null,
|
||||
},
|
||||
PRACTITIONER: {
|
||||
value: 'practitioner',
|
||||
label: 'Practitioner Circle',
|
||||
description: 'For Peer Accelerator alumni and experienced studio leaders',
|
||||
value: "practitioner",
|
||||
label: "Practitioners",
|
||||
shortDescription: "Leading and mentoring",
|
||||
description: "For Peer Accelerator alumni and experienced studio founders",
|
||||
features: [
|
||||
'Those implementing cooperative models',
|
||||
'Industry mentors and advisors',
|
||||
'Expert-level workshops and mentorship opportunities'
|
||||
]
|
||||
}
|
||||
"Those implementing cooperative models",
|
||||
"Industry mentors and advisors",
|
||||
"Expert-level workshops and mentorship opportunities",
|
||||
],
|
||||
colorToken: "circle-practitioner",
|
||||
metaphor: "Alcove",
|
||||
icon: null,
|
||||
},
|
||||
};
|
||||
|
||||
// Get all circle options as an array (useful for forms)
|
||||
|
|
@ -40,15 +52,15 @@ export const getCircleOptions = () => {
|
|||
|
||||
// Get valid circle values for validation
|
||||
export const getValidCircleValues = () => {
|
||||
return Object.values(CIRCLES).map(circle => circle.value);
|
||||
return Object.values(CIRCLES).map((circle) => circle.value);
|
||||
};
|
||||
|
||||
// Get circle by value
|
||||
export const getCircleByValue = (value) => {
|
||||
return Object.values(CIRCLES).find(circle => circle.value === value);
|
||||
return Object.values(CIRCLES).find((circle) => circle.value === value);
|
||||
};
|
||||
|
||||
// Check if a circle value is valid
|
||||
export const isValidCircleValue = (value) => {
|
||||
return getValidCircleValues().includes(value);
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="min-h-screen bg-ghost-900">
|
||||
<div class="min-h-screen bg-guild-900">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="min-h-screen bg-ghost-900 relative">
|
||||
<div class="min-h-screen bg-guild-900 relative">
|
||||
<!-- Background image at top - full page width -->
|
||||
<div
|
||||
class="absolute inset-x-0 pointer-events-none z-0"
|
||||
|
|
@ -23,12 +23,12 @@
|
|||
|
||||
<!-- Mobile Header -->
|
||||
<div
|
||||
class="lg:hidden fixed top-0 left-0 right-0 z-50 bg-ghost-900/95 backdrop-blur-md border-b border-ghost-700"
|
||||
class="lg:hidden fixed top-0 left-0 right-0 z-50 bg-guild-900/95 backdrop-blur-md border-b border-guild-700"
|
||||
>
|
||||
<div class="flex items-center justify-between p-4">
|
||||
<NuxtLink
|
||||
to="/"
|
||||
class="text-lg font-bold text-white ethereal-text tracking-wider"
|
||||
class="text-lg font-bold text-white warm-text tracking-wider"
|
||||
>
|
||||
Ghost Guild
|
||||
</NuxtLink>
|
||||
|
|
@ -46,7 +46,7 @@
|
|||
<!-- Container to center content and sidebar together -->
|
||||
<div class="lg:flex lg:justify-center lg:gap-0">
|
||||
<!-- Main Content Column -->
|
||||
<div class="lg:w-[800px] overflow-y-auto relative z-[5]">
|
||||
<div class="lg:w-[800px] overflow-y-auto relative z-[5] guild-interior">
|
||||
<div class="relative">
|
||||
<slot />
|
||||
</div>
|
||||
|
|
|
|||
131
app/layouts/landing.vue
Normal file
131
app/layouts/landing.vue
Normal file
|
|
@ -0,0 +1,131 @@
|
|||
<template>
|
||||
<div class="min-h-screen bg-guild-900">
|
||||
<!-- Horizontal Navigation -->
|
||||
<nav class="w-full px-6 md:px-8 py-4">
|
||||
<div class="max-w-6xl mx-auto flex items-center justify-between">
|
||||
<!-- Logo/Wordmark -->
|
||||
<NuxtLink to="/" class="text-xl font-bold text-primary-400 tracking-wide">
|
||||
Ghost Guild
|
||||
</NuxtLink>
|
||||
|
||||
<!-- Desktop Navigation Links -->
|
||||
<div class="hidden md:flex items-center gap-8">
|
||||
<NuxtLink
|
||||
to="/about"
|
||||
class="text-guild-300 hover:text-guild-100 transition-colors text-sm"
|
||||
>
|
||||
About
|
||||
</NuxtLink>
|
||||
<NuxtLink
|
||||
to="/events"
|
||||
class="text-guild-300 hover:text-guild-100 transition-colors text-sm"
|
||||
>
|
||||
Events
|
||||
</NuxtLink>
|
||||
<template v-if="isAuthenticated">
|
||||
<NuxtLink
|
||||
to="/member/dashboard"
|
||||
class="text-primary-400 hover:text-primary-300 transition-colors text-sm font-medium"
|
||||
>
|
||||
Dashboard
|
||||
</NuxtLink>
|
||||
</template>
|
||||
<template v-else>
|
||||
<button
|
||||
@click="openLoginModal"
|
||||
class="text-primary-400 hover:text-primary-300 transition-colors text-sm font-medium"
|
||||
>
|
||||
Sign In
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Menu Button -->
|
||||
<UButton
|
||||
icon="i-lucide-menu"
|
||||
color="neutral"
|
||||
variant="ghost"
|
||||
size="md"
|
||||
class="md:hidden"
|
||||
@click="isMobileMenuOpen = true"
|
||||
aria-label="Open menu"
|
||||
/>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main>
|
||||
<slot />
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="border-t border-guild-800 py-8 px-6 md:px-8">
|
||||
<div class="max-w-6xl mx-auto flex flex-col md:flex-row justify-between items-center gap-4">
|
||||
<p class="text-guild-500 text-sm">
|
||||
© {{ currentYear }} Ghost Guild
|
||||
</p>
|
||||
<a
|
||||
href="mailto:hello@ghostguild.org"
|
||||
class="text-guild-500 hover:text-guild-300 transition-colors text-sm"
|
||||
>
|
||||
hello@ghostguild.org
|
||||
</a>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Mobile Navigation Drawer -->
|
||||
<USlideover v-model:open="isMobileMenuOpen" side="right">
|
||||
<template #body>
|
||||
<div class="p-6 space-y-6">
|
||||
<NuxtLink
|
||||
to="/about"
|
||||
class="block text-guild-200 hover:text-guild-100 transition-colors text-lg"
|
||||
@click="isMobileMenuOpen = false"
|
||||
>
|
||||
About
|
||||
</NuxtLink>
|
||||
<NuxtLink
|
||||
to="/events"
|
||||
class="block text-guild-200 hover:text-guild-100 transition-colors text-lg"
|
||||
@click="isMobileMenuOpen = false"
|
||||
>
|
||||
Events
|
||||
</NuxtLink>
|
||||
<template v-if="isAuthenticated">
|
||||
<NuxtLink
|
||||
to="/member/dashboard"
|
||||
class="block text-primary-400 hover:text-primary-300 transition-colors text-lg font-medium"
|
||||
@click="isMobileMenuOpen = false"
|
||||
>
|
||||
Dashboard
|
||||
</NuxtLink>
|
||||
</template>
|
||||
<template v-else>
|
||||
<button
|
||||
@click="handleMobileSignIn"
|
||||
class="block text-primary-400 hover:text-primary-300 transition-colors text-lg font-medium"
|
||||
>
|
||||
Sign In
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</USlideover>
|
||||
|
||||
<!-- Login Modal -->
|
||||
<LoginModal />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const { isAuthenticated } = useAuth()
|
||||
const { openLoginModal } = useLoginModal()
|
||||
|
||||
const isMobileMenuOpen = ref(false)
|
||||
const currentYear = new Date().getFullYear()
|
||||
|
||||
const handleMobileSignIn = () => {
|
||||
isMobileMenuOpen.value = false
|
||||
openLoginModal()
|
||||
}
|
||||
</script>
|
||||
|
|
@ -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