Search

Jump to any page.

Marketing

Closing CTA

Centred serif invitation with a glass chip and primary button.

Begin a conversation

An intelligent institution starts with a conversation.

Talk to us

Installation

pnpm dlx shadcn@latest add @paragon/closing-cta
Brings in@paragon/badge@paragon/button@paragon/panellucide-react

Source

registry/paragon/blocks/closing-cta/closing-cta.tsx
import * as React from "react"
import { ArrowRight, MessageCircle } from "lucide-react"

import { Badge } from "@/registry/paragon/ui/badge"
import { Button } from "@/registry/paragon/ui/button"
import { Panel } from "@/registry/paragon/components/panel"

export function ClosingCta({
  kicker = "Begin a conversation",
  title = "An intelligent institution starts with a conversation.",
  cta = { label: "Talk to us", href: "/contact" },
}: {
  kicker?: React.ReactNode
  title?: React.ReactNode
  cta?: { label: string; href: string }
}) {
  return (
    <Panel
      tone="haze"
      grain
      padding="lg"
      render={<section />}
      className="flex flex-col items-center gap-8 text-center"
    >
      <Badge variant="glass">
        <MessageCircle data-icon="inline-start" />
        {kicker}
      </Badge>
      <h2 className="max-w-2xl font-serif text-title font-normal text-balance">{title}</h2>
      <Button size="lg" render={<a href={cta.href} />} nativeButton={false}>
        {cta.label}
        <ArrowRight data-icon="inline-end" className="rtl:-scale-x-100" />
      </Button>
    </Panel>
  )
}