Marketing Website
This commit is contained in:
Desktop
214
frontend/src/marketing/pages/Pricing.tsx
Normal file
214
frontend/src/marketing/pages/Pricing.tsx
Normal file
@@ -0,0 +1,214 @@
|
||||
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",
|
||||
},
|
||||
];
|
||||
|
||||
const Pricing: React.FC = () => {
|
||||
return (
|
||||
<div className="bg-[#050913] text-white">
|
||||
<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 border-white/10 bg-white/5 p-6 text-sm text-white/60 text-center">
|
||||
Looking to migrate from an existing AI content stack? Ask about our migration credit and onboarding accelerator.
|
||||
</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 ${tier.featured ? "border-brand-500/60 bg-brand-500/10 shadow-[0_0_70px_rgba(59,130,246,0.25)]" : "border-white/10 bg-white/5"} p-10 flex flex-col gap-6`}
|
||||
>
|
||||
{tier.badge && (
|
||||
<span className="inline-flex items-center self-start rounded-full border border-white/15 bg-white/10 px-4 py-1 text-[11px] uppercase tracking-[0.25em] text-brand-100">
|
||||
{tier.badge}
|
||||
</span>
|
||||
)}
|
||||
<div>
|
||||
<h3 className="text-2xl font-semibold text-white">{tier.name}</h3>
|
||||
<p className="text-sm text-white/60 mt-2">{tier.description}</p>
|
||||
</div>
|
||||
<div className="text-4xl font-semibold text-white">
|
||||
{tier.price}
|
||||
{tier.cadence && (
|
||||
<span className="text-sm font-normal text-white/50 ml-2">
|
||||
{tier.cadence}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<ul className="space-y-3 text-sm text-white/70">
|
||||
{tier.features.map((feature) => (
|
||||
<li key={feature} className="flex gap-3">
|
||||
<span className="mt-1 size-1.5 rounded-full bg-brand-300" />
|
||||
{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
|
||||
? "bg-white text-slate-950 hover:bg-brand-100"
|
||||
: "border border-white/30 text-white hover:border-white/60"
|
||||
}`}
|
||||
>
|
||||
{tier.name === "Enterprise" ? "Contact sales" : "Start free trial"}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</section>
|
||||
|
||||
<section className="max-w-6xl mx-auto px-6 pb-24 space-y-10">
|
||||
<h3 className="text-xl font-semibold text-white">
|
||||
Compare plan capabilities
|
||||
</h3>
|
||||
<div className="overflow-hidden rounded-3xl border border-white/10 bg-white/5">
|
||||
<table className="min-w-full text-sm text-white/70">
|
||||
<thead className="bg-white/5 text-white/60 uppercase text-xs tracking-[0.3em]">
|
||||
<tr>
|
||||
<th className="px-6 py-4 text-left">Capability</th>
|
||||
<th className="px-6 py-4 text-center">Launch</th>
|
||||
<th className="px-6 py-4 text-center">Scale</th>
|
||||
<th className="px-6 py-4 text-center">Enterprise</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{featureMatrix.map((row, index) => (
|
||||
<tr key={row.feature} className={index % 2 === 0 ? "bg-white/3" : ""}>
|
||||
<td className="px-6 py-5 text-white font-medium">{row.feature}</td>
|
||||
<td className="px-6 py-5 text-center">
|
||||
{row.launch === true ? "Included" : row.launch}
|
||||
</td>
|
||||
<td className="px-6 py-5 text-center">
|
||||
{row.scale === true ? "Included" : row.scale}
|
||||
</td>
|
||||
<td className="px-6 py-5 text-center">
|
||||
{row.enterprise === true ? "Included" : row.enterprise}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="bg-slate-950/70 border-y border-white/5">
|
||||
<div className="max-w-6xl mx-auto px-6 py-24 grid grid-cols-1 md:grid-cols-2 gap-12 text-sm text-white/70">
|
||||
<div className="space-y-4">
|
||||
<h4 className="text-lg font-semibold text-white">
|
||||
Usage-based credits explained
|
||||
</h4>
|
||||
<p>
|
||||
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>
|
||||
Need more? Add packs instantly or set automation rules to pause when thresholds are hit.
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<h4 className="text-lg font-semibold text-white">
|
||||
Security & compliance
|
||||
</h4>
|
||||
<p>
|
||||
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" }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Pricing;
|
||||
|
||||
Reference in New Issue
Block a user