From 27016de1c14e0b51b506690a3843a25a0b6ad10a Mon Sep 17 00:00:00 2001
From: PenguineWalkOS <slavazeph@gmail.com>
Date: Sat, 18 Jul 2026 15:18:28 -0400
Subject: [PATCH] feat: feature Fractal Reality Lab across BrainSNN landing

---
 brainsnn-r3f-app/src/app/GaugeGapLanding.jsx | 24 ++++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/brainsnn-r3f-app/src/app/GaugeGapLanding.jsx b/brainsnn-r3f-app/src/app/GaugeGapLanding.jsx
index 82156e8..f283f25 100644
--- a/brainsnn-r3f-app/src/app/GaugeGapLanding.jsx
+++ b/brainsnn-r3f-app/src/app/GaugeGapLanding.jsx
@@ -7,6 +7,7 @@ import {
   FlaskConical,
   Layers3,
   Microscope,
+  Orbit,
   Play,
   Share2,
   Shield,
@@ -22,8 +23,17 @@ import '../styles/gaugegap.css';
 import '../styles/arcade-discovery.css';
 
 const CONTENT_SAMPLE = 'Everyone says this breakthrough changes everything. Here is what the evidence actually shows, what remains uncertain, and the one result worth paying attention to.';
+const FRACTAL_LAB_URL = 'https://xioaisolutions.github.io/gaugegap-foundry/fractal-reality-lab/';
 
 const DEEPER_TOOLS = [
+  {
+    id: 'fractal',
+    eyebrow: 'Flagship research experience',
+    title: 'Fractal Reality Lab',
+    description: 'Explore Mandelbrot and Julia dynamics, sonify finite orbits, compare recurring forms, and watch a BrainSNN-style spiking bridge respond.',
+    icon: Orbit,
+    action: 'Open the live lab',
+  },
   {
     id: 'soliton',
     eyebrow: 'Research workspace',
@@ -80,6 +90,10 @@ export function GaugeGapLanding({ onStart, onNavigate, onOpenReconstruct }) {
 
   function openLab(id) {
     track('gaugegap_lab_clicked', { labId: id });
+    if (id === 'fractal') {
+      window.open(FRACTAL_LAB_URL, '_blank', 'noopener,noreferrer');
+      return;
+    }
     if (ARCADE_IDS.has(id)) {
       const url = new URL(window.location.href);
       url.searchParams.set('lab', id);
@@ -105,6 +119,7 @@ export function GaugeGapLanding({ onStart, onNavigate, onOpenReconstruct }) {
         </button>
         <nav className="gg-nav-links" aria-label="Primary">
           <button type="button" onClick={scrollToPlayground}>Arcade</button>
+          <a href={FRACTAL_LAB_URL} target="_blank" rel="noreferrer">Fractal Lab</a>
           <button type="button" onClick={() => scrollTo('clients')}>For organizations</button>
           <button type="button" onClick={openResearch}>Research</button>
         </nav>
@@ -128,10 +143,11 @@ export function GaugeGapLanding({ onStart, onNavigate, onOpenReconstruct }) {
             </p>
             <div className="gg-hero-actions">
               <Button variant="primary" onClick={scrollToPlayground}>Enter the science arcade <ArrowRight size={17} /></Button>
+              <a className="button button-secondary" href={FRACTAL_LAB_URL} target="_blank" rel="noreferrer">Open Fractal Reality Lab <Orbit size={17} /></a>
               <Button variant="secondary" onClick={() => scrollTo('clients')}>Build for your audience <ArrowRight size={17} /></Button>
             </div>
             <div className="gg-hero-proof" aria-label="Product capabilities">
-              <div><strong>12 live</strong><span>Distinct experiments</span></div>
+              <div><strong>13 live</strong><span>12 arcade + flagship lab</span></div>
               <div><strong>4 paths</strong><span>Clear first steps</span></div>
               <div><strong>Client</strong><span>Custom pilot pathway</span></div>
               <div><strong>Open</strong><span>Models and limits</span></div>
@@ -171,7 +187,7 @@ export function GaugeGapLanding({ onStart, onNavigate, onOpenReconstruct }) {
         <ClientPathways />
 
         <section id="labs" className="gg-labs" aria-labelledby="gg-labs-heading">
-          <div className="gg-section-heading gg-section-heading-wide"><div><p className="gg-kicker"><FlaskConical size={16} /> Beyond the public arcade</p><h2 id="gg-labs-heading">Three deeper tools. Three different jobs.</h2></div><p>The arcade builds intuition. These workspaces analyze content, expose claim boundaries and support deeper technical exploration.</p></div>
+          <div className="gg-section-heading gg-section-heading-wide"><div><p className="gg-kicker"><FlaskConical size={16} /> Beyond the public arcade</p><h2 id="gg-labs-heading">Four deeper tools. Four different jobs.</h2></div><p>The arcade builds intuition. These workspaces analyze content, expose claim boundaries and support deeper technical exploration.</p></div>
           <div className="gg-lab-grid">
             {DEEPER_TOOLS.map((lab, index) => { const Icon = lab.icon; return <article key={lab.id} className={`gg-lab-card gg-lab-card-${index + 1}`}><div className="gg-lab-card-art" aria-hidden="true"><Icon size={34} /><span /><span /><span /></div><div className="gg-lab-card-copy"><p>{lab.eyebrow}</p><h3>{lab.title}</h3><span>{lab.description}</span><button type="button" onClick={() => openLab(lab.id)}>{lab.action} <ArrowRight size={15} /></button></div></article>; })}
           </div>
@@ -184,10 +200,10 @@ export function GaugeGapLanding({ onStart, onNavigate, onOpenReconstruct }) {
 
         <TrustLadder onResearch={openResearch} />
 
-        <section className="gg-final-cta" aria-labelledby="gg-final-heading"><div className="gg-final-glow" /><p className="gg-kicker"><Sparkles size={16} /> Choose the next useful step</p><h2 id="gg-final-heading">Play a system—or build one for the people you need to reach.</h2><p>The public arcade proves the interaction model. A focused client pilot applies it to your own audience, concept and outcome.</p><div className="gg-hero-actions"><Button variant="primary" onClick={scrollToPlayground}>Enter the arcade <ArrowRight size={17} /></Button><Button variant="secondary" onClick={() => scrollTo('clients')}>Discuss a client pilot <ArrowRight size={17} /></Button></div></section>
+        <section className="gg-final-cta" aria-labelledby="gg-final-heading"><div className="gg-final-glow" /><p className="gg-kicker"><Sparkles size={16} /> Choose the next useful step</p><h2 id="gg-final-heading">Play a system—or build one for the people you need to reach.</h2><p>The public arcade proves the interaction model. A focused client pilot applies it to your own audience, concept and outcome.</p><div className="gg-hero-actions"><Button variant="primary" onClick={scrollToPlayground}>Enter the arcade <ArrowRight size={17} /></Button><a className="button button-secondary" href={FRACTAL_LAB_URL} target="_blank" rel="noreferrer">Explore the flagship lab <Orbit size={17} /></a><Button variant="secondary" onClick={() => scrollTo('clients')}>Discuss a client pilot <ArrowRight size={17} /></Button></div></section>
       </main>
 
-      <footer className="gg-footer"><div><span className="gg-brand-mark">G</span><p><strong>GaugeGap Foundry</strong><small>Playable science and interactive client experiences by BrainSNN.</small></p></div><nav><button type="button" onClick={scrollToPlayground}>Arcade</button><button type="button" onClick={() => scrollTo('clients')}>For organizations</button><button type="button" onClick={openResearch}>Research</button><button type="button" onClick={() => onStart?.('')}>BrainSNN</button><a href="mailto:hello@brainsnn.com">Contact</a></nav><p className="gg-footer-note">Public simulations are educational numerical models, not proof of physical claims. Research releases must state assumptions, diagnostics and limitations.</p><p className="gg-footer-legal">© {new Date().getFullYear()} GaugeGap Foundry · BrainSNN.com</p></footer>
+      <footer className="gg-footer"><div><span className="gg-brand-mark">G</span><p><strong>GaugeGap Foundry</strong><small>Playable science and interactive client experiences by BrainSNN.</small></p></div><nav><button type="button" onClick={scrollToPlayground}>Arcade</button><a href={FRACTAL_LAB_URL} target="_blank" rel="noreferrer">Fractal Lab</a><button type="button" onClick={() => scrollTo('clients')}>For organizations</button><button type="button" onClick={openResearch}>Research</button><button type="button" onClick={() => onStart?.('')}>BrainSNN</button><a href="mailto:hello@brainsnn.com">Contact</a></nav><p className="gg-footer-note">Public simulations are educational numerical models, not proof of physical claims. Research releases must state assumptions, diagnostics and limitations.</p><p className="gg-footer-legal">© {new Date().getFullYear()} GaugeGap Foundry · BrainSNN.com</p></footer>
     </div>
   );
 }