tenext redesign

components/sections/about/AboutCTA.tsx

@@ -0,0 +1,52 @@
+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>
+  );
+}