Code reference detail
HomePage.tsx
reqlan rq/site/site/src/views/HomePage.tsx
| Idea | Status | Tags | Summary | Katz |
|---|---|---|---|---|
| copy | done | Marketing copy lives in typed TS modules under ["../../site/src/content"], composed by ["../../site/src/content/site.ts"]. Shared types: ["../../site/src/content/types.ts"]. Copy stays decoupled from layout / styling. Copy should be really super minimal and concise if at all. ( show don't tell ) Copy should be user facing; not simply a description of the feature requirements. Production code doesn't have latent dev notes in visible components. Landing modules: [hero_section], [elevator_pitch_section], [featured_in_section], [motivation_section], [syntax_section], [example_section], [roadmap_section], [nav_graph], [faq_page], [sidebar_nav], [links], [footer], [sticky_cta_node], [quiz_sticker_tab]. | 0.336 | |
| elevator_pitch_section | done | Landing `#elevator-pitch` after [hero_section] and before [featured_in_section]. This is the home " Why reqlan " destination: [sidebar_nav] child and [nav_graph] Why node use this id. One-line thesis plus rotating claims. Copy lives in ["../../site/src/content/meta.ts"] per [copy]. Thesis follows ["../constitution.rq".elevator_pitch]. Behaviours: [claim_cycle], [claim_progress], [claim_reduced_motion], [claim_expand]. Styling per [styling_architecture]. Must stay compatible with [simple_lightweight_and_static]. | 0.123 | |
| example_section | done | Landing `#example`: one worked graph slice ( imports, file anchors, wildcards, status, tags, tests ). Copy lives in ["../../site/src/content/example.ts"] per [copy]. The slice must parse as accurate reqlan per [accurate_rq_snippets_must_parse]. | 0.091 | |
| featured_in_section | done | Landing `#featured-in` after [elevator_pitch_section] and before [motivation_section]. Rolling social-proof banner: label " As featured in: " plus catalogue cards that scroll slowly in a continuous loop. Each card shows an icon and an outbound link label. Required listings ( labels match the catalogue names ): - agentlanguages. dev → https://agentlanguages.dev/languages/reqlan/ - awesome-spec-driven-development → https://github.com/Engineering4AI/awesome-spec-driven-development - awesome-docs → https://github.com/testthedocs/awesome-docs Copy and icons live in ["../../site/src/content/featured.ts"] per [copy]. Icons resolve through [phonebook_icon_component] / [icon_registry]. Links open in a new tab with `rel="noopener noreferrer"`. Pause the scroll on hover or focus. When the visitor prefers reduced motion, show a static row of the same cards with no scroll. Do not put these URLs in the phonebook footer / contact list. Styling per [styling_architecture]. Must stay compatible with [simple_lightweight_and_static]. | 0.122 | |
| hero_section | done | Landing `#hero`: mascot plus a short `.rq` snippet. Copy lives in ["../../site/src/content/hero.ts"] per [copy]. The snippet must parse as accurate reqlan per [accurate_rq_snippets_must_parse]. Install controls are [cta_icon] and [install_cli_menu]; get-started CTA href is `/quickstart` per [quickstart_page]. Get-started motion follows [get_started_cta_motion]. A GitHub star control sits in the action row per [hero_github_star]. | 0.135 | |
| motivation_section | done | Landing `#motivation` after [featured_in_section]: what / why slides for language, extension, CLI, and MCP. Copy lives in ["../../site/src/content/motivation.ts"] per [copy]. | 0.108 | |
| nav_graph | done | Sticky landing page graph. Node / edge model and labels live in ["../../site/src/content/nav.ts"] per [copy] / [sidebar_nav]. Section nodes match home anchors; page nodes match top-level routes in [routes]. | 0.123 | |
| quiz_sticker_tab | done | Home only: a right-edge tab on the home page. It does not mount in root layout or on other routes. Collapsed: a vertical label and the [phonebook_reqs.phonebook] `sticker-form` icon. Open: a short panel. The CTA is a link to [certs_reqs.assessment_page] through ["../../site/src/lib/certs-paths.ts"]. It is not an in-place quiz. Copy lives in ["../../site/src/content/quiz-sticker.ts"] per [copy]. Style with CSS modules per [styling_architecture] and [brand]. Use theme colour tokens. Hide on narrow viewports so it does not cover content. Keep it compatible with [simple_lightweight_and_static] and [sticky_cta_node]. No looping decorative motion. Open and close may change width once. When the visitor prefers reduced motion, do not animate. | 0.101 | |
| roadmap_section | done | Landing page section `#roadmap` after example and before links. Compact vertical scaled-center carousel ( snap + distance-based scale / opacity peeks ). Flat Now / Next / Later items — one focused at a time; neighbours peek smaller. Copy lives in ["../../site/src/content/roadmap.ts"] ( per [copy] ); nav and sticky page graph include the section. Keep the list honest and thin — no fake dates, no wall of tickets. | 0.091 | |
| syntax_section | done | Landing `#syntax`: self-explanatory rule + practical snippet pairs ( show, don't tell ). Copy lives in ["../../site/src/content/syntax.ts"] per [copy]. Highlighting languages follow [code_block_styling]. language- " rq " pairs must parse per [accurate_rq_snippets_must_parse]. | 0.091 |
Reference labels
copy, elevator_pitch_section, example_section, featured_in_section, hero_section, motivation_section, nav_graph, quiz_sticker_tab, roadmap_section, syntax_section