# REBUILD.md — Stripe Homepage Transformed the live Stripe homepage into a directly usable React/Tailwind implementation blueprint with explicit component states, mobile behavior, and accessibility requirements. The result preserves the visible commercial hierarchy while leaving brand-owned imagery for rights-safe replacement. ## Source Snapshot * Page job: Present Stripe as financial infrastructure that supports payments, financial services, and custom revenue models from first transaction to global scale. * Primary conversion: Get started; Contact sales and Sign in are secondary actions. * Narrative spine: Hero → solution breadth → global-commerce proof → enterprise stories → startup and platform pathways → infrastructure confidence → closing conversion. * Source anchors: “Flexible solutions for every business model,” the commerce metrics band, customer stories, startup proof, and platform monetization outcomes. ## Page Architecture 1. Navigation and hero: Products, Solutions, Developers, Resources, Pricing, Sign in, Start now, and Contact sales. Follow with the financial-infrastructure headline, supporting sentence, and two acquisition actions. 2. Solutions matrix: A broad product family covering global payments, billing models, agentic commerce, issuing, stablecoins, embedded payments, and supporting product illustrations. 3. Commerce proof: A high-contrast statistics band using 135+ currencies and payment methods, $1.9T processed in 2025, 99.999% historical uptime, and 200M+ subscriptions. 4. Enterprise pathway: Case-study modules for large organizations, each pairing a story, operating metrics, products used, and a read-more action. 5. Startup pathway: Growth proof, customer-story links, startup program, and Atlas entry point. 6. Platform pathway: Three outcome cards—faster launch, new revenue, and risk management—followed by customer quotations. 7. Infrastructure close: Technical confidence section, developer-oriented paths, and final conversion area. ## Component State Matrix | Component | Default state | Interactive state | Mobile behavior | | ----------------- | ----------------------------------------------- | --------------------------------------------------------------------- | ---------------------------------------------------------- | | Global navigation | Product groups and utility links visible | Menu trigger exposes grouped destinations with focus return | Replace full navigation with one labelled menu button | | Primary CTA | High-emphasis “Start now” action | Hover, focus-visible, active, and disabled treatments remain distinct | Full-width at narrow widths; Contact sales follows beneath | | Solution card | Heading, summary, and product visual | Linked cards gain underline or arrow motion without layout shift | Stack cards; retain source order and readable visual crop | | Metric tile | Large value with supporting label | Linked uptime value receives visible focus treatment | Two-column grid, then one column below small-phone width | | Case-study module | Story title, metrics, products used, image slot | Read-story action exposes clear hover and keyboard states | Text precedes rights-safe image placeholder | | Footer group | Expanded link columns | No hover-only disclosure | Convert groups to accessible disclosure controls | ## Responsive Behavior * Desktop: Use an asymmetrical hero, multi-column solution matrix, wide proof bands, and editorial case-study layouts with strong horizontal rhythm. * Tablet: Reduce the navigation, move solution modules to two columns, and place enterprise story copy above supporting imagery. * Mobile: Preserve the hero claim and Start now action first; serialize solution families, metrics, case studies, startup proof, and platform outcomes in source order. * Tailwind structure: Build reusable `SectionShell`, `ActionLink`, `SolutionCard`, `MetricTile`, `CaseStudy`, `QuoteCard`, and `FooterDisclosure` primitives. Use semantic tokens rather than one-off color utilities where a value repeats. ## Accessibility & Interaction * Use semantic `nav`, `main`, `section`, `article`, and `footer` landmarks with one page-level heading. * Every disclosure control exposes `aria-expanded`, keyboard activation, visible focus, and focus return on close. * Preserve action labels such as Get started, Contact sales, Read the story, and View services; do not replace them with ambiguous “Learn more” everywhere. * Provide descriptive alternative text only for informative imagery; mark decorative gradient or device art as decorative. * Do not communicate product category, selected state, or link affordance through color alone. * Respect reduced-motion preferences for gradient, marquee, arrow, and card transitions. ## Release Checks * [ ] The hero, solution matrix, proof metrics, enterprise, startup, platform, and infrastructure sections all appear in order. * [ ] Every interactive component has mouse, keyboard, focus-visible, active, and reduced-motion behavior. * [ ] Mobile retains all material claims and conversion paths without horizontal scrolling. * [ ] Brand-owned photography and product art are represented by rights-safe placeholders. * [ ] Repeated spacing, typography, radius, and color decisions are mapped to semantic Tailwind tokens. * [ ] The blueprint is directly usable for implementation and leaves no core architecture decision to the buyer.