index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ByteBot - Discord Moderation & Leveling Bot</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{
font-family:Inter,sans-serif;
background:#242423;
color:white;
overflow-x:hidden;
}
body::before,body::after{
content:"";
position:fixed;
width:400px;height:400px;
border-radius:50%;
filter:blur(120px);
opacity:.18;
z-index:-1;
animation: float 12s ease-in-out infinite;
}
body::before{background:#3da792;top:-100px;left:-100px;}
body::after{background:#3da792;bottom:-100px;right:-100px;}
@keyframes float{
50%{transform:translateY(60px)}
}
.container{width:90%;max-width:1200px;margin:auto}
nav{
display:flex;justify-content:space-between;align-items:center;
padding:25px 0;
}
.logo{font-size:2rem;font-weight:800;color:#3da792}
.links a{
margin-left:20px;color:#ddd;text-decoration:none;
transition:.3s;
}
.links a:hover{color:#3da792}
.btn{
background:#3da792;
padding:14px 24px;
border-radius:14px;
color:white;
text-decoration:none;
display:inline-block;
transition:.3s;
}
.btn:hover{
transform:translateY(-4px);
box-shadow:0 0 25px rgba(61,167,146,.5);
}
.hero{text-align:center;padding:120px 0}
.hero h1{font-size:4rem;margin-bottom:20px}
.hero p{color:#bbb;max-width:700px;margin:auto}
.stats{
display:flex;justify-content:center;gap:50px;
margin-top:50px;flex-wrap:wrap
}
.stat h2{color:#3da792}
.section{padding:90px 0}
.title{text-align:center;font-size:2.5rem;margin-bottom:40px}
.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:25px
}
.card,.faq{
background:rgba(255,255,255,.05);
backdrop-filter:blur(15px);
padding:30px;
border-radius:20px;
border:1px solid rgba(61,167,146,.15);
transition:.3s;
}
.card:hover,.faq:hover{
transform:translateY(-8px);
box-shadow:0 0 25px rgba(61,167,146,.2);
}
.card h3{color:#3da792;margin-bottom:15px}
.commands{
background:rgba(255,255,255,.05);
padding:30px;
border-radius:20px;
text-align:center;
font-family:monospace;
color:#3da792;
line-height:2;
}
footer{
padding:40px 0;
text-align:center;
color:#aaa;
}
footer a{color:#aaa;text-decoration:none;margin:0 10px}
footer a:hover{color:#3da792}
</style>
</head>
<body>
<div class="container">
<nav>
<div class="logo">ByteBot</div>
<div class="links">
<a href="#">Home</a>
<a href="privacy.html">Privacy Policy</a>
<a href="terms.html">Terms of Service</a>
</div>
</nav>

<section class="hero">
<h1>Manage Your Discord Server With Confidence</h1>
<p>Moderation, leveling, and community management made simple.</p>
<br><br>
<a class="btn" href="https://discord.com/oauth2/authorize?client_id=1517648372293570723&permissions=8&integration_type=0&scope=bot">Invite ByteBot</a>
<div class="stats">
<div class="stat"><h2>1000+</h2><p>Servers</p></div>
<div class="stat"><h2>50K+</h2><p>Members</p></div>
<div class="stat"><h2>99.9%</h2><p>Uptime</p></div>
</div>
</section>

<section class="section">
<h2 class="title">Features</h2>
<div class="grid">
<div class="card"><h3>🛡 Moderation</h3><p>Warn, ban, timeout and log actions.</p></div>
<div class="card"><h3>⭐ Leveling</h3><p>XP, ranks and leaderboards.</p></div>
<div class="card"><h3>⚡ Management</h3><p>Simple slash commands and settings.</p></div>
</div>
</section>

<section class="section">
<h2 class="title">Commands</h2>
<div class="commands">
/warn<br>/kick<br>/ban<br>/purge<br>/rank<br>/leaderboard
</div>
</section>

<footer>
<p>© 2026 ByteBot</p>
<a href="privacy.html">Privacy Policy</a>
<a href="terms.html">Terms of Service</a>
</footer>
</div>
</body>
</html>