feat(marketing): restructure the tenant homepage around one hero message - #10
Merged
Merged
Conversation
The hero carried the eyebrow, headline, subhead, three CTAs, a four-field
search, three stat cards, the image, an overlay panel AND the how-it-works
steps inside one bordered box. Everything competed for width, which is what
made individual pieces look broken rather than any one of them being badly
styled.
Hero now holds the headline, subhead and a single primary CTA, with the search
spanning its full width underneath. That alone fixed the clipped placeholders
("City, state, or estate r", "Max budget ("), which were clipped because the
four-column form sat in the 1.2fr text column; the placeholders are also
shorter now.
How it works moved out of the hero's 0.8fr sidebar into its own full-width
section below the featured listings, three across at md+ and stacked on
mobile. In the sidebar each step card had ~121px and the copy broke to one
word per line; they now measure 395px at 1440 and 335px at 375.
The trust strip never renders a zero. A brand-new tenant's homepage read
"EXPERT MARKETERS 0 / HAPPY CLIENTS 0" in large type above the fold — on a
site whose entire pitch is trust, that is worse than showing nothing. Cards
with a zero count are dropped and the strip disappears entirely if fewer than
two survive. Labels and notes stay CMS-editable.
Property cards are flex columns with clamped location/title/description, a 4:3
aspect-ratio image instead of a fixed h-72, and the price/CTA row pinned to the
bottom, so one verbose listing no longer stretches every sibling in its row.
Two notes on keeping copy CMS-driven: SectionHeading's description is now
optional, because the journey section has a CMS heading but no supporting
sentence and inventing one would hardcode copy tenants cannot edit; and the
journey section has no eyebrow badge, because the CMS heading is itself the
section name and the badge only repeated it.
Measured at 1440 and 375: step cards 121px -> 395px, no clipped placeholders,
footer stacked, hero down to one primary CTA.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Layout and hierarchy pass from the tenant public-site audit. The correctness fixes shipped separately in #9; this branch was stacked on it, so the diff here is the restructure only.
The root cause
The hero carried the eyebrow, headline, subhead, three CTAs, a four-field search, three stat cards, the image, an overlay panel and the how-it-works steps — inside one bordered box. Everything competed for width, which is why individual pieces looked broken rather than any single one being badly styled.
Changes
Hero — headline, subhead, one primary CTA, with the search spanning the full width beneath it. The placeholders were clipped ("City, state, or estate r", "Max budget (") because the four-column form sat inside the
1.2frtext column; they are no longer clipped, and are shorter ("City or area", "Max budget").How it works — out of the hero's
0.8frsidebar and into its own full-width section below the featured listings, three across atmd+, stacked on mobile. Each step card had ~121px in the sidebar and the copy broke to one word per line.Trust strip — never renders a zero. A new tenant's homepage read
EXPERT MARKETERS 0 / HAPPY CLIENTS 0in large type above the fold; on a site whose pitch is trust, that is worse than showing nothing. Zero-count cards are dropped and the strip disappears entirely if fewer than two survive. Labels and notes remain CMS-editable.Property cards — flex columns with clamped location/title/description, a 4:3 aspect-ratio image instead of a fixed
h-72, and the price/CTA row pinned to the bottom, so one verbose listing no longer stretches every sibling in its row.Measured, at 1440px and 375px
Keeping copy CMS-driven
No strings were hardcoded back in and the schema is unchanged. Two consequences:
SectionHeading'sdescriptionis now optional — the journey section has a CMS heading but no supporting sentence, and inventing one would hardcode copy tenants cannot edit.Design tokens, the serif/sans pairing, tenant branding and dark mode are untouched.
Verification
npm run checkgreen (537 tests, typecheck, lint, build) and the full E2E suite green (65 passed), including the footer regression test added in #9.Not yet verified: the positive case for the trust strip (≥2 non-zero stats → strip renders). My local tenant has testimonials but no public listings, so fewer than two qualify and it correctly renders nothing. I will confirm on the live tenant after deploy.
🤖 Generated with Claude Code