velvet-ui

byAlex Zain

Create a FULLY WORKING production-level AI SaaS website exactly like 8080.ai with identical UI, UX, features, and system logic. This must NOT be a demo. It must be fully functional, scalable, and deployable. ━━━━━━━━━━━━━━━━━━━━━━━ 🔷 BRAND NAME: Carlo AI (or modern AI SaaS name) ━━━━━━━━━━━━━━━━━━━━━━━ 🔷 UI/UX (EXACT CLONE STYLE): * Dark futuristic neon UI (black + purple/blue gradient glow) * Glassmorphism cards + smooth hover effects * Sidebar navigation (like 8080.ai) * Animated buttons, loading skeletons * Clean dashboard layout * Mobile + desktop fully responsive * Smooth transitions (no lag) ━━━━━━━━━━━━━━━━━━━━━━━ 🔷 CORE SYSTEM (MATCH 8080.ai EXACTLY): * Multiple AI tools dashboard * Each tool page has: • Input box • Generate button • Output section (copy/download) * Tool categories section * Search tools feature * Save history per user * Real-time generation UI * Loading animation with progress ━━━━━━━━━━━━━━━━━━━━━━━ 🔷 AUTH SYSTEM: * Email/password login & signup * Google login (optional) * User dashboard after login * Session persistence ━━━━━━━━━━━━━━━━━━━━━━━ 🔷 CREDIT SYSTEM: * New users get 3 FREE credits * Each AI generation = 1 credit * Show credits in navbar/dashboard * Block usage when credits = 0 ━━━━━━━━━━━━━━━━━━━━━━━ 🔷 PREMIUM SYSTEM: * Show premium lock popup after free credits * Pricing plans (₹49 / ₹99 / custom) * Unlock ALL tools after upgrade ━━━━━━━━━━━━━━━━━━━━━━━ 🔷 PAYMENT SYSTEM (UPI + QR): * Show QR code dynamically * UPI ID: 6361867162@ybl * Payment page UI (clean modal) * Field: "Enter UTR ID" * Button: "Verify Payment" ━━━━━━━━━━━━━━━━━━━━━━━ 🔷 🔥 SMART AUTO UTR VERIFICATION (IMPORTANT): Build intelligent UTR verification system: OPTION A (SMART LOGIC): * User enters UTR ID * Check: • Length (12–16 digits) • Format validation * Prevent duplicate UTR usage * Store in database OPTION B (SEMI-AUTO REAL SYSTEM): * Integrate Razorpay / Cashfree webhook (if possible) * Match: • UTR ID • Amount paid * If matched → auto unlock premium OPTION C (HYBRID BEST): * Instant temporary unlock (5 min) * Admin verifies in backend * If valid → permanent premium ━━━━━━━━━━━━━━━━━━━━━━━ 🔷 DATABASE STRUCTURE: Users: * id * email * credits * premium (true/false) * created_at Payments: * user_id * utr_id * status (pending/approved/rejected) * timestamp History: * user_id * input * output * tool_used ━━━━━━━━━━━━━━━━━━━━━━━ 🔷 ADMIN PANEL (ADVANCED LIKE 8080.ai): Create secure admin dashboard: 1. USER CONTROL: * View all users * Ban / delete users * Edit credits * See premium users 2. PAYMENT CONTROL: * View UTR submissions * Approve / reject payments * Auto upgrade user after approval 3. ANALYTICS: * Total users * Daily active users * Revenue stats * Usage stats 4. TOOL CONTROL: * Enable/disable tools * Add new tools 5. CONTENT MODERATION: * View generated content * Delete content ━━━━━━━━━━━━━━━━━━━━━━━ 🔷 SECURITY: * Protect API routes * Prevent bypass of premium * Validate all inputs * Anti-spam system * Rate limiting ━━━━━━━━━━━━━━━━━━━━━━━ 🔷 TECH STACK (MODERN): Frontend: * React / Next.js Backend: * Firebase / Supabase Auth: * Firebase Auth Database: * Firestore / Supabase DB Hosting: * Vercel / Netlify ━━━━━━━━━━━━━━━━━━━━━━━ 🔷 LIVE DEPLOYMENT: * Fully deploy website live * Fast loading speed * SEO optimized * Domain ready ━━━━━━━━━━━━━━━━━━━━━━━ 🔷 EXTRA PRO FEATURES: * Tool search bar * Categories filter * Dark/light toggle * Notifications system * Profile page * Settings page ━━━━━━━━━━━━━━━━━━━━━━━ 🔷 FINAL OUTPUT: * Full working SaaS website * No errors * No missing features * Production-ready code * Provide ZIP + live URL ━━━━━━━━━━━━━━━━━━━━━━━ IMPORTANT: Make everything EXACTLY like 8080.ai — same working flow, same UI feel, same feature behavior. Do NOT simplify anything. This must be a real working business website with payment system and admin panel.