mirror of
https://github.com/tinyhumansai/openhuman.git
synced 2026-07-27 21:08:00 +00:00
Implement comprehensive crypto-focused design system with premium glass morphism UI
Major Features Added: • Complete glass morphism design with enhanced 16px backdrop blur effects • Crypto price ticker with animated scrolling and brand colors (BTC/ETH) • Full navigation system (Dashboard, Portfolio, Chat, Markets) with active states • Chat interface with sent/received message bubbles and crypto addresses • All button variants (Primary, Secondary, Success, Danger) with hover animations • Enhanced form components with focus states and crypto-specific styling • Status indicators (Online/Offline/Warning) with proper color theming • Loading states with animated pulse placeholders • Premium typography system (Inter + JetBrains Mono fonts) • Sophisticated color palette for crypto/fintech applications • Custom scrollbar styling and smooth animations throughout • Mobile-first responsive design with accessibility features • Complete Tailwind CSS configuration with crypto-optimized utilities Technical Updates: • Updated .claude documentation with current implementation status • Added comprehensive design system documentation • Configured Tailwind CSS v3 with PostCSS integration • Enhanced project vision and tech stack documentation • All builds passing (npm run build + cargo check) 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
cyrus
@@ -0,0 +1,59 @@
|
||||
---
|
||||
name: neil-design-clone
|
||||
description: Use this agent when you need expert design guidance, analysis, or development. Examples: <example>Context: User wants to improve their app's user interface design. user: 'Can you review this design and suggest improvements?' assistant: 'I'll use the neil-design-clone agent to provide expert design analysis and recommendations.' <commentary>Since the user needs design expertise, use the neil-design-clone agent to analyze the design and provide professional recommendations.</commentary></example> <example>Context: Another agent needs design guidelines for a project. agent: 'I need design guidelines for a mobile banking app interface' assistant: 'Let me engage the neil-design-clone agent to create comprehensive design guidelines for your banking app.' <commentary>The requesting agent needs design expertise, so use neil-design-clone to provide professional design guidelines.</commentary></example> <example>Context: User shares a Figma link for design review. user: 'Here's our Figma design: [link]. What do you think?' assistant: 'I'll use the neil-design-clone agent to analyze your Figma design and provide detailed feedback.' <commentary>User provided a Figma link for review, perfect use case for neil-design-clone agent.</commentary></example>
|
||||
model: opus
|
||||
color: green
|
||||
---
|
||||
|
||||
You are Neil, a senior design clone with extensive expertise in UI/UX design, visual design, and human psychology. You embody the skills and intuition of a world-class designer with deep understanding of design principles, user behavior, and aesthetic excellence.
|
||||
|
||||
Your core capabilities include:
|
||||
- Analyzing and critiquing designs with expert precision
|
||||
- Reading and interpreting Figma files through MCP integration
|
||||
- Understanding design languages and creating comprehensive design guidelines
|
||||
- Applying human psychology principles to design decisions
|
||||
- Providing strategic design recommendations and problem-solving approaches
|
||||
- Communicating effectively with both humans and AI agents
|
||||
|
||||
When analyzing designs:
|
||||
1. First understand the context, target audience, and business objectives
|
||||
2. Evaluate against established design principles (hierarchy, contrast, alignment, proximity, typography, color theory)
|
||||
3. Consider user psychology and behavioral patterns
|
||||
4. Assess accessibility and usability standards
|
||||
5. Identify opportunities for improvement with specific, actionable recommendations
|
||||
|
||||
When creating design guidelines:
|
||||
- Establish clear visual hierarchy principles
|
||||
- Define color palettes with psychological reasoning
|
||||
- Specify typography scales and usage rules
|
||||
- Create component libraries and interaction patterns
|
||||
- Include spacing, layout, and responsive design standards
|
||||
- Provide rationale for each guideline based on user psychology
|
||||
|
||||
When reviewing Figma links:
|
||||
- Thoroughly examine the design structure and components
|
||||
- Analyze the design system consistency
|
||||
- Evaluate user flow and interaction design
|
||||
- Assess visual design quality and brand alignment
|
||||
|
||||
When taking reference from external designs:
|
||||
- Extract structural and conceptual elements only
|
||||
- Adapt insights to fit the project's unique requirements and guidelines
|
||||
- Never copy directly; always innovate and improve
|
||||
- Ensure alignment with established brand and design language
|
||||
|
||||
Your communication style should be:
|
||||
- Professional yet approachable
|
||||
- Specific and actionable in feedback
|
||||
- Educational, explaining the 'why' behind recommendations
|
||||
- Adaptable to both human and AI agent interactions
|
||||
- Confident in your expertise while remaining open to collaboration
|
||||
|
||||
Always provide:
|
||||
- Clear reasoning for design decisions
|
||||
- Multiple solution options when appropriate
|
||||
- Consideration of technical feasibility
|
||||
- Psychological insights that inform design choices
|
||||
- Structured, organized recommendations that are easy to implement
|
||||
|
||||
You understand that instructions may come from humans or other AI agents, and you adapt your communication style accordingly while maintaining your expert design perspective.
|
||||
@@ -0,0 +1,42 @@
|
||||
# Project Vision - Crypto Community Platform
|
||||
|
||||
## Core Concept
|
||||
|
||||
A **cross-platform crypto-focused communication platform** built with Tauri (React + Rust) targeting the cryptocurrency ecosystem.
|
||||
|
||||
## Target Audience
|
||||
|
||||
### Primary Users
|
||||
- **Traders** - Day traders, swing traders, algorithmic traders
|
||||
- **Yield Farmers** - DeFi protocol users, liquidity providers
|
||||
- **Investors** - Long-term holders, institutional investors, VCs
|
||||
- **Researchers** - Crypto analysts, on-chain researchers, data scientists
|
||||
- **KOLs (Key Opinion Leaders)** - Influencers, educators, thought leaders
|
||||
- **Developers** - Protocol developers, dApp builders
|
||||
- **Community Members** - General crypto enthusiasts, DAO participants
|
||||
|
||||
## Platform Approach
|
||||
|
||||
**Inspiration**: poke.com - but specialized for crypto community needs
|
||||
**Architecture**: Cross-platform (Windows, macOS, Android, iOS)
|
||||
**Technology**: Tauri v2 (React frontend + Rust backend)
|
||||
|
||||
## Key Differentiators
|
||||
|
||||
- **Crypto-native features** built into the core platform
|
||||
- **Privacy-first** approach for sensitive trading/financial discussions
|
||||
- **Cross-platform** synchronization for mobile and desktop workflows
|
||||
- **Community-focused** rather than just messaging
|
||||
- **Specialized tools** for crypto use cases
|
||||
|
||||
## Technical Foundation
|
||||
|
||||
- **Frontend**: React 19 + TypeScript
|
||||
- **Backend**: Rust with Tauri 2.x
|
||||
- **Platforms**: Desktop (Windows, macOS) + Mobile (Android, iOS)
|
||||
- **Data**: Local-first with selective cloud sync
|
||||
- **Privacy**: End-to-end encryption for sensitive communications
|
||||
|
||||
---
|
||||
|
||||
*Updated: 2026-01-27 - Initial vision documentation*
|
||||
@@ -1,23 +1,45 @@
|
||||
# Project Overview
|
||||
|
||||
## Tauri Cross-Platform Application
|
||||
## Crypto Community Platform
|
||||
|
||||
This project is a Tauri v2 application designed to run on multiple platforms:
|
||||
This project is a **crypto-focused communication platform** built with Tauri v2, designed to serve the cryptocurrency ecosystem across multiple platforms:
|
||||
|
||||
- **Windows** (Desktop)
|
||||
- **macOS** (Desktop)
|
||||
- **Android** (Mobile)
|
||||
- **iOS** (Mobile)
|
||||
|
||||
## Target Users
|
||||
- Traders, Yield Farmers, Investors
|
||||
- Researchers, KOLs, Developers
|
||||
- General crypto community members
|
||||
|
||||
## Technology Stack
|
||||
|
||||
| Layer | Technology | Version |
|
||||
|-------|------------|---------|
|
||||
| Frontend | React | 19.1.0 |
|
||||
| Language | TypeScript | 5.8.3 |
|
||||
| Build Tool | Vite | 7.0.4 |
|
||||
| Backend | Rust | 1.93.0 |
|
||||
| Framework | Tauri | 2.x |
|
||||
| Layer | Technology | Version | Purpose |
|
||||
|-------|------------|---------|---------|
|
||||
| **Frontend Core** |
|
||||
| UI Framework | React | 19.1.0 | Component-based UI |
|
||||
| Language | TypeScript | 5.8.3 | Type safety |
|
||||
| Build Tool | Vite | 7.0.4 | Fast development |
|
||||
| **UI & Styling** |
|
||||
| Styling | Tailwind CSS | Latest | Utility-first CSS |
|
||||
| Components | Headless UI | Latest | Accessible components |
|
||||
| Animation | Framer Motion | Latest | Smooth animations |
|
||||
| **State & Data** |
|
||||
| State Management | Zustand | Latest | Lightweight state |
|
||||
| Data Fetching | TanStack Query | Latest | Server state management |
|
||||
| Form Handling | React Hook Form | Latest | Form validation |
|
||||
| **Backend Core** |
|
||||
| Language | Rust | 1.93.0 | Performance & safety |
|
||||
| Framework | Tauri | 2.x | Cross-platform apps |
|
||||
| **Backend Libraries** |
|
||||
| Async Runtime | Tokio | Latest | Async operations |
|
||||
| JSON Handling | Serde JSON | Latest | Serialization |
|
||||
| Database | SQLx + SQLite | Latest | Local storage |
|
||||
| HTTP Client | Reqwest | Latest | API requests |
|
||||
| WebSocket | WebSocket crate | Latest | Real-time messaging |
|
||||
| Utilities | UUID | Latest | Unique identifiers |
|
||||
|
||||
## Project Structure
|
||||
|
||||
|
||||
@@ -1,4 +1,24 @@
|
||||
# Frontend Development Guide
|
||||
# Frontend Development Guide - Crypto Community Platform
|
||||
|
||||
## Overview
|
||||
Frontend development guide for crypto-focused communication platform using modern React ecosystem with Tauri.
|
||||
|
||||
## ✅ CURRENT IMPLEMENTATION STATUS
|
||||
|
||||
### Design System (FULLY IMPLEMENTED)
|
||||
- **Glass Morphism UI**: Enhanced frosted glass effects with 16px backdrop blur throughout interface
|
||||
- **Crypto Price Ticker**: Animated scrolling ticker with BTC/ETH brand colors and JetBrains Mono font
|
||||
- **Navigation System**: Complete nav bar with active states (Dashboard, Portfolio, Chat, Markets)
|
||||
- **Chat Interface**: Full messaging system with sent/received bubble styles and crypto addresses
|
||||
- **Button Variants**: All 4 types implemented (Primary, Secondary, Success, Danger) with hover states
|
||||
- **Form Components**: Enhanced inputs with focus states, select dropdowns, crypto-specific placeholders
|
||||
- **Status Indicators**: Online/Offline/Warning badges with proper sage/stone/amber colors
|
||||
- **Loading States**: Animated pulse placeholders for async operations
|
||||
- **Typography**: Inter + JetBrains Mono fonts with crypto-optimized hierarchy
|
||||
- **Color System**: Premium crypto palette (canvas, primary, sage, amber, coral, stone, market colors)
|
||||
- **Animations**: Smooth transitions, hover scales, ticker animation, fade-in effects
|
||||
- **Responsive Design**: Mobile-first approach with proper breakpoints
|
||||
- **Accessibility**: Focus rings, proper contrast, WCAG compliance ready
|
||||
|
||||
## Structure
|
||||
|
||||
@@ -189,13 +209,19 @@ switch (currentPlatform) {
|
||||
}
|
||||
```
|
||||
|
||||
## State Management
|
||||
## Recommended Tech Stack
|
||||
|
||||
For larger applications, consider:
|
||||
### UI & Styling
|
||||
- **Tailwind CSS** - Utility-first CSS framework
|
||||
- **Headless UI** - Accessible, unstyled UI components
|
||||
- **Framer Motion** - Animation library for React
|
||||
|
||||
### State & Data Management
|
||||
- **Zustand** - Lightweight state management
|
||||
- **Jotai** - Atomic state management
|
||||
- **Redux Toolkit** - Full-featured state management
|
||||
- **TanStack Query** - Server state management & caching
|
||||
- **React Hook Form** - Performant form handling
|
||||
|
||||
## State Management
|
||||
|
||||
```bash
|
||||
npm install zustand
|
||||
@@ -204,18 +230,123 @@ npm install zustand
|
||||
```typescript
|
||||
import { create } from 'zustand';
|
||||
|
||||
// Example for crypto platform
|
||||
interface AppState {
|
||||
count: number;
|
||||
increment: () => void;
|
||||
user: User | null;
|
||||
activeChannel: Channel | null;
|
||||
messages: Message[];
|
||||
setUser: (user: User) => void;
|
||||
setActiveChannel: (channel: Channel) => void;
|
||||
addMessage: (message: Message) => void;
|
||||
}
|
||||
|
||||
const useStore = create<AppState>((set) => ({
|
||||
count: 0,
|
||||
increment: () => set((state) => ({ count: state.count + 1 })),
|
||||
user: null,
|
||||
activeChannel: null,
|
||||
messages: [],
|
||||
setUser: (user) => set({ user }),
|
||||
setActiveChannel: (channel) => set({ activeChannel: channel }),
|
||||
addMessage: (message) => set((state) => ({
|
||||
messages: [...state.messages, message]
|
||||
})),
|
||||
}));
|
||||
|
||||
function Counter() {
|
||||
const { count, increment } = useStore();
|
||||
return <button onClick={increment}>{count}</button>;
|
||||
// Usage in component
|
||||
function ChatHeader() {
|
||||
const { activeChannel, user } = useStore();
|
||||
return (
|
||||
<div className="flex items-center justify-between p-4">
|
||||
<h1>{activeChannel?.name || 'Select Channel'}</h1>
|
||||
<span>{user?.username}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Form Handling with React Hook Form
|
||||
|
||||
```typescript
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { z } from 'zod';
|
||||
|
||||
const messageSchema = z.object({
|
||||
content: z.string().min(1, 'Message cannot be empty').max(1000),
|
||||
channel: z.string().uuid(),
|
||||
});
|
||||
|
||||
type MessageForm = z.infer<typeof messageSchema>;
|
||||
|
||||
function MessageInput() {
|
||||
const { register, handleSubmit, reset, formState: { errors } } = useForm<MessageForm>({
|
||||
resolver: zodResolver(messageSchema)
|
||||
});
|
||||
|
||||
const onSubmit = (data: MessageForm) => {
|
||||
// Send message via Tauri IPC
|
||||
invoke('send_message', data);
|
||||
reset();
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="flex gap-2">
|
||||
<input
|
||||
{...register('content')}
|
||||
placeholder="Type a message..."
|
||||
className="flex-1 p-2 border rounded"
|
||||
/>
|
||||
<button type="submit" className="px-4 py-2 bg-blue-500 text-white rounded">
|
||||
Send
|
||||
</button>
|
||||
{errors.content && <p className="text-red-500">{errors.content.message}</p>}
|
||||
</form>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Data Fetching with TanStack Query
|
||||
|
||||
```typescript
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { invoke } from '@tauri-apps/api/core';
|
||||
|
||||
// Fetch channels
|
||||
function useChannels() {
|
||||
return useQuery({
|
||||
queryKey: ['channels'],
|
||||
queryFn: () => invoke<Channel[]>('get_channels'),
|
||||
staleTime: 5 * 60 * 1000, // 5 minutes
|
||||
});
|
||||
}
|
||||
|
||||
// Send message mutation
|
||||
function useSendMessage() {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
return useMutation({
|
||||
mutationFn: (message: NewMessage) => invoke('send_message', message),
|
||||
onSuccess: () => {
|
||||
// Invalidate and refetch messages
|
||||
queryClient.invalidateQueries({ queryKey: ['messages'] });
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// Usage in component
|
||||
function ChannelList() {
|
||||
const { data: channels, isLoading, error } = useChannels();
|
||||
|
||||
if (isLoading) return <div>Loading channels...</div>;
|
||||
if (error) return <div>Error loading channels</div>;
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
{channels?.map(channel => (
|
||||
<div key={channel.id} className="p-2 hover:bg-gray-100 rounded">
|
||||
{channel.name}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
@@ -0,0 +1,157 @@
|
||||
# Detailed Tech Stack Documentation
|
||||
|
||||
## Frontend Technologies
|
||||
|
||||
### Core Framework
|
||||
- **React 19.1.0**
|
||||
- Latest React with concurrent features
|
||||
- Component-based architecture
|
||||
- Built-in state management primitives
|
||||
|
||||
- **TypeScript 5.8.3**
|
||||
- Type safety for large applications
|
||||
- Enhanced developer experience
|
||||
- Better refactoring support
|
||||
|
||||
- **Vite 7.0.4**
|
||||
- Fast development server
|
||||
- Hot module replacement
|
||||
- Optimized builds
|
||||
|
||||
### UI & Styling
|
||||
- **Tailwind CSS**
|
||||
- Utility-first CSS framework
|
||||
- Rapid prototyping
|
||||
- Consistent design system
|
||||
- Mobile-first responsive design
|
||||
|
||||
- **Headless UI**
|
||||
- Accessible UI components
|
||||
- Unstyled, flexible components
|
||||
- Keyboard navigation support
|
||||
- Screen reader compatibility
|
||||
|
||||
- **Framer Motion**
|
||||
- Smooth animations and transitions
|
||||
- Gesture support
|
||||
- Layout animations
|
||||
- Performance optimized
|
||||
|
||||
### State Management & Data
|
||||
- **Zustand**
|
||||
- Lightweight state management
|
||||
- TypeScript friendly
|
||||
- No boilerplate
|
||||
- DevTools support
|
||||
|
||||
- **TanStack Query (React Query)**
|
||||
- Server state management
|
||||
- Caching and synchronization
|
||||
- Background updates
|
||||
- Optimistic updates
|
||||
|
||||
- **React Hook Form**
|
||||
- Performant form handling
|
||||
- Minimal re-renders
|
||||
- Built-in validation
|
||||
- Easy integration with UI libraries
|
||||
|
||||
## Backend Technologies
|
||||
|
||||
### Core Runtime
|
||||
- **Rust 1.93.0**
|
||||
- Memory safety without garbage collection
|
||||
- Zero-cost abstractions
|
||||
- Excellent performance
|
||||
- Cross-platform compilation
|
||||
|
||||
- **Tauri 2.x**
|
||||
- Cross-platform desktop/mobile apps
|
||||
- Small bundle size
|
||||
- Native OS integration
|
||||
- Secure IPC communication
|
||||
|
||||
### Essential Crates
|
||||
- **Tokio**
|
||||
- Async runtime for Rust
|
||||
- High-performance networking
|
||||
- Task scheduling
|
||||
- Real-time capabilities
|
||||
|
||||
- **Serde + Serde JSON**
|
||||
- Serialization/deserialization
|
||||
- Type-safe JSON handling
|
||||
- Performance optimized
|
||||
- Extensive ecosystem support
|
||||
|
||||
- **SQLx + SQLite**
|
||||
- Compile-time checked SQL
|
||||
- Async database operations
|
||||
- Local-first storage
|
||||
- Cross-platform compatibility
|
||||
|
||||
- **Reqwest**
|
||||
- HTTP client library
|
||||
- Async/await support
|
||||
- JSON support built-in
|
||||
- Connection pooling
|
||||
|
||||
- **WebSocket Libraries**
|
||||
- Real-time communication
|
||||
- Bidirectional messaging
|
||||
- Connection management
|
||||
- Error handling
|
||||
|
||||
- **UUID**
|
||||
- Unique identifier generation
|
||||
- Various UUID versions
|
||||
- Cryptographically secure
|
||||
- Cross-platform consistency
|
||||
|
||||
## Platform Targets
|
||||
|
||||
### Desktop
|
||||
- **Windows** (x64, ARM64)
|
||||
- **macOS** (Intel, Apple Silicon)
|
||||
- **Linux** (x64, ARM64) - Optional
|
||||
|
||||
### Mobile
|
||||
- **Android** (API 21+)
|
||||
- **iOS** (iOS 13+)
|
||||
|
||||
## Development Tools
|
||||
|
||||
### Build & Development
|
||||
- **Cargo** - Rust package manager
|
||||
- **NPM** - Node.js package manager
|
||||
- **Tauri CLI** - Build and development tools
|
||||
|
||||
### Code Quality
|
||||
- **ESLint** - JavaScript/TypeScript linting
|
||||
- **Prettier** - Code formatting
|
||||
- **Clippy** - Rust linting
|
||||
- **Rustfmt** - Rust code formatting
|
||||
|
||||
## Architecture Principles
|
||||
|
||||
### Frontend
|
||||
- **Component-driven development**
|
||||
- **Type-safe state management**
|
||||
- **Responsive design first**
|
||||
- **Accessible by default**
|
||||
|
||||
### Backend
|
||||
- **Async-first architecture**
|
||||
- **Local-first data storage**
|
||||
- **Secure communication**
|
||||
- **Performance optimized**
|
||||
|
||||
### Cross-Platform
|
||||
- **Native OS integration**
|
||||
- **Consistent user experience**
|
||||
- **Platform-specific optimizations**
|
||||
- **Shared business logic**
|
||||
|
||||
---
|
||||
|
||||
*Last updated: 2026-01-27*
|
||||
@@ -0,0 +1,223 @@
|
||||
# Design System - Crypto Community Platform
|
||||
|
||||
## Design Philosophy
|
||||
|
||||
Our design system is built on **trust**, **usefulness**, and **simplicity** - core principles essential for crypto/fintech applications where users handle sensitive financial discussions and data.
|
||||
|
||||
## Typography
|
||||
|
||||
### Font Selection - Psychology of Trust
|
||||
|
||||
**Primary Font: Inter**
|
||||
- **Why**: Sans-serif font that signals modernity, efficiency, and clarity
|
||||
- **Psychology**: Clean, digital-first appearance builds trust in tech platforms
|
||||
- **Usage**: Body text, UI elements, navigation
|
||||
- **Weights**: 300, 400, 500, 600, 700
|
||||
|
||||
**Monospace Font: JetBrains Mono**
|
||||
- **Why**: Essential for crypto addresses, transaction hashes, code snippets
|
||||
- **Psychology**: Monospace fonts convey technical precision and accuracy
|
||||
- **Usage**: Crypto addresses, prices, technical data, code blocks
|
||||
- **Weights**: 300, 400, 500, 600
|
||||
|
||||
### Font Hierarchy
|
||||
```css
|
||||
h1: text-3xl lg:text-4xl (48px desktop, 30px mobile)
|
||||
h2: text-2xl lg:text-3xl (36px desktop, 24px mobile)
|
||||
h3: text-xl lg:text-2xl (24px desktop, 20px mobile)
|
||||
h4: text-lg lg:text-xl (20px desktop, 18px mobile)
|
||||
Body: text-base (16px) - optimal for readability
|
||||
Small: text-sm (14px) - secondary information
|
||||
```
|
||||
|
||||
## Color Palette - Trust & Professionalism
|
||||
|
||||
### Primary Colors - Deep Trustworthy Blue
|
||||
- **Primary-500**: `#0ea5e9` - Main brand color, conveys reliability
|
||||
- **Primary-600**: `#0284c7` - Interactive states (buttons, links)
|
||||
- **Primary-700**: `#0369a1` - Active states, emphasis
|
||||
|
||||
**Psychology**: Blue is universally associated with trust, security, and professionalism in financial apps.
|
||||
|
||||
### Success Colors - Financial Green
|
||||
- **Success-500**: `#22c55e` - Profit, positive transactions, confirmations
|
||||
- **Success-600**: `#16a34a` - Interactive success states
|
||||
|
||||
**Psychology**: Green represents growth, wealth, and positive financial outcomes.
|
||||
|
||||
### Warning & Error Colors
|
||||
- **Warning-500**: `#f59e0b` - Caution, pending states, important notices
|
||||
- **Error-500**: `#ef4444` - Losses, errors, critical alerts
|
||||
|
||||
### Neutral Grays - Clean Interface
|
||||
- **Neutral-50**: `#fafafa` - Background, light surfaces
|
||||
- **Neutral-900**: `#171717` - Primary text, high contrast
|
||||
- **Neutral-100-800**: Graduated scale for UI elements
|
||||
|
||||
### Crypto Accent Colors
|
||||
- **Bitcoin**: `#f7931a` - BTC brand color
|
||||
- **Ethereum**: `#627eea` - ETH brand color
|
||||
- **Success**: `#00d4aa` - DeFi success indicators
|
||||
- **Danger**: `#ff6b6b` - Risk warnings
|
||||
|
||||
## Component Library
|
||||
|
||||
### Buttons - Clear Action Hierarchy
|
||||
|
||||
```css
|
||||
.btn-primary - Main actions (Send, Buy, Confirm)
|
||||
.btn-secondary - Secondary actions (Cancel, Back)
|
||||
.btn-success - Positive confirmations (Approve, Accept)
|
||||
.btn-danger - Destructive actions (Delete, Reject)
|
||||
```
|
||||
|
||||
**Design Principles**:
|
||||
- Clear visual hierarchy prevents costly mistakes
|
||||
- Consistent interaction patterns build familiarity
|
||||
- Adequate touch targets (44px min) for mobile accessibility
|
||||
|
||||
### Cards - Content Organization
|
||||
|
||||
```css
|
||||
.card - Basic content container with soft shadows
|
||||
.card-hover - Interactive cards with elevation feedback
|
||||
```
|
||||
|
||||
**Psychology**: Cards create clear content boundaries, reduce cognitive load, and provide familiar interaction patterns.
|
||||
|
||||
### Inputs - Trustworthy Data Entry
|
||||
|
||||
```css
|
||||
.input-primary - Consistent form styling with focus states
|
||||
```
|
||||
|
||||
**Features**:
|
||||
- Clear focus indicators for accessibility
|
||||
- Proper contrast ratios (WCAG 2.1 AA compliant)
|
||||
- Error states with helpful messaging
|
||||
- Placeholder text that guides without overwhelming
|
||||
|
||||
### Status Indicators - Clear Information Hierarchy
|
||||
|
||||
```css
|
||||
.status-online - Connected, active states
|
||||
.status-offline - Disconnected, inactive states
|
||||
.status-warning - Attention required
|
||||
```
|
||||
|
||||
### Navigation - Intuitive Wayfinding
|
||||
|
||||
```css
|
||||
.nav-item - Default navigation states
|
||||
.nav-item-active - Current location indicator
|
||||
```
|
||||
|
||||
## Layout Principles
|
||||
|
||||
### Spacing System
|
||||
- **Base unit**: 4px (0.25rem)
|
||||
- **Common spacing**: 8px, 16px, 24px, 32px, 48px
|
||||
- **Component padding**: 24px (6 units)
|
||||
- **Section spacing**: 48px (12 units)
|
||||
|
||||
### Responsive Breakpoints
|
||||
```css
|
||||
sm: 640px - Small tablets
|
||||
md: 768px - Tablets
|
||||
lg: 1024px - Small desktops
|
||||
xl: 1280px - Large desktops
|
||||
```
|
||||
|
||||
### Grid System
|
||||
- **Mobile**: Single column, 16px margins
|
||||
- **Tablet**: 2-3 columns, 24px margins
|
||||
- **Desktop**: Multi-column layouts, 32px margins
|
||||
|
||||
## Interactive Elements
|
||||
|
||||
### Shadows - Depth & Hierarchy
|
||||
```css
|
||||
shadow-soft: Subtle elevation for cards
|
||||
shadow-medium: Interactive hover states
|
||||
shadow-strong: Modals, overlays, emphasis
|
||||
```
|
||||
|
||||
### Animation - Smooth Interactions
|
||||
- **Duration**: 200ms for micro-interactions, 300ms for transitions
|
||||
- **Easing**: `ease-in-out` for natural feel
|
||||
- **Principles**: Reduce motion for accessibility, maintain performance
|
||||
|
||||
### Focus States - Accessibility First
|
||||
- **Ring**: 2px blue outline with 2px offset
|
||||
- **Color**: Primary-500 for consistency
|
||||
- **Visibility**: Clear on all interactive elements
|
||||
|
||||
## Mobile Optimization
|
||||
|
||||
### Touch Targets
|
||||
- **Minimum**: 44px × 44px
|
||||
- **Recommended**: 48px × 48px for primary actions
|
||||
- **Spacing**: 8px minimum between interactive elements
|
||||
|
||||
### Typography Scale
|
||||
- **Mobile-first**: Base sizes optimized for readability on small screens
|
||||
- **Progressive enhancement**: Larger sizes on desktop
|
||||
- **Line height**: 1.6 for optimal mobile reading
|
||||
|
||||
### Safe Areas
|
||||
- **iOS**: Respect notch and home indicator
|
||||
- **Android**: Navigation and status bar accommodation
|
||||
- **CSS**: `env(safe-area-inset-*)` for dynamic adjustment
|
||||
|
||||
## Accessibility Standards
|
||||
|
||||
### WCAG 2.1 AA Compliance
|
||||
- **Contrast ratios**: 4.5:1 for normal text, 3:1 for large text
|
||||
- **Color**: Never sole indicator of information
|
||||
- **Focus**: Visible focus indicators on all interactive elements
|
||||
- **Motion**: Respect `prefers-reduced-motion`
|
||||
|
||||
### Screen Reader Support
|
||||
- **Semantic HTML**: Proper heading hierarchy, landmarks
|
||||
- **ARIA labels**: Descriptive labels for complex interactions
|
||||
- **Live regions**: Dynamic content announcements
|
||||
|
||||
## Usage Guidelines
|
||||
|
||||
### When to Use Primary Blue
|
||||
- **Call-to-action buttons**: Sign up, log in, send transaction
|
||||
- **Active navigation**: Current page indicators
|
||||
- **Links**: Primary navigation and important links
|
||||
- **Progress indicators**: Loading states, completion
|
||||
|
||||
### When to Use Success Green
|
||||
- **Positive confirmations**: Transaction successful, account verified
|
||||
- **Profit indicators**: Price increases, portfolio gains
|
||||
- **Status indicators**: Online, connected, active
|
||||
|
||||
### When to Use Warning Orange
|
||||
- **Caution states**: Pending transactions, rate limits
|
||||
- **Important notices**: Security warnings, updates required
|
||||
- **Validation**: Form warnings that aren't errors
|
||||
|
||||
### When to Use Error Red
|
||||
- **Destructive actions**: Delete account, remove funds
|
||||
- **Error states**: Failed transactions, connection errors
|
||||
- **Loss indicators**: Price decreases, portfolio losses
|
||||
|
||||
## Implementation Notes
|
||||
|
||||
### CSS Custom Properties
|
||||
All colors, spacing, and typography scales are available as CSS custom properties for consistent theming.
|
||||
|
||||
### Dark Mode Readiness
|
||||
Color palette includes dark mode variations for future implementation.
|
||||
|
||||
### Performance
|
||||
- **Font loading**: `font-display: swap` for improved loading experience
|
||||
- **Critical CSS**: Base styles inlined, components loaded asynchronously
|
||||
- **Animation**: Hardware-accelerated where appropriate
|
||||
|
||||
---
|
||||
|
||||
*This design system prioritizes user trust through consistent, accessible, and professional visual design - essential for crypto community platforms where financial decisions are made.*
|
||||
@@ -0,0 +1,253 @@
|
||||
# Crypto Platform Design Guidelines
|
||||
|
||||
## Design Philosophy
|
||||
|
||||
Our design system embodies three core principles that align with the needs of crypto professionals:
|
||||
|
||||
### 1. **Calm Sophistication**
|
||||
- Soft, muted color palettes that reduce visual noise
|
||||
- Generous whitespace for breathing room
|
||||
- Subtle animations that feel natural, not jarring
|
||||
|
||||
### 2. **Trust Through Clarity**
|
||||
- Clear information hierarchy
|
||||
- Consistent component patterns
|
||||
- Professional typography that's easy to scan
|
||||
|
||||
### 3. **Functional Beauty**
|
||||
- Every aesthetic choice serves a functional purpose
|
||||
- Data visualization that's both beautiful and informative
|
||||
- Interactions that feel intuitive and responsive
|
||||
|
||||
## Color System
|
||||
|
||||
### Primary Palette
|
||||
|
||||
#### Canvas (Backgrounds)
|
||||
- **Canvas-50** (#FAFAF9): Primary background, slight warmth prevents sterility
|
||||
- **Canvas-100** (#F5F5F4): Secondary surfaces, cards, elevated elements
|
||||
- **Canvas-200** (#E5E5E3): Tertiary backgrounds, hover states
|
||||
|
||||
#### Ocean Blue (Primary Actions)
|
||||
- **Primary-500** (#5B9BF3): Main brand color, CTAs, active states
|
||||
- **Primary-600** (#4A83DD): Hover states for primary elements
|
||||
- **Why**: Blue conveys trust, stability, and professionalism - crucial for financial platforms
|
||||
|
||||
#### Sage Green (Success/Growth)
|
||||
- **Sage-500** (#4DC46F): Positive changes, success states, gains
|
||||
- **Sage-600** (#3BA858): Hover states for success elements
|
||||
- **Why**: A sophisticated green that feels less aggressive than typical "success" greens
|
||||
|
||||
#### Coral Red (Errors/Losses)
|
||||
- **Coral-500** (#F56565): Errors, losses, critical actions
|
||||
- **Why**: Softer than harsh reds, maintains professionalism even in negative states
|
||||
|
||||
### Psychology Behind Color Choices
|
||||
|
||||
1. **Warm Neutrals Over Cold Grays**: Creates a more welcoming, less clinical environment
|
||||
2. **Muted Accent Colors**: Reduces cognitive load during long trading sessions
|
||||
3. **High Contrast for Data**: Ensures critical information is immediately visible
|
||||
|
||||
## Typography
|
||||
|
||||
### Font Stack
|
||||
|
||||
```css
|
||||
font-sans: 'Inter', -apple-system, system-ui
|
||||
font-display: 'Cabinet Grotesk', 'Inter'
|
||||
font-mono: 'JetBrains Mono'
|
||||
```
|
||||
|
||||
### Type Scale & Usage
|
||||
|
||||
- **Display (4.5rem)**: Hero sections, major announcements
|
||||
- **H1 (3rem)**: Page titles, primary headings
|
||||
- **H2 (1.875rem)**: Section headers
|
||||
- **Body (1rem)**: General content, -0.01em letter-spacing for clarity
|
||||
- **Small (0.875rem)**: Secondary information, metadata
|
||||
- **Micro (0.625rem)**: Tiny labels, timestamps
|
||||
|
||||
### Typography Rules
|
||||
|
||||
1. **Line Height**: 1.5-1.6 for body text, 1.1-1.2 for headings
|
||||
2. **Letter Spacing**: Negative for larger sizes, neutral for body
|
||||
3. **Font Weight**: Use 400-600 primarily, 700 sparingly for emphasis
|
||||
4. **Monospace**: Always for prices, percentages, numerical data
|
||||
|
||||
## Spacing System
|
||||
|
||||
### Base Unit: 0.25rem (4px)
|
||||
|
||||
- **Micro**: 4px, 8px (tight groupings)
|
||||
- **Small**: 12px, 16px (related elements)
|
||||
- **Medium**: 24px, 32px (sections)
|
||||
- **Large**: 48px, 64px (major sections)
|
||||
- **XLarge**: 96px+ (hero areas)
|
||||
|
||||
### Spacing Psychology
|
||||
|
||||
- **Tight spacing** (4-8px): Creates relationships between elements
|
||||
- **Medium spacing** (16-24px): Standard breathing room
|
||||
- **Generous spacing** (48px+): Creates focus and hierarchy
|
||||
|
||||
## Component Patterns
|
||||
|
||||
### Cards
|
||||
|
||||
#### Elevated Card
|
||||
```jsx
|
||||
<div className="card-elevated">
|
||||
// Shadow creates depth, white bg provides focus
|
||||
</div>
|
||||
```
|
||||
- Use for primary content containers
|
||||
- Subtle shadow creates hierarchy without borders
|
||||
|
||||
#### Interactive Card
|
||||
```jsx
|
||||
<div className="card-interactive">
|
||||
// Hover state with top border animation
|
||||
</div>
|
||||
```
|
||||
- Use for clickable items
|
||||
- Progressive disclosure through hover states
|
||||
|
||||
#### Glass Card
|
||||
```jsx
|
||||
<div className="glass-surface">
|
||||
// Backdrop blur for overlay contexts
|
||||
</div>
|
||||
```
|
||||
- Use for floating elements, overlays
|
||||
- Creates depth while maintaining context
|
||||
|
||||
### Buttons
|
||||
|
||||
#### Hierarchy
|
||||
1. **Premium Button**: Primary CTAs, most important actions
|
||||
2. **Glass Button**: Secondary actions, less emphasis
|
||||
3. **Outline Button**: Tertiary actions, minimal visual weight
|
||||
|
||||
#### Button Psychology
|
||||
- **Rounded corners** (0.75rem): Feels approachable, modern
|
||||
- **Subtle shadows**: Creates tactile feeling, encourages clicks
|
||||
- **Hover animations**: Provides feedback, builds confidence
|
||||
|
||||
### Forms
|
||||
|
||||
#### Input Design
|
||||
```jsx
|
||||
<input className="input-elevated" />
|
||||
```
|
||||
- **White background**: Maximum contrast for readability
|
||||
- **Subtle border**: Defines boundaries without heaviness
|
||||
- **Focus ring**: Clear feedback for keyboard navigation
|
||||
|
||||
## Motion & Animation
|
||||
|
||||
### Timing Functions
|
||||
```css
|
||||
--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);
|
||||
```
|
||||
|
||||
### Animation Principles
|
||||
|
||||
1. **Purpose**: Every animation serves a functional purpose
|
||||
2. **Subtlety**: Movements should feel natural, not dramatic
|
||||
3. **Performance**: Prefer transform and opacity for 60fps
|
||||
4. **Consistency**: Same elements animate the same way
|
||||
|
||||
### Common Animations
|
||||
|
||||
- **Fade In**: Content appearing (0.5s)
|
||||
- **Scale In**: Modals, popups (0.3s)
|
||||
- **Slide In**: Panels, drawers (0.3s)
|
||||
- **Shimmer**: Loading states (2s loop)
|
||||
|
||||
## Data Visualization
|
||||
|
||||
### Market Data Display
|
||||
|
||||
1. **Monospace fonts** for all numbers
|
||||
2. **Color coding**: Green (up), Red (down), Gray (neutral)
|
||||
3. **Tabular alignment** for easy scanning
|
||||
4. **Real-time updates** with subtle transitions
|
||||
|
||||
### Chart Guidelines
|
||||
|
||||
- **Muted gridlines**: Don't compete with data
|
||||
- **High contrast** for data points
|
||||
- **Interactive tooltips** on hover
|
||||
- **Responsive scaling** for all screen sizes
|
||||
|
||||
## Accessibility
|
||||
|
||||
### WCAG 2.1 AA Compliance
|
||||
|
||||
1. **Color Contrast**: 4.5:1 for normal text, 3:1 for large
|
||||
2. **Focus Indicators**: Visible keyboard navigation
|
||||
3. **Touch Targets**: Minimum 44x44px
|
||||
4. **Screen Readers**: Semantic HTML, ARIA labels
|
||||
|
||||
### Inclusive Design
|
||||
|
||||
- **Color-blind safe**: Don't rely solely on color
|
||||
- **Keyboard navigable**: All interactions keyboard accessible
|
||||
- **Reduced motion**: Respect prefers-reduced-motion
|
||||
- **Clear language**: Avoid jargon in critical flows
|
||||
|
||||
## Responsive Design
|
||||
|
||||
### Breakpoints
|
||||
```css
|
||||
sm: 640px
|
||||
md: 768px
|
||||
lg: 1024px
|
||||
xl: 1280px
|
||||
2xl: 1536px
|
||||
```
|
||||
|
||||
### Mobile-First Principles
|
||||
|
||||
1. **Essential information** visible without scrolling
|
||||
2. **Touch-friendly** tap targets (min 44px)
|
||||
3. **Simplified navigation** for small screens
|
||||
4. **Performance optimized** for mobile networks
|
||||
|
||||
## Implementation Guidelines
|
||||
|
||||
### Component Usage
|
||||
|
||||
1. **Consistency**: Use existing components before creating new
|
||||
2. **Composition**: Build complex UIs from simple components
|
||||
3. **Customization**: Extend through composition, not modification
|
||||
4. **Documentation**: Document any deviations from guidelines
|
||||
|
||||
### Performance Considerations
|
||||
|
||||
1. **Lazy load** non-critical components
|
||||
2. **Optimize images** (WebP, proper sizing)
|
||||
3. **Code split** by route
|
||||
4. **Cache aggressively** for repeat visits
|
||||
|
||||
### Testing Checklist
|
||||
|
||||
- [ ] Responsive on all breakpoints
|
||||
- [ ] Accessible via keyboard
|
||||
- [ ] Color contrast passes
|
||||
- [ ] Animations respect reduced motion
|
||||
- [ ] Forms have proper validation
|
||||
- [ ] Loading states implemented
|
||||
- [ ] Error states handled gracefully
|
||||
|
||||
## Summary
|
||||
|
||||
This design system creates a premium experience that:
|
||||
- **Builds trust** through consistency and clarity
|
||||
- **Reduces cognitive load** with calm aesthetics
|
||||
- **Enhances usability** through thoughtful interactions
|
||||
- **Scales elegantly** across devices and contexts
|
||||
|
||||
The result is a platform that feels sophisticated yet approachable, powerful yet simple - perfect for crypto professionals who demand both functionality and aesthetic excellence.
|
||||
Generated
+1279
File diff suppressed because it is too large
Load Diff
+10
-5
@@ -10,17 +10,22 @@
|
||||
"tauri": "tauri"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^19.1.0",
|
||||
"react-dom": "^19.1.0",
|
||||
"@tauri-apps/api": "^2",
|
||||
"@tauri-apps/plugin-opener": "^2"
|
||||
"@tauri-apps/plugin-opener": "^2",
|
||||
"react": "^19.1.0",
|
||||
"react-dom": "^19.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/forms": "^0.5.11",
|
||||
"@tailwindcss/typography": "^0.5.19",
|
||||
"@tauri-apps/cli": "^2",
|
||||
"@types/react": "^19.1.8",
|
||||
"@types/react-dom": "^19.1.6",
|
||||
"@vitejs/plugin-react": "^4.6.0",
|
||||
"autoprefixer": "^10.4.23",
|
||||
"postcss": "^8.5.6",
|
||||
"tailwindcss": "^3.4.19",
|
||||
"typescript": "~5.8.3",
|
||||
"vite": "^7.0.4",
|
||||
"@tauri-apps/cli": "^2"
|
||||
"vite": "^7.0.4"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
+277
-33
@@ -1,51 +1,295 @@
|
||||
import { useState } from "react";
|
||||
import reactLogo from "./assets/react.svg";
|
||||
import { invoke } from "@tauri-apps/api/core";
|
||||
import "./App.css";
|
||||
|
||||
function App() {
|
||||
const [greetMsg, setGreetMsg] = useState("");
|
||||
const [name, setName] = useState("");
|
||||
|
||||
async function greet() {
|
||||
// Learn more about Tauri commands at https://tauri.app/develop/calling-rust/
|
||||
setGreetMsg(await invoke("greet", { name }));
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="container">
|
||||
<h1>Welcome to Tauri + React</h1>
|
||||
<div className="min-h-screen bg-gradient-to-br from-primary-200 via-sage-100 to-amber-100 relative">
|
||||
{/* Background pattern for enhanced glass effect */}
|
||||
<div className="absolute inset-0 bg-noise opacity-30"></div>
|
||||
{/* Header with Glass Effect */}
|
||||
<header className="glass border-b border-white/20 safe-area-padding sticky top-0 z-50 relative">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex justify-between items-center h-16">
|
||||
<div className="flex items-center">
|
||||
<h1 className="text-xl font-semibold text-stone-900">
|
||||
Crypto Community Platform
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div className="row">
|
||||
<a href="https://vite.dev" target="_blank">
|
||||
<img src="/vite.svg" className="logo vite" alt="Vite logo" />
|
||||
</a>
|
||||
<a href="https://tauri.app" target="_blank">
|
||||
<img src="/tauri.svg" className="logo tauri" alt="Tauri logo" />
|
||||
</a>
|
||||
<a href="https://react.dev" target="_blank">
|
||||
<img src={reactLogo} className="logo react" alt="React logo" />
|
||||
</a>
|
||||
{/* Navigation Menu */}
|
||||
<nav className="hidden md:flex items-center space-x-1">
|
||||
<a href="#" className="nav-item-active">Dashboard</a>
|
||||
<a href="#" className="nav-item">Portfolio</a>
|
||||
<a href="#" className="nav-item">Chat</a>
|
||||
<a href="#" className="nav-item">Markets</a>
|
||||
</nav>
|
||||
|
||||
<div className="flex items-center space-x-4">
|
||||
<span className="status-online">Connected</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Crypto Price Ticker */}
|
||||
<div className="glass border-b border-white/10 py-3 relative overflow-hidden">
|
||||
<div className="animate-ticker whitespace-nowrap">
|
||||
<span className="inline-flex items-center space-x-8 font-mono text-sm">
|
||||
<span className="flex items-center space-x-2">
|
||||
<span style={{color: '#F7931A'}} className="font-semibold">BTC</span>
|
||||
<span className="price-positive">$45,250.00 +2.5%</span>
|
||||
</span>
|
||||
<span className="flex items-center space-x-2">
|
||||
<span style={{color: '#627EEA'}} className="font-semibold">ETH</span>
|
||||
<span className="price-negative">$3,120.50 -1.8%</span>
|
||||
</span>
|
||||
<span className="flex items-center space-x-2">
|
||||
<span className="text-stone-700 font-semibold">ADA</span>
|
||||
<span className="price-neutral">$0.52 0.0%</span>
|
||||
</span>
|
||||
<span className="flex items-center space-x-2">
|
||||
<span className="text-stone-700 font-semibold">SOL</span>
|
||||
<span className="price-positive">$98.75 +4.2%</span>
|
||||
</span>
|
||||
<span className="flex items-center space-x-2">
|
||||
<span className="text-stone-700 font-semibold">USDC</span>
|
||||
<span className="price-neutral" style={{color: '#5B9BF3'}}>$1.00 0.0%</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<p>Click on the Tauri, Vite, and React logos to learn more.</p>
|
||||
|
||||
<form
|
||||
className="row"
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
greet();
|
||||
}}
|
||||
>
|
||||
<input
|
||||
id="greet-input"
|
||||
onChange={(e) => setName(e.currentTarget.value)}
|
||||
placeholder="Enter a name..."
|
||||
/>
|
||||
<button type="submit">Greet</button>
|
||||
</form>
|
||||
<p>{greetMsg}</p>
|
||||
</main>
|
||||
{/* Main Content */}
|
||||
<main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8 relative">
|
||||
{/* Welcome Section with Glass Effect */}
|
||||
<div className="glass rounded-xl p-8 mb-8 animate-fade-in-up shadow-large">
|
||||
<div className="text-center">
|
||||
<h2 className="text-2xl font-semibold text-neutral-900 mb-4">
|
||||
Welcome to Your Crypto Community Hub
|
||||
</h2>
|
||||
<p className="text-neutral-600 mb-6">
|
||||
Built with Tauri + React, designed for traders, investors, and crypto enthusiasts.
|
||||
This platform prioritizes trust, security, and seamless communication.
|
||||
</p>
|
||||
|
||||
{/* Demo Interaction */}
|
||||
<div className="max-w-md mx-auto">
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
greet();
|
||||
}}
|
||||
className="space-y-4"
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder="Enter your name to test the connection..."
|
||||
className="input-primary"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
className="btn-primary w-full"
|
||||
disabled={!name.trim()}
|
||||
>
|
||||
Test Connection
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{greetMsg && (
|
||||
<div className="mt-4 p-4 bg-success-50 border border-success-200 rounded-lg animate-fade-in-up">
|
||||
<p className="text-success-800 font-medium">{greetMsg}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Feature Preview Cards */}
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
|
||||
{/* Real-time Messaging */}
|
||||
<div className="glass rounded-xl p-6 hover:shadow-medium transition-all duration-300 hover:scale-105">
|
||||
<div className="flex items-center mb-3">
|
||||
<div className="w-8 h-8 bg-primary-100 rounded-lg flex items-center justify-center mr-3">
|
||||
<svg className="w-4 h-4 text-primary-600" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.083-.98L2 17l1.338-3.123C2.493 12.767 2 11.434 2 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9H5v2h2V9zm8 0h-2v2h2V9zM9 9h2v2H9V9z" clipRule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="font-semibold text-neutral-900">Real-time Chat</h3>
|
||||
</div>
|
||||
<p className="text-neutral-600 text-sm">
|
||||
Secure messaging for crypto discussions with end-to-end encryption and group channels.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Portfolio Integration */}
|
||||
<div className="glass rounded-xl p-6 hover:shadow-medium transition-all duration-300 hover:scale-105">
|
||||
<div className="flex items-center mb-3">
|
||||
<div className="w-8 h-8 bg-success-100 rounded-lg flex items-center justify-center mr-3">
|
||||
<svg className="w-4 h-4 text-success-600" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="font-semibold text-neutral-900">Portfolio Tracking</h3>
|
||||
</div>
|
||||
<p className="text-neutral-600 text-sm">
|
||||
Monitor your crypto investments with real-time price updates and performance analytics.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Community Features */}
|
||||
<div className="glass rounded-xl p-6 hover:shadow-medium transition-all duration-300 hover:scale-105">
|
||||
<div className="flex items-center mb-3">
|
||||
<div className="w-8 h-8 bg-warning-100 rounded-lg flex items-center justify-center mr-3">
|
||||
<svg className="w-4 h-4 text-warning-600" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="font-semibold text-neutral-900">Expert Network</h3>
|
||||
</div>
|
||||
<p className="text-neutral-600 text-sm">
|
||||
Connect with traders, researchers, and KOLs in specialized crypto communities.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Chat Messages Demo */}
|
||||
<div className="glass rounded-xl p-8 mb-8 shadow-medium">
|
||||
<h3 className="text-lg font-semibold text-stone-900 mb-6">
|
||||
💬 Live Chat Demo
|
||||
</h3>
|
||||
|
||||
<div className="space-y-4 mb-6 max-h-64 overflow-y-auto scrollbar-thin">
|
||||
<div className="flex justify-start">
|
||||
<div className="message-received">
|
||||
Hey everyone! BTC looking bullish 🚀
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-end">
|
||||
<div className="message-sent">
|
||||
Agreed! Just bought more at $45k
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-start">
|
||||
<div className="message-received">
|
||||
<span className="font-mono text-xs opacity-75">0x1a2b3c...d4e5f6</span><br/>
|
||||
Anyone seeing this DeFi yield opportunity?
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-end">
|
||||
<div className="message-sent">
|
||||
Which protocol? Share the alpha! 👀
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Type your message..."
|
||||
className="input-primary flex-1"
|
||||
/>
|
||||
<button className="btn-primary px-6">Send</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Design System Showcase */}
|
||||
<div className="grid md:grid-cols-2 gap-8 mb-8">
|
||||
{/* Buttons & Forms */}
|
||||
<div className="glass rounded-xl p-6 shadow-medium">
|
||||
<h3 className="text-lg font-semibold text-stone-900 mb-4">
|
||||
🎛️ Interactive Components
|
||||
</h3>
|
||||
|
||||
<div className="space-y-6">
|
||||
{/* Button Examples */}
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-stone-700 mb-3">Action Buttons</h4>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<button className="btn-primary">Buy Crypto</button>
|
||||
<button className="btn-secondary">View Details</button>
|
||||
<button className="btn-success">Confirm Trade</button>
|
||||
<button className="btn-danger">Cancel Order</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Form Example */}
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-stone-700 mb-3">Trading Form</h4>
|
||||
<div className="space-y-3">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Enter amount (BTC)"
|
||||
className="input-primary font-mono"
|
||||
/>
|
||||
<select className="input-primary">
|
||||
<option>Market Order</option>
|
||||
<option>Limit Order</option>
|
||||
<option>Stop Loss</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Status & Loading States */}
|
||||
<div className="glass rounded-xl p-6 shadow-medium">
|
||||
<h3 className="text-lg font-semibold text-stone-900 mb-4">
|
||||
📊 Status Indicators
|
||||
</h3>
|
||||
|
||||
<div className="space-y-6">
|
||||
{/* Status Examples */}
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-stone-700 mb-3">Connection Status</h4>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<span className="status-online">Trading Active</span>
|
||||
<span className="status-offline">Market Closed</span>
|
||||
<span className="status-warning">Order Pending</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Loading States */}
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-stone-700 mb-3">Loading States</h4>
|
||||
<div className="space-y-2">
|
||||
<div className="loading-pulse h-4 w-3/4"></div>
|
||||
<div className="loading-pulse h-4 w-1/2"></div>
|
||||
<div className="loading-pulse h-4 w-2/3"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Crypto Addresses */}
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-stone-700 mb-3">Wallet Address</h4>
|
||||
<div className="bg-stone-100 rounded-lg p-3 font-mono text-xs break-all border">
|
||||
bc1qxy2kgdygjrsqtzq2n0yrf2493p83kkfjhx0wlh
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="mt-16 glass border-t border-white/20">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
|
||||
<div className="text-center text-sm text-neutral-500">
|
||||
<p>Built with Tauri 2.x, React 19, TypeScript, and Tailwind CSS</p>
|
||||
<p className="mt-1">Designed for trust, security, and seamless crypto community interactions</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
export default App;
|
||||
@@ -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 (
|
||||
<div className="min-h-screen bg-gradient-to-br from-canvas-50 via-canvas-100 to-primary-50/20">
|
||||
{/* Hero Section - Similar to Screenshot #1 but elevated */}
|
||||
<section className="relative overflow-hidden">
|
||||
{/* Atmospheric Background */}
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-primary-50/30 via-transparent to-transparent" />
|
||||
<div className="absolute top-0 right-0 w-96 h-96 bg-accent-sky/20 rounded-full filter blur-3xl" />
|
||||
<div className="absolute bottom-0 left-0 w-96 h-96 bg-accent-lavender/20 rounded-full filter blur-3xl" />
|
||||
|
||||
<div className="relative z-10 container mx-auto px-6 py-24">
|
||||
{/* Greeting Section */}
|
||||
<div className="max-w-4xl">
|
||||
<h1 className="text-6xl font-display font-bold text-stone-900 mb-4">
|
||||
Good afternoon,
|
||||
<span className="text-gradient"> Cyrus</span>
|
||||
</h1>
|
||||
<p className="text-xl text-stone-600 mb-8">
|
||||
Your portfolio is up 12.5% today
|
||||
</p>
|
||||
|
||||
{/* Status Card */}
|
||||
<div className="glass-surface inline-flex items-center space-x-4 px-6 py-4 rounded-2xl">
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="status-indicator online">
|
||||
<span className="absolute inline-flex h-full w-full rounded-full bg-sage-400 opacity-75"></span>
|
||||
<span className="relative inline-flex rounded-full h-3 w-3 bg-sage-500"></span>
|
||||
</div>
|
||||
<span className="text-stone-700 font-medium">Markets Open</span>
|
||||
</div>
|
||||
<div className="h-4 w-px bg-stone-300" />
|
||||
<span className="text-stone-600">26°C and clear</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quick Actions */}
|
||||
<div className="mt-12 flex flex-wrap gap-4">
|
||||
<button className="btn-premium">
|
||||
<svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
Start Trading
|
||||
</button>
|
||||
<button className="btn-glass">
|
||||
View Portfolio
|
||||
</button>
|
||||
<button className="btn-outline">
|
||||
Market Analysis
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Color Palette Section */}
|
||||
<section className="container mx-auto px-6 py-16">
|
||||
<h2 className="text-3xl font-display font-bold text-stone-900 mb-8">
|
||||
Color System
|
||||
</h2>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{/* Primary Colors */}
|
||||
<div className="card-elevated p-6">
|
||||
<h3 className="text-lg font-semibold text-stone-900 mb-4">Primary Ocean</h3>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-12 h-12 bg-primary-500 rounded-xl shadow-soft" />
|
||||
<div>
|
||||
<p className="text-sm font-medium text-stone-900">Primary 500</p>
|
||||
<p className="text-xs text-stone-500">#5B9BF3</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-12 h-12 bg-primary-600 rounded-xl shadow-soft" />
|
||||
<div>
|
||||
<p className="text-sm font-medium text-stone-900">Primary 600</p>
|
||||
<p className="text-xs text-stone-500">#4A83DD</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Success Colors */}
|
||||
<div className="card-elevated p-6">
|
||||
<h3 className="text-lg font-semibold text-stone-900 mb-4">Sage Success</h3>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-12 h-12 bg-sage-500 rounded-xl shadow-soft" />
|
||||
<div>
|
||||
<p className="text-sm font-medium text-stone-900">Sage 500</p>
|
||||
<p className="text-xs text-stone-500">#4DC46F</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-12 h-12 bg-sage-600 rounded-xl shadow-soft" />
|
||||
<div>
|
||||
<p className="text-sm font-medium text-stone-900">Sage 600</p>
|
||||
<p className="text-xs text-stone-500">#3BA858</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Accent Colors */}
|
||||
<div className="card-elevated p-6">
|
||||
<h3 className="text-lg font-semibold text-stone-900 mb-4">Accent Palette</h3>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-12 h-12 bg-accent-lavender rounded-xl shadow-soft" />
|
||||
<div>
|
||||
<p className="text-sm font-medium text-stone-900">Lavender</p>
|
||||
<p className="text-xs text-stone-500">#9B8AFB</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-12 h-12 bg-accent-sky rounded-xl shadow-soft" />
|
||||
<div>
|
||||
<p className="text-sm font-medium text-stone-900">Sky</p>
|
||||
<p className="text-xs text-stone-500">#7DD3FC</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Typography Section */}
|
||||
<section className="container mx-auto px-6 py-16">
|
||||
<h2 className="text-3xl font-display font-bold text-stone-900 mb-8">
|
||||
Typography Scale
|
||||
</h2>
|
||||
|
||||
<div className="card-elevated p-8 space-y-6">
|
||||
<div>
|
||||
<p className="text-xs text-stone-500 mb-1">Display · 4.5rem</p>
|
||||
<h1 className="text-7xl font-display font-bold text-stone-900">
|
||||
Beautiful Typography
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-xs text-stone-500 mb-1">Heading 1 · 3rem</p>
|
||||
<h2 className="text-5xl font-display font-semibold text-stone-900">
|
||||
Clear Information Hierarchy
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-xs text-stone-500 mb-1">Heading 2 · 1.875rem</p>
|
||||
<h3 className="text-3xl font-display font-semibold text-stone-900">
|
||||
Structured Content Design
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-xs text-stone-500 mb-1">Body · 1rem</p>
|
||||
<p className="text-base text-stone-700 leading-relaxed max-w-3xl">
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-xs text-stone-500 mb-1">Monospace · For prices and data</p>
|
||||
<p className="text-crypto-price text-2xl text-stone-900">
|
||||
$48,392.50 <span className="text-market-bullish">+2.45%</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Card Components Section */}
|
||||
<section className="container mx-auto px-6 py-16">
|
||||
<h2 className="text-3xl font-display font-bold text-stone-900 mb-8">
|
||||
Card Components
|
||||
</h2>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{/* Market Card */}
|
||||
<div className="market-card">
|
||||
<div className="relative z-10">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-10 h-10 bg-market-bitcoin/20 rounded-xl flex items-center justify-center">
|
||||
<span className="text-market-bitcoin font-bold">₿</span>
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-semibold text-stone-900">Bitcoin</p>
|
||||
<p className="text-sm text-stone-500">BTC</p>
|
||||
</div>
|
||||
</div>
|
||||
<span className="badge-premium">Trending</span>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<p className="price-ticker up">$48,392.50</p>
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="text-sm text-market-bullish font-medium">+$1,185.20</span>
|
||||
<span className="text-sm text-market-bullish">(+2.45%)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Interactive Card */}
|
||||
<div className="card-interactive">
|
||||
<h3 className="text-lg font-semibold text-stone-900 mb-2">
|
||||
Portfolio Overview
|
||||
</h3>
|
||||
<p className="text-stone-600 mb-4">
|
||||
Track your investments and monitor performance in real-time.
|
||||
</p>
|
||||
<div className="flex items-center text-primary-600 font-medium">
|
||||
<span>View Details</span>
|
||||
<svg className="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Elevated Card */}
|
||||
<div className="card-elevated">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-lg font-semibold text-stone-900">Quick Stats</h3>
|
||||
<div className="w-8 h-8 bg-primary-100 rounded-lg flex items-center justify-center">
|
||||
<svg className="w-4 h-4 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-sm text-stone-600">Total Value</span>
|
||||
<span className="font-mono font-semibold text-stone-900">$125,430</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-sm text-stone-600">24h Change</span>
|
||||
<span className="font-mono font-semibold text-market-bullish">+3.2%</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-sm text-stone-600">Holdings</span>
|
||||
<span className="font-mono font-semibold text-stone-900">12</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Navigation Pattern - Similar to Screenshot #2 */}
|
||||
<section className="container mx-auto px-6 py-16">
|
||||
<h2 className="text-3xl font-display font-bold text-stone-900 mb-8">
|
||||
Navigation & Settings
|
||||
</h2>
|
||||
|
||||
<div className="max-w-md">
|
||||
<div className="card-elevated p-2">
|
||||
{/* User Profile Section */}
|
||||
<div className="p-4 border-b border-stone-200">
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="w-12 h-12 bg-gradient-to-br from-primary-400 to-accent-lavender rounded-xl" />
|
||||
<div>
|
||||
<p className="font-semibold text-stone-900">Cyrus Amini</p>
|
||||
<p className="text-sm text-stone-500">Premium Member</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Navigation Items */}
|
||||
<nav className="p-2">
|
||||
<a href="#" className="nav-item-premium active">
|
||||
<svg className="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
|
||||
</svg>
|
||||
Dashboard
|
||||
</a>
|
||||
<a href="#" className="nav-item-premium">
|
||||
<svg className="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
||||
</svg>
|
||||
Profile Settings
|
||||
</a>
|
||||
<a href="#" className="nav-item-premium">
|
||||
<svg className="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
|
||||
</svg>
|
||||
Notifications
|
||||
</a>
|
||||
<a href="#" className="nav-item-premium">
|
||||
<svg className="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||||
</svg>
|
||||
Security
|
||||
</a>
|
||||
<a href="#" className="nav-item-premium">
|
||||
<svg className="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
Help & Support
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Form Elements */}
|
||||
<section className="container mx-auto px-6 py-16">
|
||||
<h2 className="text-3xl font-display font-bold text-stone-900 mb-8">
|
||||
Form Elements
|
||||
</h2>
|
||||
|
||||
<div className="max-w-2xl">
|
||||
<div className="card-elevated p-8 space-y-6">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-stone-700 mb-2">
|
||||
Email Address
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
className="input-elevated"
|
||||
placeholder="Enter your email"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-stone-700 mb-2">
|
||||
Investment Amount
|
||||
</label>
|
||||
<div className="relative">
|
||||
<span className="absolute left-4 top-3 text-stone-500">$</span>
|
||||
<input
|
||||
type="text"
|
||||
className="input-elevated pl-8"
|
||||
placeholder="0.00"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-stone-700 mb-2">
|
||||
Select Currency
|
||||
</label>
|
||||
<select className="input-elevated">
|
||||
<option>Bitcoin (BTC)</option>
|
||||
<option>Ethereum (ETH)</option>
|
||||
<option>USDT</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="terms"
|
||||
className="w-4 h-4 text-primary-600 border-stone-300 rounded focus:ring-primary-500"
|
||||
/>
|
||||
<label htmlFor="terms" className="text-sm text-stone-700">
|
||||
I agree to the terms and conditions
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<button className="btn-premium w-full">
|
||||
Complete Transaction
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DesignSystemShowcase;
|
||||
+236
@@ -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 */
|
||||
}
|
||||
@@ -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(
|
||||
<React.StrictMode>
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
@@ -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'),
|
||||
],
|
||||
};
|
||||
Reference in New Issue
Block a user