Cta Section 1

components/pro-blocks/landing-page/cta-sections/cta-section-1.tsx

import { buttonVariants } from "@/components/ui/button"
import Link from "next/link"

type Props = {
  taglineText?: string
  title?: string
  description?: string
  primaryCta?: { label: string; href: string }
  primaryButtonAriaLabel?: string
}

const defaultProps = {
  taglineText: "CTA section 1",
  title: "Action-driving headline that creates urgency",
  description:
    "Add one or two compelling sentences that reinforce your main value proposition and overcome final objections.",
  primaryCta: { label: "Get started", href: "#" },
  primaryButtonAriaLabel: "Get started with our service",
}

export function CtaSection1({
  taglineText = defaultProps.taglineText,
  title = defaultProps.title,
  description = defaultProps.description,
  primaryCta = defaultProps.primaryCta,
  primaryButtonAriaLabel = defaultProps.primaryButtonAriaLabel,
}: Props) {
  return (
    <section
      className="bg-muted dark:bg-muted/40"
      aria-labelledby="cta-section-1-heading"
    >
      <div className="wrapper">
        <div className="mx-auto flex max-w-xl flex-col items-center">
          <div className="flex flex-col items-center text-center">
            <div className="tagline text-muted-foreground">{taglineText}</div>
            <h2
              id="cta-section-1-heading"
              className="heading-lg text-foreground"
            >
              {title}
            </h2>
            <p className="paragraph mb-8 text-muted-foreground">
              {description}
            </p>
          </div>

          <Link
            href={primaryCta.href}
            aria-label={primaryButtonAriaLabel}
            className={buttonVariants()}
            data-slot="button"
            data-variant="default"
          >
            {primaryCta.label}
          </Link>
        </div>
      </div>
    </section>
  )
}