700 lines
22 KiB
HTML
700 lines
22 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 - Metaverse Infrastructure</title>
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400;700;900&display=swap');
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Roboto Mono', monospace;
|
|
background: #0a0a0a;
|
|
color: #e0e0e0;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* Scanline effect */
|
|
body::before {
|
|
content: '';
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: repeating-linear-gradient(
|
|
0deg,
|
|
rgba(0, 0, 0, 0.15),
|
|
rgba(0, 0, 0, 0.15) 1px,
|
|
transparent 1px,
|
|
transparent 2px
|
|
);
|
|
pointer-events: none;
|
|
z-index: 1000;
|
|
}
|
|
|
|
/* Grid background */
|
|
body::after {
|
|
content: '';
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-image:
|
|
linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
|
|
background-size: 50px 50px;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
padding: 0 20px;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Navigation */
|
|
nav {
|
|
padding: 30px 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-bottom: 1px solid #1a1a1a;
|
|
margin-bottom: 80px;
|
|
}
|
|
|
|
.logo {
|
|
font-size: 2em;
|
|
font-weight: 900;
|
|
letter-spacing: 6px;
|
|
background: linear-gradient(90deg, #ff0000, #0066ff, #ffa500);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.nav-links {
|
|
display: flex;
|
|
gap: 40px;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.nav-link {
|
|
color: #666;
|
|
text-decoration: none;
|
|
text-transform: uppercase;
|
|
letter-spacing: 2px;
|
|
transition: color 0.3s;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.nav-link:hover {
|
|
color: #0066ff;
|
|
}
|
|
|
|
/* Hero Section */
|
|
.hero {
|
|
text-align: center;
|
|
padding: 80px 0 120px 0;
|
|
position: relative;
|
|
}
|
|
|
|
.hero-title {
|
|
font-size: 5em;
|
|
font-weight: 900;
|
|
letter-spacing: 8px;
|
|
margin-bottom: 30px;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.hero-subtitle {
|
|
font-size: 1.4em;
|
|
color: #666;
|
|
letter-spacing: 4px;
|
|
text-transform: uppercase;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.hero-description {
|
|
font-size: 1.1em;
|
|
color: #999;
|
|
max-width: 800px;
|
|
margin: 0 auto 50px auto;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
.trinity-badge {
|
|
display: inline-flex;
|
|
gap: 20px;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.badge {
|
|
padding: 12px 24px;
|
|
border: 2px solid;
|
|
font-size: 0.85em;
|
|
text-transform: uppercase;
|
|
letter-spacing: 2px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.badge.foundation {
|
|
border-color: #ff0000;
|
|
color: #ff0000;
|
|
background: rgba(255, 0, 0, 0.1);
|
|
}
|
|
|
|
.badge.corporation {
|
|
border-color: #0066ff;
|
|
color: #0066ff;
|
|
background: rgba(0, 102, 255, 0.1);
|
|
}
|
|
|
|
.badge.labs {
|
|
border-color: #ffa500;
|
|
color: #ffa500;
|
|
background: rgba(255, 165, 0, 0.1);
|
|
}
|
|
|
|
.cta-button {
|
|
display: inline-block;
|
|
padding: 20px 50px;
|
|
background: linear-gradient(135deg, #0066ff, #003380);
|
|
color: #fff;
|
|
text-decoration: none;
|
|
text-transform: uppercase;
|
|
letter-spacing: 3px;
|
|
font-weight: 700;
|
|
font-size: 1em;
|
|
transition: transform 0.3s, box-shadow 0.3s;
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.cta-button:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 10px 40px rgba(0, 102, 255, 0.4);
|
|
}
|
|
|
|
/* Trinity Cards Section */
|
|
.trinity-section {
|
|
padding: 100px 0;
|
|
border-top: 2px solid #1a1a1a;
|
|
position: relative;
|
|
}
|
|
|
|
.trinity-section::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -2px;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 2px;
|
|
background: linear-gradient(90deg, #ff0000 33%, #0066ff 33%, #0066ff 66%, #ffa500 66%);
|
|
}
|
|
|
|
.section-header {
|
|
text-align: center;
|
|
margin-bottom: 80px;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 3em;
|
|
font-weight: 700;
|
|
letter-spacing: 6px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.section-subtitle {
|
|
font-size: 1.1em;
|
|
color: #666;
|
|
letter-spacing: 2px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.trinity-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 40px;
|
|
margin-bottom: 60px;
|
|
}
|
|
|
|
.trinity-card {
|
|
background: #0d0d0d;
|
|
padding: 50px 40px;
|
|
border: 1px solid;
|
|
position: relative;
|
|
transition: transform 0.3s, box-shadow 0.3s;
|
|
}
|
|
|
|
.trinity-card:hover {
|
|
transform: translateY(-8px);
|
|
}
|
|
|
|
.trinity-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 4px;
|
|
}
|
|
|
|
.trinity-card.foundation {
|
|
border-color: #ff0000;
|
|
}
|
|
|
|
.trinity-card.foundation::before {
|
|
background: #ff0000;
|
|
box-shadow: 0 0 20px #ff0000;
|
|
}
|
|
|
|
.trinity-card.foundation:hover {
|
|
box-shadow: 0 20px 60px rgba(255, 0, 0, 0.3);
|
|
}
|
|
|
|
.trinity-card.corporation {
|
|
border-color: #0066ff;
|
|
}
|
|
|
|
.trinity-card.corporation::before {
|
|
background: #0066ff;
|
|
box-shadow: 0 0 20px #0066ff;
|
|
}
|
|
|
|
.trinity-card.corporation:hover {
|
|
box-shadow: 0 20px 60px rgba(0, 102, 255, 0.3);
|
|
}
|
|
|
|
.trinity-card.labs {
|
|
border-color: #ffa500;
|
|
}
|
|
|
|
.trinity-card.labs::before {
|
|
background: #ffa500;
|
|
box-shadow: 0 0 20px #ffa500;
|
|
}
|
|
|
|
.trinity-card.labs:hover {
|
|
box-shadow: 0 20px 60px rgba(255, 165, 0, 0.3);
|
|
}
|
|
|
|
.card-icon {
|
|
font-size: 4em;
|
|
margin-bottom: 30px;
|
|
text-align: center;
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 2em;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 4px;
|
|
margin-bottom: 15px;
|
|
text-align: center;
|
|
}
|
|
|
|
.card-label {
|
|
text-align: center;
|
|
font-size: 0.85em;
|
|
text-transform: uppercase;
|
|
letter-spacing: 2px;
|
|
margin-bottom: 30px;
|
|
color: #666;
|
|
}
|
|
|
|
.card-description {
|
|
line-height: 1.8;
|
|
color: #999;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.card-features {
|
|
list-style: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.card-features li {
|
|
padding: 12px 0;
|
|
border-bottom: 1px solid #1a1a1a;
|
|
color: #ccc;
|
|
}
|
|
|
|
.card-features li:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.card-features li::before {
|
|
content: '▸ ';
|
|
margin-right: 10px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.foundation .card-features li::before { color: #ff0000; }
|
|
.corporation .card-features li::before { color: #0066ff; }
|
|
.labs .card-features li::before { color: #ffa500; }
|
|
|
|
/* Infrastructure Visualization */
|
|
.infra-viz {
|
|
background: #0d0d0d;
|
|
border: 1px solid #1a1a1a;
|
|
padding: 60px;
|
|
text-align: center;
|
|
}
|
|
|
|
.viz-title {
|
|
font-size: 1.5em;
|
|
font-weight: 700;
|
|
letter-spacing: 3px;
|
|
margin-bottom: 40px;
|
|
color: #666;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.flow-diagram {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 60px;
|
|
margin: 40px 0;
|
|
}
|
|
|
|
.flow-node {
|
|
width: 200px;
|
|
height: 200px;
|
|
border: 3px solid;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
background: #0a0a0a;
|
|
}
|
|
|
|
.flow-node.foundation { border-color: #ff0000; }
|
|
.flow-node.corporation { border-color: #0066ff; }
|
|
.flow-node.labs { border-color: #ffa500; }
|
|
|
|
.flow-node-title {
|
|
font-size: 1.5em;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 2px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.flow-node.foundation .flow-node-title { color: #ff0000; }
|
|
.flow-node.corporation .flow-node-title { color: #0066ff; }
|
|
.flow-node.labs .flow-node-title { color: #ffa500; }
|
|
|
|
.flow-node-desc {
|
|
font-size: 0.8em;
|
|
color: #666;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.flow-arrow {
|
|
font-size: 3em;
|
|
color: #333;
|
|
}
|
|
|
|
/* Products Section */
|
|
.products-section {
|
|
padding: 100px 0;
|
|
background: #0d0d0d;
|
|
}
|
|
|
|
.products-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 30px;
|
|
}
|
|
|
|
.product-card {
|
|
background: #0a0a0a;
|
|
border: 1px solid #1a1a1a;
|
|
padding: 40px;
|
|
transition: transform 0.3s;
|
|
}
|
|
|
|
.product-card:hover {
|
|
transform: translateX(10px);
|
|
border-color: #0066ff;
|
|
}
|
|
|
|
.product-title {
|
|
font-size: 1.8em;
|
|
font-weight: 700;
|
|
letter-spacing: 3px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.product-subtitle {
|
|
color: #666;
|
|
font-size: 0.9em;
|
|
text-transform: uppercase;
|
|
letter-spacing: 2px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.product-description {
|
|
line-height: 1.8;
|
|
color: #999;
|
|
}
|
|
|
|
/* Footer */
|
|
footer {
|
|
padding: 80px 0 40px 0;
|
|
border-top: 2px solid #1a1a1a;
|
|
text-align: center;
|
|
position: relative;
|
|
}
|
|
|
|
footer::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -2px;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 2px;
|
|
background: linear-gradient(90deg, #ff0000 33%, #0066ff 33%, #0066ff 66%, #ffa500 66%);
|
|
}
|
|
|
|
.footer-logo {
|
|
font-size: 2.5em;
|
|
font-weight: 900;
|
|
letter-spacing: 8px;
|
|
background: linear-gradient(90deg, #ff0000, #0066ff, #ffa500);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.footer-tagline {
|
|
color: #666;
|
|
font-size: 0.9em;
|
|
letter-spacing: 3px;
|
|
text-transform: uppercase;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.footer-links {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 40px;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.footer-link {
|
|
color: #666;
|
|
text-decoration: none;
|
|
text-transform: uppercase;
|
|
letter-spacing: 2px;
|
|
font-size: 0.85em;
|
|
transition: color 0.3s;
|
|
}
|
|
|
|
.footer-link:hover {
|
|
color: #0066ff;
|
|
}
|
|
|
|
.copyright {
|
|
color: #333;
|
|
font-size: 0.8em;
|
|
letter-spacing: 2px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Navigation -->
|
|
<nav class="container">
|
|
<div class="logo">AETHEX</div>
|
|
<div class="nav-links">
|
|
<a href="#trinity" class="nav-link">Trinity</a>
|
|
<a href="#products" class="nav-link">Products</a>
|
|
<a href="#docs" class="nav-link">Docs</a>
|
|
<a href="#community" class="nav-link">Community</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero Section -->
|
|
<section class="hero container">
|
|
<h1 class="hero-title">METAVERSE<br/>INFRASTRUCTURE</h1>
|
|
<p class="hero-subtitle">Building the Foundation of Digital Reality</p>
|
|
<p class="hero-description">
|
|
AeThex provides the core infrastructure for persistent, cross-platform digital experiences.
|
|
Our Trinity architecture ensures security, innovation, and commercial viability for the next generation of the metaverse.
|
|
</p>
|
|
<div class="trinity-badge">
|
|
<span class="badge foundation">Foundation</span>
|
|
<span class="badge corporation">Corporation</span>
|
|
<span class="badge labs">Labs</span>
|
|
</div>
|
|
<br/>
|
|
<a href="#" class="cta-button">Access AeThex Studio</a>
|
|
</section>
|
|
|
|
<!-- Trinity Section -->
|
|
<section class="trinity-section" id="trinity">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2 class="section-title">THE TRINITY</h2>
|
|
<p class="section-subtitle">Three Divisions, One Infrastructure</p>
|
|
</div>
|
|
|
|
<div class="trinity-grid">
|
|
<div class="trinity-card foundation">
|
|
<div class="card-icon">🔴</div>
|
|
<h3 class="card-title">Foundation</h3>
|
|
<p class="card-label">Critical Infrastructure • Nonprofit</p>
|
|
<p class="card-description">
|
|
The nonprofit backbone maintaining authentication, security, and core APIs.
|
|
Open-source infrastructure that the entire AeThex ecosystem depends on.
|
|
</p>
|
|
<ul class="card-features">
|
|
<li>Passport Identity System</li>
|
|
<li>Authentication Protocols</li>
|
|
<li>Security Infrastructure</li>
|
|
<li>Core Open-Source APIs</li>
|
|
<li>Community Governance</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="trinity-card corporation">
|
|
<div class="card-icon">🔵</div>
|
|
<h3 class="card-title">Corporation</h3>
|
|
<p class="card-label">Commercial Services • Production</p>
|
|
<p class="card-description">
|
|
Professional commercial division delivering polished products and enterprise-grade infrastructure
|
|
to developers and players worldwide.
|
|
</p>
|
|
<ul class="card-features">
|
|
<li>AeThex Studio IDE</li>
|
|
<li>Production Deployment</li>
|
|
<li>Premium Services</li>
|
|
<li>Enterprise Support</li>
|
|
<li>Analytics & Insights</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="trinity-card labs">
|
|
<div class="card-icon">🟡</div>
|
|
<h3 class="card-title">Labs</h3>
|
|
<p class="card-label">Research & Development • Experimental</p>
|
|
<p class="card-description">
|
|
Innovation division pushing boundaries with experimental features, beta technologies,
|
|
and next-generation metaverse infrastructure.
|
|
</p>
|
|
<ul class="card-features">
|
|
<li>Nexus Engine v2.0</li>
|
|
<li>AI Copilot Assistant</li>
|
|
<li>Experimental Features</li>
|
|
<li>Beta Testing Programs</li>
|
|
<li>Future R&D Projects</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="infra-viz">
|
|
<div class="viz-title">Infrastructure Flow</div>
|
|
<div class="flow-diagram">
|
|
<div class="flow-node labs">
|
|
<div class="flow-node-title">Labs</div>
|
|
<div class="flow-node-desc">Innovation</div>
|
|
</div>
|
|
<div class="flow-arrow">→</div>
|
|
<div class="flow-node foundation">
|
|
<div class="flow-node-title">Foundation</div>
|
|
<div class="flow-node-desc">Validation</div>
|
|
</div>
|
|
<div class="flow-arrow">→</div>
|
|
<div class="flow-node corporation">
|
|
<div class="flow-node-title">Corporation</div>
|
|
<div class="flow-node-desc">Production</div>
|
|
</div>
|
|
</div>
|
|
<p style="color: #666; margin-top: 40px; line-height: 1.8;">
|
|
Labs creates breakthrough technology → Foundation ensures security and stability →
|
|
Corporation delivers to production. The Trinity doesn't compete—it collaborates.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Products Section -->
|
|
<section class="products-section" id="products">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2 class="section-title">PRODUCTS</h2>
|
|
<p class="section-subtitle">Tools for the Metaverse</p>
|
|
</div>
|
|
|
|
<div class="products-grid">
|
|
<div class="product-card">
|
|
<h3 class="product-title">AeThex Studio</h3>
|
|
<p class="product-subtitle">Cross-Platform Game Development IDE</p>
|
|
<p class="product-description">
|
|
Professional IDE with Trinity-integrated tools, AI Copilot assistance,
|
|
and seamless deployment to multiple platforms. Build once, deploy everywhere.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="product-card">
|
|
<h3 class="product-title">AeThex Passport</h3>
|
|
<p class="product-subtitle">Unified Digital Identity</p>
|
|
<p class="product-description">
|
|
Single identity across all platforms and games. Your achievements, inventory,
|
|
and progress follow you wherever you go in the metaverse.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="product-card">
|
|
<h3 class="product-title">AeThex Connect</h3>
|
|
<p class="product-subtitle">Metaverse Communication Platform</p>
|
|
<p class="product-description">
|
|
Beyond Discord and Slack—communication infrastructure designed for persistent
|
|
digital worlds. Bridge communities across platforms.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="product-card">
|
|
<h3 class="product-title">Nexus Engine</h3>
|
|
<p class="product-subtitle">Cross-Platform State Synchronization</p>
|
|
<p class="product-description">
|
|
Labs-developed technology enabling seamless player transitions between platforms.
|
|
Your game state follows you from Roblox to mobile to console.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer>
|
|
<div class="container">
|
|
<div class="footer-logo">AETHEX</div>
|
|
<p class="footer-tagline">Infrastructure for the Metaverse</p>
|
|
<div class="footer-links">
|
|
<a href="#" class="footer-link">Foundation</a>
|
|
<a href="#" class="footer-link">Corporation</a>
|
|
<a href="#" class="footer-link">Labs</a>
|
|
<a href="#" class="footer-link">Documentation</a>
|
|
<a href="#" class="footer-link">Community</a>
|
|
</div>
|
|
<p class="copyright">© 2026 AeThex • Building Digital Reality</p>
|
|
</div>
|
|
</footer>
|
|
</body>
|
|
</html>
|