feat(landing): thumbnail-grid video picker + 2 new demos + Design URL fix - #187
Merged
Conversation
- New 'Requirements & estimation' video tab between Slack and Design (https://youtu.be/YBwdTes0Fno) covers AI-drafted requirements, AI-PERT + Monte Carlo cycle-time forecasts, and the collaborative editor with version history. - Corrects the Design phase tab to the re-uploaded URL (https://youtu.be/lV71qhmfzzw); previous URL went stale after #186. - Final tab order: Setup → Slack triage → Requirements & estimation → Design phase → Inside the virtual world. - README demo grid + linkbar updated to match. Signed-off-by: Arun Rajkumar <mickyarunr@gmail.com>
…demo The tabbed selector overflowed past 4 videos; replaces it with an active player plus a responsive thumbnail grid (2/3/6-up across mobile/tablet/desktop) so the strip scales as we add more demos. - Refactor video metadata into a typed 'videos' array; both the active player iframe and the thumb cards are driven by a single source. - Active thumbnail gets a primary border; idle thumbs show a play-icon overlay on hover. - iframe carries a :key so switching videos forces a clean remount. - Add the sixth demo: 'Development & retrospective' (https://youtu.be/YjRihN_SKaw) covering dev, automated code review, post-deploy retrospective, and the Learning Agent feedback loop. - README demo grid + linkbar mirror the same six videos. Side effect: every thumbnail is now pre-rendered into static HTML, so all six demos are crawlable instead of only the default tab's iframe. Signed-off-by: Arun Rajkumar <mickyarunr@gmail.com>
mickyarun
changed the title
5 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
The demo video selector tabs were already overflowing past 4 entries (see screenshot below), and we have more demos to add. This PR replaces the tabbed selector with a responsive thumbnail-card grid, refactors the videos into a data array, and bundles two new demos and a URL fix that surfaced in the same session.
Changes
videosarray; both the active iframe and the thumb cards are driven by it. Adding the next demo is a one-line change.vDdj8p17AQQ(from docs(landing): add Design phase & agent prompts demo video #186, video was reuploaded) with lV71qhmfzzw.Tab order (was 4, now 6)
Side effect
Every thumbnail is now pre-rendered into static HTML, so all six demos are crawlable instead of only the default tab's iframe (the old
<v-window>lazy-mounted everything else client-side).Test plan
npm --workspace bodhiorchard-frontend run build:landingsucceeds.img.youtube.com/vi/<id>thumbnails.curl --compressed https://bodhiorchard.ai/ | grep img.youtube.com/vi/returns all six./methodologyroute renders the new grid; clicking each thumb swaps the active player; active card highlighted.Done in a git worktree (
.claude/worktrees/landing-videos-update); landing already redeployed viawrangler pages deploy frontend/dist-landing.