Update Pricing.tsx
This commit is contained in:
Desktop
@@ -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;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user