AeThex-Bot-Master/aethex-bot/public/index.html
sirpiglr 29440a3db0 Update site to showcase new features and statistics
Update the landing page to include the new music player, server backups, and other features, increasing the displayed command count from 60+ to 74+.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: aed2e46d-25bb-4b73-81a1-bb9e8437c261
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 61d0c802-085f-4a87-a6d2-0918e4803b30
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3bdfff67-975a-46ad-9845-fbb6b4a4c4b5/aed2e46d-25bb-4b73-81a1-bb9e8437c261/3DIN02r
Replit-Helium-Checkpoint-Created: true
2025-12-13 08:13:19 +00:00

737 lines
21 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AeThex | Warden - Guardian of the AeThex Ecosystem</title>
<meta name="description" content="Warden is the unified Discord bot that connects the entire AeThex ecosystem. Cross-server XP, unified profiles, federation sync, and enterprise security. Free forever.">
<meta name="keywords" content="Discord bot, XP leveling, Discord moderation, Discord security, anti-nuke, federation, cross-server, AeThex, Warden, community bot">
<meta name="author" content="AeThex">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://bot.aethex.dev/">
<meta property="og:type" content="website">
<meta property="og:url" content="https://bot.aethex.dev/">
<meta property="og:title" content="AeThex | Warden - Guardian of the AeThex Ecosystem">
<meta property="og:description" content="The unified Discord bot that connects the entire AeThex network. Cross-server XP, unified profiles, federation sync, and enterprise security. Free forever.">
<meta property="og:image" content="https://bot.aethex.dev/og-image.png">
<meta property="og:site_name" content="AeThex Warden">
<meta property="og:locale" content="en_US">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="https://bot.aethex.dev/">
<meta name="twitter:title" content="AeThex | Warden - Guardian of the AeThex Ecosystem">
<meta name="twitter:description" content="The unified Discord bot that connects the entire AeThex network. Cross-server XP, unified profiles, federation sync, and enterprise security. Free forever.">
<meta name="twitter:image" content="https://bot.aethex.dev/og-image.png">
<meta name="theme-color" content="#6366f1">
<link rel="icon" href="/logo.png" type="image/png">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "AeThex Warden",
"applicationCategory": "UtilitiesApplication",
"operatingSystem": "Discord",
"description": "The unified Discord bot that connects the entire AeThex ecosystem. Cross-server XP, unified profiles, federation sync, and enterprise security.",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "USD"
},
"author": {
"@type": "Organization",
"name": "AeThex",
"url": "https://aethex.studio"
},
"url": "https://bot.aethex.dev",
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "5",
"ratingCount": "100"
}
}
</script>
<style>
:root {
--background: #030712;
--foreground: #f8fafc;
--card: rgba(15, 23, 42, 0.6);
--card-border: rgba(99, 102, 241, 0.15);
--card-border-hover: rgba(99, 102, 241, 0.4);
--primary: #6366f1;
--primary-light: #818cf8;
--secondary: rgba(30, 41, 59, 0.5);
--muted: #64748b;
--border: rgba(51, 65, 85, 0.5);
--gradient-1: #6366f1;
--gradient-2: #3b82f6;
--gradient-3: #06b6d4;
--success: #10b981;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Courier New', Courier, monospace;
background: var(--background);
color: var(--foreground);
min-height: 100vh;
line-height: 1.6;
}
.bg-grid {
position: fixed;
inset: 0;
background-image:
linear-gradient(rgba(99, 102, 241, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(99, 102, 241, 0.03) 1px, transparent 1px);
background-size: 64px 64px;
pointer-events: none;
z-index: -2;
}
.bg-glow {
position: fixed;
top: -50%;
left: 50%;
transform: translateX(-50%);
width: 150%;
height: 100%;
background: radial-gradient(ellipse at center, rgba(99, 102, 241, 0.15) 0%, transparent 60%);
pointer-events: none;
z-index: -1;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1.5rem;
}
header {
position: sticky;
top: 0;
z-index: 100;
background: rgba(3, 7, 18, 0.8);
backdrop-filter: blur(20px);
border-bottom: 1px solid var(--border);
}
.header-content {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 0;
}
.logo {
display: flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
color: var(--foreground);
}
.logo-icon {
width: 40px;
height: 40px;
border-radius: 8px;
object-fit: contain;
}
.logo-text {
font-size: 1.25rem;
font-weight: 700;
}
.nav-links {
display: flex;
gap: 2rem;
align-items: center;
}
.nav-links a {
color: var(--muted);
text-decoration: none;
font-weight: 500;
font-size: 0.9rem;
transition: color 0.2s;
}
.nav-links a:hover {
color: var(--foreground);
}
.header-buttons {
display: flex;
gap: 0.75rem;
align-items: center;
}
.btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.625rem 1.25rem;
border-radius: 8px;
font-weight: 600;
text-decoration: none;
transition: all 0.2s;
border: none;
cursor: pointer;
font-size: 0.875rem;
font-family: inherit;
}
.btn-primary {
background: linear-gradient(135deg, var(--gradient-1), var(--gradient-2));
color: white;
}
.btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 8px 24px rgba(99, 102, 241, 0.4);
}
.btn-secondary {
background: var(--secondary);
border: 1px solid var(--border);
color: var(--foreground);
}
.btn-secondary:hover {
background: rgba(51, 65, 85, 0.5);
border-color: var(--primary);
}
.btn-outline {
background: transparent;
border: 1px solid var(--primary);
color: var(--primary-light);
}
.btn-outline:hover {
background: rgba(99, 102, 241, 0.1);
}
.btn-lg {
padding: 0.875rem 1.75rem;
font-size: 1rem;
}
.hero {
padding: 6rem 0 4rem;
text-align: center;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background: rgba(99, 102, 241, 0.1);
border: 1px solid rgba(99, 102, 241, 0.3);
border-radius: 9999px;
font-size: 0.8rem;
color: var(--primary-light);
margin-bottom: 2rem;
}
.hero h1 {
font-size: clamp(2.5rem, 6vw, 4rem);
font-weight: 800;
margin-bottom: 1.5rem;
line-height: 1.15;
}
.hero h1 .subtitle-line {
display: block;
font-size: 0.5em;
font-weight: 500;
color: var(--muted);
margin-top: 0.5rem;
}
.text-gradient {
background: linear-gradient(135deg, var(--gradient-1), var(--gradient-2), var(--gradient-3));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero-subtitle {
font-size: 1.15rem;
color: var(--muted);
max-width: 700px;
margin: 0 auto 1rem;
}
.hero-tagline {
font-size: 0.95rem;
color: var(--success);
margin-bottom: 2.5rem;
font-weight: 500;
}
.hero-buttons {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 3rem;
}
.stats-bar {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
max-width: 800px;
margin: 0 auto;
}
.stat-item {
text-align: center;
padding: 1rem;
background: var(--card);
border: 1px solid var(--card-border);
border-radius: 12px;
}
.stat-value {
font-size: 1.75rem;
font-weight: 700;
background: linear-gradient(135deg, var(--gradient-1), var(--gradient-2));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.stat-label {
font-size: 0.8rem;
color: var(--muted);
margin-top: 0.25rem;
}
.section {
padding: 5rem 0;
}
.section-header {
text-align: center;
margin-bottom: 3rem;
}
.section-eyebrow {
font-size: 0.8rem;
color: var(--primary-light);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 0.75rem;
font-weight: 600;
}
.section-title {
font-size: 2.25rem;
font-weight: 700;
margin-bottom: 1rem;
}
.section-subtitle {
color: var(--muted);
font-size: 1.05rem;
max-width: 600px;
margin: 0 auto;
}
.highlights-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.5rem;
margin-bottom: 2.5rem;
}
.highlight-card {
background: var(--card);
border: 1px solid var(--card-border);
border-radius: 16px;
padding: 2rem;
text-align: center;
transition: all 0.3s;
}
.highlight-card:hover {
border-color: var(--card-border-hover);
transform: translateY(-4px);
}
.highlight-icon {
font-size: 2.5rem;
margin-bottom: 1rem;
}
.highlight-card h3 {
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.highlight-card p {
color: var(--muted);
font-size: 0.9rem;
}
.section-cta {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
.use-cases-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.5rem;
}
.use-case-card {
background: var(--card);
border: 1px solid var(--card-border);
border-radius: 16px;
padding: 2rem;
transition: all 0.3s;
}
.use-case-card:hover {
border-color: var(--card-border-hover);
transform: translateY(-4px);
}
.use-case-icon {
font-size: 2rem;
margin-bottom: 1rem;
}
.use-case-card h3 {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.use-case-card p {
color: var(--muted);
font-size: 0.9rem;
}
.cta-section {
padding: 4rem 0;
}
.cta-box {
background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(59, 130, 246, 0.05));
border: 1px solid rgba(99, 102, 241, 0.2);
border-radius: 24px;
padding: 4rem 2rem;
text-align: center;
}
.cta-box h2 {
font-size: 2rem;
font-weight: 700;
margin-bottom: 1rem;
}
.cta-box p {
color: var(--muted);
font-size: 1.1rem;
margin-bottom: 2rem;
max-width: 550px;
margin-left: auto;
margin-right: auto;
}
.cta-buttons {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
footer {
border-top: 1px solid var(--border);
padding: 3rem 0 2rem;
}
.footer-content {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}
.footer-brand {
display: flex;
align-items: center;
gap: 0.75rem;
}
.footer-links {
display: flex;
gap: 2rem;
}
.footer-links a {
color: var(--muted);
text-decoration: none;
font-size: 0.9rem;
transition: color 0.2s;
}
.footer-links a:hover {
color: var(--foreground);
}
.footer-copy {
color: var(--muted);
font-size: 0.85rem;
}
@media (max-width: 768px) {
.nav-links { display: none; }
.stats-bar { grid-template-columns: repeat(2, 1fr); }
.footer-content { flex-direction: column; text-align: center; }
.footer-links { flex-wrap: wrap; justify-content: center; }
}
</style>
</head>
<body>
<div class="bg-grid"></div>
<div class="bg-glow"></div>
<header>
<div class="container header-content">
<a href="/" class="logo">
<img src="/logo.png" alt="AeThex" class="logo-icon">
<span class="logo-text">AeThex | Warden</span>
</a>
<nav class="nav-links">
<a href="/">Home</a>
<a href="/features">Features</a>
<a href="/commands">Commands</a>
<a href="/federation">Federation</a>
<a href="/pricing">Pricing</a>
</nav>
<div class="header-buttons">
<a href="https://discord.com/api/oauth2/authorize?client_id=578971245454950421&permissions=8&scope=bot%20applications.commands" class="btn btn-primary" target="_blank">Add to Server</a>
</div>
</div>
</header>
<main>
<section class="hero">
<div class="container">
<div class="hero-badge">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/><path d="M2 12h20"/></svg>
Guardian of the AeThex Ecosystem
</div>
<h1>
<span class="text-gradient">Warden</span>
<span class="subtitle-line">One Identity. Every Server. Infinite Possibilities.</span>
</h1>
<p class="hero-subtitle">
The unified Discord bot that connects the entire AeThex network. Your XP, achievements, and reputation travel with you across all federated servers.
</p>
<p class="hero-tagline">Free forever. Community powered.</p>
<div class="hero-buttons">
<a href="https://discord.com/api/oauth2/authorize?client_id=578971245454950421&permissions=8&scope=bot%20applications.commands" class="btn btn-primary btn-lg" target="_blank">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>
Add Warden to Your Server
</a>
<a href="/features" class="btn btn-secondary btn-lg">
Explore Features
</a>
</div>
<div class="stats-bar" id="statsBar">
<div class="stat-item">
<div class="stat-value" id="serverCount">-</div>
<div class="stat-label">Linked Servers</div>
</div>
<div class="stat-item">
<div class="stat-value" id="userCount">-</div>
<div class="stat-label">Unified Profiles</div>
</div>
<div class="stat-item">
<div class="stat-value">74+</div>
<div class="stat-label">Commands</div>
</div>
<div class="stat-item">
<div class="stat-value">99.9%</div>
<div class="stat-label">Uptime</div>
</div>
</div>
</div>
</section>
<section class="section">
<div class="container">
<div class="section-header">
<p class="section-eyebrow">Why Warden?</p>
<h2 class="section-title">Everything You Need in <span class="text-gradient">One Bot</span></h2>
<p class="section-subtitle">From leveling systems to enterprise security, Warden has it all.</p>
</div>
<div class="highlights-grid">
<div class="highlight-card">
<div class="highlight-icon">🎵</div>
<h3>Music Player</h3>
<p>Play from YouTube, Spotify, SoundCloud & more. Queue, shuffle, loop, volume control.</p>
</div>
<div class="highlight-card">
<div class="highlight-icon">📊</div>
<h3>Global XP & Leveling</h3>
<p>Earn XP across all servers. Your progress syncs everywhere in the federation.</p>
</div>
<div class="highlight-card">
<div class="highlight-icon">🛡️</div>
<h3>Sentinel Security</h3>
<p>Anti-nuke protection, raid defense, and auto-moderation keep your server safe.</p>
</div>
<div class="highlight-card">
<div class="highlight-icon">💾</div>
<h3>Server Backups</h3>
<p>Full server backups with auto-scheduling. Restore roles, channels & config anytime.</p>
</div>
<div class="highlight-card">
<div class="highlight-icon">🏆</div>
<h3>Achievements & Quests</h3>
<p>Customizable achievements and daily/weekly quests with XP rewards.</p>
</div>
<div class="highlight-card">
<div class="highlight-icon">🎮</div>
<h3>Fun & Games</h3>
<p>Trivia, slots, coinflip, duels, heists, and more to keep your community entertained.</p>
</div>
<div class="highlight-card">
<div class="highlight-icon">💰</div>
<h3>Economy & Shop</h3>
<p>Virtual currency, shop items, trading, and role purchases for engaged communities.</p>
</div>
<div class="highlight-card">
<div class="highlight-icon">🌐</div>
<h3>Cross-Server Sync</h3>
<p>Federation system links multiple servers with shared profiles and roles.</p>
</div>
<div class="highlight-card">
<div class="highlight-icon">🎂</div>
<h3>Birthdays & Events</h3>
<p>Birthday tracking, seasonal events, giveaways, and scheduled announcements.</p>
</div>
</div>
<div class="section-cta">
<a href="/features" class="btn btn-primary">See All Features</a>
<a href="/commands" class="btn btn-outline">Browse Commands</a>
</div>
</div>
</section>
<section class="section" style="background: linear-gradient(180deg, rgba(6, 182, 212, 0.02), transparent);">
<div class="container">
<div class="section-header">
<p class="section-eyebrow">Perfect For</p>
<h2 class="section-title">Built for Every <span class="text-gradient">Community</span></h2>
<p class="section-subtitle">Whatever your server is about, Warden adapts to your needs.</p>
</div>
<div class="use-cases-grid">
<div class="use-case-card">
<div class="use-case-icon">🎮</div>
<h3>Gaming Communities</h3>
<p>Leaderboards, game nights, matchmaking, and competitive rankings.</p>
</div>
<div class="use-case-card">
<div class="use-case-icon">🎧</div>
<h3>Music & Hangouts</h3>
<p>Listen together with full music player, queue management, and DJ controls.</p>
</div>
<div class="use-case-card">
<div class="use-case-icon">🎨</div>
<h3>Creative Studios</h3>
<p>Portfolio showcases, collaboration tools, and creative challenges.</p>
</div>
<div class="use-case-card">
<div class="use-case-icon">💻</div>
<h3>Developer Hubs</h3>
<p>Code sharing, project management, and technical discussions.</p>
</div>
<div class="use-case-card">
<div class="use-case-icon">📚</div>
<h3>Learning Groups</h3>
<p>Study sessions, knowledge sharing, and progress tracking.</p>
</div>
<div class="use-case-card">
<div class="use-case-icon">🏢</div>
<h3>Business Teams</h3>
<p>Server backups, team coordination, and professional moderation.</p>
</div>
</div>
</div>
</section>
<section class="cta-section">
<div class="container">
<div class="cta-box">
<h2>Ready to Transform Your Server?</h2>
<p>Join thousands of communities already using Warden. Free forever, no premium tiers.</p>
<div class="cta-buttons">
<a href="https://discord.com/api/oauth2/authorize?client_id=578971245454950421&permissions=8&scope=bot%20applications.commands" class="btn btn-primary btn-lg" target="_blank">
Add Warden Now
</a>
<a href="https://discord.gg/athx" class="btn btn-secondary btn-lg" target="_blank">
Join Support Server
</a>
</div>
</div>
</div>
</section>
</main>
<footer>
<div class="container footer-content">
<div class="footer-brand">
<img src="/logo.png" alt="AeThex" class="logo-icon" style="width:32px;height:32px;">
<span class="footer-copy">AeThex | Warden</span>
</div>
<div class="footer-links">
<a href="/features">Features</a>
<a href="/commands">Commands</a>
<a href="/dashboard">Dashboard</a>
<a href="https://discord.gg/athx" target="_blank">Discord</a>
<a href="https://aethex.studio" target="_blank">AeThex.studio</a>
</div>
<div class="footer-copy">
&copy; 2025 AeThex. All rights reserved.
</div>
</div>
</footer>
<script>
fetch('/api/bot-stats')
.then(r => r.json())
.then(data => {
document.getElementById('serverCount').textContent = data.guilds || '-';
document.getElementById('userCount').textContent = data.users ? (data.users > 1000 ? Math.floor(data.users/1000) + 'K+' : data.users) : '-';
})
.catch(() => {});
</script>
</body>
</html>