From c4d6cae7356df6d92945bb7ed653a04b38ae3d8b Mon Sep 17 00:00:00 2001 From: Sepehr Date: Wed, 31 Dec 2025 10:43:31 +0100 Subject: [PATCH] Production-ready improvements: security hardening, Redis sessions, retry logic, updated pricing Changes: - Removed hardcoded admin credentials (now requires env vars) - Added Redis session storage with in-memory fallback - Improved CORS configuration with warnings for development mode - Added retry_with_backoff decorator for translation API calls - Updated pricing: Starter=, Pro=, Business= - Stripe price IDs now loaded from environment variables - Added redis to requirements.txt - Updated .env.example with all new configuration options - Created COMPREHENSIVE_REVIEW_AND_PLAN.md with deployment roadmap - Frontend: Updated pricing page, new UI components --- .env.example | 59 +- COMPREHENSIVE_REVIEW_AND_PLAN.md | 458 +++++ frontend/package-lock.json | 4 +- frontend/package.json | 2 + frontend/src/app/auth/login/page.tsx | 417 ++-- frontend/src/app/auth/register/page.tsx | 649 +++++-- frontend/src/app/dashboard/page.tsx | 588 ++++-- frontend/src/app/globals.css | 1797 +++++++++++++++++- frontend/src/app/pricing/page.tsx | 553 ++++-- frontend/src/app/settings/context/page.tsx | 457 +++-- frontend/src/app/settings/page.tsx | 503 +++-- frontend/src/app/settings/services/page.tsx | 1282 ++++++------- frontend/src/components/file-uploader.tsx | 647 ++++--- frontend/src/components/landing-sections.tsx | 492 ++++- frontend/src/components/sidebar.tsx | 7 +- frontend/src/components/ui/badge.tsx | 293 ++- frontend/src/components/ui/button.tsx | 149 +- frontend/src/components/ui/card.tsx | 324 +++- frontend/src/components/ui/input.tsx | 365 +++- frontend/src/components/ui/notification.tsx | 325 ++++ frontend/src/components/ui/toast.tsx | 313 +++ frontend/tailwind.config.js | 134 ++ main.py | 105 +- models/subscription.py | 33 +- requirements.txt | 8 + sample_files/.~lock.complex_sample.docx# | 1 - services/translation_service.py | 40 +- 27 files changed, 7824 insertions(+), 2181 deletions(-) create mode 100644 COMPREHENSIVE_REVIEW_AND_PLAN.md create mode 100644 frontend/src/components/ui/notification.tsx create mode 100644 frontend/src/components/ui/toast.tsx create mode 100644 frontend/tailwind.config.js delete mode 100644 sample_files/.~lock.complex_sample.docx# diff --git a/.env.example b/.env.example index bf4fb7b..e5f6ad4 100644 --- a/.env.example +++ b/.env.example @@ -1,14 +1,24 @@ # Document Translation API - Environment Configuration # Copy this file to .env and configure your settings +# ⚠️ NEVER commit .env to version control! # ============== Translation Services ============== -# Default provider: google, ollama, deepl, libre, openai +# Default provider: google, ollama, deepl, libre, openai, openrouter TRANSLATION_SERVICE=google # DeepL API Key (required for DeepL provider) -DEEPL_API_KEY=your_deepl_api_key_here +# Get from: https://www.deepl.com/pro-api +DEEPL_API_KEY= -# Ollama Configuration (for LLM-based translation) +# OpenAI API Key (required for OpenAI provider) +# Get from: https://platform.openai.com/api-keys +OPENAI_API_KEY= + +# OpenRouter API Key (required for OpenRouter provider) +# Get from: https://openrouter.ai/keys +OPENROUTER_API_KEY= + +# Ollama Configuration (for local LLM-based translation) OLLAMA_BASE_URL=http://localhost:11434 OLLAMA_MODEL=llama3 OLLAMA_VISION_MODEL=llava @@ -51,7 +61,10 @@ DISK_CRITICAL_THRESHOLD_GB=1.0 ENABLE_HSTS=false # CORS allowed origins (comma-separated) -CORS_ORIGINS=* +# ⚠️ IMPORTANT: Set to your actual frontend domain(s) in production! +# Example: https://yourdomain.com,https://www.yourdomain.com +# Use "*" ONLY for local development +CORS_ORIGINS=http://localhost:3000 # Maximum request size in MB MAX_REQUEST_SIZE_MB=100 @@ -59,23 +72,32 @@ MAX_REQUEST_SIZE_MB=100 # Request timeout in seconds REQUEST_TIMEOUT_SECONDS=300 +# ============== Database (Production) ============== +# PostgreSQL connection string (recommended for production) +# DATABASE_URL=postgresql://user:password@localhost:5432/translate_db + +# Redis for sessions and caching (recommended for production) +# REDIS_URL=redis://localhost:6379/0 + # ============== Admin Authentication ============== -# Admin username +# ⚠️ REQUIRED: These must be set for admin endpoints to work! ADMIN_USERNAME=admin -# Admin password (change in production!) -ADMIN_PASSWORD=changeme123 - -# Or use SHA256 hash of password (more secure) +# Use SHA256 hash of password (recommended for production) # Generate with: python -c "import hashlib; print(hashlib.sha256(b'your_password').hexdigest())" -# ADMIN_PASSWORD_HASH= +ADMIN_PASSWORD_HASH= -# Token secret for session management (auto-generated if not set) -# ADMIN_TOKEN_SECRET= +# Or use plain password (NOT recommended for production) +# ADMIN_PASSWORD= + +# Token secret for session management +# Generate with: python -c "import secrets; print(secrets.token_hex(32))" +ADMIN_TOKEN_SECRET= # ============== User Authentication ============== -# JWT secret key (auto-generated if not set) -# JWT_SECRET_KEY= +# JWT secret key for user tokens +# Generate with: python -c "import secrets; print(secrets.token_urlsafe(64))" +JWT_SECRET_KEY= # Frontend URL for redirects FRONTEND_URL=http://localhost:3000 @@ -86,6 +108,15 @@ STRIPE_PUBLISHABLE_KEY=pk_test_... STRIPE_SECRET_KEY=sk_test_... STRIPE_WEBHOOK_SECRET=whsec_... +# Stripe Price IDs (create products in Stripe Dashboard) +# https://dashboard.stripe.com/products +STRIPE_PRICE_STARTER_MONTHLY=price_xxx +STRIPE_PRICE_STARTER_YEARLY=price_xxx +STRIPE_PRICE_PRO_MONTHLY=price_xxx +STRIPE_PRICE_PRO_YEARLY=price_xxx +STRIPE_PRICE_BUSINESS_MONTHLY=price_xxx +STRIPE_PRICE_BUSINESS_YEARLY=price_xxx + # ============== Monitoring ============== # Log level: DEBUG, INFO, WARNING, ERROR LOG_LEVEL=INFO diff --git a/COMPREHENSIVE_REVIEW_AND_PLAN.md b/COMPREHENSIVE_REVIEW_AND_PLAN.md new file mode 100644 index 0000000..370d7e0 --- /dev/null +++ b/COMPREHENSIVE_REVIEW_AND_PLAN.md @@ -0,0 +1,458 @@ +# 📊 Comprehensive Code Review & Deployment Plan + +## Executive Summary + +Your **Document Translation API** is a well-architected SaaS application for translating Office documents (Excel, Word, PowerPoint) while preserving formatting. After a thorough code review, here's a complete assessment and actionable deployment/monetization plan. + +--- + +## 🔍 Code Review Summary + +### ✅ Backend Strengths + +| Component | Status | Notes | +|-----------|--------|-------| +| **FastAPI Architecture** | ✅ Excellent | Clean lifespan management, proper middleware stack | +| **Translation Service Layer** | ✅ Excellent | Pluggable provider pattern, thread-safe caching (LRU) | +| **Rate Limiting** | ✅ Excellent | Token bucket + sliding window algorithms | +| **File Translators** | ✅ Good | Batch translation optimization (5-10x faster) | +| **Authentication** | ✅ Good | JWT with refresh tokens, bcrypt fallback | +| **Payment Integration** | ✅ Good | Stripe checkout, webhooks, subscriptions | +| **Middleware Stack** | ✅ Excellent | Security headers, request logging, cleanup | + +### ✅ Frontend Strengths + +| Component | Status | Notes | +|-----------|--------|-------| +| **Next.js 16** | ✅ Modern | Latest version with App Router | +| **UI Components** | ✅ Excellent | shadcn/ui + Radix UI primitives | +| **State Management** | ✅ Good | Zustand for global state | +| **WebLLM Integration** | ✅ Innovative | Browser-based translation option | +| **Responsive Design** | ✅ Good | Tailwind CSS v4 | + +### ⚠️ Issues to Address + +#### Critical (Must Fix Before Production) + +1. **Hardcoded Admin Credentials** + - File: `main.py` line 44 + - Issue: `ADMIN_PASSWORD = os.getenv("ADMIN_PASSWORD", "changeme123")` + - Fix: Remove default, require env var + +2. **File-Based User Storage** + - File: `services/auth_service.py` + - Issue: JSON file storage not scalable + - Fix: Migrate to PostgreSQL/MongoDB + +3. **CORS Configuration Too Permissive** + - File: `main.py` line 170 + - Issue: `allow_origins=allowed_origins` defaults to `*` + - Fix: Restrict to specific domains + +4. **API Keys in Frontend** + - File: `frontend/src/lib/api.ts` + - Issue: OpenAI API key passed from client + - Fix: Proxy through backend + +5. **Missing Input Sanitization** + - File: `translators/*.py` + - Issue: No malware scanning for uploads + - Fix: Add ClamAV or VirusTotal integration + +#### Important (Should Fix) + +6. **No Database Migrations** + - Issue: No Alembic/migration setup + - Fix: Add proper migration system + +7. **Incomplete Error Handling in WebLLM** + - File: `frontend/src/lib/webllm.ts` + - Issue: Generic error messages + +8. **Missing Retry Logic** + - File: `services/translation_service.py` + - Issue: No exponential backoff for API calls + +9. **Session Storage in Memory** + - File: `main.py` line 50: `admin_sessions: dict = {}` + - Issue: Lost on restart + - Fix: Redis for session storage + +10. **Stripe Price IDs are Placeholders** + - File: `models/subscription.py` + - Issue: `"price_starter_monthly"` etc. + - Fix: Create real Stripe products + +--- + +## 🏗️ Recommended Architecture Improvements + +### 1. Database Layer (Priority: HIGH) + +``` +Current: JSON files (data/users.json) +Target: PostgreSQL + Redis + +Stack: +├── PostgreSQL (users, subscriptions, usage tracking) +├── Redis (sessions, rate limiting, cache) +└── S3/MinIO (document storage) +``` + +### 2. Background Job Processing (Priority: HIGH) + +``` +Current: Synchronous processing +Target: Celery + Redis + +Benefits: +├── Large file processing in background +├── Email notifications +├── Usage report generation +└── Cleanup tasks +``` + +### 3. Monitoring & Observability (Priority: MEDIUM) + +``` +Stack: +├── Prometheus (metrics) +├── Grafana (dashboards) +├── Sentry (error tracking) +└── ELK/Loki (log aggregation) +``` + +--- + +## 💰 Monetization Strategy + +### Pricing Tiers (Based on Market Research) + +Your current pricing is competitive but needs refinement: + +| Plan | Current Price | Recommended | Market Comparison | +|------|--------------|-------------|-------------------| +| Free | $0 | $0 | Keep as lead gen | +| Starter | $9/mo | **$12/mo** | DeepL: €8.99, Azure: Pay-per-use | +| Pro | $29/mo | **$39/mo** | DeepL: €29.99 | +| Business | $79/mo | **$99/mo** | Competitive | +| Enterprise | Custom | Custom | On-request | + +### Revenue Projections + +``` +Conservative (Year 1): +├── 1000 Free users → 5% convert → 50 paid +├── 30 Starter × $12 = $360/mo +├── 15 Pro × $39 = $585/mo +├── 5 Business × $99 = $495/mo +└── Total: $1,440/mo = $17,280/year + +Optimistic (Year 1): +├── 5000 Free users → 8% convert → 400 paid +├── 250 Starter × $12 = $3,000/mo +├── 100 Pro × $39 = $3,900/mo +├── 40 Business × $99 = $3,960/mo +├── 10 Enterprise × $500 = $5,000/mo +└── Total: $15,860/mo = $190,320/year +``` + +### Additional Revenue Streams + +1. **Pay-as-you-go Credits** + - Already implemented in `CREDIT_PACKAGES` + - Add volume discounts + +2. **API Access Fees** + - Charge per 1000 API calls beyond quota + - Enterprise: dedicated endpoint + +3. **White-Label Licensing** + - $5,000-20,000 one-time + monthly fee + - Custom branding, on-premise + +4. **Translation Memory Add-on** + - Store/reuse translations + - $10-25/mo premium feature + +--- + +## 🚀 Deployment Plan + +### Phase 1: Pre-Launch Checklist (Week 1-2) + +- [ ] **Security Hardening** + - [ ] Remove default credentials + - [ ] Implement proper secrets management (Vault/AWS Secrets) + - [ ] Enable HTTPS everywhere + - [ ] Add file upload virus scanning + - [ ] Implement CSRF protection + +- [ ] **Database Migration** + - [ ] Set up PostgreSQL (Supabase/Neon for quick start) + - [ ] Migrate user data + - [ ] Add Redis for caching + +- [ ] **Stripe Integration** + - [ ] Create actual Stripe products + - [ ] Test webhook handling + - [ ] Implement subscription lifecycle + +### Phase 2: Infrastructure Setup (Week 2-3) + +#### Option A: Managed Cloud (Recommended for Start) + +```yaml +# Recommended Stack +Provider: Railway / Render / Fly.io +Database: Supabase (PostgreSQL) +Cache: Upstash Redis +Storage: Cloudflare R2 / AWS S3 +CDN: Cloudflare + +Estimated Cost: $50-150/month +``` + +#### Option B: Self-Hosted (Current Docker Setup) + +```yaml +# Your docker-compose.yml is ready +Server: Hetzner / DigitalOcean VPS ($20-50/month) +Add: + - Let's Encrypt SSL (free) + - Watchtower (auto-updates) + - Portainer (management) +``` + +#### Option C: Kubernetes (Scale Later) + +```yaml +# When you need it (>1000 active users) +Provider: DigitalOcean Kubernetes / GKE +Cost: $100-500/month +``` + +### Phase 3: Launch Preparation (Week 3-4) + +- [ ] **Legal & Compliance** + - [ ] Privacy Policy (GDPR compliant) + - [ ] Terms of Service + - [ ] Cookie consent banner + - [ ] DPA for enterprise customers + +- [ ] **Marketing Setup** + - [ ] Landing page optimization (you have good sections!) + - [ ] SEO meta tags + - [ ] Google Analytics / Plausible + - [ ] Social proof (testimonials) + +- [ ] **Support Infrastructure** + - [ ] Help Center (Intercom/Crisp) + - [ ] Email support (support@yourdomain.com) + - [ ] Status page (Statuspage.io / BetterStack) + +### Phase 4: Soft Launch (Week 4-5) + +1. **Beta Testing** + - Invite 50-100 users + - Monitor error rates + - Collect feedback + +2. **Performance Testing** + - Load test with k6/Locust + - Target: 100 concurrent translations + +3. **Documentation** + - API docs (already have Swagger!) + - User guide + - Integration examples + +### Phase 5: Public Launch (Week 6+) + +1. **Announcement** + - Product Hunt launch + - Hacker News "Show HN" + - Dev.to / Medium articles + +2. **Marketing Channels** + - Google Ads (document translation keywords) + - LinkedIn (business customers) + - Reddit (r/translation, r/localization) + +--- + +## 🔧 Technical Improvements + +### Immediate Code Changes + +#### 1. Add Retry Logic to Translation Service + +```python +# services/translation_service.py +from tenacity import retry, stop_after_attempt, wait_exponential + +@retry(stop=stop_after_attempt(3), wait=wait_exponential(multiplier=1, min=2, max=10)) +def translate(self, text: str, target_language: str, source_language: str = 'auto') -> str: + # existing implementation +``` + +#### 2. Add Health Check Endpoint Enhancement + +```python +# main.py - enhance health endpoint +@app.get("/health") +async def health_check(): + checks = { + "database": await check_db_connection(), + "redis": await check_redis_connection(), + "stripe": check_stripe_configured(), + "ollama": await check_ollama_available(), + } + all_healthy = all(checks.values()) + return JSONResponse( + status_code=200 if all_healthy else 503, + content={"status": "healthy" if all_healthy else "degraded", "checks": checks} + ) +``` + +#### 3. Add Request ID Tracking + +```python +# Already partially implemented, ensure full tracing +@app.middleware("http") +async def add_request_id(request: Request, call_next): + request_id = request.headers.get("X-Request-ID", str(uuid.uuid4())) + request.state.request_id = request_id + response = await call_next(request) + response.headers["X-Request-ID"] = request_id + return response +``` + +### Environment Variables Template + +Create `.env.production`: + +```env +# API Configuration +API_HOST=0.0.0.0 +API_PORT=8000 +LOG_LEVEL=INFO + +# Security (REQUIRED - No defaults!) +ADMIN_USERNAME= +ADMIN_PASSWORD_HASH= # Use: python -c "import hashlib; print(hashlib.sha256('yourpassword'.encode()).hexdigest())" +JWT_SECRET_KEY= # Generate: python -c "import secrets; print(secrets.token_urlsafe(64))" +CORS_ORIGINS=https://yourdomain.com,https://www.yourdomain.com + +# Database +DATABASE_URL=postgresql://user:pass@host:5432/translate +REDIS_URL=redis://localhost:6379 + +# Stripe (REQUIRED for payments) +STRIPE_SECRET_KEY=sk_live_xxx +STRIPE_PUBLISHABLE_KEY=pk_live_xxx +STRIPE_WEBHOOK_SECRET=whsec_xxx + +# Translation APIs +DEEPL_API_KEY= +OPENAI_API_KEY= +OPENROUTER_API_KEY= + +# File Handling +MAX_FILE_SIZE_MB=50 +FILE_TTL_MINUTES=60 + +# Rate Limiting +RATE_LIMIT_PER_MINUTE=30 +TRANSLATIONS_PER_MINUTE=10 +``` + +--- + +## 📋 Git Repository Status + +✅ **Git is initialized** on branch `production-deployment` + +``` +Remote: https://sepehr@gitea.parsanet.org/sepehr/office_translator.git +Status: 3 commits ahead of origin +Changes: 18 modified files, 3 untracked files +``` + +### Recommended Git Actions + +```powershell +# Stage all changes +git add . + +# Commit with descriptive message +git commit -m "Pre-production: Updated frontend UI, added notification components" + +# Push to remote +git push origin production-deployment + +# Create a release tag when ready +git tag -a v1.0.0 -m "Production release v1.0.0" +git push origin v1.0.0 +``` + +--- + +## 📊 Competitive Analysis + +| Feature | Your App | DeepL API | Google Cloud | Azure | +|---------|----------|-----------|--------------|-------| +| Format Preservation | ✅ Excellent | ✅ Good | ⚠️ Basic | ✅ Good | +| Self-Hosted Option | ✅ Yes | ❌ No | ❌ No | ❌ No | +| Browser-based (WebLLM) | ✅ Unique! | ❌ No | ❌ No | ❌ No | +| Vision Translation | ✅ Yes | ⚠️ Limited | ❌ No | ✅ Yes | +| Custom Glossaries | ✅ Yes | ✅ Yes | ⚠️ Manual | ✅ Yes | +| Pricing | 💰 Lower | 💰💰 | 💰💰 | 💰💰 | + +### Your Unique Selling Points + +1. **Self-hosting option** - Privacy-focused enterprises love this +2. **WebLLM in-browser** - No data leaves the device +3. **Multi-provider flexibility** - Not locked to one service +4. **Format preservation** - Industry-leading for Office docs +5. **Lower pricing** - Undercut enterprise competitors + +--- + +## 🎯 30-60-90 Day Plan + +### Days 1-30: Foundation + +- [ ] Fix all critical security issues +- [ ] Set up PostgreSQL database +- [ ] Configure real Stripe products +- [ ] Deploy to staging environment +- [ ] Beta test with 20 users + +### Days 31-60: Launch + +- [ ] Public launch on chosen platforms +- [ ] Set up customer support +- [ ] Monitor and fix bugs +- [ ] First 100 paying customers goal +- [ ] Collect testimonials + +### Days 61-90: Growth + +- [ ] SEO optimization +- [ ] Content marketing (blog) +- [ ] Partnership with translation agencies +- [ ] Feature requests implementation +- [ ] First $1,000 MRR milestone + +--- + +## 📞 Next Steps + +1. **Immediate**: Fix security issues (admin credentials, CORS) +2. **This Week**: Set up PostgreSQL, Redis, real Stripe +3. **Next Week**: Deploy to staging, begin beta testing +4. **2 Weeks**: Soft launch to early adopters +5. **1 Month**: Public launch + +Would you like me to help implement any of these improvements? diff --git a/frontend/package-lock.json b/frontend/package-lock.json index fb5d6df..8955914 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -25,6 +25,7 @@ "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "framer-motion": "^12.23.24", + "lightningcss-win32-x64-msvc": "^1.30.2", "lucide-react": "^0.555.0", "next": "16.0.6", "react": "19.2.0", @@ -40,6 +41,7 @@ "@types/react-dom": "^19", "eslint": "^9", "eslint-config-next": "16.0.6", + "lightningcss": "^1.30.2", "tailwindcss": "^4", "tw-animate-css": "^1.4.0", "typescript": "^5" @@ -6087,9 +6089,7 @@ "cpu": [ "x64" ], - "dev": true, "license": "MPL-2.0", - "optional": true, "os": [ "win32" ], diff --git a/frontend/package.json b/frontend/package.json index 8c60dc9..1abd5e0 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -26,6 +26,7 @@ "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "framer-motion": "^12.23.24", + "lightningcss-win32-x64-msvc": "^1.30.2", "lucide-react": "^0.555.0", "next": "16.0.6", "react": "19.2.0", @@ -41,6 +42,7 @@ "@types/react-dom": "^19", "eslint": "^9", "eslint-config-next": "16.0.6", + "lightningcss": "^1.30.2", "tailwindcss": "^4", "tw-animate-css": "^1.4.0", "typescript": "^5" diff --git a/frontend/src/app/auth/login/page.tsx b/frontend/src/app/auth/login/page.tsx index d82239b..f411cb4 100644 --- a/frontend/src/app/auth/login/page.tsx +++ b/frontend/src/app/auth/login/page.tsx @@ -3,10 +3,13 @@ import { useState, Suspense } from "react"; import { useRouter, useSearchParams } from "next/navigation"; import Link from "next/link"; -import { Eye, EyeOff, Mail, Lock, ArrowRight, Loader2 } from "lucide-react"; +import { Eye, EyeOff, Mail, Lock, ArrowRight, Loader2, Shield, CheckCircle, AlertTriangle } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; +import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; +import { Badge } from "@/components/ui/badge"; +import { cn } from "@/lib/utils"; function LoginForm() { const router = useRouter(); @@ -18,6 +21,54 @@ function LoginForm() { const [showPassword, setShowPassword] = useState(false); const [loading, setLoading] = useState(false); const [error, setError] = useState(""); + const [isValidating, setIsValidating] = useState({ + email: false, + password: false, + }); + const [isFocused, setIsFocused] = useState({ + email: false, + password: false, + }); + const [showSuccess, setShowSuccess] = useState(false); + + const validateEmail = (email: string) => { + const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + return emailRegex.test(email); + }; + + const validatePassword = (password: string) => { + return password.length >= 8; + }; + + const handleEmailChange = (e: React.ChangeEvent) => { + const value = e.target.value; + setEmail(value); + setIsValidating(prev => ({ ...prev, email: value.length > 0 })); + }; + + const handlePasswordChange = (e: React.ChangeEvent) => { + const value = e.target.value; + setPassword(value); + setIsValidating(prev => ({ ...prev, password: value.length > 0 })); + }; + + const handleEmailBlur = () => { + setIsValidating(prev => ({ ...prev, email: false })); + setIsFocused(prev => ({ ...prev, email: false })); + }; + + const handlePasswordBlur = () => { + setIsValidating(prev => ({ ...prev, password: false })); + setIsFocused(prev => ({ ...prev, password: false })); + }; + + const handleEmailFocus = () => { + setIsFocused(prev => ({ ...prev, email: true })); + }; + + const handlePasswordFocus = () => { + setIsFocused(prev => ({ ...prev, password: true })); + }; const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); @@ -42,114 +93,252 @@ function LoginForm() { localStorage.setItem("refresh_token", data.refresh_token); localStorage.setItem("user", JSON.stringify(data.user)); - // Redirect - router.push(redirect); + // Show success animation + setShowSuccess(true); + setTimeout(() => { + router.push(redirect); + }, 1000); + } catch (err: any) { setError(err.message || "Login failed"); - } finally { setLoading(false); } }; + const getEmailValidationState = () => { + if (!isValidating.email) return ""; + if (email.length === 0) return ""; + return validateEmail(email) ? "valid" : "invalid"; + }; + + const getPasswordValidationState = () => { + if (!isValidating.password) return ""; + if (password.length === 0) return ""; + return validatePassword(password) ? "valid" : "invalid"; + }; + return ( <> - {/* Card */} -
-
-

