<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>QuizQuest - Blog & Updates</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&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>
<!-- Theme Config -->
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#7f13ec",
"primary-glow": "#9f4bf2",
"background-light": "#f7f6f8",
"background-dark": "#050505", // Deepest charcoal/black as requested
"surface-dark": "#121212",
"surface-highlight": "#1a1625",
"accent-cyan": "#00f0ff",
"accent-pink": "#ff0099",
},
fontFamily: {
"display": ["Space Grotesk", "sans-serif"],
"sans": ["Space Grotesk", "sans-serif"], // Enforcing Space Grotesk everywhere for the cyber feel
},
borderRadius: {"DEFAULT": "1rem", "lg": "1.5rem", "xl": "2rem", "2xl": "2.5rem", "full": "9999px"},
backgroundImage: {
'cyber-grid': "linear-gradient(rgba(127, 19, 236, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(127, 19, 236, 0.1) 1px, transparent 1px)",
},
animation: {
'ticker': 'ticker 30s linear infinite',
'pulse-glow': 'pulse-glow 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
},
keyframes: {
ticker: {
'0%': { transform: 'translateX(100%)' },
'100%': { transform: 'translateX(-100%)' }
},
'pulse-glow': {
'0%, 100%': { opacity: '1', boxShadow: '0 0 20px rgba(127, 19, 236, 0.5)' },
'50%': { opacity: '.8', boxShadow: '0 0 10px rgba(127, 19, 236, 0.2)' },
}
}
},
},
}
</script>
<style>
/* Custom scrollbar for cyber feel */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #050505;
}
::-webkit-scrollbar-thumb {
background: #362348;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #7f13ec;
}
.glass-panel {
background: rgba(18, 18, 18, 0.7);
backdrop-filter: blur(12px);
border: 1px solid rgba(127, 19, 236, 0.2);
}
.neon-text {
text-shadow: 0 0 10px rgba(127, 19, 236, 0.6), 0 0 20px rgba(127, 19, 236, 0.3);
}
.card-hover:hover {
transform: translateY(-4px);
box-shadow: 0 0 30px rgba(127, 19, 236, 0.3);
border-color: #7f13ec;
}
</style>
</head>
<body class="bg-background-dark text-slate-100 font-display min-h-screen flex flex-col overflow-x-hidden selection:bg-primary selection:text-white">
<!-- Top Navigation -->
<nav class="sticky top-0 z-50 glass-panel border-b border-white/5">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-20">
<!-- Logo -->
<div class="flex items-center gap-4">
<div class="size-10 text-primary animate-pulse-glow rounded-full flex items-center justify-center bg-primary/10">
<span class="material-symbols-outlined text-[28px]">sports_esports</span>
</div>
<span class="text-white text-2xl font-bold tracking-tight neon-text">QuizQuest</span>
</div>
<!-- Desktop Menu -->
<div class="hidden md:flex items-center gap-8">
<a class="text-slate-300 hover:text-primary transition-colors text-sm font-medium uppercase tracking-widest" href="#">Home</a>
<a class="text-slate-300 hover:text-primary transition-colors text-sm font-medium uppercase tracking-widest" href="#">Quests</a>
<a class="text-slate-300 hover:text-primary transition-colors text-sm font-medium uppercase tracking-widest" href="#">Leaderboard</a>
<a class="text-white text-sm font-bold uppercase tracking-widest border-b-2 border-primary pb-1" href="#">Uplink</a>
</div>
<!-- Actions -->
<div class="hidden md:flex items-center gap-6">
<button class="text-slate-300 hover:text-white transition-colors">
<span class="material-symbols-outlined">search</span>
</button>
<a class="relative inline-flex items-center justify-center px-6 py-2 overflow-hidden font-bold text-white transition-all duration-300 bg-primary rounded-full group hover:bg-primary-glow hover:shadow-[0_0_20px_rgba(127,19,236,0.6)]" href="#">
<span class="absolute w-0 h-0 transition-all duration-500 ease-out bg-white rounded-full group-hover:w-56 group-hover:h-56 opacity-10"></span>
<span class="relative flex items-center gap-2">
<span class="material-symbols-outlined text-[18px]">login</span>
LOGIN
</span>
</a>
</div>
<!-- Mobile menu button -->
<div class="md:hidden flex items-center">
<button class="text-slate-300 hover:text-white">
<span class="material-symbols-outlined">menu</span>
</button>
</div>
</div>
</div>
</nav>
<!-- Breaking News Ticker -->
<div class="bg-primary/10 border-y border-primary/20 overflow-hidden py-2 relative">
<div class="absolute inset-y-0 left-0 w-20 bg-gradient-to-r from-background-dark to-transparent z-10"></div>
<div class="absolute inset-y-0 right-0 w-20 bg-gradient-to-l from-background-dark to-transparent z-10"></div>
<div class="whitespace-nowrap animate-ticker flex items-center gap-12 text-sm font-mono text-primary-glow">
<span class="flex items-center gap-2"><span class="material-symbols-outlined text-[16px] text-accent-cyan">bolt</span> BREAKING: User 'StarGazer' hits 10k points!</span>
<span class="flex items-center gap-2"><span class="material-symbols-outlined text-[16px] text-accent-pink">new_releases</span> New Quiz Pack: 'Retro Wave' drops Friday</span>
<span class="flex items-center gap-2"><span class="material-symbols-outlined text-[16px] text-accent-cyan">dns</span> Server Maintenance scheduled for 0300 UTC</span>
<span class="flex items-center gap-2"><span class="material-symbols-outlined text-[16px] text-accent-pink">trophy</span> Community Challenge: 'Cyber Punks' starts now</span>
</div>
</div>
<!-- Main Content Wrapper with Grid Background -->
<main class="flex-grow relative w-full bg-background-dark bg-[size:40px_40px] bg-cyber-grid">
<!-- Radial Gradient Overlay -->
<div class="absolute inset-0 bg-gradient-to-b from-background-dark via-transparent to-background-dark pointer-events-none"></div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 relative z-10">
<!-- Header Section -->
<header class="mb-16 text-center relative">
<div class="inline-block px-4 py-1 rounded-full border border-primary/30 bg-primary/5 text-primary text-xs font-bold uppercase tracking-[0.2em] mb-4 backdrop-blur-sm">
Transmission Log
</div>
<h1 class="text-5xl md:text-7xl font-bold text-white mb-6 tracking-tight">
<span class="text-transparent bg-clip-text bg-gradient-to-r from-white via-slate-200 to-slate-500">SYSTEM</span>
<span class="text-transparent bg-clip-text bg-gradient-to-r from-primary to-accent-pink neon-text">UPDATES</span>
</h1>
<p class="text-slate-400 text-lg max-w-2xl mx-auto">
Stay synchronized with the latest strategies, patch notes, and community intel. Accessing secure data stream...
</p>
</header>
<!-- Featured Hero Layout -->
<section class="mb-20 grid grid-cols-1 lg:grid-cols-12 gap-8 items-center">
<!-- Text Content -->
<div class="lg:col-span-7 order-2 lg:order-1">
<div class="glass-panel rounded-2xl p-8 lg:p-12 relative overflow-hidden group">
<!-- Decorative glow -->
<div class="absolute -right-20 -top-20 w-64 h-64 bg-primary/20 rounded-full blur-[80px] group-hover:bg-primary/30 transition-all duration-500"></div>
<div class="relative z-10">
<div class="flex items-center gap-3 mb-6">
<span class="px-3 py-1 rounded-full bg-accent-pink/20 text-accent-pink text-xs font-bold uppercase tracking-wider border border-accent-pink/20">Featured Intel</span>
<span class="text-slate-500 text-sm flex items-center gap-1">
<span class="material-symbols-outlined text-[16px]">schedule</span> 2 hrs ago
</span>
</div>
<h2 class="text-3xl md:text-5xl font-bold text-white mb-6 leading-tight group-hover:text-primary-glow transition-colors">
How to Dominate the Leaderboard: Top 5 Strategies
</h2>
<p class="text-slate-300 text-lg mb-8 leading-relaxed">
Master the art of the speed bonus and learn when to deploy your lifelines. Our top players reveal the secrets behind their massive scores in this exclusive deep dive.
</p>
<button class="flex items-center gap-3 text-white font-bold bg-surface-highlight hover:bg-primary border border-white/10 hover:border-primary rounded-full px-8 py-4 transition-all duration-300 group/btn">
<span>INITIALIZE READ</span>
<span class="material-symbols-outlined group-hover/btn:translate-x-1 transition-transform">arrow_forward</span>
</button>
</div>
</div>
</div>
<!-- 3D Visual -->
<div class="lg:col-span-5 order-1 lg:order-2 flex justify-center relative">
<!-- Abstract 3D shape placeholder -->
<div class="relative w-full aspect-square max-w-[400px]">
<div class="absolute inset-0 bg-primary/30 blur-[100px] rounded-full animate-pulse-glow"></div>
<img alt="Abstract neon 3D geometric shapes glowing in dark space" class="relative z-10 w-full h-full object-cover rounded-2xl border border-white/10 shadow-2xl mix-blend-screen opacity-90 mask-image-gradient" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCnO_Me6t4Vne4L-69mpb1oEE4othFoEN6aedoM3UAFeHuE_uvtLLgHAd1mzVtN8zL2kR_3XgB60oSU6oe-vd7oBJTdKntkyWqxnoiQzDNVtpzereqLar1jeDrsgdYQsCm8dXwh76-gtPn0KN0jRJkU9d3ynyi3TnqPs9Of-3zA8YsTW39VwJPic2f9cNMn-QEkCgmMRKdag_FxnBxE7GsNIJmana1Vn89sEE0dJxiWLl2UEBFRZhgsYYeowOcolYf1cT92b4UB" style="mask-image: linear-gradient(to bottom, black 80%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);"/>
</div>
</div>
</section>
<!-- Filters & Search -->
<section class="mb-12 flex flex-col md:flex-row justify-between items-center gap-6">
<div class="flex flex-wrap gap-3 justify-center md:justify-start">
<button class="px-6 py-2 rounded-full bg-primary text-white font-medium text-sm shadow-[0_0_15px_rgba(127,19,236,0.4)] transition-all">
All Data
</button>
<button class="px-6 py-2 rounded-full bg-surface-highlight border border-white/10 text-slate-300 hover:text-white hover:border-primary/50 font-medium text-sm transition-all hover:shadow-[0_0_10px_rgba(127,19,236,0.2)]">
Strategy
</button>
<button class="px-6 py-2 rounded-full bg-surface-highlight border border-white/10 text-slate-300 hover:text-white hover:border-primary/50 font-medium text-sm transition-all hover:shadow-[0_0_10px_rgba(127,19,236,0.2)]">
Patch Notes
</button>
<button class="px-6 py-2 rounded-full bg-surface-highlight border border-white/10 text-slate-300 hover:text-white hover:border-primary/50 font-medium text-sm transition-all hover:shadow-[0_0_10px_rgba(127,19,236,0.2)]">
Community
</button>
</div>
<div class="relative w-full md:w-auto min-w-[300px]">
<span class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-500 material-symbols-outlined">search</span>
<input class="w-full bg-surface-highlight border border-white/10 rounded-full py-3 pl-12 pr-6 text-white placeholder-slate-500 focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all" placeholder="Search database..." type="text"/>
</div>
</section>
<!-- Grid Content -->
<section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-20">
<!-- Card 1 -->
<article class="group bg-surface-dark border border-white/5 rounded-xl overflow-hidden hover:border-primary/50 transition-all duration-300 card-hover flex flex-col h-full">
<div class="relative h-48 overflow-hidden">
<div class="absolute top-4 left-4 z-20">
<span class="px-3 py-1 bg-black/60 backdrop-blur-md rounded-full text-xs font-bold text-white border border-white/10 flex items-center gap-1">
<span class="w-2 h-2 rounded-full bg-accent-cyan"></span> Community
</span>
</div>
<img class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700 opacity-80 group-hover:opacity-100" data-alt="Cyberpunk gamer setup with neon lights" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCTjGV5ou0VDdifIBAupmhmZRg2euDYa993XuVmwWXif0Fm-UNl8wEgAmBTbFj0mNnyvGQbb9z_hACrRTqnqD-II1YYMUcMd63NXoUmAydmCuc63xi01MZI1AsgajLNmIZy3scVPPPQdJ1tQXdHC58e0l3RhhT0q7hL5Wr1XxhSJVrCH5dyX58PaQ1ecnjgNj2ZXUaI4KAKMQXGUkxdwi3Y926j5_v8azC8BNwowSFlFFSV6whmQPY36vqfXHug_iNv22MuA5j6"/>
<div class="absolute inset-0 bg-gradient-to-t from-surface-dark to-transparent opacity-90"></div>
</div>
<div class="p-6 flex flex-col flex-grow">
<h3 class="text-xl font-bold text-white mb-3 group-hover:text-accent-cyan transition-colors">Weekly Winner Stories: Meet the Champion</h3>
<p class="text-slate-400 text-sm mb-6 flex-grow">An interview with 'CyberNinja', the first player to complete the Void Quest without a single error.</p>
<div class="flex items-center justify-between pt-4 border-t border-white/5 mt-auto">
<span class="text-xs text-slate-500 font-mono">ID: #8821</span>
<a class="text-sm font-bold text-primary hover:text-white flex items-center gap-1 transition-colors" href="#">
READ STORY <span class="material-symbols-outlined text-[16px]">chevron_right</span>
</a>
</div>
</div>
</article>
<!-- Card 2 -->
<article class="group bg-surface-dark border border-white/5 rounded-xl overflow-hidden hover:border-primary/50 transition-all duration-300 card-hover flex flex-col h-full">
<div class="relative h-48 overflow-hidden">
<div class="absolute top-4 left-4 z-20">
<span class="px-3 py-1 bg-black/60 backdrop-blur-md rounded-full text-xs font-bold text-white border border-white/10 flex items-center gap-1">
<span class="w-2 h-2 rounded-full bg-accent-pink"></span> Updates
</span>
</div>
<img class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700 opacity-80 group-hover:opacity-100" data-alt="Retro computer screen displaying code and data" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBv7FkkHnAJgNBSumkIqIsGs3PAoDskimqh5e1-bDUoGrpNxpE5PDxMZvZmtzR12BEiFU2ZY2HGoG7pzoePoKKVDq3nbXyV-ZuJ-KfwcquMVXWDXgNd2XpQ31YP-L3GENS_PT6_f52C-HRp_rtoc2jT0FhIIJYvGRCRFD_F7KaRsWOIMFtbm60au5IgBFrxsRzUVB_Gjz9vgBjk42NN4Ji0Agll25rihyHyUxHkUXSC5NbMZCkYb5y1FYHo7AIIVM5uZx3OWbSL"/>
<div class="absolute inset-0 bg-gradient-to-t from-surface-dark to-transparent opacity-90"></div>
</div>
<div class="p-6 flex flex-col flex-grow">
<h3 class="text-xl font-bold text-white mb-3 group-hover:text-accent-pink transition-colors">Patch Notes v2.4: Faster Load Times</h3>
<p class="text-slate-400 text-sm mb-6 flex-grow">System optimization complete. We've reduced lobby load times by 40% and squashed the 'infinite spin' bug.</p>
<div class="flex items-center justify-between pt-4 border-t border-white/5 mt-auto">
<span class="text-xs text-slate-500 font-mono">ID: #8822</span>
<a class="text-sm font-bold text-primary hover:text-white flex items-center gap-1 transition-colors" href="#">
VIEW LOGS <span class="material-symbols-outlined text-[16px]">chevron_right</span>
</a>
</div>
</div>
</article>
<!-- Card 3 -->
<article class="group bg-surface-dark border border-white/5 rounded-xl overflow-hidden hover:border-primary/50 transition-all duration-300 card-hover flex flex-col h-full">
<div class="relative h-48 overflow-hidden">
<div class="absolute top-4 left-4 z-20">
<span class="px-3 py-1 bg-black/60 backdrop-blur-md rounded-full text-xs font-bold text-white border border-white/10 flex items-center gap-1">
<span class="w-2 h-2 rounded-full bg-primary"></span> Behind Scenes
</span>
</div>
<img class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700 opacity-80 group-hover:opacity-100" data-alt="Abstract dark purple fluid shapes" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAp3D2r0Huj47kvKyjZh5kAiLjXZlZMtiwZMuzFmPv9eMoZAPRylcYaREkJJyEME9pdkLq78MkWDb4B9icToVtqvrX1Dk7-z9IHF_rpSmPTVbTzZZOQkSCmSQ27xODbvp-EnKCHN-6T9PzaBcozQ6yKgLpV-mZ85g20BtWQ5vGBOucO1198UThiWBMBmEq8QJ_Dl35lOkq2PYcUUlKEqgIysZ_9yV2aVn3e1A4EejyGvGqK-AYpKDgmTkqE_dWPpM_F-ztT9JN9"/>
<div class="absolute inset-0 bg-gradient-to-t from-surface-dark to-transparent opacity-90"></div>
</div>
<div class="p-6 flex flex-col flex-grow">
<h3 class="text-xl font-bold text-white mb-3 group-hover:text-primary-glow transition-colors">Designing the Cyber-Lobby</h3>
<p class="text-slate-400 text-sm mb-6 flex-grow">A look at the concept art and 3D modeling process that brought our new main menu to life.</p>
<div class="flex items-center justify-between pt-4 border-t border-white/5 mt-auto">
<span class="text-xs text-slate-500 font-mono">ID: #8823</span>
<a class="text-sm font-bold text-primary hover:text-white flex items-center gap-1 transition-colors" href="#">
EXPLORE <span class="material-symbols-outlined text-[16px]">chevron_right</span>
</a>
</div>
</div>
</article>
<!-- Card 4 -->
<article class="group bg-surface-dark border border-white/5 rounded-xl overflow-hidden hover:border-primary/50 transition-all duration-300 card-hover flex flex-col h-full">
<div class="relative h-48 overflow-hidden">
<div class="absolute top-4 left-4 z-20">
<span class="px-3 py-1 bg-black/60 backdrop-blur-md rounded-full text-xs font-bold text-white border border-white/10 flex items-center gap-1">
<span class="w-2 h-2 rounded-full bg-accent-cyan"></span> Strategy
</span>
</div>
<img class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700 opacity-80 group-hover:opacity-100" data-alt="Cybernetic brain or neural network visualization" src="https://lh3.googleusercontent.com/aida-public/AB6AXuApwbThyzrIRqcq1YfIY1K0k_yyAbFZSeOFJUPxH8rntdN_-VxJfODL8NoSRCcoqdvk9PcaNPbCWMsSNrBqkSDCTENqUiYCBFB2yFHJOGZqvcZdzChW8B24WnOTnT_Yn4GYPNY5Mez_7GUtvZenbe-XT7Kgpv9UUgjugMvrldlaY85JWFdY4z7mh_KCU_8fr6NhmDvMQayMn_VgomPeucdkVsTg81mWcK9gddAOIKjb60y48eY0h_KdeUsBL4eHY2dEHZ5H365Z"/>
<div class="absolute inset-0 bg-gradient-to-t from-surface-dark to-transparent opacity-90"></div>
</div>
<div class="p-6 flex flex-col flex-grow">
<h3 class="text-xl font-bold text-white mb-3 group-hover:text-accent-cyan transition-colors">Understanding the Combo Multiplier</h3>
<p class="text-slate-400 text-sm mb-6 flex-grow">Don't break the chain. Here's the mathematical breakdown of how combos can triple your XP gain.</p>
<div class="flex items-center justify-between pt-4 border-t border-white/5 mt-auto">
<span class="text-xs text-slate-500 font-mono">ID: #8824</span>
<a class="text-sm font-bold text-primary hover:text-white flex items-center gap-1 transition-colors" href="#">
ANALYZE <span class="material-symbols-outlined text-[16px]">chevron_right</span>
</a>
</div>
</div>
</article>
<!-- Card 5 -->
<article class="group bg-surface-dark border border-white/5 rounded-xl overflow-hidden hover:border-primary/50 transition-all duration-300 card-hover flex flex-col h-full">
<div class="relative h-48 overflow-hidden">
<div class="absolute top-4 left-4 z-20">
<span class="px-3 py-1 bg-black/60 backdrop-blur-md rounded-full text-xs font-bold text-white border border-white/10 flex items-center gap-1">
<span class="w-2 h-2 rounded-full bg-accent-pink"></span> Event
</span>
</div>
<img class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700 opacity-80 group-hover:opacity-100" data-alt="Concert crowd with neon lights" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBPF_WrMjykGmmnLVZMeTedvYoVTC0guowoqSLYbFn1P36Lj3kQct68xWi8rPZZIrxvB7YB04Bu7dtFhZITjPsQXWkKpM5S3sMwIlJ8l8H2TAYNdG7u5YByn9pwzJX7i3rlUTdTV5hY9ty92TsZkIx0G52dww29Hh5mRMz7MHQYkjHA6_eDAZHEX5LLBqnCXYNagQBAa1om1IFsE3ljm-elsre0rsgl2gHENv2of7W8kNLs0VlQirSDRgLULN21E_1UoWctzKs7"/>
<div class="absolute inset-0 bg-gradient-to-t from-surface-dark to-transparent opacity-90"></div>
</div>
<div class="p-6 flex flex-col flex-grow">
<h3 class="text-xl font-bold text-white mb-3 group-hover:text-accent-pink transition-colors">Summer Showdown: Registration Open</h3>
<p class="text-slate-400 text-sm mb-6 flex-grow">The biggest tournament of the year is here. Sign up your squad and compete for the 1M point prize pool.</p>
<div class="flex items-center justify-between pt-4 border-t border-white/5 mt-auto">
<span class="text-xs text-slate-500 font-mono">ID: #8825</span>
<a class="text-sm font-bold text-primary hover:text-white flex items-center gap-1 transition-colors" href="#">
REGISTER <span class="material-symbols-outlined text-[16px]">chevron_right</span>
</a>
</div>
</div>
</article>
<!-- Card 6 -->
<article class="group bg-surface-dark border border-white/5 rounded-xl overflow-hidden hover:border-primary/50 transition-all duration-300 card-hover flex flex-col h-full">
<div class="relative h-48 overflow-hidden">
<div class="absolute top-4 left-4 z-20">
<span class="px-3 py-1 bg-black/60 backdrop-blur-md rounded-full text-xs font-bold text-white border border-white/10 flex items-center gap-1">
<span class="w-2 h-2 rounded-full bg-primary"></span> Guides
</span>
</div>
<img class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700 opacity-80 group-hover:opacity-100" data-alt="Virtual reality gaming headset" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB1b9Ea2pnUxIfu3ENJzkly94wvFrrNooBOun7sK4iwMSh9dGtb8kDu_6NO5rVdpWEEUByJZRUGm63eJlJx7J8RO4p1T_7JMLyLRejCj09a7AesauVItq7Waz8uhGL5tRLPHar3DDdWI9uRKCVotLMVoWEOKr0K9pEFHMUeTBmfZcADKf-rgjwk3OVaK4hmNG-qNe0y7A7qCPTm55et3kLwne8-s5FIIVBTEOOQiwA-BCKFOhTS7WpSUrUfvUGdKsqWyd7BCamB"/>
<div class="absolute inset-0 bg-gradient-to-t from-surface-dark to-transparent opacity-90"></div>
</div>
<div class="p-6 flex flex-col flex-grow">
<h3 class="text-xl font-bold text-white mb-3 group-hover:text-primary-glow transition-colors">VR Mode Beta: First Impressions</h3>
<p class="text-slate-400 text-sm mb-6 flex-grow">We invited select users to test the upcoming VR integration. Here is what they had to say about the immersion.</p>
<div class="flex items-center justify-between pt-4 border-t border-white/5 mt-auto">
<span class="text-xs text-slate-500 font-mono">ID: #8826</span>
<a class="text-sm font-bold text-primary hover:text-white flex items-center gap-1 transition-colors" href="#">
WATCH VIDEO <span class="material-symbols-outlined text-[16px]">chevron_right</span>
</a>
</div>
</div>
</article>
</section>
<!-- Newsletter CTA -->
<section class="relative rounded-3xl overflow-hidden border border-white/10">
<div class="absolute inset-0 bg-surface-highlight"></div>
<div class="absolute inset-0 bg-gradient-to-r from-primary/20 to-accent-pink/20 opacity-30"></div>
<!-- Decorative lines -->
<div class="absolute left-0 top-0 w-full h-px bg-gradient-to-r from-transparent via-primary to-transparent"></div>
<div class="absolute left-0 bottom-0 w-full h-px bg-gradient-to-r from-transparent via-accent-pink to-transparent"></div>
<div class="relative z-10 px-6 py-16 md:px-12 md:py-20 flex flex-col md:flex-row items-center justify-between gap-10">
<div class="flex-1 max-w-xl">
<div class="inline-flex items-center gap-2 mb-4 text-accent-cyan text-sm font-bold uppercase tracking-widest">
<span class="w-2 h-2 bg-accent-cyan rounded-full animate-pulse"></span> Inner Circle
</div>
<h2 class="text-3xl md:text-4xl font-bold text-white mb-4">Join the Network</h2>
<p class="text-slate-400">Subscribe to our secure frequency. Get exclusive codes, early access to features, and weekly digest delivered to your inbox.</p>
</div>
<div class="flex-1 w-full max-w-md">
<form class="flex flex-col gap-4">
<div class="relative">
<span class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-500 material-symbols-outlined">mail</span>
<input class="w-full bg-black/40 border border-white/10 rounded-full py-4 pl-12 pr-6 text-white placeholder-slate-500 focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary backdrop-blur-sm transition-all" placeholder="Enter your email address" type="email"/>
</div>
<button class="w-full bg-white text-black font-bold py-4 rounded-full hover:bg-primary hover:text-white transition-all duration-300 shadow-[0_0_20px_rgba(255,255,255,0.2)] hover:shadow-[0_0_30px_rgba(127,19,236,0.6)] uppercase tracking-widest" type="submit">
Initialize Uplink
</button>
</form>
</div>
</div>
</section>
</div>
</main>
<!-- Footer -->
<footer class="bg-black border-t border-white/5 py-12 relative overflow-hidden">
<!-- Background Glow -->
<div class="absolute bottom-0 left-1/2 -translate-x-1/2 w-full max-w-3xl h-64 bg-primary/5 rounded-full blur-[100px] pointer-events-none"></div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div class="flex flex-col md:flex-row justify-between items-center gap-8 mb-8">
<div class="flex items-center gap-3">
<div class="size-8 text-slate-400 rounded-full flex items-center justify-center bg-white/5 border border-white/5">
<span class="material-symbols-outlined text-[20px]">sports_esports</span>
</div>
<span class="text-white text-xl font-bold tracking-tight">QuizQuest</span>
</div>
<div class="flex items-center gap-6">
<a class="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center text-slate-400 hover:bg-primary hover:text-white hover:scale-110 transition-all" href="#">
<svg class="w-5 h-5 fill-current" viewbox="0 0 24 24"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"></path></svg>
</a>
<a class="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center text-slate-400 hover:bg-primary hover:text-white hover:scale-110 transition-all" href="#">
<svg class="w-5 h-5 fill-current" viewbox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"></path></svg>
</a>
<a class="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center text-slate-400 hover:bg-primary hover:text-white hover:scale-110 transition-all" href="#">
<svg class="w-5 h-5 fill-current" viewbox="0 0 24 24"><path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"></path></svg>
</a>
</div>
</div>
<div class="border-t border-white/5 pt-8 flex flex-col md:flex-row justify-between items-center text-xs text-slate-600 font-mono">
<p>© 2023 QuizQuest System. All rights reserved.</p>
<div class="flex gap-6 mt-4 md:mt-0">
<a class="hover:text-primary transition-colors" href="#">Privacy Protocol</a>
<a class="hover:text-primary transition-colors" href="#">Terms of Service</a>
<a class="hover:text-primary transition-colors" href="#">System Status</a>
</div>
</div>
</div>
</footer>
</body></html>