docs: give the journey endings a hierarchy and something to look at

Both pages ended in a row of equal cards, which is a fresh decision at exactly
the moment the reader should be moving, and each card only named its destination.
They now lead with one dominant next step that shows what is on the other side —
a live scene preview for the workflow chooser, the real Renders panel for export —
followed by the genuinely relevant alternatives as a quiet sentence of links,
ranked by how likely they are to matter.

The point is hierarchy rather than scarcity: several onward paths are fine, but
they should not all shout at the same volume, and a link that shows the thing
earns the click that a link naming the thing does not.

Author: ukimsanov

docs/quickstart.mdx

@@ -135,11 +135,18 @@ Open **Renders**, choose the format and resolution, and start the export.
 
 You have a video that plays in Studio or an exported file you can watch. Installation alone is not the finish line.
 
-<CardGroup cols={2}>
-  <Card title="Choose another workflow" icon="route" href="/workflows">
-    Make a product video, explainer, recut, PR video, motion graphic, music video, or presentation.
-  </Card>
-  <Card title="Get unstuck" icon="life-ring" href="/help">
-    Start with the visible symptom when Studio, media, animation, or export is not behaving.
-  </Card>
-</CardGroup>
+<a href="/workflows" className="not-prose group flex flex-col sm:flex-row no-underline overflow-hidden rounded-xl border border-zinc-200 dark:border-zinc-800 hover:border-zinc-400 dark:hover:border-zinc-600 transition-colors my-6">
+  <video
+    className="w-full sm:w-64 shrink-0 aspect-video object-cover bg-zinc-100 dark:bg-zinc-900"
+    src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flowchart.mp4"
+    poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flowchart.png"
+    autoPlay muted loop playsInline
+  />
+  <div className="p-5">
+    <span className="text-[11px] font-semibold uppercase tracking-widest text-zinc-500 dark:text-zinc-400">Now make something specific</span>
+    <span className="mt-1 block text-lg font-semibold text-zinc-900 dark:text-zinc-100">Choose a workflow →</span>
+    <span className="mt-1 block text-sm text-zinc-600 dark:text-zinc-400">A launch video, an explainer, captions on footage, a PR walkthrough, a motion graphic, a music-driven cut, or a presentation. Each path tells you what to give the agent.</span>
+  </div>
+</a>
+
+Also useful from here: learn the workspace properly in [Studio](/studio), find a ready-made scene in the [Catalog](/catalog), or start from a visible symptom in [Get unstuck](/help).

docs/studio/index.mdx

@@ -106,4 +106,17 @@ Before sharing:
 4. Export a version with a useful name.
 5. Watch the exported file once.
 
-If something blocks the task, [start from the visible symptom](/help).
+<a href="/studio/export" className="not-prose group flex flex-col sm:flex-row no-underline overflow-hidden rounded-xl border border-zinc-200 dark:border-zinc-800 hover:border-zinc-400 dark:hover:border-zinc-600 transition-colors my-6">
+  <img
+    className="w-full sm:w-64 shrink-0 aspect-video object-cover bg-zinc-100 dark:bg-zinc-900"
+    src="/images/studio/export.jpg"
+    alt="The Renders panel in HyperFrames Studio, showing format and resolution options"
+  />
+  <div className="p-5">
+    <span className="text-[11px] font-semibold uppercase tracking-widest text-zinc-500 dark:text-zinc-400">When it is ready</span>
+    <span className="mt-1 block text-lg font-semibold text-zinc-900 dark:text-zinc-100">Export a version →</span>
+    <span className="mt-1 block text-sm text-zinc-600 dark:text-zinc-400">Pick a format and resolution, watch the render queue, and keep named versions you can compare instead of overwriting the only file you have.</span>
+  </div>
+</a>
+
+Faster with the keyboard? See the [shortcuts](/studio/shortcuts). If something blocks the task, [start from the visible symptom](/help), or read [Studio troubleshooting](/studio/troubleshooting).