diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx index 3db983a..e458e6b 100644 --- a/apps/web/app/layout.tsx +++ b/apps/web/app/layout.tsx @@ -90,7 +90,7 @@ export default function RootLayout({ return ( {/* DNS prefetch + preconnect for external image CDNs */} diff --git a/apps/web/app/plugin/page-client.tsx b/apps/web/app/plugin/page-client.tsx index ade9a4d..03047d2 100644 --- a/apps/web/app/plugin/page-client.tsx +++ b/apps/web/app/plugin/page-client.tsx @@ -61,7 +61,7 @@ const SCREENSHOTS: Shot[] = [ title: "Record while you play", caption: "Once in-game, open the panel and hit Start Recording. A live timer tracks your session. Stop when you're done benchmarking.", - file: "recording.png", + file: "recording.jpg", photo: true, }, { @@ -69,7 +69,7 @@ const SCREENSHOTS: Shot[] = [ title: "Review & submit", caption: "After stopping, review the captured FPS, 1% lows, and power draw. Add notes, then upload straight to DeckyVault — or export to a file.", - file: "session-form.png", + file: "session-form.jpg", photo: true, }, { @@ -87,8 +87,8 @@ const HAS_SCREENSHOT: Record = { "panel-overview": true, "pair-qr": true, "launch-option": true, - recording: false, - "session-form": false, + recording: true, + "session-form": true, "entry-live": true, } @@ -184,6 +184,40 @@ const STEPS = [ }, ] +// ── Screenshot acts ──────────────────────────────────── +// The "See it in action" gallery is structured as a 3-act narrative so the +// story flows: Set up → Capture → Share. Each act has a heading + a list of +// shots. The last act's shot is rendered larger as a visual payoff. +const ACTS: { + number: string + title: string + subtitle: string + shotIds: string[] + layout: "grid-3" | "grid-2" | "feature" +}[] = [ + { + number: "1", + title: "Get set up", + subtitle: "Three quick steps before your first benchmark.", + shotIds: ["panel-overview", "pair-qr", "launch-option"], + layout: "grid-3", + }, + { + number: "2", + title: "Capture performance", + subtitle: "Hit record, play, then review your stats.", + shotIds: ["recording", "session-form"], + layout: "grid-2", + }, + { + number: "3", + title: "Share & compare", + subtitle: "Your entry appears on the game's page for the community.", + shotIds: ["entry-live"], + layout: "feature", + }, +] + export function PluginPageClient() { const [copied, setCopied] = useState(false) @@ -365,61 +399,122 @@ export function PluginPageClient() { - {/* ── Screenshots gallery ──────────────────────────────── */} -
+ {/* ── See it in action: 3-act narrative ──────────────────────── */} +
-

- See it in action -

-

- A walkthrough of the plugin, from pairing to publishing. -

+
+

+ See it in action +

+

+ A walkthrough of the plugin, from pairing to publishing. +

+
-
- {SCREENSHOTS.map((shot, i) => ( - -
- {HAS_SCREENSHOT[shot.id] ? ( - // eslint-disable-next-line @next/next/no-img-element - {shot.title} - ) : ( -
- - - /plugin/{shot.file} - - - {shot.photo ? "device photo" : "screenshot"} coming soon - +
+ {ACTS.map((act, actIdx) => { + const shots = act.shotIds + .map((id) => SCREENSHOTS.find((s) => s.id === id)) + .filter((s): s is (typeof SCREENSHOTS)[number] => Boolean(s)) + + return ( +
+ {/* Act heading */} + +
+ {act.number}
+
+

+ {act.title} +

+

+ {act.subtitle} +

+
+ + + {/* Shot grid for this act */} +
+ {shots.map((shot) => { + const isFeature = act.layout === "feature" + return ( + +
+ {HAS_SCREENSHOT[shot.id] ? ( + // eslint-disable-next-line @next/next/no-img-element + {shot.title} + ) : ( +
+ + + {shot.photo ? "device photo" : "screenshot"} not yet captured + +
+ )} +
+
+
+ {shot.title} +
+

+ {shot.caption} +

+
+ + ) + })} +
+ + {/* Flow arrow between acts */} + {actIdx < ACTS.length - 1 && ( + +
+ )}
-
-
- - {i + 1} - - {shot.title} -
-

- {shot.caption} -

-
- - ))} + ) + })}
diff --git a/apps/web/public/plugin/recording.jpg b/apps/web/public/plugin/recording.jpg new file mode 100644 index 0000000..c7c907a Binary files /dev/null and b/apps/web/public/plugin/recording.jpg differ diff --git a/apps/web/public/plugin/session-form.jpg b/apps/web/public/plugin/session-form.jpg new file mode 100644 index 0000000..61f8942 Binary files /dev/null and b/apps/web/public/plugin/session-form.jpg differ