<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Master Admin Command Center</title>
<link href="https://fonts.googleapis.com/css2?family=Spline+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script>
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
primary: "#5b13ec",
"background-light": "#f6f6f8",
"background-dark": "#0f0f12", // Darker background per plan
"card-dark": "#16131c", // Slightly lighter for cards
"border-dark": "#2a2435",
},
fontFamily: {
display: ["Spline Sans", "sans-serif"],
sans: ["Spline Sans", "sans-serif"],
},
borderRadius: {
"DEFAULT": "0.5rem",
"lg": "1rem",
"xl": "1.5rem",
"2xl": "2rem",
"full": "9999px"
},
},
},
}
</script>
<style>
body {
font-family: "Spline Sans", sans-serif;
}
/* Custom scrollbar for tables */
.custom-scrollbar::-webkit-scrollbar {
height: 6px;
width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: #16131c;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: #433b54;
border-radius: 3px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
background: #5b13ec;
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-slate-900 dark:text-slate-100 min-h-screen flex overflow-hidden">
<!-- Sidebar Navigation -->
<aside class="w-72 hidden lg:flex flex-col border-r border-border-dark bg-card-dark h-screen sticky top-0 z-20">
<div class="p-6 flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-primary to-purple-400 flex items-center justify-center text-white font-bold text-xl shadow-lg shadow-primary/20">
Q
</div>
<div class="flex flex-col">
<span class="text-white font-bold text-lg tracking-tight">QuizMaster</span>
<span class="text-slate-400 text-xs font-medium uppercase tracking-wider">Admin Portal</span>
</div>
</div>
<div class="flex-1 px-4 py-4 overflow-y-auto custom-scrollbar">
<div class="flex flex-col gap-1 mb-6">
<p class="px-4 text-xs font-semibold text-slate-500 uppercase tracking-widest mb-2">Main Menu</p>
<a class="flex items-center gap-3 px-4 py-3 rounded-full bg-primary/10 text-primary font-medium group transition-colors" href="#">
<span class="material-symbols-outlined text-primary group-hover:text-primary transition-colors">dashboard</span>
Command Center
</a>
<a class="flex items-center gap-3 px-4 py-3 rounded-full text-slate-400 hover:bg-white/5 hover:text-white transition-colors group" href="#">
<span class="material-symbols-outlined group-hover:text-white transition-colors">group</span>
User Management
</a>
<a class="flex items-center gap-3 px-4 py-3 rounded-full text-slate-400 hover:bg-white/5 hover:text-white transition-colors group" href="#">
<span class="material-symbols-outlined group-hover:text-white transition-colors">storefront</span>
Vendor Management
</a>
<a class="flex items-center gap-3 px-4 py-3 rounded-full text-slate-400 hover:bg-white/5 hover:text-white transition-colors group" href="#">
<span class="material-symbols-outlined group-hover:text-white transition-colors">quiz</span>
Quiz Creation
</a>
<a class="flex items-center gap-3 px-4 py-3 rounded-full text-slate-400 hover:bg-white/5 hover:text-white transition-colors group" href="#">
<span class="material-symbols-outlined group-hover:text-white transition-colors">payments</span>
Financial Reports
</a>
</div>
<div class="flex flex-col gap-1">
<p class="px-4 text-xs font-semibold text-slate-500 uppercase tracking-widest mb-2">Settings</p>
<a class="flex items-center gap-3 px-4 py-3 rounded-full text-slate-400 hover:bg-white/5 hover:text-white transition-colors group" href="#">
<span class="material-symbols-outlined group-hover:text-white transition-colors">settings</span>
Platform Settings
</a>
<a class="flex items-center gap-3 px-4 py-3 rounded-full text-slate-400 hover:bg-white/5 hover:text-white transition-colors group" href="#">
<span class="material-symbols-outlined group-hover:text-white transition-colors">security</span>
Access Control
</a>
</div>
</div>
<div class="p-4 border-t border-border-dark">
<div class="flex items-center gap-3 p-2 rounded-xl bg-white/5">
<div class="relative">
<div class="w-10 h-10 rounded-full bg-cover bg-center" data-alt="Admin user profile picture showing a smiling woman" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuBcQrbFkmhL4iw8vBqIXZkbkyaurRBrlg9rfjaaIfiK3fdS_6Cfrxen2Ylwq7Zk9H1xuEuZbTaPFhl1XJwHiiVg7Ft5abr83SeztHHuMIDcb4F6h4KUAPHCFhLcH7QQHPbHah4LeguB759QaVU16DAIpqMRWI_GoUUx-uhK_264nPtylcw25dacFScjyp6d2LLKWo8DszxoE_DqcHZHk_-vAupOR3StOyuCF8f0TMTlYvrahRYisyTKkNiZKMknYR7OxOUbQkTj7X7l')"></div>
<span class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 border-2 border-[#16131c] rounded-full"></span>
</div>
<div class="flex flex-col overflow-hidden">
<span class="text-sm font-bold text-white truncate">Sarah Connor</span>
<span class="text-xs text-slate-400 truncate">Super Admin</span>
</div>
<button class="ml-auto text-slate-400 hover:text-white">
<span class="material-symbols-outlined">logout</span>
</button>
</div>
</div>
</aside>
<!-- Main Content -->
<main class="flex-1 flex flex-col h-screen overflow-hidden relative">
<!-- Header Mobile/Desktop -->
<header class="w-full h-16 lg:h-20 flex items-center justify-between px-6 lg:px-10 border-b border-border-dark bg-background-dark/80 backdrop-blur-md sticky top-0 z-10">
<div class="flex items-center gap-4">
<button class="lg:hidden text-white p-2">
<span class="material-symbols-outlined">menu</span>
</button>
<h1 class="text-xl lg:text-2xl font-bold text-white tracking-tight">Platform Health</h1>
</div>
<div class="flex items-center gap-4">
<div class="relative hidden sm:block">
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-500 text-lg">search</span>
<input class="bg-card-dark border border-border-dark rounded-full py-2 pl-10 pr-4 text-sm text-white focus:outline-none focus:border-primary w-64 transition-all" placeholder="Search users, quizzes..." type="text"/>
</div>
<button class="relative p-2 text-slate-400 hover:text-white transition-colors rounded-full hover:bg-white/5">
<span class="material-symbols-outlined">notifications</span>
<span class="absolute top-2 right-2 w-2 h-2 bg-red-500 rounded-full border border-background-dark"></span>
</button>
</div>
</header>
<!-- Scrollable Content -->
<div class="flex-1 overflow-y-auto custom-scrollbar p-6 lg:p-10 pb-20">
<!-- Metrics Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 mb-10">
<!-- Card 1: Daily Active Users -->
<div class="bg-card-dark border border-border-dark rounded-2xl p-6 relative overflow-hidden group hover:border-primary/30 transition-all duration-300">
<div class="absolute top-0 right-0 w-32 h-32 bg-primary/10 rounded-full blur-3xl -mr-10 -mt-10 pointer-events-none"></div>
<div class="flex justify-between items-start mb-4">
<div class="flex flex-col">
<h3 class="text-slate-400 text-sm font-medium">Daily Active Users</h3>
<p class="text-white text-3xl font-bold mt-1 tracking-tight">12,450</p>
</div>
<div class="w-10 h-10 rounded-full bg-emerald-500/10 flex items-center justify-center text-emerald-500">
<span class="material-symbols-outlined">group</span>
</div>
</div>
<div class="flex items-center gap-2">
<span class="flex items-center text-emerald-500 text-sm font-semibold bg-emerald-500/10 px-2 py-0.5 rounded-full">
<span class="material-symbols-outlined text-sm mr-1">trending_up</span>
+12%
</span>
<span class="text-slate-500 text-xs">vs last 24h</span>
</div>
<!-- Mock Sparkline -->
<div class="mt-4 h-1 w-full bg-white/5 rounded-full overflow-hidden">
<div class="h-full bg-emerald-500 w-[70%] rounded-full"></div>
</div>
</div>
<!-- Card 2: Total Revenue -->
<div class="bg-card-dark border border-border-dark rounded-2xl p-6 relative overflow-hidden group hover:border-primary/30 transition-all duration-300">
<div class="absolute top-0 right-0 w-32 h-32 bg-primary/10 rounded-full blur-3xl -mr-10 -mt-10 pointer-events-none"></div>
<div class="flex justify-between items-start mb-4">
<div class="flex flex-col">
<h3 class="text-slate-400 text-sm font-medium">Total Revenue</h3>
<p class="text-white text-3xl font-bold mt-1 tracking-tight">$45,230</p>
</div>
<div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
<span class="material-symbols-outlined">attach_money</span>
</div>
</div>
<div class="flex flex-col gap-1">
<div class="flex items-center justify-between text-xs">
<span class="text-slate-400">Onboarding Fees</span>
<span class="text-white font-medium">$10,150</span>
</div>
<div class="w-full bg-white/5 rounded-full h-1.5 mb-1">
<div class="bg-purple-400 h-1.5 rounded-full" style="width: 25%"></div>
</div>
<div class="flex items-center justify-between text-xs">
<span class="text-slate-400">Subscriptions</span>
<span class="text-white font-medium">$35,080</span>
</div>
<div class="w-full bg-white/5 rounded-full h-1.5">
<div class="bg-primary h-1.5 rounded-full" style="width: 75%"></div>
</div>
</div>
</div>
<!-- Card 3: Pending Payouts -->
<div class="bg-card-dark border border-border-dark rounded-2xl p-6 relative overflow-hidden group hover:border-primary/30 transition-all duration-300">
<div class="absolute top-0 right-0 w-32 h-32 bg-orange-500/10 rounded-full blur-3xl -mr-10 -mt-10 pointer-events-none"></div>
<div class="flex justify-between items-start mb-4">
<div class="flex flex-col">
<h3 class="text-slate-400 text-sm font-medium">Pending Commission</h3>
<p class="text-white text-3xl font-bold mt-1 tracking-tight">$3,200</p>
</div>
<div class="w-10 h-10 rounded-full bg-orange-500/10 flex items-center justify-center text-orange-500">
<span class="material-symbols-outlined">pending_actions</span>
</div>
</div>
<div class="flex items-center gap-2 mb-3">
<span class="text-orange-400 text-sm font-medium flex items-center gap-1">
<span class="material-symbols-outlined text-base">warning</span>
Action Required
</span>
</div>
<button class="w-full py-2 bg-orange-500/10 hover:bg-orange-500/20 text-orange-500 text-sm font-semibold rounded-full transition-colors">
Process Payouts
</button>
</div>
</div>
<div class="grid grid-cols-1 xl:grid-cols-3 gap-8">
<!-- Moderation Queue -->
<div class="xl:col-span-2 flex flex-col gap-4">
<div class="flex items-center justify-between">
<h2 class="text-xl font-bold text-white tracking-tight">Moderation Queue</h2>
<a class="text-sm text-primary hover:text-primary/80 font-medium" href="#">View All</a>
</div>
<div class="bg-card-dark border border-border-dark rounded-2xl overflow-hidden shadow-sm">
<div class="overflow-x-auto">
<table class="w-full text-left border-collapse">
<thead>
<tr class="border-b border-border-dark bg-white/5">
<th class="px-6 py-4 text-xs font-semibold text-slate-400 uppercase tracking-wider">Quiz Title</th>
<th class="px-6 py-4 text-xs font-semibold text-slate-400 uppercase tracking-wider">Submitted By</th>
<th class="px-6 py-4 text-xs font-semibold text-slate-400 uppercase tracking-wider">Category</th>
<th class="px-6 py-4 text-xs font-semibold text-slate-400 uppercase tracking-wider">Status</th>
<th class="px-6 py-4 text-xs font-semibold text-slate-400 uppercase tracking-wider text-right">Action</th>
</tr>
</thead>
<tbody class="divide-y divide-border-dark">
<tr class="hover:bg-white/5 transition-colors">
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-lg bg-indigo-500/20 flex items-center justify-center text-indigo-400">
<span class="material-symbols-outlined">computer</span>
</div>
<div class="flex flex-col">
<span class="text-white font-medium text-sm">Tech Trivia 2024</span>
<span class="text-slate-500 text-xs">15 Questions</span>
</div>
</div>
</td>
<td class="px-6 py-4 text-sm text-slate-300">
<div class="flex items-center gap-2">
<img alt="John Doe avatar" class="w-6 h-6 rounded-full" data-alt="Avatar of user John Doe" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC1IW5VuMkihk_qZwYm2BosHOT2r3p40PQBh3ysgVqPYlh448DrmN57lBx-eJri6Qs4gM9EFTQXJFFZ7DIGFlEBiGavC8uWR4B15HyWes-qqSkIb6b421lOuClZqB7aGrekku_9aiWELJ-zVETsru8oxacxdm04h0TpvvUTiJq6p5Yzje73z34k0CcpBBaqvyflLAbik4qxs8RtqyNyeO-t6TaT2Zn-o2vJA9rVEztH7aXO816F_B3LjPcvqq1AA9vjqzWusOPX19ne"/>
John Doe
</div>
</td>
<td class="px-6 py-4">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-500/10 text-blue-400">
Technology
</span>
</td>
<td class="px-6 py-4">
<span class="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-500/10 text-yellow-500">
<span class="w-1.5 h-1.5 rounded-full bg-yellow-500"></span>
Pending
</span>
</td>
<td class="px-6 py-4 text-right">
<div class="flex items-center justify-end gap-2">
<button class="p-2 rounded-full text-slate-400 hover:text-white hover:bg-white/10 transition-colors" title="Review">
<span class="material-symbols-outlined text-[20px]">visibility</span>
</button>
<button class="p-2 rounded-full text-emerald-500 hover:bg-emerald-500/10 transition-colors" title="Approve">
<span class="material-symbols-outlined text-[20px]">check_circle</span>
</button>
<button class="p-2 rounded-full text-red-500 hover:bg-red-500/10 transition-colors" title="Reject">
<span class="material-symbols-outlined text-[20px]">cancel</span>
</button>
</div>
</td>
</tr>
<tr class="hover:bg-white/5 transition-colors">
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-lg bg-pink-500/20 flex items-center justify-center text-pink-400">
<span class="material-symbols-outlined">movie</span>
</div>
<div class="flex flex-col">
<span class="text-white font-medium text-sm">Pop Culture Blast</span>
<span class="text-slate-500 text-xs">20 Questions</span>
</div>
</div>
</td>
<td class="px-6 py-4 text-sm text-slate-300">
<div class="flex items-center gap-2">
<img alt="Jane Smith avatar" class="w-6 h-6 rounded-full" data-alt="Avatar of user Jane Smith" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDZfea4YOr8yNoqmMcFa2BL55-aOzyQlEX3ly20GHW35TyCMmhsemjT1iB8X7eLfEvvgDximCYCuBVZs8KgVR5r80eZ3oaDfXkNMhZsVZrmRUXCcqIMW1UVeJ1d3rPAykFPQu7dYPTTgpYD1-fldlsqT0gD8EQpwK-ECoFiiyop9pJMrF0Qfyg-W1eHuywv07mwKd7gLeeJt7SUB-FHpDrWSHC8l0UCBOHh6YcVU0qZG_CZ3G6hyr1-Lx8fzVZIjFS7Xu5AkuJ9PL4c"/>
Jane Smith
</div>
</td>
<td class="px-6 py-4">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-pink-500/10 text-pink-400">
Entertainment
</span>
</td>
<td class="px-6 py-4">
<span class="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-500/10 text-red-500">
<span class="w-1.5 h-1.5 rounded-full bg-red-500"></span>
Flagged
</span>
</td>
<td class="px-6 py-4 text-right">
<div class="flex items-center justify-end gap-2">
<button class="p-2 rounded-full text-slate-400 hover:text-white hover:bg-white/10 transition-colors" title="Review">
<span class="material-symbols-outlined text-[20px]">visibility</span>
</button>
<button class="p-2 rounded-full text-emerald-500 hover:bg-emerald-500/10 transition-colors" title="Approve">
<span class="material-symbols-outlined text-[20px]">check_circle</span>
</button>
<button class="p-2 rounded-full text-red-500 hover:bg-red-500/10 transition-colors" title="Reject">
<span class="material-symbols-outlined text-[20px]">cancel</span>
</button>
</div>
</td>
</tr>
<tr class="hover:bg-white/5 transition-colors">
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-lg bg-teal-500/20 flex items-center justify-center text-teal-400">
<span class="material-symbols-outlined">school</span>
</div>
<div class="flex flex-col">
<span class="text-white font-medium text-sm">Math Wizards</span>
<span class="text-slate-500 text-xs">10 Questions</span>
</div>
</div>
</td>
<td class="px-6 py-4 text-sm text-slate-300">
<div class="flex items-center gap-2">
<div class="w-6 h-6 rounded-full bg-teal-500 flex items-center justify-center text-[10px] text-white font-bold">M</div>
Math Club
</div>
</td>
<td class="px-6 py-4">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-teal-500/10 text-teal-400">
Education
</span>
</td>
<td class="px-6 py-4">
<span class="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-500/10 text-yellow-500">
<span class="w-1.5 h-1.5 rounded-full bg-yellow-500"></span>
Pending
</span>
</td>
<td class="px-6 py-4 text-right">
<div class="flex items-center justify-end gap-2">
<button class="p-2 rounded-full text-slate-400 hover:text-white hover:bg-white/10 transition-colors" title="Review">
<span class="material-symbols-outlined text-[20px]">visibility</span>
</button>
<button class="p-2 rounded-full text-emerald-500 hover:bg-emerald-500/10 transition-colors" title="Approve">
<span class="material-symbols-outlined text-[20px]">check_circle</span>
</button>
<button class="p-2 rounded-full text-red-500 hover:bg-red-500/10 transition-colors" title="Reject">
<span class="material-symbols-outlined text-[20px]">cancel</span>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Vendor Approvals -->
<div class="flex flex-col gap-4">
<div class="flex items-center justify-between">
<h2 class="text-xl font-bold text-white tracking-tight">Vendor Approvals</h2>
<span class="bg-primary/20 text-primary text-xs font-bold px-2 py-1 rounded-md">3 New</span>
</div>
<div class="bg-card-dark border border-border-dark rounded-2xl p-4 flex flex-col gap-4">
<!-- Vendor Item 1 -->
<div class="p-4 rounded-xl bg-background-dark border border-border-dark hover:border-primary/50 transition-colors">
<div class="flex justify-between items-start mb-3">
<div class="flex items-center gap-3">
<div class="w-12 h-12 rounded-full bg-cover bg-center" data-alt="Profile picture of vendor rep" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuCh-4q-P_dBMFbc2iGp9K9Itlutn3YfQw3yPwZKJPQu0PjLLdn2F2_NDKCZZRQ6nLZyu2Kh3i4sEGn8dGPdhqvUz1UhoiKOV4tp4XOBEKAFMPs4MYInau3nfeqIvWKTMUG9Xpp0RHE4CpDIe0GpYEGEA7VoDDapDwdgTbB27270IjoeOuRRBt5HbeK5EUBwhaSgbk8L33iMxdGXEJF9fJkJqjAKT8ucqW8y3Sl5eWM9wYt8wnyuH5frYowHTjw4_eshN5ovh7dNiOR9')"></div>
<div>
<h4 class="text-white font-bold text-sm">TechGadgets Inc.</h4>
<p class="text-slate-500 text-xs">Electronics Retailer</p>
</div>
</div>
<span class="text-xs text-slate-500">2h ago</span>
</div>
<div class="flex items-center justify-between gap-3 mt-2">
<button class="flex-1 py-2 rounded-full bg-card-dark border border-border-dark text-slate-300 text-xs font-medium hover:bg-white/5 hover:text-white transition-colors">
View Profile
</button>
<button class="flex-1 py-2 rounded-full bg-primary text-white text-xs font-bold hover:bg-primary/90 transition-colors shadow-lg shadow-primary/20">
Approve
</button>
</div>
</div>
<!-- Vendor Item 2 -->
<div class="p-4 rounded-xl bg-background-dark border border-border-dark hover:border-primary/50 transition-colors">
<div class="flex justify-between items-start mb-3">
<div class="flex items-center gap-3">
<div class="w-12 h-12 rounded-full bg-cover bg-center" data-alt="Profile picture of vendor rep" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuCKbe95IfuOzjd5ao8zDIVG-GV0K_fLQW2p1mwtrffWwt48YSzIvSJTOvRhBQjFpjszp_gz9qp7com7JerVRNvZ7l1fDkUqzN2hLHSveG4lDJy8HqdHaVZ_mXHS6UkpJ_BEBpOZMJ9z5I2AxX4ZNlxYYctO6blOn0Gw993KWG1_hlBQiFeZmffJa9h7bN5oV0cuHFUICEytkjO5bCRTc8jAgKSu8PZHroFDEN82ix7TWpjP-ctnTFjloqc2xEB154mCLK4fop38mEpb')"></div>
<div>
<h4 class="text-white font-bold text-sm">Healthy Bites</h4>
<p class="text-slate-500 text-xs">Food & Beverage</p>
</div>
</div>
<span class="text-xs text-slate-500">5h ago</span>
</div>
<div class="flex items-center justify-between gap-3 mt-2">
<button class="flex-1 py-2 rounded-full bg-card-dark border border-border-dark text-slate-300 text-xs font-medium hover:bg-white/5 hover:text-white transition-colors">
View Profile
</button>
<button class="flex-1 py-2 rounded-full bg-primary text-white text-xs font-bold hover:bg-primary/90 transition-colors shadow-lg shadow-primary/20">
Approve
</button>
</div>
</div>
<!-- Vendor Item 3 -->
<div class="p-4 rounded-xl bg-background-dark border border-border-dark hover:border-primary/50 transition-colors opacity-75">
<div class="flex justify-between items-start mb-3">
<div class="flex items-center gap-3">
<div class="w-12 h-12 rounded-full bg-cover bg-center" data-alt="Profile picture of vendor rep" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuB_xw42gJsLf7_V2QOEJ4v6kw1CEIw3DvpG36sVz-ItqLkVyTNS0Keb7G3nsva2Hxih3hOEtPjUWo76d0PMpzPjwp2oYG3sKi1vc-Hdeh-CuN1GzNROdMv5yRitIOVihcW3zebcdfk6w1LyM5gc7VExxh1TpqwC6zmWktGa6MXuwoAQBTRfRRtCHyFBnEtqQaE_0bxq98p1YSRrCk0OCqULNUi1LcB_4RJrhxr7C3upaLDOMHoYY8XtdE4Hi4O5vh0wCm-v8xzRlhpd')"></div>
<div>
<h4 class="text-white font-bold text-sm">Crypto King</h4>
<p class="text-slate-500 text-xs">Financial Services</p>
</div>
</div>
<span class="text-xs text-slate-500">1d ago</span>
</div>
<div class="flex items-center gap-2 mb-2">
<span class="text-[10px] font-bold uppercase tracking-wider text-red-400 bg-red-400/10 px-2 py-0.5 rounded">KYC Incomplete</span>
</div>
<div class="flex items-center justify-between gap-3 mt-2">
<button class="flex-1 py-2 rounded-full bg-card-dark border border-border-dark text-slate-300 text-xs font-medium hover:bg-white/5 hover:text-white transition-colors">
Review Docs
</button>
<button class="flex-1 py-2 rounded-full bg-slate-700 text-slate-400 text-xs font-bold cursor-not-allowed">
Pending
</button>
</div>
</div>
</div>
<button class="w-full py-3 rounded-full border border-border-dark text-slate-400 text-sm font-medium hover:text-white hover:border-slate-500 transition-colors">
View All Applications
</button>
</div>
</div>
</div>
</main>
</body></html>