Adds authentication and pricing pages for user onboarding
Introduces comprehensive user authentication flow with plan selection and registration Includes: - Pricing page with plan details and selection - Payment page with plan summary and card information - Signup page for different plan tiers - Shared authentication layout and design system improvements Enhances user onboarding experience with clear plan information and streamlined signup process
This commit is contained in:
Janus C. H. Knudsen
parent
cd092f8290
commit
217a9cd95c
18 changed files with 2312 additions and 165 deletions
|
|
@ -1,163 +1,104 @@
|
|||
/**
|
||||
* SWP Design System - CSS Variables
|
||||
* SWP Design System
|
||||
*
|
||||
* Dette er den centrale definition af alle design tokens.
|
||||
* Alle farver, fonts og layout-variabler defineres her.
|
||||
* Entry point for all design tokens and base styles.
|
||||
* Import this file in your layout to get the complete design system.
|
||||
*/
|
||||
|
||||
@import url('design-tokens.css');
|
||||
|
||||
/* ===========================================
|
||||
COLOR PALETTE - Light Mode (Default)
|
||||
BASE RESETS & DEFAULTS
|
||||
=========================================== */
|
||||
:root {
|
||||
/* Surfaces */
|
||||
--color-surface: #fff;
|
||||
--color-background: #f5f5f5;
|
||||
--color-background-hover: #f0f0f0;
|
||||
--color-background-alt: #fafafa;
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Borders */
|
||||
--color-border: #e0e0e0;
|
||||
--color-border-light: #f0f0f0;
|
||||
html {
|
||||
font-size: var(--font-size-base);
|
||||
line-height: var(--line-height-normal);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* Text */
|
||||
--color-text: #333;
|
||||
--color-text-secondary: #666;
|
||||
--color-text-muted: #999;
|
||||
|
||||
/* Brand Colors */
|
||||
--color-teal: #00897b;
|
||||
--color-teal-light: color-mix(in srgb, var(--color-teal) 10%, transparent);
|
||||
|
||||
/* Semantic Colors */
|
||||
--color-blue: #1976d2;
|
||||
--color-green: #43a047;
|
||||
--color-amber: #f59e0b;
|
||||
--color-red: #e53935;
|
||||
--color-purple: #8b5cf6;
|
||||
body {
|
||||
font-family: var(--font-family);
|
||||
color: var(--color-text);
|
||||
background-color: var(--color-background);
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
COLOR PALETTE - Dark Mode (System)
|
||||
TYPOGRAPHY DEFAULTS
|
||||
=========================================== */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not(.light-mode) {
|
||||
--color-surface: #1e1e1e;
|
||||
--color-background: #121212;
|
||||
--color-background-hover: #2a2a2a;
|
||||
--color-background-alt: #1a1a1a;
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: var(--font-weight-semibold);
|
||||
line-height: var(--line-height-tight);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
--color-border: #333;
|
||||
--color-border-light: #2a2a2a;
|
||||
h1 { font-size: var(--font-size-3xl); }
|
||||
h2 { font-size: var(--font-size-2xl); }
|
||||
h3 { font-size: var(--font-size-xl); }
|
||||
h4 { font-size: var(--font-size-lg); }
|
||||
h5 { font-size: var(--font-size-base); }
|
||||
h6 { font-size: var(--font-size-md); }
|
||||
|
||||
--color-text: #e0e0e0;
|
||||
--color-text-secondary: #999;
|
||||
--color-text-muted: #666;
|
||||
p {
|
||||
margin-bottom: var(--spacing-8);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
--color-teal: #26a69a;
|
||||
--color-blue: #42a5f5;
|
||||
--color-green: #66bb6a;
|
||||
--color-amber: #ffb74d;
|
||||
--color-red: #ef5350;
|
||||
--color-purple: #a78bfa;
|
||||
}
|
||||
a {
|
||||
color: var(--color-teal);
|
||||
text-decoration: none;
|
||||
transition: color var(--transition-fast);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
COLOR PALETTE - Dark Mode (Manual)
|
||||
FOCUS STATES
|
||||
=========================================== */
|
||||
:root.dark-mode {
|
||||
--color-surface: #1e1e1e;
|
||||
--color-background: #121212;
|
||||
--color-background-hover: #2a2a2a;
|
||||
--color-background-alt: #1a1a1a;
|
||||
|
||||
--color-border: #333;
|
||||
--color-border-light: #2a2a2a;
|
||||
|
||||
--color-text: #e0e0e0;
|
||||
--color-text-secondary: #999;
|
||||
--color-text-muted: #666;
|
||||
|
||||
--color-teal: #26a69a;
|
||||
--color-blue: #42a5f5;
|
||||
--color-green: #66bb6a;
|
||||
--color-amber: #ffb74d;
|
||||
--color-red: #ef5350;
|
||||
--color-purple: #a78bfa;
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--color-teal);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
TYPOGRAPHY
|
||||
SCROLLBAR STYLING
|
||||
=========================================== */
|
||||
:root {
|
||||
--font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
--font-mono: 'JetBrains Mono', monospace;
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
/* Font Sizes */
|
||||
--font-size-xs: 11px;
|
||||
--font-size-sm: 12px;
|
||||
--font-size-base: 14px;
|
||||
--font-size-md: 13px;
|
||||
--font-size-lg: 16px;
|
||||
--font-size-xl: 22px;
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--color-background);
|
||||
}
|
||||
|
||||
/* Line Heights */
|
||||
--line-height-tight: 1.25;
|
||||
--line-height-normal: 1.5;
|
||||
--line-height-relaxed: 1.75;
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--color-text-muted);
|
||||
}
|
||||
|
||||
/* Firefox */
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--color-border) var(--color-background);
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
SPACING
|
||||
SELECTION
|
||||
=========================================== */
|
||||
:root {
|
||||
--spacing-1: 4px;
|
||||
--spacing-2: 8px;
|
||||
--spacing-3: 12px;
|
||||
--spacing-4: 16px;
|
||||
--spacing-5: 20px;
|
||||
--spacing-6: 24px;
|
||||
--spacing-8: 32px;
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
LAYOUT
|
||||
=========================================== */
|
||||
:root {
|
||||
--side-menu-width: 240px;
|
||||
--side-menu-width-collapsed: 64px;
|
||||
--topbar-height: 56px;
|
||||
--page-max-width: 1400px;
|
||||
--border-radius: 6px;
|
||||
--border-radius-lg: 8px;
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
TRANSITIONS
|
||||
=========================================== */
|
||||
:root {
|
||||
--transition-fast: 150ms ease;
|
||||
--transition-normal: 200ms ease;
|
||||
--transition-slow: 300ms ease;
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
Z-INDEX LAYERS
|
||||
=========================================== */
|
||||
:root {
|
||||
--z-dropdown: 100;
|
||||
--z-sticky: 200;
|
||||
--z-overlay: 900;
|
||||
--z-drawer: 1000;
|
||||
--z-modal: 1100;
|
||||
--z-tooltip: 1200;
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
SHADOWS
|
||||
=========================================== */
|
||||
:root {
|
||||
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
--shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
--shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.15);
|
||||
::selection {
|
||||
background: color-mix(in srgb, var(--color-teal) 30%, transparent);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue