85 lines
3.0 KiB
TypeScript
85 lines
3.0 KiB
TypeScript
import Link from 'next/link';
|
|
|
|
export function CallToAction(): JSX.Element {
|
|
return (
|
|
<section className="relative isolate px-6 py-32 sm:py-40 lg:px-8">
|
|
<svg
|
|
className="absolute inset-0 -z-10 h-full w-full stroke-black/10 [mask-image:radial-gradient(100%_100%_at_top_right,white,transparent)] dark:stroke-white/10"
|
|
aria-hidden="true"
|
|
>
|
|
<defs>
|
|
<pattern
|
|
id="1d4240dd-898f-445f-932d-e2872fd12de3"
|
|
width={200}
|
|
height={200}
|
|
x="50%"
|
|
y={0}
|
|
patternUnits="userSpaceOnUse"
|
|
>
|
|
<path d="M.5 200V.5H200" fill="none" />
|
|
</pattern>
|
|
</defs>
|
|
<svg
|
|
x="50%"
|
|
y={0}
|
|
className="overflow-visible fill-slate-200/20 dark:fill-slate-800/20"
|
|
>
|
|
<path
|
|
d="M-200 0h201v201h-201Z M600 0h201v201h-201Z M-400 600h201v201h-201Z M200 800h201v201h-201Z"
|
|
strokeWidth={0}
|
|
/>
|
|
</svg>
|
|
<rect
|
|
width="100%"
|
|
height="100%"
|
|
strokeWidth={0}
|
|
fill="url(#1d4240dd-898f-445f-932d-e2872fd12de3)"
|
|
/>
|
|
</svg>
|
|
<div
|
|
className="absolute inset-x-0 top-10 -z-10 flex transform-gpu justify-center overflow-hidden blur-3xl"
|
|
aria-hidden="true"
|
|
>
|
|
<div
|
|
className="aspect-[1108/632] w-[69.25rem] flex-none bg-gradient-to-r from-[#80caff] to-[#4f46e5] opacity-20"
|
|
style={{
|
|
clipPath:
|
|
'polygon(73.6% 51.7%, 91.7% 11.8%, 100% 46.4%, 97.4% 82.2%, 92.5% 84.9%, 75.7% 64%, 55.3% 47.5%, 46.5% 49.4%, 45% 62.9%, 50.3% 87.2%, 21.3% 64.1%, 0.1% 100%, 5.4% 51.1%, 21.4% 63.9%, 58.9% 0.2%, 73.6% 51.7%)',
|
|
}}
|
|
/>
|
|
</div>
|
|
<div className="mx-auto max-w-2xl text-center">
|
|
<h2
|
|
id="cta"
|
|
className="text-3xl font-medium tracking-tight text-slate-950 sm:text-5xl dark:text-white"
|
|
>
|
|
Your organization's transformation
|
|
<br />
|
|
starts now
|
|
</h2>
|
|
<div className="mt-10 flex items-center justify-center gap-x-6">
|
|
<Link
|
|
href="/contact/sales"
|
|
className="rounded-md bg-slate-950 px-3.5 py-2.5 text-sm font-semibold text-slate-100 shadow-sm hover:bg-slate-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white dark:bg-white dark:text-slate-900 dark:hover:bg-slate-100"
|
|
>
|
|
Contact us
|
|
</Link>
|
|
{/*<Link*/}
|
|
{/* href="/enterprise#talk"*/}
|
|
{/* title="Get in touch"*/}
|
|
{/* className="group text-sm font-semibold leading-6 text-slate-950 dark:text-white"*/}
|
|
{/*>*/}
|
|
{/* Contact us{' '}*/}
|
|
{/* <span*/}
|
|
{/* aria-hidden="true"*/}
|
|
{/* className="inline-block transition group-hover:translate-x-1"*/}
|
|
{/* >*/}
|
|
{/* →*/}
|
|
{/* </span>*/}
|
|
{/*</Link>*/}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|