The live homepage is 9 fully-custom rs- sections. Nearly every one has a clean Hyper-native equivalent. The plan: rebuild it native-first — editor-friendly, future-proof, less custom-CSS debt — and push past the current bar using the exact craft layer we just proved on the collection page (color schemes, the gradient scrim, motion, AI imagery). Almost 1:1 mapping; nothing on the homepage genuinely needs a custom section.
Native sections are first-class in the theme editor — add, reorder, swap images, edit copy without touching code. Custom rs- sections are brittle and dev-only.
Native sections move with Hyper. Less bespoke CSS to maintain, fewer things that silently break on the next theme bump.
Native gives the structure; our color-scheme rhythm + gradient scrim + motion + AI imagery give the polish. We proved it on the collection page — same toolkit here.
Top to bottom, with the native section that replaces each current custom block. Schemes alternate (canvas → warm → ink → accent) for rhythm, exactly like the PDP.
| # | Native section | Replaces | Role on the page | State |
|---|---|---|---|---|
| 0 | announcement-bar | — | Slim top line: "Wholesale housewares since 1996 · Become a dealer." | add |
| 1 | slideshow | rs-home-hero | Statement hero + dual CTA (Shop / Become a Dealer). AI hero imagery + scrim. | ready |
| 2 | scrolling-banner | rs-markline | The marquee line — territories / "30 years" / values. | ready |
| 3 | collection-list | rs-cat-cards | Shop by category — the same native shop-by we shipped on the collection page. | ready |
| 4 | collection-tabs / image-cards | rs-brands-band | The house brands — JS Gourmet · JS Maison · Jessar Lighting · Xtricity (+ lines). | ready |
| 5 | video | rs-film | "Thirty years of getting it on the shelf" — the brand film. | film pending |
| 6 | image-with-feature / image-with-text | rs-editorial-band | Editorial line spotlight (Inspiration Italia / Cook & Fresca). Alternating, repeatable. | ready |
| 7 | collection-cards / slider-with-multicolumn | — | "In focus this season" — seasonal triptych across domains (from home_sm_v6). | add |
| 8 | press | rs-press-strip | "A story worth telling" — press logos / pull-quotes. | list pending |
| 9 | brand-logos | rs-partners-band | Retail partners — Costco · Staples · Linen Chest. (IA doc: brand-logos = Partners out of the box.) | ready |
| 10 | image-cards | rs-doors | Dual-audience doors — "Become a Dealer" / "Find a Retailer." Uses the dealer-card scrim. | ready |
| 11 | newsletter | — | Email capture + a dealer-inquiry hook before the footer. | add |
Native slideshow is the richest hero — full-bleed image, overlay heading/subheading, multiple buttons, optional multi-slide. Drop in the AI hero imagery (the pilot set you called "incredible"), apply the gradient scrim + Scheme 18 so the dual CTAs read over any photo, and let Hyper's motion-element stagger the reveal. One strong slide beats a busy carousel — but the option's there.
Alternatives: video-hero if the brand film opens the page · image-with-text-overlay for a single static statement.
The portfolio is the heart of the page. collection-tabs gives a tab per house brand (JS Gourmet / JS Maison / Lighting / Xtricity), each revealing its collections or lines — discoverable and editor-driven. If you'd rather keep it flat and editorial, image-cards gives four premium brand "doors" with AI imagery + scrim.
Alternatives: collection-list (4 brand collections as cards) · image-with-text-slider (one brand per slide, more story).
Two cards, two audiences — "Become a Dealer" (B2B) and "Find a Retailer / Shop" (consumer) — the IA's dual-audience rule made literal. This is the same image-card mechanism and the same scrim + Scheme 18 we just dialed in on the dealer CTA, so it's already proven legible over photography.
Alternatives: two image-with-text bands · lookbook-banner for a single wide split.
motion-element fade-up / zoom, staggered per section.slideshow (my pick), a rotating multi-slide, or video-hero if the film leads?collection-tabs (deeper, shows the lines) or image-cards (flatter, four editorial brand doors)?Once you pick the hero + brand-section forks: I render a full homepage proof (HTML, on the warm base) so you approve the look before touching the theme — then build it native section-by-section on the live theme with the scheme/scrim/motion layer, and live-verify. Same render-before-build discipline we used on the collection page.