feat: connect BrainSNN.com to Fractal Reality Lab#93
Conversation
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request integrates the 'Fractal Reality Lab' into the GaugeGap landing page by adding navigation links, CTA buttons, and a new entry in the deeper tools section. The review feedback highlights several styling issues where the newly added anchor tags and generic button classes do not align with the project's CSS conventions. Specifically, it is recommended to use the bsn-button prefix for button styles and to replace the navigation and footer anchor tags with <button> elements utilizing window.open to ensure visual consistency and proper style inheritance.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
| </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> |
There was a problem hiding this comment.
The class name button button-secondary is used here, but the stylesheet gaugegap.css defines button styles using the .bsn-button prefix (e.g., .gg-hero-actions .bsn-button). Because of this, the anchor tag will not receive the intended layout styles (such as min-height: 56px, padding-inline: 26px, and border-radius: 12px), causing it to look unstyled or broken.
Please update the class name to use bsn-button bsn-button-secondary to ensure it aligns with the project's button styling conventions.
| <a className="button button-secondary" href={FRACTAL_LAB_URL} target="_blank" rel="noreferrer">Open Fractal Reality Lab <Orbit size={17} /></a> | |
| <a className="bsn-button bsn-button-secondary" href={FRACTAL_LAB_URL} target="_blank" rel="noreferrer">Open Fractal Reality Lab <Orbit size={17} /></a> |
| <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> |
There was a problem hiding this comment.
Similar to the hero CTA, the class name button button-secondary is used here instead of the project's standard .bsn-button prefix. This prevents the link from receiving the button styles defined under .gg-final-cta .bsn-button in gaugegap.css.
Please update the class name to bsn-button bsn-button-secondary to ensure correct styling.
| <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> | |
| <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="bsn-button bsn-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> |
| </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> |
There was a problem hiding this comment.
The newly added <a> tag for the "Fractal Lab" link does not inherit the navigation link styles defined in gaugegap.css. The stylesheet rules for .gg-nav-links specifically target button elements (e.g., .gg-nav-links button), meaning this anchor tag will appear unstyled and visually inconsistent with the other navigation items.
To maintain visual consistency, you can change this to a <button> element that triggers window.open on click, which will automatically inherit all the existing navigation styles. Alternatively, you would need to update the CSS selectors in gaugegap.css to also target a tags within .gg-nav-links.
| <a href={FRACTAL_LAB_URL} target="_blank" rel="noreferrer">Fractal Lab</a> | |
| <button type="button" onClick={() => window.open(FRACTAL_LAB_URL, '_blank', 'noopener,noreferrer')}>Fractal Lab</button> |
| </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> |
There was a problem hiding this comment.
The newly added "Fractal Lab" link in the footer navigation is an <a> tag, but the footer navigation styles in gaugegap.css specifically target button elements (e.g., .gg-footer nav button). As a result, this link will not inherit the correct color, padding, height, or hover states, breaking the visual consistency of the footer.
To resolve this, you can change the link to a <button> element that triggers window.open on click, which will immediately inherit all the correct styles.
| <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> | |
| <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={() => window.open(FRACTAL_LAB_URL, '_blank', 'noopener,noreferrer')}>Fractal Lab</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> |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 27016de1c1
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| </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> |
There was a problem hiding this comment.
At desktop widths where this navigation is visible, the new anchor does not receive the pill, color, padding, or hover styles applied to its neighboring controls because gaugegap.css:124-138 targets only .gg-nav-links button. It therefore renders using browser-default link styling; extend the navigation selectors to anchors or give this link an equivalent styled class.
Useful? React with 👍 / 👎.
| </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> |
There was a problem hiding this comment.
Use the existing bsn-button bsn-button-secondary classes here instead: neither button nor button-secondary is defined in the app, while the surrounding layout and responsive rules in gaugegap.css:259-264 and 1495-1504 explicitly target .bsn-button. As written, this CTA—and the identical final CTA—renders as a plain inline link and does not become a full-width mobile action like its neighboring buttons.
Useful? React with 👍 / 👎.
1 participant
Purpose
Make the newly deployed Fractal Reality Lab a visible flagship experience on BrainSNN.com / GaugeGap Foundry.
Changes
Public destination
https://xioaisolutions.github.io/gaugegap-foundry/fractal-reality-lab/