From 228215e49f0aeed2a83b00d7a9654067cf44cdb0 Mon Sep 17 00:00:00 2001
From: Desktop <desktop@igny8.com>
Date: Fri, 14 Nov 2025 02:36:10 +0500
Subject: [PATCH] Update Pricing.tsx

---
 frontend/src/marketing/pages/Pricing.tsx | 618 ++++++++++++++++-------
 1 file changed, 429 insertions(+), 189 deletions(-)

diff --git a/frontend/src/marketing/pages/Pricing.tsx b/frontend/src/marketing/pages/Pricing.tsx
index 44d05c0e..642c4c1a 100644
--- a/frontend/src/marketing/pages/Pricing.tsx
+++ b/frontend/src/marketing/pages/Pricing.tsx
@@ -1,219 +1,459 @@
 import React from "react";
-import SectionHeading from "../components/SectionHeading";
-import CTASection from "../components/CTASection";
-
-const tiers = [
-  {
-    name: "Launch",
-    price: "$199",
-    cadence: "per month",
-    description: "For emerging teams launching AI-assisted content operations.",
-    features: [
-      "Up to 5 team seats",
-      "Planner + Writer modules",
-      "3 automation recipes",
-      "2,500 AI credits / month",
-      "Email support",
-    ],
-    badge: "Most popular for startups",
-  },
-  {
-    name: "Scale",
-    price: "$499",
-    cadence: "per month",
-    description: "For growing organizations automating multi-site workflows.",
-    features: [
-      "Unlimited seats",
-      "Planner + Writer + Thinker",
-      "All automation recipes",
-      "10,000 AI credits / month",
-      "Priority support & onboarding",
-    ],
-    featured: true,
-    badge: "Best value",
-  },
-  {
-    name: "Enterprise",
-    price: "Let’s talk",
-    cadence: "",
-    description: "For publishers and agencies needing advanced governance.",
-    features: [
-      "Custom SLAs and SSO",
-      "Private automation recipes",
-      "Dedicated success architect",
-      "Credit scaling & on-prem options",
-      "Security reviews & compliance support",
-    ],
-    badge: "Tailored programs",
-  },
-];
-
-const featureMatrix = [
-  {
-    feature: "Global keyword database",
-    launch: true,
-    scale: true,
-    enterprise: true,
-  },
-  {
-    feature: "AI clustering & topical maps",
-    launch: "10k keywords",
-    scale: "100k keywords",
-    enterprise: "Unlimited",
-  },
-  {
-    feature: "Automation recipes",
-    launch: "3 core",
-    scale: "All 12",
-    enterprise: "Custom",
-  },
-  {
-    feature: "WordPress publishing",
-    launch: "Manual",
-    scale: "Automated",
-    enterprise: "Automated + custom CMS",
-  },
-  {
-    feature: "Support",
-    launch: "Email + docs",
-    scale: "Priority + onboarding",
-    enterprise: "Dedicated CSM",
-  },
-];
+import { Link } from "react-router-dom";
+import {
+  RocketLaunchIcon,
+  ChatBubbleLeftRightIcon,
+  CheckIcon,
+  XMarkIcon,
+  SparklesIcon,
+  PhotoIcon,
+  BoltIcon,
+  ChartBarIcon,
+  UserGroupIcon,
+  CreditCardIcon,
+  ShieldCheckIcon,
+} from "@heroicons/react/24/outline";
 
 const Pricing: React.FC = () => {
+  const renderCta = (cta: { label: string; href: string }, className: string) => {
+    const isExternal = cta.href.startsWith("http");
+    
+    if (isExternal) {
+      return (
+        <a
+          href={cta.href}
+          className={className}
+          target="_blank"
+          rel="noreferrer"
+        >
+          {cta.label}
+        </a>
+      );
+    }
+    
+    return (
+      <Link to={cta.href} className={className}>
+        {cta.label}
+      </Link>
+    );
+  };
+
+  const tiers = [
+    {
+      name: "Starter",
+      price: "$89",
+      cadence: "per month",
+      description: "For small teams starting workflows.",
+      icon: SparklesIcon,
+      iconColor: "from-[#0693e3] to-[#0472b8]",
+      features: [
+        "3 sites",
+        "5 users",
+        "500 keywords",
+        "100 clusters",
+        "300 content ideas",
+        "120K words/month",
+        "10 daily content tasks",
+        "1,000 AI credits/month",
+        "120 images/month",
+        "HIDREAM image model",
+        "AI Writer",
+        "Image Generation",
+        "Email support",
+      ],
+      badge: "Most popular for startups",
+    },
+    {
+      name: "Growth",
+      price: "$139",
+      cadence: "per month",
+      description: "For teams automating multiple workflows.",
+      icon: BoltIcon,
+      iconColor: "from-[#0bbf87] to-[#08966b]",
+      features: [
+        "10 sites",
+        "10 users",
+        "1,000 keywords",
+        "200 clusters",
+        "600 content ideas",
+        "240K words/month",
+        "20 daily content tasks",
+        "2,000 AI credits/month",
+        "240 images/month",
+        "DALL-E 3 + HIDREAM",
+        "AI Writer",
+        "Image Generation",
+        "Auto Publish",
+        "Priority support & onboarding",
+      ],
+      featured: true,
+      badge: "Best value",
+    },
+    {
+      name: "Scale",
+      price: "$229",
+      cadence: "per month",
+      description: "For publishers and large orgs needing deeper control.",
+      icon: ChartBarIcon,
+      iconColor: "from-[#5d4ae3] to-[#3a2f94]",
+      features: [
+        "25 sites",
+        "25 users",
+        "2,000 keywords",
+        "400 clusters",
+        "1,200 content ideas",
+        "480K words/month",
+        "40 daily content tasks",
+        "4,000 AI credits/month",
+        "500 images/month",
+        "DALL-E 3 + HIDREAM",
+        "AI Writer",
+        "Image Generation",
+        "Auto Publish",
+        "Custom Prompts",
+        "Priority support & onboarding",
+      ],
+      badge: "For scaling teams",
+    },
+  ];
+
+  const featureMatrix = [
+    {
+      feature: "Sites",
+      starter: "3",
+      growth: "10",
+      scale: "25",
+    },
+    {
+      feature: "Users",
+      starter: "5",
+      growth: "10",
+      scale: "25",
+    },
+    {
+      feature: "Keywords",
+      starter: "500",
+      growth: "1,000",
+      scale: "2,000",
+    },
+    {
+      feature: "Clusters",
+      starter: "100",
+      growth: "200",
+      scale: "400",
+    },
+    {
+      feature: "Content Ideas",
+      starter: "300",
+      growth: "600",
+      scale: "1,200",
+    },
+    {
+      feature: "Monthly Word Count",
+      starter: "120K",
+      growth: "240K",
+      scale: "480K",
+    },
+    {
+      feature: "Daily Content Tasks",
+      starter: "10",
+      growth: "20",
+      scale: "40",
+    },
+    {
+      feature: "AI Credits / Month",
+      starter: "1,000",
+      growth: "2,000",
+      scale: "4,000",
+    },
+    {
+      feature: "Images / Month",
+      starter: "120",
+      growth: "240",
+      scale: "500",
+    },
+    {
+      feature: "Image Models",
+      starter: "HIDREAM",
+      growth: "DALL-E 3 + HIDREAM",
+      scale: "DALL-E 3 + HIDREAM",
+    },
+    {
+      feature: "AI Writer",
+      starter: true,
+      growth: true,
+      scale: true,
+    },
+    {
+      feature: "Image Generation",
+      starter: true,
+      growth: true,
+      scale: true,
+    },
+    {
+      feature: "Auto Publish",
+      starter: false,
+      growth: true,
+      scale: true,
+    },
+    {
+      feature: "Custom Prompts",
+      starter: false,
+      growth: false,
+      scale: true,
+    },
+    {
+      feature: "Support",
+      starter: "Email + docs",
+      growth: "Priority + onboarding",
+      scale: "Priority + onboarding",
+    },
+  ];
+
   return (
-    <div className="bg-gradient-to-b from-white via-slate-50/30 to-white text-slate-900">
-      <section className="max-w-6xl mx-auto px-6 pt-24 pb-16 space-y-8">
-        <SectionHeading
-          eyebrow="Pricing"
-          title="Simple plans that scale with your automation ambitions."
-          description="Transparent pricing for the entire Igny8 platform. No seat-based penalties—every teammate can collaborate freely."
-        />
-        <div className="rounded-3xl border-2 border-[#0693e3]/20 bg-gradient-to-br from-[#0693e3]/5 via-[#5d4ae3]/5 to-[#0bbf87]/5 p-6 text-sm text-slate-600 text-center backdrop-blur-sm">
-          Looking to migrate from an existing AI content stack? Ask about our migration credit and onboarding accelerator.
+    <div className="bg-white">
+      {/* PRICING HERO SECTION */}
+      <section className="relative overflow-hidden bg-gradient-to-b from-white via-slate-50/30 to-white">
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(6,147,227,0.02),transparent_60%)]" />
+        
+        <div className="relative max-w-4xl mx-auto px-6 py-24 md:py-32 text-center z-10">
+          <span className="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.28em] text-slate-500 bg-slate-100 px-4 py-2 rounded-full mb-6">
+            Pricing
+          </span>
+          <h1 className="text-5xl md:text-6xl lg:text-5xl font-bold leading-tight text-slate-900 mb-6">
+            Simple plans that scale with your automation goals.
+          </h1>
+          <p className="text-xl md:text-2xl text-slate-600 mb-10 max-w-2xl mx-auto leading-relaxed">
+            Flexible pricing for teams of all sizes. No seat limits. No hidden charges. Built for growth.
+          </p>
         </div>
       </section>
 
