Restructure homepage social-proof stack and polish the above-the-fold#1029
Merged
Conversation
Follow-up to the copy-only PR. Apply the page-cro principle of placing
trust signals near CTAs while keeping each tier visually lighter than
the next, so the homepage gets the brand-logo credibility we already
show on /for-teams without becoming heavy on authority.
- AppStore.astro: collapse the two large badges into a single slim
authority strip. The badges shrink to ~6.5rem, monochrome-friendly,
and now flank a copy line that adds the new, honest numbers:
"★4.8 on the App Store · Apple Featured: Essential Apps for
Developers · 25,000+ developers · 250+ teams". Vertical margins cut
from 4rem to 2rem so it reads as a strip, not a section. Plausible
events and App Store URL untouched.
- TrustedBrands partial: accept an optional `title` prop that overrides
the content-collection title. Default behaviour (and the /for-teams
page) is unchanged.
- Homepage: insert <TrustedBrands title="Used by iOS developers at" />
between the slim authority strip and the Senja testimonial carousel.
Final social-proof ladder above and just below the fold:
hero -> ★4.8 + Apple Featured + 25K devs + 250 teams (strip)
-> Used by iOS developers at <logos> (logo carousel)
-> Senja testimonial carousel (rich quotes)
Each tier answers a distinct question (Is it legit? Who uses it? What
do they say?), so the layered signals reinforce rather than compete.
Two small polish fixes flagged in the live preview:
- Navigation: the desktop `nav` was `display: flex; align-items:
center`, which placed the `<ul>` of CTAs and the microcopy `<p>`
side-by-side instead of stacking. Switch to `flex-direction:
column; align-items: flex-start;` so the microcopy renders on
its own line under the Free download button.
- App Store strip: drop the redundant "★4.8 on the App Store ·
Apple Featured: Essential Apps for Developers" copy — the badges
already encode those claims visually, repeating them in text
reads as over-stacked authority. Keep only the new numbers
("25,000+ developers · 250+ teams") so each element does a
distinct job (badges = authority, text = scale).
Restore the big "RocketSim" script wordmark above the homepage H1
and make the top-nav wordmark fade out while the hero wordmark is
in view, so the two never compete for attention. Then reorder the
mid-page so the AIDA funnel reads Attention → light authority →
Interest (top 3 features) → Desire (testimonials) → Action
(mid-page CTA) instead of jumping from Attention straight to
Desire and looping back to Interest.
Hero wordmark
- Header.astro accepts optional `logo` / `logoAlt` props again.
When provided, render the wordmark above the H1 inside a
`#hero-wordmark` wrapper so the smart-nav script can observe
it. for-teams / terms / privacy don't pass the props, so they
stay title-only.
- index.astro re-imports `rocketsim-logo.svg` and passes the
wordmark only on the homepage.
Shy top-nav wordmark
- navigation.css: `.navbar-brand` gets a 250ms opacity transition
and an `is-shy` modifier that fades + hides the wordmark.
- Base.astro: a new `shyNavLogoInit` runs on `astro:page-load`,
looks for `#hero-wordmark`, and uses an IntersectionObserver
to toggle `is-shy` on `.navbar-brand` while the hero wordmark
is in view. Pages without the hero wordmark are unaffected.
Mid-page restructure
- Features.astro now accepts optional `take` / `skip` props so
the same component can render a slice of the homepage feature
set. Default behaviour (no props) is unchanged.
- index.astro: split the feature stream — show the top 3 above
the Senja testimonials, slot the existing CallToAction banner
("Ready to Build Apps Faster?") right after the testimonial
peak, then render the remaining 18 features. The early
duplicate SubscribeToNewsletter is dropped since its position
no longer makes sense; the late one stays.
AvdLee
changed the title
Contributor
There was a problem hiding this comment.
Pull request overview
Restructures the homepage social-proof stack and polishes the above-the-fold: slims the App Store badges into a credibility strip, reuses TrustedBrands on the homepage, restores the hero wordmark with a "shy" top-nav wordmark toggled by an IntersectionObserver, fixes microcopy placement under the CTA, and reorders mid-page sections into a clearer AIDA funnel.
Changes:
AppStore.astrobecomes a slim authority strip;Navigation.astroswitches to column flex so microcopy stacks under the CTA;Header.astrore-introduces optionallogo/logoAltand renders#hero-wordmark.Base.astroaddsshyNavLogoInitandnavigation.cssadds an.is-shymodifier on.navbar-brand;TrustedBrands.astrogains an optionaltitleoverride.Features.astroaccepts optionaltake/skip;index.astroreorders the homepage and addsTrustedBrandsandCallToAction, while the earlySubscribeToNewsletteris removed.
Reviewed changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| docs/src/styles/navigation.css | Adds .navbar-brand.is-shy opacity/visibility modifier and transition. |
| docs/src/pages/index.astro | Imports TrustedBrands, CallToAction, and the logo image; reorders sections and passes hero wordmark. |
| docs/src/old/components/Navigation.astro | Switches desktop nav to column flex so microcopy renders below the CTA list. |
| docs/src/old/components/Header.astro | Adds optional logo/logoAlt props and renders #hero-wordmark above the H1. |
| docs/src/old/components/Features.astro | Adds optional take/skip slicing props. |
| docs/src/old/components/AppStore.astro | Rebuilt as a slim authority strip with badges + "25,000+ developers · 250+ teams" copy. |
| docs/src/layouts/partials/TrustedBrands.astro | Adds optional title prop overriding the section's default title. |
| docs/src/layouts/Base.astro | Adds shyNavLogoInit that toggles .is-shy on .navbar-brand via an IntersectionObserver on #hero-wordmark. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
…cial-proof-stack # Conflicts: # docs/src/old/components/Navigation.astro
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
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.
Summary
PR 2 of 2 applying page-cro + marketing-psychology to the homepage.
Targets
docs/homepage-cro-quick-wins(PR #1028) so both PRs can be reviewed and run locally together. Includes the original social-proof restructure plus two follow-up polish commits driven by reviewing the live preview.What changes
1. Slim authority strip (commit 1)
Two large App Store badges side-by-side become one slim row. Vertical margins drop from 4rem to 2rem so it reads as a credibility strip, not a section. Both badges remain clickable, separate Plausible events preserved.
2. Homepage logo strip (commit 1)
Reuse the existing
TrustedBrandspartial on the homepage, between the authority strip and the Senja carousel. New optionaltitleprop onTrustedBrandsso the homepage can read "Used by iOS developers at" without affecting/for-teams.3. Microcopy placement fix (commit 2)
On desktop,
Navigationwasdisplay: flex; align-items: center;, which placed the<ul>of CTAs and the microcopy<p>side-by-side. Switched toflex-direction: column; align-items: flex-start;so the microline renders on its own line directly under theFree downloadbutton.4. App Store strip rebalance (commit 2)
Trimmed the redundant copy. Badges already encode ★ 4.8 and Apple-Featured visually, repeating them in text reads as over-stacked authority. Copy line now reads 25,000+ developers · 250+ teams — the new info the badges don't show. Centered horizontally on desktop, stacked on mobile.
5. Hero wordmark restored + shy top-nav wordmark (commit 3)
IntersectionObserveron#hero-wordmarktoggles anis-shyclass on.navbar-brand).#hero-wordmark(/for-teams,/terms,/privacy, docs, blog) keep the nav wordmark visible at all times.6. Mid-page reorder (commit 3)
The AIDA funnel previously jumped Attention → Desire (testimonials) → Interest (features), then dribbled out. New order:
Implementation:
Features.astronow accepts optionaltake/skipprops so the same component renders both slices. The early duplicateSubscribeToNewsletteris dropped (its position no longer makes sense once Reviews moves down); the late one stays as the single newsletter touchpoint.Honest numbers
Files
docs/src/old/components/AppStore.astro— slim authority strip, then centered + trimmed.docs/src/old/components/Navigation.astro— column-flex on desktop, microcopy now stacks below CTAs.docs/src/old/components/Header.astro— optionallogo/logoAltprops re-introduced; renders the big wordmark above the H1 inside#hero-wordmarkwhen provided.docs/src/old/components/Features.astro— optionaltake/skipprops.docs/src/layouts/Base.astro— newshyNavLogoInitscript withIntersectionObserver.docs/src/styles/navigation.css—.navbar-brand.is-shymodifier + opacity transition.docs/src/layouts/partials/TrustedBrands.astro— optionaltitleprop.docs/src/pages/index.astro— full mid-page reorder, hero wordmark passed back in,CallToActionadded.Test plan
Free downloadbutton./for-teams,/terms,/privacyshow the top-nav wordmark at all times (unchanged).CallToActionbanner → remaining 18 features → Team Insights → Status Bar → Newsletter → Social → Support.Free downloadbutton still firesApp+Store+InstallPlausible event and the UTM-rewrite script still rewrites#js-header-app-store-button.App+Store+Installevents with separateplacement=landing-app-store-reviews/placement=landing-app-store-featuredprops./for-teamslogo strip unchanged ("Trusted by developers at leading tech companies.").npm run lint && npm run format:check && npm run typecheck && npm run buildall pass.Reviewer note
Once PR #1028 merges, GitHub auto-retargets this PR to
master.