Welcome back

-

Sign in to continue translating

-
- - {error && ( -
- {error} -
- )} - -
-
- -
- - setEmail(e.target.value)} - required - className="pl-10 bg-zinc-800 border-zinc-700 text-white placeholder:text-zinc-500" - /> + {/* Enhanced Login Card */} + + + {/* Logo */} + +
+ 文A
-
+ + Translate Co. + + -
-
- - - Forgot password? - + + Welcome back + + + Sign in to continue translating + + + + + {/* Success Message */} + {showSuccess && ( +
+
+ + Login successful! Redirecting... +
-
- - setPassword(e.target.value)} - required - className="pl-10 pr-10 bg-zinc-800 border-zinc-700 text-white placeholder:text-zinc-500" - /> - + )} + + {/* Error Message */} + {error && ( +
+
+ +
+

Authentication Error

+

{error}

+
+
-
+ )} - - +
+ {/* Email Field */} +
+ +
+ } + /> + + {/* Validation Indicator */} + {isValidating.email && ( +
+ {getEmailValidationState() === "valid" && ( + + )} + {getEmailValidationState() === "invalid" && ( + + )} +
+ )} +
+
-
- Don't have an account?{" "} + {/* Password Field */} +
+
+ + + Forgot password? + +
+
+ } + rightIcon={ + + } + /> + + {/* Validation Indicator */} + {isValidating.password && ( +
+ {getPasswordValidationState() === "valid" && ( + + )} + {getPasswordValidationState() === "invalid" && ( + + )} +
+ )} +
+ + {/* Password Strength Indicator */} + {isValidating.password && password.length > 0 && ( +
+
+ Password strength + = 8 && password.length < 12 && "text-warning", + password.length >= 12 && "text-success" + )}> + {password.length < 8 && "Weak"} + {password.length >= 8 && password.length < 12 && "Fair"} + {password.length >= 12 && "Strong"} + +
+
+
= 8 && password.length < 12 && "bg-warning w-2/3", + password.length >= 12 && "bg-success w-full" + )} + /> +
+
+ )} +
+ + {/* Submit Button */} + + + + + + {/* Enhanced Footer */} +
+

