Ești un designer UI experimentat care adoptă design modern, minimalist, umbre, sticlă și culori delicate. Rolul tău este să creezi un mockup profesional și frumos, gata de livrare, pe baza acestor cerințe: <requirements> ## 1. Stil General & Limbaj Vizual Această interfață reprezintă un dashboard premium, modern de tranzacționare fintech/crypto folosind o temă întunecată. Limbajul vizual combină **neumorfism soft** și **estetică Web3 de lux**. Caracteristici de bază: - Accente calde aurii/portocalii - Paletă cromatică monocromatică cu efecte minimaliste și umbre - Layout bazat pe carduri cu profunzime și fundaluri subtile - Borduri minimale, separare prin umbre sau fundaluri luminoase Percepție țintă: - Sigur - Profesional - De înaltă calitate/nivel instituțional - Optimizat pentru traderi experimentați --- ## 2. Structura Layout-ului ### Layout Global - Dashboard orientat spre desktop - Proporții output: 3:2 - Trei regiuni principale: 1. Bara de navigație superioară (orizontală) 2. Bara laterală stânga de navigație (verticală) 3. Zona de conținut principal (grilă multi-coloană de carduri) Spațierea este generoasă, prioritizând claritatea și spațiul vizual de respirație. --- ## 3. Bara de Navigație Superioară - Înălțime: 72px - Stânga: - Text logo brand "Mevolut" - "M" stilizat - Accent auriu/portocaliu - Centru: - Linkuri de navigare: Dashboard, Securitate, Referral, Comisioane Trading, Management API - Dreapta: - Link Comandă - CTA Principal: "Depozit" (buton pill auriu) - Avatar utilizator (circular) - Comutator temă (icoană lună) Tipografie: - Sans-serif curat - Greutate medie - Text primar alb, stări inactive gri estompate --- ## 4. Bara Laterală de Navigație - Lățime: 240px - Fundal: aproape negru - Elemente de navigație verticale cu icoane: - Dashboard (activ) - Securitate - Referral - Comisioane Trading - Management API - Aliniate la baza: - Setări Element activ: - Evidențiere subtilă a fundalului - Ușoară tentă de fundal - Contner rotunjit Icoane: - Stil contur - Accent auriu pe starea activă --- ## 5. Zona de Conținut Principal ### 5.1 Card Prezentare Utilizator - Card mare rotunjit în partea de sus - Stânga: - Avatar circular - Text de salut ("Bună ziua…") - Nume utilizator - Blocuri de informații inline: - UID (icoană copiere) - Status verificare identitate - Nivel de securitate - Fus orar - Marcaj temporal ultima autentificare - Dreapta: - Comutator "Ascunde info" Stil: - Umbre interioare subtile --- ### 5.2 Card Depozit / Cumpără - Card de dimensiune medie - Text titlu care explică opțiunile de depozit - Două rânduri de acțiuni: - Depozit (dolari sau crypto) - Cumpără acțiuni (monedă locală) - Fiecare rând: - Pictogramă - Etichetă - Buton acțiune săgeată (accent auriu) --- ### 5.3 Card Active Totale - Afișează sold USD și echivalent USD - Simbol Dolar mare, estompat ca filigran în fundal - Tab-uri de acțiuni: - Cumpără acțiuni - Depozit - Retrage - Valorile numerice sunt mari --- ### 5.4 Card Nivel VIP - Afișează nivelul VIP curent - Rate comisioane spot și futures - Bară de progres pentru deținerile de token-uri - Link "Vezi m mult" Bară de progres: - Rotunjită - Pistă fundal întunecat --- ### 5.5 Tabel Dețineri Curente - Card conținând un layout tabel - Coloane: - Monedă (icoană + nume) - Preț - Modificare 24h - Trend 4h (sparkline) - Acțiuni (Depozit, Retrage, Tranzacționează) Sparkline-uri: - Verde pentru trend pozitiv - Roșu pentru trend negativ Hover: - Evidențiere subtilă a fundalului per rând --- ### 5.6 Card Program Afiliere - Card promoțional - Ilustrație monedă aurie - Scurtă descriere și buton CTA ("Aplică acum") --- ### 5.7 Card Informații / Știri - Listă verticală de anunțuri - Titlu + marcaj temporal - Link "Vezi m mult" în partea de sus --- ## 6. Paletă Cromatică - Fundal primar: cărbune intens / negru - Suprafețe carduri: ușor m deschise - Culoare accent: auriu cald - Ierarhie text: - Alb (primar) - Gri estompat (secundar) - Gri închis (dezactivat) - Culori status: - Verde pentru pozitiv - Roșu pentru negativ --- ## 7. Efecte & Interacțiune - Colțuri rotunjite peste tot (sm) # Tokeni de design: { // Definiție temă globală "theme": { "mode": "dark", "style": [ "soft-neumorphism", "premium-fintech" ] }, // Măsurători și structură layout "layout": { "type": "desktop-dashboard", "grid": "three-column", "sidebarWidth": 240, "topbarHeight": 68, "contentPadding": 24 }, // Sistem de culori "colors": { "background": "#0B0D10", // Fundal principal aplicație "primaryAccent": "#F5A623", // Evidențiere auriu/portocaliu "secondaryAccent": "#FFB547", "textPrimary": "#FFFFFF", "textSecondary": "#B0B3B8", "textMuted": "#6B6F76", "success": "#22C55E", "danger": "#EF4444" }, // Scală tipografică "typography": { "fontFamily": "SF Pro, system-ui, sans-serif", "weights": { "heading": 600, "body": 400, "numeric": 500 }, "sizes": { "h1": 24, "h2": 20, "h3": 16, "body": 14, "caption": 12 } }, // Componente UI de bază "components": { "card": { "borderRadius": 16, "shadow": "0 20px 40px rgba(0,0,0,0.4)", "border": "none", "background": "#14171C", }, "button": { "primary": { "textColor": "#0B0D10", "borderRadius": 999, }, "secondary": { "background": "transparent", "textColor": "#F5A623" } }, "sidebar": { "background": "#0E1014", "itemRadius": 12, "iconStyle": "outline" }, "table": { "rowHeight": 56, "divider": "subtle", "hoverHighlight": true, "sparkline": { "positiveColor": "#22C55E", "negativeColor": "#EF4444" } }, "progressBar": { "height": 6, "radius": 999, "fillColor": "#22C55E", "backgroundColor": "#2A2E35" } }, // Sistem de pictograme "icons": { "style": "outline", "size": 18, "colorInactive": "#6B6F76", "colorActive": "#F5A623" } } </requirements>