CTA Section

Image-backed dark CTA used site-wide. Dark-blue gradient background image with a soft darken overlay, accent ring + glow shadow, and a large CTA pill button.

Default Preview

Default site-wide variant — heading + subtitle + button, no eyebrow.

Let's start something big

Open to full-time, freelance, and contract work. Book a free 30min intro call to chat or send me an email.

Get in touch

With Eyebrow (Services Variant)

Same card with an optional uppercase eyebrow above the heading and the subtitle suppressed. This is the variant rendered at the bottom of the Services module.

Start a conversation

Pick the offering that fits — we'll shape the engagement together.

Get in touch

View Full Version

View on homepage

Props

eyebrow

string (optional)

Small uppercase label rendered above the heading. Omit (or pass an empty string) to hide it.

title

string (optional)

Default: "Let's start something big"

subtitle

string (optional)

Default: "Open to full-time, freelance, and contract work. Book a free 30min intro call to chat or send me an email." Pass an empty string (subtitle="") to hide it entirely.

buttonText

string (optional)

Default: "Get in touch"

buttonHref

string (optional)

Default: "/contact"

Visual Composition

Background

/images/services-cta-bg.jpg served at bg-cover bg-center with a 135deg darken gradient overlay (rgba(2,2,2,0.55) → 0.15 → 0.55).

Ring + glow

shadow-[0_0_0_1px_var(--accent-soft),0_20px_60px_rgba(11,95,212,0.25)] — 1px accent ring plus a soft blue page glow.

Button

Uses CTAButton — the large animated-glow pill — for visual consistency with hero/contact CTAs elsewhere on the site.

Usage

tsx

import { CTASection } from '@/components/sections/CTASection'

// Default site-wide usage (homepage, blog, work, faq, etc.)
<CTASection />

// With custom content
<CTASection
  title="Ready to get started?"
  subtitle="Let's build something amazing together."
  buttonText="Contact me"
  buttonHref="/contact"
/>

// Services-module variant: with eyebrow, no subtitle
<CTASection
  eyebrow="Start a conversation"
  title="Pick the offering that fits — we'll shape the engagement together."
  subtitle=""
  buttonText="Get in touch"
/>

Embed Without Section Wrapper (CTACard)

When you need the card inline inside an existing layout (e.g. the Services module), import CTACard instead — it renders the visual chrome without the py-20 lg:py-32 section padding or the max-w-[1200px] container.

tsx

import { CTACard } from '@/components/sections/CTASection'

<div className="mt-12 lg:mt-16">
  <CTACard
    eyebrow="Start a conversation"
    title="Pick the offering that fits — we'll shape the engagement together."
    subtitle=""
    buttonText="Get in touch"
  />
</div>

Import

tsx

import { CTASection, CTACard } from '@/components/sections/CTASection'