Back to Components
Component Library

Forms & Conversion Components

3 components for lead capture, pricing display, and career listings

FormSection (Default)

Centered contact form layout

Request a Demo

See SCT+ in action. Fill out the form below and our team will reach out within 24 hours.

FormSection (Side by Side)

Form with image layout for contact pages

SCT+ headquarters

Get in Touch

Have questions about SCT+? Our team is here to help. Send us a message and we'll respond promptly.

PricingCard (Highlighted)

Featured pricing tier with accent background

Simple, Transparent Pricing

One plan with everything you need. No hidden fees, no surprises.

Most Popular
$1,500/month per unit

All-inclusive security solution with 24/7 monitoring

  • Solar-powered camera unit
  • Professional installation
  • 24/7 live monitoring
  • AI-powered detection
  • Audio deterrent speakers
  • Mobile app access
  • 90-day cloud storage
  • Priority support
Get Started

PricingCard (Standard)

Standard card style without highlight

Enterprise Solutions

For large deployments with custom requirements

Custom

Tailored security solutions for enterprise clients

  • Everything in standard plan
  • Custom integration support
  • Dedicated account manager
  • SLA guarantees
  • Volume discounts
  • On-site training
Contact Sales

JobListing

Career opportunities grouped by department

Join Our Team

Help us build the future of intelligent security. We're looking for talented people to join our growing team.

JobListing (Empty State)

Display when no positions are available

Open Positions

We're always looking for great people

No Open Positions

Check back soon for new opportunities, or send your resume to careers@sctplus.com

Component Usage

FormSection

Contact/demo forms with validation and submit handling. Supports default (centered) and side-by-side layouts.

<FormSection
  title="Form Title"
  description="Optional description"
  fields={[
    { name: 'email', label: 'Email', type: 'email', required: true },
    { name: 'industry', label: 'Industry', type: 'select', options: ['A', 'B'] },
    { name: 'message', label: 'Message', type: 'textarea' },
  ]}
  submitText="Submit"
  variant="default" // default | side-by-side
  image={{ src: '/image.jpg', alt: 'Description' }} // for side-by-side
  onSubmit={(data) => console.log(data)}
/>

PricingCard

Single pricing display with feature list. Use highlight=true for featured tier.

<PricingCard
  title="Pricing Title"
  subtitle="Optional subtitle"
  price="$1,500"
  period="/month"
  description="Price description"
  badge="Popular" // optional
  highlight={true}
  features={[
    { text: 'Feature included', included: true },
    { text: 'Feature not included', included: false },
  ]}
  cta={{ text: 'Get Started', href: '/signup' }}
/>

JobListing

Career listings grouped by department. Shows empty state when no jobs are available.

<JobListing
  title="Join Our Team"
  subtitle="Career page description"
  jobs={[
    {
      title: 'Job Title',
      department: 'Engineering',
      location: 'Remote',
      type: 'Full-time',
      href: '/careers/job-slug',
    },
  ]}
/>