<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Vendor Earnings & Payouts Panel</title>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&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": "#161022",
"surface-dark": "#231e2e",
"gold": "#FFD700",
},
fontFamily: {
"display": ["Manrope", "sans-serif"],
"sans": ["Manrope", "sans-serif"]
},
borderRadius: {"DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "2xl": "1rem", "full": "9999px"},
},
},
}
</script>
<style>
.glass-panel {
background: rgba(35, 30, 46, 0.6);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.05);
}
.neon-glow:hover {
box-shadow: 0 0 20px rgba(91, 19, 236, 0.4);
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-slate-900 dark:text-slate-100 font-display min-h-screen flex overflow-hidden">
<!-- Sidebar Navigation -->
<aside class="hidden lg:flex flex-col w-72 h-screen border-r border-white/5 bg-[#131118] sticky top-0">
<div class="p-6 flex flex-col h-full justify-between">
<div class="flex flex-col gap-8">
<!-- User Profile Summary -->
<div class="flex items-center gap-4">
<div class="relative">
<div class="bg-center bg-no-repeat bg-cover rounded-full size-12 border-2 border-primary" data-alt="User Avatar" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuB20SY23aTLmS_ide7cUwoTakW597v-NkrSRqgq6dH9OFcucCAN4h4OlAAtZkvVTct7z1cHtP_gPryXw_PjzKPqDhwvDi7fvQ7m_2YWNl-eJvCuVY7q29y-k9IMY_Ebn_pERUV6LiTJtT10854fCQteGF1q5WjrsIM35b4r7K-EAQ-3rmhWJNLAkSc1hYZpWxImA69pkvBjfEMa4walosrmupkbnVf6XBf1JKWfpvp3juggZlJDGypPoueRwa24IldT5WrwsvCpjXzG");'></div>
<div class="absolute -bottom-1 -right-1 bg-green-500 size-3 rounded-full border-2 border-[#131118]"></div>
</div>
<div class="flex flex-col">
<h1 class="text-white text-lg font-bold leading-tight">QuizMaster</h1>
<p class="text-[#a69db9] text-xs font-medium uppercase tracking-wider">Vendor Portal</p>
</div>
</div>
<!-- Navigation Links -->
<nav class="flex flex-col gap-2">
<a class="flex items-center gap-3 px-4 py-3 rounded-xl text-[#a69db9] hover:text-white hover:bg-white/5 transition-colors group" href="#">
<span class="material-symbols-outlined text-[#a69db9] group-hover:text-white transition-colors">grid_view</span>
<span class="font-medium">Dashboard</span>
</a>
<a class="flex items-center gap-3 px-4 py-3 rounded-xl text-[#a69db9] hover:text-white hover:bg-white/5 transition-colors group" href="#">
<span class="material-symbols-outlined text-[#a69db9] group-hover:text-white transition-colors">sports_esports</span>
<span class="font-medium">My Quizzes</span>
</a>
<a class="flex items-center gap-3 px-4 py-3 rounded-xl bg-primary/10 border border-primary/20 text-white shadow-[0_0_15px_rgba(91,19,236,0.15)] relative overflow-hidden group" href="#">
<div class="absolute inset-0 bg-primary/5 group-hover:bg-primary/10 transition-colors"></div>
<span class="material-symbols-outlined text-primary relative z-10">account_balance_wallet</span>
<span class="font-bold relative z-10">Earnings</span>
</a>
<a class="flex items-center gap-3 px-4 py-3 rounded-xl text-[#a69db9] hover:text-white hover:bg-white/5 transition-colors group" href="#">
<span class="material-symbols-outlined text-[#a69db9] group-hover:text-white transition-colors">monitoring</span>
<span class="font-medium">Analytics</span>
</a>
<a class="flex items-center gap-3 px-4 py-3 rounded-xl text-[#a69db9] hover:text-white hover:bg-white/5 transition-colors group" href="#">
<span class="material-symbols-outlined text-[#a69db9] group-hover:text-white transition-colors">settings</span>
<span class="font-medium">Settings</span>
</a>
</nav>
</div>
<!-- Bottom Action -->
<div class="p-4 rounded-xl bg-gradient-to-br from-[#2e2839] to-[#1e1926] border border-white/5">
<div class="flex items-center justify-between mb-2">
<span class="text-xs font-bold text-white uppercase tracking-wider">Level 5 Vendor</span>
<span class="material-symbols-outlined text-yellow-500 text-sm">hotel_class</span>
</div>
<div class="w-full bg-white/10 rounded-full h-1.5 mb-1">
<div class="bg-primary h-1.5 rounded-full" style="width: 75%"></div>
</div>
<p class="text-[10px] text-[#a69db9]">1,200 XP to next level</p>
</div>
</div>
</aside>
<!-- Main Content Area -->
<main class="flex-1 overflow-y-auto h-screen relative scroll-smooth">
<!-- Top decorative gradient -->
<div class="absolute top-0 left-0 w-full h-64 bg-gradient-to-b from-primary/10 to-transparent pointer-events-none"></div>
<div class="container mx-auto px-6 py-8 max-w-7xl relative z-10">
<!-- Header Section -->
<header class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-10">
<div>
<h1 class="text-3xl md:text-4xl font-black text-white tracking-tight mb-2">Earnings & Payouts</h1>
<p class="text-[#a69db9] text-base font-normal">Manage your commissions, track income, and request withdrawals.</p>
</div>
<div class="flex gap-3">
<button class="flex items-center gap-2 px-4 py-2.5 rounded-lg bg-white/5 hover:bg-white/10 border border-white/10 text-sm font-medium text-white transition-all">
<span class="material-symbols-outlined text-lg">download</span>
Export CSV
</button>
<button class="flex items-center gap-2 px-4 py-2.5 rounded-lg bg-primary hover:bg-primary/90 text-sm font-bold text-white shadow-lg shadow-primary/25 transition-all neon-glow">
<span class="material-symbols-outlined text-lg">add</span>
New Quiz
</button>
</div>
</header>
<!-- Stats Grid -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-10">
<!-- Card 1: Available -->
<div class="glass-panel p-6 rounded-2xl flex flex-col justify-between h-40 relative overflow-hidden group">
<div class="absolute -right-6 -top-6 bg-green-500/10 rounded-full w-32 h-32 group-hover:scale-110 transition-transform duration-500"></div>
<div class="flex items-center justify-between relative z-10">
<p class="text-[#a69db9] font-medium">Available for Withdrawal</p>
<span class="material-symbols-outlined text-green-400 p-2 bg-green-400/10 rounded-lg">payments</span>
</div>
<div class="relative z-10">
<p class="text-4xl font-bold text-white tracking-tight group-hover:text-green-400 transition-colors">$1,250.00</p>
<p class="text-xs text-green-400 mt-1 font-medium flex items-center gap-1">
<span class="material-symbols-outlined text-sm">trending_up</span> +12% this week
</p>
</div>
</div>
<!-- Card 2: Pending -->
<div class="glass-panel p-6 rounded-2xl flex flex-col justify-between h-40 relative overflow-hidden group">
<div class="absolute -right-6 -top-6 bg-primary/10 rounded-full w-32 h-32 group-hover:scale-110 transition-transform duration-500"></div>
<div class="flex items-center justify-between relative z-10">
<p class="text-[#a69db9] font-medium">Pending Payouts</p>
<span class="material-symbols-outlined text-primary p-2 bg-primary/10 rounded-lg">pending</span>
</div>
<div class="relative z-10">
<p class="text-4xl font-bold text-white tracking-tight group-hover:text-primary transition-colors">$340.00</p>
<p class="text-xs text-[#a69db9] mt-1 font-medium">Processing within 24hrs</p>
</div>
</div>
<!-- Card 3: Lifetime (Special Style) -->
<div class="p-6 rounded-2xl flex flex-col justify-between h-40 relative overflow-hidden bg-gradient-to-br from-primary via-[#450db8] to-[#2e097a] border border-primary/30 group shadow-lg shadow-primary/20">
<!-- Background Pattern -->
<div class="absolute inset-0 opacity-20" style="background-image: radial-gradient(#fff 1px, transparent 1px); background-size: 20px 20px;"></div>
<div class="absolute -right-4 -bottom-4 text-white/10 group-hover:text-white/20 transition-colors duration-500 transform rotate-12 group-hover:rotate-0">
<span class="material-symbols-outlined" style="font-size: 140px;">emoji_events</span>
</div>
<div class="flex items-center justify-between relative z-10">
<p class="text-white/80 font-medium">Lifetime Earnings</p>
<span class="material-symbols-outlined text-yellow-300 p-2 bg-white/10 rounded-lg backdrop-blur-sm">trophy</span>
</div>
<div class="relative z-10">
<p class="text-4xl font-black text-white tracking-tight drop-shadow-md">$15,400.00</p>
<p class="text-xs text-yellow-300 mt-1 font-bold flex items-center gap-1">
Top 5% of Vendors
</p>
</div>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-12">
<!-- LEFT COLUMN: Withdrawal Form -->
<div class="lg:col-span-1 flex flex-col gap-6">
<div class="glass-panel p-6 rounded-2xl border border-white/5">
<div class="flex items-center gap-3 mb-6">
<div class="p-2 bg-primary/20 rounded-lg text-primary">
<span class="material-symbols-outlined">account_balance</span>
</div>
<h2 class="text-xl font-bold text-white">Request Payout</h2>
</div>
<form class="flex flex-col gap-5">
<!-- Method Selection -->
<div class="flex flex-col gap-2">
<label class="text-sm font-medium text-[#a69db9]">Select Destination</label>
<div class="grid grid-cols-2 gap-3">
<label class="relative cursor-pointer group">
<input checked="" class="peer sr-only" name="payout-method" type="radio"/>
<div class="flex flex-col items-center justify-center gap-2 p-4 rounded-xl border border-white/10 bg-white/5 peer-checked:bg-primary/20 peer-checked:border-primary transition-all hover:bg-white/10 h-28">
<span class="material-symbols-outlined text-2xl text-white peer-checked:text-primary">account_balance</span>
<span class="text-xs font-medium text-white">Bank Transfer</span>
<span class="text-[10px] text-[#a69db9]">****4590</span>
</div>
<div class="absolute top-2 right-2 opacity-0 peer-checked:opacity-100 transition-opacity text-primary">
<span class="material-symbols-outlined text-lg">check_circle</span>
</div>
</label>
<label class="relative cursor-pointer group">
<input class="peer sr-only" name="payout-method" type="radio"/>
<div class="flex flex-col items-center justify-center gap-2 p-4 rounded-xl border border-white/10 bg-white/5 peer-checked:bg-primary/20 peer-checked:border-primary transition-all hover:bg-white/10 h-28">
<span class="material-symbols-outlined text-2xl text-white peer-checked:text-primary">qr_code_2</span>
<span class="text-xs font-medium text-white">UPI / ID</span>
<span class="text-[10px] text-[#a69db9]">user@okicici</span>
</div>
<div class="absolute top-2 right-2 opacity-0 peer-checked:opacity-100 transition-opacity text-primary">
<span class="material-symbols-outlined text-lg">check_circle</span>
</div>
</label>
</div>
</div>
<!-- Amount Input -->
<div class="flex flex-col gap-2">
<label class="text-sm font-medium text-[#a69db9] flex justify-between">
<span>Withdrawal Amount</span>
<span class="text-xs text-primary cursor-pointer hover:underline">Max: $1,250.00</span>
</label>
<div class="relative group">
<span class="absolute left-4 top-1/2 -translate-y-1/2 text-[#a69db9] text-lg font-medium">$</span>
<input class="w-full bg-[#131118] border border-white/10 rounded-xl py-3 pl-8 pr-4 text-white placeholder-gray-600 focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all font-display text-lg font-bold" placeholder="0.00" type="number"/>
</div>
<p class="text-xs text-[#a69db9] mt-1">Minimum withdrawal amount is $50.00</p>
</div>
<hr class="border-white/5 my-1"/>
<!-- Submit Button -->
<button class="w-full py-3.5 px-4 bg-primary hover:bg-primary/90 text-white font-bold rounded-xl shadow-lg shadow-primary/25 transition-all flex items-center justify-center gap-2 neon-glow group" type="button">
<span>Withdraw Funds</span>
<span class="material-symbols-outlined group-hover:translate-x-1 transition-transform">arrow_forward</span>
</button>
</form>
</div>
<!-- Promo / Gamification Card -->
<div class="p-6 rounded-2xl bg-gradient-to-r from-yellow-600/20 to-yellow-800/20 border border-yellow-500/20 relative overflow-hidden">
<div class="relative z-10">
<div class="flex items-center gap-2 mb-2 text-yellow-400">
<span class="material-symbols-outlined">bolt</span>
<span class="text-xs font-bold uppercase tracking-wider">Power Up</span>
</div>
<h3 class="text-lg font-bold text-white mb-1">2x Earnings Weekend!</h3>
<p class="text-sm text-gray-300 mb-3">Create a new quiz this Friday and get double commission on all plays.</p>
<a class="text-yellow-400 text-sm font-bold hover:underline" href="#">Learn more →</a>
</div>
</div>
</div>
<!-- RIGHT COLUMN: Earnings Log -->
<div class="lg:col-span-2 flex flex-col">
<div class="glass-panel rounded-2xl border border-white/5 flex-1 flex flex-col">
<div class="p-6 border-b border-white/5 flex flex-wrap items-center justify-between gap-4">
<div>
<h2 class="text-xl font-bold text-white">Earning Logs</h2>
<p class="text-sm text-[#a69db9]">Detailed history of your commissions.</p>
</div>
<!-- Filters -->
<div class="flex bg-[#131118] rounded-lg p-1 border border-white/5">
<button class="px-3 py-1.5 rounded-md bg-white/10 text-white text-xs font-medium shadow-sm">All</button>
<button class="px-3 py-1.5 rounded-md text-[#a69db9] hover:text-white text-xs font-medium transition-colors">Commissions</button>
<button class="px-3 py-1.5 rounded-md text-[#a69db9] hover:text-white text-xs font-medium transition-colors">Withdrawals</button>
</div>
</div>
<!-- Table -->
<div class="overflow-x-auto">
<table class="w-full text-left border-collapse">
<thead>
<tr class="bg-white/5 text-[#a69db9] text-xs uppercase tracking-wider font-semibold border-b border-white/5">
<th class="p-4 pl-6">Date</th>
<th class="p-4">Source / User</th>
<th class="p-4">Details</th>
<th class="p-4 text-right">Amount</th>
<th class="p-4 pr-6 text-right">Status</th>
</tr>
</thead>
<tbody class="text-sm divide-y divide-white/5">
<!-- Row 1 -->
<tr class="group hover:bg-white/[0.02] transition-colors">
<td class="p-4 pl-6 text-[#a69db9] whitespace-nowrap">Oct 24, 2023 <br/><span class="text-xs text-gray-600">10:42 AM</span></td>
<td class="p-4">
<div class="flex items-center gap-3">
<div class="size-8 rounded-full bg-cover bg-center" data-alt="User Avatar" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuC-7_DUWFv9dZwdwQU8osy8-doiZQAzASKycHioGvuJgkUEMvxSlBZmksGQxeTZC5gSrGYN5xOff7kUuur6OAzefINecuj0Yy4Cx3aYgnAnmXLHvo7LCQ8EmfVW76RbBhlBSfDIPPN73CNhJzakP5gE7ky3f7p3kzBOjz9PvSbjdUUUORI0s1Ko0NcHjL2kS0LfFzrJcWMLzmLUd3h3olV8V79TovvfxARV4HheQC5cuPB960KTAq5j0MXCpdlXHu56wjsUz-GgledO");'></div>
<div>
<p class="text-white font-medium">@CryptoKing</p>
<p class="text-xs text-[#a69db9]">Referral Link</p>
</div>
</div>
</td>
<td class="p-4">
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md bg-[#2e2839] text-gray-300 text-xs border border-white/5">
<span class="material-symbols-outlined text-[14px] text-primary">quiz</span>
Tech Trivia #402
</span>
</td>
<td class="p-4 text-right font-bold text-green-400 font-display">+$5.00</td>
<td class="p-4 pr-6 text-right">
<span class="inline-flex items-center gap-1 px-2 py-1 rounded-full bg-green-500/10 text-green-400 text-xs font-medium border border-green-500/20">
<span class="w-1.5 h-1.5 rounded-full bg-green-500"></span>
Paid
</span>
</td>
</tr>
<!-- Row 2 -->
<tr class="group hover:bg-white/[0.02] transition-colors">
<td class="p-4 pl-6 text-[#a69db9] whitespace-nowrap">Oct 24, 2023 <br/><span class="text-xs text-gray-600">09:15 AM</span></td>
<td class="p-4">
<div class="flex items-center gap-3">
<div class="size-8 rounded-full bg-cover bg-center" data-alt="User Avatar" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuDH7jh1WEIux1mfCkqiy6NdaiPzonykmv9KeyMwvhjpK4hx9e7t5Lrr6kasCYMNZK3H4dtTiNd_R79D_lGNJ_myhuVmaIjwsfThu2rC8I11shY9ajAaAyDhdH80oUh5-s-Tpjezw9aCYLB-H-esjbdZXz0sFmSiYRYqJ8_Gvo7YFuVf-rMlkFod0W-ktdf4r41eiqp7NmUAMxgRHqG57WjVz6BpFZMmMsSZkr5dbjKy30X442sVEq0EHo18q_IWuOf4tJrqJxkMsf6r");'></div>
<div>
<p class="text-white font-medium">@SarahQuest</p>
<p class="text-xs text-[#a69db9]">Direct Play</p>
</div>
</div>
</td>
<td class="p-4">
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md bg-[#2e2839] text-gray-300 text-xs border border-white/5">
<span class="material-symbols-outlined text-[14px] text-primary">quiz</span>
History Buffs
</span>
</td>
<td class="p-4 text-right font-bold text-green-400 font-display">+$3.50</td>
<td class="p-4 pr-6 text-right">
<span class="inline-flex items-center gap-1 px-2 py-1 rounded-full bg-green-500/10 text-green-400 text-xs font-medium border border-green-500/20">
<span class="w-1.5 h-1.5 rounded-full bg-green-500"></span>
Paid
</span>
</td>
</tr>
<!-- Row 3 (Pending) -->
<tr class="group hover:bg-white/[0.02] transition-colors">
<td class="p-4 pl-6 text-[#a69db9] whitespace-nowrap">Oct 23, 2023 <br/><span class="text-xs text-gray-600">11:50 PM</span></td>
<td class="p-4">
<div class="flex items-center gap-3">
<div class="size-8 rounded-full bg-gradient-to-tr from-purple-500 to-blue-500 flex items-center justify-center text-white font-bold text-xs" data-alt="Default Avatar">JD</div>
<div>
<p class="text-white font-medium">@JohnDoe99</p>
<p class="text-xs text-[#a69db9]">Challenge Mode</p>
</div>
</div>
</td>
<td class="p-4">
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md bg-[#2e2839] text-gray-300 text-xs border border-white/5">
<span class="material-symbols-outlined text-[14px] text-primary">quiz</span>
Sci-Fi Movies
</span>
</td>
<td class="p-4 text-right font-bold text-yellow-500 font-display">+$12.00</td>
<td class="p-4 pr-6 text-right">
<span class="inline-flex items-center gap-1 px-2 py-1 rounded-full bg-yellow-500/10 text-yellow-500 text-xs font-medium border border-yellow-500/20">
<span class="w-1.5 h-1.5 rounded-full bg-yellow-500 animate-pulse"></span>
Processing
</span>
</td>
</tr>
<!-- Row 4 (Withdrawal) -->
<tr class="group hover:bg-white/[0.02] transition-colors bg-white/[0.01]">
<td class="p-4 pl-6 text-[#a69db9] whitespace-nowrap">Oct 22, 2023 <br/><span class="text-xs text-gray-600">02:00 PM</span></td>
<td class="p-4">
<div class="flex items-center gap-3">
<div class="p-1.5 bg-red-500/10 rounded-md text-red-400">
<span class="material-symbols-outlined text-lg">arrow_outward</span>
</div>
<div>
<p class="text-white font-medium">Withdrawal</p>
<p class="text-xs text-[#a69db9]">To Bank ****4590</p>
</div>
</div>
</td>
<td class="p-4">
<span class="text-xs text-[#a69db9]">Ref: #TXN-998212</span>
</td>
<td class="p-4 text-right font-bold text-white/60 font-display">-$500.00</td>
<td class="p-4 pr-6 text-right">
<span class="inline-flex items-center gap-1 px-2 py-1 rounded-full bg-gray-500/10 text-gray-400 text-xs font-medium border border-gray-500/20">
<span class="material-symbols-outlined text-[14px]">done_all</span>
Completed
</span>
</td>
</tr>
<!-- Row 5 -->
<tr class="group hover:bg-white/[0.02] transition-colors">
<td class="p-4 pl-6 text-[#a69db9] whitespace-nowrap">Oct 21, 2023 <br/><span class="text-xs text-gray-600">04:30 PM</span></td>
<td class="p-4">
<div class="flex items-center gap-3">
<div class="size-8 rounded-full bg-cover bg-center" data-alt="User Avatar" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuDDU7kKUFRjDtMrbnRBFHxncK1Tcbc6akjXyg1pIFzlON2edTDoikCqKvKBDYNu4NB3cqcVsI0bJu7MVvHmWEzztHNx8hene-X1JblNs4tNGCIUVef7fsPgTPC3HcxH7bcOP3e_PjUlKGfgqQtGaelDfaUPvB9-VjUJFceGzPr-K3XqDxmcVqXcS_VnNFD3FtwqViM9uG4Z7fJBl5Sf7gN3F2621TjcQuwa65mDYvcnwmRXtRTsytm0II5Sbh1ks3w_9PqZq504EyGq");'></div>
<div>
<p class="text-white font-medium">@MikeSpeed</p>
<p class="text-xs text-[#a69db9]">Tournament Entry</p>
</div>
</div>
</td>
<td class="p-4">
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md bg-[#2e2839] text-gray-300 text-xs border border-white/5">
<span class="material-symbols-outlined text-[14px] text-primary">trophy</span>
Mega Quiz Cup
</span>
</td>
<td class="p-4 text-right font-bold text-green-400 font-display">+$8.75</td>
<td class="p-4 pr-6 text-right">
<span class="inline-flex items-center gap-1 px-2 py-1 rounded-full bg-green-500/10 text-green-400 text-xs font-medium border border-green-500/20">
<span class="w-1.5 h-1.5 rounded-full bg-green-500"></span>
Paid
</span>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Pagination -->
<div class="p-4 border-t border-white/5 flex items-center justify-between">
<span class="text-xs text-[#a69db9]">Showing 1-5 of 124 transactions</span>
<div class="flex gap-2">
<button class="p-2 rounded-lg bg-white/5 hover:bg-white/10 text-white disabled:opacity-50 transition-colors">
<span class="material-symbols-outlined text-sm">chevron_left</span>
</button>
<button class="p-2 rounded-lg bg-white/5 hover:bg-white/10 text-white transition-colors">
<span class="material-symbols-outlined text-sm">chevron_right</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</body></html>