diff --git a/frontend/src/marketing/pages/Resources.tsx b/frontend/src/marketing/pages/Resources.tsx
index 92e57dbc..e9684652 100644
--- a/frontend/src/marketing/pages/Resources.tsx
+++ b/frontend/src/marketing/pages/Resources.tsx
@@ -1,27 +1,25 @@
-import React, { useState } from "react";
+import React from "react";
 import { Link } from "react-router-dom";
 import {
   RocketLaunchIcon,
-  ChatBubbleLeftRightIcon,
   ArrowRightIcon,
   ArrowDownTrayIcon,
   PlayIcon,
-  CalculatorIcon,
   BookOpenIcon,
   SparklesIcon,
   ChartBarIcon,
   BoltIcon,
-  PhotoIcon,
   DocumentTextIcon,
   WrenchScrewdriverIcon,
-  ArrowTrendingUpIcon,
+  ClipboardDocumentCheckIcon,
+  AcademicCapIcon,
+  CalendarIcon,
   ClockIcon,
+  CheckCircleIcon,
+  ListBulletIcon,
 } from "@heroicons/react/24/outline";
 
 const Resources: React.FC = () => {
-  const [selectedCategory, setSelectedCategory] = useState("Articles");
-  const [webinarTab, setWebinarTab] = useState<"upcoming" | "ondemand">("upcoming");
-
   const renderCta = (cta: { label: string; href: string }, className: string) => {
     const isExternal = cta.href.startsWith("http");
     
@@ -45,160 +43,137 @@ const Resources: React.FC = () => {
     );
   };
 
-  const categories = [
-    "Articles",
-    "Playbooks",
-    "Webinars",
-    "Templates",
-    "Tools",
-    "Case Studies",
-    "Product Updates",
-  ];
-
-  const articles = [
+  const learnAIResources = [
     {
-      title: "AI SEO: Building topical authority at scale",
-      description: "Short intro about mapping thousands of keywords at speed.",
-      category: "Articles",
-    },
-    {
-      title: "Automating the content supply chain",
-      description: "How to orchestrate keyword research, briefs, writing, imagery, and publishing.",
-      category: "Articles",
-    },
-    {
-      title: "Measuring AI generated content quality",
-      description: "Frameworks for accuracy, consistency, and editorial control across all outputs.",
-      category: "Articles",
-    },
-    {
-      title: "SERP-guided content planning for growth",
-      description: "How context aware scoring improves prioritization and publishing velocity.",
-      category: "Articles",
-    },
-    {
-      title: "Scaling briefs with AI editorial logic",
-      description: "A system for generating consistent, on brand briefs with automatic depth.",
-      category: "Articles",
-    },
-    {
-      title: "Upgrading workflows with cluster automation",
-      description: "Practical steps to enable automation across the entire research to publish pipeline.",
-      category: "Articles",
-    },
-  ];
-
-  const playbooks = [
-    {
-      title: "AI SEO Acceleration Playbook",
-      description: "A complete framework for lifting organic traffic by expanding cluster depth and publishing volume.",
+      title: "AI SEO: Building Topical Authority at Scale",
+      description: "A comprehensive guide on how AI systems accelerate research, map thousands of keywords into authoritative clusters, and streamline content production for rapid growth. Learn the frameworks that top-performing teams use to dominate search results.",
+      type: "Article",
+      tag: "Strategy",
       icon: ChartBarIcon,
       color: "from-[#0693e3] to-[#0472b8]",
     },
     {
-      title: "Automated Content Supply Chain Blueprint",
-      description: "A step by step path for unifying research, briefs, writing, imagery, and publishing.",
-      icon: BoltIcon,
+      title: "The Complete Framework for AI Content Quality",
+      description: "Deep dive into measuring accuracy, consistency, and editorial control across all AI-generated outputs. Includes frameworks for tracking performance, maintaining brand voice, and ensuring compliance at scale.",
+      type: "Framework Guide",
+      tag: "Strategy",
+      icon: AcademicCapIcon,
       color: "from-[#0bbf87] to-[#08966b]",
     },
     {
-      title: "Editorial Standards for AI Content",
-      description: "Guidelines for tone, structure, consistency, and narrative control at scale.",
-      icon: DocumentTextIcon,
-      color: "from-[#ff7a00] to-[#cc5f00]",
-    },
-    {
-      title: "Topic Authority Framework",
-      description: "A methodology for building dominance across entire keyword clusters.",
-      icon: SparklesIcon,
-      color: "from-[#5d4ae3] to-[#3a2f94]",
-    },
-  ];
-
-  const upcomingWebinars = [
-    {
-      title: "Building an automation first content ops team",
-      description: "Live strategy session with IGNY8 specialists.",
-      date: "November 21, 2025",
-    },
-    {
-      title: "From keywords to conversions: dashboards that prove ROI",
-      description: "A full walkthrough of reporting and insights.",
-      date: "December 5, 2025",
-    },
-  ];
-
-  const onDemandWebinars = [
-    {
-      title: "Automating cluster research",
-      description: "Learn how to automate keyword clustering at scale.",
-    },
-    {
-      title: "Editorial control and AI tone systems",
-      description: "Master brand voice and tone management in AI content.",
-    },
-  ];
-
-  const templates = [
-    {
-      title: "AI Brief Template",
-      description: "Structured format for generating consistent content briefs.",
-      icon: DocumentTextIcon,
-      color: "from-[#0693e3] to-[#0472b8]",
-    },
-    {
-      title: "Cluster Outline Template",
-      description: "Long form outline template aligned with IGNY8 Writer standards.",
-      icon: ArrowDownTrayIcon,
-      color: "from-[#0bbf87] to-[#08966b]",
-    },
-    {
-      title: "Image Prompt Template",
-      description: "A ready to use structure for generating high quality image prompts.",
-      icon: PhotoIcon,
-      color: "from-[#ff7a00] to-[#cc5f00]",
-    },
-    {
-      title: "Editorial Style Guide Template",
-      description: "A flexible guide for managing tone and brand voice.",
+      title: "SERP-Guided Content Planning Playbook",
+      description: "Learn how context-aware scoring improves prioritization and publishing velocity. This downloadable PDF covers everything from keyword opportunity analysis to content brief generation using SERP insights.",
+      type: "PDF Guide",
+      tag: "Strategy",
       icon: BookOpenIcon,
-      color: "from-[#5d4ae3] to-[#3a2f94]",
+      color: "from-[#ff7a00] to-[#cc5f00]",
     },
   ];
 
-  const tools = [
+  const buildSystemResources = [
     {
-      title: "Content Velocity Calculator",
-      description: "Estimate the volume of content needed to achieve specific traffic goals.",
-      icon: CalculatorIcon,
+      title: "Notion Content Calendar Template",
+      description: "A complete Notion workspace template for managing your content pipeline from keywords to published posts. Includes automation tracking, editorial calendars, and team collaboration boards.",
+      type: "Template",
+      tags: ["Template", "System"],
+      icon: CalendarIcon,
       color: "from-[#0693e3] to-[#0472b8]",
     },
     {
-      title: "Keyword Opportunity Score",
-      description: "A utility to evaluate keyword value based on difficulty, volume, and intent.",
-      icon: ArrowTrendingUpIcon,
+      title: "Airtable Keyword Cluster System",
+      description: "Pre-built Airtable base for organizing keywords, clusters, and content ideas. Includes formulas for opportunity scoring, status tracking, and automated workflows that sync with IGNY8.",
+      type: "System",
+      tags: ["System", "Workflow"],
+      icon: ChartBarIcon,
       color: "from-[#0bbf87] to-[#08966b]",
     },
     {
-      title: "Automation ROI Calculator",
-      description: "Measure the productivity gains achievable through workflow automation.",
-      icon: ChartBarIcon,
+      title: "Content Calendar Kit (Excel)",
+      description: "Downloadable Excel template with macros for content planning, publishing schedules, and performance tracking. Perfect for teams that prefer spreadsheet-based workflows.",
+      type: "Template",
+      tags: ["Template", "Workflow"],
+      icon: DocumentTextIcon,
       color: "from-[#5d4ae3] to-[#3a2f94]",
     },
+    {
+      title: "Cluster Mapping Board",
+      description: "Visual board template for mapping keyword relationships and building topical authority maps. Works with Miro, Figma, or any whiteboard tool. Includes starter frameworks and examples.",
+      type: "Template",
+      tags: ["Template", "System"],
+      icon: SparklesIcon,
+      color: "from-[#ff7a00] to-[#cc5f00]",
+    },
   ];
 
-  const caseStudies = [
+  const attendWatchResources = [
     {
-      title: "Publisher increases content velocity by 3x",
-      description: "Short note on how IGNY8 unified research and writing workflows.",
+      title: "Building an Automation-First Content Ops Team",
+      description: "Live strategy session with IGNY8 specialists covering workflow design, team structure, and automation best practices.",
+      date: "November 21, 2025",
+      type: "Workshop",
+      tag: "Live",
+      icon: BoltIcon,
+      color: "from-[#0693e3] to-[#0472b8]",
     },
     {
-      title: "Agency cuts production time by 48 percent",
-      description: "Insight into how automation reduced cycles from research to publish.",
+      title: "From Keywords to Conversions: Dashboard Deep-Dive",
+      description: "A full walkthrough of reporting and insights that prove ROI. Learn how to build executive-ready dashboards that showcase content impact.",
+      date: "December 5, 2025",
+      type: "Workshop",
+      tag: "Live",
+      icon: ChartBarIcon,
+      color: "from-[#0bbf87] to-[#08966b]",
     },
     {
-      title: "Marketing team consolidates 4 tools into one",
-      description: "Story on reducing platform complexity while scaling content output.",
+      title: "Automating Cluster Research at Scale",
+      description: "Replay of our most popular session on using AI to group thousands of keywords into strategic clusters. Includes Q&A with automation experts.",
+      type: "Replay",
+      tag: "Replay",
+      icon: PlayIcon,
+      color: "from-[#5d4ae3] to-[#3a2f94]",
+    },
+    {
+      title: "Editorial Control and AI Tone Systems",
+      description: "Deep-dive content audit session covering brand voice management, tone consistency, and editorial workflows for AI-generated content.",
+      type: "Replay",
+      tag: "Replay",
+      icon: BookOpenIcon,
+      color: "from-[#ff7a00] to-[#cc5f00]",
+    },
+  ];
+
+  const executeFasterResources = [
+    {
+      title: "IGNY8 Quick-Start Documentation",
+      description: "Get up and running in 30 minutes with our step-by-step quick-start guide. Covers account setup, first keyword import, and basic automation configuration.",
+      type: "Quick-Start",
+      tags: ["Checklist", "Execution"],
+      icon: RocketLaunchIcon,
+      color: "from-[#0693e3] to-[#0472b8]",
+    },
+    {
+      title: "SEO Content Quality Checklist",
+      description: "A comprehensive checklist for ensuring every piece of AI-generated content meets editorial standards. Includes SERP analysis, keyword optimization, and compliance checks.",
+      type: "Checklist",
+      tags: ["Checklist", "Execution"],
+      icon: ClipboardDocumentCheckIcon,
+      color: "from-[#0bbf87] to-[#08966b]",
+    },
+    {
+      title: "Content Production SOPs Pack",
+      description: "Standard operating procedures for content teams using IGNY8. Includes workflows for brief generation, content review, image creation, and publishing.",
+      type: "SOP Pack",
+      tags: ["Execution", "Prompt Pack"],
+      icon: ListBulletIcon,
+      color: "from-[#5d4ae3] to-[#3a2f94]",
+    },
+    {
+      title: "AI Prompt Library for Content Teams",
+      description: "Pre-built prompt templates for clustering, brief generation, content writing, and image creation. Customize these prompts to match your brand voice and editorial standards.",
+      type: "Prompt Pack",
+      tags: ["Prompt Pack", "Execution"],
+      icon: SparklesIcon,
+      color: "from-[#ff7a00] to-[#cc5f00]",
     },
   ];
 
@@ -213,114 +188,59 @@ const Resources: React.FC = () => {
             Resources
           </span>
           <h1 className="text-5xl md:text-6xl lg:text-5xl font-bold leading-tight text-slate-900 mb-6">
-            Insights, playbooks, and tools for AI led growth teams.
+            Resources to Power Your AI SEO Journey
           </h1>
           <p className="text-xl md:text-2xl text-slate-600 mb-10 max-w-2xl mx-auto leading-relaxed">
-            Stay ahead with strategic content, templates, and live sessions that help you scale output, unify your workflows, and maximize automation impact.
+            Templates, Guides, Workflows & Tools – Built for High-Scale Content Teams
           </p>
-          <div className="flex flex-col sm:flex-row gap-4 justify-center">
+          <div className="flex justify-center">
             {renderCta(
-              { label: "Browse articles", href: "#articles" },
+              { label: "Explore All Resources", href: "#learn" },
               "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: "Join newsletter", href: "#newsletter" },
-              "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>
 
-      {/* FEATURED RESOURCE SPOTLIGHT */}
-      <section className="max-w-7xl mx-auto px-6 pb-24">
-        <div className="mb-8">
-          <span className="text-xs uppercase tracking-[0.28em] text-slate-500 font-semibold">Featured Resource</span>
-        </div>
-        <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-12 shadow-xl hover:shadow-2xl transition-all">
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
-            <div className="space-y-4">
-              <h2 className="text-3xl md:text-4xl font-bold text-slate-900">
-                AI SEO: Building topical authority at scale
-              </h2>
-              <p className="text-lg text-slate-600 leading-relaxed">
-                A deep dive into how AI systems accelerate research, map thousands of keywords into authoritative clusters, and streamline content production for rapid growth.
-              </p>
-              <a
-                href="#"
-                className="inline-flex items-center gap-2 text-base font-semibold text-[#0693e3] hover:text-[#0472b8] group"
-              >
-                Read full guide
-                <ArrowRightIcon className="h-5 w-5 group-hover:translate-x-1 transition-transform" />
-              </a>
-            </div>
-            <div className="rounded-2xl border-2 border-slate-200 bg-gradient-to-br from-slate-50 to-white h-64 flex items-center justify-center text-sm text-slate-400 shadow-inner">
-              Featured resource image placeholder
-            </div>
-          </div>
-        </div>
-      </section>
-
-      {/* RESOURCE CATEGORY FILTERS */}
-      <section className="bg-white border-y border-slate-200">
-        <div className="max-w-7xl mx-auto px-6 py-6">
-          <div className="flex flex-wrap gap-3 justify-center">
-            {categories.map((category) => (
-              <button
-                key={category}
-                onClick={() => setSelectedCategory(category)}
-                className={`px-4 py-2 rounded-full text-sm font-semibold transition-all ${
-                  selectedCategory === category
-                    ? "bg-gradient-to-r from-[#0693e3] to-[#0472b8] text-white shadow-md"
-                    : "bg-slate-100 text-slate-600 hover:bg-slate-200"
-                }`}
-              >
-                {category}
-              </button>
-            ))}
-          </div>
-        </div>
-      </section>
-
-      {/* ARTICLES GRID */}
-      <section id="articles" className="max-w-7xl mx-auto px-6 py-24">
-        <div className="text-center mb-12">
+      {/* CONTENT GROUP 1: Learn AI SEO */}
+      <section id="learn" className="max-w-7xl mx-auto px-6 py-24">
+        <div className="mb-12">
           <h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-4">
-            Latest Articles
+            Learn AI SEO
           </h2>
+          <p className="text-lg text-slate-600 max-w-2xl">
+            Editorial guidance, frameworks, and strategic insights to master AI-powered content creation.
+          </p>
         </div>
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-          {articles.map((article, index) => {
-            const colors = [
-              "from-[#0693e3]/10 to-white",
-              "from-[#0bbf87]/10 to-white",
-              "from-[#ff7a00]/10 to-white",
-              "from-[#5d4ae3]/10 to-white",
-              "from-[#0693e3]/10 to-white",
-              "from-[#0bbf87]/10 to-white",
-            ];
-            const borders = [
-              "border-[#0693e3]/30",
-              "border-[#0bbf87]/30",
-              "border-[#ff7a00]/30",
-              "border-[#5d4ae3]/30",
-              "border-[#0693e3]/30",
-              "border-[#0bbf87]/30",
-            ];
+          {learnAIResources.map((resource, index) => {
+            const Icon = resource.icon;
             return (
-              <article
-                key={article.title}
-                className={`rounded-3xl border-2 ${borders[index]} bg-gradient-to-br ${colors[index]} p-8 flex flex-col gap-4 hover:shadow-xl hover:-translate-y-1 transition-all`}
+              <div
+                key={resource.title}
+                className={`rounded-3xl border-2 border-slate-200 bg-white p-8 flex flex-col gap-4 hover:shadow-xl hover:-translate-y-1 transition-all`}
               >
-                <h3 className="text-xl font-semibold text-slate-900">{article.title}</h3>
-                <p className="text-sm text-slate-600 leading-relaxed flex-1">{article.description}</p>
+                <div className="flex items-center justify-between mb-2">
+                  <div className={`inline-flex size-12 rounded-xl bg-gradient-to-br ${resource.color} items-center justify-center text-white shadow-lg`}>
+                    <Icon 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.1em] bg-slate-100 text-slate-600">
+                    {resource.tag}
+                  </span>
+                </div>
+                <div className="text-xs uppercase tracking-[0.2em] text-slate-500 font-semibold">
+                  {resource.type}
+                </div>
+                <h3 className="text-xl font-semibold text-slate-900">{resource.title}</h3>
+                <p className="text-sm text-slate-600 leading-relaxed flex-1">{resource.description}</p>
                 <a
                   href="#"
                   className="inline-flex items-center gap-2 text-sm font-semibold text-[#0693e3] hover:text-[#0472b8] group"
                 >
-                  Read article
+                  {resource.type.includes("PDF") ? "Download" : "Read"} {resource.type.toLowerCase().includes("article") ? "article" : "guide"}
                   <ArrowRightIcon className="h-4 w-4 group-hover:translate-x-1 transition-transform" />
                 </a>
-              </article>
+              </div>
             );
           })}
         </div>
@@ -329,371 +249,272 @@ const Resources: React.FC = () => {
             href="#"
             className="inline-flex items-center gap-2 text-base font-semibold text-slate-700 hover:text-[#0693e3] transition"
           >
-            View all articles
+            View All Guides
             <ArrowRightIcon className="h-5 w-5" />
           </a>
         </div>
       </section>
 
-      {/* PLAYBOOKS SECTION */}
+      {/* CONTENT GROUP 2: Build Your System */}
       <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">
-          <div className="text-center mb-12">
+          <div className="mb-12">
             <h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-4">
-              Playbooks and Strategic Guides
+              Build Your System
             </h2>
+            <p className="text-lg text-slate-600 max-w-2xl">
+              Help users operationalize their workflows with ready-to-use templates and systems.
+            </p>
           </div>
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-            {playbooks.map((playbook, index) => {
-              const Icon = playbook.icon;
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            {buildSystemResources.map((resource, index) => {
+              const Icon = resource.icon;
+              const colors = [
+                "from-[#0693e3]/10 to-white",
+                "from-[#0bbf87]/10 to-white",
+                "from-[#5d4ae3]/10 to-white",
+                "from-[#ff7a00]/10 to-white",
+              ];
+              const borders = [
+                "border-[#0693e3]/30",
+                "border-[#0bbf87]/30",
+                "border-[#5d4ae3]/30",
+                "border-[#ff7a00]/30",
+              ];
               return (
                 <div
-                  key={playbook.title}
-                  className="rounded-3xl border-2 border-slate-200 bg-white p-8 flex flex-col gap-4 hover:shadow-xl hover:-translate-y-1 transition-all"
+                  key={resource.title}
+                  className={`rounded-3xl border-2 ${borders[index]} bg-gradient-to-br ${colors[index]} p-8 flex flex-col gap-4 hover:shadow-xl hover:-translate-y-1 transition-all`}
                 >
-                  <div className={`inline-flex size-12 rounded-xl bg-gradient-to-br ${playbook.color} items-center justify-center text-white shadow-lg`}>
-                    <Icon className="h-6 w-6" />
+                  <div className="flex items-start gap-4">
+                    <div className={`inline-flex size-12 rounded-xl bg-gradient-to-br ${resource.color} items-center justify-center text-white shadow-lg flex-shrink-0`}>
+                      <Icon className="h-6 w-6" />
+                    </div>
+                    <div className="flex-1">
+                      <div className="flex flex-wrap gap-2 mb-2">
+                        {resource.tags.map((tag) => (
+                          <span
+                            key={tag}
+                            className="inline-flex items-center px-2 py-1 rounded-full text-xs font-semibold uppercase tracking-[0.1em] bg-white/80 text-slate-600 border border-slate-200"
+                          >
+                            {tag}
+                          </span>
+                        ))}
+                      </div>
+                      <div className="text-xs uppercase tracking-[0.2em] text-slate-500 font-semibold mb-2">
+                        {resource.type}
+                      </div>
+                      <h3 className="text-xl font-semibold text-slate-900 mb-3">{resource.title}</h3>
+                      <p className="text-sm text-slate-600 leading-relaxed mb-4">{resource.description}</p>
+                      <a
+                        href="#"
+                        className="inline-flex items-center gap-2 text-sm font-semibold text-[#0693e3] hover:text-[#0472b8] group"
+                      >
+                        <ArrowDownTrayIcon className="h-4 w-4" />
+                        Download {resource.type.toLowerCase()}
+                        <ArrowRightIcon className="h-4 w-4 group-hover:translate-x-1 transition-transform" />
+                      </a>
+                    </div>
                   </div>
-                  <h3 className="text-lg font-semibold text-slate-900">{playbook.title}</h3>
-                  <p className="text-sm text-slate-600 leading-relaxed flex-1">{playbook.description}</p>
-                  <a
-                    href="#"
-                    className="inline-flex items-center gap-2 text-sm font-semibold text-[#0693e3] hover:text-[#0472b8] group"
-                  >
-                    <ArrowDownTrayIcon className="h-4 w-4" />
-                    Download {playbook.title.toLowerCase().includes("playbook") ? "playbook" : playbook.title.toLowerCase().includes("blueprint") ? "blueprint" : playbook.title.toLowerCase().includes("guide") ? "guide" : "framework"}
-                    <ArrowRightIcon className="h-4 w-4 group-hover:translate-x-1 transition-transform" />
-                  </a>
                 </div>
               );
             })}
           </div>
-        </div>
-      </section>
-
-      {/* WEBINARS AND REPLAYS */}
-      <section className="py-24 bg-white">
-        <div className="max-w-7xl mx-auto px-6">
-          <div className="text-center mb-12">
-            <h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-4">
-              Live Sessions and On demand Replays
-            </h2>
-          </div>
-          
-          {/* Tabs */}
-          <div className="flex justify-center gap-4 mb-8">
-            <button
-              onClick={() => setWebinarTab("upcoming")}
-              className={`px-6 py-3 rounded-xl font-semibold transition-all ${
-                webinarTab === "upcoming"
-                  ? "bg-gradient-to-r from-[#0693e3] to-[#0472b8] text-white shadow-md"
-                  : "bg-slate-100 text-slate-600 hover:bg-slate-200"
-              }`}
-            >
-              Upcoming
-            </button>
-            <button
-              onClick={() => setWebinarTab("ondemand")}
-              className={`px-6 py-3 rounded-xl font-semibold transition-all ${
-                webinarTab === "ondemand"
-                  ? "bg-gradient-to-r from-[#0693e3] to-[#0472b8] text-white shadow-md"
-                  : "bg-slate-100 text-slate-600 hover:bg-slate-200"
-              }`}
-            >
-              On demand
-            </button>
-          </div>
-
-          {/* Content */}
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-            {webinarTab === "upcoming" ? (
-              <>
-                {upcomingWebinars.map((webinar, index) => {
-                  const colors = [
-                    "from-[#0693e3]/10 to-white",
-                    "from-[#0bbf87]/10 to-white",
-                  ];
-                  const borders = [
-                    "border-[#0693e3]/30",
-                    "border-[#0bbf87]/30",
-                  ];
-                  return (
-                    <div
-                      key={webinar.title}
-                      className={`rounded-3xl border-2 ${borders[index]} bg-gradient-to-br ${colors[index]} p-8 flex flex-col gap-4 hover:shadow-xl hover:-translate-y-1 transition-all`}
-                    >
-                      <div className="flex items-center gap-2 text-xs uppercase tracking-[0.2em] text-slate-500">
-                        <ClockIcon className="h-4 w-4" />
-                        {webinar.date}
-                      </div>
-                      <h3 className="text-xl font-semibold text-slate-900">{webinar.title}</h3>
-                      <p className="text-sm text-slate-600 leading-relaxed flex-1">{webinar.description}</p>
-                      <button className="inline-flex items-center justify-center rounded-xl bg-gradient-to-r from-[#0693e3] to-[#0472b8] text-white px-6 py-3 text-sm font-semibold hover:shadow-lg transition">
-                        Register now
-                      </button>
-                    </div>
-                  );
-                })}
-              </>
-            ) : (
-              <>
-                {onDemandWebinars.map((webinar, index) => {
-                  const colors = [
-                    "from-[#5d4ae3]/10 to-white",
-                    "from-[#ff7a00]/10 to-white",
-                  ];
-                  const borders = [
-                    "border-[#5d4ae3]/30",
-                    "border-[#ff7a00]/30",
-                  ];
-                  return (
-                    <div
-                      key={webinar.title}
-                      className={`rounded-3xl border-2 ${borders[index]} bg-gradient-to-br ${colors[index]} p-8 flex flex-col gap-4 hover:shadow-xl hover:-translate-y-1 transition-all`}
-                    >
-                      <div className="flex items-center gap-2 text-xs uppercase tracking-[0.2em] text-slate-500">
-                        <PlayIcon className="h-4 w-4" />
-                        Replay
-                      </div>
-                      <h3 className="text-xl font-semibold text-slate-900">{webinar.title}</h3>
-                      <p className="text-sm text-slate-600 leading-relaxed flex-1">{webinar.description}</p>
-                      <button className="inline-flex items-center justify-center gap-2 rounded-xl border-2 border-slate-300 bg-white text-slate-700 px-6 py-3 text-sm font-semibold hover:border-[#0693e3] hover:text-[#0693e3] transition">
-                        <PlayIcon className="h-4 w-4" />
-                        Watch replay
-                      </button>
-                    </div>
-                  );
-                })}
-              </>
-            )}
-          </div>
           <div className="text-center mt-12">
             <a
               href="#"
               className="inline-flex items-center gap-2 text-base font-semibold text-slate-700 hover:text-[#0693e3] transition"
             >
-              View all events
+              Explore Templates
               <ArrowRightIcon className="h-5 w-5" />
             </a>
           </div>
         </div>
       </section>
 
-      {/* TEMPLATE LIBRARY */}
-      <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">
-          <div className="text-center mb-12">
-            <h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-4">
-              Templates for Fast Execution
-            </h2>
-          </div>
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-            {templates.map((template, index) => {
-              const Icon = template.icon;
-              return (
-                <div
-                  key={template.title}
-                  className="rounded-3xl border-2 border-slate-200 bg-white p-8 flex flex-col gap-4 hover:shadow-xl hover:-translate-y-1 transition-all"
-                >
-                  <div className={`inline-flex size-12 rounded-xl bg-gradient-to-br ${template.color} items-center justify-center text-white shadow-lg`}>
-                    <Icon className="h-6 w-6" />
-                  </div>
-                  <h3 className="text-lg font-semibold text-slate-900">{template.title}</h3>
-                  <p className="text-sm text-slate-600 leading-relaxed flex-1">{template.description}</p>
-                  <a
-                    href="#"
-                    className="inline-flex items-center gap-2 text-sm font-semibold text-[#0693e3] hover:text-[#0472b8] group"
-                  >
-                    <ArrowDownTrayIcon className="h-4 w-4" />
-                    Download template
-                    <ArrowRightIcon className="h-4 w-4 group-hover:translate-x-1 transition-transform" />
-                  </a>
-                </div>
-              );
-            })}
-          </div>
-        </div>
-      </section>
-
-      {/* TOOLS AND CALCULATORS */}
+      {/* CONTENT GROUP 3: Attend or Watch */}
       <section className="py-24 bg-white">
         <div className="max-w-7xl mx-auto px-6">
-          <div className="text-center mb-12">
+          <div className="mb-12">
             <h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-4">
-              Tools to Support Your Growth Pipeline
+              Attend or Watch
             </h2>
+            <p className="text-lg text-slate-600 max-w-2xl">
+              Live + recorded teaching sessions to accelerate your AI content operations.
+            </p>
           </div>
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-            {tools.map((tool, index) => {
-              const Icon = tool.icon;
-              return (
-                <div
-                  key={tool.title}
-                  className="rounded-3xl border-2 border-slate-200 bg-white p-8 flex flex-col gap-4 hover:shadow-xl hover:-translate-y-1 transition-all"
-                >
-                  <div className={`inline-flex size-12 rounded-xl bg-gradient-to-br ${tool.color} items-center justify-center text-white shadow-lg`}>
-                    <Icon className="h-6 w-6" />
-                  </div>
-                  <h3 className="text-lg font-semibold text-slate-900">{tool.title}</h3>
-                  <p className="text-sm text-slate-600 leading-relaxed flex-1">{tool.description}</p>
-                  <button className="inline-flex items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-[#0693e3] to-[#0472b8] text-white px-6 py-3 text-sm font-semibold hover:shadow-lg transition">
-                    <WrenchScrewdriverIcon className="h-4 w-4" />
-                    Open tool
-                  </button>
-                </div>
-              );
-            })}
-          </div>
-        </div>
-      </section>
-
-      {/* CASE STUDIES PREVIEW */}
-      <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">
-          <div className="text-center mb-12">
-            <h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-4">
-              How Teams Scale Output With IGNY8
-            </h2>
-          </div>
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-            {caseStudies.map((study, index) => {
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            {attendWatchResources.map((resource, index) => {
+              const Icon = resource.icon;
               const colors = [
                 "from-[#0693e3]/10 to-white",
                 "from-[#0bbf87]/10 to-white",
                 "from-[#5d4ae3]/10 to-white",
+                "from-[#ff7a00]/10 to-white",
               ];
               const borders = [
                 "border-[#0693e3]/30",
                 "border-[#0bbf87]/30",
                 "border-[#5d4ae3]/30",
+                "border-[#ff7a00]/30",
               ];
               return (
                 <div
-                  key={study.title}
+                  key={resource.title}
                   className={`rounded-3xl border-2 ${borders[index]} bg-gradient-to-br ${colors[index]} p-8 flex flex-col gap-4 hover:shadow-xl hover:-translate-y-1 transition-all`}
                 >
-                  <h3 className="text-xl font-semibold text-slate-900">{study.title}</h3>
-                  <p className="text-sm text-slate-600 leading-relaxed flex-1">{study.description}</p>
+                  <div className="flex items-start justify-between mb-2">
+                    <div className={`inline-flex size-12 rounded-xl bg-gradient-to-br ${resource.color} items-center justify-center text-white shadow-lg`}>
+                      <Icon 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.1em] ${
+                        resource.tag === "Live"
+                          ? "bg-[#0bbf87]/10 text-[#0bbf87] border border-[#0bbf87]/30"
+                          : "bg-[#5d4ae3]/10 text-[#5d4ae3] border border-[#5d4ae3]/30"
+                      }`}
+                    >
+                      {resource.tag}
+                    </span>
+                  </div>
+                  {resource.date && (
+                    <div className="flex items-center gap-2 text-xs uppercase tracking-[0.2em] text-slate-500 font-semibold">
+                      <ClockIcon className="h-4 w-4" />
+                      {resource.date}
+                    </div>
+                  )}
+                  <div className="text-xs uppercase tracking-[0.2em] text-slate-500 font-semibold">
+                    {resource.type}
+                  </div>
+                  <h3 className="text-xl font-semibold text-slate-900">{resource.title}</h3>
+                  <p className="text-sm text-slate-600 leading-relaxed flex-1">{resource.description}</p>
+                  <button
+                    className={`inline-flex items-center justify-center gap-2 rounded-xl px-6 py-3 text-sm font-semibold transition ${
+                      resource.tag === "Live"
+                        ? "bg-gradient-to-r from-[#0693e3] to-[#0472b8] text-white hover:shadow-lg"
+                        : "border-2 border-slate-300 bg-white text-slate-700 hover:border-[#0693e3] hover:text-[#0693e3]"
+                    }`}
+                  >
+                    {resource.tag === "Live" ? (
+                      <>
+                        <CalendarIcon className="h-4 w-4" />
+                        Register now
+                      </>
+                    ) : (
+                      <>
+                        <PlayIcon className="h-4 w-4" />
+                        Watch replay
+                      </>
+                    )}
+                  </button>
+                </div>
+              );
+            })}
+          </div>
+          <div className="text-center mt-12">
+            <a
+              href="#"
+              className="inline-flex items-center gap-2 text-base font-semibold text-slate-700 hover:text-[#0693e3] transition"
+            >
+              View Schedule
+              <ArrowRightIcon className="h-5 w-5" />
+            </a>
+          </div>
+        </div>
+      </section>
+
+      {/* CONTENT GROUP 4: Execute Faster */}
+      <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">
+          <div className="mb-12">
+            <h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-4">
+              Execute Faster
+            </h2>
+            <p className="text-lg text-slate-600 max-w-2xl">
+              Done-for-you components, fast-start kits, and execution tools to get you running immediately.
+            </p>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+            {executeFasterResources.map((resource, index) => {
+              const Icon = resource.icon;
+              return (
+                <div
+                  key={resource.title}
+                  className="rounded-3xl border-2 border-slate-200 bg-white p-8 flex flex-col gap-4 hover:shadow-xl hover:-translate-y-1 transition-all"
+                >
+                  <div className={`inline-flex size-12 rounded-xl bg-gradient-to-br ${resource.color} items-center justify-center text-white shadow-lg`}>
+                    <Icon className="h-6 w-6" />
+                  </div>
+                  <div className="flex flex-wrap gap-2 mb-2">
+                    {resource.tags.map((tag) => (
+                      <span
+                        key={tag}
+                        className="inline-flex items-center px-2 py-1 rounded-full text-xs font-semibold uppercase tracking-[0.1em] bg-slate-100 text-slate-600"
+                      >
+                        {tag}
+                      </span>
+                    ))}
+                  </div>
+                  <div className="text-xs uppercase tracking-[0.2em] text-slate-500 font-semibold">
+                    {resource.type}
+                  </div>
+                  <h3 className="text-lg font-semibold text-slate-900">{resource.title}</h3>
+                  <p className="text-sm text-slate-600 leading-relaxed flex-1">{resource.description}</p>
                   <a
-                    href="/case-studies"
+                    href="#"
                     className="inline-flex items-center gap-2 text-sm font-semibold text-[#0693e3] hover:text-[#0472b8] group"
                   >
-                    Read case study
+                    <ArrowDownTrayIcon className="h-4 w-4" />
+                    Download Now
                     <ArrowRightIcon className="h-4 w-4 group-hover:translate-x-1 transition-transform" />
                   </a>
                 </div>
               );
             })}
           </div>
-          <div className="text-center mt-12">
-            <Link
-              to="/case-studies"
-              className="inline-flex items-center gap-2 text-base font-semibold text-slate-700 hover:text-[#0693e3] transition"
-            >
-              View all case studies
-              <ArrowRightIcon className="h-5 w-5" />
-            </Link>
-          </div>
         </div>
       </section>
 
-      {/* HELP CENTER PREVIEW */}
-      <section className="py-24 bg-white">
+      {/* CROSS-MODULE TOOLKIT BANNER */}
+      <section className="py-16 bg-gradient-to-r from-[#0bbf87]/10 via-[#0693e3]/10 to-[#0bbf87]/10 border-y border-[#0bbf87]/20">
         <div className="max-w-7xl mx-auto px-6">
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start">
-            {/* Left Column */}
-            <div className="space-y-6">
-              <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-4">
-                Help Center
-              </h2>
-              <p className="text-lg text-slate-600 mb-8">
-                Get instant answers and product walkthroughs.
+          <div className="flex flex-col md:flex-row items-center justify-between gap-6">
+            <div className="flex-1">
+              <p className="text-lg md:text-xl text-slate-900 font-medium leading-relaxed">
+                Build your full-stack AI content engine with our toolkits from every module — Planner, Writer, Thinker & beyond.
               </p>
-              <ul className="space-y-4">
-                {[
-                  { label: "Quickstart guide", href: "/help#getting-started" },
-                  { label: "Documentation", href: "/help" },
-                  { label: "API Reference", href: "/partners#api" },
-                  { label: "Troubleshooting", href: "/help#faq" },
-                ].map((link, index) => {
-                  const dotColors = [
-                    "bg-[#0693e3]",
-                    "bg-[#0bbf87]",
-                    "bg-[#ff7a00]",
-                    "bg-[#5d4ae3]",
-                  ];
-                  return (
-                    <li key={link.label} className="flex items-center gap-3">
-                      <span className={`size-2 rounded-full ${dotColors[index]} shadow-sm flex-shrink-0`} />
-                      <Link
-                        to={link.href}
-                        className="text-base text-slate-700 hover:text-[#0693e3] font-medium transition"
-                      >
-                        {link.label}
-                      </Link>
-                    </li>
-                  );
-                })}
-              </ul>
             </div>
-
-            {/* Right Column - Newsletter Signup */}
-            <div id="newsletter" className="rounded-3xl border-2 border-[#0693e3]/30 bg-gradient-to-br from-[#0693e3]/10 via-white to-[#0bbf87]/5 p-10 space-y-6 shadow-lg">
-              <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">
-                  <SparklesIcon className="h-6 w-6" />
-                </div>
-                <h3 className="text-2xl font-semibold text-slate-900">
-                  Newsletter Signup
-                </h3>
-              </div>
-              <p className="text-sm text-slate-600 leading-relaxed">
-                Monthly insights on AI, SEO, automation, and workflows.
-              </p>
-              <form className="flex flex-col sm:flex-row gap-3">
-                <input
-                  type="email"
-                  placeholder="you@company.com"
-                  className="flex-1 rounded-xl border-2 border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 placeholder:text-slate-500 focus:outline-none focus:border-[#0693e3] focus:ring-2 focus:ring-[#0693e3]/20"
-                />
-                <button
-                  type="submit"
-                  className="inline-flex items-center justify-center rounded-xl bg-gradient-to-r from-[#0693e3] to-[#0472b8] text-white px-6 py-3 text-sm font-semibold hover:shadow-lg transition"
-                >
-                  Subscribe
-                </button>
-              </form>
+            <div>
+              <a
+                href="#"
+                className="inline-flex items-center gap-2 rounded-xl bg-gradient-to-r from-[#0bbf87] to-[#08966b] text-white px-8 py-4 text-base font-semibold hover:shadow-lg hover:-translate-y-0.5 transition shadow-md"
+              >
+                Browse Toolkits
+                <ArrowRightIcon className="h-5 w-5" />
+              </a>
             </div>
           </div>
         </div>
       </section>
 
-      {/* FINAL CTA */}
-      <section className="relative overflow-hidden bg-gradient-to-br from-[#0693e3] via-[#5d4ae3] to-[#8b5cf6]">
+      {/* FINAL CTA - Dark Background */}
+      <section className="relative overflow-hidden bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900">
         {/* Radial glow */}
-        <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(255,255,255,0.1),transparent_70%)]" />
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(6,147,227,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">
-            Want deeper access? Join our monthly live strategy lab.
+            Everything you need to plan, write, and grow with AI — in one ecosystem.
           </h2>
-          <p className="text-xl md:text-2xl text-white/90 mb-12 max-w-2xl mx-auto font-medium">
-            Reserve your seat to learn how teams automate their full growth pipeline.
-          </p>
-          <div className="flex flex-col sm:flex-row gap-5 justify-center">
-            <Link
-              to="/contact"
-              className="inline-flex items-center justify-center gap-2 rounded-xl border-2 border-white/30 bg-white/10 backdrop-blur-sm text-white px-10 py-5 text-lg font-bold hover:bg-white/20 hover:border-white/50 transition"
-            >
-              <ChatBubbleLeftRightIcon className="h-5 w-5" />
-              Reserve seat
-            </Link>
+          <div className="flex justify-center mt-10">
             <a
-              href="#articles"
+              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" />
-              Browse articles
+              Start for $1
             </a>
           </div>
         </div>