<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Social Hub - QuizPortal</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Noto+Sans:wght@400;500;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"/>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<!-- Tailwind Config -->
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#5966f3",
"primary-dark": "#404eed",
"accent-blue": "#1da1f2",
"background-light": "#f6f6f8",
"background-dark": "#0f111a",
"surface-dark": "#181a25",
"surface-glass": "rgba(24, 26, 37, 0.6)",
},
fontFamily: {
"display": ["Space Grotesk", "sans-serif"],
"body": ["Noto Sans", "sans-serif"],
},
borderRadius: {"DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "2xl": "1rem", "full": "9999px"},
animation: {
'float': 'float 6s ease-in-out infinite',
'float-delayed': 'float 6s ease-in-out 3s infinite',
'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
},
keyframes: {
float: {
'0%, 100%': { transform: 'translateY(0)' },
'50%': { transform: 'translateY(-20px)' },
}
}
},
},
}
</script>
<style>
/* Custom Utilities */
.glass-panel {
background: rgba(30, 32, 45, 0.4);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.glass-panel-hover:hover {
background: rgba(89, 102, 243, 0.1);
border-color: rgba(89, 102, 243, 0.3);
transform: translateY(-4px);
transition: all 0.3s ease;
}
.text-gradient {
background: linear-gradient(135deg, #ffffff 0%, #a5b4fc 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.text-gradient-primary {
background: linear-gradient(135deg, #5966f3 0%, #1da1f2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Mesh Gradient Background */
.mesh-bg {
background-color: #0f111a;
background-image:
radial-gradient(at 0% 0%, rgba(89, 102, 243, 0.15) 0px, transparent 50%),
radial-gradient(at 100% 0%, rgba(29, 161, 242, 0.1) 0px, transparent 50%),
radial-gradient(at 100% 100%, rgba(89, 102, 243, 0.1) 0px, transparent 50%);
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-slate-900 dark:text-slate-100 font-display min-h-screen flex flex-col mesh-bg overflow-x-hidden">
<!-- Navbar -->
<header class="sticky top-0 z-50 glass-panel border-b-0 border-b-[#282a39]">
<div class="max-w-[1200px] mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<!-- Logo -->
<div class="flex items-center gap-3 text-white">
<div class="size-8 text-primary">
<svg class="w-full h-full" fill="none" viewbox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<path clip-rule="evenodd" d="M24 18.4228L42 11.475V34.3663C42 34.7796 41.7457 35.1504 41.3601 35.2992L24 42V18.4228Z" fill="currentColor" fill-rule="evenodd"></path>
<path clip-rule="evenodd" d="M24 8.18819L33.4123 11.574L24 15.2071L14.5877 11.574L24 8.18819ZM9 15.8487L21 20.4805V37.6263L9 32.9945V15.8487ZM27 37.6263V20.4805L39 15.8487V32.9945L27 37.6263ZM25.354 2.29885C24.4788 1.98402 23.5212 1.98402 22.646 2.29885L4.98454 8.65208C3.7939 9.08038 3 10.2097 3 11.475V34.3663C3 36.0196 4.01719 37.5026 5.55962 38.098L22.9197 44.7987C23.6149 45.0671 24.3851 45.0671 25.0803 44.7987L42.4404 38.098C43.9828 37.5026 45 36.0196 45 34.3663V11.475C45 10.2097 44.2061 9.08038 43.0155 8.65208L25.354 2.29885Z" fill="currentColor" fill-rule="evenodd"></path>
</svg>
</div>
<h2 class="text-white text-xl font-bold tracking-tight">QuizPortal</h2>
</div>
<!-- Desktop Nav -->
<nav class="hidden md:flex items-center gap-8">
<a class="text-slate-300 hover:text-white text-sm font-medium transition-colors" href="#">Home</a>
<a class="text-slate-300 hover:text-white text-sm font-medium transition-colors" href="#">Quizzes</a>
<a class="text-white text-sm font-bold border-b-2 border-primary pb-0.5" href="#">Community</a>
<a class="text-slate-300 hover:text-white text-sm font-medium transition-colors" href="#">Store</a>
</nav>
<!-- CTA -->
<div class="flex items-center gap-4">
<button class="hidden sm:flex bg-surface-dark hover:bg-slate-800 text-white text-sm font-bold px-4 py-2 rounded-lg transition-colors border border-slate-700">
Log In
</button>
<button class="bg-primary hover:bg-primary-dark text-white text-sm font-bold px-5 py-2 rounded-lg transition-all shadow-[0_0_15px_rgba(89,102,243,0.4)]">
Get Started
</button>
</div>
</div>
</div>
</header>
<main class="flex-grow">
<!-- Hero Section -->
<section class="relative pt-16 pb-24 md:pt-24 md:pb-32 px-4 overflow-hidden">
<!-- Decorative Elements -->
<div class="absolute top-20 left-10 w-24 h-24 bg-primary/20 rounded-full blur-3xl animate-pulse-slow"></div>
<div class="absolute bottom-20 right-10 w-32 h-32 bg-accent-blue/20 rounded-full blur-3xl animate-pulse-slow"></div>
<div class="max-w-6xl mx-auto grid lg:grid-cols-2 gap-12 items-center relative z-10">
<!-- Hero Content -->
<div class="text-center lg:text-left space-y-8">
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-surface-dark border border-slate-700 text-xs font-medium text-slate-300">
<span class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></span>
50,000+ Players Online
</div>
<h1 class="text-5xl md:text-6xl lg:text-7xl font-bold leading-[0.95] tracking-tight">
Level Up Your <br/>
<span class="text-gradient-primary">Social Game.</span>
</h1>
<p class="text-lg text-slate-400 max-w-xl mx-auto lg:mx-0 font-body leading-relaxed">
Connect with the best quiz community on the planet. Get exclusive rewards, join live events, and chat with fellow players in real-time.
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start">
<button class="flex items-center justify-center gap-3 h-14 px-8 bg-[#5865F2] hover:bg-[#4752C4] text-white rounded-xl font-bold text-lg transition-all shadow-lg hover:shadow-[#5865F2]/40 hover:-translate-y-1">
<span class="material-symbols-outlined text-[24px]">chat</span>
Join Discord
</button>
<button class="flex items-center justify-center gap-3 h-14 px-8 bg-surface-dark hover:bg-slate-800 border border-slate-700 text-white rounded-xl font-bold text-lg transition-all hover:-translate-y-1">
<span class="material-symbols-outlined text-[24px] text-[#1DA1F2]">chat_bubble</span>
Follow Updates
</button>
</div>
<div class="pt-4 flex items-center justify-center lg:justify-start gap-4 text-sm text-slate-500 font-body">
<div class="flex -space-x-3">
<img alt="Community member portrait" class="w-10 h-10 rounded-full border-2 border-background-dark" data-alt="User avatar" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBZ4H7-Y6VVLfhWUXNKgD_p_LY5qnxNVQA3cJM6MRZKRAvEGZHQfLBN_CvyVyGlGYCQrndRWQeI6wxH5j5Q25k8t1P3HY0l53e93pFs_azeTtDELqSYwQdL7YqpuZHHXifpHp3nH4_CVdOseCEpbQRO_dCuu8fiwEyb0C8ZiVsnJw1VD64v8X8iuwyhYic-B6AkWGjtp3cnpRiOcue7RvQxjm7OdsYq_1FBPcPyw4p7gYrR8pI0XGHaKXpTbZtf70z6w_qZwg_gH-I"/>
<img alt="Community member portrait" class="w-10 h-10 rounded-full border-2 border-background-dark" data-alt="User avatar" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCBwM_CvoLAfjFho40BUHjBuyiulg6KtlvfgTepiJpCq78R91S1T5lLR_0W2cfmrgaxSwNYehfELMJ087TPyR2LhUdHycLdRmmENHMamVh2pSndX2EkxX48ukdsjjGmGO19vMYVZmkH01rCRBcHdHufi1GR6AiRNUcqyhpkwOItt3dgBMwKB47VVJIY9PV58OO_hrVj8qOnR0O4Y2ApYwbNIhsarzDyq0oTwMpEiibQJn7ejbKL-HVbOsnaCSQ3Y6ylN-F3_zWFecs"/>
<img alt="Community member portrait" class="w-10 h-10 rounded-full border-2 border-background-dark" data-alt="User avatar" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAgp1URgZov3H5ag7bmtCl7d1z2VmDr3ttx9xNjk0Qv2Xa1CyfMnhetJjRtO99ggdf2tHF0oACq4nxITH_iR4AEzzgi_FPxL1cPNhtRr7ND1MeI9v8Mjz3PbK5kxNTjoXeok7t6dgxSkNSgzk3eEzdzPgY2OsS3kOWOA7qCkw9EbbkbACD8cKVZUcQoS3iAhDX9enbgpeqGS1muIAF6v_1FvpaP3KwbLgaALj4nYPklRPFDzqF8czPi6FSDa1Pa2ok3e6iQ5mnujw0"/>
<div class="w-10 h-10 rounded-full border-2 border-background-dark bg-slate-800 flex items-center justify-center text-xs font-bold text-white">+2k</div>
</div>
<p>Joined in the last 24h</p>
</div>
</div>
<!-- Hero Visuals (3D Floating Elements Simulation) -->
<div class="relative h-[400px] hidden lg:block perspective-1000">
<!-- Main Platform Card -->
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-80 h-96 bg-gradient-to-br from-[#2f3136] to-[#202225] rounded-2xl border border-slate-700 shadow-2xl rotate-y-12 rotate-x-6 transform-style-3d z-10 flex flex-col overflow-hidden animate-float">
<div class="h-12 bg-[#202225] border-b border-slate-700 flex items-center px-4 gap-2">
<div class="w-3 h-3 rounded-full bg-red-500"></div>
<div class="w-3 h-3 rounded-full bg-yellow-500"></div>
<div class="w-3 h-3 rounded-full bg-green-500"></div>
</div>
<div class="p-4 space-y-4">
<div class="flex items-center gap-3 bg-[#36393f] p-2 rounded-lg">
<div class="w-8 h-8 rounded-full bg-primary/20 flex items-center justify-center text-primary">#</div>
<div class="flex-1 h-2 bg-slate-600 rounded w-1/2"></div>
</div>
<div class="flex items-center gap-3 bg-[#36393f] p-2 rounded-lg opacity-75">
<div class="w-8 h-8 rounded-full bg-primary/20 flex items-center justify-center text-primary">#</div>
<div class="flex-1 h-2 bg-slate-600 rounded w-3/4"></div>
</div>
<div class="mt-8 space-y-3">
<div class="flex gap-3">
<div class="w-8 h-8 rounded-full bg-purple-500"></div>
<div class="flex-1 space-y-2">
<div class="h-2 bg-slate-500 rounded w-20"></div>
<div class="h-2 bg-slate-600 rounded w-full"></div>
</div>
</div>
<div class="flex gap-3">
<div class="w-8 h-8 rounded-full bg-green-500"></div>
<div class="flex-1 space-y-2">
<div class="h-2 bg-slate-500 rounded w-24"></div>
<div class="h-2 bg-slate-600 rounded w-5/6"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Floating Elements -->
<div class="absolute top-10 right-10 w-20 h-20 bg-surface-dark rounded-2xl border border-slate-700 shadow-xl flex items-center justify-center animate-float-delayed z-20">
<span class="material-symbols-outlined text-4xl text-accent-blue">forum</span>
</div>
<div class="absolute bottom-20 left-0 w-16 h-16 bg-surface-dark rounded-2xl border border-slate-700 shadow-xl flex items-center justify-center animate-float z-20">
<span class="material-symbols-outlined text-3xl text-yellow-400">emoji_events</span>
</div>
<div class="absolute top-40 -left-10 w-14 h-14 bg-primary/20 backdrop-blur-md rounded-full border border-primary/30 flex items-center justify-center animate-float-delayed z-0">
<span class="material-symbols-outlined text-2xl text-primary">campaign</span>
</div>
</div>
</div>
</section>
<!-- Main Content Area: Feed + Benefits + Leaderboard -->
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<div class="grid lg:grid-cols-12 gap-8">
<!-- LEFT COLUMN: Discord Feed (Span 7) -->
<div class="lg:col-span-7 space-y-8">
<div class="flex items-center justify-between mb-2">
<h2 class="text-2xl font-bold text-white flex items-center gap-2">
<span class="material-symbols-outlined text-primary">rss_feed</span>
Latest Announcements
</h2>
<a class="text-sm text-primary hover:text-primary-dark font-medium hover:underline" href="#">View all</a>
</div>
<!-- Feed Card -->
<div class="glass-panel rounded-2xl overflow-hidden p-1">
<div class="bg-[#111218]/80 rounded-xl p-6 space-y-6">
<!-- Post 1 -->
<div class="flex gap-4 group">
<div class="flex flex-col items-center">
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-primary to-purple-600 flex items-center justify-center shadow-lg shadow-primary/20">
<span class="material-symbols-outlined text-white text-sm">campaign</span>
</div>
<div class="w-0.5 h-full bg-slate-800 mt-2 group-last:hidden"></div>
</div>
<div class="pb-6">
<div class="flex items-center gap-2 mb-1">
<span class="text-primary font-bold">@Admin</span>
<span class="px-1.5 py-0.5 rounded text-[10px] bg-primary/20 text-primary uppercase font-bold tracking-wider">Mod</span>
<span class="text-xs text-slate-500">2 hours ago</span>
</div>
<h3 class="text-lg font-bold text-white mb-2">Patch Notes v2.0 Live! š</h3>
<p class="text-slate-400 text-sm leading-relaxed font-body">
The biggest update of the year is here. We've overhauled the matchmaking system, added 500+ new trivia questions, and introduced the new "Speedrun" mode. Jump in and test your knowledge!
</p>
</div>
</div>
<!-- Post 2 -->
<div class="flex gap-4 group">
<div class="flex flex-col items-center">
<div class="w-10 h-10 rounded-full bg-surface-dark border border-slate-700 flex items-center justify-center">
<span class="material-symbols-outlined text-yellow-400 text-sm">trophy</span>
</div>
<div class="w-0.5 h-full bg-slate-800 mt-2 group-last:hidden"></div>
</div>
<div class="pb-6">
<div class="flex items-center gap-2 mb-1">
<span class="text-white font-bold">@CommunityMgr</span>
<span class="text-xs text-slate-500">1 day ago</span>
</div>
<h3 class="text-lg font-bold text-white mb-2">Weekly Quiz Night Winners š</h3>
<p class="text-slate-400 text-sm leading-relaxed font-body">
Congrats to our top 3 players from last night's trivia marathon! <span class="text-primary">@QuizMaster99</span> took the crown with a perfect score. Check the leaderboard for full standings.
</p>
</div>
</div>
<!-- Post 3 -->
<div class="flex gap-4 group">
<div class="flex flex-col items-center">
<div class="w-10 h-10 rounded-full bg-surface-dark border border-slate-700 flex items-center justify-center">
<span class="material-symbols-outlined text-slate-400 text-sm">build</span>
</div>
</div>
<div>
<div class="flex items-center gap-2 mb-1">
<span class="text-white font-bold">@DevTeam</span>
<span class="text-xs text-slate-500">2 days ago</span>
</div>
<h3 class="text-lg font-bold text-white mb-2">Server Maintenance Scheduled</h3>
<p class="text-slate-400 text-sm leading-relaxed font-body">
Servers will be down for approx 30 mins tomorrow at 3AM UTC for routine maintenance. Thanks for your patience!
</p>
</div>
</div>
</div>
<!-- CTA Footer inside card -->
<div class="px-6 py-4 bg-[#5865F2]/10 border-t border-[#5865F2]/20 flex items-center justify-between">
<span class="text-sm font-medium text-slate-300">Don't miss out on live updates</span>
<button class="text-xs font-bold bg-[#5865F2] hover:bg-[#4752C4] text-white px-4 py-2 rounded-lg transition-colors">
Open Discord
</button>
</div>
</div>
<!-- Benefits Grid -->
<div class="grid md:grid-cols-3 gap-4 pt-4">
<div class="glass-panel p-6 rounded-xl glass-panel-hover group cursor-pointer">
<div class="w-12 h-12 bg-purple-500/20 rounded-lg flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
<span class="material-symbols-outlined text-purple-400 text-2xl">redeem</span>
</div>
<h3 class="text-white font-bold mb-2">Exclusive Giveaways</h3>
<p class="text-slate-400 text-xs font-body">Win Nitro, skins, and game keys weekly.</p>
</div>
<div class="glass-panel p-6 rounded-xl glass-panel-hover group cursor-pointer">
<div class="w-12 h-12 bg-yellow-500/20 rounded-lg flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
<span class="material-symbols-outlined text-yellow-400 text-2xl">stadia_controller</span>
</div>
<h3 class="text-white font-bold mb-2">Community Quizzes</h3>
<p class="text-slate-400 text-xs font-body">Private lobbies and events for members.</p>
</div>
<div class="glass-panel p-6 rounded-xl glass-panel-hover group cursor-pointer">
<div class="w-12 h-12 bg-green-500/20 rounded-lg flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
<span class="material-symbols-outlined text-green-400 text-2xl">support_agent</span>
</div>
<h3 class="text-white font-bold mb-2">24/7 Support</h3>
<p class="text-slate-400 text-xs font-body">Direct line to mods and dev team.</p>
</div>
</div>
</div>
<!-- RIGHT COLUMN: Leaderboard & CTA (Span 5) -->
<div class="lg:col-span-5 space-y-8">
<!-- Leaderboard Widget -->
<div class="glass-panel rounded-2xl p-6">
<div class="flex items-center justify-between mb-6">
<h3 class="text-xl font-bold text-white flex items-center gap-2">
<span class="material-symbols-outlined text-yellow-400">leaderboard</span>
Top Contributors
</h3>
<span class="text-xs bg-surface-dark border border-slate-700 px-2 py-1 rounded text-slate-400">This Week</span>
</div>
<div class="space-y-4">
<!-- Rank 1 -->
<div class="flex items-center gap-4 p-3 rounded-xl bg-gradient-to-r from-primary/20 to-transparent border border-primary/30 relative overflow-hidden">
<div class="absolute -left-2 top-0 bottom-0 w-1 bg-primary shadow-[0_0_10px_#5966f3]"></div>
<span class="text-lg font-bold text-white w-6 text-center">1</span>
<img alt="Profile" class="w-10 h-10 rounded-full border border-white/20" data-alt="User Avatar" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCx_zCQ5Z6-FXWhAL9RMv2kQQmSV4mrTNlrC2KUOGuo4n3EVnAYdLKcbNa3pPdckdhIeQCGGhDiqA3ElQOFvgFKOuWxJkKpUPDXHFl_V-3pvZMNrftPME2G5ONMm4INhAg4nKsM8M5sBR_mq2jyZg0Qy7VjwKZgzHaOL9EqiAoZQcnc4vLFLqXyqX34WZzcOnZhIoMN5HSi1QYOKb1IHtsFaztn3r9DOx4ZBY6U9X7JJsVpGo01LkgUhji2gIKo_nRv7kuT8WobTRs"/>
<div class="flex-1">
<p class="text-sm font-bold text-white">NeonRider</p>
<p class="text-xs text-primary">Level 42</p>
</div>
<div class="text-right">
<p class="text-sm font-bold text-white">5,240</p>
<p class="text-[10px] text-slate-400 uppercase">XP</p>
</div>
</div>
<!-- Rank 2 -->
<div class="flex items-center gap-4 p-3 rounded-xl hover:bg-surface-dark/50 transition-colors border border-transparent hover:border-slate-700">
<span class="text-lg font-bold text-slate-400 w-6 text-center">2</span>
<img alt="Profile" class="w-10 h-10 rounded-full border border-white/10" data-alt="User Avatar" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB20Z7S4l30qNi2Pn6xBxwd7-VcXvrjQNwW2yxsoCo9a-zCE3q8pxC6DfOmyEiK8woJgGWVaNE8PgveeNNG8Wd-94QE5iGVr41IAmG3H7kTkFGfjdS-qh_UjGUE7OPbPxfy61ckyQrUOacf8Twoglz6amhQYp8OlfYDYMErXYvEUqTytcbc17UP0hB3FTjkTbkwWbEq6_0w5xYi3fWEi6uxInqZ1rxemq33NtuV7ft76YjX25mM5Mu3u9pAJWcyJ0XzpnHLHBE1vns"/>
<div class="flex-1">
<p class="text-sm font-bold text-slate-200">PixelQueen</p>
<p class="text-xs text-slate-500">Level 38</p>
</div>
<div class="text-right">
<p class="text-sm font-bold text-slate-300">4,100</p>
<p class="text-[10px] text-slate-500 uppercase">XP</p>
</div>
</div>
<!-- Rank 3 -->
<div class="flex items-center gap-4 p-3 rounded-xl hover:bg-surface-dark/50 transition-colors border border-transparent hover:border-slate-700">
<span class="text-lg font-bold text-slate-400 w-6 text-center">3</span>
<img alt="Profile" class="w-10 h-10 rounded-full border border-white/10" data-alt="User Avatar" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDuQCJK8sXSntfCjLGDuDTRzVWqQ_mf_opz93zbPeJJOUriUemPMLlSKXtJcTldE-2Dl_bVukKuY8Go2V0irikOLaJARpFd53pxeSaVcBWP3nm31uqqar7cezQTSRwdh_PlyTl3eF9alhpYVS6XYyQolxvDOPz1O_QqVunh1cCqaXqhkXRprX4p6BesGNKlNdFWLzoiR046wYI0I98RRURxeI90_4MSGTiFgmGkRRIYZ5CRQ0N9xrVmZ3hdtO6Q9qmd8o5M1FGzFHc"/>
<div class="flex-1">
<p class="text-sm font-bold text-slate-200">DataCrunch</p>
<p class="text-xs text-slate-500">Level 35</p>
</div>
<div class="text-right">
<p class="text-sm font-bold text-slate-300">3,850</p>
<p class="text-[10px] text-slate-500 uppercase">XP</p>
</div>
</div>
<!-- Rank 4 -->
<div class="flex items-center gap-4 p-3 rounded-xl hover:bg-surface-dark/50 transition-colors border border-transparent hover:border-slate-700 opacity-70">
<span class="text-lg font-bold text-slate-500 w-6 text-center">4</span>
<div class="w-10 h-10 rounded-full bg-slate-800 flex items-center justify-center text-slate-500 text-xs font-bold">JD</div>
<div class="flex-1">
<p class="text-sm font-bold text-slate-300">JohnDoe_99</p>
<p class="text-xs text-slate-500">Level 31</p>
</div>
<div class="text-right">
<p class="text-sm font-bold text-slate-400">2,900</p>
<p class="text-[10px] text-slate-600 uppercase">XP</p>
</div>
</div>
</div>
<div class="mt-6 pt-4 border-t border-slate-700/50 text-center">
<button class="text-sm text-primary hover:text-white transition-colors flex items-center justify-center gap-1 mx-auto">
View Full Leaderboard
<span class="material-symbols-outlined text-sm">arrow_forward</span>
</button>
</div>
</div>
<!-- Side Promo -->
<div class="relative rounded-2xl overflow-hidden p-8 text-center group">
<div class="absolute inset-0 bg-gradient-to-br from-primary/80 to-purple-900/80 z-0"></div>
<img alt="Gamers playing together" class="absolute inset-0 w-full h-full object-cover mix-blend-overlay opacity-50 z-0" data-alt="Blurred background of gamers" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDRtp2w-hZXFsfyn6tYXZhyJNMFJQxfxcif5I02JAFDXx78e4yr49PTFJjDHYRtCibygwuANjffGNN5_lo0icSDgq1Xr-isIdhblic3Jopv9Hbglvk10yVu0dym3UHGfNZ7xqG9xef_K-VSBFIme7iildXx9QYy6qbsnTEjANwDV8IEYF4PANVeWA--32SjsFy-z9pTQrmnG2MvJ2L37l99S4IkcVrdr1H9vyOzmzdb6vDodtN3ubQ0NkILWyaUtA2-wU1N1at3itg"/>
<div class="relative z-10">
<span class="inline-block p-3 rounded-full bg-white/10 backdrop-blur mb-4">
<span class="material-symbols-outlined text-white text-3xl">rocket_launch</span>
</span>
<h3 class="text-2xl font-bold text-white mb-2">Ready to Launch?</h3>
<p class="text-white/80 text-sm mb-6 font-body">Create your own quiz tournaments and invite your friends today.</p>
<button class="bg-white text-primary font-bold py-3 px-6 rounded-lg shadow-lg hover:shadow-xl hover:scale-105 transition-all w-full">
Create Quiz
</button>
</div>
</div>
</div>
</div>
</section>
<!-- Social Footer Links -->
<section class="border-t border-slate-800 bg-[#0a0c12] py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid md:grid-cols-4 gap-8 mb-8">
<div>
<h4 class="text-white font-bold mb-4">Platform</h4>
<ul class="space-y-2 text-slate-400 text-sm font-body">
<li><a class="hover:text-primary" href="#">Download App</a></li>
<li><a class="hover:text-primary" href="#">Premium Membership</a></li>
<li><a class="hover:text-primary" href="#">Gift Cards</a></li>
</ul>
</div>
<div>
<h4 class="text-white font-bold mb-4">Resources</h4>
<ul class="space-y-2 text-slate-400 text-sm font-body">
<li><a class="hover:text-primary" href="#">Help Center</a></li>
<li><a class="hover:text-primary" href="#">Community Guidelines</a></li>
<li><a class="hover:text-primary" href="#">API Documentation</a></li>
</ul>
</div>
<div>
<h4 class="text-white font-bold mb-4">Company</h4>
<ul class="space-y-2 text-slate-400 text-sm font-body">
<li><a class="hover:text-primary" href="#">About Us</a></li>
<li><a class="hover:text-primary" href="#">Careers</a></li>
<li><a class="hover:text-primary" href="#">Press Kit</a></li>
</ul>
</div>
<div>
<h4 class="text-white font-bold mb-4">Follow Us</h4>
<div class="flex gap-4">
<a class="w-10 h-10 rounded-lg bg-surface-dark hover:bg-[#5865F2] flex items-center justify-center text-slate-400 hover:text-white transition-all border border-slate-800" href="#">
<span class="material-symbols-outlined text-xl">chat</span>
</a>
<a class="w-10 h-10 rounded-lg bg-surface-dark hover:bg-[#1DA1F2] flex items-center justify-center text-slate-400 hover:text-white transition-all border border-slate-800" href="#">
<span class="material-symbols-outlined text-xl">flutter_dash</span> <!-- closest to twitter bird -->
</a>
<a class="w-10 h-10 rounded-lg bg-surface-dark hover:bg-[#FF0000] flex items-center justify-center text-slate-400 hover:text-white transition-all border border-slate-800" href="#">
<span class="material-symbols-outlined text-xl">smart_display</span> <!-- youtube -->
</a>
</div>
</div>
</div>
<div class="border-t border-slate-800 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
<p class="text-slate-500 text-sm font-body">Ā© 2024 QuizPortal Inc. All rights reserved.</p>
<div class="flex gap-6 text-sm text-slate-500 font-body">
<a class="hover:text-slate-300" href="#">Privacy Policy</a>
<a class="hover:text-slate-300" href="#">Terms of Service</a>
</div>
</div>
</div>
</section>
</main>
<!-- Floating Action Button for Mobile -->
<div class="fixed bottom-6 right-6 z-50 md:hidden">
<button class="w-14 h-14 bg-primary text-white rounded-full shadow-lg shadow-primary/40 flex items-center justify-center animate-bounce">
<span class="material-symbols-outlined text-2xl">chat</span>
</button>
</div>
</body></html>