Tighten homepage hero preview

[enumura1]

Summary

• reduce homepage hero preview spacing and code sizing so Step 3 fits better in the first viewport
• lay out the Step 3 Python reference and SQL file side by side on desktop
• keep the Step 3 panes stacked on mobile

Validation

• scripts/check

Summary by CodeRabbit

• Style
  • Refined spacing, padding, and typography across UI components for improved visual consistency.
  • Enhanced mobile responsiveness with adjusted layout for smaller screens.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 67512108-8207-4dfc-9685-a77dc7b3b7ca

📥 Commits

Reviewing files that changed from the base of the PR and between caaf4b1 and f3a5e69.

📒 Files selected for processing (1)

• website/src/pages/index.module.css

---

📝 Walkthrough

Walkthrough

This CSS module refines spacing, sizing, and typography across the website's hero, code display, workflow, and terminal UI components. Padding and gaps are tightened throughout, font sizes reduced in headers, and connector dimensions lowered. A mobile breakpoint override collapses the hero "after" grid to single-column layout.

Changes

Website UI Spacing and Typography Refinement

Layer / File(s)	Summary
Hero Section Layout and Spacing website/src/pages/index.module.css	.hero vertical padding, .heroGrid gap, and .heroAfterGrid column widths are tightened. .heroAfterPaneLabel spacing and nested icon sizes are reduced. .heroPrompt typography is refined. Mobile breakpoint adds responsive single-column override for .heroAfterGrid.
Code Display and Terminal Components website/src/pages/index.module.css	.preview padding, .runTerminalChrome padding, and .syntaxBlock pre padding/font-size/line-height are all reduced for more compact vertical presentation.
Workflow Node Visualization and Typography website/src/pages/index.module.css	.workflowNode gap and padding are reduced, .workflowNodeHeader gap is adjusted, header span and strong font sizes are decreased, and .workflowConnector height is lowered with adjusted margin.
File Type Icon Dimensions website/src/pages/index.module.css	Global .fileTypeIcon width and height are reduced across all component instances.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 Spacing tightened, margins kissed,
Typography refined in CSS mist,
Components nestled, cozy and small,
One responsive mobile call!
Pixels danced, the layout grew neat,
This refactor's quite the treat! ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Tighten homepage hero preview' accurately reflects the main change: reducing spacing and sizing in the homepage hero preview section to improve layout and viewport fit.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/hero-preview-height

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}