From 75d3da86691821fd98d46b0c9fb0ad536f1dcf31 Mon Sep 17 00:00:00 2001
From: Desktop <desktop@igny8.com>
Date: Fri, 14 Nov 2025 02:33:45 +0500
Subject: [PATCH] Update Solutions.tsx

---
 frontend/src/marketing/pages/Solutions.tsx | 501 +++++++++++++++------
 1 file changed, 355 insertions(+), 146 deletions(-)

diff --git a/frontend/src/marketing/pages/Solutions.tsx b/frontend/src/marketing/pages/Solutions.tsx
index 4f92b135..a15b1d9c 100644
--- a/frontend/src/marketing/pages/Solutions.tsx
+++ b/frontend/src/marketing/pages/Solutions.tsx
@@ -1,170 +1,379 @@
 import React from "react";
-import SectionHeading from "../components/SectionHeading";
-import CTASection from "../components/CTASection";
-
-const personas = [
-  {
-    name: "Publishers & Media",
-    pains: [
-      "Monthly content quotas and strict editorial standards.",
-      "Need faster research without sacrificing topical authority.",
-      "Multiple brands and verticals competing for attention.",
-    ],
-    outcomes: [
-      "Launch keyword → content automation that protects brand voice.",
-      "Keep editors in control with approvals and Thinker playbooks.",
-      "Automate image generation and WordPress publishing by site.",
-    ],
-    image: "solutions-publisher.png",
-  },
-  {
-    name: "Agencies & Consultancies",
-    pains: [
-      "Manual reporting and slow client deliverables.",
-      "Disjointed tool stack for research, writing, and visuals.",
-      "Scaling teams across time zones with consistent quality.",
-    ],
-    outcomes: [
-      "Shared workspaces for each client with automation templates.",
-      "Real-time dashboards to prove impact and showcase velocity.",
-      "Reusable Thinker libraries to standardize tone and strategy.",
-    ],
-    image: "solutions-agency.png",
-  },
-  {
-    name: "In-house Marketing Teams",
-    pains: [
-      "Demand for multi-channel content with lean resources.",
-      "Difficulty aligning SEO, content, and creative workflows.",
-      "Pressure to report results to leadership quickly.",
-    ],
-    outcomes: [
-      "Automated pipeline from keyword intake to published content.",
-      "Dashboards that unite SEO, writers, designers, and leadership.",
-      "Insights to reallocate focus when campaigns spike or drop.",
-    ],
-    image: "solutions-inhouse.png",
-  },
-];
+import { Link } from "react-router-dom";
+import {
+  RocketLaunchIcon,
+  ChatBubbleLeftRightIcon,
+  ChartBarIcon,
+  DocumentTextIcon,
+  SparklesIcon,
+  UserGroupIcon,
+  PhotoIcon,
+  BoltIcon,
+  ArrowTrendingUpIcon,
+  ClockIcon,
+  WrenchScrewdriverIcon,
+  ExclamationTriangleIcon,
+  CheckCircleIcon,
+} from "@heroicons/react/24/outline";
 
 const Solutions: 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 personas = [
+    {
+      name: "Publishers & Media",
+      description: "Scale content production while maintaining editorial standards and brand voice across multiple verticals.",
+      pains: [
+        "Monthly content quotas and strict editorial standards",
+        "Need faster research without sacrificing topical authority",
+        "Multiple brands and verticals competing for attention",
+        "Manual image sourcing and WordPress publishing bottlenecks",
+      ],
+      outcomes: [
+        "Launch keyword → content automation that protects brand voice",
+        "Keep editors in control with approvals and Thinker playbooks",
+        "Automate image generation and WordPress publishing by site",
+      ],
+      color: "from-[#0693e3]/5 to-white",
+      borderColor: "border-[#0693e3]/20",
+      iconColor: "from-[#0693e3] to-[#0472b8]",
+      painColor: "bg-rose-500",
+      outcomeColor: "bg-[#0693e3]",
+    },
+    {
+      name: "Agencies & Consultancies",
+      description: "Deliver consistent, high-quality content at scale across client accounts with unified workflows.",
+      pains: [
+        "Manual reporting and slow client deliverables",
+        "Disjointed tool stack for research, writing, and visuals",
+        "Scaling teams across time zones with consistent quality",
+        "Client-specific brand guidelines and tone management",
+      ],
+      outcomes: [
+        "Shared workspaces for each client with automation templates",
+        "Real-time dashboards to prove impact and showcase velocity",
+        "Reusable Thinker libraries to standardize tone and strategy",
+      ],
+      color: "from-[#0bbf87]/5 to-white",
+      borderColor: "border-[#0bbf87]/20",
+      iconColor: "from-[#0bbf87] to-[#08966b]",
+      painColor: "bg-rose-500",
+      outcomeColor: "bg-[#0bbf87]",
+    },
+    {
+      name: "In-house Marketing Teams",
+      description: "Unify SEO, content, and creative workflows to accelerate output with limited resources.",
+      pains: [
+        "Demand for multi-channel content with lean resources",
+        "Difficulty aligning SEO, content, and creative workflows",
+        "Pressure to report results to leadership quickly",
+        "Tool sprawl creating visibility gaps",
+      ],
+      outcomes: [
+        "Automated pipeline from keyword intake to published content",
+        "Dashboards that unite SEO, writers, designers, and leadership",
+        "Insights to reallocate focus when campaigns spike or drop",
+      ],
+      color: "from-[#5d4ae3]/5 to-white",
+      borderColor: "border-[#5d4ae3]/20",
+      iconColor: "from-[#5d4ae3] to-[#3a2f94]",
+      painColor: "bg-rose-500",
+      outcomeColor: "bg-[#5d4ae3]",
+    },
+  ];
+
+  const useCases = [
+    {
+      title: "Keyword Research",
+      description: "Discover high-opportunity keywords from a global database with real-time volumes and difficulty scores.",
+      icon: ChartBarIcon,
+      color: "from-[#0693e3] to-[#0472b8]",
+    },
+    {
+      title: "Content Briefs",
+      description: "Generate comprehensive briefs with outlines, talking points, and internal link suggestions.",
+      icon: DocumentTextIcon,
+      color: "from-[#0bbf87] to-[#08966b]",
+    },
+    {
+      title: "Content Writing",
+      description: "Create long-form articles aligned to your brand voice, compliance rules, and target SERP.",
+      icon: SparklesIcon,
+      color: "from-[#ff7a00] to-[#cc5f00]",
+    },
+    {
+      title: "Cluster Analysis",
+      description: "AI-powered semantic clustering to group related keywords and build topical authority maps.",
+      icon: UserGroupIcon,
+      color: "from-[#5d4ae3] to-[#3a2f94]",
+    },
+    {
+      title: "Image Generation",
+      description: "AI-generated featured and in-article images based on your content with brand consistency.",
+      icon: PhotoIcon,
+      color: "from-[#0693e3] to-[#5d4ae3]",
+    },
+    {
+      title: "Workflow Automation",
+      description: "End-to-end automation from keywords to published content with intelligent handoffs.",
+      icon: BoltIcon,
+      color: "from-[#0bbf87] to-[#0693e3]",
+    },
+  ];
+
   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">
