Hero Sections

Examples

• Navigation Grid

  PreviewCode

  ProductExplore features, solutions, and use-cases.TemplatesStarter kits and UI patterns to move faster.DocumentationGuides, API reference, and best practices.Contact salesTalk to a specialist about your use-case.

• Centered Gradient

  PreviewCode

  Now with motion and gradients

  Design modern hero sections

  Beautiful, accessible, and production-ready hero layouts. Start fast with presets and customize as your brand evolves.

  Get startedLive preview

• Blurred Blobs

  PreviewCode

  Introducing

  Gradient blurred blobs hero

  Subtle background blobs with strong foreground contrast. Great for product landings and SaaS.

  Start freeDocumentation

• With Grid Pattern

  PreviewCode

  Hero with subtle grid pattern

  Inspired by the gradient grid used across this project. Ideal for sophisticated, minimal pages.

  Explore componentsView on GitHub

• Split with Image

  PreviewCode

  Split layout hero with image

  Pair a compelling message with an illustrative product screenshot or photography.

  Try it nowSee features

  

• Motion Minimal

  PreviewCode

  Minimal motion hero

  Elements fade and rise into place to create a polished, premium feel with zero clutter.

  Primary actionSecondary

• Product CTA

  PreviewCode

  Turn visitors into customers

  Capture leads directly from the hero. Emails only; zero spam. Cancel anytime.

  Join