983ebe4654
- Add tablet breakpoint (1024px) for grids, typography, and flow diagram - Add mobile breakpoint (600px) with single-column grids and scaled typography - Fix flow diagram to stack vertically on mobile with rotated arrows - Add responsive styles to entity pages (labs, foundation, corporation) - Scale down hero titles, section titles, and padding for smaller screens
86 lines
5.2 KiB
Text
86 lines
5.2 KiB
Text
---
|
|
// Labs Division Page
|
|
import MainLayout from '../layouts/MainLayout.astro';
|
|
---
|
|
|
|
<MainLayout>
|
|
<nav class="container">
|
|
<div class="logo">AETHEX</div>
|
|
<div class="nav-links">
|
|
<a href="/foundation" class="nav-link">Foundation</a>
|
|
<a href="/corporation" class="nav-link">Corporation</a>
|
|
<a href="/labs" class="nav-link">Labs</a>
|
|
<a href="/products" class="nav-link">Products</a>
|
|
<a href="/community" class="nav-link">Community</a>
|
|
<a href="/docs" class="nav-link">Docs</a>
|
|
<a href="/about" class="nav-link">About</a>
|
|
</div>
|
|
</nav>
|
|
<main class="entity-page labs">
|
|
<section class="hero-banner labs-hero">
|
|
<div class="hero-bg"></div>
|
|
<div class="hero-content">
|
|
<img src="/labs-logo.svg" alt="Labs Logo" class="entity-logo" />
|
|
<h1 class="entity-title animated">
|
|
<span class="fade-in">AeThex Labs</span>
|
|
</h1>
|
|
<p class="entity-desc fade-in-delay">Research & Development • Experimental</p>
|
|
<a href="/labs#projects" class="cta-btn">See R&D Projects</a>
|
|
</div>
|
|
</section>
|
|
<div class="glass-card">
|
|
<section class="fade-in-section">
|
|
<h2>About Labs</h2>
|
|
<p>Innovation division pushing boundaries with experimental features, beta technologies, and next-generation metaverse infrastructure.</p>
|
|
<ul>
|
|
<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>
|
|
</section>
|
|
</div>
|
|
<footer class="entity-footer">
|
|
<span>© AeThex Labs 2026</span>
|
|
<a href="/about">About</a>
|
|
<a href="/labs" style="margin-left:16px; color:#ffa500;">Labs Home</a>
|
|
<a href="/labs#projects" style="margin-left:16px; color:#ffa500;">R&D Projects</a>
|
|
</footer>
|
|
<style>
|
|
.fade-in-section { opacity: 0; transform: translateY(32px); animation: fadeInSection 1.2s 0.5s cubic-bezier(.77,0,.175,1) forwards; }
|
|
@keyframes fadeInSection { to { opacity: 1; transform: none; } }
|
|
.entity-page.labs { background: linear-gradient(120deg, #0a0a0a 55%, #ffd580 80%, #ffa500 100%); min-height: 100vh; font-family: 'Inter', 'Segoe UI', Arial, sans-serif; }
|
|
.nav-link { color: #fff; margin: 0 12px; text-decoration: none; font-weight: 600; transition: color 0.2s, text-shadow 0.2s; }
|
|
.nav-link:hover { color: #ffa500; text-shadow: 0 0 8px #ffa500; }
|
|
.hero-banner { position: relative; height: 340px; display: flex; align-items: center; justify-content: center; margin-bottom: 32px; }
|
|
.labs-hero .hero-bg { position: absolute; inset: 0; background: radial-gradient(circle at 60% 40%, #ffa500 0%, #0a0a0a 80%); opacity: 0.7; z-index: 1; }
|
|
.hero-content { position: relative; z-index: 2; text-align: center; }
|
|
.entity-logo { width: 80px; height: 80px; margin-bottom: 16px; filter: drop-shadow(0 0 8px #ffa500); }
|
|
.entity-title { font-size: 3em; font-weight: 900; margin-bottom: 12px; letter-spacing: 2px; color: #fff; }
|
|
.entity-title.animated .fade-in { animation: fadeInDown 1s cubic-bezier(.77,0,.175,1) both; display: inline-block; }
|
|
.entity-desc.fade-in-delay { animation: fadeInUp 1.2s cubic-bezier(.77,0,.175,1) both; display: block; }
|
|
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-40px); } to { opacity: 1; transform: translateY(0); } }
|
|
@keyframes fadeInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
|
|
.entity-desc { font-size: 1.2em; margin-bottom: 24px; color: #fff; }
|
|
.cta-btn { display: inline-block; padding: 12px 32px; background: linear-gradient(90deg, #ffa500 60%, #ffd580 100%); color: #fff; border-radius: 32px; font-weight: 700; text-decoration: none; box-shadow: 0 2px 16px #ffa50080; transition: background 0.2s, transform 0.2s, box-shadow 0.2s; letter-spacing: 1px; font-size: 1.1em; position: relative; overflow: hidden; }
|
|
.cta-btn:hover { background: linear-gradient(90deg, #cc8400 60%, #ffe5b4 100%); transform: scale(1.06) translateY(-2px); box-shadow: 0 6px 32px #ffa50080; }
|
|
.glass-card { background: rgba(255,255,255,0.10); border-radius: 28px; box-shadow: 0 4px 32px #ffd58080; backdrop-filter: blur(16px); margin: 40px auto; max-width: 650px; padding: 40px 36px; color: #fff; border: 2px solid #ffa500; }
|
|
ul { color: #fff; margin-top: 24px; padding-left: 24px; }
|
|
ul li { margin-bottom: 14px; transition: color 0.2s, transform 0.2s; cursor: pointer; font-size: 1.08em; }
|
|
ul li:hover { color: #ffa500; transform: scale(1.05); }
|
|
.entity-footer { text-align: center; margin-top: 48px; color: #fff; font-size: 1em; opacity: 0.7; }
|
|
.entity-footer a { color: #ffa500; margin-left: 16px; text-decoration: underline; }
|
|
|
|
@media (max-width: 768px) {
|
|
.hero-banner { height: auto; min-height: 280px; padding: 40px 20px; }
|
|
.entity-title { font-size: 2em; }
|
|
.entity-desc { font-size: 1em; }
|
|
.entity-logo { width: 60px; height: 60px; }
|
|
.glass-card { margin: 24px 16px; padding: 28px 20px; }
|
|
.cta-btn { padding: 10px 24px; font-size: 1em; }
|
|
ul li { font-size: 1em; }
|
|
}
|
|
</style>
|
|
</main>
|
|
</MainLayout>
|