176 lines
4.1 KiB
Text
176 lines
4.1 KiB
Text
---
|
||
import Layout from '../layouts/Layout.astro';
|
||
---
|
||
|
||
<Layout title="AeThex Connect – Next-Gen Gaming Communication">
|
||
<section class="landing-hero">
|
||
<div class="hero-content">
|
||
<img src="/favicon.svg" alt="AeThex Logo" class="hero-logo" />
|
||
<h1 class="hero-title">AeThex Connect</h1>
|
||
<p class="hero-subtitle">Next-generation voice & chat for gamers.<br />Own your identity. Connect everywhere.</p>
|
||
<a href="/login" class="hero-btn">Get Started</a>
|
||
</div>
|
||
</section>
|
||
<section class="landing-features">
|
||
<div class="features-row">
|
||
<div class="feature-card">
|
||
<span class="feature-icon">🔒</span>
|
||
<h3>Private & Secure</h3>
|
||
<p>End-to-end encrypted chat and voice. Your data, your rules.</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<span class="feature-icon">🌐</span>
|
||
<h3>Cross-Platform</h3>
|
||
<p>Works on web, desktop, and mobile. Seamless everywhere.</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<span class="feature-icon">🎮</span>
|
||
<h3>For Gamers</h3>
|
||
<p>Channels, roles, and integrations built for gaming communities.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<footer class="landing-footer">
|
||
<div class="footer-branding">
|
||
<img src="/favicon.svg" alt="AeThex Logo" class="footer-logo" />
|
||
<span class="footer-title">AeThex Connect</span>
|
||
</div>
|
||
<div class="footer-meta">
|
||
<span>© 2026 AeThex Corporation</span>
|
||
<a href="/privacy">Privacy</a>
|
||
<a href="/terms">Terms</a>
|
||
</div>
|
||
</footer>
|
||
</Layout>
|
||
|
||
<style>
|
||
.landing-hero {
|
||
min-height: 70vh;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
|
||
text-align: center;
|
||
}
|
||
.hero-content {
|
||
background: rgba(20, 20, 40, 0.85);
|
||
border-radius: 2rem;
|
||
padding: 3rem 2rem 2.5rem 2rem;
|
||
box-shadow: 0 8px 48px 0 #0f3460cc;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
.hero-logo {
|
||
width: 64px;
|
||
height: 64px;
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
.hero-title {
|
||
font-size: 2.5rem;
|
||
font-weight: 900;
|
||
color: #fff;
|
||
margin-bottom: 0.5rem;
|
||
letter-spacing: 0.04em;
|
||
}
|
||
.hero-subtitle {
|
||
color: #b0c4e0;
|
||
font-size: 1.25rem;
|
||
margin-bottom: 2rem;
|
||
}
|
||
.hero-btn {
|
||
display: inline-block;
|
||
background: linear-gradient(90deg, #00d9ff 0%, #7f53ff 100%);
|
||
color: #fff;
|
||
font-weight: 700;
|
||
padding: 0.9rem 2.2rem;
|
||
border-radius: 999px;
|
||
font-size: 1.1rem;
|
||
text-decoration: none;
|
||
box-shadow: 0 2px 16px #00d9ff44;
|
||
transition: background 0.2s, box-shadow 0.2s;
|
||
}
|
||
.hero-btn:hover {
|
||
background: linear-gradient(90deg, #7f53ff 0%, #00d9ff 100%);
|
||
box-shadow: 0 4px 32px #7f53ff44;
|
||
}
|
||
.landing-features {
|
||
background: #101024;
|
||
padding: 3rem 0 2rem 0;
|
||
}
|
||
.features-row {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 2.5rem;
|
||
flex-wrap: wrap;
|
||
}
|
||
.feature-card {
|
||
background: rgba(30, 30, 60, 0.95);
|
||
border-radius: 1.25rem;
|
||
padding: 2rem 1.5rem;
|
||
min-width: 220px;
|
||
max-width: 300px;
|
||
box-shadow: 0 2px 16px #0f346044;
|
||
text-align: center;
|
||
}
|
||
.feature-icon {
|
||
font-size: 2.2rem;
|
||
margin-bottom: 0.7rem;
|
||
display: block;
|
||
}
|
||
.feature-card h3 {
|
||
color: #7ddaff;
|
||
font-size: 1.2rem;
|
||
font-weight: 700;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
.feature-card p {
|
||
color: #b0c4e0;
|
||
font-size: 1rem;
|
||
}
|
||
.landing-footer {
|
||
background: rgba(20, 20, 40, 0.85);
|
||
border-radius: 1.5rem 1.5rem 0 0;
|
||
margin: 3rem auto 0 auto;
|
||
max-width: 480px;
|
||
padding: 2rem 1.5rem 1.2rem 1.5rem;
|
||
text-align: center;
|
||
box-shadow: 0 2px 24px #0f346044;
|
||
}
|
||
.footer-branding {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 0.75rem;
|
||
margin-bottom: 0.7rem;
|
||
}
|
||
.footer-logo {
|
||
width: 28px;
|
||
height: 28px;
|
||
}
|
||
.footer-title {
|
||
color: #fff;
|
||
font-weight: 800;
|
||
font-size: 1.1rem;
|
||
letter-spacing: 0.04em;
|
||
}
|
||
.footer-meta {
|
||
color: #b0c4e0;
|
||
font-size: 0.95rem;
|
||
display: flex;
|
||
gap: 1.5rem;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
}
|
||
.footer-meta a {
|
||
color: #7ddaff;
|
||
text-decoration: none;
|
||
font-weight: 500;
|
||
transition: color 0.2s;
|
||
}
|
||
.footer-meta a:hover {
|
||
color: #fff;
|
||
text-shadow: 0 0 8px #00d9ff99;
|
||
}
|
||
</style>
|