Back to ComponentsComponent Library

Hero Components

All hero section variants available for use across the SCT+ website. Each hero uses the same typography system and layout patterns.

Done

HeroImage

Background image with diagonal dark overlay. Left-aligned content with display title, description, and CTA.

Security surveillance

Outdoor Intrusion Detection

Stop intruders with the power of SCT+ surveillance cameras. Advanced AI-powered security for any location.

Request a DemoLearn More
Done

HeroVideo (Full)

Full viewport height video hero. Use variant="full" for 100vh display.

24/7 AI-Powered Security

Monitor, alert, and protect with intelligent solar camera trailers that never sleep.

See How It WorksView Features
Done

HeroVideo (Boxed)

Rounded box variant with aspect ratio. Use variant="boxed" (default).

24/7 AI-Powered Security

Monitor, alert, and protect with intelligent solar camera trailers that never sleep.

See How It Works
Selected

HeroImageTrailer

Hero with product trailer image. Soft corner gradient, trailer overflows below section for realistic grounding effect.

Housing background

Security for High-Density Housing

Prevent crime, protect your property, and improve your tenants' quality of life.

Request a DemoLearn More
Done

HeroVideoMultiTabbed

Full viewport video hero with tabbed icons on the right. Each tab switches to a different video showcasing different features/use cases.

AI-Powered Detection

Our intelligent cameras detect and alert on multiple threat types in real-time.

See All Features

Usage Guide

HeroImage

<HeroImage
  title="Your Title"
  description="Description text"
  image={{
    src: '/path/to/image.jpg',
    alt: 'Alt text'
  }}
  primaryCTA={{
    text: 'CTA Text',
    href: '/link'
  }}
  secondaryCTA={{
    text: 'Learn More',
    href: '/link'
  }}
/>

HeroVideo

<HeroVideo
  title="Your Title"
  description="Description text"
  video={{
    src: '/path/to/video.mp4',
    poster: '/poster.jpg'
  }}
  primaryCTA={{
    text: 'CTA Text',
    href: '/link'
  }}
  variant="full" // or "boxed"
/>

Variants: "full" (100vh) | "boxed" (rounded, default)

HeroImageTrailer

<HeroImageTrailer
  title="Your Title"
  description="Description text"
  image={{
    src: '/path/to/bg.jpg',
    alt: 'Alt text'
  }}
  trailer={{
    src: '/path/to/trailer.png',
    alt: 'Trailer'
  }}
  primaryCTA={{
    text: 'CTA Text',
    href: '/link'
  }}
/>

HeroVideoMultiTabbed

<HeroVideoMultiTabbed
  title="Your Title"
  description="Description"
  primaryCTA={{ text: 'CTA', href: '/' }}
  tabs={[
    {
      id: 'tab1',
      icon: <YourIcon />,
      label: 'Label',
      video: {
        src: '/video.mp4',
        poster: '/poster.jpg'
      }
    },
    // ... more tabs
  ]}
/>