Merge pull request #9 from web3dev1337/feature/editor-usability-work1

fix: replace Material Forge iframe with preview card

Author: web3dev1337

showcase.html

@@ -64,8 +64,12 @@
 .preview-info .map-list{list-style:none;padding:0;margin:8px 0}
 .preview-info .map-list li{padding:2px 0;color:#555}
 .preview-info .map-list li::before{content:"▸ ";color:#e94560}
-.forge-frame{width:100%;max-width:1400px;margin:0 auto;border:1px solid #1a1a2e;border-radius:10px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.45)}
-.forge-frame iframe{width:100%;height:520px;border:0;display:block;background:#050508}
+.forge-card{display:block;text-decoration:none;max-width:720px;margin:0 auto;padding:24px;border:1px solid #1a1a2e;border-radius:12px;background:linear-gradient(180deg,#0c0c18,#08080f);box-shadow:0 20px 60px rgba(0,0,0,.45);transition:border-color .25s,box-shadow .25s}
+.forge-card:hover{border-color:#e94560;box-shadow:0 20px 80px rgba(233,69,96,.12)}
+.forge-previews{display:flex;gap:12px;justify-content:center}
+.forge-orb{width:140px;height:140px;border-radius:50%;object-fit:cover;border:2px solid #1a1a2e;box-shadow:0 0 20px rgba(0,0,0,.6);transition:transform .3s,border-color .3s}
+.forge-card:hover .forge-orb{border-color:#333;transform:scale(1.05)}
+.forge-cta{display:block;text-align:center;margin-top:16px;color:#e94560;font-family:monospace;font-size:13px;letter-spacing:.5px}
 .section-note{color:#e94560;font-size:12px;font-family:monospace;margin-bottom:12px;opacity:.8}
 .section-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
 .section-actions a{display:inline-block;padding:6px 12px;border-radius:6px;border:1px solid #333;background:#111;color:#bbb;text-decoration:none;font-family:monospace;font-size:11px;letter-spacing:.4px;transition:all .2s}
@@ -133,11 +137,17 @@ <h1>Feature Showcase</h1>
 
 <section class="chapter" id="forge-preview">
 <span class="chapter-num">FEATURED 3D</span>
-<h2>Material Forge — Live Multi-Shape Preview</h2>
-<p>A live 3D window showing multiple geometries spinning with procedural materials, bloom, and PBR lighting. This is the same scene as the full Material Forge page, embedded here for quick access.</p>
-<div class="forge-frame">
-<iframe title="Material Forge" src="demos.html?embed=1"></iframe>
+<h2>Material Forge</h2>
+<p>Procedural textures applied to 3D geometry in real time — PBR lighting, bloom, multiple shapes.</p>
+<a href="demos.html" class="forge-card">
+<div class="forge-previews">
+<img src="docs/media/volumetric-nebula.gif" alt="" class="forge-orb"/>
+<img src="docs/media/dark-ritual-portal.gif" alt="" class="forge-orb"/>
+<img src="docs/media/black-hole.gif" alt="" class="forge-orb"/>
+<img src="docs/media/warp-tunnel.gif" alt="" class="forge-orb"/>
 </div>
+<span class="forge-cta">Open Material Forge &rarr;</span>
+</a>
 </section>
 <div class="arrow">&#x25BC;</div>