diff --git a/frontend/src/marketing/pages/Product.tsx b/frontend/src/marketing/pages/Product.tsx
index 82877c63..5bb9fe68 100644
--- a/frontend/src/marketing/pages/Product.tsx
+++ b/frontend/src/marketing/pages/Product.tsx
@@ -1,181 +1,473 @@
 import React from "react";
-import SectionHeading from "../components/SectionHeading";
-import CTASection from "../components/CTASection";
+import { Link } from "react-router-dom";
+import {
+  BoltIcon,
+  SparklesIcon,
+  ChartBarIcon,
+  PhotoIcon,
+  ListBulletIcon,
+  UserGroupIcon,
+  LightBulbIcon,
+  DocumentTextIcon,
+  ArrowRightIcon,
+  RocketLaunchIcon,
+  ChatBubbleLeftRightIcon,
+} from "@heroicons/react/24/outline";
+import { testimonials } from "../data/testimonials";
 
 const Product: React.FC = () => {
-  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">
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
-          <div className="space-y-6">
-            <SectionHeading
-              eyebrow="Platform overview"
-              title="One operating system for keyword intelligence, AI content production, and automation."
-              description="Planner, Writer, Thinker, and Automation act as one cohesive system. Each module is powerful on its own—together they deliver a compounding growth engine."
-              align="left"
-            />
-            <div className="rounded-3xl border-2 border-[#0693e3]/30 bg-gradient-to-br from-[#0693e3]/10 via-white to-[#0bbf87]/5 p-6 space-y-4 text-sm text-slate-600 shadow-lg">
-              <div className="flex items-center justify-between text-slate-900">
-                <span className="font-semibold">Modules included</span>
-                <span className="text-xs uppercase tracking-wider text-[#0693e3] font-semibold">4 products · 12 automation recipes</span>
-              </div>
-              <ul className="space-y-3">
-                {[
-                  { text: "Planner → Find, cluster, and prioritize keywords with AI scoring and SERP insights.", color: "bg-[#0693e3]" },
-                  { text: "Writer → Generate on-brand long-form content from briefs with tone, audience, and compliance controls.", color: "bg-[#0bbf87]" },
-                  { text: "Thinker → Manage prompts, author profiles, and brand playbooks that feed every generation.", color: "bg-[#ff7a00]" },
-                  { text: "Automation → Run scheduled workflows that move keywords to ideas, tasks, content, and images automatically.", color: "bg-[#5d4ae3]" },
-                ].map((point) => (
-                  <li key={point.text} className="flex gap-3">
-                    <span className={`mt-1 size-2 rounded-full ${point.color} shadow-sm`} />
-                    {point.text}
-                  </li>
-                ))}
-              </ul>
-            </div>
-          </div>
-          <div className="relative">
-            <div className="rounded-3xl border border-slate-200 bg-white overflow-hidden">
-              <img
-                src="/marketing/images/planner-keywords.png"
-                alt="Planner module screenshot"
-                className="w-full h-full object-cover"
-              />
-            </div>
-          </div>
-        </div>
-      </section>
+  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>
+    );
+  };
 
