Update Pricing.tsx
This commit is contained in:
Desktop
@@ -1,219 +1,459 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import SectionHeading from "../components/SectionHeading";
|
import { Link } from "react-router-dom";
|
||||||
import CTASection from "../components/CTASection";
|
import {
|
||||||
|
RocketLaunchIcon,
|
||||||
const tiers = [
|
ChatBubbleLeftRightIcon,
|
||||||
{
|
CheckIcon,
|
||||||
name: "Launch",
|
XMarkIcon,
|
||||||
price: "$199",
|
SparklesIcon,
|
||||||
cadence: "per month",
|
PhotoIcon,
|
||||||
description: "For emerging teams launching AI-assisted content operations.",
|
BoltIcon,
|
||||||
features: [
|
ChartBarIcon,
|
||||||
"Up to 5 team seats",
|
UserGroupIcon,
|
||||||
"Planner + Writer modules",
|
CreditCardIcon,
|
||||||
"3 automation recipes",
|
ShieldCheckIcon,
|
||||||
"2,500 AI credits / month",
|
} from "@heroicons/react/24/outline";
|
||||||
"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",
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const Pricing: React.FC = () => {
|
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 (
|
return (
|
||||||
<div className="bg-gradient-to-b from-white via-slate-50/30 to-white text-slate-900">
|
<div className="bg-white">
|
||||||
<section className="max-w-6xl mx-auto px-6 pt-24 pb-16 space-y-8">
|
{/* PRICING HERO SECTION */}
|
||||||
<SectionHeading
|
<section className="relative overflow-hidden bg-gradient-to-b from-white via-slate-50/30 to-white">
|
||||||
eyebrow="Pricing"
|
<div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(6,147,227,0.02),transparent_60%)]" />
|
||||||
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="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">
|
||||||
<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">
|
Pricing
|
||||||
Looking to migrate from an existing AI content stack? Ask about our migration credit and onboarding accelerator.
|
</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>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section className="max-w-6xl mx-auto px-6 pb-24 grid grid-cols-1 lg:grid-cols-3 gap-8">
|
{/* PRICING TIERS SECTION */}
|
||||||
{tiers.map((tier) => (
|
<section className="max-w-7xl mx-auto px-6 pb-24">
|
||||||
<div
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||||
key={tier.name}
|
{tiers.map((tier) => {
|
||||||
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"}`}
|
const Icon = tier.icon;
|
||||||
>
|
return (
|
||||||
{tier.badge && (
|
<div
|
||||||
<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]"}`}>
|
key={tier.name}
|
||||||
{tier.badge}
|
className={`relative rounded-3xl border-2 ${
|
||||||
</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 ${
|
|
||||||
tier.featured
|
tier.featured
|
||||||
? "bg-gradient-to-r from-[#0693e3] to-[#0472b8] text-white hover:from-[#0472b8] hover:to-[#0693e3] shadow-lg shadow-[#0693e3]/30"
|
? "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-2 border-slate-300 bg-white/50 backdrop-blur-sm text-slate-900 hover:border-[#0693e3] hover:bg-white"
|
: "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"}
|
{/* Badge */}
|
||||||
</a>
|
{tier.badge && (
|
||||||
</div>
|
<span
|
||||||
</div>
|
className={`inline-flex items-center self-start rounded-full border px-4 py-1 text-[11px] uppercase tracking-[0.25em] ${
|
||||||
))}
|
tier.featured
|
||||||
</section>
|
? "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">
|
{/* Icon */}
|
||||||
<h3 className="text-xl font-semibold text-slate-900">
|
<div className={`inline-flex size-14 rounded-2xl bg-gradient-to-br ${tier.iconColor} items-center justify-center text-white shadow-lg w-fit`}>
|
||||||
Compare plan capabilities
|
<Icon className="h-7 w-7" />
|
||||||
</h3>
|
</div>
|
||||||
<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">
|
{/* Plan Info */}
|
||||||
<thead className="bg-gradient-to-r from-[#0693e3]/10 via-[#5d4ae3]/10 to-[#0bbf87]/10 text-slate-700 uppercase text-xs tracking-[0.3em]">
|
<div>
|
||||||
<tr>
|
<h3 className="text-2xl font-semibold text-slate-900">{tier.name}</h3>
|
||||||
<th className="px-6 py-4 text-left font-semibold">Capability</th>
|
<p className="text-sm text-slate-600 mt-2">{tier.description}</p>
|
||||||
<th className="px-6 py-4 text-center font-semibold">Launch</th>
|
</div>
|
||||||
<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>
|
{/* Price */}
|
||||||
</tr>
|
<div className="text-4xl font-semibold text-slate-900">
|
||||||
</thead>
|
{tier.price}
|
||||||
<tbody>
|
{tier.cadence && (
|
||||||
{featureMatrix.map((row, index) => (
|
<span className="text-sm font-normal text-slate-500 ml-2">
|
||||||
<tr key={row.feature} className={index % 2 === 0 ? "bg-white/50" : "bg-gradient-to-r from-white/30 to-transparent"}>
|
{tier.cadence}
|
||||||
<td className="px-6 py-5 text-slate-900 font-medium">{row.feature}</td>
|
</span>
|
||||||
<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}
|
</div>
|
||||||
</td>
|
|
||||||
<td className="px-6 py-5 text-center font-medium text-[#0693e3]">
|
{/* Features List */}
|
||||||
{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}
|
<ul className="space-y-4 text-sm text-slate-600 flex-1">
|
||||||
</td>
|
{tier.features.map((feature, idx) => {
|
||||||
<td className="px-6 py-5 text-center">
|
const colors = [
|
||||||
{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}
|
"bg-[#0693e3]",
|
||||||
</td>
|
"bg-[#0bbf87]",
|
||||||
</tr>
|
"bg-[#ff7a00]",
|
||||||
))}
|
"bg-[#5d4ae3]",
|
||||||
</tbody>
|
];
|
||||||
</table>
|
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>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section className="bg-gradient-to-br from-[#0693e3]/10 via-slate-50/70 to-[#0bbf87]/10 border-y border-[#0693e3]/20">
|
{/* COMPARISON TABLE SECTION */}
|
||||||
<div className="max-w-6xl mx-auto px-6 py-24 grid grid-cols-1 md:grid-cols-2 gap-12">
|
<section className="max-w-7xl mx-auto px-6 pb-24">
|
||||||
<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">
|
<h3 className="text-3xl font-bold text-slate-900 mb-8 text-center">
|
||||||
<h4 className="text-lg font-semibold text-slate-900 flex items-center gap-2">
|
Compare plan capabilities
|
||||||
<span className="size-2 rounded-full bg-[#0693e3]"></span>
|
</h3>
|
||||||
Usage-based credits explained
|
<div className="overflow-hidden rounded-3xl border-2 border-slate-200 bg-white shadow-lg">
|
||||||
</h4>
|
<div className="overflow-x-auto">
|
||||||
<p>
|
<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.
|
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>
|
<p className="text-sm text-slate-600 leading-relaxed">
|
||||||
Need more? Add packs instantly or set automation rules to pause when thresholds are hit.
|
Need more? Add packs instantly or set automation rules to pause when thresholds are hit.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</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">
|
<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">
|
||||||
<h4 className="text-lg font-semibold text-slate-900 flex items-center gap-2">
|
<div className="flex items-center gap-3 mb-4">
|
||||||
<span className="size-2 rounded-full bg-[#0bbf87]"></span>
|
<div className="size-12 rounded-full bg-gradient-to-br from-[#0bbf87] to-[#08966b] flex items-center justify-center text-white shadow-lg">
|
||||||
Security & compliance
|
<ShieldCheckIcon className="h-6 w-6" />
|
||||||
</h4>
|
</div>
|
||||||
<p>
|
<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.
|
Igny8 supports granular access controls, SSO, audit logging, and data residency requests. Enterprise plans include SOC 2 documentation and custom security reviews.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<CTASection
|
{/* FINAL CTA */}
|
||||||
title="Let’s build a plan tailored to your content velocity goals."
|
<section className="relative overflow-hidden bg-gradient-to-br from-[#0693e3] via-[#5d4ae3] to-[#8b5cf6]">
|
||||||
description="Our team will help you forecast automation impact, map migrations, and launch Igny8 within days."
|
{/* Radial glow */}
|
||||||
primaryCta={{ label: "Talk to sales", href: "/contact" }}
|
<div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(255,255,255,0.1),transparent_70%)]" />
|
||||||
secondaryCta={{ label: "Start free trial", href: "https://app.igny8.com/signup" }}
|
|
||||||
/>
|
<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>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Pricing;
|
export default Pricing;
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user