-        <SectionHeading
-          eyebrow="Solutions"
-          title="Designed for every team that owns growth."
-          description="Igny8 adapts to your operating model—agency, publisher, or in-house. Automate repetitive work, keep strategy centralized, and connect every team to outcomes."
-        />
+    <div className="bg-white">
+      {/* LIGHT HERO SECTION */}
+      <section className="relative overflow-hidden bg-gradient-to-b from-white via-slate-50/50 to-white">
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(6,147,227,0.03),transparent_60%)]" />
+        
+        <div className="relative max-w-4xl mx-auto px-6 py-24 md:py-32 text-center z-10">
+          <h1 className="text-5xl md:text-6xl lg:text-5xl font-bold leading-tight text-slate-900 mb-6">
+            Designed for teams that operate at scale.
+          </h1>
+          <p className="text-xl md:text-2xl text-slate-600 mb-10 max-w-2xl mx-auto leading-relaxed">
+            IGNY8 adapts to agencies, publishers, and in-house teams. Automate repetitive work, unify strategy, and accelerate content velocity with AI.
+          </p>
+          <div className="flex flex-col sm:flex-row gap-4 justify-center">
+            {renderCta(
+              { label: "See use cases", href: "#use-cases" },
+              "inline-flex items-center justify-center rounded-xl bg-gradient-to-r from-[#0693e3] to-[#0472b8] text-white px-8 py-4 text-base font-semibold hover:shadow-lg hover:-translate-y-0.5 transition shadow-md"
+            )}
+            {renderCta(
+              { label: "Talk to sales", href: "/contact" },
+              "inline-flex items-center justify-center rounded-xl border-2 border-slate-300 bg-white text-slate-700 px-8 py-4 text-base font-semibold hover:border-[#0693e3] hover:text-[#0693e3] transition"
+            )}
+          </div>
+        </div>
       </section>
 
