diff --git a/frontend/src/marketing/components/LogoCloud.tsx b/frontend/src/marketing/components/LogoCloud.tsx
index de4195da..23818a55 100644
--- a/frontend/src/marketing/components/LogoCloud.tsx
+++ b/frontend/src/marketing/components/LogoCloud.tsx
@@ -11,24 +11,26 @@ const logos = [
 
 const LogoCloud: React.FC = () => {
   return (
-    <section className="py-16 bg-slate-50 border-y border-slate-200">
-      <div className="max-w-5xl mx-auto px-6 flex flex-col gap-6 items-center">
-        <span className="text-xs uppercase tracking-[0.28em] text-slate-500">
-          Trusted by modern SEO + content teams
-        </span>
-        <div className="flex flex-wrap justify-center gap-8 md:gap-12">
-          {logos.map((name) => (
-            <div
-              key={name}
-              className="h-8 md:h-10 opacity-70 hover:opacity-100 transition"
-            >
-              <img
-                src={`/marketing/images/logo-${name}.svg`}
-                alt={`${name} logo`}
-                className="h-full w-auto"
-              />
-            </div>
-          ))}
+    <section className="py-12 bg-white">
+      <div className="max-w-6xl mx-auto px-6">
+        <div className="flex flex-col gap-6 items-center">
+          <span className="text-xs uppercase tracking-[0.28em] text-slate-500 font-medium">
+            Trusted by modern organic teams
+          </span>
+          <div className="flex flex-wrap justify-center gap-8 md:gap-12 items-center">
+            {logos.map((name) => (
+              <div
+                key={name}
+                className="h-8 md:h-10 opacity-60 grayscale hover:opacity-100 hover:grayscale-0 transition"
+              >
+                <img
+                  src={`/marketing/images/logo-${name}.svg`}
+                  alt={`${name} logo`}
+                  className="h-full w-auto"
+                />
+              </div>
+            ))}
+          </div>
         </div>
       </div>
     </section>
diff --git a/frontend/src/marketing/pages/Home.tsx b/frontend/src/marketing/pages/Home.tsx
index a5bbb19c..0f33bfb9 100644
--- a/frontend/src/marketing/pages/Home.tsx
+++ b/frontend/src/marketing/pages/Home.tsx
@@ -1,174 +1,522 @@
 import React from "react";
+import { Link } from "react-router-dom";
 import {
   BoltIcon,
   SparklesIcon,
   ChartBarIcon,
   PhotoIcon,
+  ListBulletIcon,
+  UserGroupIcon,
+  LightBulbIcon,
+  DocumentTextIcon,
+  ArrowRightIcon,
 } from "@heroicons/react/24/outline";
-import HeroSection from "../components/HeroSection";
-import MetricsBar from "../components/MetricsBar";
-import { heroMetrics, workflowSteps } from "../data/metrics";
-import LogoCloud from "../components/LogoCloud";
-import WorkflowSteps from "../components/WorkflowSteps";
-import FeatureGrid from "../components/FeatureGrid";
-import SectionHeading from "../components/SectionHeading";
-import TestimonialSlider from "../components/TestimonialSlider";
-import CTASection from "../components/CTASection";
+import { testimonials } from "../data/testimonials";
 
 const Home: 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 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: "Images", icon: PhotoIcon, color: "from-[#5d4ae3] to-[#3a2f94]" },
+    { 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, cluster at scale, and prioritize opportunities with AI scoring. Build topical maps in minutes, not days.",
+      bullets: [
+        "Living keyword database with real-time search volumes",
+        "AI-powered clustering for topical authority mapping",
+        "Priority scoring based on opportunity and competition",
+      ],
+      icon: ChartBarIcon,
+      color: "from-[#0693e3] to-[#0472b8]",
+      image: "planner-dashboard.png",
+      link: "/product#planner",
+      align: "left",
+    },
+    {
+      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.",
+      bullets: [
+        "Context-aware content generation with SERP analysis",
+        "Brand voice and tone controls for consistency",
+        "Collaborative editing and approval workflows",
+      ],
+      icon: SparklesIcon,
+      color: "from-[#0bbf87] to-[#08966b]",
+      image: "writer-dashboard.png",
+      link: "/product#writer",
+      align: "right",
+    },
+    {
+      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.",
+      bullets: [
+        "Centralized prompt library and brand playbooks",
+        "Author voice templates and style guides",
+        "Automated guideline enforcement across all content",
+      ],
+      icon: BoltIcon,
+      color: "from-[#ff7a00] to-[#cc5f00]",
+      image: "thinker-dashboard.png",
+      link: "/product#thinker",
+      align: "left",
+    },
+    {
+      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.",
+      bullets: [
+        "End-to-end workflow automation with custom triggers",
+        "Multi-step handoffs between modules",
+        "Real-time monitoring and error handling",
+      ],
+      icon: PhotoIcon,
+      color: "from-[#5d4ae3] to-[#3a2f94]",
+      image: "automation-dashboard.png",
+      link: "/product#automation",
+      align: "right",
+    },
+  ];
+
   return (
-    <div className="bg-gradient-to-b from-white via-slate-50/30 to-white">
-      <HeroSection
-        image="hero-dashboard.png"
-        headline="Scale SEO content from keyword discovery to AI-crafted outputs."
-        subheadline="Igny8 automates your entire growth workflow—from market intelligence to publishing-ready content and imagery—so your team builds momentum, not spreadsheets."
-        primaryCta={{
-          label: "Start free trial",
-          href: "https://app.igny8.com/signup",
-        }}
-        secondaryCta={{
-          label: "Book a live tour",
-          href: "/tour",
-        }}
-      />
+    <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-7xl font-bold leading-tight text-white">
+                Scale SEO content from keyword discovery to AI-crafted outputs.
+              </h1>
+              <p className="text-lg md:text-xl text-white/85 leading-relaxed max-w-xl">
+                IGNY8 automates your growth engine from research to briefs, from content writing to image generation.
+              </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 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>
 
-      <MetricsBar metrics={heroMetrics} />
-
-      <LogoCloud />
-
-      <section className="max-w-6xl mx-auto px-6 py-24 space-y-12">
-        <SectionHeading
-          eyebrow="Unified growth engine"
-          title="Four deeply connected products deliver one end-to-end workflow."
-          description="Every step compounds the next—from keyword intelligence to AI-powered writing and design. Automations keep your pipeline moving while strategy stays in your control."
-        />
-        <FeatureGrid
-          features={[
-            {
-              title: "Planner · Market intelligence",
-              description:
-                "Tap into a living keyword database, cluster at scale, and prioritize opportunities with AI scoring. Build topical maps in minutes, not days.",
-              icon: <ChartBarIcon className="h-6 w-6" />,
-              link: { label: "See Planner", href: "/product#planner" },
-            },
-            {
-              title: "Writer · AI content studio",
-              description:
-                "Generate briefs, long-form articles, and on-brand messaging with contextual SERP data, tone controls, and collaboration tools.",
-              icon: <SparklesIcon className="h-6 w-6" />,
-              link: { label: "See Writer", href: "/product#writer" },
-            },
-            {
-              title: "Thinker · Strategy OS",
-              description:
-                "Centralize prompts, author voices, and brand playbooks. Sync guidelines directly into every piece of content Igny8 creates.",
-              icon: <BoltIcon className="h-6 w-6" />,
-              link: { label: "See Thinker", href: "/product#thinker" },
-            },
-            {
-              title: "Automation · Always-on execution",
-              description:
-                "Orchestrate keywords to ideas, tasks to content, and assets to WordPress in automated cycles—customized to your cadence.",
-              icon: <PhotoIcon className="h-6 w-6" />,
-              link: { label: "See Automation", href: "/product#automation" },
-            },
-          ]}
-        />
+            {/* Right: Dashboard Screenshot */}
+            <div className="relative z-10">
+              <div className="relative">
+                {/* 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/hero-dashboard.png"
+                    alt="Igny8 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>
 
-      <WorkflowSteps steps={workflowSteps} />
-
-      <section className="max-w-6xl mx-auto px-6 py-24 grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
-        <div className="space-y-6">
-          <SectionHeading
-            eyebrow="Full visibility"
-            title="See the entire pipeline—from keyword intake to published content—in one dashboard."
-            description="Monitor velocity, quality, and automation coverage across every site. Use filters to dive into sectors, teams, and campaigns. Igny8 keeps leadership confident and operations aligned."
-            align="left"
-          />
-          <ul className="space-y-4 text-sm text-slate-600">
-            <li className="flex gap-3">
-              <span className="mt-1 size-2 rounded-full bg-[#0693e3] shadow-sm shadow-[#0693e3]/30" />
-              Real-time metrics on keyword additions, clusters formed, briefs generated, and content shipped.
-            </li>
-            <li className="flex gap-3">
-              <span className="mt-1 size-2 rounded-full bg-[#0bbf87] shadow-sm shadow-[#0bbf87]/30" />
-              Drill into automation logs to understand every AI action, approvals, and handoffs.
-            </li>
-            <li className="flex gap-3">
-              <span className="mt-1 size-2 rounded-full bg-[#ff7a00] shadow-sm shadow-[#ff7a00]/30" />
-              Export-ready visuals for leadership updates and client reporting.
-            </li>
-          </ul>
-        </div>
-        <div className="relative">
-          <div className="rounded-3xl border border-slate-200 bg-white overflow-hidden shadow-lg">
-            <img
-              src="/marketing/images/workflow-overview.png"
-              alt="Workflow overview"
-              className="w-full h-full object-cover"
-            />
+      {/* SOCIAL PROOF LOGOS */}
+      <section className="py-12 bg-white">
+        <div className="max-w-6xl mx-auto px-6">
+          <div className="flex flex-col gap-6 items-center">
+            <span className="text-xs uppercase tracking-[0.28em] text-slate-500 font-medium">
+              Trusted by modern organic teams
+            </span>
+            <div className="flex flex-wrap justify-center gap-8 md:gap-12 items-center">
+              {["launchpad", "northbeam", "scaleops", "pathfinder", "catalyst", "orbit"].map((name) => (
+                <div
+                  key={name}
+                  className="h-8 md:h-10 opacity-60 grayscale hover:opacity-100 hover:grayscale-0 transition"
+                >
+                  <img
+                    src={`/marketing/images/logo-${name}.svg`}
+                    alt={`${name} logo`}
+                    className="h-full w-auto"
+                  />
+                </div>
+              ))}
+            </div>
           </div>
-          <div className="absolute -bottom-8 -left-8 md:-left-12 bg-white border border-slate-200 rounded-3xl p-6 w-64 shadow-lg">
-            <h4 className="text-sm font-semibold text-slate-900">Automation snapshot</h4>
-            <p className="text-xs text-slate-600 mt-2">
-              87 keywords → 63 briefs → 48 articles → 48 image sets generated this week.
+        </div>
+      </section>
+
+      {/* 4-PRODUCT SYSTEM OVERVIEW */}
+      <section className="py-24 bg-gradient-to-b from-white via-[#0693e3]/2 to-[#5d4ae3]/2">
+        <div className="max-w-6xl mx-auto px-6">
+          <div className="text-center mb-16">
+            <h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-4">
+              One engine that unifies search intelligence, content, and automation.
+            </h2>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            {productModules.map((module, index) => {
+              const Icon = module.icon;
+              return (
+                <div
+                  key={module.title}
+                  className={`relative rounded-3xl border-2 border-slate-200 bg-gradient-to-br from-white to-slate-50/50 p-8 flex flex-col gap-6 group hover:border-[#0693e3]/50 transition-all shadow-lg hover:shadow-2xl hover:-translate-y-1`}
+                >
+                  {/* Gradient border on hover */}
+                  <div className={`absolute -inset-0.5 bg-gradient-to-br ${module.color} rounded-3xl opacity-0 group-hover:opacity-20 blur transition-opacity -z-10`} />
+                  
+                  <div className={`size-14 rounded-2xl bg-gradient-to-br ${module.color} flex items-center justify-center text-white shadow-lg`}>
+                    <Icon className="h-7 w-7" />
+                  </div>
+                  
+                  <div>
+                    <h3 className="text-2xl font-bold text-slate-900 mb-2">{module.title}</h3>
+                    <p className="text-sm text-slate-600 mb-4">{module.subtitle}</p>
+                    <ul className="space-y-3">
+                      {module.bullets.map((bullet, i) => (
+                        <li key={i} className="flex gap-3 text-sm text-slate-700">
+                          <span className={`mt-1.5 size-2 rounded-full bg-gradient-to-br ${module.color} shadow-sm flex-shrink-0`} />
+                          <span>{bullet}</span>
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+                  
+                  <a
+                    href={module.link}
+                    className="inline-flex items-center gap-2 text-sm font-semibold text-[#0693e3] hover:text-[#0472b8] group-hover:gap-3 transition-all mt-auto"
+                  >
+                    Learn more
+                    <ArrowRightIcon className="h-4 w-4" />
+                  </a>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </section>
+
+      {/* HOW IGNY8 WORKS (PIPELINE) */}
+      <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 Igny8 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">
+            {/* Connecting line */}
+            <div className="absolute top-12 left-0 right-0 h-0.5 bg-gradient-to-r from-[#0693e3] via-[#5d4ae3] via-[#ff7a00] via-[#0bbf87] to-[#0693e3] opacity-20 hidden md:block" />
+            
+            <div className="grid grid-cols-2 md:grid-cols-7 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-24 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-10 w-10" />
+                      {/* 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>
 
-      <TestimonialSlider />
+      {/* PRODUCT MODULE SNAPSHOTS */}
+      {productModules.map((module, index) => {
+        const Icon = module.icon;
+        const isLeft = module.align === "left";
+        
+        return (
+          <section key={module.title} className={`py-24 ${index % 2 === 0 ? "bg-white" : "bg-gradient-to-b from-slate-50/50 to-white"}`}>
+            <div className="max-w-7xl mx-auto px-6">
+              <div className={`grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center ${!isLeft ? "lg:grid-flow-dense" : ""}`}>
+                {/* Screenshot */}
+                <div className={`relative ${!isLeft ? "lg:col-start-2" : ""}`}>
+                  <div className="relative">
+                    {/* Gradient frame background */}
+                    <div className={`absolute -inset-4 bg-gradient-to-br ${module.color} rounded-3xl opacity-20 blur-2xl`} />
+                    <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 */}
+                    <div className={`absolute -bottom-6 ${isLeft ? "-right-6" : "-left-6"} w-32 h-32 bg-gradient-to-br ${module.color} rounded-2xl opacity-10 blur-2xl -z-10`} />
+                  </div>
+                </div>
 
-      <section className="max-w-6xl mx-auto px-6 py-24 grid grid-cols-1 lg:grid-cols-3 gap-8">
-        {[
-          {
-            title: "Deploy anywhere",
-            description:
-              "Publish directly to WordPress with Igny8 automations or export polished assets to CMS, docs, or project tools.",
-          },
-          {
-            title: "Collaborate cross-team",
-            description:
-              "Give SEO, content, and creative teams a shared workspace—complete with approvals, version history, and assignments.",
-          },
-          {
-            title: "Stay on-brand and compliant",
-            description:
-              "Govern prompts, author voices, and AI usage with centralized policies and audit-ready histories.",
-          },
-        ].map((item, index) => {
-          const gradients = [
-            "from-[#0693e3]/10 to-[#0472b8]/5",
-            "from-[#0bbf87]/10 to-[#08966b]/5",
-            "from-[#5d4ae3]/10 to-[#3a2f94]/5",
-          ];
-          const borders = [
-            "border-[#0693e3]/30",
-            "border-[#0bbf87]/30",
-            "border-[#5d4ae3]/30",
-          ];
-          return (
-            <div
-              key={item.title}
-              className={`rounded-3xl border-2 ${borders[index]} bg-gradient-to-br ${gradients[index]} bg-white/50 backdrop-blur-sm p-8 space-y-4 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all`}
-            >
-              <h3 className="text-lg font-semibold text-slate-900">{item.title}</h3>
-              <p className="text-sm text-slate-600 leading-relaxed">{item.description}</p>
+                {/* 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.bullets.map((bullet, 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>{bullet}</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`}
+                  >
+                    See {module.title}
+                    <ArrowRightIcon className="h-5 w-5" />
+                  </a>
+                </div>
+              </div>
             </div>
-          );
-        })}
+          </section>
+        );
+      })}
+
+      {/* AUTOMATION SNAPSHOT SECTION */}
+      <section className="py-24 bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 relative overflow-hidden">
+        {/* Background pattern */}
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(6,147,227,0.1),transparent_70%)]" />
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_80%_20%,rgba(109,74,227,0.15),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">
+            {/* 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">
+                  <BoltIcon className="h-6 w-6" />
+                </div>
+                <h2 className="text-4xl md:text-5xl font-bold text-white">
+                  Automation Engine
+                </h2>
+              </div>
+              <p className="text-xl text-slate-300 mb-8 leading-relaxed">
+                Orchestrate your entire content pipeline with intelligent handoffs between modules. Set it once, and watch it execute.
+              </p>
+              
+              {/* Automation Timeline */}
+              <div className="space-y-6 mb-8">
+                {[
+                  { from: "Keywords", to: "Clusters", icon: "→", color: "from-[#0693e3] to-[#5d4ae3]" },
+                  { from: "Clusters", to: "Ideas", icon: "→", color: "from-[#5d4ae3] to-[#ff7a00]" },
+                  { from: "Ideas", to: "Tasks", icon: "→", color: "from-[#ff7a00] to-[#0bbf87]" },
+                  { from: "Tasks", to: "Content", icon: "→", color: "from-[#0bbf87] to-[#0693e3]" },
+                  { from: "Content", to: "Images", icon: "→", color: "from-[#0693e3] to-[#5d4ae3]" },
+                  { from: "Images", to: "Publish", icon: "→", color: "from-[#5d4ae3] to-[#0bbf87]" },
+                ].map((handoff, i) => (
+                  <div key={i} className="flex items-center gap-4">
+                    <div className={`w-12 h-12 rounded-xl bg-gradient-to-br ${handoff.color} flex items-center justify-center text-white font-bold shadow-lg`}>
+                      {handoff.icon}
+                    </div>
+                    <div className="flex-1">
+                      <div className="text-white font-semibold">{handoff.from} → {handoff.to}</div>
+                      <div className="text-sm text-slate-400">Automated handoff with quality checks</div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+
+              {/* Metrics */}
+              <div className="grid grid-cols-2 gap-4">
+                <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-4">
+                  <div className="text-3xl font-bold text-white mb-1">87%</div>
+                  <div className="text-sm text-slate-400">Completion Rate</div>
+                </div>
+                <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-4">
+                  <div className="text-3xl font-bold text-white mb-1">6×</div>
+                  <div className="text-sm text-slate-400">Faster Velocity</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>
       </section>
 
-      <CTASection
-        title="Ready to orchestrate SEO, content, and creative in one AI engine?"
-        description="Launch Igny8 in minutes. Start automating your workflow, or book a white-glove onboarding session with our team."
-        primaryCta={{ label: "Start free trial", href: "https://app.igny8.com/signup" }}
-        secondaryCta={{ label: "Talk to sales", href: "/contact" }}
-      />
+      {/* TESTIMONIALS */}
+      <section className="py-24 bg-white">
+        <div className="max-w-7xl mx-auto px-6">
+          <div className="text-center mb-16">
+            <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 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-6">
+            {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/50 backdrop-blur-sm p-8 flex flex-col gap-6 shadow-lg hover:shadow-2xl hover:-translate-y-1 transition-all`}
+                >
+                  {/* Avatar placeholder */}
+                  <div className={`size-12 rounded-full bg-gradient-to-br ${gradientColors[index].split(" ")[0]} flex items-center justify-center text-white font-bold text-lg shadow-lg`}>
+                    {testimonial.name.charAt(0)}
+                  </div>
+                  
+                  <p className="text-base text-slate-700 leading-relaxed font-medium flex-1">
+                    "{testimonial.quote}"
+                  </p>
+                  
+                  <div className="flex flex-col gap-1">
+                    <span className="font-bold text-slate-900">{testimonial.name}</span>
+                    <span className="text-sm text-slate-600">
+                      {testimonial.title} · {testimonial.company}
+                    </span>
+                  </div>
+                  
+                  {/* Metrics badge */}
+                  <div className={`inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-gradient-to-r ${gradientColors[index]} text-slate-700 text-xs font-semibold w-fit`}>
+                    <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-bold text-white mb-6">
+            Ready to orchestrate SEO, content, and creative in one AI engine?
+          </h2>
+          <p className="text-xl text-white/85 mb-10 max-w-2xl mx-auto">
+            Launch Igny8 in minutes. Start automating your workflow, or book a white-glove onboarding session with our team.
+          </p>
+          <div className="flex flex-col sm:flex-row gap-4 justify-center">
+            {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: "Talk to Sales", 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>
+      </section>
     </div>
   );
 };
 
 export default Home;
-