Hero — Waterfront & Resort

Heroes

About

Full-viewport resort hero with wave SVG divider, ocean-navy gradient, aqua badge and rounded-pill CTAs. For waterfront or coastal residential projects.

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

Code

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

Usage.tsx

import HeroWaterfront from "@/components/ui/hero-waterfront"

export default function HeroWaterfrontDemo() {
  return (
    <HeroWaterfront
      badge="Pajūrio projektas · Palanga"
      headline="Rytai prasideda ties vandeniu"
      subheadline="62 apartamentai 150 metrų nuo jūros. Atviras kiemas, privatus paplūdimys, rami aplinka."
      primaryCta={{ label: "Rezervuoti apartamentą", href: "#" }}
      secondaryCta={{ label: "Virtualus turas", href: "#" }}
    />
  )
}