1

frontend/src/marketing/pages/CaseStudies.tsx

@@ -43,8 +43,7 @@ const CaseStudies: React.FC = () => {
       summary:
         "Publisher running 6 niche brands used Igny8 to centralize research, briefs, and AI-assisted writing. Automation recipes ensured every keyword moved to published content with minimal handoff friction.",
       image: "case-lumen.png",
-      color: "from-[#0693e3]/10 to-white",
-      borderColor: "border-[#0693e3]/30",
+      iconColor: "from-[#0693e3] to-[#0472b8]",
     },
     {
       company: "Northbeam Digital",
@@ -57,8 +56,7 @@ const CaseStudies: React.FC = () => {
       summary:
         "Multi-client agency adopted Igny8 to standardize workflows, automate reporting, and launch custom Thinker playbooks. Teams now produce keyword research, content, and images for 20+ clients simultaneously.",
       image: "case-northbeam.png",
-      color: "from-[#0bbf87]/10 to-white",
-      borderColor: "border-[#0bbf87]/30",
+      iconColor: "from-[#0bbf87] to-[#08966b]",
     },
     {
       company: "Arcadia SaaS",
@@ -71,8 +69,7 @@ const CaseStudies: React.FC = () => {
       summary:
         "Arcadia used Igny8 to align SEO, product marketing, and design. Thinker libraries ensured every asset matched product messaging; automation pushed approved content directly into WordPress and HubSpot.",
       image: "case-arcadia.png",
-      color: "from-[#5d4ae3]/10 to-white",
-      borderColor: "border-[#5d4ae3]/30",
+      iconColor: "from-[#5d4ae3] to-[#3a2f94]",
     },
   ];
 
@@ -99,19 +96,24 @@ const CaseStudies: React.FC = () => {
       <section className="max-w-7xl mx-auto px-6 pb-24 space-y-16">
         {caseStudies.map((cs, idx) => {
           const metricColors = [
-            { border: "border-[#0693e3]/30", bg: "from-[#0693e3]/10 to-white", text: "text-[#0693e3]" },
-            { border: "border-[#0bbf87]/30", bg: "from-[#0bbf87]/10 to-white", text: "text-[#0bbf87]" },
-            { border: "border-[#ff7a00]/30", bg: "from-[#ff7a00]/10 to-white", text: "text-[#ff7a00]" },
+            { border: "border-slate-200", bg: "from-white to-slate-50/50", text: "text-[#0693e3]" },
+            { border: "border-slate-200", bg: "from-white to-slate-50/50", text: "text-[#0bbf87]" },
+            { border: "border-slate-200", bg: "from-white to-slate-50/50", text: "text-[#ff7a00]" },
           ];
           return (
             <div
               key={cs.company}
-              className={`rounded-3xl border-2 ${cs.borderColor} bg-gradient-to-br ${cs.color} p-10 md:p-12 grid grid-cols-1 lg:grid-cols-2 gap-12 hover:shadow-xl hover:-translate-y-1 transition-all`}
+              className="rounded-3xl border-2 border-slate-200 bg-white p-10 md:p-12 grid grid-cols-1 lg:grid-cols-2 gap-12 hover:shadow-xl hover:-translate-y-1 transition-all"
             >
               <div className="space-y-6">
-                <span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold uppercase tracking-[0.2em] bg-slate-100 text-slate-600">
-                  {cs.company}
-                </span>
+                <div className="flex items-center gap-3">
+                  <div className={`size-12 rounded-xl bg-gradient-to-br ${cs.iconColor} flex items-center justify-center text-white shadow-lg`}>
+                    <CheckCircleIcon className="h-6 w-6" />
+                  </div>
+                  <span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold uppercase tracking-[0.2em] bg-slate-100 text-slate-600">
+                    {cs.company}
+                  </span>
+                </div>
                 <h3 className="text-3xl md:text-4xl font-bold text-slate-900">{cs.headline}</h3>
                 <p className="text-base text-slate-600 leading-relaxed">{cs.summary}</p>
                 <div className="grid grid-cols-3 gap-4 pt-4">
@@ -141,8 +143,6 @@ const CaseStudies: React.FC = () => {
                     className="w-full h-full object-cover"
                   />
                 </div>
-                {/* Subtle glow */}
-                <div className={`absolute -inset-2 bg-gradient-to-br ${cs.color} rounded-3xl opacity-20 blur-xl -z-10`} />
               </div>
             </div>
           );
@@ -152,7 +152,7 @@ const CaseStudies: React.FC = () => {
       {/* RESULTS & ADVISORY BOARD */}
       <section className="bg-gradient-to-b from-white via-slate-50/30 to-white py-24">
         <div className="max-w-7xl mx-auto px-6 grid grid-cols-1 lg:grid-cols-2 gap-8">
-          <div className="rounded-3xl border-2 border-[#0693e3]/30 bg-gradient-to-br from-[#0693e3]/10 via-white to-[#0bbf87]/5 p-8 space-y-6 shadow-lg">
+          <div className="rounded-2xl border-2 border-slate-200 bg-white p-8 space-y-6 shadow-sm">
             <div className="flex items-center gap-3">
               <div className="size-12 rounded-xl bg-gradient-to-br from-[#0693e3] to-[#0472b8] flex items-center justify-center text-white shadow-lg">
                 <CheckCircleIcon className="h-6 w-6" />
@@ -174,7 +174,7 @@ const CaseStudies: React.FC = () => {
               ))}
             </ul>
           </div>
-          <div className="rounded-3xl border-2 border-[#0bbf87]/30 bg-gradient-to-br from-[#0bbf87]/10 via-white to-[#5d4ae3]/5 p-8 space-y-6 shadow-lg">
+          <div className="rounded-2xl border-2 border-slate-200 bg-white p-8 space-y-6 shadow-sm">
             <div className="flex items-center gap-3">
               <div className="size-12 rounded-xl bg-gradient-to-br from-[#0bbf87] to-[#08966b] flex items-center justify-center text-white shadow-lg">
                 <CheckCircleIcon className="h-6 w-6" />