<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Community Social Hub Portal</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Spline+Sans:wght@300;400;500;600;700;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 id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#5b13ec",
"background-light": "#f6f6f8",
"background-dark": "#161022",
"discord": "#5865F2",
"telegram": "#0088cc",
"instagram": "#E1306C",
},
fontFamily: {
"display": ["Spline Sans", "sans-serif"]
},
borderRadius: {
"DEFAULT": "1rem",
"lg": "2rem",
"xl": "3rem",
"full": "9999px"
},
},
},
}
</script>
<style>
body {
font-family: 'Spline Sans', sans-serif;
}
.glass-card {
background: rgba(46, 40, 57, 0.4);
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 min-h-screen flex flex-col font-display">
<!-- Top Navigation Bar -->
<header class="sticky top-0 z-50 w-full border-b border-primary/10 bg-background-light/80 dark:bg-background-dark/80 backdrop-blur-md">
<div class="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
<div class="flex items-center gap-10">
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-primary rounded-xl flex items-center justify-center shadow-lg shadow-primary/20">
<span class="material-symbols-outlined text-white">hub</span>
</div>
<span class="text-xl font-extrabold tracking-tight">Social Hub</span>
</div>
<nav class="hidden md:flex items-center gap-8">
<a class="text-sm font-semibold hover:text-primary transition-colors" href="#">Dashboard</a>
<a class="text-sm font-semibold text-primary" href="#">Community</a>
<a class="text-sm font-semibold hover:text-primary transition-colors" href="#">Quizzes</a>
<a class="text-sm font-semibold hover:text-primary transition-colors" href="#">Leaderboard</a>
</nav>
</div>
<div class="flex items-center gap-6">
<div class="relative hidden lg:block">
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-lg">search</span>
<input class="pl-10 pr-4 py-2 bg-primary/5 border border-primary/10 rounded-full text-sm focus:ring-2 focus:ring-primary focus:border-transparent outline-none w-64 transition-all" placeholder="Search members..." type="text"/>
</div>
<button class="bg-primary hover:bg-primary/90 text-white px-6 py-2.5 rounded-full text-sm font-bold transition-all shadow-lg shadow-primary/30 active:scale-95">
Connect Wallet
</button>
<div class="w-10 h-10 rounded-full border-2 border-primary/20 p-0.5 overflow-hidden">
<img class="w-full h-full object-cover rounded-full" data-alt="User profile avatar with friendly face" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD43sUqVJtlm-k2JgyS-YZJvTA974KH4ThTGjKVQPCb_sutpLmqvvZ7oeRqc56QwbNHu50rCxmUlaDSZ-CsO9UvNS4JQfzSgg3iLytqxZxBUsj8nDyzAn2cdYm_E6oyNv3gWCmxSbhVAMsWZNBSH6tjh2FrJa6yCwYw-BxIR883n5X-DsRZmEkHKAeoWH1hfzLvoAvTXwNKVCGU4qDM4ExfGAbMdLr2RBFePUz54SeUaJaO5Ni9FP21cttBL-2JOqP_Cyg0QNqY-LWA"/>
</div>
</div>
</div>
</header>
<main class="flex-grow max-w-7xl mx-auto px-6 py-12 w-full">
<!-- Hero Section -->
<section class="relative rounded-xl overflow-hidden mb-16 h-[500px] flex items-center">
<div class="absolute inset-0 z-0">
<img class="w-full h-full object-cover" data-alt="Dark futuristic tech background with neon purple lights" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBgoyObcuMiEdlfN4c4XuAck--TP3OAZQs1IRU3ZI5kWXfGd7ncurIW2FKUanBok6u65-5rnKdfcaR5ULDa1bXzcHjvR_TXl_XytAilnBQFIZ6s5_bCUXHpggFMn0SEZg6Jv0UD6TnCcP-rjeK6ny0sWKeowGxrzOOt4WNb2tT1AOg3xDXdkPX0h_PIwsey6Nqa56CuzZc45fsE9VbggKhcuu61DGErYnKdOZkimT2yy5gzydAIJqq7EqEo1MsuRfmaWbefp9fw2Szg"/>
<div class="absolute inset-0 bg-gradient-to-r from-background-dark via-background-dark/80 to-transparent"></div>
</div>
<div class="relative z-10 max-w-2xl pl-12">
<div class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-primary/20 border border-primary/30 text-primary text-xs font-bold uppercase tracking-widest mb-6">
<span class="relative flex h-2 w-2">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span>
<span class="relative inline-flex rounded-full h-2 w-2 bg-primary"></span>
</span>
52.4k Members Active
</div>
<h1 class="text-6xl font-black mb-6 leading-[1.1] tracking-tight text-white">
Join the <span class="text-transparent bg-clip-text bg-gradient-to-r from-primary to-purple-400">Conversation</span>
</h1>
<p class="text-lg text-slate-300 mb-10 leading-relaxed">
Unlock exclusive access to early drops, community events, and daily XP multipliers. Your reputation begins with a single join.
</p>
<div class="flex flex-wrap gap-4">
<button class="bg-primary hover:bg-primary/90 text-white px-8 py-4 rounded-full font-bold text-lg flex items-center gap-2 transition-all shadow-xl shadow-primary/40 group">
Join Discord Now
<span class="material-symbols-outlined transition-transform group-hover:translate-x-1">arrow_forward</span>
</button>
<button class="bg-white/10 hover:bg-white/20 backdrop-blur-md text-white px-8 py-4 rounded-full font-bold text-lg transition-all border border-white/20">
Claim Early Badge
</button>
</div>
</div>
<!-- Floating Achievement -->
<div class="absolute right-12 bottom-12 hidden lg:block glass-card p-6 rounded-xl animate-bounce-slow">
<div class="flex items-center gap-4">
<div class="w-14 h-14 bg-yellow-500/20 rounded-full flex items-center justify-center border border-yellow-500/50">
<span class="material-symbols-outlined text-yellow-500 text-3xl">military_tech</span>
</div>
<div>
<p class="text-xs text-slate-400 font-bold uppercase">Trending Achievement</p>
<p class="text-white font-bold text-lg">Social Butterfly +500 XP</p>
<div class="w-full bg-slate-700 h-1.5 rounded-full mt-2">
<div class="bg-yellow-500 h-full rounded-full w-3/4"></div>
</div>
</div>
</div>
</div>
</section>
<!-- Social Grid -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-16">
<!-- Discord Card -->
<div class="glass-card rounded-xl p-8 group transition-all hover:scale-[1.02] neon-glow relative overflow-hidden">
<div class="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
<span class="material-symbols-outlined text-9xl">forum</span>
</div>
<div class="flex justify-between items-start mb-12">
<div class="w-16 h-16 bg-discord rounded-2xl flex items-center justify-center shadow-lg shadow-discord/20">
<span class="material-symbols-outlined text-white text-4xl">chat_bubble</span>
</div>
<div class="text-right">
<div class="text-3xl font-black text-white">32,401</div>
<div class="text-xs font-bold text-discord uppercase tracking-wider">Verified Members</div>
</div>
</div>
<h3 class="text-2xl font-bold mb-4 text-white">Discord Community</h3>
<p class="text-slate-400 mb-8 line-clamp-2">Participate in weekly AMAs, gain early alpha access, and climb the social tiers for exclusive rewards.</p>
<div class="flex items-center gap-2 mb-8">
<div class="flex -space-x-3">
<img class="w-10 h-10 rounded-full border-4 border-background-dark" data-alt="Discord member avatar placeholder" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBQrM5Ovbs_bRbgdOE6vPaAjU7KLzQfaDp5NPcf6qJ-e8lPTbur6H4oHWXekUJvLpiM_ho5MRLUJqPEG997QJReaBv4QVGFAY59seDEWUO-VV22HfVouHBE113HMnwbISUbEheISS8tZsFJVtzRZJyEG_OgIsyL6LGDHJsajBt-hwrtxRkv-ZOhAwpEym1FR2UpGZeMX0B12yJHUKU7CEswJpCXqR_2MMTpyVyG4VZ6WowxThkW_WB4qTvGYHAc9t6h-gGeX71-gyWR"/>
<img class="w-10 h-10 rounded-full border-4 border-background-dark" data-alt="Discord member avatar placeholder" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCFATFv9LiFBbqZwanEFLW3o7pGeQYzTxeDmGawT-hXksYuvAP5IUXnSs_Xqa2MIqsfdG3qxwwD93s_pDq_jZPbzIAXnTEfBXW9jbw27LWRZU5v8lr6y7-QA06BnceJluUUicB0XswZrbjN-a-HXh3y1z1GJ4GffUgEndL4fMqGPoGltjEGwmaE9vO2yVu-YbwSV9VcbUOcV15mlF3FVkUdxAfkhQ8MeQcciqUQEb5h5fzVu2IOI0YAGtq2attGZjC17OLDuTBaq8sn"/>
<img class="w-10 h-10 rounded-full border-4 border-background-dark" data-alt="Discord member avatar placeholder" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDBI_LKCHt6U9LfTGJyILJCEIFUvDpsmH7LONPxUcC9jjawBhgQ4OZyt9zH97QzdwpkBbLhwQZ2brcwttbRjujBK6DeeFr5t5tabdndsS50QqsfepJTZlF8zCWZsHdb5SSo8fAw5oWuAPr7_sxHHy16sEaMOw5eT4lxhuJ0ZGVRU_mcwjHtdz_EDrmJC0J3EAXv59bsdVPb-jxcwb85e_-Yy86iYSlVksW8UEFND4S6sJwQfUCv27nvMq1RM__EU4xhg1f1soay01UL"/>
</div>
<span class="text-sm font-bold text-slate-500">+1.2k online</span>
</div>
<button class="w-full bg-discord text-white py-4 rounded-xl font-bold flex items-center justify-center gap-2 hover:brightness-110 transition-all">
Enter the Discord
</button>
</div>
<!-- Telegram Card -->
<div class="glass-card rounded-xl p-8 group transition-all hover:scale-[1.02] neon-glow relative overflow-hidden">
<div class="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
<span class="material-symbols-outlined text-9xl">send</span>
</div>
<div class="flex justify-between items-start mb-12">
<div class="w-16 h-16 bg-telegram rounded-2xl flex items-center justify-center shadow-lg shadow-telegram/20">
<span class="material-symbols-outlined text-white text-4xl">send</span>
</div>
<div class="text-right">
<div class="text-3xl font-black text-white">18.2k</div>
<div class="text-xs font-bold text-telegram uppercase tracking-wider">Subscribers</div>
</div>
</div>
<h3 class="text-2xl font-bold mb-4 text-white">Telegram Alerts</h3>
<div class="bg-primary/10 rounded-xl p-4 mb-8 border-l-4 border-telegram">
<p class="text-xs font-bold text-telegram mb-1">RECENT BROADCAST</p>
<p class="text-sm text-slate-300 italic">"New community quests just went live! Don't forget to sync your wallets..."</p>
</div>
<button class="w-full bg-telegram text-white py-4 rounded-xl font-bold flex items-center justify-center gap-2 hover:brightness-110 transition-all">
Subscribe for Updates
</button>
</div>
<!-- Instagram Card -->
<div class="glass-card rounded-xl p-8 group transition-all hover:scale-[1.02] neon-glow relative overflow-hidden">
<div class="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
<span class="material-symbols-outlined text-9xl">photo_camera</span>
</div>
<div class="flex justify-between items-start mb-12">
<div class="w-16 h-16 bg-gradient-to-tr from-yellow-400 via-instagram to-purple-600 rounded-2xl flex items-center justify-center shadow-lg shadow-instagram/20">
<span class="material-symbols-outlined text-white text-4xl">camera_alt</span>
</div>
<div class="text-right">
<div class="text-3xl font-black text-white">45.8k</div>
<div class="text-xs font-bold text-instagram uppercase tracking-wider">Followers</div>
</div>
</div>
<h3 class="text-2xl font-bold mb-4 text-white">Instagram Feed</h3>
<div class="grid grid-cols-3 gap-2 mb-8">
<img class="w-full aspect-square object-cover rounded-lg" data-alt="Community meetup event photo" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBhGbxg7QTtnfbwDgduSEkcSwdmhszYjqpKiLlSf4Qq4XvWJyOkgPCan8vIQ5e217Jv7Upcn0iqQajMglITi9U1V82JOcviM3rvlXPEjKTF2sg_JvGDRSg-3GgMI9KzmI7QoFc-3Lfu3WhOvHUGAK8O4ys_3JxUTJSOzs1CQBFymn1LqHrbCWSpcmK8Pgke8ZyTPjgBbg5ScVkjhgiMKyBZeMYw3gLsZgb29gMkQsPr77QU3mL9BLEh6RrRDXAypg6uJpXI5-c4leWu"/>
<img class="w-full aspect-square object-cover rounded-lg" data-alt="Neon gaming setup photo" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBx2mWdlTJrt1Cr2kkJUMrLl1ERlIUCZTLq7OFzurXVBkeZS95T6WZy3wgHIr5MDHgU-LifqEWsH4LrPK7YqR2tFyq4fLe3TC8VoOVGXD3rfYExGx6T6VxnQnH-6Vkp5EpyFW1eCFotTjS-PVkL21RBhnYNNiKVVNhXambLxv1vgXBES7CVvCJibVjwADQ5Bqijf_sjKiJKNKaUZ_0h7xbCxbthh8kXkstIbXBnhfx-e-JJsVaBh-qibSphNT6d6S0JfY2CfWeYaYM-"/>
<img class="w-full aspect-square object-cover rounded-lg" data-alt="Abstract purple digital art" src="https://lh3.googleusercontent.com/aida-public/AB6AXuArRjrsVcdW3hBiA-8oLCUggKPu8DmNVnAg0bs9IcNAEFteARtzo7ey4N8Jb4dfwfoMXU6heG-cIQ0QyUk3HVvwYP6X0wg5sNkh5KopI4ig4NIGAS-abOiQTJ8RS3m7JxV1sAMApjX-NMYOUszrqWjNWga1U0IKFrrySj49F8S6vrae-zsHHroRMFETvGk7489jPoxGrXqOpmnkSRT25323sK2qydeXAwrSwTtgFJfffSNycCEcCiYYSccPlUHUAts0OCpq8YUXXMg7"/>
</div>
<button class="w-full bg-gradient-to-r from-instagram to-purple-600 text-white py-4 rounded-xl font-bold flex items-center justify-center gap-2 hover:brightness-110 transition-all">
View Gallery
</button>
</div>
</div>
<!-- Ecosystem Stats -->
<section class="mb-16">
<h2 class="text-2xl font-black mb-8 px-2 border-l-4 border-primary">Global Impact</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="glass-card p-8 rounded-xl border border-primary/20">
<p class="text-sm font-bold text-slate-500 uppercase tracking-widest mb-2">Total Value Locked</p>
<p class="text-4xl font-black text-white mb-2">$1.2M+</p>
<p class="text-sm font-bold text-emerald-500 flex items-center gap-1">
<span class="material-symbols-outlined text-sm">trending_up</span>
+14.2% this week
</p>
</div>
<div class="glass-card p-8 rounded-xl border border-primary/20">
<p class="text-sm font-bold text-slate-500 uppercase tracking-widest mb-2">Rewards Claimed</p>
<p class="text-4xl font-black text-white mb-2">240k</p>
<p class="text-sm font-bold text-emerald-500 flex items-center gap-1">
<span class="material-symbols-outlined text-sm">trending_up</span>
+5.1% since yesterday
</p>
</div>
<div class="glass-card p-8 rounded-xl border border-primary/20">
<p class="text-sm font-bold text-slate-500 uppercase tracking-widest mb-2">Daily Active Questers</p>
<p class="text-4xl font-black text-white mb-2">8,500</p>
<p class="text-sm font-bold text-primary flex items-center gap-1">
<span class="material-symbols-outlined text-sm">bolt</span>
High Traffic
</p>
</div>
<div class="glass-card p-8 rounded-xl border border-primary/20">
<p class="text-sm font-bold text-slate-500 uppercase tracking-widest mb-2">Community Proposals</p>
<p class="text-4xl font-black text-white mb-2">42</p>
<p class="text-sm font-bold text-slate-400">12 Pending Votes</p>
</div>
</div>
</section>
<!-- Newsletter / CTA -->
<section class="glass-card rounded-xl p-12 text-center border-2 border-primary/30 relative overflow-hidden">
<div class="absolute inset-0 bg-primary/5 -z-10"></div>
<div class="max-w-2xl mx-auto">
<h2 class="text-3xl font-black mb-4 text-white">Never miss a drop.</h2>
<p class="text-slate-400 mb-10 text-lg">Sign up for our newsletter and get a unique "Founder" role if you join within the next 24 hours.</p>
<form class="flex flex-col sm:flex-row gap-4">
<input class="flex-grow bg-primary/5 border border-primary/20 rounded-full px-8 py-4 text-white focus:ring-2 focus:ring-primary outline-none text-lg" placeholder="Enter your email address" type="email"/>
<button class="bg-primary hover:bg-primary/90 text-white px-10 py-4 rounded-full font-bold text-lg shadow-lg shadow-primary/30" type="submit">
Get Notified
</button>
</form>
</div>
</section>
</main>
<!-- Footer -->
<footer class="bg-background-dark border-t border-primary/10 pt-16 pb-8">
<div class="max-w-7xl mx-auto px-6">
<div class="grid grid-cols-1 md:grid-cols-4 gap-12 mb-16">
<div class="col-span-1 md:col-span-1">
<div class="flex items-center gap-3 mb-6">
<div class="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
<span class="material-symbols-outlined text-white text-sm">hub</span>
</div>
<span class="text-lg font-extrabold tracking-tight text-white">Social Hub</span>
</div>
<p class="text-slate-500 text-sm leading-relaxed">
The ultimate destination for digital communities. Join thousands of users in our gamified social ecosystem.
</p>
</div>
<div>
<h4 class="text-white font-bold mb-6">Platform</h4>
<ul class="space-y-4 text-sm text-slate-500 font-medium">
<li><a class="hover:text-primary" href="#">Dashboard</a></li>
<li><a class="hover:text-primary" href="#">Marketplace</a></li>
<li><a class="hover:text-primary" href="#">Staking</a></li>
<li><a class="hover:text-primary" href="#">Governance</a></li>
</ul>
</div>
<div>
<h4 class="text-white font-bold mb-6">Social</h4>
<ul class="space-y-4 text-sm text-slate-500 font-medium">
<li><a class="hover:text-primary" href="#">Discord</a></li>
<li><a class="hover:text-primary" href="#">Twitter / X</a></li>
<li><a class="hover:text-primary" href="#">Telegram</a></li>
<li><a class="hover:text-primary" href="#">Instagram</a></li>
</ul>
</div>
<div>
<h4 class="text-white font-bold mb-6">Resources</h4>
<ul class="space-y-4 text-sm text-slate-500 font-medium">
<li><a class="hover:text-primary" href="#">Documentation</a></li>
<li><a class="hover:text-primary" href="#">Help Center</a></li>
<li><a class="hover:text-primary" href="#">Terms of Service</a></li>
<li><a class="hover:text-primary" href="#">Privacy Policy</a></li>
</ul>
</div>
</div>
<div class="border-t border-primary/10 pt-8 flex flex-col md:flex-row justify-between items-center gap-6">
<p class="text-slate-600 text-sm">© 2024 Community Social Hub. All rights reserved.</p>
<div class="flex gap-8">
<a class="text-slate-600 hover:text-white transition-colors" href="#">
<span class="material-symbols-outlined">alternate_email</span>
</a>
<a class="text-slate-600 hover:text-white transition-colors" href="#">
<span class="material-symbols-outlined">share</span>
</a>
<a class="text-slate-600 hover:text-white transition-colors" href="#">
<span class="material-symbols-outlined">public</span>
</a>
</div>
</div>
</div>
</footer>
</body></html>