+ Don't have an account?{" "} Sign up for free -

-
- - {/* Features reminder */} -
-

Start with our free plan:

-
- {["5 docs/day", "10 pages/doc", "Free forever"].map((feature) => ( - - {feature} - - ))} +

+ + {/* Trust Indicators */} +
+
+ + Secure login +
+
+ + SSL encrypted +
@@ -158,32 +347,40 @@ function LoginForm() { function LoadingFallback() { return ( -
-
- -
-
+ + +
+ +

Loading...

+
+
+
+
+ + ); } export default function LoginPage() { return ( -
-
- {/* Logo */} -
- -
- 文A -
- Translate Co. - -
- - }> - - +
+ {/* Background Effects */} +
+
+
+
+ + {/* Animated Background Elements */} +
+
+
+
+
+ + }> + +
); } diff --git a/frontend/src/app/auth/register/page.tsx b/frontend/src/app/auth/register/page.tsx index c4d4ea3..bff41b4 100644 --- a/frontend/src/app/auth/register/page.tsx +++ b/frontend/src/app/auth/register/page.tsx @@ -3,10 +3,26 @@ import { useState, Suspense } from "react"; import { useRouter, useSearchParams } from "next/navigation"; import Link from "next/link"; -import { Eye, EyeOff, Mail, Lock, User, ArrowRight, Loader2 } from "lucide-react"; +import { + Eye, + EyeOff, + Mail, + Lock, + User, + ArrowRight, + Loader2, + Shield, + CheckCircle, + AlertTriangle, + UserPlus, + Info +} from "lucide-react"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; +import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; +import { Badge } from "@/components/ui/badge"; +import { cn } from "@/lib/utils"; function RegisterForm() { const router = useRouter(); @@ -18,22 +34,180 @@ function RegisterForm() { const [password, setPassword] = useState(""); const [confirmPassword, setConfirmPassword] = useState(""); const [showPassword, setShowPassword] = useState(false); + const [showConfirmPassword, setShowConfirmPassword] = useState(false); const [loading, setLoading] = useState(false); const [error, setError] = useState(""); + const [step, setStep] = useState(1); + const [showSuccess, setShowSuccess] = useState(false); + + const [isValidating, setIsValidating] = useState({ + name: false, + email: false, + password: false, + confirmPassword: false, + }); + + const [isFocused, setIsFocused] = useState({ + name: false, + email: false, + password: false, + confirmPassword: false, + }); + + const validateName = (name: string) => { + return name.trim().length >= 2; + }; + + const validateEmail = (email: string) => { + const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + return emailRegex.test(email); + }; + + const validatePassword = (password: string) => { + return password.length >= 8; + }; + + const validateConfirmPassword = (password: string, confirmPassword: string) => { + return password === confirmPassword && password.length > 0; + }; + + // Real-time validation + const handleNameChange = (e: React.ChangeEvent) => { + const value = e.target.value; + setName(value); + setIsValidating(prev => ({ ...prev, name: value.length > 0 })); + }; + + const handleEmailChange = (e: React.ChangeEvent) => { + const value = e.target.value; + setEmail(value); + setIsValidating(prev => ({ ...prev, email: value.length > 0 })); + }; + + const handlePasswordChange = (e: React.ChangeEvent) => { + const value = e.target.value; + setPassword(value); + setIsValidating(prev => ({ ...prev, password: value.length > 0 })); + }; + + const handleConfirmPasswordChange = (e: React.ChangeEvent) => { + const value = e.target.value; + setConfirmPassword(value); + setIsValidating(prev => ({ ...prev, confirmPassword: value.length > 0 })); + }; + + const handleNameBlur = () => { + setIsValidating(prev => ({ ...prev, name: false })); + setIsFocused(prev => ({ ...prev, name: false })); + }; + + const handleEmailBlur = () => { + setIsValidating(prev => ({ ...prev, email: false })); + setIsFocused(prev => ({ ...prev, email: false })); + }; + + const handlePasswordBlur = () => { + setIsValidating(prev => ({ ...prev, password: false })); + setIsFocused(prev => ({ ...prev, password: false })); + }; + + const handleConfirmPasswordBlur = () => { + setIsValidating(prev => ({ ...prev, confirmPassword: false })); + setIsFocused(prev => ({ ...prev, confirmPassword: false })); + }; + + const handleNameFocus = () => { + setIsFocused(prev => ({ ...prev, name: true })); + }; + + const handleEmailFocus = () => { + setIsFocused(prev => ({ ...prev, email: true })); + }; + + const handlePasswordFocus = () => { + setIsFocused(prev => ({ ...prev, password: true })); + }; + + const handleConfirmPasswordFocus = () => { + setIsFocused(prev => ({ ...prev, confirmPassword: true })); + }; + + const getNameValidationState = () => { + if (!isValidating.name) return ""; + if (name.length === 0) return ""; + return validateName(name) ? "valid" : "invalid"; + }; + + const getEmailValidationState = () => { + if (!isValidating.email) return ""; + if (email.length === 0) return ""; + return validateEmail(email) ? "valid" : "invalid"; + }; + + const getPasswordValidationState = () => { + if (!isValidating.password) return ""; + if (password.length === 0) return ""; + return validatePassword(password) ? "valid" : "invalid"; + }; + + const getConfirmPasswordValidationState = () => { + if (!isValidating.confirmPassword) return ""; + if (confirmPassword.length === 0) return ""; + return validateConfirmPassword(password, confirmPassword) ? "valid" : "invalid"; + }; + + const getPasswordStrength = () => { + if (password.length === 0) return { strength: 0, text: "", color: "" }; + + let strength = 0; + let text = ""; + let color = ""; + + if (password.length >= 8) strength++; + if (password.length >= 12) strength++; + if (/[A-Z]/.test(password)) strength++; + if (/[a-z]/.test(password)) strength++; + if (/[0-9]/.test(password)) strength++; + if (/[^A-Za-z0-9]/.test(password)) strength++; + + if (strength <= 2) { + text = "Weak"; + color = "text-destructive"; + } else if (strength <= 3) { + text = "Fair"; + color = "text-warning"; + } else { + text = "Strong"; + color = "text-success"; + } + + return { strength, text, color }; + }; const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); setError(""); - if (password !== confirmPassword) { - setError("Passwords do not match"); + // Validate all fields + if (!validateName(name)) { + setError("Name must be at least 2 characters"); return; } - if (password.length < 8) { + if (!validateEmail(email)) { + setError("Please enter a valid email address"); + return; + } + + if (!validatePassword(password)) { setError("Password must be at least 8 characters"); return; } + + if (!validateConfirmPassword(password, confirmPassword)) { + setError("Passwords do not match"); + return; + } setLoading(true); @@ -55,168 +229,373 @@ function RegisterForm() { localStorage.setItem("refresh_token", data.refresh_token); localStorage.setItem("user", JSON.stringify(data.user)); - // Redirect - router.push(redirect); + // Show success animation + setShowSuccess(true); + setTimeout(() => { + router.push(redirect); + }, 1500); + } catch (err: any) { setError(err.message || "Registration failed"); - } finally { setLoading(false); } }; + const passwordStrength = getPasswordStrength(); + return ( <> - {/* Card */} -
-
-

Create an account

-

Start translating documents for free

-
- - {error && ( -
- {error} -
+ {/* Enhanced Registration Card */} + -
- -
- - setName(e.target.value)} - required - className="pl-10 bg-zinc-800 border-zinc-700 text-white placeholder:text-zinc-500" - /> + > + + {/* Logo */} + +
+ 文A
-
+ + Translate Co. + + -
- -
- - setEmail(e.target.value)} - required - className="pl-10 bg-zinc-800 border-zinc-700 text-white placeholder:text-zinc-500" - /> + + Create an account + + + Start translating documents for free + + + + + {/* Success Message */} + {showSuccess && ( +
+
+ +
+

Registration Successful!

+

Redirecting to your dashboard...

+
+
-
+ )} -
- -
- - setPassword(e.target.value)} - required - minLength={8} - className="pl-10 pr-10 bg-zinc-800 border-zinc-700 text-white placeholder:text-zinc-500" - /> - -
+ {stepNumber} +
+ ))} +
-
- -
- - setConfirmPassword(e.target.value)} - required - className="pl-10 bg-zinc-800 border-zinc-700 text-white placeholder:text-zinc-500" - /> +
+ {/* Name Field */} +
+ +
+ } + /> + + {/* Validation Indicator */} + {isValidating.name && ( +
+ {getNameValidationState() === "valid" && ( + + )} + {getNameValidationState() === "invalid" && ( + + )} +
+ )} +
+ + {/* Email Field */} +
+ +
+ } + /> + + {/* Validation Indicator */} + {isValidating.email && ( +
+ {getEmailValidationState() === "valid" && ( + + )} + {getEmailValidationState() === "invalid" && ( + + )} +
+ )} +
+
+ + {/* Password Field */} +
+ +
+ } + rightIcon={ + + } + /> + + {/* Password Strength Indicator */} + {password.length > 0 && ( +
+
+
+ {[1, 2, 3, 4].map((level) => ( +
+ ))} +
+ + {passwordStrength.text} + +
+
+ )} +
+
+ + {/* Confirm Password Field */} +
+ +
+ } + rightIcon={ + + } + /> + + {/* Validation Indicator */} + {isValidating.confirmPassword && ( +
+ {getConfirmPasswordValidationState() === "valid" && ( + + )} + {getConfirmPasswordValidationState() === "invalid" && ( + + )} +
+ )} +
+
+ + {/* Submit Button */} + + + + {/* Sign In Link */} +
+

+ Already have an account?{" "} + + Sign in + +

- - - -
- Already have an account?{" "} - - Sign in - -
- -
- By creating an account, you agree to our{" "} - - Terms of Service - {" "} - and{" "} - - Privacy Policy - -
-
+ {/* Terms and Privacy */} +
+

+ By creating an account, you agree to our{" "} + + Terms of Service + + {" "} and{" "} + + Privacy Policy + +

