Reusable React landing-page sections

A landing page is a sequence of sections that share type, spacing, and buttons. The 50 Premium React Sections package is 50 components in src/sections, built with React 19 and Vite 6. There is no Next.js app and no CMS. You copy a file.

One component, one id

SplitHero is the first section:

export function SplitHero() {
  return (
    <section className="dy-section" id="splithero">
      <div className="dy-inner dy-split">
        <div>
          <p className="dy-kicker">01 · split</p>
          <h2>Two-column hero with a product proof line.</h2>
          <p className="dy-muted">Section 01 of 50. Copy this file and sections.css.</p>
          <p><a className="dy-btn" href="#splithero">Use this section</a></p>
        </div>
      </div>
    </section>
  );
}

The class names are dy-section, dy-inner, dy-split, dy-kicker, dy-muted, and dy-btn. They are defined once in sections.css. Copying a component without that file drops the layout. The id matches the file’s role so in-page links stay stable. Change the id if you place two heroes on one page.

src/sections/index.ts re-exports the set. Import the ones you use. The Vite preview exists so you can see them; the production site is your app.

What is in the set

The files cover heroes, feature grids, stats, pricing (including a three-tier block and a comparison), testimonials, a logo cloud, FAQ, CTAs, newsletter forms, navigation, footers, steps, and a handful of narrower blocks (security note, changelog, empty state). Pricing copy in the sections is presentational. It does not call Stripe. Wire a button to your Checkout route, for example the one in Stripe Checkout with Next.js, when a price should charge.

How to edit

Replace the heading and the muted paragraph. Keep the dy- classes so the section still matches its neighbors. The kit does not fetch content from a CMS. If you need editors to change text without a deploy, pass strings as props and stop hardcoding them. The shipped components take no props; that is a copy-paste library, not a theme with slots.

Do not import all 50 into a route you ship. Each section is an independent file so a page can use five of them.

Want to skip the setup? 50 Premium React Sections already includes the components and sections.css as one visual system.