Skip to content

Feature/UI revamp #12

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Robotron2 merged 4 commits into from
May 8, 2026
Merged

Feature/UI revamp #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
af4763f
ui: UI redesign
Robotron2 May 8, 2026
3e93aa9
fix/ui: theme toggle disappearing fix
Robotron2 May 8, 2026
f0a2be4
fix/ui: dashboard sidenav responsiveness. Account balance displayed p…
Robotron2 May 8, 2026
a389bad
fix/lint: Fixed lint and build errors
Robotron2 May 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
307 changes: 167 additions & 140 deletions app/app/page.tsx
View file
Open in desktop

Large diffs are not rendered by default.

309 changes: 140 additions & 169 deletions app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,213 +1,184 @@
@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@200;300;400;500;600;700;800&family=Quicksand:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;700&display=swap');

@import "tailwindcss";

@config "../tailwind.config.ts";

:root {
--bg-deep: #030408;
--bg-base: #05060B;
--bg-surface: rgba(10, 14, 23, 0.7);
--bg-elevated: rgba(18, 24, 38, 0.8);
--border: rgba(255, 255, 255, 0.06);
--border-bright: rgba(255, 255, 255, 0.12);

--accent-teal: #00F5FF;
--accent-teal-glow: rgba(0, 245, 255, 0.4);
--accent-gold: #FFD700;
--accent-gold-glow: rgba(255, 215, 0, 0.3);
--accent-purple: #9D00FF;

--text-primary: #FFFFFF;
--text-secondary: #A0AEC0;
--text-muted: #718096;
--text-micro: #4A5568;

--glass-blur: blur(16px);
--glass-border: 1px solid rgba(255, 255, 255, 0.08);
--shadow-premium: 0 20px 40px rgba(0, 0, 0, 0.4);
}
--background: #FAFAFA;
--foreground: #111827;

--card: #FFFFFF;
--card-foreground: #111827;

--primary: #007AFF;
--primary-foreground: #FFFFFF;

[data-theme="light"] {
--bg-deep: #F8FAFC;
--bg-base: #FFFFFF;
--bg-surface: rgba(255, 255, 255, 0.85);
--bg-elevated: rgba(241, 245, 249, 0.95);
--border: rgba(0, 0, 0, 0.06);
--border-bright: rgba(0, 0, 0, 0.12);

--accent-teal: #0D9488;
--accent-teal-glow: rgba(13, 148, 136, 0.2);
--accent-gold: #D97706;
--accent-gold-glow: rgba(217, 119, 6, 0.15);

--text-primary: #0F172A;
--text-secondary: #475569;
--text-muted: #64748B;
--text-micro: #94A3B8;
--success: #00E070;
--success-foreground: #FFFFFF;

--border: #E5E7EB;
--input: #F3F4F6;

--muted: #F3F4F6;
--muted-foreground: #6B7280;

--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 24px;
}