-      <section className="max-w-6xl mx-auto px-6 py-24 space-y-12">
-        <SectionHeading
-          eyebrow="Module deep dive"
-          title="Everything you need to research, create, deploy, and measure."
-          description="We designed Igny8 so your team can centralize strategy, remove bottlenecks, and trust AI with execution while maintaining full visibility."
-        />
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-10">
-          {[
-            {
-              title: "Planner",
-              copy: [
-                "Global keyword database with opportunity scoring, SERP overlays, and traffic estimates.",
-                "Drag-and-drop topical mapping. Auto-cluster thousands of terms in minutes.",
-                "Alerts for emerging opportunities, competitive gaps, and seasonality shifts.",
-              ],
-              image: "planner-strategy.png",
-            },
-            {
-              title: "Writer",
-              copy: [
-                "AI briefs with outlines, talking points, and internal link suggestions.",
-                "Long-form drafts aligned to your brand voice, compliance rules, and target SERP.",
-                "Editorial workspace with comments, approvals, and WordPress publishing.",
-              ],
-              image: "writer-editor.png",
-            },
-            {
-              title: "Thinker",
-              copy: [
-                "Centralize prompts, tone profiles, and persona guidance.",
-                "Version control for AI instructions and playbooks across teams.",
-                "Governance dashboards showing who generated what, when, and with which inputs.",
-              ],
-              image: "thinker-prompts.png",
-            },
-            {
-              title: "Automation",
-              copy: [
-                "Schedule keywords → ideas → tasks → content → images in fully automated cycles.",
-                "Trigger workflows based on SERP movements, pipeline bottlenecks, or credit availability.",
-                "Monitor every automation with audit logs and manual override controls.",
-              ],
-              image: "automation-timeline.png",
-            },
-          ].map((module, idx) => {
-            const colors = [
-              { border: "border-[#0693e3]/40", gradient: "from-[#0693e3]/10 to-white", dot: "bg-[#0693e3]" },
-              { border: "border-[#0bbf87]/40", gradient: "from-[#0bbf87]/10 to-white", dot: "bg-[#0bbf87]" },
-              { border: "border-[#ff7a00]/40", gradient: "from-[#ff7a00]/10 to-white", dot: "bg-[#ff7a00]" },
-              { border: "border-[#5d4ae3]/40", gradient: "from-[#5d4ae3]/10 to-white", dot: "bg-[#5d4ae3]" },
-            ];
-            const colorScheme = colors[idx % colors.length];
-            return (
-              <div
-                key={module.title}
-                className={`rounded-3xl border-2 ${colorScheme.border} bg-gradient-to-br ${colorScheme.gradient} p-10 flex flex-col gap-6 hover:shadow-xl transition-all hover:-translate-y-1`}
-              >
-                <div className="flex items-center gap-3 text-sm uppercase tracking-[0.3em] text-slate-700 font-semibold">
-                  <span className={`size-2 rounded-full ${colorScheme.dot} shadow-sm`} />
-                  {module.title}
-                </div>
-                <h3 className="text-2xl font-semibold text-slate-900">{module.title} platform</h3>
-                <ul className="space-y-3 text-sm text-slate-900/65">
-                  {module.copy.map((line, lineIdx) => {
-                    const dotColors = ["bg-[#0693e3]", "bg-[#0bbf87]", "bg-[#ff7a00]", "bg-[#5d4ae3]"];
-                    return (
-                      <li key={line} className="flex gap-3">
-                        <span className={`mt-1 size-1.5 rounded-full ${dotColors[lineIdx % dotColors.length]} shadow-sm`} />
-                        {line}
-                      </li>
-                    );
-                  })}
-                </ul>
-                <div className="rounded-2xl border-2 border-slate-200 bg-gradient-to-br from-slate-50 to-white overflow-hidden shadow-inner">
+  const workflowSteps = [
+    { name: "Keywords", icon: ListBulletIcon, color: "from-[#0693e3] to-[#0472b8]" },
+    { name: "Clusters", icon: UserGroupIcon, color: "from-[#5d4ae3] to-[#3a2f94]" },
+    { name: "Ideas", icon: LightBulbIcon, color: "from-[#ff7a00] to-[#cc5f00]" },
+    { name: "Tasks", icon: DocumentTextIcon, color: "from-[#0bbf87] to-[#08966b]" },
+    { name: "Content", icon: SparklesIcon, color: "from-[#0693e3] to-[#0472b8]" },
+    { name: "Publish", icon: BoltIcon, color: "from-[#0bbf87] to-[#08966b]" },
+  ];
+
+  const productModules = [
+    {
+      title: "Planner",
+      subtitle: "Market intelligence and keyword → cluster engine",
+      description: "Tap into a living keyword database with real-time search volumes, difficulty scores, and intent classification. Use AI-powered clustering to automatically group related keywords into strategic clusters. Build topical authority maps in minutes, not days.",
+      features: [
+        "Global keyword database with opportunity scoring, SERP overlays, and traffic estimates",
+        "AI-powered semantic clustering that groups related keywords automatically",
+        "Drag-and-drop topical mapping with visual cluster organization",
+        "Priority scoring based on opportunity, competition, and search intent",
+        "Alerts for emerging opportunities, competitive gaps, and seasonality shifts",
+      ],
+      icon: ChartBarIcon,
+      color: "from-[#0693e3] to-[#0472b8]",
+      image: "planner-dashboard.png",
+      link: "#planner",
+    },
+    {
+      title: "Writer",
+      subtitle: "AI writing system with brand rules and editorial logic",
+      description: "Generate briefs, long-form articles, and on-brand messaging with contextual SERP data, tone controls, and collaboration tools. Create content that aligns with your brand voice, compliance rules, and target search results.",
+      features: [
+        "AI briefs with outlines, talking points, and internal link suggestions",
+        "Context-aware content generation with SERP analysis and competitor insights",
+        "Long-form drafts aligned to your brand voice, compliance rules, and target SERP",
+        "Brand voice and tone controls for consistency across all content",
+        "Editorial workspace with comments, approvals, and WordPress publishing",
+      ],
+      icon: SparklesIcon,
+      color: "from-[#0bbf87] to-[#08966b]",
+      image: "writer-dashboard.png",
+      link: "#writer",
+    },
+    {
+      title: "Thinker",
+      subtitle: "Strategic OS and thinking engine",
+      description: "Centralize prompts, author voices, and brand playbooks. Sync guidelines directly into every piece of content Igny8 creates. Manage AI instructions, writing styles, and content strategies in one place.",
+      features: [
+        "Centralized prompt library and brand playbooks with version control",
+        "Author voice templates and style guides for consistent content",
+        "Automated guideline enforcement across all content generation",
+        "Governance dashboards showing who generated what, when, and with which inputs",
+        "Version control for AI instructions and playbooks across teams",
+      ],
+      icon: BoltIcon,
+      color: "from-[#ff7a00] to-[#cc5f00]",
+      image: "thinker-dashboard.png",
+      link: "#thinker",
+    },
+    {
+      title: "Automation",
+      subtitle: "Always-on execution engine",
+      description: "Orchestrate keywords to ideas, tasks to content, and assets to WordPress in automated cycles—customized to your cadence. Set it once, and watch it execute with intelligent handoffs between modules.",
+      features: [
+        "Schedule keywords → ideas → tasks → content → images in fully automated cycles",
+        "End-to-end workflow automation with custom triggers and conditions",
+        "Trigger workflows based on SERP movements, pipeline bottlenecks, or credit availability",
+        "Multi-step handoffs between modules with quality checks at each stage",
+        "Monitor every automation with audit logs and manual override controls",
+      ],
+      icon: PhotoIcon,
+      color: "from-[#5d4ae3] to-[#3a2f94]",
+      image: "automation-dashboard.png",
+      link: "#automation",
+    },
+  ];
+
+  return (
+    <div className="bg-white">
+      {/* HERO SECTION */}
+      <section className="relative overflow-hidden bg-gradient-to-br from-[#0693e3] via-[#5d4ae3] to-[#8b5cf6]">
+        {/* Radial glow behind headline */}
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_50%,rgba(255,255,255,0.1),transparent_60%)]" />
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_20%,rgba(109,74,227,0.2),transparent_50%)]" />
+        
+        <div className="relative max-w-7xl mx-auto px-6 py-20 md:py-32 lg:py-40">
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center">
+            {/* Left: Text Content */}
+            <div className="flex flex-col gap-6 z-10">
+              <h1 className="text-5xl md:text-6xl lg:text-5xl font-bold leading-tight text-white">
+                One platform for keyword intelligence, AI content, and workflow automation.
+              </h1>
+              <p className="text-lg md:text-xl text-white/85 leading-relaxed max-w-xl">
+                IGNY8 unifies research, writing, images, and automation so your team creates more output with less effort. Start manual or run fully automated.
+              </p>
+              <div className="flex flex-col sm:flex-row gap-4 mt-2">
+                {renderCta(
+                  { label: "Start free", href: "https://app.igny8.com/signup" },
+                  "inline-flex items-center justify-center rounded-xl bg-white text-[#0693e3] px-8 py-4 text-base font-semibold hover:bg-white/95 transition shadow-xl hover:shadow-2xl hover:-translate-y-0.5"
+                )}
+                {renderCta(
+                  { label: "Book a demo", href: "/contact" },
+                  "inline-flex items-center justify-center rounded-xl border-2 border-white/30 bg-white/10 backdrop-blur-sm text-white px-8 py-4 text-base font-semibold hover:bg-white/20 hover:border-white/50 transition"
+                )}
+              </div>
+            </div>
+
+            {/* Right: Product Dashboard Screenshot */}
+            <div className="relative z-10">
+              <div className="relative scale-110 lg:scale-125">
+                {/* Soft glow behind screenshot */}
+                <div className="absolute -inset-8 bg-gradient-to-br from-white/30 via-[#0693e3]/20 to-[#5d4ae3]/20 rounded-3xl blur-3xl" />
+                {/* Device frame effect */}
+                <div className="absolute -inset-4 bg-gradient-to-br from-white/20 to-white/5 rounded-3xl blur-2xl" />
+                <div className="relative rounded-2xl border-4 border-white/20 bg-white/10 backdrop-blur-sm shadow-2xl overflow-hidden">
+                  <div className="absolute top-0 left-0 right-0 h-12 bg-gradient-to-b from-slate-800/50 to-transparent flex items-center gap-2 px-4">
+                    <div className="flex gap-2">
+                      <div className="w-3 h-3 rounded-full bg-red-500/50" />
+                      <div className="w-3 h-3 rounded-full bg-yellow-500/50" />
+                      <div className="w-3 h-3 rounded-full bg-green-500/50" />
+                    </div>
+                  </div>
                   <img
-                    src={`/marketing/images/${module.image}`}
-                    alt={`${module.title} module`}
-                    className="w-full h-full object-cover"
+                    src="/marketing/images/hero-dashboard.png"
+                    alt="Igny8 product dashboard"
+                    className="w-full h-auto object-cover mt-12"
                   />
                 </div>
+                {/* Soft shadow */}
+                <div className="absolute -bottom-8 -left-8 right-8 h-32 bg-gradient-to-t from-[#0693e3]/20 to-transparent blur-3xl -z-10" />
               </div>
-            );
-          })}
+            </div>
+          </div>
         </div>
       </section>
 