-      <section className="max-w-6xl mx-auto px-6 pb-24 space-y-12">
-        {personas.map((persona, idx) => {
-          const gradients = [
-            { border: "border-[#0693e3]/40", bg: "from-[#0693e3]/10 via-white to-[#0bbf87]/5" },
-            { border: "border-[#0bbf87]/40", bg: "from-[#0bbf87]/10 via-white to-[#ff7a00]/5" },
-            { border: "border-[#5d4ae3]/40", bg: "from-[#5d4ae3]/10 via-white to-[#0693e3]/5" },
-          ];
-          const gradient = gradients[idx % gradients.length];
-          return (
-            <div
-              key={persona.name}
-              className={`rounded-3xl border-2 ${gradient.border} bg-gradient-to-br ${gradient.bg} p-10 md:p-16 grid grid-cols-1 lg:grid-cols-3 gap-12 hover:shadow-xl transition-all`}
-            >
-              <div className="lg:col-span-1 space-y-4">
-                <span className="text-xs uppercase tracking-[0.3em] text-slate-500">
-                  Persona
-                </span>
-                <h3 className="text-2xl font-semibold">{persona.name}</h3>
-                <div className="rounded-2xl border-2 border-slate-200 bg-gradient-to-br from-slate-50 to-white overflow-hidden shadow-inner">
-                  <img
-                    src={`/marketing/images/${persona.image}`}
-                    alt={`${persona.name} workflow`}
-                    className="w-full h-full object-cover"
-                  />
+      {/* PERSONAS SECTIONS */}
+      {personas.map((persona, index) => (
+        <section key={persona.name} className={`py-24 bg-gradient-to-b ${persona.color}`}>
+          <div className="max-w-7xl mx-auto px-6">
+            <div className="grid grid-cols-1 lg:grid-cols-3 gap-12 lg:gap-16">
+              {/* Left: Persona Badge & Info */}
+              <div className="space-y-6">
+                <div className="inline-flex items-center gap-3 px-4 py-2 rounded-full bg-white border-2 border-slate-200 shadow-sm">
+                  <div className={`size-3 rounded-full bg-gradient-to-br ${persona.iconColor}`} />
+                  <span className="text-xs uppercase tracking-[0.2em] text-slate-600 font-semibold">
+                    Persona
+                  </span>
+                </div>
+                <div>
+                  <h3 className="text-3xl md:text-4xl font-bold text-slate-900 mb-3">
+                    {persona.name}
+                  </h3>
+                  <p className="text-lg text-slate-600 leading-relaxed">
+                    {persona.description}
+                  </p>
                 </div>
               </div>
-              <div className="space-y-6">
-                <h4 className="text-sm uppercase tracking-[0.3em] text-rose-600 font-semibold flex items-center gap-2">
-                  <span className="size-1.5 rounded-full bg-rose-400"></span>
-                  Pain points
-                </h4>
-                <ul className="space-y-4 text-sm text-slate-600">
-                  {persona.pains.map((pain) => (
-                    <li key={pain} className="flex gap-3">
-                      <span className="mt-1 size-1.5 rounded-full bg-rose-400 shadow-sm" />
-                      {pain}
+
+              {/* Middle: Pain Points */}
+              <div className="bg-white rounded-2xl border-2 border-slate-200 p-8 shadow-sm">
+                <div className="flex items-center gap-2 mb-6">
+                  <ExclamationTriangleIcon className="h-5 w-5 text-rose-500" />
+                  <h4 className="text-sm uppercase tracking-[0.2em] text-rose-600 font-semibold">
+                    Pain Points
+                  </h4>
+                </div>
+                <ul className="space-y-4">
+                  {persona.pains.map((pain, i) => (
+                    <li key={i} className="flex gap-3 text-slate-700">
+                      <span className={`mt-1.5 size-2 rounded-full ${persona.painColor} shadow-sm flex-shrink-0`} />
+                      <span>{pain}</span>
                     </li>
                   ))}
                 </ul>
               </div>
-              <div className="space-y-6">
-                <h4 className="text-sm uppercase tracking-[0.3em] text-[#0693e3] font-semibold flex items-center gap-2">
-                  <span className="size-1.5 rounded-full bg-[#0693e3]"></span>
-                  Outcomes with Igny8
-                </h4>
-                <ul className="space-y-4 text-sm text-slate-600">
-                  {persona.outcomes.map((outcome, outcomeIdx) => {
-                    const outcomeColors = ["bg-[#0693e3]", "bg-[#0bbf87]", "bg-[#ff7a00]"];
-                    return (
-                      <li key={outcome} className="flex gap-3">
-                        <span className={`mt-1 size-1.5 rounded-full ${outcomeColors[outcomeIdx % outcomeColors.length]} shadow-sm`} />
-                        {outcome}
-                      </li>
-                    );
-                  })}
+
+              {/* Right: IGNY8 Outcomes */}
+              <div className="bg-white rounded-2xl border-2 border-slate-200 p-8 shadow-sm">
+                <div className="flex items-center gap-2 mb-6">
+                  <CheckCircleIcon className={`h-5 w-5 ${persona.outcomeColor === 'bg-[#0693e3]' ? 'text-[#0693e3]' : persona.outcomeColor === 'bg-[#0bbf87]' ? 'text-[#0bbf87]' : 'text-[#5d4ae3]'}`} />
+                  <h4 className={`text-sm uppercase tracking-[0.2em] font-semibold ${persona.outcomeColor === 'bg-[#0693e3]' ? 'text-[#0693e3]' : persona.outcomeColor === 'bg-[#0bbf87]' ? 'text-[#0bbf87]' : 'text-[#5d4ae3]'}`}>
+                    IGNY8 Outcomes
+                  </h4>
+                </div>
+                <ul className="space-y-4">
+                  {persona.outcomes.map((outcome, i) => (
+                    <li key={i} className="flex gap-3 text-slate-700">
+                      <span className={`mt-1.5 size-2 rounded-full ${persona.outcomeColor} shadow-sm flex-shrink-0`} />
+                      <span>{outcome}</span>
+                    </li>
+                  ))}
                 </ul>
               </div>
             </div>
-          );
-        })}
-      </section>
+          </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-3 gap-8">
-          {[
-            {
-              metric: "3.2×",
-              label: "Average lift in organic traffic within 90 days.",
-              color: "border-[#0693e3]/40",
-              gradient: "from-[#0693e3]/10 to-white",
-              textColor: "text-[#0693e3]",
-            },
-            {
-              metric: "48%",
-              label: "Reduction in time-to-publish from keyword discovery.",
-              color: "border-[#0bbf87]/40",
-              gradient: "from-[#0bbf87]/10 to-white",
-              textColor: "text-[#0bbf87]",
-            },
-            {
-              metric: "4 tools",
-              label: "Average number of point solutions replaced by Igny8.",
-              color: "border-[#ff7a00]/40",
-              gradient: "from-[#ff7a00]/10 to-white",
-              textColor: "text-[#ff7a00]",
-            },
-          ].map((item) => (
-            <div
-              key={item.metric}
-              className={`rounded-3xl border-2 ${item.color} bg-gradient-to-br ${item.gradient} p-8 text-center space-y-4 hover:shadow-xl transition-all hover:-translate-y-1`}
-            >
-              <div className={`text-4xl font-semibold ${item.textColor}`}>{item.metric}</div>
-              <p className="text-sm text-slate-600">{item.label}</p>
-            </div>
-          ))}
+      {/* BENEFITS STATISTICS SECTION */}
+      <section className="py-24 bg-gradient-to-b from-white via-slate-50/30 to-white">
+        <div className="max-w-6xl mx-auto px-6">
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+            {[
+              {
+                metric: "3.2×",
+                label: "organic lift",
+                description: "Average lift in organic traffic within 90 days",
+                icon: ArrowTrendingUpIcon,
+                color: "from-[#0693e3] to-[#0472b8]",
+                glow: "shadow-[#0693e3]/30",
+              },
+              {
+                metric: "48%",
+                label: "reduction in time to publish",
+                description: "Faster time-to-publish from keyword discovery",
+                icon: ClockIcon,
+                color: "from-[#0bbf87] to-[#08966b]",
+                glow: "shadow-[#0bbf87]/30",
+              },
+              {
+                metric: "4 tools",
+                label: "replaced",
+                description: "Average number of point solutions replaced by Igny8",
+                icon: WrenchScrewdriverIcon,
+                color: "from-[#ff7a00] to-[#cc5f00]",
+                glow: "shadow-[#ff7a00]/30",
+              },
+            ].map((stat, index) => {
+              const Icon = stat.icon;
+              return (
+                <div
+                  key={index}
+                  className="relative rounded-3xl border-2 border-slate-200 bg-gradient-to-br from-white to-slate-50/50 p-8 text-center space-y-4 hover:shadow-2xl hover:-translate-y-1 transition-all group"
+                >
+                  {/* Glow effect */}
+                  <div className={`absolute -inset-1 bg-gradient-to-br ${stat.color} rounded-3xl opacity-0 group-hover:opacity-20 blur-xl transition-opacity -z-10 ${stat.glow}`} />
+                  
+                  {/* Icon */}
+                  <div className={`inline-flex size-16 rounded-2xl bg-gradient-to-br ${stat.color} items-center justify-center text-white shadow-lg mb-2`}>
+                    <Icon className="h-8 w-8" />
+                  </div>
+                  
+                  {/* Metric */}
+                  <div className={`text-5xl md:text-6xl font-bold bg-gradient-to-br ${stat.color} bg-clip-text text-transparent`}>
+                    {stat.metric}
+                  </div>
+                  
+                  {/* Label */}
+                  <div className="text-lg font-semibold text-slate-900">
+                    {stat.label}
+                  </div>
+                  
+                  {/* Description */}
+                  <p className="text-sm text-slate-600">
+                    {stat.description}
+                  </p>
+                </div>
+              );
+            })}
+          </div>
         </div>
       </section>
 
-      <CTASection
-        title="Let’s tailor Igny8 to your growth targets."
-        description="Book a session with our team to map Igny8 to your use cases. We’ll uncover ROI, automation recommendations, and the fastest path to value."
-        primaryCta={{ label: "Talk to sales", href: "/contact" }}
-        secondaryCta={{ label: "See pricing", href: "/pricing" }}
-      />
+      {/* USE CASES OVERVIEW */}
+      <section id="use-cases" className="py-24 bg-white">
+        <div className="max-w-7xl mx-auto px-6">
+          <div className="text-center mb-16">
+            <h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-4">
+              Use Cases
+            </h2>
+            <p className="text-lg text-slate-600 max-w-2xl mx-auto">
+              Practical applications that help teams scale content production and accelerate growth
+            </p>
+          </div>
+          
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {useCases.map((useCase, index) => {
+              const Icon = useCase.icon;
+              return (
+                <div
+                  key={useCase.title}
+                  className="relative rounded-2xl border-2 border-slate-200 bg-white p-6 space-y-4 hover:shadow-xl hover:-translate-y-1 transition-all group"
+                >
+                  {/* Icon */}
+                  <div className={`inline-flex size-12 rounded-xl bg-gradient-to-br ${useCase.color} items-center justify-center text-white shadow-md`}>
+                    <Icon className="h-6 w-6" />
+                  </div>
+                  
+                  {/* Title */}
+                  <h3 className="text-xl font-semibold text-slate-900">
+                    {useCase.title}
+                  </h3>
+                  
+                  {/* Description */}
+                  <p className="text-sm text-slate-600 leading-relaxed">
+                    {useCase.description}
+                  </p>
+                  
+                  {/* Subtle gradient on hover */}
+                  <div className={`absolute -inset-0.5 bg-gradient-to-br ${useCase.color} rounded-2xl opacity-0 group-hover:opacity-10 blur transition-opacity -z-10`} />
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </section>
+
+      {/* 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">
+            Start automating your content engine today.
+          </h2>
+          <p className="text-xl md:text-2xl text-white/90 mb-12 max-w-2xl mx-auto font-medium">
+            Book a strategy session or start a trial to explore IGNY8 for your team.
+          </p>
+          <div className="flex flex-col sm:flex-row gap-5 justify-center">
+            <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
+            </a>
+            <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>
     </div>
   );
 };
 
 export default Solutions;
-