575 lines
30 KiB
TypeScript
575 lines
30 KiB
TypeScript
import React, { useState, useEffect } from "react";
|
||
import {
|
||
RocketLaunchIcon,
|
||
ChatBubbleLeftRightIcon,
|
||
CheckIcon,
|
||
XMarkIcon,
|
||
CreditCardIcon,
|
||
ShieldCheckIcon,
|
||
} from "@heroicons/react/24/outline";
|
||
import SEO from "../components/SEO";
|
||
import { getMetaTags } from "../config/metaTags";
|
||
import { getPublicPlans } from "../../services/billing.api";
|
||
import { PricingTable, PricingPlan } from "../../components/ui/pricing-table";
|
||
import PricingTable1 from "../../components/ui/pricing-table/pricing-table-1";
|
||
import { Link } from "react-router-dom";
|
||
import { Plan, convertToPricingPlan } from "../../utils/pricingHelpers";
|
||
import Button from "../../components/ui/button/Button";
|
||
|
||
const Pricing: React.FC = () => {
|
||
const [plans, setPlans] = useState<Plan[]>([]);
|
||
const [loading, setLoading] = useState(true);
|
||
const [error, setError] = useState<string | null>(null);
|
||
const [managedTier, setManagedTier] = useState<'lite' | 'pro'>('lite');
|
||
|
||
useEffect(() => {
|
||
const fetchPlans = async () => {
|
||
try {
|
||
const data = await getPublicPlans();
|
||
setPlans(data);
|
||
setLoading(false);
|
||
} catch (err) {
|
||
console.error('Error fetching public plans:', err);
|
||
setError('Failed to load pricing plans');
|
||
setLoading(false);
|
||
}
|
||
};
|
||
fetchPlans();
|
||
}, []);
|
||
|
||
const featureMatrix = [
|
||
{ feature: "ACCOUNT & ACCESS", starter: null, growth: null, scale: null, isCategory: true },
|
||
{ feature: "Sites", starter: "2", growth: "5", scale: "Unlimited" },
|
||
{ feature: "Team Users", starter: "1", growth: "3", scale: "5" },
|
||
{ feature: "User Roles & Permissions", starter: true, growth: true, scale: true },
|
||
{ feature: "Multi-Site Management", starter: true, growth: true, scale: true },
|
||
|
||
{ feature: "CREDITS & USAGE", starter: null, growth: null, scale: null, isCategory: true },
|
||
{ feature: "Monthly Credits", starter: "1,000", growth: "3,000", scale: "5,000" },
|
||
{ feature: "Usage Analytics Dashboard", starter: true, growth: true, scale: true },
|
||
{ feature: "Additional Credit Packages", starter: "Available", growth: "Available", scale: "Available" },
|
||
|
||
{ feature: "PLANNER MODULE", starter: null, growth: null, scale: null, isCategory: true },
|
||
{ feature: "Bulk Keyword Import (CSV)", starter: "Unlimited rows", growth: "Unlimited rows", scale: "Unlimited rows" },
|
||
{ feature: "AI-Powered Clustering", starter: "100 clusters", growth: "300 clusters", scale: "500 clusters" },
|
||
{ feature: "Global Seed Keyword Database", starter: "100+ industry sectors", growth: "100+ industry sectors", scale: "100+ industry sectors" },
|
||
{ feature: "Search Intent Classification", starter: true, growth: true, scale: true },
|
||
{ feature: "High-Opportunity Keywords", starter: true, growth: true, scale: true },
|
||
{ feature: "Industry & Sector Organization", starter: true, growth: true, scale: true },
|
||
{ feature: "Advanced Filtering & Search", starter: true, growth: true, scale: true },
|
||
|
||
{ feature: "CONTENT IDEATION", starter: null, growth: null, scale: null, isCategory: true },
|
||
{ feature: "AI Content Idea Generation", starter: "300 ideas", growth: "900 ideas", scale: "1,500 ideas" },
|
||
{ feature: "Structured Content Briefs", starter: true, growth: true, scale: true },
|
||
{ feature: "Word Count Estimation", starter: true, growth: true, scale: true },
|
||
{ feature: "Priority Scoring", starter: true, growth: true, scale: true },
|
||
{ feature: "Editorial Calendar Integration", starter: true, growth: true, scale: true },
|
||
|
||
{ feature: "WRITER MODULE", starter: null, growth: null, scale: null, isCategory: true },
|
||
{ feature: "Premium AI Content Generation", starter: "100K words", growth: "300K words", scale: "500K words" },
|
||
{ feature: "Smart Content Structuring", starter: true, growth: true, scale: true },
|
||
{ feature: "SEO Optimization (Built-in)", starter: true, growth: true, scale: true },
|
||
{ feature: "Customizable Word Counts", starter: "500-5,000+", growth: "500-5,000+", scale: "500-5,000+" },
|
||
{ feature: "Brand Voice Consistency", starter: true, growth: true, scale: true },
|
||
{ feature: "HTML Content Editor", starter: true, growth: true, scale: true },
|
||
{ feature: "SEO Metadata Management", starter: true, growth: true, scale: true },
|
||
{ feature: "Taxonomy Manager", starter: true, growth: true, scale: true },
|
||
|
||
{ feature: "IMAGE GENERATION", starter: null, growth: null, scale: null, isCategory: true },
|
||
{ feature: "AI Image Generation", starter: "300 basic / 60 premium", growth: "900 basic / 180 premium", scale: "1,500 basic / 300 premium" },
|
||
{ feature: "Featured Images", starter: true, growth: true, scale: true },
|
||
{ feature: "In-Article Images", starter: true, growth: true, scale: true },
|
||
{ feature: "AI Providers", starter: "DALL-E 3, Runware, Bria", growth: "DALL-E 3, Runware, Bria", scale: "DALL-E 3, Runware, Bria" },
|
||
{ feature: "Credits: Basic Images", starter: "5 per image", growth: "5 per image", scale: "5 per image" },
|
||
{ feature: "Credits: Premium Images", starter: "25 per image", growth: "25 per image", scale: "25 per image" },
|
||
{ feature: "Multiple Image Sizes", starter: true, growth: true, scale: true },
|
||
{ feature: "Automatic Alt Text", starter: true, growth: true, scale: true },
|
||
{ feature: "Style Presets", starter: true, growth: true, scale: true },
|
||
|
||
{ feature: "AUTOMATION PIPELINE", starter: null, growth: null, scale: null, isCategory: true },
|
||
{ feature: "7-Stage Automation Pipeline", starter: true, growth: true, scale: true },
|
||
{ feature: "Scheduled Automation Runs", starter: "Daily/Weekly/Monthly", growth: "Daily/Weekly/Monthly", scale: "Daily/Weekly/Monthly" },
|
||
{ feature: "Configurable Batch Sizes", starter: true, growth: true, scale: true },
|
||
{ feature: "Pause & Resume", starter: true, growth: true, scale: true },
|
||
{ feature: "Credit Estimation", starter: true, growth: true, scale: true },
|
||
{ feature: "Detailed Activity Logs", starter: true, growth: true, scale: true },
|
||
{ feature: "Manual Override Triggers", starter: true, growth: true, scale: true },
|
||
|
||
{ feature: "INTEGRATIONS", starter: null, growth: null, scale: null, isCategory: true },
|
||
{ feature: "Shopify, WordPress, and Custom Integrations", starter: true, growth: true, scale: true },
|
||
{ feature: "IGNY8 WP Bridge Plugin", starter: true, growth: true, scale: true },
|
||
{ feature: "1-Click API-Based Integration", starter: true, growth: true, scale: true },
|
||
{ feature: "Custom Integration Support", starter: true, growth: true, scale: true },
|
||
{ feature: "Shopify Integration", starter: "🔜 Coming Soon", growth: "🔜 Coming Soon", scale: "🔜 Coming Soon" },
|
||
|
||
{ feature: "MULTI-PLATFORM PUBLISHING", starter: null, growth: null, scale: null, isCategory: true },
|
||
{ feature: "One-Click Publishing", starter: true, growth: true, scale: true },
|
||
{ feature: "Automatic Content & Media Upload", starter: true, growth: true, scale: true },
|
||
{ feature: "Bidirectional Status Sync", starter: true, growth: true, scale: true },
|
||
{ feature: "Taxonomy Synchronization", starter: true, growth: true, scale: true },
|
||
{ feature: "SEO Metadata Sync", starter: true, growth: true, scale: true },
|
||
{ feature: "Custom Fields Support", starter: true, growth: true, scale: true },
|
||
{ feature: "Multiple sites (Shopify, WordPress, custom)", starter: "Up to 2", growth: "Up to 5", scale: "Unlimited" },
|
||
{ feature: "API Key Authentication", starter: true, growth: true, scale: true },
|
||
{ feature: "Error Handling & Retry", starter: true, growth: true, scale: true },
|
||
|
||
{ feature: "CUSTOMIZATION", starter: null, growth: null, scale: null, isCategory: true },
|
||
{ feature: "Custom AI Prompts", starter: true, growth: true, scale: true },
|
||
{ feature: "Brand Voice Configuration", starter: true, growth: true, scale: true },
|
||
{ feature: "Content Type Templates", starter: true, growth: true, scale: true },
|
||
{ feature: "Advanced AI Parameter Tuning", starter: true, growth: true, scale: true },
|
||
|
||
{ feature: "BILLING & INVOICING", starter: null, growth: null, scale: null, isCategory: true },
|
||
{ feature: "Usage Dashboard", starter: true, growth: true, scale: true },
|
||
{ feature: "Usage Analytics", starter: true, growth: true, scale: true },
|
||
{ feature: "Invoice Management", starter: true, growth: true, scale: true },
|
||
{ feature: "Multiple Payment Methods", starter: true, growth: true, scale: true },
|
||
{ feature: "PDF Invoice Download", starter: true, growth: true, scale: true },
|
||
|
||
{ feature: "SUPPORT & DOCUMENTATION", starter: null, growth: null, scale: null, isCategory: true },
|
||
{ feature: "Email Support", starter: true, growth: true, scale: true },
|
||
{ feature: "Documentation Access", starter: true, growth: true, scale: true },
|
||
{ feature: "Video Tutorials", starter: true, growth: true, scale: true },
|
||
{ feature: "API Documentation", starter: true, growth: true, scale: true },
|
||
|
||
{ feature: "SECURITY & COMPLIANCE", starter: null, growth: null, scale: null, isCategory: true },
|
||
{ feature: "Enterprise Authentication", starter: true, growth: true, scale: true },
|
||
{ feature: "Data Encryption", starter: true, growth: true, scale: true },
|
||
];
|
||
|
||
return (
|
||
<>
|
||
<SEO meta={getMetaTags("pricing")} />
|
||
<style>{`
|
||
/* Pricing Table Component Styles - Embedded for Marketing Site */
|
||
.pricing-table-wrapper {
|
||
max-width: 1660px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
/* Ensure Tailwind classes work properly */
|
||
.pricing-table-wrapper * {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* Badge component styles */
|
||
.badge-success {
|
||
background-color: var(--color-success, #2CA18E);
|
||
color: white;
|
||
padding: 0.25rem 0.75rem;
|
||
border-radius: 0.375rem;
|
||
font-size: 0.75rem;
|
||
font-weight: 600;
|
||
display: inline-block;
|
||
}
|
||
|
||
.badge-primary {
|
||
background: linear-gradient(135deg, var(--color-primary, #2C7AA1) 0%, var(--color-brand-700, #236185) 100%);
|
||
color: white;
|
||
padding: 0.375rem 0.75rem;
|
||
border-radius: 0.5rem;
|
||
font-size: 0.75rem;
|
||
font-weight: 600;
|
||
display: inline-block;
|
||
box-shadow: 0 2px 8px color-mix(in oklch, var(--color-primary) 30%, transparent);
|
||
}
|
||
|
||
/* Primary button styles */
|
||
.btn-primary {
|
||
background: linear-gradient(135deg, var(--color-primary, #2C7AA1) 0%, var(--color-brand-700, #236185) 100%);
|
||
color: white;
|
||
padding: 0.75rem 1.5rem;
|
||
border-radius: 0.5rem;
|
||
font-weight: 600;
|
||
font-size: 0.9375rem;
|
||
transition: all 0.2s ease;
|
||
border: none;
|
||
cursor: pointer;
|
||
width: 100%;
|
||
box-shadow: 0 4px 12px color-mix(in oklch, var(--color-primary) 30%, transparent);
|
||
}
|
||
|
||
.btn-primary:hover:not(:disabled) {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 6px 16px color-mix(in oklch, var(--color-primary) 40%, transparent);
|
||
}
|
||
|
||
.btn-primary:active:not(:disabled) {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
.btn-primary:disabled {
|
||
opacity: 0.6;
|
||
cursor: not-allowed;
|
||
transform: none;
|
||
}
|
||
|
||
/* Outline button styles */
|
||
.btn-outline {
|
||
background-color: var(--color-gray-800, #1e293b);
|
||
color: white;
|
||
padding: 0.75rem 1.5rem;
|
||
border-radius: 0.5rem;
|
||
font-weight: 600;
|
||
font-size: 0.9375rem;
|
||
transition: all 0.2s ease;
|
||
border: 2px solid var(--color-gray-700, #334155);
|
||
cursor: pointer;
|
||
width: 100%;
|
||
}
|
||
|
||
.btn-outline:hover:not(:disabled) {
|
||
background-color: var(--color-gray-700, #334155);
|
||
border-color: var(--color-gray-600, #475569);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.btn-outline:active:not(:disabled) {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
.btn-outline:disabled {
|
||
opacity: 0.6;
|
||
cursor: not-allowed;
|
||
transform: none;
|
||
}
|
||
|
||
/* Featured plan highlight */
|
||
.pricing-card-featured {
|
||
background: linear-gradient(135deg, var(--color-gray-800, #1e293b) 0%, var(--color-gray-700, #334155) 100%) !important;
|
||
color: white;
|
||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
.pricing-card-featured h3,
|
||
.pricing-card-featured .price-text {
|
||
color: white !important;
|
||
}
|
||
|
||
.pricing-card-featured p,
|
||
.pricing-card-featured span:not(.badge-primary):not(.btn-primary) {
|
||
color: var(--color-gray-200, #e2e8f0) !important;
|
||
}
|
||
|
||
.pricing-card-featured li span {
|
||
color: var(--color-gray-200, #e2e8f0) !important;
|
||
}
|
||
|
||
.pricing-card-featured .line-through {
|
||
color: var(--color-gray-400, #94a3b8) !important;
|
||
}
|
||
|
||
/* Check icon colors */
|
||
.pricing-card-featured svg {
|
||
color: var(--color-success, #2CA18E) !important;
|
||
}
|
||
|
||
/* Strikethrough price */
|
||
.line-through {
|
||
text-decoration: line-through;
|
||
opacity: 0.6;
|
||
}
|
||
`}</style>
|
||
<div className="bg-white">
|
||
{/* PRICING HERO SECTION */}
|
||
<section className="relative overflow-hidden bg-gradient-to-b from-white via-gray-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 pt-12 md:pt-16 pb-6 text-center z-10">
|
||
<span className="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.28em] text-gray-500 bg-gray-100 px-4 py-2 rounded-full mb-6">
|
||
Pricing
|
||
</span>
|
||
<h1 className="text-4xl md:text-5xl font-bold leading-tight text-gray-900 mb-0">
|
||
Simple plans that scale with your automation goals.
|
||
</h1>
|
||
</div>
|
||
|
||
{/* SPECIAL PROMO BANNER */}
|
||
<div className="relative max-w-5xl mx-auto px-6 z-10">
|
||
<div className="relative overflow-hidden rounded-2xl bg-gradient-to-r from-warning-500 via-warning-500 to-error-500 p-[2px] shadow-xl">
|
||
<div className="relative bg-gradient-to-r from-warning-50 via-warning-50 to-error-50 rounded-2xl px-6 py-4 flex items-center justify-center gap-3">
|
||
{/* Fire Icon */}
|
||
<svg className="w-6 h-6 text-warning-600 animate-pulse" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||
<path fillRule="evenodd" d="M12.395 2.553a1 1 0 00-1.45-.385c-.345.23-.614.558-.822.88-.214.33-.403.713-.57 1.116-.334.804-.614 1.768-.84 2.734a31.365 31.365 0 00-.613 3.58 2.64 2.64 0 01-.945-1.067c-.328-.68-.398-1.534-.398-2.654A1 1 0 005.05 6.05 6.981 6.981 0 003 11a7 7 0 1011.95-4.95c-.592-.591-.98-.985-1.348-1.467-.363-.476-.724-1.063-1.207-2.03zM12.12 15.12A3 3 0 017 13s.879.5 2.5.5c0-1 .5-4 1.25-4.5.5 1 .786 1.293 1.371 1.879A2.99 2.99 0 0113 13a2.99 2.99 0 01-.879 2.121z" clipRule="evenodd"></path>
|
||
</svg>
|
||
|
||
{/* Message Text */}
|
||
<div className="flex flex-col sm:flex-row items-center gap-2 sm:gap-3">
|
||
<span className="inline-flex items-center gap-2 bg-gradient-to-r from-warning-600 to-warning-600 text-white px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider shadow-lg">
|
||
<svg className="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20">
|
||
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
|
||
</svg>
|
||
Limited Time
|
||
</span>
|
||
<p className="text-base sm:text-lg font-bold text-transparent bg-clip-text bg-gradient-to-r from-warning-700 via-warning-700 to-error-700">
|
||
Upto 33% Lifetime Discount on all Plans for First 25 Users!
|
||
</p>
|
||
</div>
|
||
|
||
{/* Fire Icon */}
|
||
<svg className="w-6 h-6 text-warning-600 animate-pulse" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||
<path fillRule="evenodd" d="M12.395 2.553a1 1 0 00-1.45-.385c-.345.23-.614.558-.822.88-.214.33-.403.713-.57 1.116-.334.804-.614 1.768-.84 2.734a31.365 31.365 0 00-.613 3.58 2.64 2.64 0 01-.945-1.067c-.328-.68-.398-1.534-.398-2.654A1 1 0 005.05 6.05 6.981 6.981 0 003 11a7 7 0 1011.95-4.95c-.592-.591-.98-.985-1.348-1.467-.363-.476-.724-1.063-1.207-2.03zM12.12 15.12A3 3 0 017 13s.879.5 2.5.5c0-1 .5-4 1.25-4.5.5 1 .786 1.293 1.371 1.879A2.99 2.99 0 0113 13a2.99 2.99 0 01-.879 2.121z" clipRule="evenodd"></path>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* LOADING/ERROR STATES */}
|
||
{loading && (
|
||
<section className="max-w-7xl mx-auto px-6 pb-24">
|
||
<div className="text-center py-12">
|
||
<div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-[var(--color-primary)]"></div>
|
||
<p className="mt-4 text-gray-600">Loading pricing plans...</p>
|
||
</div>
|
||
</section>
|
||
)}
|
||
|
||
{error && (
|
||
<section className="max-w-7xl mx-auto px-6 pb-24">
|
||
<div className="text-center py-12">
|
||
<p className="text-error-600">{error}</p>
|
||
<Button
|
||
variant="primary"
|
||
tone="brand"
|
||
size="md"
|
||
onClick={() => window.location.reload()}
|
||
className="mt-4 px-6 py-2 bg-[var(--color-primary)] text-white rounded-lg hover:bg-[var(--color-primary-dark)]"
|
||
>
|
||
Retry
|
||
</Button>
|
||
</div>
|
||
</section>
|
||
)}
|
||
|
||
{/* PRICING TABLES SECTION - Dynamic Backend Plans */}
|
||
{!loading && !error && plans.length > 0 && (
|
||
<section className="px-6 py-8">
|
||
<div className="pricing-table-wrapper">
|
||
<PricingTable1
|
||
plans={plans.map(convertToPricingPlan)}
|
||
showToggle={true}
|
||
onPlanSelect={(plan) => {
|
||
window.location.href = `https://app.igny8.com/signup?plan=${plan.slug || plan.id}`;
|
||
}}
|
||
/>
|
||
</div>
|
||
|
||
<div className="max-w-5xl mx-auto mt-10">
|
||
<div className="flex justify-center">
|
||
<div className="flex items-center justify-center w-20 h-20 rounded-full bg-white shadow-md border border-gray-200 text-[var(--color-primary)] text-5xl">
|
||
+
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mt-6 rounded-2xl border border-brand-200 bg-brand-50 px-6 py-6 shadow-sm">
|
||
<div className="flex flex-col gap-6 md:flex-row md:items-center md:justify-between">
|
||
<div className="space-y-2">
|
||
<div className="flex items-center gap-3">
|
||
<h3 className="text-lg font-semibold text-gray-900">
|
||
Managed Add-on (Per Site)
|
||
</h3>
|
||
<span className="inline-flex items-center rounded-full bg-warning-700 px-2.5 py-1 text-xs font-semibold text-white">
|
||
COMING SOON
|
||
</span>
|
||
</div>
|
||
<p className="text-sm text-gray-600">
|
||
Setup, monthly planning, QA, publishing ops, reporting, and tuning.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="flex flex-col gap-3 sm:flex-row sm:items-center">
|
||
<div className="inline-flex rounded-full bg-white/80 p-1 border border-gray-200">
|
||
<button
|
||
type="button"
|
||
onClick={() => setManagedTier('lite')}
|
||
className={`px-4 py-2 text-sm font-medium rounded-full transition ${
|
||
managedTier === 'lite'
|
||
? 'bg-[var(--color-success)] text-white shadow'
|
||
: 'text-gray-600 hover:text-gray-900'
|
||
}`}
|
||
>
|
||
Managed Lite
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => setManagedTier('pro')}
|
||
className={`px-4 py-2 text-sm font-medium rounded-full transition ${
|
||
managedTier === 'pro'
|
||
? 'bg-[var(--color-success)] text-white shadow'
|
||
: 'text-gray-600 hover:text-gray-900'
|
||
}`}
|
||
>
|
||
Managed Pro
|
||
</button>
|
||
</div>
|
||
|
||
<div className="text-right">
|
||
<div className="text-xl font-bold text-gray-900">
|
||
{managedTier === 'lite' ? '$100' : '$300'}
|
||
<span className="text-sm font-medium text-gray-500"> /site/month</span>
|
||
</div>
|
||
<div className="text-xs text-gray-500">Optional add-on</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
)}
|
||
|
||
{/* COMPARISON TABLE SECTION REMOVED */}
|
||
{!loading && !error && false && (
|
||
<section className="max-w-7xl mx-auto px-6 pb-24 pt-16">
|
||
<h3 className="text-3xl font-bold text-gray-900 mb-8 text-center">
|
||
Compare plan capabilities
|
||
</h3>
|
||
<div className="overflow-hidden rounded-3xl border-2 border-gray-200 bg-white shadow-lg">
|
||
<div className="overflow-x-auto">
|
||
<table className="min-w-full text-sm">
|
||
<thead className="bg-gradient-to-r from-[var(--color-primary)]/10 via-[var(--color-info)]/10 to-[var(--color-success)]/10 sticky top-0">
|
||
<tr>
|
||
<th className="px-6 py-4 text-left font-semibold text-gray-900">Capability</th>
|
||
<th className="px-6 py-4 text-center font-semibold text-gray-900">Starter</th>
|
||
<th className="px-6 py-4 text-center font-semibold text-[var(--color-primary)] bg-gradient-to-br from-[var(--color-primary)]/5 to-transparent">
|
||
Growth
|
||
</th>
|
||
<th className="px-6 py-4 text-center font-semibold text-gray-900">Scale</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{featureMatrix.map((row, index) => {
|
||
// Category row styling
|
||
if (row.isCategory) {
|
||
return (
|
||
<tr key={row.feature} className="bg-gradient-to-r from-gray-100 to-gray-50">
|
||
<td colSpan={4} className="px-6 py-4 text-sm font-bold text-gray-900 uppercase tracking-wider">
|
||
{row.feature}
|
||
</td>
|
||
</tr>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<tr
|
||
key={row.feature}
|
||
className={index % 2 === 0 ? "bg-white" : "bg-gray-50/50"}
|
||
>
|
||
<td className="px-6 py-5 text-gray-900 font-medium">{row.feature}</td>
|
||
<td className="px-6 py-5 text-center text-gray-700">
|
||
{row.starter === true ? (
|
||
<CheckIcon className="h-5 w-5 text-[var(--color-success)] mx-auto" />
|
||
) : row.starter === false ? (
|
||
<XMarkIcon className="h-5 w-5 text-gray-300 mx-auto" />
|
||
) : row.starter === null ? (
|
||
<span className="text-gray-400">—</span>
|
||
) : (
|
||
<span className="inline-flex items-center gap-1">
|
||
<span className="size-1.5 rounded-full bg-[var(--color-primary)]"></span>
|
||
{row.starter}
|
||
</span>
|
||
)}
|
||
</td>
|
||
<td className="px-6 py-5 text-center font-medium text-[var(--color-primary)] bg-gradient-to-br from-[var(--color-primary)]/5 to-transparent">
|
||
{row.growth === true ? (
|
||
<CheckIcon className="h-5 w-5 text-[var(--color-success)] mx-auto" />
|
||
) : row.growth === false ? (
|
||
<XMarkIcon className="h-5 w-5 text-gray-300 mx-auto" />
|
||
) : row.growth === null ? (
|
||
<span className="text-gray-400">—</span>
|
||
) : (
|
||
<span className="inline-flex items-center gap-1">
|
||
<span className="size-1.5 rounded-full bg-[var(--color-primary)]"></span>
|
||
{row.growth}
|
||
</span>
|
||
)}
|
||
</td>
|
||
<td className="px-6 py-5 text-center text-gray-700">
|
||
{row.scale === true ? (
|
||
<CheckIcon className="h-5 w-5 text-[var(--color-success)] mx-auto" />
|
||
) : row.scale === false ? (
|
||
<XMarkIcon className="h-5 w-5 text-gray-300 mx-auto" />
|
||
) : row.scale === null ? (
|
||
<span className="text-gray-400">—</span>
|
||
) : (
|
||
<span className="inline-flex items-center gap-1">
|
||
<span className="size-1.5 rounded-full bg-[var(--color-info)]"></span>
|
||
{row.scale}
|
||
</span>
|
||
)}
|
||
</td>
|
||
</tr>
|
||
);
|
||
})}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
)}
|
||
|
||
{/* AGENCY CTA */}
|
||
<section className="relative overflow-hidden bg-gradient-to-br from-[var(--color-success)] via-[var(--color-primary-dark)] to-[var(--color-primary)] mt-[30px]">
|
||
{/* 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-14 md:py-18 text-center z-10">
|
||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-extrabold text-white mb-4 leading-tight max-w-none md:whitespace-nowrap">
|
||
Agency & enterprise plans built for scale.
|
||
</h2>
|
||
<p className="text-lg md:text-xl text-white/90 mb-8 max-w-2xl mx-auto font-medium">
|
||
Need more credits, more sites, and lower effective costs? We’ll tailor a plan that fits your volume and workflow.
|
||
</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>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* INFO BLOCKS SECTION */}
|
||
<section className="bg-gradient-to-b from-white via-gray-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-[var(--color-primary)]/30 bg-gradient-to-br from-[var(--color-primary)]/5 via-white to-[var(--color-success)]/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-[var(--color-primary)] to-[var(--color-primary-dark)] flex items-center justify-center text-white shadow-lg">
|
||
<CreditCardIcon className="h-6 w-6" />
|
||
</div>
|
||
<h4 className="text-lg font-semibold text-gray-900">
|
||
Usage-based credits explained
|
||
</h4>
|
||
</div>
|
||
<p className="text-sm text-gray-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 className="text-sm text-gray-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-[var(--color-success)]/30 bg-gradient-to-br from-[var(--color-success)]/5 via-white to-[var(--color-info)]/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-[var(--color-success)] to-[var(--color-success-dark)] flex items-center justify-center text-white shadow-lg">
|
||
<ShieldCheckIcon className="h-6 w-6" />
|
||
</div>
|
||
<h4 className="text-lg font-semibold text-gray-900">
|
||
Security & compliance
|
||
</h4>
|
||
</div>
|
||
<p className="text-sm text-gray-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>
|
||
</div>
|
||
</>
|
||
);
|
||
};
|
||
|
||
export default Pricing;
|