@layer base {
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[data-theme="dark"] {
--background: #0B0E14;
--foreground: #F9FAFB;

html { scroll-behavior: smooth; }
--card: #151821;
--card-foreground: #F9FAFB;

body {
font-family: "Quicksand", sans-serif;
background: var(--bg-base);
color: var(--text-primary);
line-height: 1.6;
transition: background 0.4s cubic-bezier(0.4, 0, 0.2, 1);
overflow-x: hidden;
}
--primary: #007AFF;
--primary-foreground: #FFFFFF;

h1, h2, h3, h4, h5, h6 {
font-family: "Dosis", sans-serif;
font-weight: 700;
letter-spacing: 0.02em;
color: var(--text-primary);
text-transform: uppercase;
}
--success: #00C853;
--success-foreground: #FFFFFF;

a {
color: inherit;
text-decoration: none;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
--border: #2D3243;
--input: #1F2433;

--muted: #1F2433;
--muted-foreground: #9CA3AF;
}

@layer components {
/* Compiling manually to avoid @apply issues with custom non-standard utilities */
.feature-card {
background: var(--bg-surface);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: var(--glass-border);
border-radius: 28px;
box-shadow: var(--shadow-premium);
@apply p-8 transition-all duration-500 hover:scale-[1.02] hover:bg-white/[0.03];
border-color: var(--border);
}

.faq-card {
background: var(--bg-surface);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: var(--glass-border);
box-shadow: var(--shadow-premium);
@apply !rounded-2xl transition-all duration-300;
border: none;
background-color: rgba(255, 255, 255, 0.02);
}

.stat-box {
background: var(--bg-surface);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: var(--glass-border);
border-radius: 28px;
box-shadow: var(--shadow-premium);
@apply p-8 text-center flex flex-col items-center justify-center;
}

.nav-glass {
background: rgba(5, 6, 11, 0.75);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid var(--border);
}

.btn-gradient {
@apply relative overflow-hidden px-8 py-4 rounded-2xl font-bold transition-all duration-500 flex items-center justify-center gap-2;
background: linear-gradient(135deg, var(--accent-teal), #00A3FF);
color: #000;
box-shadow: 0 10px 30px -10px var(--accent-teal-glow);
}

.btn-gradient:hover {
transform: translateY(-3px);
box-shadow: 0 20px 40px -10px var(--accent-teal-glow);
}
@theme {
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-success: var(--success);
--color-success-foreground: var(--success-foreground);
--color-border: var(--border);
--color-input: var(--input);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
}

.btn-outline {
@apply relative px-8 py-4 rounded-2xl font-bold transition-all duration-300 border-2 flex items-center justify-center gap-2;
border-color: var(--border-bright);
background: transparent;
color: var(--text-primary);
@layer base {
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}

.btn-outline:hover {
border-color: var(--accent-teal);
color: var(--accent-teal);
background: var(--accent-teal-glow);
html {
scroll-behavior: smooth;
}

.feature-card:hover {
border-color: var(--accent-teal);
body {
background-color: var(--background);
color: var(--foreground);
line-height: 1.5;
transition: background-color 0.3s ease, color 0.3s ease;
-webkit-font-smoothing: antialiased;
}

.text-glow {
text-shadow: 0 0 15px var(--accent-teal-glow);
a {
color: inherit;
text-decoration: none;
transition: all 0.2s ease;
}
}

.mesh-bg {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background:
radial-gradient(circle at 10% 20%, rgba(157, 0, 255, 0.05) 0%, transparent 50%),
radial-gradient(circle at 90% 80%, rgba(0, 245, 255, 0.08) 0%, transparent 50%);
z-index: -1;
@layer components {
/* Utility for premium buttons */
.btn-primary {
@apply bg-primary text-primary-foreground font-semibold px-6 py-3 rounded-lg shadow-sm hover:opacity-90 transition-all flex items-center justify-center gap-2;
}

.faq-wrapper {
@apply space-y-4 max-w-3xl mx-auto;
.btn-outline {
@apply bg-transparent text-foreground font-semibold px-6 py-3 rounded-lg border-2 border-border hover:bg-muted transition-all flex items-center justify-center gap-2;
}

.faq-card.open {
@apply border-l-4;
background-color: rgba(255, 255, 255, 0.05);
border-left-color: var(--accent-teal);
.btn-glass {
@apply bg-white/10 dark:bg-white/5 backdrop-blur-md text-foreground font-semibold px-6 py-3 rounded-lg hover:bg-white/20 transition-all flex items-center justify-center gap-2;
}

.faq-header {
@apply flex justify-between items-center w-full p-6 text-left font-bold text-lg cursor-pointer;
font-family: "Dosis", sans-serif;
/* Input fields */
.premium-input {
@apply bg-input text-foreground border border-transparent rounded-lg px-4 py-3 w-full focus:outline-none focus:border-primary transition-colors;
}

.faq-body {
max-height: 0;
overflow: hidden;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
@apply px-6 opacity-0;
/* Cards */
.premium-card {
@apply bg-card text-card-foreground border border-border rounded-xl shadow-sm p-6 transition-all;
}

.faq-card.open .faq-body {
max-height: 400px;
padding-bottom: 24px;
opacity: 1;
.premium-glass-nav {
@apply fixed top-0 w-full z-50 bg-background/80 backdrop-blur-xl border-b border-border;
}

.stats-grid-container {
@apply grid grid-cols-1 md:grid-cols-3 gap-6;
/* Premium Fintech Grid Background */
.fintech-grid {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 0;
pointer-events: none;
overflow: hidden;
}

.stat-value {
@apply text-5xl font-extrabold mb-2;
font-family: "Dosis", sans-serif;
.fintech-grid::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(to right, var(--color-foreground) 1px, transparent 1px),
linear-gradient(to bottom, var(--color-foreground) 1px, transparent 1px);
background-size: 100px 100px;
opacity: 0.06;
mask-image: radial-gradient(circle at top center, black 10%, transparent 80%);
-webkit-mask-image: radial-gradient(circle at top center, black 10%, transparent 80%);
}

.fintech-grid::after {
content: "";
position: absolute;
inset: 0;
background-image: url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)"/%3E%3C/svg%3E');
opacity: 0.02;
mix-blend-mode: overlay;
}
}

.stat-label {
@apply text-xs uppercase tracking-widest font-bold;
color: var(--text-muted);
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(2rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}

@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
.animate-fade-up {
animation: fadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes drawPath {
0% { stroke-dasharray: 0, 1000; opacity: 0; }
50% { stroke-dasharray: 1000, 0; opacity: 1; }
100% { stroke-dasharray: 1000, 0; opacity: 0; }
}
0% {
stroke-dasharray: 0, 1000;
opacity: 0;
}
50% {
stroke-dasharray: 1000, 0;
opacity: 1;
}
100% {
stroke-dasharray: 1000, 0;
opacity: 0;
}
}
Loading
Loading