WebberUI

Split Hero Home

A 50/50 split of copy and visual that turns into alternating sections as you scroll.

ProHome layoutshome-layout8 sections
See it liveSee the plans

Install

npx shadcn@latest add "https://webberui.com/r/split-hero-home.json?t=<install token>"

The whole page lands in app/templates/split-hero-home/. You can also use a long-lived licence key instead: set the Authorization: Bearer <key> header in the registries block of components.json — better for CI or a project several people share. What you may do with the source is in the licence terms.

Sections it ships with

Sections inside one template share the same design tokens, so swapping and reordering them keeps the colours, spacing and animation rhythm consistent. Pick and combine them in the section composer.

  1. 1

    Nav Bar and Split Hero

    A split hero under the brand nav bar: tagline and action buttons on the left, a workflow canvas mock dotted with floating cards on the right.

    hero
  2. 2

    Partner Logo Marquee

    An infinitely scrolling band of customer names, faded at both edges by gradient masks, to reinforce trust.

    misc
  3. 3

    Alternating Features

    Four alternating left-right feature blocks, each with its own interactive visual — workflow, integrations, a Copilot conversation, and a monitoring dashboard — on parallax scroll.

    features
  4. 4

    Key Results

    Four core metrics counting up on entry: teams using the product, runs executed, uptime, and hours saved.

    stats
  5. 5

    Customer Testimonials

    Three side-by-side review cards with five-star ratings, quotes, and avatar bylines that lift slightly on hover.

    testimonial
  6. 6

    Plans and Pricing

    Starter, Team, and Enterprise side by side, the middle plan carrying a Most Popular tag, with security and SLA guarantees below.

    pricing
  7. 7

    Closing Call to Action

    A gradient-glow card as the final conversion block, with primary and secondary buttons for starting free or booking an onboarding consult.

    cta
  8. 8

    Site Footer

    Brand blurb and social links plus four columns — product, resources, company, legal — over a copyright and system status bar.

    footer

What you get is source code

Not an npm package, not a zip file. Once installed, the page's TypeScript source sits in your repo: edit it however you like, no runtime dependency, no expiry mechanism. Your site keeps running even if ours goes down.

Browse the other 103 templates →