Hero Construction

Heroes

About

Full hero section for construction/trade business landing pages. Two-column on desktop, single column on mobile. Includes eyebrow, title with optional highlighted phrase, subtitle, optional trust badges row, primary + optional secondary CTA buttons, hero image with priority loading, and a corner badge (e.g. 25+ jaar ervaring).

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

Code

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

Usage.tsx

import HeroConstruction from '@/components/ui/heroconstruction'

export default function Demo() {
  return (
    <HeroConstruction
      eyebrow="Sinds 1999"
      title="3 Generaties Vakmanschap in Breda"
      highlighted="Vakmanschap"
      subtitle="Schilderwerk, kozijnen, timmerwerk en renovatie — uitgevoerd door een team met 25+ jaar ervaring in de regio Breda."
      primaryCta={{ label: 'Bekijk onze diensten', href: '/diensten' }}
      secondaryCta={{ label: 'Bel direct: 076 204 5474', href: 'tel:+31762045474' }}
      trustBadges={[
        { icon: 'star', text: '4.9/5 Beoordeeld' },
        { icon: 'shield', text: '5 Jaar Garantie' },
        { icon: 'clock', text: 'Reactie binnen 24 uur' },
      ]}
      image={{ src: 'https://cdn.21st.dev/assets/mirror/f6/f6a249bd80ac549010a5c10e763b0dddfd5031d77eb4f58275bdff185b08cd9a.jpg', alt: 'Vakman aan het werk' }}
      badge={{ value: '25+', label: 'Jaar ervaring' }}
    />
  )
}