-      <section className="max-w-6xl mx-auto px-6 py-24">
-        <div className="rounded-3xl border-2 border-[#0693e3]/30 bg-gradient-to-br from-[#0693e3]/10 via-white to-[#0bbf87]/5 p-10 md:p-16 flex flex-col lg:flex-row gap-16 shadow-xl">
-          <div className="flex-1 space-y-6">
-            <SectionHeading
-              eyebrow="Automation timeline"
-              title="Visualize every automated handoff—and take control at any point."
-              description="Igny8 timelines map dependencies across your workflow so you can see how AI is powering each deliverable. Pause or accelerate with confidence."
-              align="left"
-            />
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 text-sm text-slate-600">
-              {[
-                { text: "Real-time status for every automation recipe with success rates and manual interventions logged.", color: "bg-[#0693e3]" },
-                { text: "Smart recommendations to rebalance workloads, add credits, or adjust prompts when performance shifts.", color: "bg-[#0bbf87]" },
-                { text: "Exportable reports to share results with leadership or clients in one click.", color: "bg-[#ff7a00]" },
-                { text: "Granular permissions so teams can automate while leadership maintains oversight.", color: "bg-[#5d4ae3]" },
-              ].map((item) => (
-                <div key={item.text} className="flex gap-3">
-                  <span className={`mt-1 size-2 rounded-full ${item.color} shadow-sm`} />
-                  {item.text}
+      {/* SYSTEM OVERVIEW - How the IGNY8 Engine Works */}
+      <section 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">
+              How the IGNY8 Engine Works
+            </h2>
+            <p className="text-lg text-slate-600 max-w-2xl mx-auto">
+              A seamless pipeline from keyword discovery to published content
+            </p>
+          </div>
+          
+          {/* Horizontal Timeline */}
+          <div className="relative">
+            {/* Enhanced connecting line with shadow */}
+            <div className="absolute top-14 left-0 right-0 h-1 bg-gradient-to-r from-[#0693e3] via-[#5d4ae3] via-[#ff7a00] via-[#0bbf87] to-[#0693e3] opacity-25 hidden md:block shadow-lg shadow-[#0693e3]/20" />
+            
+            <div className="grid grid-cols-2 md:grid-cols-6 gap-6 md:gap-4">
+              {workflowSteps.map((step, index) => {
+                const Icon = step.icon;
+                return (
+                  <div key={step.name} className="flex flex-col items-center gap-3">
+                    <div className={`relative size-28 rounded-full bg-gradient-to-br ${step.color} flex items-center justify-center text-white shadow-xl z-10 group hover:scale-110 transition-transform`}>
+                      <Icon className="h-12 w-12" />
+                      {/* Glow effect */}
+                      <div className={`absolute -inset-2 bg-gradient-to-br ${step.color} rounded-full opacity-0 group-hover:opacity-30 blur-xl transition-opacity -z-10`} />
+                    </div>
+                    <span className="text-sm font-semibold text-slate-900 text-center">{step.name}</span>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* MODULE DEEP-DIVE SECTIONS */}
+      {productModules.map((module, index) => {
+        const Icon = module.icon;
+        const isLeft = index % 2 === 0;
+        const backgroundTints = [
+          "bg-white",
+          "bg-gradient-to-b from-[#0693e3]/1 to-white",
+          "bg-gradient-to-b from-[#0bbf87]/1 to-white",
+          "bg-gradient-to-b from-[#5d4ae3]/1 to-white",
+        ];
+        
+        return (
+          <section key={module.title} id={module.title.toLowerCase()} className={`py-32 ${backgroundTints[index]}`}>
+            <div className="max-w-7xl mx-auto px-6">
+              <div className={`grid grid-cols-1 lg:grid-cols-2 gap-16 lg:gap-20 items-center ${!isLeft ? "lg:grid-flow-dense" : ""}`}>
+                {/* Screenshot */}
+                <div className={`relative ${!isLeft ? "lg:col-start-2" : ""}`}>
+                  <div className="relative scale-110 lg:scale-115">
+                    {/* Gradient frame background with colored glow */}
+                    <div className={`absolute -inset-6 bg-gradient-to-br ${module.color} rounded-3xl opacity-25 blur-3xl`} />
+                    <div className="relative rounded-2xl border-2 border-slate-200 bg-white shadow-2xl overflow-hidden">
+                      <div className="absolute top-0 left-0 right-0 h-12 bg-gradient-to-b from-slate-800/30 to-transparent flex items-center gap-2 px-4">
+                        <div className="flex gap-2">
+                          <div className="w-3 h-3 rounded-full bg-red-500/50" />
+                          <div className="w-3 h-3 rounded-full bg-yellow-500/50" />
+                          <div className="w-3 h-3 rounded-full bg-green-500/50" />
+                        </div>
+                      </div>
+                      <img
+                        src={`/marketing/images/${module.image}`}
+                        alt={`${module.title} dashboard`}
+                        className="w-full h-auto object-cover mt-12"
+                      />
+                    </div>
+                    {/* Overlap shadow with module color */}
+                    <div className={`absolute -bottom-8 ${isLeft ? "-right-8" : "-left-8"} w-40 h-40 bg-gradient-to-br ${module.color} rounded-2xl opacity-15 blur-3xl -z-10`} />
+                  </div>
                 </div>
-              ))}
+
+                {/* Text Content */}
+                <div className={`${!isLeft ? "lg:col-start-1" : ""}`}>
+                  <div className="flex items-center gap-3 mb-4">
+                    <div className={`size-12 rounded-xl bg-gradient-to-br ${module.color} flex items-center justify-center text-white shadow-lg`}>
+                      <Icon className="h-6 w-6" />
+                    </div>
+                    <div>
+                      <h3 className="text-3xl md:text-4xl font-bold text-slate-900">{module.title}</h3>
+                      <p className="text-sm text-slate-600 mt-1">{module.subtitle}</p>
+                    </div>
+                  </div>
+                  <p className="text-lg text-slate-700 mb-6 leading-relaxed">
+                    {module.description}
+                  </p>
+                  <ul className="space-y-3 mb-8">
+                    {module.features.map((feature, i) => (
+                      <li key={i} className="flex gap-3 text-slate-700">
+                        <span className={`mt-2 size-2 rounded-full bg-gradient-to-br ${module.color} shadow-sm flex-shrink-0`} />
+                        <span>{feature}</span>
+                      </li>
+                    ))}
+                  </ul>
+                  <a
+                    href={module.link}
+                    className={`inline-flex items-center gap-2 text-base font-semibold text-white px-6 py-3 rounded-xl bg-gradient-to-r ${module.color} hover:shadow-lg hover:-translate-y-0.5 transition-all`}
+                  >
+                    Learn more about {module.title}
+                    <ArrowRightIcon className="h-5 w-5" />
+                  </a>
+                </div>
+              </div>
+            </div>
+          </section>
+        );
+      })}
+
+      {/* UNIFIED AUTOMATION ENGINE SECTION */}
+      <section className="py-24 bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 relative overflow-hidden">
+        {/* Richer background pattern */}
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(6,147,227,0.15),transparent_70%)]" />
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_80%_20%,rgba(109,74,227,0.2),transparent_50%)]" />
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_20%_80%,rgba(11,191,135,0.1),transparent_50%)]" />
+        
+        <div className="relative max-w-7xl mx-auto px-6">
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center mb-12">
+            {/* Left: Content */}
+            <div className="z-10">
+              <div className="flex items-center gap-3 mb-6">
+                <div className="size-12 rounded-xl bg-gradient-to-br from-[#0693e3] to-[#5d4ae3] flex items-center justify-center text-white shadow-lg shadow-[#0693e3]/30">
+                  <BoltIcon className="h-6 w-6" />
+                </div>
+                <h2 className="text-4xl md:text-5xl font-bold text-white">
+                  Unified Automation Engine
+                </h2>
+              </div>
+              <p className="text-xl text-slate-200 mb-8 leading-relaxed font-medium">
+                Orchestrate your entire content pipeline with intelligent handoffs between modules. Set it once, and watch it execute with compounding value at each stage.
+              </p>
+              
+              {/* Automation Timeline with neon glows */}
+              <div className="space-y-6">
+                {[
+                  { from: "Keywords", to: "Clusters", icon: "→", color: "from-[#0693e3] to-[#5d4ae3]", glow: "shadow-[#0693e3]/50" },
+                  { from: "Clusters", to: "Ideas", icon: "→", color: "from-[#5d4ae3] to-[#ff7a00]", glow: "shadow-[#5d4ae3]/50" },
+                  { from: "Ideas", to: "Tasks", icon: "→", color: "from-[#ff7a00] to-[#0bbf87]", glow: "shadow-[#ff7a00]/50" },
+                  { from: "Tasks", to: "Content", icon: "→", color: "from-[#0bbf87] to-[#0693e3]", glow: "shadow-[#0bbf87]/50" },
+                  { from: "Content", to: "Images", icon: "→", color: "from-[#0693e3] to-[#5d4ae3]", glow: "shadow-[#0693e3]/50" },
+                  { from: "Images", to: "Publish", icon: "→", color: "from-[#5d4ae3] to-[#0bbf87]", glow: "shadow-[#5d4ae3]/50" },
+                ].map((handoff, i) => (
+                  <div key={i} className="flex items-center gap-4">
+                    <div className={`relative w-12 h-12 rounded-xl bg-gradient-to-br ${handoff.color} flex items-center justify-center text-white font-bold shadow-lg ${handoff.glow} group`}>
+                      {handoff.icon}
+                      {/* Neon glow effect */}
+                      <div className={`absolute -inset-1 bg-gradient-to-br ${handoff.color} rounded-xl opacity-0 group-hover:opacity-60 blur-md transition-opacity -z-10`} />
+                    </div>
+                    <div className="flex-1">
+                      <div className="text-white font-semibold text-lg">{handoff.from} → {handoff.to}</div>
+                      <div className="text-sm text-slate-300">Automated handoff with quality checks</div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {/* Right: Automation Dashboard Screenshot */}
+            <div className="relative z-10">
+              <div className="relative rounded-2xl border-2 border-white/20 bg-white/5 backdrop-blur-sm shadow-2xl overflow-hidden">
+                <div className="absolute top-0 left-0 right-0 h-12 bg-gradient-to-b from-slate-800/50 to-transparent flex items-center gap-2 px-4">
+                  <div className="flex gap-2">
+                    <div className="w-3 h-3 rounded-full bg-red-500/50" />
+                    <div className="w-3 h-3 rounded-full bg-yellow-500/50" />
+                    <div className="w-3 h-3 rounded-full bg-green-500/50" />
+                  </div>
+                </div>
+                <img
+                  src="/marketing/images/automation-dashboard.png"
+                  alt="Automation dashboard"
+                  className="w-full h-auto object-cover mt-12"
+                />
+              </div>
+              {/* Glow effect */}
+              <div className="absolute -inset-4 bg-gradient-to-br from-[#0693e3]/20 to-[#5d4ae3]/20 rounded-2xl blur-2xl -z-10" />
             </div>
           </div>
-          <div className="flex-1">
-            <div className="rounded-3xl border-2 border-slate-200 bg-white overflow-hidden shadow-lg">
-              <img
-                src="/marketing/images/automation-timeline.png"
-                alt="Automation timeline"
-                className="w-full h-full object-cover"
-              />
+
+          {/* Performance KPIs */}
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-2xl mx-auto">
+            <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-6">
+              <div className="text-4xl font-bold text-white mb-2">87%</div>
+              <div className="text-sm text-slate-400">Completion Rate</div>
+              <div className="text-xs text-slate-500 mt-2">Average automation success across all workflows</div>
+            </div>
+            <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-6">
+              <div className="text-4xl font-bold text-white mb-2">6×</div>
+              <div className="text-sm text-slate-400">Faster Velocity</div>
+              <div className="text-xs text-slate-500 mt-2">Content creation speed compared to manual processes</div>
             </div>
           </div>
         </div>
       </section>
 
-      <CTASection
-        title="Unify search intelligence, AI content, and automation in one platform."
-        description="Start with 14 days on us or book a bespoke walkthrough with our team to map Igny8 to your workflows."
-        primaryCta={{ label: "Start your trial", href: "https://app.igny8.com/signup" }}
-        secondaryCta={{ label: "Book a tour", href: "/tour" }}
-      />
+      {/* TESTIMONIALS */}
+      <section className="py-24 bg-white">
+        <div className="max-w-7xl mx-auto px-6">
+          <div className="text-center mb-12">
+            <span className="inline-flex items-center rounded-full border border-[#0693e3]/20 bg-[#0693e3]/10 px-4 py-1 text-xs font-semibold uppercase tracking-[0.2em] text-[#0693e3] mb-4">
+              Loved by scaling teams
+            </span>
+            <h2 className="text-4xl md:text-5xl lg:text-6xl font-bold text-slate-900 mb-4">
+              Teams ship more content, capture more demand, and see faster ROI with Igny8.
+            </h2>
+          </div>
+          
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            {testimonials.map((testimonial, index) => {
+              const gradientColors = [
+                "from-[#0693e3]/20 to-[#0472b8]/10",
+                "from-[#0bbf87]/20 to-[#08966b]/10",
+                "from-[#5d4ae3]/20 to-[#3a2f94]/10",
+              ];
+              const borderColors = [
+                "border-[#0693e3]/30",
+                "border-[#0bbf87]/30",
+                "border-[#5d4ae3]/30",
+              ];
+              
+              return (
+                <div
+                  key={testimonial.name}
+                  className={`relative rounded-3xl border-2 ${borderColors[index]} bg-gradient-to-br ${gradientColors[index]} bg-white/80 backdrop-blur-sm p-8 flex flex-col gap-6 shadow-xl hover:shadow-2xl hover:-translate-y-1 transition-all`}
+                >
+                  {/* Avatar placeholder with better contrast */}
+                  <div className={`size-14 rounded-full bg-gradient-to-br ${gradientColors[index].split(" ")[0]} flex items-center justify-center text-white font-bold text-xl shadow-lg`}>
+                    {testimonial.name.charAt(0)}
+                  </div>
+                  
+                  <p className="text-base text-slate-800 leading-relaxed font-semibold flex-1">
+                    "{testimonial.quote}"
+                  </p>
+                  
+                  <div className="flex flex-col gap-1">
+                    <span className="font-bold text-slate-900 text-lg">{testimonial.name}</span>
+                    <span className="text-sm text-slate-700 font-medium">
+                      {testimonial.title} · {testimonial.company}
+                    </span>
+                  </div>
+                  
+                  {/* Metrics badge with better contrast */}
+                  <div className={`inline-flex items-center gap-2 px-4 py-2 rounded-full bg-gradient-to-r ${gradientColors[index]} text-slate-800 text-xs font-bold w-fit shadow-sm`}>
+                    <span>3× faster</span>
+                    <span>•</span>
+                    <span>+132% lift</span>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </section>
+
+      {/* FINAL CTA */}
+      <section className="relative overflow-hidden bg-gradient-to-br from-[#0693e3] via-[#5d4ae3] to-[#8b5cf6]">
+        {/* Dashboard overlay in background */}
+        <div className="absolute inset-0 opacity-10">
+          <div className="absolute inset-0 bg-[url('/marketing/images/hero-dashboard.png')] bg-cover bg-center scale-150 blur-3xl" />
+        </div>
+        
+        {/* 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">
+            Ready to unify your search intelligence, content, and automation?
+          </h2>
+          <p className="text-xl md:text-2xl text-white/90 mb-12 max-w-2xl mx-auto font-medium">
+            Start with 14 days on us or book a bespoke walkthrough with our team to map Igny8 to your workflows.
+          </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" />
+              Book a demo
+            </Link>
+          </div>
+        </div>
+      </section>
     </div>
   );
 };
 
 export default Product;
-