CTA Section One

1import type { ComponentProps } from 'react'
2import { ArrowRight } from 'lucide-react'
3import Link from 'next/link'
4 
5import { Button } from '@/components/ui/button'
6import { cn } from '@/lib/utils'
7 
8const ctaSectionOneData = {
9  heading: 'Build your next product with confidence.',
10  description:
11    'Start building today or talk with our team to find the right plan for your business.',
12  primaryAction: {
13    label: 'Get started',
14    href: '#',
15  },
16  secondaryAction: {
17    label: 'Contact sales',
18    href: '#',
19  },
20}
21 
22type CtaSectionOneProps = ComponentProps<'section'>
23 
24export default function CtaSectionOne({ className, ...props }: CtaSectionOneProps) {
25  return (
26    <section
27      data-slot="cta-section-one"
28      className={cn('bg-background px-4 py-20 sm:px-6 sm:py-28', className)}
29      {...props}
30    >
31      <div className="mx-auto max-w-6xl">
32        <div className="relative isolate overflow-hidden rounded-3xl bg-card px-6 py-16 text-center shadow-xl ring shadow-black/12 ring-foreground/10 sm:px-12 sm:py-20">
33          <div className="relative mx-auto max-w-3xl">
34            <h2 className="text-3xl font-semibold tracking-tight text-balance text-foreground sm:text-5xl">
35              {ctaSectionOneData.heading}
36            </h2>
37 
38            <p className="mx-auto mt-5 max-w-2xl text-base leading-7 text-balance text-muted-foreground sm:text-lg">
39              {ctaSectionOneData.description}
40            </p>
41 
42            <div className="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row">
43              <Button asChild size="lg" className="w-full sm:w-auto">
44                <Link href={ctaSectionOneData.primaryAction.href}>
45                  {ctaSectionOneData.primaryAction.label}
46                  <ArrowRight data-icon="inline-end" aria-hidden className="size-4" />
47                </Link>
48              </Button>
49 
50              <Button
51                asChild
52                size="lg"
53                variant="outline"
54                className="w-full bg-background/70 shadow-sm backdrop-blur-sm sm:w-auto"
55              >
56                <Link href={ctaSectionOneData.secondaryAction.href}>
57                  {ctaSectionOneData.secondaryAction.label}
58                </Link>
59              </Button>
60            </div>
61          </div>
62        </div>
63      </div>
64    </section>
65  )
66}