pricign tbale udpated

2025-12-13 19:52:49 +00:00
parent db1fd2fff8
commit 410d2b33ec
12 changed files with 453 additions and 104 deletions
--- a/frontend/src/marketing/pages/Pricing.tsx
+++ b/frontend/src/marketing/pages/Pricing.tsx
@@ -10,7 +10,8 @@ import {
 import SEO from "../components/SEO";
 import { getMetaTags } from "../config/metaTags";
 import { getPublicPlans } from "../../services/billing.api";
-import PricingTable, { PricingPlan } from "../../components/ui/pricing-table/PricingTable";
+import { PricingTable, PricingPlan } from "../../components/ui/pricing-table";
+import PricingTable1 from "../../components/ui/pricing-table/pricing-table-1";
 import { Link } from "react-router-dom";

 interface Plan {
@@ -47,13 +48,25 @@ const convertToPricingPlan = (plan: Plan): PricingPlan => {
  if (plan.max_users) features.push(`${plan.max_users} Team User${plan.max_users > 1 ? 's' : ''}`);
  if (plan.included_credits) features.push(`${formatNumber(plan.included_credits)} Monthly Credits`);
  if (plan.max_content_words) features.push(`${formatNumber(plan.max_content_words)} Words/Month`);
-  if (plan.max_clusters) features.push(`${plan.max_clusters} AI Keyword Clusters`);
+  if (plan.max_clusters) features.push(`${plan.max_clusters === 999 ? '500' : plan.max_clusters} AI Keyword Clusters`);
  if (plan.max_content_ideas) features.push(`${formatNumber(plan.max_content_ideas)} Content Ideas`);
  if (plan.max_images_basic && plan.max_images_premium) {
    features.push(`${formatNumber(plan.max_images_basic)} Basic / ${formatNumber(plan.max_images_premium)} Premium Images`);
  }
  if (plan.max_image_prompts) features.push(`${formatNumber(plan.max_image_prompts)} Image Prompts`);
  
+  // Custom descriptions based on plan name
+  let description = `Perfect for ${plan.name.toLowerCase()} needs`;
+  if (plan.name.toLowerCase().includes('free')) {
+    description = 'Explore core features risk free';
+  } else if (plan.name.toLowerCase().includes('starter')) {
+    description = 'Launch SEO workflows for small teams';
+  } else if (plan.name.toLowerCase().includes('growth')) {
+    description = 'Scale content production with confidence';
+  } else if (plan.name.toLowerCase().includes('scale')) {
+    description = 'Enterprise power for high volume growth';
+  }
+  
  return {
    id: plan.id,
    name: plan.name,
@@ -61,9 +74,9 @@ const convertToPricingPlan = (plan: Plan): PricingPlan => {
    price: monthlyPrice,
    annualDiscountPercent: plan.annual_discount_percent || 15,
    period: '/month',
-    description: `Perfect for ${plan.name.toLowerCase()} needs`,
+    description: description,
    features,
-    buttonText: monthlyPrice === 0 ? 'Start Free' : 'Choose Plan',
+    buttonText: monthlyPrice === 0 ? 'Free Trial' : 'Choose Plan',
    highlighted: plan.is_featured || false,
  };
 };
@@ -190,21 +203,148 @@ const Pricing: React.FC = () => {
  return (
    <>
      <SEO meta={getMetaTags("pricing")} />
+      <style>{`
+        /* Pricing Table Component Styles - Embedded for Marketing Site */
+        .pricing-table-wrapper {
+          max-width: 1560px;
+          margin: 0 auto;
+        }
+        
+        /* Ensure Tailwind classes work properly */
+        .pricing-table-wrapper * {
+          box-sizing: border-box;
+        }
+        
+        /* Badge component styles */
+        .badge-success {
+          background-color: #10b981;
+          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, #0693e3 0%, #0578c2 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 rgba(6, 147, 227, 0.3);
+        }
+        
+        /* Primary button styles */
+        .btn-primary {
+          background: linear-gradient(135deg, #0693e3 0%, #0578c2 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 rgba(6, 147, 227, 0.3);
+        }
+        
+        .btn-primary:hover:not(:disabled) {
+          transform: translateY(-2px);
+          box-shadow: 0 6px 16px rgba(6, 147, 227, 0.4);
+        }
+        
+        .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: #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 #334155;
+          cursor: pointer;
+          width: 100%;
+        }
+        
+        .btn-outline:hover:not(:disabled) {
+          background-color: #334155;
+          border-color: #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, #1e293b 0%, #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: #e2e8f0 !important;
+        }
+        
+        .pricing-card-featured li span {
+          color: #e2e8f0 !important;
+        }
+        
+        .pricing-card-featured .line-through {
+          color: #94a3b8 !important;
+        }
+        
+        /* Check icon colors */
+        .pricing-card-featured svg {
+          color: #10b981 !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-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">
+        <div className="relative max-w-4xl mx-auto px-6 py-16 md:py-20 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">
+          <h1 className="text-4xl md:text-5xl font-bold leading-tight text-slate-900 mb-4">
            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>

@@ -232,27 +372,25 @@ const Pricing: React.FC = () => {
        </section>
      )}

-      {/* PRICING TIERS SECTION */}
-      {!loading && !error && (
-      <section className="mx-auto px-6 py-16" style={{ maxWidth: '1560px' }}>
-        <PricingTable
-          variant="1"
-          title="Flexible Plans Tailored to Fit Your Unique Needs!"
-          plans={plans.map(convertToPricingPlan)}
-          showToggle={true}
-          onPlanSelect={(pricingPlan) => {
-            const plan = plans.find(p => p.id === pricingPlan.id);
-            if (plan) {
-              window.location.href = `https://app.igny8.com/signup?plan=${plan.slug}`;
-            }
-          }}
-        />
-      </section>
+      {/* PRICING TABLES SECTION - Dynamic Backend Plans */}
+      {!loading && !error && plans.length > 0 && (
+        <section className="px-6 py-16">
+          <div className="pricing-table-wrapper">
+            <PricingTable1
+              plans={plans.map(convertToPricingPlan)}
+              title="Choose your plan"
+              showToggle={true}
+              onPlanSelect={(plan) => {
+                window.location.href = `/signup?plan=${plan.id}`;
+              }}
+            />
+          </div>
+        </section>
      )}

      {/* COMPARISON TABLE SECTION - Keep hardcoded for now */}
      {!loading && !error && (
-      <section className="max-w-7xl mx-auto px-6 pb-24">
+      <section className="max-w-7xl mx-auto px-6 pb-24 pt-16">
        <h3 className="text-3xl font-bold text-slate-900 mb-8 text-center">
          Compare plan capabilities
        </h3>