homepage showcase demos grid + top/showcase flag split — artlu.ai

What is this?
A new homepage section that embeds up to 6 live demos of the best projects, sitting between the site header and the full project table. Meant to let a first-time visitor see the work working, without clicking anywhere.

What it does
- 3×2 grid at desktop, 2-col at 900px, 1-col at 600px
- Phone-aspect previews (9:16) so responsive sites render their mobile view
- Each card embeds live: artifactHtml via iframe srcdoc → embeddable link via src → screenshot fallback → $_ placeholder
- Wrapped in a full-bleed soft-green band in light mode (escapes the 1280 max-width via calc(50% - 50vw) margins); transparent in dark
- Card body navigates to the project detail; a ↗ button in the preview top-right also navigates

How it works
The section is driven by a new showcase: true flag on project docs. It's independent from the existing top flag, which drives the ★ top filter pill on the all-projects list. They're different jobs: top is "best-of picks visible anywhere on the site," showcase is "must embed well AND be manually picked for the homepage grid." Previously both were conflated under a single featured flag — splitting them made curation honest.

Built with
React, Firestore, iframe srcdoc. Embed allowlist covers netlify / vercel / github.io / pages.dev / render / railway / fly / surge.