53 lines
2.2 KiB
TypeScript
53 lines
2.2 KiB
TypeScript
import { tenextButton as TenextButton } from "@/components/shared/Button";
|
|
import { PageContainer } from "@/components/shared/PageContainer";
|
|
import { aboutCta } from "@/data/about";
|
|
|
|
/** AboutCTA — large enterprise call to action on a premium gradient panel. */
|
|
export function AboutCTA() {
|
|
return (
|
|
<section className="px-5 py-[60px] md:py-[80px]">
|
|
<div className="relative overflow-hidden rounded-[25px] bg-tenext-dark px-[7vw] py-[80px] text-center md:py-[100px]">
|
|
<div className="pointer-events-none absolute inset-0">
|
|
<div className="absolute left-1/2 top-[-40%] h-[600px] w-[600px] -translate-x-1/2 rounded-full bg-[radial-gradient(circle,rgba(103,102,200,0.35),transparent_60%)]" />
|
|
<div className="absolute bottom-[-50%] left-[15%] h-[420px] w-[420px] rounded-full bg-[radial-gradient(circle,rgba(69,208,189,0.16),transparent_60%)]" />
|
|
</div>
|
|
|
|
<PageContainer className="relative z-10 flex flex-col items-center">
|
|
<h2
|
|
className="max-w-[760px] tracking-[-0.03em] text-white"
|
|
style={{
|
|
fontFamily: "var(--font-dm-sans)",
|
|
fontSize: "clamp(30px, 4vw, 56px)",
|
|
fontWeight: 600,
|
|
lineHeight: 1.1,
|
|
}}
|
|
>
|
|
{aboutCta.title}
|
|
</h2>
|
|
<p className="mt-[22px] max-w-[560px] text-[17px] leading-[1.75] text-white/80">
|
|
{aboutCta.paragraph}
|
|
</p>
|
|
<div className="mt-[40px] flex flex-wrap items-center justify-center gap-[16px]">
|
|
<TenextButton
|
|
href={aboutCta.primaryCta.href}
|
|
variant="gradient-fill"
|
|
className="rounded-[25px] px-[36px] py-[16px] text-[15px] font-semibold"
|
|
showArrow={false}
|
|
>
|
|
{aboutCta.primaryCta.label}
|
|
</TenextButton>
|
|
<TenextButton
|
|
href={aboutCta.secondaryCta.href}
|
|
variant="gradient-border"
|
|
className="rounded-[25px] px-[36px] py-[16px] text-[15px] font-medium text-white"
|
|
showArrow={true}
|
|
>
|
|
{aboutCta.secondaryCta.label}
|
|
</TenextButton>
|
|
</div>
|
|
</PageContainer>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|