Left-align the agent description paragraph instead of centering it, and widen its max-width so it doesn't orphan single words."
"Widen the content column under the toggle to better match the headline width" (or pull the headline in slightly so they agree).
If the cards still feel tight: "add more padding inside the strength cards and a bit more gap between them."
Let me verify the changes in the browser.
The eval scrolled to the wrong spot. Let me target the AgentShowcase intro directly.
The strength cards now have more breathing room. Let me check the intro description alignment.
All changes look great. The description paragraph is now left-aligned in a wider max-w-3xl column, so it reads as two clean full-width lines with no orphaned words, while "Meet Nico" and the tagline stay centered above it. The content column now aligns with the headline width, and the strength cards got more internal padding (p-7) plus a wider gap (gap-5) so they feel less cramped.
Add an optional "loom" field to each agent in the config, mapped like this:
- Inbound (Nico): https://www.loom.com/embed/575c7658b7494aa8a0a3afb54f5d1d0f
- Outbound (Ben): https://www.loom.com/share/ac37ca5a3dda4ca3afa2a325244ce25a
- Email (Remi): https://www.loom.com/embed/6045e25c6419480da36656244a08c7e2
Under the selected agent's description and strengths section, render a demo video for the CURRENTLY SELECTED agent. Use an embedded Loom in a responsive 16:9 container with rounded corners and a subtle border that matches the dark theme. The container is an iframe with src set to the active agent's loom value, width 100%, allowfullscreen. Put a small label above it like "Watch [agent name] in action." The video must swap automatically when the toggle switches agents. If an agent has no loom value, hide the video block for that agent.
Now let me add the video block. I'll place it right after the Strengths section and before the Flow section:
Let me verify the video renders and swaps correctly across agents.
Nico's Loom video embeds and renders in the 16:9 container with the "WATCH NICO IN ACTION" label above it. Let me verify the video swaps when switching to the Email agent.
The video swaps correctly — switching to the Email agent now shows "WATCH REMI IN ACTION" with Remi's distinct Gmail-inbox demo Loom loaded in its place.
I added an optional loom field to the Agent type and mapped each agent's embed URL (converting Ben's /share/ link to the /embed/ format required for iframes). Under each agent's strengths section, I render a responsive 16:9 video block (using a 56.25% padding-top wrapper) with rounded corners and a subtle dark-theme border, a "Watch [name] in action" label above it, and an allowFullScreen iframe pointing at the active agent's loom. Because the block lives inside the key={active} container, it swaps automatically on toggle, and it's wrapped in {agent.loom && ...} so any agent without a value simply hides the video.
===Delete the standalone "See the System in Action" section near the bottom of the page — the one with the heading "See the System in Action," the subtext "Watch a live lead go from form submission to booked appointment automatically," and the embedded Loom video beneath it. Remove the entire section: heading, subtext, and video embed.
Do NOT touch the per-agent demo videos inside the agent toggle section — those stay. Only remove this separate bottom section.
and the built and proven part