CtaBanner

apps/www/src/sections/CtaBanner.astro · 41 lines · group Call to action

CtaBanner — the wide call to action: title with a brand accent line on the left, the buttons on the right.

In the fleet

Used on 1 site built with this engine.

Samples 2

sample

Ready to put a station in the field?We ship within a week.

Tell us the crop and the field, and we will tell you which sensors are worth the money.

Order a station Talk to us

MDX of this sample

<CtaBanner
  title="Ready to put a station in the field?"
  highlight="We ship within a week."
  description="Tell us the crop and the field, and we will tell you which sensors are worth the money."
  primaryText="Order a station"
  primaryHref="/stations/"
  secondaryText="Talk to us"
  secondaryHref="/contact/"
/>

sample

Frost season starts in six weeks

Stations installed before it starts pay for themselves in the first cold night.

Book an installation

MDX of this sample

<CtaBanner
  theme="dark"
  title="Frost season starts in six weeks"
  description="Stations installed before it starts pay for themselves in the first cold night."
  primaryText="Book an installation"
  primaryHref="/install/"
/>

Props

Name	Type	Required	Default	Description
id	string
title	string	yes
highlight	string			accent line rendered in the brand gradient under the title
description	string
theme	Theme		'light'
primaryText	string
primaryHref	string		'#'
secondaryText	string
secondaryHref	string		'#'

Source apps/www/src/sections/CtaBanner.astro @ gitt.one

---
/**
 * CtaBanner — the wide call to action: title with a brand accent line on the
 * left, the buttons on the right.
 */
import Section from './_Section.astro';
import type { Theme } from './_Section.astro';
import Button from './_Button.astro';

interface Props {
  id?: string;
  title: string;
  /** accent line rendered in the brand gradient under the title */
  highlight?: string;
  description?: string;
  theme?: Theme;
  primaryText?: string;
  primaryHref?: string;
  secondaryText?: string;
  secondaryHref?: string;
}
const { id, title, highlight, description, theme = 'light', primaryText, primaryHref = '#', secondaryText, secondaryHref = '#' } = Astro.props;
const dark = theme === 'dark' || theme === 'brand';
---

<Section id={id} theme={theme}>
  <div class="lg:flex lg:items-center lg:justify-between">
    <div>
      <h2 class="text-4xl font-extrabold tracking-tight">
        <span class="block">{title}</span>
        {highlight && <span class="block bg-gradient-to-r from-primary-500 to-primary-alt-600 bg-clip-text text-transparent">{highlight}</span>}
      </h2>
      {description && <p class="mt-4 max-w-2xl text-xl text-gray-500 [.bg-stone-800_&]:text-primary-100">{description}</p>}
    </div>
    <div class="mt-8 flex flex-wrap gap-4 lg:mt-0 lg:ml-8">
      {primaryText && <Button href={primaryHref}>{primaryText}</Button>}
      {secondaryText && <Button href={secondaryHref} kind="secondary" onDark={dark}>{secondaryText}</Button>}
    </div>
  </div>
</Section>

Source links point to engine-astro@38c294d9. Samples are demo content: the components are the real ones, the copy and the pictures are made up.