Hero — Soft Modern

Heroes

About

Light, airy centred hero with sky-blue tints, trust-item checklist and large rounded-corner image frame. For affordable or mid-range residential landing pages.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Hero — Soft Modern to your project and fits it to your theme.

Code

How Hero — Soft Modern is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import HeroSoft from "@/components/ui/hero-soft"

export default function HeroSoftDemo() {
  return (
    <HeroSoft
      badge="Nauji butai · Kaunas"
      headline="Jūsų pirmasis būstas — paprastai ir patikimai"
      subheadline="Nuo 139 000 €. Lengvatos jauniems pirkėjams. Banko paskolos konsultacija nemokamai."
      primaryCta={{ label: "Gauti kainų sąrašą", href: "#" }}
      secondaryCta={{ label: "Susisiekti su pardavėju", href: "#" }}
      trustItems={["Energijos kl. A+", "Požeminė stovėjimo", "Vaikų aikštelė"]}
    />
  )
}