Refine Getting Started docs: typography, preview styling, content polish

[Alek99]

Summary

Ports reflex-web PR #1818 into docs/app and follows up with a content pass across all four Getting Started markdown pages.

Typography & preview styling

• Smaller semibold headings, lighter body weight, tighter vertical rhythm
• Content column widened (42rem → 52rem, 56rem → 64rem); right sidebar moved xl: → 2xl: so mid-width screens have room to read
• Navbar tabs visible from md: (was xl:) instead of collapsing to a burger
• Pill-style tabs (pill-tab / pill-tab-list), slate-tinted inline rt-Code, hover-reveal copy button with "Copy" label, softer borders
• docgen_pipeline._render_tabs / _render_section rewritten with cleaner rx.el.div + tailwind classes

Getting Started content

• Introduction: new tagline + time estimate, pill tabs, slate highlight (was violet), tightened walkthrough, two md alert info CTA cards
• Installation: ~3 min estimate, removed embedded video, rewrote as single uv-based flow with <your-app> placeholder, Rosetta + bun.exe notes promoted to alert blocks
• Basics: ~10 min estimate, consolidated single-line setup steps, fixed rx.app typo, fixed three broken [`code`](link) links (rx.el, rx.cond, rx.foreach were rendering empty), added CTA cards
• Dashboard tutorial: ~20 min hands-on estimate, trimmed the ~180-line finished-app dump at the top down to a one-sentence roadmap + link to #full-app, numbered Setup steps, promoted "What are you building?" H3 → H2, renamed Conclusion → Full app + Recap, dropped Advanced Section stub, unified all 10 preview boxes (slate border, 12px radius, 2em padding, spacing="4", rx.box wrap)

Sidebar order

• Getting Started now shows Installation before Introduction

Known caveats

• The link-handler for inline [`code`](url) markdown in reflex_ui_shared.components.blocks.typography.doclink2 takes text: str and drops nested <code> children — this PR works around it by using plain-text link labels. A proper fix (accept *children and render inside rx.link) would benefit all pages.
• padding="2em" on preview containers may not fully render because [&>div]:!p-0 in docpage.py emits padding: 0 !important on every direct <div> child; an extra rx.box wrap, swap to rx.el.section, or removing the rule would fix it.

Test plan

• Visit /docs/getting-started/introduction, /installation, /basics, /dashboard-tutorial
• Verify headings feel tighter and content column is wider
• Resize browser: tabs stay visible through md:, right sidebar hides below 2xl:, hamburger only at <md:
• Tabs render as pills (not underline), active state = white pill with subtle shadow
• Hover a code block → copy button fades in with "Copy" label
• Inline `code` renders slate, not purple
• Sidebar: Getting Started expands with Installation above Introduction
• uv run reflex compile succeeds

🤖 Generated with Claude Code

[codspeed-hq]

Merging this PR will not alter performance

✅ 9 untouched benchmarks

---

_{Comparing alek/port-pr-1818 (d8a34d2) with main (d6db9c9)}

[greptile-apps]

Greptile Summary

This PR refines all four Getting Started docs with tighter typography (smaller semibold headings, lighter body weight), a wider content column, pill-style tabs, slate-tinted inline code, and a hover-reveal copy button. Content is polished across Introduction, Installation, Basics, and Dashboard Tutorial with time estimates, consolidated setup steps, fixed typos (rx.app → app), fixed broken [`code`](link) anchors, and CTA alert cards.

• P1: installation.md line 109 links to /docs/getting-started/introduction (hyphen) — all other Getting Started links use /docs/getting_started/… (underscore), so this will 404.
• P2: .code-block button in tailwind-theme.css sets top: 8px and right: 12px without position: absolute; the positioning silently depends on Radix UI's implicit button styling.

Confidence Score: 4/5

Safe to merge after fixing the broken internal link on the installation page CTA.

One P1 broken link will 404 for any user clicking the 'Next: Build your first app' CTA on the Installation page. All other changes are well-scoped documentation and styling updates with no logic regressions.

docs/getting_started/installation.md — broken link on the final CTA line.

Important Files Changed

Filename	Overview
docs/getting_started/installation.md	Rewritten as concise uv-based flow; contains a broken internal link (/docs/getting-started/introduction should use underscores) on the final CTA line.
docs/app/assets/tailwind-theme.css	Adds rt-Code slate override, hover-reveal copy button, and pill-tab styles; top/right on the copy button lack position: absolute, making those values implicitly dependent on Radix UI's own button positioning.
docs/app/reflex_docs/docgen_pipeline.py	Rewrites _render_tabs and _render_section with cleaner rx.el.div + inline styles; removes unused c_color import; no logic issues.
docs/app/reflex_docs/templates/docpage/docpage.py	Content column widened (42→52rem, 56→64rem) and right sidebar breakpoint moved from xl: to 2xl:; straightforward layout tweak.
docs/getting_started/dashboard_tutorial.md	Trims ~180-line finished-app preview from intro, unifies preview box styling (slate border, rx.box wrap), fixes compile-time anchor link, renames Conclusion → Full app; no issues.
packages/reflex-ui-shared/src/reflex_ui_shared/components/blocks/headings.py	All heading levels downsized (e.g. h1 lg:text-5xl→4xl) and weight changed from font-[525] to font-semibold; consistent across _comp and _comp_xd variants.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[User visits /docs/getting-started] --> B[Sidebar: Getting Started]
    B --> C[Installation\n/docs/getting_started/installation]
    B --> D[Introduction\n/docs/getting_started/introduction]
    B --> E[Basics\n/docs/getting_started/basics]
    B --> F[Dashboard Tutorial\n/docs/getting_started/dashboard_tutorial]
    C -->|CTA link broken hyphen| X["/docs/getting-started/introduction\n404"]
    C -->|should link to| D
    style X fill:#ffcccc,stroke:#cc0000

Loading

_{Reviews (1): Last reviewed commit: "Refine Getting Started docs: typography,..." | Re-trigger Greptile}

[greptile-apps]

Broken internal link — hyphen vs. underscore

The new CTA link uses /docs/getting-started/introduction (hyphen), but every other internal link throughout the Getting Started section uses underscores (e.g., [install Reflex](/docs/getting_started/installation), [Basics Guide](/docs/getting_started/basics)). The hyphenated URL will 404 for users following this link.

Suggested change

	Reflex is installed. The [Introduction](/docs/getting-started/introduction) walks through a working counter app in pure Python — the shortest path from "it runs" to "I understand it."
	Reflex is installed. The [Introduction](/docs/getting_started/introduction) walks through a working counter app in pure Python — the shortest path from "it runs" to "I understand it."

[greptile-apps]

top/right without position: absolute

top: 8px !important and right: 12px !important only have an effect on positioned elements (position: absolute/relative/fixed/sticky). The .code-block button rule sets display: inline-flex but no position, so these values are silently ignored unless the Radix UI copy button already carries position: absolute from its own stylesheet. Adding position: absolute !important here makes the intent explicit and ensures the placement survives any future upstream CSS changes.

Suggested change

	top: 8px !important;
	right: 12px !important;
	position: absolute !important;
	top: 8px !important;
	right: 12px !important;