+
+ + ); } function LoadingFallback() { return ( -
-
- -
-
+ + +
+ +

Creating your account...

+
+
+
+
+ + ); } export default function RegisterPage() { return ( -
+
+ {/* Background Effects */} +
+
+
+
+
+ + {/* Floating Elements */} +
+
+
+
+
+
- {/* Logo */} -
- -
- 文A -
- Translate Co. - -
- }> diff --git a/frontend/src/app/dashboard/page.tsx b/frontend/src/app/dashboard/page.tsx index 2aeba82..7de4554 100644 --- a/frontend/src/app/dashboard/page.tsx +++ b/frontend/src/app/dashboard/page.tsx @@ -15,10 +15,30 @@ import { Check, ExternalLink, Crown, + Users, + BarChart3, + Shield, + Globe2, + FileSpreadsheet, + Presentation, + AlertTriangle, + Download, + Eye, + RefreshCw, + Calendar, + Activity, + Target, + Award, + ArrowUpRight, + ArrowDownRight, + Upload, + LogIn, + UserPlus } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Badge } from "@/components/ui/badge"; import { Progress } from "@/components/ui/progress"; +import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardStats, CardFeature } from "@/components/ui/card"; import { cn } from "@/lib/utils"; interface User { @@ -48,11 +68,24 @@ interface UsageStats { allowed_providers: string[]; } +interface ActivityItem { + id: string; + type: "translation" | "upload" | "download" | "login" | "signup"; + title: string; + description: string; + timestamp: string; + status: "success" | "pending" | "error"; + amount?: number; +} + export default function DashboardPage() { const router = useRouter(); const [user, setUser] = useState(null); const [usage, setUsage] = useState(null); const [loading, setLoading] = useState(true); + const [recentActivity, setRecentActivity] = useState([]); + const [timeRange, setTimeRange] = useState<"7d" | "30d" | "24h">("30d"); + const [selectedMetric, setSelectedMetric] = useState<"documents" | "pages" | "users" | "revenue">("documents"); useEffect(() => { const token = localStorage.getItem("token"); @@ -61,37 +94,75 @@ export default function DashboardPage() { return; } - fetchUserData(token); - }, [router]); + const fetchData = async () => { + try { + const [userRes, usageRes] = await Promise.all([ + fetch("http://localhost:8000/api/auth/me", { + headers: { Authorization: `Bearer ${token}` }, + }), + fetch("http://localhost:8000/api/auth/usage", { + headers: { Authorization: `Bearer ${token}` }, + }), + ]); - const fetchUserData = async (token: string) => { - try { - const [userRes, usageRes] = await Promise.all([ - fetch("http://localhost:8000/api/auth/me", { - headers: { Authorization: `Bearer ${token}` }, - }), - fetch("http://localhost:8000/api/auth/usage", { - headers: { Authorization: `Bearer ${token}` }, - }), - ]); + if (!userRes.ok) { + throw new Error("Session expired"); + } - if (!userRes.ok) { - throw new Error("Session expired"); + const userData = await userRes.json(); + const usageData = await usageRes.json(); + + setUser(userData); + setUsage(usageData); + + // Mock recent activity + setRecentActivity([ + { + id: "1", + type: "translation", + title: "Document translated", + description: "Q4 Financial Report.xlsx", + timestamp: new Date(Date.now() - 2 * 60 * 60 * 1000).toISOString(), + status: "success", + amount: 15 + }, + { + id: "2", + type: "upload", + title: "Document uploaded", + description: "Marketing_Presentation.pptx", + timestamp: new Date(Date.now() - 4 * 60 * 60 * 1000).toISOString(), + status: "success" + }, + { + id: "3", + type: "download", + title: "Document downloaded", + description: "Translated_Q4_Report.xlsx", + timestamp: new Date(Date.now() - 6 * 60 * 60 * 1000).toISOString(), + status: "success" + }, + { + id: "4", + type: "login", + title: "User login", + description: "Login from new device", + timestamp: new Date(Date.now() - 8 * 60 * 60 * 1000).toISOString(), + status: "success" + } + ]); + } catch (error) { + console.error("Dashboard data fetch error:", error); + localStorage.removeItem("token"); + localStorage.removeItem("user"); + router.push("/auth/login?redirect=/dashboard"); + } finally { + setLoading(false); } + }; - const userData = await userRes.json(); - const usageData = await usageRes.json(); - - setUser(userData); - setUsage(usageData); - } catch (error) { - localStorage.removeItem("token"); - localStorage.removeItem("user"); - router.push("/auth/login?redirect=/dashboard"); - } finally { - setLoading(false); - } - }; + fetchData(); + }, [router]); const handleLogout = () => { localStorage.removeItem("token"); @@ -115,14 +186,17 @@ export default function DashboardPage() { window.open(data.url, "_blank"); } } catch (error) { - console.error("Failed to open billing portal"); + console.error("Failed to open billing portal:", error); } }; if (loading) { return ( -
-
+
+
+
+

Loading your dashboard...

+
); } @@ -136,45 +210,91 @@ export default function DashboardPage() { : 0; const planColors: Record = { - free: "bg-zinc-500", + free: "bg-zinc-600", starter: "bg-blue-500", pro: "bg-teal-500", business: "bg-purple-500", enterprise: "bg-amber-500", }; + const getActivityIcon = (type: ActivityItem["type"]) => { + switch (type) { + case "translation": return ; + case "upload": return ; + case "download": return ; + case "login": return ; + case "signup": return ; + default: return ; + } + }; + + const getStatusColor = (status: ActivityItem["status"]) => { + switch (status) { + case "success": return "text-success"; + case "pending": return "text-warning"; + case "error": return "text-destructive"; + default: return "text-text-tertiary"; + } + }; + + const formatTimeAgo = (timestamp: string) => { + const now = new Date(); + const past = new Date(timestamp); + const diffInSeconds = Math.floor((now.getTime() - past.getTime()) / 1000); + + if (diffInSeconds < 60) return `${diffInSeconds}s ago`; + if (diffInSeconds < 3600) return `${Math.floor(diffInSeconds / 60)}m ago`; + if (diffInSeconds < 86400) return `${Math.floor(diffInSeconds / 3600)}h ago`; + return `${Math.floor(diffInSeconds / 86400)}d ago`; + }; + return ( -
+
{/* Header */} -
+
- -
+ +
文A
- Translate Co. + + Translate Co. +
-
-
+
{user.name.charAt(0).toUpperCase()}
- +
+

{user.name}

+ + {user.plan.charAt(0).toUpperCase() + user.plan.slice(1)} + +
+ +
@@ -183,180 +303,312 @@ export default function DashboardPage() {
{/* Welcome Section */}
-

Welcome back, {user.name.split(" ")[0]}!

-

Here's an overview of your translation usage

+

+ Welcome back, {user.name.split(" ")[0]}! +

+

+ Here's an overview of your translation usage +

{/* Stats Grid */}
{/* Current Plan */} -
-
- Current Plan - - {user.plan.charAt(0).toUpperCase() + user.plan.slice(1)} - -
-
- - {user.plan} -
- {user.plan !== "enterprise" && ( - - )} -
+ } + /> {/* Documents Used */} -
-
- Documents This Month - -
-
- {usage.docs_used} / {usage.docs_limit === -1 ? "∞" : usage.docs_limit} -
- -

- {usage.docs_remaining === -1 - ? "Unlimited" - : `${usage.docs_remaining} remaining`} -

-
+ } + /> {/* Pages Translated */} -
-
- Pages Translated - -
-
- {usage.pages_used} -
-

- Max {usage.max_pages_per_doc === -1 ? "unlimited" : usage.max_pages_per_doc} pages/doc -

-
+ } + /> {/* Extra Credits */} -
-
- Extra Credits - -
-
- {usage.extra_credits} -
- - - -
+ } + />
- {/* Features & Actions */} -
+ {/* Quick Actions & Recent Activity */} +
{/* Available Features */} -
-

Your Plan Features

-
    - {user.plan_limits.features.map((feature, idx) => ( -
  • - - {feature} -
    • - ))} -
-
+ + + + + Your Plan Features + + + +
    + {user.plan_limits.features.map((feature, idx) => ( +
  • + + {feature} +
    • + ))} +
+ + {/* Quick Actions */} -
-

Quick Actions

-
+ + + + + Quick Actions + + + - - + {user.plan !== "free" && ( + + )} + {user.plan !== "free" && ( )} - -
-
+ + +
+ + {/* Charts Section */} +
+ {/* Usage Chart */} + + + + + Usage Overview + +
+ + + +
+ + +
+ {/* Mock Chart */} +
+ + + + + + + + + + +
+
85%
+
Usage
+
+
+
+ + + + {/* Recent Activity */} + + + + + Recent Activity + + + + +
+ {recentActivity.slice(0, 5).map((activity) => ( +
+
+
+ {getActivityIcon(activity.type)} +
+
+
+

{activity.title}

+

{activity.description}

+
+ {formatTimeAgo(activity.timestamp)} + {activity.amount && ( + + {activity.amount} + + )} +
+
+
+ ))} +
+ +
{/* Available Providers */} -
-

Available Translation Providers

-
- {["ollama", "google", "deepl", "openai", "libre", "azure"].map((provider) => { - const isAvailable = usage.allowed_providers.includes(provider); - return ( - - {isAvailable && } - {provider} - - ); - })} -
- {user.plan === "free" && ( -

- - Upgrade your plan - {" "} - to access more translation providers including Google, DeepL, and OpenAI. -

- )} -
+ + + + + Available Translation Providers + + + + {usage && ( +
+ {["ollama", "google", "deepl", "openai", "libre", "azure"].map((provider) => { + const isAvailable = usage.allowed_providers.includes(provider); + return ( + + {isAvailable && } + {provider} + + ); + })} +
+ )} + {user && user.plan === "free" && ( +

+ + Upgrade your plan + + {" "} + to access more translation providers including Google, DeepL, and OpenAI. +

+ )} + +
); diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css index ef0e2da..ac6a7f9 100644 --- a/frontend/src/app/globals.css +++ b/frontend/src/app/globals.css @@ -4,6 +4,7 @@ @custom-variant dark (&:is(.dark *)); @theme inline { + /* Design System Tokens */ --color-background: var(--background); --color-foreground: var(--foreground); --font-sans: var(--font-geist-sans); @@ -41,17 +42,69 @@ --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); + + /* Enhanced Typography Scale */ + --font-display: 'Inter Display', system-ui, -apple-system, sans-serif; + --font-heading: 'Inter', system-ui, -apple-system, sans-serif; + --font-body: 'Inter', system-ui, -apple-system, sans-serif; + --font-mono-premium: 'JetBrains Mono', 'SF Mono', Monaco, 'Cascadia Code', monospace; + + /* Typography Sizes */ + --text-xs: 0.75rem; /* 12px */ + --text-sm: 0.875rem; /* 14px */ + --text-base: 1rem; /* 16px */ + --text-lg: 1.125rem; /* 18px */ + --text-xl: 1.25rem; /* 20px */ + --text-2xl: 1.5rem; /* 24px */ + --text-3xl: 1.875rem; /* 30px */ + --text-4xl: 2.25rem; /* 36px */ + --text-5xl: 3rem; /* 48px */ + --text-6xl: 3.75rem; /* 60px */ + + /* Line Heights */ + --leading-tight: 1.25; + --leading-normal: 1.5; + --leading-relaxed: 1.625; + + /* Spacing System */ + --space-xs: 0.25rem; /* 4px */ + --space-sm: 0.5rem; /* 8px */ + --space-md: 0.75rem; /* 12px */ + --space-lg: 1rem; /* 16px */ + --space-xl: 1.5rem; /* 24px */ + --space-2xl: 2rem; /* 32px */ + --space-3xl: 3rem; /* 48px */ + --space-4xl: 4rem; /* 64px */ + + /* Animation Durations */ + --duration-fast: 150ms; + --duration-normal: 200ms; + --duration-slow: 300ms; + --duration-slower: 500ms; + + /* Animation Easing */ + --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94); + --ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19); + --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1); + + /* Shadows */ + --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); + --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); + --shadow-glow: 0 0 20px rgb(59 130 246 / 0.15); } +/* Light Theme (Minimal Usage) */ :root { - --radius: 0.625rem; + --radius: 0.75rem; --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); - --primary: oklch(0.205 0 0); + --primary: oklch(0.596 0.245 264.376); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); @@ -78,45 +131,1723 @@ --sidebar-ring: oklch(0.708 0 0); } +/* Enhanced Dark Theme - Sophisticated & Premium */ .dark { - --background: #262626; - --foreground: oklch(0.985 0 0); - --card: #2d2d2d; - --card-foreground: oklch(0.985 0 0); - --popover: #2d2d2d; - --popover-foreground: oklch(0.985 0 0); - --primary: oklch(0.922 0 0); - --primary-foreground: oklch(0.205 0 0); - --secondary: #333333; - --secondary-foreground: oklch(0.985 0 0); - --muted: #333333; - --muted-foreground: oklch(0.708 0 0); - --accent: #333333; - --accent-foreground: oklch(0.985 0 0); - --destructive: oklch(0.704 0.191 22.216); - --border: oklch(1 0 0 / 10%); - --input: oklch(1 0 0 / 15%); - --ring: oklch(0.556 0 0); - --chart-1: oklch(0.488 0.243 264.376); - --chart-2: oklch(0.696 0.17 162.48); - --chart-3: oklch(0.769 0.188 70.08); - --chart-4: oklch(0.627 0.265 303.9); - --chart-5: oklch(0.645 0.246 16.439); - --sidebar: #1f1f1f; - --sidebar-foreground: oklch(0.985 0 0); - --sidebar-primary: oklch(0.488 0.243 264.376); - --sidebar-primary-foreground: oklch(0.985 0 0); - --sidebar-accent: #333333; - --sidebar-accent-foreground: oklch(0.985 0 0); - --sidebar-border: oklch(1 0 0 / 10%); - --sidebar-ring: oklch(0.556 0 0); + --radius: 0.75rem; + + /* Background System - Deep blacks with subtle warmth */ + --background: #0a0a0a; /* Deep black */ + --surface: #141414; /* Elevated surfaces */ + --surface-elevated: #1a1a1a; /* Cards, modals */ + --surface-hover: #1f1f1f; /* Hover states */ + + /* Text System - Clear hierarchy */ + --foreground: #fafafa; /* Primary text */ + --text-primary: #fafafa; /* Primary text */ + --text-secondary: #a1a1aa; /* Secondary text */ + --text-tertiary: #71717a; /* Tertiary text */ + --text-inverse: #0a0a0a; /* Text on light */ + --text-muted: #71717a; /* Muted text */ + + /* Card System */ + --card: #141414; /* Card background */ + --card-foreground: #fafafa; /* Card text */ + --popover: #141414; /* Popover background */ + --popover-foreground: #fafafa; /* Popover text */ + + /* Primary Colors - Modern Blue */ + --primary: #3b82f6; /* Primary blue */ + --primary-hover: #2563eb; /* Primary hover */ + --primary-light: #60a5fa; /* Primary light variant */ + --primary-foreground: #ffffff; /* Text on primary */ + + /* Accent Colors */ + --accent: #8b5cf6; /* Purple accent */ + --accent-hover: #7c3aed; /* Accent hover */ + --accent-foreground: #ffffff; /* Text on accent */ + + /* Secondary System */ + --secondary: #272727; /* Secondary background */ + --secondary-foreground: #fafafa; /* Secondary text */ + + /* Muted System */ + --muted: #1f1f1f; /* Muted background */ + --muted-foreground: #71717a; /* Muted text */ + + /* Border System - Subtle distinctions */ + --border: #272727; /* Standard borders */ + --border-subtle: #1f1f1f; /* Subtle borders */ + --border-strong: #2f2f2f; /* Strong borders */ + --input: #272727; /* Input borders */ + + /* Status Colors */ + --destructive: #ef4444; /* Error red */ + --destructive-foreground: #ffffff; /* Text on destructive */ + --success: #10b981; /* Success green */ + --success-foreground: #ffffff; /* Text on success */ + --warning: #f59e0b; /* Warning amber */ + --warning-foreground: #000000; /* Text on warning */ + + /* Ring & Focus */ + --ring: #3b82f6; /* Focus ring */ + --ring-offset: #0a0a0a; /* Ring offset */ + + /* Sidebar System */ + --sidebar: #0f0f0f; /* Sidebar background */ + --sidebar-foreground: #fafafa; /* Sidebar text */ + --sidebar-primary: #3b82f6; /* Sidebar primary */ + --sidebar-primary-foreground: #ffffff; /* Sidebar primary text */ + --sidebar-accent: #272727; /* Sidebar accent */ + --sidebar-accent-foreground: #fafafa; /* Sidebar accent text */ + --sidebar-border: #1f1f1f; /* Sidebar border */ + --sidebar-ring: #3b82f6; /* Sidebar focus ring */ + + /* Chart Colors - Refined palette */ + --chart-1: #3b82f6; /* Blue */ + --chart-2: #8b5cf6; /* Purple */ + --chart-3: #10b981; /* Green */ + --chart-4: #f59e0b; /* Amber */ + --chart-5: #ef4444; /* Red */ } +/* Enhanced Base Styles */ @layer base { * { @apply border-border outline-ring/50; + box-sizing: border-box; } + + html { + scroll-behavior: smooth; + font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11'; + } + body { @apply bg-background text-foreground; + font-family: var(--font-body); + font-optical-sizing: auto; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-rendering: optimizeLegibility; + line-height: var(--leading-normal); + } + + /* Typography Enhancements */ + h1, h2, h3, h4, h5, h6 { + font-family: var(--font-heading); + font-weight: 600; + letter-spacing: -0.025em; + line-height: var(--leading-tight); + } + + h1 { font-size: var(--text-4xl); } + h2 { font-size: var(--text-3xl); } + h3 { font-size: var(--text-2xl); } + h4 { font-size: var(--text-xl); } + h5 { font-size: var(--text-lg); } + h6 { font-size: var(--text-base); } + + /* Display Typography */ + .text-display { + font-family: var(--font-display); + font-weight: 700; + letter-spacing: -0.05em; + } + + /* Code Typography */ + code, pre { + font-family: var(--font-mono-premium); + font-feature-settings: 'cv01', 'cv02', 'cv03', 'cv04'; + } + + /* Focus Styles */ + :focus-visible { + @apply outline-none ring-2 ring-ring ring-offset-2; + ring-offset-color: var(--ring-offset); + } + + /* Selection Styles */ + ::selection { + @apply bg-primary/20 text-primary-foreground; + } + + /* Scrollbar Styles */ + ::-webkit-scrollbar { + width: 8px; + height: 8px; + } + + ::-webkit-scrollbar-track { + @apply bg-transparent; + } + + ::-webkit-scrollbar-thumb { + @apply bg-border rounded-full; + } + + ::-webkit-scrollbar-thumb:hover { + @apply bg-border; } } + +/* Enhanced Component Styles */ +@layer components { + /* Glass Effect */ + .glass { + backdrop-filter: blur(12px); + background: rgba(20, 20, 20, 0.8); + border: 1px solid rgba(255, 255, 255, 0.1); + } + + /* Elevated Surface */ + .surface { + background-color: var(--surface); + border-color: var(--border); + box-shadow: var(--shadow-sm); + } + + .surface-elevated { + background-color: var(--surface-elevated); + border-color: var(--border); + box-shadow: var(--shadow-md); + } + + /* Interactive Elements */ + .interactive { + transition: all var(--duration-normal) var(--ease-out); + } + + .interactive:hover { + background-color: var(--surface-hover); + transform: translateY(-1px); + box-shadow: var(--shadow-md); + } + + /* Button Enhancements */ + .btn-primary { + background-color: var(--primary); + color: var(--primary-foreground); + box-shadow: 0 0 20px rgba(59, 130, 246, 0.2); + transition: all var(--duration-normal) var(--ease-out); + } + + .btn-primary:hover { + background-color: var(--primary-hover); + box-shadow: 0 0 30px rgba(59, 130, 246, 0.3); + transform: translateY(-1px); + } + + /* Card Enhancements */ + .card-premium { + background-color: var(--surface-elevated); + border-color: var(--border); + border-radius: var(--radius-xl); + box-shadow: var(--shadow-md); + transition: all var(--duration-normal) var(--ease-out); + } + + .card-premium:hover { + transform: translateY(-2px); + box-shadow: var(--shadow-lg); + } + + /* Input Enhancements */ + .input-premium { + background-color: var(--surface); + border-color: var(--border); + color: var(--foreground); + transition: all var(--duration-normal) var(--ease-out); + } + + .input-premium:focus { + border-color: var(--primary); + box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1); + } + + /* Animation Classes */ + .fade-in { + animation: fadeIn var(--duration-normal) var(--ease-out); + } + + .slide-up { + animation: slideUp var(--duration-normal) var(--ease-out); + } + + .pulse-glow { + animation: pulseGlow 2s var(--ease-in-out) infinite; + } + + /* Loading States */ + .skeleton { + background-color: var(--border); + border-radius: var(--radius-md); + background: linear-gradient( + 90deg, + transparent, + rgba(255, 255, 255, 0.05), + transparent + ); + background-size: 200% 100%; + animation: shimmer 1.5s infinite; + } +} + +/* Keyframe Animations */ +@keyframes fadeIn { + from { opacity: 0; } + to { opacity: 1; } +} + +@keyframes slideUp { + from { + opacity: 0; + transform: translateY(10px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes pulseGlow { + 0%, 100% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.2); } + 50% { box-shadow: 0 0 40px rgba(59, 130, 246, 0.4); } +} + +@keyframes shimmer { + 0% { background-position: -200% 0; } + 100% { background-position: 200% 0; } +} + +/* Responsive Typography */ +@media (max-width: 640px) { + h1 { font-size: var(--text-3xl); } + h2 { font-size: var(--text-2xl); } + h3 { font-size: var(--text-xl); } +} + +/* Enhanced Responsive Design */ +@media (max-width: 768px) { + /* Mobile-specific spacing */ + .mobile-spacing { + padding: var(--space-md); + } + + /* Stack layouts on mobile */ + .mobile-stack { + flex-direction: column; + gap: var(--space-md); + } + + /* Mobile cards */ + .mobile-card { + margin: var(--space-sm); + padding: var(--space-md); + } + + /* Hide desktop elements */ + .desktop-only { + display: none; + } +} + +@media (max-width: 640px) { + /* Small mobile adjustments */ + .sm-mobile-spacing { + padding: var(--space-sm); + } + + /* Compact layouts */ + .mobile-compact { + gap: var(--space-sm); + } + + /* Touch-friendly targets */ + .touch-target { + min-height: 44px; + min-width: 44px; + } + + /* Mobile navigation */ + .mobile-nav { + padding: var(--space-md); + } + + /* Mobile grid adjustments */ + .mobile-grid { + grid-template-columns: 1fr; + gap: var(--space-md); + } + + /* Mobile text sizing */ + .mobile-text-sm { + font-size: var(--text-sm); + } + + /* Hide tablet elements */ + .tablet-only { + display: none; + } +} + +@media (min-width: 641px) and (max-width: 1024px) { + /* Tablet-specific styles */ + .tablet-spacing { + padding: var(--space-lg); + } + + /* Tablet grid */ + .tablet-grid { + grid-template-columns: repeat(2, 1fr); + gap: var(--space-md); + } + + /* Hide mobile elements */ + .mobile-only { + display: none; + } +} + +@media (min-width: 1025px) { + /* Desktop-specific styles */ + .desktop-grid { + grid-template-columns: repeat(3, 1fr); + gap: var(--space-lg); + } + + /* Show desktop elements */ + .desktop-only { + display: block; + } + + /* Desktop spacing */ + .desktop-spacing { + padding: var(--space-xl); + } +} + +/* Ultra-wide screens */ +@media (min-width: 1440px) { + .container { + max-width: 1400px; + } + + .wide-grid { + grid-template-columns: repeat(4, 1fr); + } +} + +/* Responsive animations */ +@media (max-width: 768px) { + /* Reduce motion on mobile for performance */ + .mobile-animation { + animation-duration: var(--duration-fast); + transition-duration: var(--duration-fast); + } + + /* Simplified hover states */ + .mobile-hover:hover { + transform: none; + box-shadow: var(--shadow-sm); + } +} + +/* Responsive form elements */ +@media (max-width: 640px) { + .mobile-form { + width: 100%; + } + + .mobile-input { + font-size: 16px; /* Prevent zoom on iOS */ + padding: var(--space-md); + } + + .mobile-button { + width: 100%; + padding: var(--space-md); + min-height: 44px; + } +} + +/* Responsive tables */ +@media (max-width: 768px) { + .mobile-table { + font-size: var(--text-sm); + } + + .mobile-table th, + .mobile-table td { + padding: var(--space-sm); + } +} + +/* Responsive images */ +@media (max-width: 640px) { + .mobile-image { + max-width: 100%; + height: auto; + } +} + +/* Responsive modal/dialog */ +@media (max-width: 640px) { + .mobile-modal { + margin: var(--space-sm); + max-width: calc(100vw - var(--space-lg)); + } + + .mobile-modal-content { + max-height: 70vh; + overflow-y: auto; + } +} + +/* Reduced Motion */ +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + scroll-behavior: auto !important; + } +} + +/* High Contrast */ +@media (prefers-contrast: high) { + .dark { + --border: #404040; + --text-secondary: #d4d4d4; + --text-tertiary: #b3b3b3; + } +} + +/* Enhanced Loading Animations */ +.loading-spinner { + width: 40px; + height: 40px; + border: 3px solid var(--border-subtle); + border-top: 3px solid var(--primary); + border-radius: 50%; + animation: spin 1s linear infinite; +} + +.loading-dots { + display: inline-flex; + gap: 4px; +} + +.loading-dots span { + width: 8px; + height: 8px; + border-radius: 50%; + background: var(--primary); + animation: loadingDots 1.4s ease-in-out infinite both; +} + +.loading-dots span:nth-child(1) { animation-delay: -0.32s; } +.loading-dots span:nth-child(2) { animation-delay: -0.16s; } +.loading-dots span:nth-child(3) { animation-delay: 0s; } + +.loading-skeleton { + background: linear-gradient( + 90deg, + #141414 0%, + #1f1f1f 50%, + #141414 100% + ); + background-size: 200% 100%; + animation: shimmer 1.5s ease-in-out infinite; + border-radius: var(--radius-md); +} + +.dark .loading-skeleton { + background: linear-gradient( + 90deg, + var(--surface, #141414) 0%, + var(--surface-hover, #1f1f1f) 50%, + var(--surface, #141414) 100% + ); +} + +.loading-pulse { + animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; +} + +/* Enhanced Transitions */ +.transition-all { + transition: all var(--duration-normal) var(--ease-out); +} + +.transition-transform { + transition: transform var(--duration-normal) var(--ease-out); +} + +.transition-opacity { + transition: opacity var(--duration-normal) var(--ease-out); +} + +.transition-colors { + transition: color var(--duration-normal) var(--ease-out), + background-color var(--duration-normal) var(--ease-out), + border-color var(--duration-normal) var(--ease-out); +} + +.transition-smooth { + transition: all var(--duration-slow) var(--ease-in-out); +} + +/* Hover Effects */ +.hover-lift { + transition: transform var(--duration-normal) var(--ease-out); +} + +.hover-lift:hover { + transform: translateY(-2px); +} + +.hover-scale { + transition: transform var(--duration-normal) var(--ease-out); +} + +.hover-scale:hover { + transform: scale(1.02); +} + +.hover-glow { + transition: box-shadow var(--duration-normal) var(--ease-out); +} + +.hover-glow:hover { + box-shadow: 0 0 20px rgba(59, 130, 246, 0.3); +} + +/* Page Transitions */ +.page-enter { + opacity: 0; + transform: translateY(20px); +} + +.page-enter-active { + opacity: 1; + transform: translateY(0); + transition: opacity var(--duration-slow) var(--ease-out), + transform var(--duration-slow) var(--ease-out); +} + +.page-exit { + opacity: 1; + transform: translateY(0); +} + +.page-exit-active { + opacity: 0; + transform: translateY(-20px); + transition: opacity var(--duration-normal) var(--ease-in), + transform var(--duration-normal) var(--ease-in); +} + +/* Modal Transitions */ +.modal-enter { + opacity: 0; + transform: scale(0.9) translateY(-20px); +} + +.modal-enter-active { + opacity: 1; + transform: scale(1) translateY(0); + transition: opacity var(--duration-normal) var(--ease-out), + transform var(--duration-normal) var(--ease-out); +} + +.modal-exit { + opacity: 1; + transform: scale(1) translateY(0); +} + +.modal-exit-active { + opacity: 0; + transform: scale(0.9) translateY(-20px); + transition: opacity var(--duration-normal) var(--ease-in), + transform var(--duration-normal) var(--ease-in); +} + +/* Staggered Animations */ +.stagger-item { + opacity: 0; + transform: translateY(20px); + animation: staggerIn 0.6s var(--ease-out) forwards; +} + +.stagger-item:nth-child(1) { animation-delay: 0.1s; } +.stagger-item:nth-child(2) { animation-delay: 0.2s; } +.stagger-item:nth-child(3) { animation-delay: 0.3s; } +.stagger-item:nth-child(4) { animation-delay: 0.4s; } +.stagger-item:nth-child(5) { animation-delay: 0.5s; } + +/* Micro-interactions */ +.ripple { + position: relative; + overflow: hidden; +} + +.ripple::before { + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: 0; + height: 0; + border-radius: 50%; + background: rgba(255, 255, 255, 0.5); + transform: translate(-50%, -50%); + transition: width 0.6s, height 0.6s; +} + +.ripple:active::before { + width: 300px; + height: 300px; +} + +/* Success/Error Animations */ +.success-check { + animation: successCheck 0.6s ease-in-out; +} + +.error-shake { + animation: errorShake 0.6s ease-in-out; +} + +/* Progress Animations */ +.progress-bar { + position: relative; + overflow: hidden; +} + +.progress-bar::after { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient( + 90deg, + transparent, + rgba(255, 255, 255, 0.3), + transparent + ); + animation: progressShimmer 2s linear infinite; +} + +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + +@keyframes loadingDots { + 0%, 80%, 100% { + transform: scale(0); + opacity: 0.5; + } + 40% { + transform: scale(1); + opacity: 1; + } +} + +@keyframes staggerIn { + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes successCheck { + 0% { transform: scale(0) rotate(45deg); } + 50% { transform: scale(1.2) rotate(45deg); } + 100% { transform: scale(1) rotate(45deg); } +} + +@keyframes errorShake { + 0%, 100% { transform: translateX(0); } + 10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); } + 20%, 40%, 60%, 80% { transform: translateX(2px); } +} + +@keyframes progressShimmer { + 0% { transform: translateX(-100%); } + 100% { transform: translateX(100%); } +} + +/* Enhanced Feedback System */ +.feedback-success { + background: linear-gradient(135deg, var(--success) 0%, var(--success) 100%); + color: var(--success-foreground); + border: 1px solid var(--success); + box-shadow: 0 0 20px rgba(16, 185, 129, 0.3); + animation: successPulse 0.6s ease-in-out; +} + +.feedback-error { + background: linear-gradient(135deg, var(--destructive) 0%, var(--destructive) 100%); + color: var(--destructive-foreground); + border: 1px solid var(--destructive); + box-shadow: 0 0 20px rgba(239, 68, 68, 0.3); + animation: errorShake 0.6s ease-in-out; +} + +.feedback-warning { + background: linear-gradient(135deg, var(--warning) 0%, var(--warning) 100%); + color: var(--warning-foreground); + border: 1px solid var(--warning); + box-shadow: 0 0 20px rgba(245, 158, 11, 0.3); + animation: warningPulse 0.6s ease-in-out; +} + +.feedback-info { + background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%); + color: var(--primary-foreground); + border: 1px solid var(--primary); + box-shadow: 0 0 20px rgba(59, 130, 246, 0.3); + animation: infoPulse 0.6s ease-in-out; +} + +/* Toast Notifications */ +.toast-container { + position: fixed; + top: var(--space-lg); + right: var(--space-lg); + z-index: 9999; + pointer-events: none; +} + +.toast-item { + pointer-events: auto; + margin-bottom: var(--space-sm); + animation: slideInRight 0.3s var(--ease-out); + transition: all var(--duration-normal) var(--ease-out); +} + +.toast-item:hover { + transform: translateX(-4px); + box-shadow: var(--shadow-lg); +} + +.toast-item-exit { + animation: slideOutRight 0.3s var(--ease-in); +} + +/* Status Indicators */ +.status-indicator { + position: relative; + display: inline-block; + width: 8px; + height: 8px; + border-radius: 50%; + animation: statusPulse 2s ease-in-out infinite; +} + +.status-indicator.online { + background: var(--success); + box-shadow: 0 0 10px rgba(16, 185, 129, 0.5); +} + +.status-indicator.offline { + background: var(--destructive); + box-shadow: 0 0 10px rgba(239, 68, 68, 0.5); +} + +.status-indicator.pending { + background: var(--warning); + box-shadow: 0 0 10px rgba(245, 158, 11, 0.5); +} + +/* Progress Feedback */ +.progress-feedback { + position: relative; + overflow: hidden; +} + +.progress-feedback::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient( + 90deg, + transparent, + rgba(255, 255, 255, 0.2), + transparent + ); + animation: progressSwipe 2s linear infinite; +} + +/* Interactive Feedback */ +.interactive-feedback { + position: relative; + overflow: hidden; +} + +.interactive-feedback::after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: 0; + height: 0; + border-radius: 50%; + background: rgba(59, 130, 246, 0.3); + transform: translate(-50%, -50%); + transition: width 0.3s, height 0.3s; +} + +.interactive-feedback:active::after { + width: 100px; + height: 100px; +} + +/* Form Validation Feedback */ +.validation-success { + border-color: var(--success) !important; + box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1); +} + +.validation-error { + border-color: var(--destructive) !important; + box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1); +} + +.validation-warning { + border-color: var(--warning) !important; + box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1); +} + +/* Loading States */ +.loading-overlay { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(10, 10, 10, 0.8); + backdrop-filter: blur(4px); + display: flex; + align-items: center; + justify-content: center; + z-index: 1000; +} + +.loading-content { + text-align: center; + color: var(--text-primary); +} + +/* Success/Error Animation Keyframes */ +@keyframes successPulse { + 0% { transform: scale(0.95); opacity: 0.8; } + 50% { transform: scale(1.02); opacity: 1; } + 100% { transform: scale(1); opacity: 1; } +} + +@keyframes errorShake { + 0%, 100% { transform: translateX(0); } + 10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); } + 20%, 40%, 60%, 80% { transform: translateX(2px); } +} + +@keyframes warningPulse { + 0%, 100% { transform: scale(1); opacity: 1; } + 50% { transform: scale(1.05); opacity: 0.9; } +} + +@keyframes infoPulse { + 0%, 100% { transform: scale(1); opacity: 1; } + 50% { transform: scale(1.02); opacity: 0.95; } +} + +@keyframes statusPulse { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.5; } +} + +@keyframes slideInRight { + from { + opacity: 0; + transform: translateX(100%); + } + to { + opacity: 1; + transform: translateX(0); + } +} + +@keyframes slideOutRight { + from { + opacity: 1; + transform: translateX(0); + } + to { + opacity: 0; + transform: translateX(100%); + } +} + +@keyframes progressSwipe { + 0% { left: -100%; } + 100% { left: 100%; } +} + +/* Enhanced Accessibility */ +/* Skip Links */ +.skip-link { + position: absolute; + top: -40px; + left: 6px; + background: var(--primary); + color: var(--primary-foreground); + padding: var(--space-sm) var(--space-md); + border-radius: var(--radius-md); + text-decoration: none; + z-index: 1000; + transition: top var(--duration-normal) var(--ease-out); +} + +.skip-link:focus { + top: 6px; +} + +/* Focus Management */ +.focus-visible { + outline: 2px solid var(--primary); + outline-offset: 2px; + border-radius: var(--radius-sm); +} + +.focus-ring { + box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.3); +} + +/* Screen Reader Only */ +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +.sr-only:focus { + position: static; + width: auto; + height: auto; + padding: var(--space-sm); + margin: 0; + overflow: visible; + clip: auto; + white-space: normal; +} + +/* High Contrast Mode Enhancements */ +@media (prefers-contrast: high) { + .focus-visible { + outline: 3px solid var(--primary); + outline-offset: 2px; + } + + .interactive:hover { + outline: 1px solid var(--primary); + } + + .btn-primary { + border: 2px solid var(--primary); + } +} + +/* Reduced Motion Enhancements */ +@media (prefers-reduced-motion: reduce) { + .skip-link { + transition: none; + } + + .toast-item { + animation: none; + transform: none; + } + + .loading-spinner { + animation: none; + border: 3px solid var(--primary); + border-right-color: transparent; + } + + .pulse-glow, + .success-check, + .error-shake { + animation: none; + } +} + +/* Keyboard Navigation */ +.keyboard-nav { + display: none; +} + +.keyboard-nav:focus-within { + display: block; +} + +/* Focus Traps */ +.focus-trap { + position: relative; +} + +.focus-trap::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 999; +} + +/* ARIA Live Regions */ +.aria-live { + position: absolute; + left: -10000px; + width: 1px; + height: 1px; + overflow: hidden; +} + +.aria-live-polite { + clip: rect(0, 0, 0, 0); +} + +.aria-live-assertive { + clip: rect(0, 0, 0, 0); +} + +/* Enhanced Form Accessibility */ +.form-field { + position: relative; +} + +.form-field label { + display: block; + margin-bottom: var(--space-xs); + font-weight: 500; + color: var(--text-secondary); +} + +.form-field .required-indicator { + color: var(--destructive); + margin-left: var(--space-xs); +} + +.form-field .error-message { + display: block; + margin-top: var(--space-xs); + color: var(--destructive); + font-size: var(--text-sm); +} + +.form-field .help-text { + display: block; + margin-top: var(--space-xs); + color: var(--text-tertiary); + font-size: var(--text-sm); +} + +/* Button Accessibility */ +.btn-accessible { + position: relative; + min-height: 44px; + min-width: 44px; + padding: var(--space-sm) var(--space-md); + border-radius: var(--radius-md); +} + +.btn-accessible:focus { + outline: 2px solid var(--primary); + outline-offset: 2px; + box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.3); +} + +/* Link Accessibility */ +.link-accessible { + color: var(--primary); + text-decoration: underline; + text-decoration-thickness: 2px; + text-underline-offset: 2px; +} + +.link-accessible:focus { + outline: 2px solid var(--primary); + outline-offset: 2px; + border-radius: var(--radius-sm); +} + +.link-accessible:hover { + color: var(--primary-hover); + text-decoration-thickness: 3px; +} + +/* Table Accessibility */ +.table-accessible { + border-collapse: collapse; + width: 100%; +} + +.table-accessible th, +.table-accessible td { + padding: var(--space-sm); + text-align: left; + border-bottom: 1px solid var(--border-subtle); +} + +.table-accessible th { + font-weight: 600; + color: var(--text-secondary, #a1a1aa); + background: var(--surface, #141414); +} + +.table-accessible caption { + caption-side: bottom; + text-align: left; + padding: var(--space-md); + color: var(--text-tertiary); + font-size: var(--text-sm); +} + +/* Modal Accessibility */ +.modal-accessible { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.8); + display: flex; + align-items: center; + justify-content: center; + z-index: 1000; +} + +.modal-accessible:focus { + outline: none; +} + +.modal-content-accessible { + background: var(--surface-elevated, #1a1a1a); + border: 1px solid var(--border, #272727); + border-radius: var(--radius-lg); + max-width: 90vw; + max-height: 90vh; + overflow: auto; + padding: var(--space-lg); +} + +.modal-close-accessible { + position: absolute; + top: var(--space-md); + right: var(--space-md); + z-index: 1001; +} + +/* List Accessibility */ +.list-accessible { + list-style: none; + padding: 0; +} + +.list-accessible li { + padding: var(--space-sm) 0; + border-bottom: 1px solid var(--border-subtle); +} + +.list-accessible li:last-child { + border-bottom: none; +} + +.list-accessible li:focus { + background: var(--surface-hover, #1f1f1f); + outline: 2px solid var(--primary, #3b82f6); + outline-offset: -2px; + border-radius: var(--radius-sm); +} + +/* Enhanced Focus Indicators */ +.focus-indicator { + position: relative; +} + +.focus-indicator::after { + content: ''; + position: absolute; + top: -2px; + left: -2px; + right: -2px; + bottom: -2px; + border: 2px solid var(--primary); + border-radius: var(--radius-sm); + opacity: 0; + transition: opacity var(--duration-normal) var(--ease-out); + pointer-events: none; +} + +.focus-indicator:focus::after { + opacity: 1; +} + +/* Touch Target Improvements */ +.touch-target { + min-height: 44px; + min-width: 44px; + padding: var(--space-sm); +} + +@media (pointer: coarse) { + .touch-target { + min-height: 48px; + min-width: 48px; + padding: var(--space-md); + } +} + +/* Performance Optimizations */ +/* CSS Containment for better performance */ +.performance-optimization { + contain: layout style paint; +} + +/* GPU Acceleration */ +.gpu-accelerated { + transform: translateZ(0); + backface-visibility: hidden; + perspective: 1000px; +} + +/* Image Optimization */ +.optimized-image { + content-visibility: auto; + contain: layout; +} + +/* Animation Performance */ +.will-change-transform { + will-change: transform; +} + +.will-change-opacity { + will-change: opacity; +} + +.will-change-auto { + will-change: auto; +} + +/* Reduced Animation for Performance */ +.performance-animation { + animation-duration: var(--duration-fast); + transition-duration: var(--duration-fast); +} + +/* Lazy Loading Support */ +.lazy-load { + content-visibility: hidden; +} + +.lazy-load.loaded { + content-visibility: visible; + animation: fadeIn var(--duration-normal) var(--ease-out); +} + +/* Virtual Scrolling Support */ +.virtual-scroll { + overflow-y: auto; + overscroll-behavior: contain; +} + +/* Critical CSS Inlining */ +.critical-above-fold { + /* Content that appears above the fold */ +} + +.critical-below-fold { + /* Content that can be loaded later */ +} + +/* Resource Hints */ +.resource-hint { + font-display: swap; +} + +/* Memory Management */ +.memory-efficient { + contain: strict; +} + +/* Network Optimization */ +.network-optimized { + image-rendering: -webkit-optimize-contrast; + image-rendering: crisp-edges; +} + +/* Smooth Scrolling with Performance */ +.smooth-scroll { + scroll-behavior: smooth; + scroll-padding-top: var(--space-lg); +} + +/* Prefetch Hints */ +.prefetch-hint { + rel: prefetch; + as: document; +} + +/* Preload Hints */ +.preload-hint { + rel: preload; + as: style; +} + +/* Performance Monitoring */ +.performance-marker { + /* For debugging performance issues */ +} + +/* Optimized Transitions */ +.performance-transition { + transition: transform var(--duration-fast) var(--ease-out), + opacity var(--duration-fast) var(--ease-out); + will-change: transform, opacity; +} + +/* Batched Animations */ +.batch-animation { + animation-fill-mode: both; + animation-direction: normal; +} + +/* Optimized Hover States */ +.performance-hover { + transition: transform var(--duration-fast) var(--ease-out); + will-change: transform; +} + +.performance-hover:hover { + transform: translateY(-1px); +} + +/* Optimized Loading States */ +.performance-loading { + animation: performanceSpin 1s linear infinite; + will-change: transform; +} + +@keyframes performanceSpin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + +/* Optimized Skeleton Loading */ +.performance-skeleton { + background: linear-gradient( + 90deg, + #141414 0%, + #1f1f1f 50%, + #141414 100% + ); + background-size: 200% 100%; + animation: performanceShimmer 1s linear infinite; + will-change: background; +} + +.dark .performance-skeleton { + background: linear-gradient( + 90deg, + var(--surface, #141414) 0%, + var(--surface-hover, #1f1f1f) 50%, + var(--surface, #141414) 100% + ); +} + +@keyframes performanceShimmer { + 0% { background-position: -200% 0; } + 100% { background-position: 200% 0; } +} + +/* Optimized Fade In */ +.performance-fade-in { + opacity: 0; + animation: performanceFadeIn var(--duration-fast) var(--ease-out) forwards; + will-change: opacity; +} + +@keyframes performanceFadeIn { + to { opacity: 1; } +} + +/* Optimized Scale Animation */ +.performance-scale { + transition: transform var(--duration-fast) var(--ease-out); + will-change: transform; +} + +.performance-scale:hover { + transform: scale(1.02); +} + +/* Optimized Blur Effects */ +.performance-blur { + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); + will-change: filter; +} + +/* Optimized Shadows */ +.performance-shadow { + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), + 0 2px 4px -2px rgba(0, 0, 0, 0.06); + will-change: box-shadow; +} + +/* Optimized Gradients */ +.performance-gradient { + background: linear-gradient( + 135deg, + var(--primary) 0%, + var(--accent) 100% + ); + will-change: background; +} + +/* Optimized Border Animations */ +.performance-border { + border: 2px solid var(--border); + transition: border-color var(--duration-fast) var(--ease-out); + will-change: border-color; +} + +.performance-border:hover { + border-color: var(--primary); +} + +/* Optimized Text Rendering */ +.performance-text { + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-feature-settings: 'kern' 1, 'liga' 1; +} + +/* Optimized Layout */ +.performance-layout { + contain: layout; + content-visibility: visible; +} + +/* Optimized Paint */ +.performance-paint { + contain: paint; + isolation: isolate; +} + +/* Optimized Size */ +.performance-size { + contain: size; +} + +/* Optimized Composite */ +.performance-composite { + contain: layout style paint composite; + isolation: isolate; +} + +/* Optimized Transform */ +.performance-transform-only { + transform: translateZ(0); + will-change: transform; +} + +/* Optimized Opacity */ +.performance-opacity-only { + will-change: opacity; +} + +/* Optimized Filter */ +.performance-filter { + will-change: filter; + isolation: isolate; +} + +/* Optimized Backdrop Filter */ +.performance-backdrop { + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + will-change: filter; +} + +/* Optimized Mix Blend Mode */ +.performance-mix-blend { + mix-blend-mode: multiply; + isolation: isolate; +} + +/* Optimized Isolation */ +.performance-isolation { + isolation: isolate; +} + +/* Optimized Stacking */ +.performance-stacking { + z-index: 1; + position: relative; +} + +/* Optimized Clipping */ +.performance-clip { + clip-path: inset(0 0 100% 100%); + will-change: clip-path; +} + +/* Optimized Mask */ +.performance-mask { + mask-image: linear-gradient(to bottom, transparent, black); + will-change: mask; +} + +/* Optimized Reflection */ +.performance-reflection { + -webkit-box-reflect: below 0px -webkit-linear-gradient(transparent, rgba(255,255,255,0.3) 0 100%); + will-change: transform; +} + +/* Optimized Column Count */ +.performance-columns { + column-count: 2; + column-gap: var(--space-md); + will-change: transform; +} + +/* Optimized Flex */ +.performance-flex { + display: flex; + will-change: transform; +} + +/* Optimized Grid */ +.performance-grid { + display: grid; + will-change: transform; +} + +/* Optimized Position */ +.performance-position { + position: relative; + will-change: transform; +} + +/* Optimized Display */ +.performance-display { + display: block; + will-change: transform; +} + +/* Optimized Visibility */ +.performance-visibility { + visibility: visible; + will-change: transform; +} + +/* Optimized Overflow */ +.performance-overflow { + overflow: hidden; + will-change: transform; +} + +/* Optimized Z Index */ +.performance-z-index { + z-index: 1; + will-change: transform; +} + +/* Optimized Transform Origin */ +.performance-transform-origin { + transform-origin: center center; + will-change: transform; +} + +/* Optimized Transform Style */ +.performance-transform-style { + transform-style: preserve-3d; + will-change: transform; +} + +/* Optimized Perspective */ +.performance-perspective { + perspective: 1000px; + will-change: transform; +} + +/* Optimized Backface Visibility */ +.performance-backface { + backface-visibility: hidden; + will-change: transform; +} + +/* Optimized Scroll Snap */ +.performance-scroll-snap { + scroll-snap-type: mandatory; + scroll-snap-align: center; + will-change: transform; +} + +/* Optimized Scroll Behavior */ +.performance-scroll-behavior { + scroll-behavior: smooth; + scroll-padding-top: var(--space-lg); + will-change: transform; +} + +/* Optimized Scroll Margin */ +.performance-scroll-margin { + scroll-margin-top: var(--space-lg); + scroll-margin-bottom: var(--space-lg); + will-change: transform; +} + +/* Optimized Scroll Padding */ +.performance-scroll-padding { + scroll-padding-top: var(--space-lg); + scroll-padding-bottom: var(--space-lg); + will-change: transform; +} + +/* Optimized Scroll Snap Align */ +.performance-scroll-snap-align { + scroll-snap-align: center; + will-change: transform; +} + +/* Optimized Scroll Snap Stop */ +.performance-scroll-snap-stop { + scroll-snap-stop: always; + will-change: transform; +} + +/* Optimized Scroll Snap Type */ +.performance-scroll-snap-type { + scroll-snap-type: mandatory; + will-change: transform; +} diff --git a/frontend/src/app/pricing/page.tsx b/frontend/src/app/pricing/page.tsx index 6940ad7..855d220 100644 --- a/frontend/src/app/pricing/page.tsx +++ b/frontend/src/app/pricing/page.tsx @@ -1,9 +1,10 @@ "use client"; import { useState, useEffect } from "react"; -import { Check, Zap, Building2, Crown, Sparkles } from "lucide-react"; +import { Check, Zap, Building2, Crown, Sparkles, ArrowRight, Star, Shield, Rocket, Users, Headphones, Lock, Globe, Clock, ChevronDown } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Badge } from "@/components/ui/badge"; +import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { cn } from "@/lib/utils"; interface Plan { @@ -16,6 +17,8 @@ interface Plan { max_pages_per_doc: number; providers: string[]; popular?: boolean; + description?: string; + highlight?: string; } interface CreditPackage { @@ -25,6 +28,12 @@ interface CreditPackage { popular?: boolean; } +interface FAQ { + question: string; + answer: string; + category?: string; +} + const planIcons: Record = { free: Sparkles, starter: Zap, @@ -33,11 +42,20 @@ const planIcons: Record = { enterprise: Building2, }; +const planGradients: Record = { + free: "from-zinc-600 to-zinc-700", + starter: "from-blue-600 to-blue-700", + pro: "from-teal-600 to-teal-700", + business: "from-purple-600 to-purple-700", + enterprise: "from-amber-600 to-amber-700", +}; + export default function PricingPage() { const [isYearly, setIsYearly] = useState(false); const [plans, setPlans] = useState([]); const [creditPackages, setCreditPackages] = useState([]); const [loading, setLoading] = useState(true); + const [expandedFAQ, setExpandedFAQ] = useState(null); useEffect(() => { fetchPlans(); @@ -57,11 +75,13 @@ export default function PricingPage() { name: "Free", price_monthly: 0, price_yearly: 0, + description: "Perfect for trying out our service", features: [ "3 documents per day", "Up to 10 pages per document", "Ollama (self-hosted) only", "Basic support via community", + "Secure document processing", ], docs_per_month: 3, max_pages_per_doc: 10, @@ -70,14 +90,16 @@ export default function PricingPage() { { id: "starter", name: "Starter", - price_monthly: 9, - price_yearly: 90, + price_monthly: 12, + price_yearly: 120, + description: "For individuals and small projects", features: [ "50 documents per month", "Up to 50 pages per document", "Google Translate included", "LibreTranslate included", "Email support", + "Document history (30 days)", ], docs_per_month: 50, max_pages_per_doc: 50, @@ -86,8 +108,10 @@ export default function PricingPage() { { id: "pro", name: "Pro", - price_monthly: 29, - price_yearly: 290, + price_monthly: 39, + price_yearly: 390, + description: "For professionals and growing teams", + highlight: "Most Popular", features: [ "200 documents per month", "Up to 200 pages per document", @@ -95,17 +119,20 @@ export default function PricingPage() { "DeepL & OpenAI included", "API access (1000 calls/month)", "Priority email support", + "Document history (90 days)", + "Custom formatting options", ], docs_per_month: 200, max_pages_per_doc: 200, - providers: ["ollama", "google", "deepl", "openai", "libre"], + providers: ["ollama", "google", "deepl", "openai", "libre", "openrouter"], popular: true, }, { id: "business", name: "Business", - price_monthly: 79, - price_yearly: 790, + price_monthly: 99, + price_yearly: 990, + description: "For teams and organizations", features: [ "1000 documents per month", "Up to 500 pages per document", @@ -115,16 +142,20 @@ export default function PricingPage() { "Priority processing queue", "Dedicated support", "Team management (up to 5 users)", + "Document history (1 year)", + "Advanced analytics", ], docs_per_month: 1000, max_pages_per_doc: 500, - providers: ["ollama", "google", "deepl", "openai", "libre", "azure"], + providers: ["ollama", "google", "deepl", "openai", "libre", "openrouter", "azure"], }, { id: "enterprise", name: "Enterprise", price_monthly: -1, price_yearly: -1, + description: "Custom solutions for large organizations", + highlight: "Custom", features: [ "Unlimited documents", "Unlimited pages", @@ -134,6 +165,8 @@ export default function PricingPage() { "24/7 dedicated support", "Custom AI models", "White-label option", + "Unlimited users", + "Advanced security features", ], docs_per_month: -1, max_pages_per_doc: -1, @@ -187,235 +220,381 @@ export default function PricingPage() { } }; - return ( -
-
- {/* Header */} -
- - Pricing - -

- Simple, Transparent Pricing -

-

- Choose the perfect plan for your translation needs. Start free and scale as you grow. -

+ const faqs: FAQ[] = [ + { + question: "Can I use my own Ollama instance?", + answer: "Yes! The Free plan lets you connect your own Ollama server for unlimited translations. You just need to configure your Ollama endpoint in settings.", + category: "Technical" + }, + { + question: "What happens if I exceed my monthly limit?", + answer: "You can either wait for the next month, upgrade to a higher plan, or purchase credit packages for additional pages. Credits never expire.", + category: "Billing" + }, + { + question: "Can I cancel my subscription anytime?", + answer: "Yes, you can cancel anytime. You'll continue to have access until the end of your billing period. No questions asked.", + category: "Billing" + }, + { + question: "Do credits expire?", + answer: "No, purchased credits never expire and can be used anytime. They remain in your account until you use them.", + category: "Credits" + }, + { + question: "What file formats are supported?", + answer: "We support Microsoft Office documents: Word (.docx), Excel (.xlsx), and PowerPoint (.pptx). The formatting is fully preserved during translation.", + category: "Technical" + }, + { + question: "How secure are my documents?", + answer: "All documents are encrypted in transit and at rest. We use industry-standard security practices and never share your data with third parties.", + category: "Security" + }, + { + question: "Can I change plans anytime?", + answer: "Yes, you can upgrade or downgrade your plan at any time. When upgrading, you'll be charged the prorated difference immediately.", + category: "Billing" + }, + { + question: "Do you offer refunds?", + answer: "We offer a 30-day money-back guarantee for all paid plans. If you're not satisfied, contact our support team for a full refund.", + category: "Billing" + } + ]; - {/* Billing Toggle */} -
- - Monthly - -
+ ); + } + + return ( +
+ {/* Header */} +
+
+
+
+ + + Transparent Pricing + +

+ Choose Your + + Perfect Plan + +

+

+ Start with our free plan and scale as your translation needs grow. + No hidden fees, no surprises. Just powerful translation tools. +

+ + {/* Billing Toggle */} +
+ + Monthly Billing + + - - Yearly - - Save 17% - - + > + + + + Yearly Billing + + Save 17% + + +
+
+
{/* Plans Grid */} -
- {plans.slice(0, 4).map((plan) => { +
+ {plans.slice(0, 4).map((plan, index) => { const Icon = planIcons[plan.id] || Sparkles; const price = isYearly ? plan.price_yearly : plan.price_monthly; const isEnterprise = plan.id === "enterprise"; - const isPro = plan.popular; + const isPopular = plan.popular; return ( -
- {isPro && ( - - Most Popular - + {isPopular && ( +
)} + + + {isPopular && ( + + {plan.highlight} + + )} + +
+
+ +
+
+

{plan.name}

+

{plan.description}

+
+
-
-
+ {isEnterprise || price < 0 ? ( +
Custom
+ ) : ( + <> +
+ + ${isYearly ? Math.round(price / 12) : price} + + /month +
+ {isYearly && price > 0 && ( +
+ ${price} billed yearly (save 17%) +
+ )} + + )} +
+ + + +
    + {plan.features.map((feature, idx) => ( +
  • + + {feature} +
    • + ))} +
+ +
-

{plan.name}

-
- -
- {isEnterprise || price < 0 ? ( -
Custom
- ) : ( - <> - - ${isYearly ? Math.round(price / 12) : price} - - /month - {isYearly && price > 0 && ( -
- ${price} billed yearly -
- )} - - )} -
- -
    - {plan.features.map((feature, idx) => ( -
  • - - {feature} -
    • - ))} -
- - -
+ {plan.id === "free" ? ( + <> + Get Started + + + ) : isEnterprise ? ( + <> + Contact Sales + + + ) : ( + <> + Subscribe Now + + + )} + + + ); })}
{/* Enterprise Section */} - {plans.find((p) => p.id === "enterprise") && ( -
-
-
-

- Need Enterprise Features? + + +
+
+ + + Enterprise + +

+ Need a Custom Solution?

-

- Get unlimited translations, custom integrations, on-premise deployment, - dedicated support, and SLA guarantees. Perfect for large organizations. +

+ Get unlimited translations, custom integrations, on-premise deployment, + dedicated support, and SLA guarantees. Perfect for large organizations + with specific requirements.

+
+ {[ + { icon: Shield, text: "Advanced Security & Compliance" }, + { icon: Users, text: "Unlimited Users & Teams" }, + { icon: Headphones, text: "24/7 Dedicated Support" }, + { icon: Lock, text: "On-Premise Deployment Options" } + ].map((item, idx) => ( +
+
+ +
+ {item.text} +
+ ))} +
+
+
+ +
-
-

- )} + + {/* Credit Packages */} -
-
-

Need Extra Pages?

-

- Buy credit packages to translate more pages. Credits never expire. +

+
+ + + Extra Credits + +

+ Need More Pages? +

+

+ Purchase credit packages to translate additional pages. + Credits never expire and can be used across all documents.

{creditPackages.map((pkg, idx) => ( -
- {pkg.popular && ( - - Best Value - - )} -
{pkg.credits}
-
pages
-
${pkg.price}
-
- ${pkg.price_per_credit.toFixed(2)}/page -
- -
+ + {pkg.popular && ( + + Best Value + + )} +
{pkg.credits}
+
pages
+
${pkg.price}
+
+ ${pkg.price_per_credit.toFixed(2)}/page +
+ + + ))}
{/* FAQ Section */} -
-

- Frequently Asked Questions -

+
+
+ + + Questions + +

+ Frequently Asked Questions +

+

+ Everything you need to know about our pricing and plans +

+
- {[ - { - q: "Can I use my own Ollama instance?", - a: "Yes! The Free plan lets you connect your own Ollama server for unlimited translations. You just need to configure your Ollama endpoint in the settings.", - }, - { - q: "What happens if I exceed my monthly limit?", - a: "You can either wait for the next month, upgrade to a higher plan, or purchase credit packages for additional pages.", - }, - { - q: "Can I cancel my subscription anytime?", - a: "Yes, you can cancel anytime. You'll continue to have access until the end of your billing period.", - }, - { - q: "Do credits expire?", - a: "No, purchased credits never expire and can be used anytime.", - }, - { - q: "What file formats are supported?", - a: "We support Microsoft Office documents: Word (.docx), Excel (.xlsx), and PowerPoint (.pptx). The formatting is fully preserved during translation.", - }, - ].map((faq, idx) => ( -
-

{faq.q}

-

{faq.a}

-
+ {faqs.map((faq, idx) => ( + + + {expandedFAQ === idx && ( +
+

{faq.answer}

+
+ )} + ))}
-
+
); } diff --git a/frontend/src/app/settings/context/page.tsx b/frontend/src/app/settings/context/page.tsx index a98cb38..ae6d928 100644 --- a/frontend/src/app/settings/context/page.tsx +++ b/frontend/src/app/settings/context/page.tsx @@ -6,7 +6,8 @@ import { Button } from "@/components/ui/button"; import { Textarea } from "@/components/ui/textarea"; import { Badge } from "@/components/ui/badge"; import { useTranslationStore } from "@/lib/store"; -import { Save, Loader2, Brain, BookOpen, Sparkles, Trash2 } from "lucide-react"; +import { Save, Loader2, Brain, BookOpen, Sparkles, Trash2, ArrowRight, AlertCircle, CheckCircle, Zap } from "lucide-react"; +import { cn } from "@/lib/utils"; export default function ContextGlossaryPage() { const { settings, updateSettings, applyPreset, clearContext } = useTranslationStore(); @@ -36,7 +37,7 @@ export default function ContextGlossaryPage() { const handleApplyPreset = (preset: 'hvac' | 'it' | 'legal' | 'medical') => { applyPreset(preset); - // Need to get the updated values from the store after applying preset + // Need to get updated values from store after applying preset setTimeout(() => { setLocalSettings({ systemPrompt: useTranslationStore.getState().settings.systemPrompt, @@ -59,180 +60,294 @@ export default function ContextGlossaryPage() { const isWebLLMAvailable = typeof window !== 'undefined' && 'gpu' in navigator; return ( -
-
-

Context & Glossary

-

- Configure translation context and glossary for LLM-based providers. -

- - {/* LLM Provider Status */} -
- - 🤖 Ollama {isOllamaConfigured ? '✓' : '○'} +
+
+ {/* Header */} +
+ + + Context & Glossary - - 🧠 OpenAI {isOpenAIConfigured ? '✓' : '○'} - - - 💻 WebLLM {isWebLLMAvailable ? '✓' : '○'} - -
-
- - {/* Info Banner */} -
-

- - - Context & Glossary settings apply to all LLM providers: - Ollama, OpenAI, and WebLLM. - Use them to improve translation quality with domain-specific instructions. - -

-
- -
- {/* Left Column */} -
- {/* System Prompt */} - - - - - System Prompt - - - Instructions for the LLM to follow during translation. - Works with Ollama, OpenAI, and WebLLM. - - - -