AeThex-Corporation/aethex-us
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

new file: src/components/LanguageSwitcher.astro

Browse source
This commit is contained in:
Anderson 2026-01-18 23:55:47 +00:00 committed by GitHub
parent 467c2f7a00
commit df49315fde
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 182 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
public/global.css
View file

@ -1,6 +1,17 @@
@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; }
body {
font-family: 'Roboto Mono', monospace;
background: linear-gradient(120deg, #0a0a0a 0%, #1a1a2a 100%),
radial-gradient(circle at 20% 30%, #ff0000 0%, transparent 60%),
radial-gradient(circle at 80% 70%, #0066ff 0%, transparent 60%),
radial-gradient(circle at 50% 90%, #ffa500 0%, transparent 70%);
background-blend-mode: screen, lighten, normal;
color: #e0e0e0;
overflow-x: hidden;
min-height: 100vh;
transition: background 1.5s cubic-bezier(0.77,0,0.175,1);
}
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; }
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; }
@ -38,7 +49,20 @@ nav { padding: 30px 0; display: flex; justify-content: space-between; align-item
.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 {
background: linear-gradient(135deg, #181818 60%, #222 100%);
padding: 50px 40px;
border: 1px solid;
position: relative;
transition: transform 0.3s, box-shadow 0.3s, background 1.2s cubic-bezier(0.77,0,0.175,1);
box-shadow: 0 2px 24px rgba(0,0,0,0.18);
cursor: pointer;
}
.trinity-card:hover {
background: linear-gradient(120deg, #222 60%, #333 100%);
transform: translateY(-12px) scale(1.03);
box-shadow: 0 12px 48px rgba(0,102,255,0.18), 0 2px 24px rgba(0,0,0,0.18);
}
.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; }
@ -64,7 +88,25 @@ nav { padding: 30px 0; display: flex; justify-content: space-between; align-item
.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 {
width: 200px;
height: 200px;
border: 3px solid;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
background: linear-gradient(120deg, #0a0a0a 60%, #1a1a2a 100%);
box-shadow: 0 2px 24px rgba(0,0,0,0.18);
transition: background 1.2s cubic-bezier(0.77,0,0.175,1), box-shadow 0.3s;
cursor: pointer;
}
.flow-node:hover {
background: linear-gradient(120deg, #1a1a2a 60%, #222 100%);
box-shadow: 0 12px 48px rgba(255,0,0,0.12), 0 2px 24px rgba(0,0,0,0.18);
transform: scale(1.04);
}
.flow-node.foundation { border-color: #ff0000; }
.flow-node.corporation { border-color: #0066ff; }
.flow-node.labs { border-color: #ffa500; }

51
src/components/CommunityWall.astro Normal file
View file

@ -0,0 +1,51 @@
---
// Community Wall: User posts, shoutouts, and integrations
---
<section class="community-wall-section" id="community-wall">
<div class="container">
<div class="section-header">
<h2 class="section-title">Community Wall</h2>
<p class="section-subtitle">Live shoutouts, posts, and integrations from the AeThex community</p>
</div>
<div class="wall-grid">
<div class="wall-post">
<div class="wall-avatar" style="background:#ff0000"></div>
<div class="wall-content">
<div class="wall-user">@MetaPlay</div>
<div class="wall-message">"Just launched our game with AeThex Passport! Seamless experience."</div>
</div>
</div>
<div class="wall-post">
<div class="wall-avatar" style="background:#0066ff"></div>
<div class="wall-content">
<div class="wall-user">@GameForge</div>
<div class="wall-message">"AeThex Connect bridges our community across platforms!"</div>
</div>
</div>
<div class="wall-post">
<div class="wall-avatar" style="background:#ffa500"></div>
<div class="wall-content">
<div class="wall-user">@DevHub</div>
<div class="wall-message">"Nexus Engine sync is magic. Thanks Labs!"</div>
</div>
</div>
<div class="wall-post">
<div class="wall-avatar" style="background:#222"></div>
<div class="wall-content">
<div class="wall-user">@OpenSourceOrg</div>
<div class="wall-message">"Open APIs make integration a breeze."</div>
</div>
</div>
</div>
</div>
<style>
.community-wall-section { padding: 80px 0; }
.wall-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; margin-top: 40px; }
.wall-post { display: flex; align-items: flex-start; background: #181818; border-radius: 12px; padding: 30px 20px; box-shadow: 0 4px 24px rgba(0,0,0,0.15); }
.wall-avatar { width: 48px; height: 48px; border-radius: 50%; margin-right: 20px; }
.wall-content { flex: 1; }
.wall-user { font-weight: 700; color: #fff; margin-bottom: 8px; }
.wall-message { color: #888; font-size: 1em; }
@media (max-width: 900px) { .wall-grid { grid-template-columns: 1fr; } }
</style>
</section>

48
src/components/EventsWebinarsSection.astro Normal file
View file

@ -0,0 +1,48 @@
---
// Events & Webinars Section: Upcoming and past events for AeThex
---
<section class="events-section" id="events">
<div class="container">
<div class="section-header">
<h2 class="section-title">Events & Webinars</h2>
<p class="section-subtitle">Join upcoming events, webinars, and community meetups</p>
</div>
<div class="events-list">
<div class="event-card upcoming">
<div class="event-date">Feb 10, 2026</div>
<div class="event-title">AeThex Studio Live Demo</div>
<div class="event-desc">See the latest features in action and get your questions answered by the team.</div>
<a href="#" class="event-link">Register</a>
</div>
<div class="event-card upcoming">
<div class="event-date">Mar 2, 2026</div>
<div class="event-title">Passport Integration Workshop</div>
<div class="event-desc">Hands-on session for developers to integrate AeThex Passport into their games.</div>
<a href="#" class="event-link">Register</a>
</div>
<div class="event-card past">
<div class="event-date">Jan 5, 2026</div>
<div class="event-title">Community AMA</div>
<div class="event-desc">Open Q&A with AeThex founders and engineers.</div>
</div>
<div class="event-card past">
<div class="event-date">Dec 15, 2025</div>
<div class="event-title">Trinity Launch Webinar</div>
<div class="event-desc">Deep dive into the Trinity architecture and ecosystem.</div>
</div>
</div>
</div>
<style>
.events-section { padding: 80px 0; }
.events-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; margin-top: 40px; }
.event-card { background: #181818; border-radius: 12px; padding: 30px 20px; box-shadow: 0 4px 24px rgba(0,0,0,0.15); display: flex; flex-direction: column; }
.event-date { font-size: 1em; color: #ffa500; font-weight: 700; margin-bottom: 10px; }
.event-title { font-size: 1.2em; color: #fff; font-weight: 700; margin-bottom: 8px; }
.event-desc { color: #888; font-size: 1em; margin-bottom: 12px; }
.event-link { color: #0066ff; font-weight: 700; text-decoration: none; }
.event-link:hover { text-decoration: underline; }
.event-card.past .event-date { color: #666; }
.event-card.past .event-title { color: #aaa; }
@media (max-width: 900px) { .events-list { grid-template-columns: 1fr; } }
</style>
</section>

28
src/components/LanguageSwitcher.astro Normal file
View file

@ -0,0 +1,28 @@
---
// Language Switcher: Simple UI for switching site language
---
<section class="language-switcher">
<div class="container">
<div class="switcher-label">🌐 Language:</div>
<select id="lang-select" onchange="switchLang()">
<option value="en">English</option>
<option value="es">Español</option>
<option value="fr">Français</option>
<option value="de">Deutsch</option>
<option value="zh">中文</option>
</select>
</div>
<script type="text/javascript">
function switchLang() {
const lang = document.getElementById('lang-select').value;
alert('Language switching is a placeholder. Selected: ' + lang);
// In production, this would trigger i18n logic or reload with selected language
}
</script>
<style>
.language-switcher { padding: 30px 0; text-align: right; }
.switcher-label { display: inline-block; margin-right: 10px; color: #888; font-weight: 700; }
select { padding: 6px 12px; border-radius: 6px; border: 1px solid #222; background: #181818; color: #fff; font-size: 1em; }
select:focus { outline: none; border-color: #0066ff; }
</style>
</section>

11
src/pages/index.astro
View file

@ -17,6 +17,7 @@ import FooterSection from '../components/FooterSection.astro';
<MainLayout>
<!-- Navigation -->
<LanguageSwitcher />
<nav class="container">
<div class="logo">AETHEX</div>
<div class="nav-links">
@ -30,8 +31,9 @@ import FooterSection from '../components/FooterSection.astro';
</div>
</nav>
<section class="hub-hero container">
<h1 class="hub-title">Welcome to AeThex Hub</h1>
<h1 class="hub-title">AeThex Portal</h1>
<p class="hub-subtitle">Your gateway to the metaverse infrastructure</p>
<HeroSection />
</section>
<MetaverseMap />
<section class="hub-cards container">
@ -45,9 +47,16 @@ import FooterSection from '../components/FooterSection.astro';
<a href="/about" class="hub-card about">About</a>
</div>
</section>
<TrinitySection />
<ProductsSection />
<section class="hub-dashboard container">
<RealTimeStats />
<QuickstartGuideSection />
<TestimonialsSection />
<WhyAeThexSection />
<SocialProofSection />
<CommunityWall />
<EventsWebinarsSection />
</section>
<FooterSection />
</MainLayout>