addon comin sonn adn pricign apge updates

frontend/src/marketing/pages/Pricing.tsx

@@ -20,6 +20,7 @@ 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 () => {
@@ -301,7 +302,7 @@ const Pricing: React.FC = () => {
                   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">
-                  Lifetime Discount on all Plans for First 100 Users!
+                  Upto 33% Lifetime Discount on all Plans for First 25 Users!
                 </p>
               </div>
               
@@ -353,12 +354,66 @@ const Pricing: React.FC = () => {
               }}
             />
           </div>
-          
-          {/* What's Included Explanation */}
-          <div className="max-w-5xl mx-auto mt-8 text-center">
-            <p className="text-gray-600 dark:text-gray-400 text-sm leading-relaxed">
-              Every content piece includes High-Opportunity Keywords, AI clustering, idea generation, standard/premium images, Automation, WP publishing, SEO optimization, and internal linking.
-            </p>
+
+          <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>
       )}
@@ -453,6 +508,30 @@ const Pricing: React.FC = () => {
       </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">
@@ -487,39 +566,6 @@ const Pricing: React.FC = () => {
           </div>
         </div>
       </section>
-
-      {/* FINAL CTA */}
-      <section className="relative overflow-hidden bg-gradient-to-br from-[var(--color-success)] via-[var(--color-primary-dark)] to-[var(--color-primary)]">
-        {/* 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-[var(--color-primary)] 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>
     </>
   );