Welcome to Tauri + React
+
+ {/* Background pattern for enhanced glass effect */}
+
+ {/* Header with Glass Effect */}
+
+
diff --git a/src/styles/theme.css b/src/styles/theme.css
new file mode 100644
index 000000000..a71b48643
--- /dev/null
+++ b/src/styles/theme.css
@@ -0,0 +1,559 @@
+/* ============================================
+ Premium Theme Styles for Crypto Platform
+ ============================================ */
+
+/* Import premium fonts */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&display=swap');
+
+/* Custom font declarations for premium typography */
+@font-face {
+ font-family: 'Cabinet Grotesk';
+ src: url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
+ font-display: swap;
+}
+
+/* ============================================
+ Root Variables & Theme Configuration
+ ============================================ */
+:root {
+ /* Semantic color tokens */
+ --color-background: theme('colors.canvas.50');
+ --color-surface: theme('colors.white');
+ --color-surface-elevated: theme('colors.canvas.100');
+ --color-border: theme('colors.stone.200');
+ --color-border-subtle: theme('colors.stone.100');
+
+ /* Text colors with hierarchy */
+ --color-text-primary: theme('colors.stone.900');
+ --color-text-secondary: theme('colors.stone.600');
+ --color-text-tertiary: theme('colors.stone.500');
+ --color-text-muted: theme('colors.stone.400');
+
+ /* Interaction states */
+ --color-hover: theme('colors.primary.50');
+ --color-active: theme('colors.primary.100');
+ --color-focus: theme('colors.primary.500');
+
+ /* Semantic status colors */
+ --color-success: theme('colors.sage.500');
+ --color-warning: theme('colors.amber.500');
+ --color-error: theme('colors.coral.500');
+ --color-info: theme('colors.primary.500');
+
+ /* Spacing rhythm */
+ --spacing-unit: 0.25rem;
+
+ /* Transition timing */
+ --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+ --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
+ --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
+
+ /* Border widths */
+ --border-width: 1px;
+ --border-width-thick: 2px;
+
+ /* Z-index scale */
+ --z-dropdown: 1000;
+ --z-sticky: 1100;
+ --z-overlay: 1200;
+ --z-modal: 1300;
+ --z-popover: 1400;
+ --z-tooltip: 1500;
+}
+
+/* ============================================
+ Global Styles & Resets
+ ============================================ */
+* {
+ box-sizing: border-box;
+ border-color: var(--color-border);
+}
+
+html {
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ text-rendering: optimizeLegibility;
+ scroll-behavior: smooth;
+ font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
+}
+
+body {
+ min-height: 100vh;
+ background: var(--color-background);
+ color: var(--color-text-primary);
+ line-height: 1.6;
+ position: relative;
+ overflow-x: hidden;
+}
+
+/* Subtle noise texture overlay for depth */
+body::before {
+ content: '';
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' /%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)' opacity='0.03' /%3E%3C/svg%3E");
+ pointer-events: none;
+ z-index: 1;
+ opacity: 0.4;
+}
+
+/* ============================================
+ Typography Enhancements
+ ============================================ */
+.text-display {
+ font-family: theme('fontFamily.display');
+ font-weight: 700;
+ letter-spacing: -0.04em;
+ line-height: 1.1;
+}
+
+.text-balance {
+ text-wrap: balance;
+}
+
+.text-gradient {
+ background: linear-gradient(135deg, theme('colors.primary.600') 0%, theme('colors.accent.lavender') 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+}
+
+.text-crypto-price {
+ font-family: theme('fontFamily.mono');
+ font-variant-numeric: tabular-nums;
+ font-feature-settings: 'tnum' 1;
+}
+
+/* ============================================
+ Glass Morphism Components
+ ============================================ */
+.glass-surface {
+ background: rgba(255, 255, 255, 0.7);
+ backdrop-filter: blur(20px) saturate(180%);
+ -webkit-backdrop-filter: blur(20px) saturate(180%);
+ border: 1px solid rgba(255, 255, 255, 0.3);
+ box-shadow:
+ 0 8px 32px rgba(0, 0, 0, 0.08),
+ inset 0 0 0 1px rgba(255, 255, 255, 0.5);
+}
+
+.glass-surface-dark {
+ background: rgba(15, 23, 42, 0.8);
+ backdrop-filter: blur(20px) saturate(180%);
+ -webkit-backdrop-filter: blur(20px) saturate(180%);
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ box-shadow:
+ 0 8px 32px rgba(0, 0, 0, 0.3),
+ inset 0 0 0 1px rgba(255, 255, 255, 0.05);
+}
+
+/* ============================================
+ Card Components
+ ============================================ */
+.card-elevated {
+ @apply bg-white rounded-2xl;
+ box-shadow:
+ 0 0 0 1px rgba(0, 0, 0, 0.03),
+ 0 2px 4px rgba(0, 0, 0, 0.04),
+ 0 8px 16px -4px rgba(0, 0, 0, 0.08),
+ 0 24px 48px -12px rgba(0, 0, 0, 0.12);
+ transition: all var(--transition-base);
+}
+
+.card-elevated:hover {
+ transform: translateY(-2px);
+ box-shadow:
+ 0 0 0 1px rgba(0, 0, 0, 0.03),
+ 0 4px 8px rgba(0, 0, 0, 0.04),
+ 0 16px 24px -8px rgba(0, 0, 0, 0.10),
+ 0 32px 64px -16px rgba(0, 0, 0, 0.14);
+}
+
+.card-interactive {
+ @apply bg-white rounded-xl p-6;
+ border: 1px solid theme('colors.stone.200');
+ transition: all var(--transition-fast);
+ cursor: pointer;
+ position: relative;
+ overflow: hidden;
+}
+
+.card-interactive::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 2px;
+ background: linear-gradient(90deg,
+ theme('colors.primary.500') 0%,
+ theme('colors.accent.lavender') 50%,
+ theme('colors.accent.sky') 100%);
+ transform: scaleX(0);
+ transition: transform var(--transition-base);
+}
+
+.card-interactive:hover {
+ border-color: theme('colors.primary.200');
+ background: theme('colors.primary.50');
+}
+
+.card-interactive:hover::before {
+ transform: scaleX(1);
+}
+
+/* ============================================
+ Button Styles
+ ============================================ */
+.btn-premium {
+ @apply relative inline-flex items-center justify-center px-6 py-3 rounded-xl font-medium;
+ background: linear-gradient(135deg, theme('colors.primary.500') 0%, theme('colors.primary.600') 100%);
+ color: white;
+ box-shadow:
+ 0 2px 4px rgba(91, 155, 243, 0.24),
+ 0 8px 16px -4px rgba(91, 155, 243, 0.20),
+ inset 0 1px 0 rgba(255, 255, 255, 0.12);
+ transition: all var(--transition-base);
+ overflow: hidden;
+}
+
+.btn-premium::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(135deg,
+ transparent 0%,
+ rgba(255, 255, 255, 0.2) 50%,
+ transparent 100%);
+ transform: translateX(-100%);
+ transition: transform 0.6s;
+}
+
+.btn-premium:hover {
+ transform: translateY(-1px);
+ box-shadow:
+ 0 4px 8px rgba(91, 155, 243, 0.32),
+ 0 12px 24px -8px rgba(91, 155, 243, 0.28),
+ inset 0 1px 0 rgba(255, 255, 255, 0.16);
+}
+
+.btn-premium:hover::before {
+ transform: translateX(100%);
+}
+
+.btn-premium:active {
+ transform: translateY(0);
+}
+
+.btn-glass {
+ @apply relative inline-flex items-center justify-center px-6 py-3 rounded-xl font-medium;
+ background: rgba(255, 255, 255, 0.1);
+ backdrop-filter: blur(10px);
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ color: theme('colors.stone.700');
+ transition: all var(--transition-base);
+}
+
+.btn-glass:hover {
+ background: rgba(255, 255, 255, 0.2);
+ border-color: rgba(255, 255, 255, 0.3);
+ transform: translateY(-1px);
+}
+
+.btn-outline {
+ @apply relative inline-flex items-center justify-center px-6 py-3 rounded-xl font-medium;
+ background: transparent;
+ border: 1.5px solid theme('colors.stone.300');
+ color: theme('colors.stone.700');
+ transition: all var(--transition-base);
+ position: relative;
+ overflow: hidden;
+}
+
+.btn-outline::before {
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 0;
+ height: 0;
+ border-radius: 50%;
+ background: theme('colors.primary.50');
+ transform: translate(-50%, -50%);
+ transition: width 0.6s, height 0.6s;
+}
+
+.btn-outline:hover {
+ border-color: theme('colors.primary.500');
+ color: theme('colors.primary.600');
+}
+
+.btn-outline:hover::before {
+ width: 300px;
+ height: 300px;
+}
+
+/* ============================================
+ Input & Form Styles
+ ============================================ */
+.input-elevated {
+ @apply w-full px-4 py-3 rounded-xl;
+ background: white;
+ border: 1px solid theme('colors.stone.200');
+ color: theme('colors.stone.900');
+ font-size: theme('fontSize.base');
+ transition: all var(--transition-fast);
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+}
+
+.input-elevated:focus {
+ outline: none;
+ border-color: theme('colors.primary.500');
+ box-shadow:
+ 0 0 0 3px theme('colors.primary.50'),
+ 0 1px 2px rgba(0, 0, 0, 0.04);
+}
+
+.input-elevated::placeholder {
+ color: theme('colors.stone.400');
+}
+
+/* ============================================
+ Navigation Components
+ ============================================ */
+.nav-item-premium {
+ @apply relative flex items-center px-4 py-2.5 rounded-xl;
+ color: theme('colors.stone.600');
+ transition: all var(--transition-fast);
+ font-weight: 500;
+}
+
+.nav-item-premium:hover {
+ color: theme('colors.stone.900');
+ background: theme('colors.stone.50');
+}
+
+.nav-item-premium.active {
+ color: theme('colors.primary.600');
+ background: theme('colors.primary.50');
+}
+
+.nav-item-premium.active::before {
+ content: '';
+ position: absolute;
+ left: 0;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 3px;
+ height: 20px;
+ background: theme('colors.primary.500');
+ border-radius: 0 3px 3px 0;
+}
+
+/* ============================================
+ Badge & Status Components
+ ============================================ */
+.badge-premium {
+ @apply inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-semibold;
+ background: linear-gradient(135deg,
+ theme('colors.primary.50') 0%,
+ theme('colors.accent.lavender/10') 100%);
+ color: theme('colors.primary.700');
+ border: 1px solid theme('colors.primary.200');
+}
+
+.status-indicator {
+ @apply relative inline-flex h-3 w-3;
+}
+
+.status-indicator span {
+ @apply absolute inline-flex h-full w-full rounded-full opacity-75;
+ animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
+}
+
+.status-indicator.online span {
+ @apply bg-sage-400;
+}
+
+.status-indicator.offline span {
+ @apply bg-stone-400;
+}
+
+/* ============================================
+ Market-Specific Components
+ ============================================ */
+.price-ticker {
+ @apply font-mono text-lg font-semibold;
+ font-variant-numeric: tabular-nums;
+}
+
+.price-ticker.up {
+ @apply text-market-bullish;
+}
+
+.price-ticker.down {
+ @apply text-market-bearish;
+}
+
+.price-ticker.neutral {
+ @apply text-market-neutral;
+}
+
+.market-card {
+ @apply relative overflow-hidden rounded-2xl p-6;
+ background: linear-gradient(135deg, white 0%, theme('colors.canvas.100') 100%);
+ border: 1px solid theme('colors.stone.200');
+}
+
+.market-card::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ right: -50%;
+ width: 200%;
+ height: 200%;
+ background: radial-gradient(circle, theme('colors.primary.500/5') 0%, transparent 70%);
+ animation: float 20s ease-in-out infinite;
+}
+
+/* ============================================
+ Chart & Data Visualization
+ ============================================ */
+.chart-container {
+ @apply relative rounded-xl p-4;
+ background: white;
+ border: 1px solid theme('colors.stone.200');
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+}
+
+.chart-grid {
+ background-image:
+ linear-gradient(0deg, theme('colors.stone.100') 1px, transparent 1px),
+ linear-gradient(90deg, theme('colors.stone.100') 1px, transparent 1px);
+ background-size: 20px 20px;
+}
+
+/* ============================================
+ Loading & Skeleton States
+ ============================================ */
+.skeleton {
+ @apply relative overflow-hidden bg-stone-200 rounded-lg;
+}
+
+.skeleton::after {
+ content: '';
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ background: linear-gradient(
+ 90deg,
+ transparent 0%,
+ theme('colors.stone.100') 50%,
+ transparent 100%
+ );
+ animation: shimmer 2s linear infinite;
+}
+
+@keyframes shimmer {
+ 0% {
+ transform: translateX(-100%);
+ }
+ 100% {
+ transform: translateX(100%);
+ }
+}
+
+/* ============================================
+ Scrollbar Styling
+ ============================================ */
+.scrollbar-elegant {
+ scrollbar-width: thin;
+ scrollbar-color: theme('colors.stone.300') transparent;
+}
+
+.scrollbar-elegant::-webkit-scrollbar {
+ width: 8px;
+ height: 8px;
+}
+
+.scrollbar-elegant::-webkit-scrollbar-track {
+ background: transparent;
+}
+
+.scrollbar-elegant::-webkit-scrollbar-thumb {
+ background: theme('colors.stone.300');
+ border-radius: 4px;
+ border: 2px solid transparent;
+ background-clip: padding-box;
+}
+
+.scrollbar-elegant::-webkit-scrollbar-thumb:hover {
+ background: theme('colors.stone.400');
+}
+
+/* ============================================
+ Responsive Utilities
+ ============================================ */
+@media (max-width: 640px) {
+ .hide-mobile {
+ display: none;
+ }
+}
+
+@media (min-width: 641px) {
+ .show-mobile-only {
+ display: none;
+ }
+}
+
+/* ============================================
+ Accessibility Enhancements
+ ============================================ */
+.focus-visible:focus {
+ outline: 2px solid theme('colors.primary.500');
+ outline-offset: 2px;
+}
+
+.sr-only {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border-width: 0;
+}
+
+/* ============================================
+ Dark Mode Support (Optional)
+ ============================================ */
+@media (prefers-color-scheme: dark) {
+ :root {
+ --color-background: theme('colors.slate.950');
+ --color-surface: theme('colors.slate.900');
+ --color-surface-elevated: theme('colors.slate.800');
+ --color-border: theme('colors.slate.700');
+ --color-border-subtle: theme('colors.slate.800');
+
+ --color-text-primary: theme('colors.slate.50');
+ --color-text-secondary: theme('colors.slate.300');
+ --color-text-tertiary: theme('colors.slate.400');
+ --color-text-muted: theme('colors.slate.500');
+ }
+
+ .glass-surface {
+ background: rgba(15, 23, 42, 0.7);
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ }
+}
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 000000000..577265760
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,271 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ content: [
+ "./index.html",
+ "./src/**/*.{js,ts,jsx,tsx}",
+ ],
+ theme: {
+ extend: {
+ // Premium font stack optimized for crypto professionals
+ fontFamily: {
+ 'sans': ['Inter', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Helvetica', 'Arial', 'sans-serif'],
+ 'display': ['Cabinet Grotesk', 'Inter', '-apple-system', 'system-ui', 'sans-serif'],
+ 'mono': ['JetBrains Mono', 'SF Mono', 'Consolas', 'Liberation Mono', 'Courier', 'monospace'],
+ 'serif': ['Newsreader', 'Georgia', 'Cambria', 'Times New Roman', 'Times', 'serif'],
+ },
+
+ // Elevated color system - Calm, trustworthy, and sophisticated
+ colors: {
+ // Canvas - Background layers with subtle warmth
+ canvas: {
+ 50: '#FAFAF9', // Base background
+ 100: '#F5F5F4', // Secondary background
+ 150: '#EDEDEC', // Tertiary background
+ 200: '#E5E5E3', // Card background
+ 300: '#D4D4D1', // Hover states
+ },
+
+ // Primary - Premium ocean blue with depth
+ primary: {
+ 50: '#F0F7FF',
+ 100: '#E0EFFF',
+ 200: '#C7E2FF',
+ 300: '#A5D0FF',
+ 400: '#7AB5FF',
+ 500: '#5B9BF3', // Main brand - sophisticated blue
+ 600: '#4A83DD', // Hover state
+ 700: '#3D6DC4', // Active state
+ 800: '#345A9F',
+ 900: '#2D4B7F',
+ 950: '#1E3052',
+ },
+
+ // Sage - Success and growth (sophisticated green)
+ sage: {
+ 50: '#F7FDF9',
+ 100: '#ECFAEF',
+ 200: '#D4F4DC',
+ 300: '#AEEAC1',
+ 400: '#72D892',
+ 500: '#4DC46F', // Main success - refined green
+ 600: '#3BA858',
+ 700: '#318B48',
+ 800: '#2B6F3C',
+ 900: '#255933',
+ 950: '#14371E',
+ },
+
+ // Amber - Attention and caution (warm, muted)
+ amber: {
+ 50: '#FEFDF8',
+ 100: '#FEF8E7',
+ 200: '#FDEEC8',
+ 300: '#FBDF9A',
+ 400: '#F7C960',
+ 500: '#E8A838', // Main warning - sophisticated amber
+ 600: '#D18B1F',
+ 700: '#B06F1A',
+ 800: '#8D581B',
+ 900: '#744919',
+ 950: '#4A2B0B',
+ },
+
+ // Coral - Errors and dangers (soft, professional)
+ coral: {
+ 50: '#FFF5F5',
+ 100: '#FFEBEB',
+ 200: '#FFD6D6',
+ 300: '#FFB3B3',
+ 400: '#FF8585',
+ 500: '#F56565', // Main error - soft coral red
+ 600: '#E84855',
+ 700: '#D13742',
+ 800: '#B02937',
+ 900: '#922330',
+ 950: '#5C1419',
+ },
+
+ // Stone - Neutral scale with subtle warmth
+ stone: {
+ 50: '#FAFAF9',
+ 100: '#F5F5F4',
+ 200: '#E7E5E4',
+ 300: '#D6D3D1',
+ 400: '#A8A29E',
+ 500: '#78716C',
+ 600: '#57534E',
+ 700: '#44403C',
+ 800: '#292524',
+ 900: '#1C1917',
+ 950: '#0C0A09',
+ },
+
+ // Slate - Cool grays for data and charts
+ slate: {
+ 50: '#F8FAFC',
+ 100: '#F1F5F9',
+ 200: '#E2E8F0',
+ 300: '#CBD5E1',
+ 400: '#94A3B8',
+ 500: '#64748B',
+ 600: '#475569',
+ 700: '#334155',
+ 800: '#1E293B',
+ 900: '#0F172A',
+ 950: '#020617',
+ },
+
+ // Market colors - For crypto specific UI
+ market: {
+ bullish: '#4DC46F', // Green for gains
+ bearish: '#F56565', // Red for losses
+ neutral: '#94A3B8', // Gray for no change
+ bitcoin: '#F7931A', // Bitcoin orange
+ ethereum: '#627EEA', // Ethereum purple
+ stablecoin: '#5B9BF3', // Blue for stables
+ },
+
+ // Accent colors for special elements
+ accent: {
+ lavender: '#9B8AFB', // Premium features
+ mint: '#6EE7B7', // Achievements
+ sky: '#7DD3FC', // Notifications
+ rose: '#FDA4AF', // Alerts
+ gold: '#FCD34D', // Rewards
+ }
+ },
+
+ // Refined spacing scale for elegant layouts
+ spacing: {
+ '4.5': '1.125rem',
+ '13': '3.25rem',
+ '15': '3.75rem',
+ '17': '4.25rem',
+ '18': '4.5rem',
+ '22': '5.5rem',
+ '30': '7.5rem',
+ '34': '8.5rem',
+ '42': '10.5rem',
+ '68': '17rem',
+ '76': '19rem',
+ '84': '21rem',
+ '88': '22rem',
+ '92': '23rem',
+ '128': '32rem',
+ '144': '36rem',
+ },
+
+ // Sophisticated typography scale
+ fontSize: {
+ 'micro': ['0.625rem', { lineHeight: '0.75rem', letterSpacing: '0.02em' }],
+ 'xs': ['0.75rem', { lineHeight: '1rem', letterSpacing: '0.01em' }],
+ 'sm': ['0.875rem', { lineHeight: '1.25rem', letterSpacing: '0' }],
+ 'base': ['1rem', { lineHeight: '1.5rem', letterSpacing: '-0.01em' }],
+ 'lg': ['1.125rem', { lineHeight: '1.75rem', letterSpacing: '-0.01em' }],
+ 'xl': ['1.25rem', { lineHeight: '1.875rem', letterSpacing: '-0.02em' }],
+ '2xl': ['1.5rem', { lineHeight: '2rem', letterSpacing: '-0.02em' }],
+ '3xl': ['1.875rem', { lineHeight: '2.25rem', letterSpacing: '-0.02em' }],
+ '4xl': ['2.25rem', { lineHeight: '2.5rem', letterSpacing: '-0.03em' }],
+ '5xl': ['3rem', { lineHeight: '3.5rem', letterSpacing: '-0.03em' }],
+ '6xl': ['3.75rem', { lineHeight: '4rem', letterSpacing: '-0.04em' }],
+ '7xl': ['4.5rem', { lineHeight: '4.75rem', letterSpacing: '-0.04em' }],
+ },
+
+ // Smooth border radius system
+ borderRadius: {
+ 'xs': '0.25rem',
+ 'sm': '0.375rem',
+ 'md': '0.5rem',
+ 'lg': '0.625rem',
+ 'xl': '0.75rem',
+ '2xl': '1rem',
+ '3xl': '1.25rem',
+ '4xl': '1.5rem',
+ '5xl': '2rem',
+ },
+
+ // Sophisticated shadow system for depth
+ boxShadow: {
+ 'glow': '0 0 20px rgba(91, 155, 243, 0.15)',
+ 'glow-lg': '0 0 40px rgba(91, 155, 243, 0.2)',
+ 'inner-glow': 'inset 0 0 20px rgba(91, 155, 243, 0.08)',
+ 'subtle': '0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 3px 0 rgba(0, 0, 0, 0.04)',
+ 'soft': '0 2px 8px -2px rgba(0, 0, 0, 0.08), 0 4px 12px -4px rgba(0, 0, 0, 0.08)',
+ 'medium': '0 4px 12px -2px rgba(0, 0, 0, 0.08), 0 8px 16px -4px rgba(0, 0, 0, 0.08)',
+ 'large': '0 8px 24px -4px rgba(0, 0, 0, 0.10), 0 16px 32px -8px rgba(0, 0, 0, 0.10)',
+ 'float': '0 12px 32px -8px rgba(0, 0, 0, 0.12), 0 24px 48px -12px rgba(0, 0, 0, 0.12)',
+ 'crisp': '0 0 0 1px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.08)',
+ },
+
+ // Premium animations for polished interactions
+ animation: {
+ 'fade-in': 'fadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1)',
+ 'fade-up': 'fadeUp 0.5s cubic-bezier(0.4, 0, 0.2, 1)',
+ 'slide-in': 'slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+ 'scale-in': 'scaleIn 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+ 'shimmer': 'shimmer 2s linear infinite',
+ 'glow-pulse': 'glowPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+ 'float': 'float 3s ease-in-out infinite',
+ 'ticker': 'ticker 30s linear infinite',
+ },
+
+ keyframes: {
+ fadeIn: {
+ '0%': { opacity: '0' },
+ '100%': { opacity: '1' },
+ },
+ fadeUp: {
+ '0%': { opacity: '0', transform: 'translateY(10px)' },
+ '100%': { opacity: '1', transform: 'translateY(0)' },
+ },
+ slideIn: {
+ '0%': { transform: 'translateX(-100%)' },
+ '100%': { transform: 'translateX(0)' },
+ },
+ scaleIn: {
+ '0%': { transform: 'scale(0.95)', opacity: '0' },
+ '100%': { transform: 'scale(1)', opacity: '1' },
+ },
+ shimmer: {
+ '0%': { backgroundPosition: '-200% 0' },
+ '100%': { backgroundPosition: '200% 0' },
+ },
+ glowPulse: {
+ '0%, 100%': { opacity: '1' },
+ '50%': { opacity: '0.5' },
+ },
+ float: {
+ '0%, 100%': { transform: 'translateY(0)' },
+ '50%': { transform: 'translateY(-10px)' },
+ },
+ ticker: {
+ '0%': { transform: 'translateX(0)' },
+ '100%': { transform: 'translateX(-50%)' },
+ },
+ },
+
+ // Backdrop blur for glass morphism
+ backdropBlur: {
+ 'xs': '2px',
+ 'sm': '4px',
+ 'md': '8px',
+ 'lg': '12px',
+ 'xl': '16px',
+ '2xl': '24px',
+ '3xl': '40px',
+ },
+
+ // Background patterns and gradients
+ backgroundImage: {
+ 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
+ 'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+ 'gradient-mesh': 'linear-gradient(to right, #5B9BF3 0%, #9B8AFB 25%, #6EE7B7 50%, #7DD3FC 75%, #5B9BF3 100%)',
+ 'noise': "url('data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"100\" height=\"100\"%3E%3Cfilter id=\"noise\"%3E%3CfeTurbulence type=\"fractalNoise\" baseFrequency=\"0.9\" numOctaves=\"4\" /%3E%3C/filter%3E%3Crect width=\"100\" height=\"100\" filter=\"url(%23noise)\" opacity=\"0.03\" /%3E%3C/svg%3E')",
+ },
+ },
+ },
+ plugins: [
+ require('@tailwindcss/forms'),
+ require('@tailwindcss/typography'),
+ ],
+};
\ No newline at end of file
+
+ {/* Welcome Section with Glass Effect */}
+
+
+ {/* Footer */}
+
+
);
}
-export default App;
+export default App;
\ No newline at end of file
diff --git a/src/components/DesignSystemShowcase.tsx b/src/components/DesignSystemShowcase.tsx
new file mode 100644
index 000000000..e55c47ae3
--- /dev/null
+++ b/src/components/DesignSystemShowcase.tsx
@@ -0,0 +1,380 @@
+import React from 'react';
+
+/**
+ * Design System Showcase Component
+ *
+ * This component demonstrates the premium design system created for the crypto platform.
+ * It showcases all the major components and styles that capture the calm, trustworthy
+ * aesthetic from the reference screenshots while elevating it for professional crypto users.
+ */
+
+const DesignSystemShowcase: React.FC = () => {
+ return (
+
+
+
+
+ {/* Crypto Price Ticker */}
+
+
-
+ + Crypto Community Platform +
+
- 
-
+
-
+
+
+ BTC
+ $45,250.00 +2.5%
+
+
+ ETH
+ $3,120.50 -1.8%
+
+
+ ADA
+ $0.52 0.0%
+
+
+ SOL
+ $98.75 +4.2%
+
+
+ USDC
+ $1.00 0.0%
+
+
+
Click on the Tauri, Vite, and React logos to learn more.
- -{greetMsg}
- + {/* Main Content */} +
+
+
+ {/* Feature Preview Cards */}
+
+
+ + Welcome to Your Crypto Community Hub +
++ Built with Tauri + React, designed for traders, investors, and crypto enthusiasts. + This platform prioritizes trust, security, and seamless communication. +
+ + {/* Demo Interaction */} +
+
+
+ {greetMsg && (
+
+
+
+ )}
+ {greetMsg}
+
+ {/* Real-time Messaging */}
+
+
+ {/* Chat Messages Demo */}
+
+
+
+ {/* Portfolio Integration */}
+
+
+
+
+
+ Real-time Chat
++ Secure messaging for crypto discussions with end-to-end encryption and group channels. +
+
+
+
+ {/* Community Features */}
+
+
+
+
+
+ Portfolio Tracking
++ Monitor your crypto investments with real-time price updates and performance analytics. +
+
+
+
+
+
+
+
+ Expert Network
++ Connect with traders, researchers, and KOLs in specialized crypto communities. +
+
+
+
+ {/* Design System Showcase */}
+ + 💬 Live Chat Demo +
+ +
+
+
+
+
+
+ Hey everyone! BTC looking bullish 🚀
+
+
+
+
+ Agreed! Just bought more at $45k
+
+
+
+
+ 0x1a2b3c...d4e5f6
+ Anyone seeing this DeFi yield opportunity? +
+ + Anyone seeing this DeFi yield opportunity? +
+
+
+ Which protocol? Share the alpha! 👀
+
+
+
+
+
+
+ {/* Buttons & Forms */}
+
+
+
+
+ {/* Status & Loading States */}
+ + 🎛️ Interactive Components +
+ +
+ {/* Button Examples */}
+
+
+
+
+ {/* Form Example */}
+ Action Buttons
+
+
+
+
+
+
+
+
+ Trading Form
+
+
+
+
+
+
+ + 📊 Status Indicators +
+ +
+ {/* Status Examples */}
+
+
+
+
+ {/* Loading States */}
+ Connection Status
+
+ Trading Active
+ Market Closed
+ Order Pending
+
+
+
+
+ {/* Crypto Addresses */}
+ Loading States
+
+
+
+
+
+
+
+ Wallet Address
+
+ bc1qxy2kgdygjrsqtzq2n0yrf2493p83kkfjhx0wlh
+
+
+ {/* Hero Section - Similar to Screenshot #1 but elevated */}
+
+ {/* Atmospheric Background */}
+
+
+
+
+
+
+ {/* Color Palette Section */}
+
+
+
+ {/* Typography Section */}
+
+
+
+ {/* Card Components Section */}
+
+
+
+ {/* Navigation Pattern - Similar to Screenshot #2 */}
+
+
+
+ {/* Form Elements */}
+
+
+
+ );
+};
+
+export default DesignSystemShowcase;
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 000000000..ecb808542
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,236 @@
+/* Import Google Fonts for trust and professionalism */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600&display=swap');
+
+/* Tailwind CSS imports */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Base layer - Typography and fundamental styles */
+@layer base {
+ /* Set default font and improve text rendering */
+ html {
+ font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ text-rendering: optimizeLegibility;
+ }
+
+ body {
+ @apply bg-canvas-50 text-stone-900;
+ @apply font-sans;
+ line-height: 1.6;
+ }
+
+ /* Heading hierarchy for clear information architecture */
+ h1, h2, h3, h4, h5, h6 {
+ @apply font-display font-semibold;
+ @apply text-stone-900;
+ line-height: 1.2;
+ }
+
+ h1 { @apply text-3xl lg:text-4xl; }
+ h2 { @apply text-2xl lg:text-3xl; }
+ h3 { @apply text-xl lg:text-2xl; }
+ h4 { @apply text-lg lg:text-xl; }
+
+ /* Enhanced focus styles for accessibility and trust */
+ *:focus {
+ @apply outline-none ring-2 ring-primary-500 ring-offset-2 ring-offset-canvas-50;
+ }
+
+ /* Smooth scrolling */
+ html {
+ scroll-behavior: smooth;
+ }
+}
+
+/* Component layer - Reusable patterns */
+@layer components {
+ /* Button variants for consistent interaction design */
+ .btn-primary {
+ @apply bg-primary-500 hover:bg-primary-600 active:bg-primary-700;
+ @apply text-white font-medium;
+ @apply px-4 py-2 rounded-lg;
+ @apply transition-all duration-200 ease-in-out;
+ @apply shadow-soft hover:shadow-medium;
+ @apply focus:ring-2 focus:ring-primary-500 focus:ring-offset-2;
+ @apply disabled:opacity-50 disabled:cursor-not-allowed;
+ }
+
+ .btn-secondary {
+ @apply bg-canvas-100 hover:bg-canvas-200 active:bg-canvas-300;
+ @apply text-stone-700 font-medium;
+ @apply px-4 py-2 rounded-lg border border-canvas-200;
+ @apply transition-all duration-200 ease-in-out;
+ @apply focus:ring-2 focus:ring-primary-500 focus:ring-offset-2;
+ }
+
+ .btn-success {
+ @apply bg-sage-500 hover:bg-sage-600 active:bg-sage-700;
+ @apply text-white font-medium;
+ @apply px-4 py-2 rounded-lg;
+ @apply transition-all duration-200 ease-in-out;
+ @apply shadow-soft hover:shadow-medium;
+ }
+
+ .btn-danger {
+ @apply bg-coral-500 hover:bg-coral-600 active:bg-coral-700;
+ @apply text-white font-medium;
+ @apply px-4 py-2 rounded-lg;
+ @apply transition-all duration-200 ease-in-out;
+ @apply shadow-soft hover:shadow-medium;
+ }
+
+ /* Card components for content organization */
+ .card {
+ @apply bg-white rounded-xl shadow-soft border border-canvas-200;
+ @apply p-6;
+ @apply transition-shadow duration-200;
+ }
+
+ .card-hover {
+ @apply card hover:shadow-medium;
+ }
+
+ /* Input components with consistent styling */
+ .input-primary {
+ @apply w-full px-4 py-3 rounded-lg;
+ @apply border border-stone-300 focus:border-primary-500;
+ @apply bg-white text-stone-900 placeholder-stone-500;
+ @apply transition-colors duration-200;
+ @apply focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 focus:outline-none;
+ }
+
+ /* Status indicators */
+ .status-online {
+ @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
+ @apply bg-sage-100 text-sage-800;
+ }
+
+ .status-offline {
+ @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
+ @apply bg-stone-100 text-stone-600;
+ }
+
+ .status-warning {
+ @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
+ @apply bg-amber-100 text-amber-800;
+ }
+
+ /* Navigation styles */
+ .nav-item {
+ @apply flex items-center px-4 py-2 text-sm font-medium rounded-lg;
+ @apply text-stone-600 hover:text-stone-900 hover:bg-canvas-100;
+ @apply transition-colors duration-150;
+ }
+
+ .nav-item-active {
+ @apply nav-item bg-primary-50 text-primary-700;
+ }
+
+ /* Message/chat specific styles */
+ .message-bubble {
+ @apply max-w-xs lg:max-w-md px-4 py-2 rounded-2xl;
+ @apply break-words;
+ }
+
+ .message-sent {
+ @apply message-bubble bg-primary-500 text-white ml-auto;
+ }
+
+ .message-received {
+ @apply message-bubble bg-canvas-100 text-stone-900;
+ }
+
+ /* Loading states */
+ .loading-pulse {
+ @apply animate-pulse bg-canvas-200 rounded;
+ }
+
+ /* Crypto price styling */
+ .price-positive {
+ @apply text-market-bullish font-mono font-medium;
+ }
+
+ .price-negative {
+ @apply text-market-bearish font-mono font-medium;
+ }
+
+ .price-neutral {
+ @apply text-market-neutral font-mono font-medium;
+ }
+}
+
+/* Utility layer - Custom utilities */
+@layer utilities {
+ /* Scrollbar styling for better UX */
+ .scrollbar-thin {
+ scrollbar-width: thin;
+ scrollbar-color: rgb(163 163 163) transparent;
+ }
+
+ .scrollbar-thin::-webkit-scrollbar {
+ width: 6px;
+ }
+
+ .scrollbar-thin::-webkit-scrollbar-track {
+ background: transparent;
+ }
+
+ .scrollbar-thin::-webkit-scrollbar-thumb {
+ background-color: rgb(163 163 163);
+ border-radius: 3px;
+ }
+
+ .scrollbar-thin::-webkit-scrollbar-thumb:hover {
+ background-color: rgb(115 115 115);
+ }
+
+ /* Text selection styling */
+ .select-primary::selection {
+ @apply bg-primary-100 text-primary-900;
+ }
+
+ /* Enhanced glass effect for better visibility */
+ .glass {
+ backdrop-filter: blur(16px);
+ background: rgba(255, 255, 255, 0.15);
+ border: 1px solid rgba(255, 255, 255, 0.3);
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+ }
+
+ /* Animation utilities */
+ .animate-fade-in-up {
+ animation: fadeInUp 0.5s ease-out forwards;
+ }
+
+ @keyframes fadeInUp {
+ from {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+ }
+
+ /* Safe area padding for mobile devices */
+ .safe-area-padding {
+ padding-top: env(safe-area-inset-top);
+ padding-bottom: env(safe-area-inset-bottom);
+ padding-left: env(safe-area-inset-left);
+ padding-right: env(safe-area-inset-right);
+ }
+}
+
+/* Dark mode support (optional) */
+@media (prefers-color-scheme: dark) {
+ :root {
+ color-scheme: dark;
+ }
+
+ /* Dark mode styles can be added here if needed */
+}
\ No newline at end of file
diff --git a/src/main.tsx b/src/main.tsx
index 2be325ed2..8b1ddb971 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,6 +1,7 @@
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
+import "./index.css";
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+ {/* Greeting Section */}
+
+
+
+
+ {/* Quick Actions */}
+ + Good afternoon, + Cyrus +
++ Your portfolio is up 12.5% today +
+ + {/* Status Card */} +
+
+
+
+
+ 26°C and clear
+
+
+
+
+ Markets Open
+
+
+
+
+
+ + Color System +
+ +
+ {/* Primary Colors */}
+
+
+
+
+ {/* Success Colors */}
+ Primary Ocean
+
+
+
+
+
+
+
+ Primary 500
+#5B9BF3
+
+
+
+
+
+ Primary 600
+#4A83DD
+
+
+
+ {/* Accent Colors */}
+ Sage Success
+
+
+
+
+
+
+
+ Sage 500
+#4DC46F
+
+
+
+
+
+ Sage 600
+#3BA858
+
+
+ Accent Palette
+
+
+
+
+
+
+
+ Lavender
+#9B8AFB
+
+
+
+
+
+ Sky
+#7DD3FC
++ Typography Scale +
+ +
+
+
+
+
+ Display · 4.5rem
++ Beautiful Typography +
+
+
+
+ Heading 1 · 3rem
++ Clear Information Hierarchy +
+
+
+
+ Heading 2 · 1.875rem
++ Structured Content Design +
+
+
+
+ Body · 1rem
++ The typography system is designed to create clear visual hierarchy while maintaining + excellent readability. Each text size has been carefully calibrated with appropriate + line heights and letter spacing to ensure optimal legibility across all device sizes. +
+
+
+ Monospace · For prices and data
++ $48,392.50 +2.45% +
++ Card Components +
+ +
+ {/* Market Card */}
+
+
+
+
+ {/* Interactive Card */}
+
+
+
+
+
+
+
+ Trending
+
+ ₿
+
+
+
+ Bitcoin
+BTC
+
+
+ $48,392.50
+
+ +$1,185.20
+ (+2.45%)
+
+
+
+
+ {/* Elevated Card */}
+ + Portfolio Overview +
++ Track your investments and monitor performance in real-time. +
+
+ View Details
+
+
+
+
+
+
+ Quick Stats
+
+
+
+
+
+
+ Total Value
+ $125,430
+
+
+ 24h Change
+ +3.2%
+
+
+ Holdings
+ 12
+
+ + Navigation & Settings +
+ +
+
+
+ {/* User Profile Section */}
+
+
+
+
+ {/* Navigation Items */}
+
+
+
+
+
+
+ Cyrus Amini
+Premium Member
++ Form Elements +
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ $
+
+
+
+
+
+
+
+
+
+
+
+
+
+