63 lines
2.2 KiB
TypeScript
63 lines
2.2 KiB
TypeScript
import { useAtom } from "jotai/index";
|
|
import recordVideoModalOpen from "~/atoms/recordVideoModalOpen";
|
|
import { usePostHog } from "posthog-js/react";
|
|
|
|
export default function CTA() {
|
|
const [, setRecordOpen] = useAtom(recordVideoModalOpen);
|
|
const posthog = usePostHog();
|
|
|
|
const openRecordModal = () => {
|
|
setRecordOpen(true);
|
|
|
|
posthog?.capture("open record video modal", {
|
|
cta: "cta section",
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div className="bg-white">
|
|
<div className="mx-auto max-w-7xl py-12 sm:px-6 sm:py-16 lg:px-8">
|
|
<div className="relative isolate overflow-hidden bg-gray-900 px-6 py-24 text-center shadow-2xl sm:rounded-3xl sm:px-16">
|
|
<h2 className="mx-auto max-w-2xl text-4xl font-bold tracking-tight text-white">
|
|
Ready to improve how your team communicates?
|
|
</h2>
|
|
<div className="mt-10 flex items-center justify-center gap-x-6">
|
|
<button
|
|
onClick={openRecordModal}
|
|
className="inline-flex max-h-[40px] items-center rounded-md border border-transparent bg-red-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2"
|
|
>
|
|
Record a video
|
|
</button>
|
|
</div>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 1024 1024"
|
|
className="absolute left-1/2 top-1/2 -z-10 h-[64rem] w-[64rem] -translate-x-1/2"
|
|
aria-hidden="true"
|
|
>
|
|
<circle
|
|
cx={512}
|
|
cy={512}
|
|
r={512}
|
|
fill="url(#827591b1-ce8c-4110-b064-7cb85a0b1217)"
|
|
fillOpacity="0.7"
|
|
/>
|
|
<defs>
|
|
<radialGradient
|
|
id="827591b1-ce8c-4110-b064-7cb85a0b1217"
|
|
cx={0}
|
|
cy={0}
|
|
r={1}
|
|
gradientUnits="userSpaceOnUse"
|
|
gradientTransform="translate(512 512) rotate(90) scale(512)"
|
|
>
|
|
<stop stopColor="#7775D6" />
|
|
<stop offset={1} stopColor="#E935C1" stopOpacity={0} />
|
|
</radialGradient>
|
|
</defs>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|