add components/scenes/index.tsx

components/scenes/index.tsx

@@ -0,0 +1,84 @@
+'use client';
+
+export function SceneOakdale() {
+  return (
+    <div className="scene scene-oakdale">
+      <div className="scene-eyebrow" style={{ color: 'var(--lab)' }}>AETHEX PRODUCT</div>
+      <div className="scene-headline" style={{ color: 'var(--lab)' }}>OAKDALE ARENA</div>
+      <div className="scene-tagline">The Premier Roblox Rodeo Experience</div>
+      <div className="metric-row">
+        <div className="metric-card">
+          <div className="metric-big" style={{ color: 'var(--corp)' }}>~1,200</div>
+          <div className="metric-label">DAILY ACTIVE USERS</div>
+        </div>
+        <div className="metric-card">
+          <div className="metric-big" style={{ color: 'var(--cyber)' }}>L0RDSTIX</div>
+          <div className="metric-label">DEVELOPMENT PARTNER</div>
+        </div>
+      </div>
+      <div className="scene-links">
+        <a href="https://oakdale.aethex.tech" target="_blank" rel="noopener" className="scene-link" style={{ borderColor: 'var(--lab)', color: 'var(--lab)' }}>
+          OAKDALE.AETHEX.TECH ↗
+        </a>
+      </div>
+    </div>
+  );
+}
+
+export function SceneForge() {
+  const phases = [
+    { name: 'FORGE JAM', desc: 'Community game jam events' },
+    { name: 'ACADEMY', desc: 'Structured dev education' },
+    { name: 'CERTIFIED', desc: 'Industry-recognized credentials' },
+  ];
+  return (
+    <div className="scene scene-forge">
+      <div className="scene-eyebrow" style={{ color: 'var(--warn)' }}>AETHEX FOUNDATION</div>
+      <div className="scene-headline" style={{ color: 'var(--warn)' }}>GAMEFORGE</div>
+      <div className="scene-tagline">Nonprofit Developer Education & Credentialing Pipeline</div>
+      <div className="forge-phases">
+        {phases.map((p, i) => (
+          <div key={i} className="forge-phase">
+            <div className="forge-num">{String(i + 1).padStart(2, '0')}</div>
+            <div>
+              <div className="forge-phase-name" style={{ color: 'var(--warn)' }}>{p.name}</div>
+              <div className="forge-phase-desc">{p.desc}</div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export function ScenePassport() {
+  return (
+    <div className="scene scene-passport">
+      <div className="scene-eyebrow" style={{ color: 'var(--found)' }}>AETHEX PRODUCT</div>
+      <div className="scene-headline" style={{ color: 'var(--found)' }}>PASSPORT</div>
+      <div className="scene-tagline">Cross-Platform Player Identity · Player-Owned · Permanent</div>
+      <div className="scene-body" style={{ marginTop: '1rem' }}>
+        Type <code>/passport [username]</code> in chat to generate a Passport preview card for any Roblox player.
+      </div>
+    </div>
+  );
+}
+
+export function SceneOffline() {
+  return (
+    <div className="scene scene-offline">
+      <div className="offline-title">AETHEX</div>
+      <div className="offline-tag">BROADCAST NETWORK · ONLINE 24/7</div>
+      <div className="offline-sub">
+        MrPiglr is offline · KAEL is watching · Type <code>/kael</code> to talk to the AI
+      </div>
+      <div className="offline-commands">
+        {['/music','/kael','/oakdale','/forge','/passport'].map(cmd => (
+          <div key={cmd} className="offline-cmd">{cmd}</div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export { SceneOakdale as default };