-      <section className="max-w-6xl mx-auto px-6 pb-24 grid grid-cols-1 lg:grid-cols-3 gap-8">
-        {tiers.map((tier) => (
-          <div
-            key={tier.name}
-            className={`relative rounded-3xl border-2 ${tier.featured ? "border-[#0693e3]/60 bg-gradient-to-br from-[#0693e3]/10 via-[#5d4ae3]/5 to-[#0bbf87]/5 shadow-[0_0_70px_rgba(6,147,227,0.25)]" : "border-slate-200 bg-gradient-to-br from-white to-slate-50/50"} p-10 flex flex-col gap-6 hover:shadow-xl transition-all ${tier.featured ? "" : "hover:-translate-y-1"}`}
-          >
-            {tier.badge && (
-              <span className={`inline-flex items-center self-start rounded-full border px-4 py-1 text-[11px] uppercase tracking-[0.25em] ${tier.featured ? "border-[#0693e3]/30 bg-gradient-to-r from-[#0693e3]/20 to-[#0472b8]/20 text-[#0472b8]" : "border-slate-200 bg-gradient-to-r from-[#0693e3]/10 to-[#0bbf87]/10 text-[#0693e3]"}`}>
-                {tier.badge}
-              </span>
-            )}
-            <div>
-              <h3 className="text-2xl font-semibold text-slate-900">{tier.name}</h3>
-              <p className="text-sm text-slate-600 mt-2">{tier.description}</p>
-            </div>
-            <div className="text-4xl font-semibold text-slate-900">
-              {tier.price}
-              {tier.cadence && (
-                <span className="text-sm font-normal text-slate-500 ml-2">
-                  {tier.cadence}
-                </span>
-              )}
-            </div>
-            <ul className="space-y-3 text-sm text-slate-600">
-              {tier.features.map((feature, idx) => {
-                const colors = ["bg-[#0693e3]", "bg-[#0bbf87]", "bg-[#ff7a00]", "bg-[#5d4ae3]"];
-                return (
-                  <li key={feature} className="flex gap-3">
-                    <span className={`mt-1 size-1.5 rounded-full ${colors[idx % colors.length]} shadow-sm`} />
-                    {feature}
-                  </li>
-                );
-              })}
-            </ul>
-            <div className="pt-4">
-              <a
-                href={tier.name === "Enterprise" ? "/contact" : "https://app.igny8.com/signup"}
-                className={`inline-flex w-full items-center justify-center rounded-full px-6 py-3 text-sm font-semibold transition ${
+      {/* PRICING TIERS SECTION */}
+      <section className="max-w-7xl mx-auto px-6 pb-24">
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+          {tiers.map((tier) => {
+            const Icon = tier.icon;
+            return (
+              <div
+                key={tier.name}
+                className={`relative rounded-3xl border-2 ${
                   tier.featured
-                    ? "bg-gradient-to-r from-[#0693e3] to-[#0472b8] text-white hover:from-[#0472b8] hover:to-[#0693e3] shadow-lg shadow-[#0693e3]/30"
-                    : "border-2 border-slate-300 bg-white/50 backdrop-blur-sm text-slate-900 hover:border-[#0693e3] hover:bg-white"
+                    ? "border-[#0693e3]/60 bg-gradient-to-br from-[#0693e3]/10 via-[#5d4ae3]/5 to-[#0bbf87]/5 shadow-[0_0_70px_rgba(6,147,227,0.25)]"
+                    : "border-slate-200 bg-gradient-to-br from-white to-slate-50/50"
+                } p-10 flex flex-col gap-6 hover:shadow-xl transition-all group ${
+                  tier.featured ? "lg:scale-105" : "hover:-translate-y-1"
                 }`}
               >
-                {tier.name === "Enterprise" ? "Contact sales" : "Start free trial"}
-              </a>
-            </div>
-          </div>
-        ))}
-      </section>
+                {/* Badge */}
+                {tier.badge && (
+                  <span
+                    className={`inline-flex items-center self-start rounded-full border px-4 py-1 text-[11px] uppercase tracking-[0.25em] ${
+                      tier.featured
+                        ? "border-[#0693e3]/30 bg-gradient-to-r from-[#0693e3]/20 to-[#0472b8]/20 text-[#0472b8]"
+                        : "border-slate-200 bg-gradient-to-r from-[#0693e3]/10 to-[#0bbf87]/10 text-[#0693e3]"
+                    }`}
+                  >
+                    {tier.badge}
+                  </span>
+                )}
 
-      <section className="max-w-6xl mx-auto px-6 pb-24 space-y-10">
-        <h3 className="text-xl font-semibold text-slate-900">
-          Compare plan capabilities
-        </h3>
-        <div className="overflow-hidden rounded-3xl border-2 border-[#0693e3]/20 bg-gradient-to-br from-white via-[#0693e3]/5 to-[#0bbf87]/5 shadow-lg">
-          <table className="min-w-full text-sm text-slate-600">
-            <thead className="bg-gradient-to-r from-[#0693e3]/10 via-[#5d4ae3]/10 to-[#0bbf87]/10 text-slate-700 uppercase text-xs tracking-[0.3em]">
-              <tr>
-                <th className="px-6 py-4 text-left font-semibold">Capability</th>
-                <th className="px-6 py-4 text-center font-semibold">Launch</th>
-                <th className="px-6 py-4 text-center font-semibold text-[#0693e3]">Scale</th>
-                <th className="px-6 py-4 text-center font-semibold">Enterprise</th>
-              </tr>
-            </thead>
-            <tbody>
-              {featureMatrix.map((row, index) => (
-                <tr key={row.feature} className={index % 2 === 0 ? "bg-white/50" : "bg-gradient-to-r from-white/30 to-transparent"}>
-                  <td className="px-6 py-5 text-slate-900 font-medium">{row.feature}</td>
-                  <td className="px-6 py-5 text-center">
-                    {row.launch === true ? <span className="inline-flex items-center gap-1"><span className="size-1.5 rounded-full bg-[#0bbf87]"></span>Included</span> : row.launch}
-                  </td>
-                  <td className="px-6 py-5 text-center font-medium text-[#0693e3]">
-                    {row.scale === true ? <span className="inline-flex items-center gap-1"><span className="size-1.5 rounded-full bg-[#0693e3]"></span>Included</span> : row.scale}
-                  </td>
-                  <td className="px-6 py-5 text-center">
-                    {row.enterprise === true ? <span className="inline-flex items-center gap-1"><span className="size-1.5 rounded-full bg-[#5d4ae3]"></span>Included</span> : row.enterprise}
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
+                {/* Icon */}
+                <div className={`inline-flex size-14 rounded-2xl bg-gradient-to-br ${tier.iconColor} items-center justify-center text-white shadow-lg w-fit`}>
+                  <Icon className="h-7 w-7" />
+                </div>
+
+                {/* Plan Info */}
+                <div>
+                  <h3 className="text-2xl font-semibold text-slate-900">{tier.name}</h3>
+                  <p className="text-sm text-slate-600 mt-2">{tier.description}</p>
+                </div>
+
+                {/* Price */}
+                <div className="text-4xl font-semibold text-slate-900">
+                  {tier.price}
+                  {tier.cadence && (
+                    <span className="text-sm font-normal text-slate-500 ml-2">
+                      {tier.cadence}
+                    </span>
+                  )}
+                </div>
+
+                {/* Features List */}
+                <ul className="space-y-4 text-sm text-slate-600 flex-1">
+                  {tier.features.map((feature, idx) => {
+                    const colors = [
+                      "bg-[#0693e3]",
+                      "bg-[#0bbf87]",
+                      "bg-[#ff7a00]",
+                      "bg-[#5d4ae3]",
+                    ];
+                    return (
+                      <li key={feature} className="flex gap-3 items-start">
+                        <CheckIcon className={`h-5 w-5 ${colors[idx % colors.length]} text-white rounded-full p-0.5 flex-shrink-0 mt-0.5`} />
+                        <span>{feature}</span>
+                      </li>
+                    );
+                  })}
+                </ul>
+
+                {/* CTA Button */}
+                <div className="pt-4">
+                  <a
+                    href="https://app.igny8.com/signup"
+                    className={`inline-flex w-full items-center justify-center rounded-full px-6 py-3 text-sm font-semibold transition ${
+                      tier.featured
+                        ? "bg-gradient-to-r from-[#0693e3] to-[#0472b8] text-white hover:from-[#0472b8] hover:to-[#0693e3] shadow-lg shadow-[#0693e3]/30"
+                        : "border-2 border-slate-300 bg-white/50 backdrop-blur-sm text-slate-900 hover:border-[#0693e3] hover:bg-white"
+                    }`}
+                  >
+                    Start free trial
+                  </a>
+                </div>
+              </div>
+            );
+          })}
         </div>
       </section>
 
-      <section className="bg-gradient-to-br from-[#0693e3]/10 via-slate-50/70 to-[#0bbf87]/10 border-y border-[#0693e3]/20">
-        <div className="max-w-6xl mx-auto px-6 py-24 grid grid-cols-1 md:grid-cols-2 gap-12">
-          <div className="rounded-3xl border-2 border-[#0693e3]/30 bg-gradient-to-br from-[#0693e3]/5 to-white p-8 space-y-4 text-sm text-slate-600">
-            <h4 className="text-lg font-semibold text-slate-900 flex items-center gap-2">
-              <span className="size-2 rounded-full bg-[#0693e3]"></span>
-              Usage-based credits explained
-            </h4>
-            <p>
+      {/* COMPARISON TABLE SECTION */}
+      <section className="max-w-7xl mx-auto px-6 pb-24">
+        <h3 className="text-3xl font-bold text-slate-900 mb-8 text-center">
+          Compare plan capabilities
+        </h3>
+        <div className="overflow-hidden rounded-3xl border-2 border-slate-200 bg-white shadow-lg">
+          <div className="overflow-x-auto">
+            <table className="min-w-full text-sm">
+              <thead className="bg-gradient-to-r from-[#0693e3]/10 via-[#5d4ae3]/10 to-[#0bbf87]/10 sticky top-0">
+                <tr>
+                  <th className="px-6 py-4 text-left font-semibold text-slate-900">Capability</th>
+                  <th className="px-6 py-4 text-center font-semibold text-slate-900">Starter</th>
+                  <th className="px-6 py-4 text-center font-semibold text-[#0693e3] bg-gradient-to-br from-[#0693e3]/5 to-transparent">
+                    Growth
+                  </th>
+                  <th className="px-6 py-4 text-center font-semibold text-slate-900">Scale</th>
+                </tr>
+              </thead>
+              <tbody>
+                {featureMatrix.map((row, index) => (
+                  <tr
+                    key={row.feature}
+                    className={index % 2 === 0 ? "bg-white" : "bg-slate-50/50"}
+                  >
+                    <td className="px-6 py-5 text-slate-900 font-medium">{row.feature}</td>
+                    <td className="px-6 py-5 text-center text-slate-700">
+                      {row.starter === true ? (
+                        <CheckIcon className="h-5 w-5 text-[#0bbf87] mx-auto" />
+                      ) : row.starter === false ? (
+                        <XMarkIcon className="h-5 w-5 text-slate-300 mx-auto" />
+                      ) : (
+                        <span className="inline-flex items-center gap-1">
+                          <span className="size-1.5 rounded-full bg-[#0693e3]"></span>
+                          {row.starter}
+                        </span>
+                      )}
+                    </td>
+                    <td className="px-6 py-5 text-center font-medium text-[#0693e3] bg-gradient-to-br from-[#0693e3]/5 to-transparent">
+                      {row.growth === true ? (
+                        <CheckIcon className="h-5 w-5 text-[#0bbf87] mx-auto" />
+                      ) : row.growth === false ? (
+                        <XMarkIcon className="h-5 w-5 text-slate-300 mx-auto" />
+                      ) : (
+                        <span className="inline-flex items-center gap-1">
+                          <span className="size-1.5 rounded-full bg-[#0693e3]"></span>
+                          {row.growth}
+                        </span>
+                      )}
+                    </td>
+                    <td className="px-6 py-5 text-center text-slate-700">
+                      {row.scale === true ? (
+                        <CheckIcon className="h-5 w-5 text-[#0bbf87] mx-auto" />
+                      ) : row.scale === false ? (
+                        <XMarkIcon className="h-5 w-5 text-slate-300 mx-auto" />
+                      ) : (
+                        <span className="inline-flex items-center gap-1">
+                          <span className="size-1.5 rounded-full bg-[#5d4ae3]"></span>
+                          {row.scale}
+                        </span>
+                      )}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </section>
+
+      {/* INFO BLOCKS SECTION */}
+      <section className="bg-gradient-to-b from-white via-slate-50/30 to-white">
+        <div className="max-w-6xl mx-auto px-6 py-24 grid grid-cols-1 md:grid-cols-2 gap-8">
+          <div className="rounded-3xl border-2 border-[#0693e3]/30 bg-gradient-to-br from-[#0693e3]/5 via-white to-[#0bbf87]/5 p-8 space-y-4 shadow-lg hover:shadow-xl transition-all">
+            <div className="flex items-center gap-3 mb-4">
+              <div className="size-12 rounded-full bg-gradient-to-br from-[#0693e3] to-[#0472b8] flex items-center justify-center text-white shadow-lg">
+                <CreditCardIcon className="h-6 w-6" />
+              </div>
+              <h4 className="text-lg font-semibold text-slate-900">
+                Usage-based credits explained
+              </h4>
+            </div>
+            <p className="text-sm text-slate-600 leading-relaxed">
               Igny8 credits cover AI-generated drafts, clustering, and image creation. Monitor usage in real time from your dashboard. Credits roll over for 30 days.
             </p>
-            <p>
+            <p className="text-sm text-slate-600 leading-relaxed">
               Need more? Add packs instantly or set automation rules to pause when thresholds are hit.
             </p>
           </div>
-          <div className="rounded-3xl border-2 border-[#0bbf87]/30 bg-gradient-to-br from-[#0bbf87]/5 to-white p-8 space-y-4 text-sm text-slate-600">
-            <h4 className="text-lg font-semibold text-slate-900 flex items-center gap-2">
-              <span className="size-2 rounded-full bg-[#0bbf87]"></span>
-              Security & compliance
-            </h4>
-            <p>
+          <div className="rounded-3xl border-2 border-[#0bbf87]/30 bg-gradient-to-br from-[#0bbf87]/5 via-white to-[#5d4ae3]/5 p-8 space-y-4 shadow-lg hover:shadow-xl transition-all">
+            <div className="flex items-center gap-3 mb-4">
+              <div className="size-12 rounded-full bg-gradient-to-br from-[#0bbf87] to-[#08966b] flex items-center justify-center text-white shadow-lg">
+                <ShieldCheckIcon className="h-6 w-6" />
+              </div>
+              <h4 className="text-lg font-semibold text-slate-900">
+                Security & compliance
+              </h4>
+            </div>
+            <p className="text-sm text-slate-600 leading-relaxed">
               Igny8 supports granular access controls, SSO, audit logging, and data residency requests. Enterprise plans include SOC 2 documentation and custom security reviews.
             </p>
           </div>
         </div>
       </section>
 
-      <CTASection
-        title="Let’s build a plan tailored to your content velocity goals."
-        description="Our team will help you forecast automation impact, map migrations, and launch Igny8 within days."
-        primaryCta={{ label: "Talk to sales", href: "/contact" }}
-        secondaryCta={{ label: "Start free trial", href: "https://app.igny8.com/signup" }}
-      />
+      {/* FINAL CTA */}
+      <section className="relative overflow-hidden bg-gradient-to-br from-[#0693e3] via-[#5d4ae3] to-[#8b5cf6]">
+        {/* Radial glow */}
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(255,255,255,0.1),transparent_70%)]" />
+        
+        <div className="relative max-w-4xl mx-auto px-6 py-24 md:py-32 text-center z-10">
+          <h2 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white mb-6 leading-tight">
+            Let's build a plan tailored to your growth.
+          </h2>
+          <p className="text-xl md:text-2xl text-white/90 mb-12 max-w-2xl mx-auto font-medium">
+            Get guidance for automation mapping, migration, and onboarding.
+          </p>
+          <div className="flex flex-col sm:flex-row gap-5 justify-center">
+            <Link
+              to="/contact"
+              className="inline-flex items-center justify-center gap-2 rounded-xl border-2 border-white/30 bg-white/10 backdrop-blur-sm text-white px-10 py-5 text-lg font-bold hover:bg-white/20 hover:border-white/50 transition"
+            >
+              <ChatBubbleLeftRightIcon className="h-5 w-5" />
+              Talk to sales
+            </Link>
+            <a
+              href="https://app.igny8.com/signup"
+              target="_blank"
+              rel="noreferrer"
+              className="inline-flex items-center justify-center gap-2 rounded-xl bg-white text-[#0693e3] px-10 py-5 text-lg font-bold hover:bg-white/95 transition shadow-xl hover:shadow-2xl hover:-translate-y-0.5"
+            >
+              <RocketLaunchIcon className="h-5 w-5" />
+              Start free trial
+            </a>
+          </div>
+        </div>
+      </section>
     </div>
   );
 };
 
 export default Pricing;
-