v1.6.1 release: Update docs, marketing pages with 8-stage pipeline

- Bump version to 1.6.1 in CHANGELOG.md and docs/INDEX.md - Add detailed v1.6.1 changelog for email system (SMTP, auth flows, templates) - Update marketing pages (Home, Product, Pricing) with accurate 8-stage pipeline - Fix automation handoff count (7 handoffs for 8 stages) - Update feature matrix in Pricing for image providers - Add visual pipeline components and stage descriptions - Sync marketing content with current codebase architecture
2026-01-08 07:45:35 +00:00
parent d4ecddba22
commit 4e9f2d9dbc
6 changed files with 1056 additions and 517 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,6 @@
 # IGNY8 Change Log

-**Current Version:** 1.6.0  
+**Current Version:** 1.6.1
 **Last Updated:** January 8, 2026

 ---
@@ -9,6 +9,7 @@

 | Version | Date | Summary |
 |---------|------|---------|
+| 1.6.1 | Jan 8, 2026 | **Email System** - SMTP configuration, email templates, password reset flow, email verification, unsubscribe functionality |
 | 1.6.0 | Jan 8, 2026 | **Major** - Payment System Refactor Complete: Stripe, PayPal, Bank Transfer flows finalized; Simplified signup (no payment redirect); Country-based payment rules; Webhook security; PDF invoices |
 | 1.5.0 | *Planned* | Image Generation System Overhaul, Quality Tier Refinements, Credit Service Enhancements |
 | 1.4.0 | Jan 5, 2026 | **Major** - AI Model Architecture Overhaul, IntegrationProvider Model, AIModelConfig with Credit System, SystemAISettings, Django Admin Reorganization |
@@ -37,6 +38,162 @@

 ---

+## v1.6.1 - January 8, 2026
+
+### Email System Implementation
+
+This release implements a comprehensive email system with SMTP configuration, customizable email templates, and user authentication flows including password reset, email verification, and unsubscribe functionality.
+
+---
+
+### 📧 SMTP Configuration & Admin
+
+**New Models:**
+- `EmailSettings` - SMTP configuration model with server settings
+  - Fields: `smtp_host`, `smtp_port`, `smtp_username`, `smtp_password`
+  - TLS/SSL configuration options
+  - Default sender email and name
+  - Test email functionality from admin
+
+**Django Admin Integration:**
+- Custom admin panel for email settings (`email_admin.py`)
+- Test email sending directly from admin interface
+- Custom admin templates:
+  - `admin/system/emailsettings/change_form.html` - Settings form with test button
+  - `admin/system/emailsettings/test_email.html` - Test email confirmation page
+
+**Migration:**
+- `0021_add_smtp_email_settings.py` - Creates EmailSettings table
+
+---
+
+### 🔐 Authentication Flows
+
+**Password Reset Flow:**
+- `ForgotPassword.tsx` - Email submission form for password reset requests
+- `ResetPassword.tsx` - Token-based password reset form
+- Backend endpoints integrated with email service
+- Secure token generation and validation
+
+**Email Verification:**
+- `VerifyEmail.tsx` - Email verification page for new users
+- Token-based verification flow
+- Success/error state handling
+- Auto-redirect after verification
+
+**Unsubscribe:**
+- `Unsubscribe.tsx` - One-click email unsubscribe page
+- Token-based unsubscribe for security
+- Confirmation messaging
+
+---
+
+### 📨 Email Service Enhancements
+
+**Email Service Updates** (`email_service.py`):
+- SMTP-based email sending with configurable settings
+- Support for HTML email templates
+- Template rendering with dynamic context
+- Error handling and logging
+- Integration with authentication views
+
+**Email Templates Updated:**
+- `emails/base.html` - Enhanced base template (126+ lines updated)
+- `emails/email_verification.html` - Verification email template
+- `emails/password_reset.html` - Password reset email template
+- `emails/welcome.html` - Welcome email for new users
+- `emails/low_credits.html` - Low credit warning email
+- `emails/payment_approved.html` - Payment approval notification
+- `emails/payment_confirmation.html` - Payment confirmation
+- `emails/payment_failed.html` - Payment failure notification
+- `emails/payment_rejected.html` - Payment rejection notification
+- `emails/refund_notification.html` - Refund notification
+- `emails/subscription_activated.html` - Subscription activation
+- `emails/subscription_renewal.html` - Subscription renewal reminder
+
+---
+
+### 🎨 Frontend Pages
+
+**New Pages:**
+| Route | Component | Description |
+|-------|-----------|-------------|
+| `/forgot-password` | `ForgotPassword.tsx` | Password reset request form |
+| `/reset-password` | `ResetPassword.tsx` | Password reset with token |
+| `/verify-email` | `VerifyEmail.tsx` | Email verification handler |
+| `/unsubscribe` | `Unsubscribe.tsx` | Email unsubscribe page |
+
+**Route Updates:**
+- Added new routes to `App.tsx` (12+ lines)
+- Authentication URL patterns in `auth/urls.py` (209+ lines)
+
+---
+
+### 📚 Documentation Updates
+
+**Django Admin Access Guide:**
+- Updated `docs/90-REFERENCE/DJANGO-ADMIN-ACCESS-GUIDE.md` (104+ lines added)
+- Added email settings administration documentation
+- Test email procedures documented
+
+**Legal Pages:**
+- Minor updates to `Privacy.tsx` and `Terms.tsx`
+
+---
+
+### 🗄️ Database Changes
+
+**New Migration:**
+- `0020_add_email_models.py` - Email models and templates (93 lines)
+- `0021_add_smtp_email_settings.py` - SMTP settings model (53 lines)
+
+**New Models:**
+- `EmailSettings` - SMTP configuration
+- `EmailTemplate` - Customizable email templates (292 lines in `email_models.py`)
+
+---
+
+### 📦 Files Changed Summary
+
+**Backend Files (7):**
+| File | Changes |
+|------|---------|
+| `billing/services/email_service.py` | +427 lines - Complete email service implementation |
+| `modules/system/email_admin.py` | +448 lines - Django admin for email management |
+| `modules/system/email_models.py` | +338 lines - Email settings and template models |
+| `auth/views.py` | +17 lines - Password reset and verification views |
+| `auth/urls.py` | +209 lines - Authentication URL patterns |
+| `billing/views/paypal_views.py` | +26 lines - Email notification integration |
+| `billing/views/stripe_views.py` | +21 lines - Email notification integration |
+
+**Frontend Files (5):**
+| File | Changes |
+|------|---------|
+| `pages/AuthPages/ForgotPassword.tsx` | NEW - 177 lines |
+| `pages/AuthPages/ResetPassword.tsx` | NEW/Updated - 350 lines |
+| `pages/AuthPages/VerifyEmail.tsx` | NEW - 220 lines |
+| `pages/AuthPages/Unsubscribe.tsx` | NEW - 83 lines |
+| `App.tsx` | +12 lines - New route definitions |
+
+**Template Files (13):**
+- All email templates in `templates/emails/` updated for consistency
+
+**Admin Templates (2):**
+- `admin/system/emailsettings/change_form.html` - 15 lines
+- `admin/system/emailsettings/test_email.html` - 97 lines
+- `admin/system/emailtemplate/test_email.html` - 78 lines
+
+---
+
+### Git Reference
+```bash
+# Commits in this release:
+d4ecddba - SMTP and other email related settings
+3651ee9e - Email Configs & setup
+```
+
+---
+
 ## v1.6.0 - January 8, 2026

 ### Major Release: Payment System Refactor Complete
--- a/docs/INDEX.md
+++ b/docs/INDEX.md
@@ -1,6 +1,6 @@
 # IGNY8 Technical Documentation

-**Version:** 1.6.0  
+**Version:** 1.6.1
 **Last Updated:** January 8, 2026  
 **Purpose:** Complete technical reference for the IGNY8 AI content platform

--- a/frontend/src/marketing/pages/Home.tsx
+++ b/frontend/src/marketing/pages/Home.tsx
@@ -12,6 +12,10 @@ import {
  ArrowRightIcon,
  RocketLaunchIcon,
  ChatBubbleLeftRightIcon,
+  ClipboardDocumentCheckIcon,
+  CheckBadgeIcon,
+  GlobeAltIcon,
+  CalendarDaysIcon,
 } from "@heroicons/react/24/outline";
 import { testimonials } from "../data/testimonials";
 import SEO from "../components/SEO";
@@ -41,25 +45,27 @@ const Home: React.FC = () => {
    );
  };

+  // 8-Stage Content Pipeline - matches current implementation
  const workflowSteps = [
-    { name: "Keywords", icon: ListBulletIcon, color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]" },
-    { name: "Clusters", icon: UserGroupIcon, color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]" },
-    { name: "Ideas", icon: LightBulbIcon, color: "from-[var(--color-warning)] to-[var(--color-warning-dark)]" },
-    { name: "Tasks", icon: DocumentTextIcon, color: "from-[var(--color-success)] to-[var(--color-success-dark)]" },
-    { name: "Content", icon: SparklesIcon, color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]" },
-    { name: "Images", icon: PhotoIcon, color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]" },
-    { name: "Publish", icon: BoltIcon, color: "from-[var(--color-success)] to-[var(--color-success-dark)]" },
+    { name: "Keywords", icon: ListBulletIcon, color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]", description: "Import & organize" },
+    { name: "Clusters", icon: UserGroupIcon, color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]", description: "Group related terms" },
+    { name: "Ideas", icon: LightBulbIcon, color: "from-[var(--color-warning)] to-[var(--color-warning-dark)]", description: "Generate concepts" },
+    { name: "Tasks", icon: ClipboardDocumentCheckIcon, color: "from-[var(--color-success)] to-[var(--color-success-dark)]", description: "Create briefs" },
+    { name: "Content", icon: DocumentTextIcon, color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]", description: "AI writing" },
+    { name: "Images", icon: PhotoIcon, color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]", description: "Visual generation" },
+    { name: "Review", icon: CheckBadgeIcon, color: "from-[var(--color-warning)] to-[var(--color-warning-dark)]", description: "Quality check" },
+    { name: "Published", icon: GlobeAltIcon, color: "from-[var(--color-success)] to-[var(--color-success-dark)]", description: "Go live" },
  ];

  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.",
+      subtitle: "Keyword → Cluster → Ideas Engine (Stages 1-3)",
+      description: "Import keywords via CSV or manual entry, organize them into topical clusters using AI-powered grouping, and generate content ideas with AI scoring and prioritization.",
      bullets: [
-        "Living keyword database with real-time search volumes",
-        "AI-powered clustering for topical authority mapping",
-        "Priority scoring based on opportunity and competition",
+        "CSV import or manual keyword entry with bulk operations",
+        "AI-powered semantic clustering for topical authority",
+        "Idea generation with scoring and brief creation",
      ],
      icon: ChartBarIcon,
      color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]",
@@ -69,12 +75,12 @@ const Home: React.FC = () => {
    },
    {
      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.",
+      subtitle: "Tasks → Content → Images → Review (Stages 4-7)",
+      description: "Transform ideas into detailed content briefs, generate AI-powered articles with multiple provider options, create images with DALL-E 3, Runware, or Bria, and review content before publishing.",
      bullets: [
-        "Context-aware content generation with SERP analysis",
-        "Brand voice and tone controls for consistency",
-        "Collaborative editing and approval workflows",
+        "Multi-provider AI writing: OpenAI GPT-4o & Anthropic Claude",
+        "Image generation: DALL-E 3, Runware, Bria with style presets",
+        "Rich text editor with SEO optimization and review workflow",
      ],
      icon: SparklesIcon,
      color: "from-[var(--color-success)] to-[var(--color-success-dark)]",
@@ -83,30 +89,30 @@ const Home: React.FC = () => {
      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.",
+      title: "Publisher",
+      subtitle: "Calendar & WordPress Integration (Stage 8)",
+      description: "Schedule content on a visual calendar, connect to WordPress via the IGNY8 WP Bridge plugin, and publish directly with SEO metadata, categories, and featured images.",
      bullets: [
-        "Centralized prompt library and brand playbooks",
-        "Author voice templates and style guides",
-        "Automated guideline enforcement across all content",
+        "Visual calendar with drag-and-drop scheduling",
+        "One-click WordPress publishing via WP Bridge plugin",
+        "Automatic SEO metadata, categories, and featured images",
      ],
-      icon: BoltIcon,
+      icon: CalendarDaysIcon,
      color: "from-[var(--color-warning)] to-[var(--color-warning-dark)]",
-      image: "thinker-dashboard.png",
-      link: "/product#thinker",
+      image: "publisher-dashboard.png",
+      link: "/product#publisher",
      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.",
+      subtitle: "7-Stage Handoff Engine",
+      description: "Orchestrate the entire 8-stage pipeline with automated handoffs. Configure triggers, batch sizes, and scheduling to run your content factory on autopilot.",
      bullets: [
-        "End-to-end workflow automation with custom triggers",
-        "Multi-step handoffs between modules",
-        "Real-time monitoring and error handling",
+        "7 configurable automation stages between pipeline steps",
+        "Customizable batch sizes, limits, and scheduling",
+        "Real-time progress monitoring and error handling",
      ],
-      icon: PhotoIcon,
+      icon: BoltIcon,
      color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]",
      image: "automation-dashboard.png",
      link: "/product#automation",
@@ -211,26 +217,31 @@ const Home: React.FC = () => {
              How Igny8 Works
            </h2>
            <p className="text-lg text-gray-600 max-w-2xl mx-auto">
-              A seamless pipeline from keyword discovery to published content
+              An 8-stage pipeline from keyword discovery to WordPress publishing
            </p>
          </div>
          
-          {/* Horizontal Timeline */}
+          {/* 8-Stage 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-[var(--color-primary)] via-[var(--color-purple)] via-[var(--color-warning)] via-[var(--color-success)] to-[var(--color-primary)] opacity-25 hidden md:block shadow-lg shadow-[var(--color-primary)]/20" />
-            
-            <div className="grid grid-cols-2 md:grid-cols-7 gap-6 md:gap-4">
+            <div className="absolute top-12 left-0 right-0 h-1 bg-gradient-to-r from-[var(--color-primary)] via-[var(--color-purple)] via-[var(--color-warning)] via-[var(--color-success)] to-[var(--color-primary)] opacity-25 hidden md:block shadow-lg shadow-[var(--color-primary)]/20" />
+
+            <div className="grid grid-cols-2 sm:grid-cols-4 md:grid-cols-8 gap-4 md:gap-3">
              {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" />
+                  <div key={step.name} className="flex flex-col items-center gap-2">
+                    <div className={`relative size-20 md: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-8 w-8 md:h-10 md:w-10" />
+                      {/* Stage number badge */}
+                      <div className="absolute -top-1 -right-1 size-6 rounded-full bg-white text-gray-900 text-xs font-bold flex items-center justify-center shadow-md">
+                        {index + 1}
+                      </div>
                      {/* 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-gray-900 text-center">{step.name}</span>
+                    <span className="text-xs text-gray-500 text-center hidden md:block">{step.description}</span>
                  </div>
                );
              })}
@@ -334,42 +345,46 @@ const Home: React.FC = () => {
                </h2>
              </div>
              <p className="text-xl text-gray-200 mb-8 leading-relaxed font-medium">
-                Orchestrate your entire content pipeline with intelligent handoffs between modules. Set it once, and watch it execute.
+                7 automated handoffs orchestrate your entire 8-stage content pipeline. Configure batch sizes, scheduling, and triggers to run your content factory on autopilot.
              </p>
-              
-              {/* Automation Timeline with neon glows */}
-              <div className="space-y-6 mb-8">
+
+              {/* 7 Automation Handoffs with neon glows */}
+              <div className="space-y-4 mb-8">
                {[
-                  { from: "Keywords", to: "Clusters", icon: "→", color: "from-[var(--color-primary)] to-[var(--color-purple)]", glow: "shadow-[var(--color-primary)]/50" },
-                  { from: "Clusters", to: "Ideas", icon: "→", color: "from-[var(--color-purple)] to-[var(--color-warning)]", glow: "shadow-[var(--color-purple)]/50" },
-                  { from: "Ideas", to: "Tasks", icon: "→", color: "from-[var(--color-warning)] to-[var(--color-success)]", glow: "shadow-[var(--color-warning)]/50" },
-                  { from: "Tasks", to: "Content", icon: "→", color: "from-[var(--color-success)] to-[var(--color-primary)]", glow: "shadow-[var(--color-success)]/50" },
-                  { from: "Content", to: "Images", icon: "→", color: "from-[var(--color-primary)] to-[var(--color-purple)]", glow: "shadow-[var(--color-primary)]/50" },
-                  { from: "Images", to: "Publish", icon: "→", color: "from-[var(--color-purple)] to-[var(--color-success)]", glow: "shadow-[var(--color-purple)]/50" },
+                  { from: "Keywords", to: "Clusters", stage: 1, color: "from-[var(--color-primary)] to-[var(--color-purple)]", glow: "shadow-[var(--color-primary)]/50" },
+                  { from: "Clusters", to: "Ideas", stage: 2, color: "from-[var(--color-purple)] to-[var(--color-warning)]", glow: "shadow-[var(--color-purple)]/50" },
+                  { from: "Ideas", to: "Tasks", stage: 3, color: "from-[var(--color-warning)] to-[var(--color-success)]", glow: "shadow-[var(--color-warning)]/50" },
+                  { from: "Tasks", to: "Content", stage: 4, color: "from-[var(--color-success)] to-[var(--color-primary)]", glow: "shadow-[var(--color-success)]/50" },
+                  { from: "Content", to: "Images", stage: 5, color: "from-[var(--color-primary)] to-[var(--color-purple)]", glow: "shadow-[var(--color-primary)]/50" },
+                  { from: "Images", to: "Review", stage: 6, color: "from-[var(--color-purple)] to-[var(--color-warning)]", glow: "shadow-[var(--color-purple)]/50" },
+                  { from: "Review", to: "Published", stage: 7, color: "from-[var(--color-warning)] to-[var(--color-success)]", glow: "shadow-[var(--color-warning)]/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}
+                  <div key={i} className="flex items-center gap-3">
+                    <div className={`relative w-10 h-10 rounded-lg bg-gradient-to-br ${handoff.color} flex items-center justify-center text-white text-sm font-bold shadow-lg ${handoff.glow} group`}>
+                      {handoff.stage}
                      {/* 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 className={`absolute -inset-1 bg-gradient-to-br ${handoff.color} rounded-lg 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-gray-300">Automated handoff with quality checks</div>
+                      <div className="text-white font-semibold">{handoff.from} → {handoff.to}</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-gray-400">Completion Rate</div>
+              <div className="grid grid-cols-3 gap-3">
+                <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-3">
+                  <div className="text-2xl font-bold text-white mb-1">8</div>
+                  <div className="text-xs text-gray-400">Pipeline Stages</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-gray-400">Faster Velocity</div>
+                <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-3">
+                  <div className="text-2xl font-bold text-white mb-1">7</div>
+                  <div className="text-xs text-gray-400">Auto Handoffs</div>
+                </div>
+                <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-3">
+                  <div className="text-2xl font-bold text-white mb-1">5</div>
+                  <div className="text-xs text-gray-400">AI Providers</div>
                </div>
              </div>
            </div>
--- a/frontend/src/marketing/pages/Pricing.tsx
+++ b/frontend/src/marketing/pages/Pricing.tsx
@@ -78,11 +78,12 @@ const Pricing: React.FC = () => {
    { feature: "AI Image Generation", starter: "300 basic / 60 premium", growth: "900 basic / 180 premium", scale: "1,500 basic / 300 premium" },
    { feature: "Featured Images", starter: true, growth: true, scale: true },
    { feature: "In-Article Images", starter: true, growth: true, scale: true },
-    { feature: "Dual AI Providers", starter: "Basic + Premium", growth: "Basic + Premium", scale: "Basic + Premium" },
+    { feature: "AI Providers", starter: "DALL-E 3, Runware, Bria", growth: "DALL-E 3, Runware, Bria", scale: "DALL-E 3, Runware, Bria" },
+    { feature: "Credits: Basic Images", starter: "5 per image", growth: "5 per image", scale: "5 per image" },
+    { feature: "Credits: Premium Images", starter: "25 per image", growth: "25 per image", scale: "25 per image" },
    { feature: "Multiple Image Sizes", starter: true, growth: true, scale: true },
    { feature: "Automatic Alt Text", starter: true, growth: true, scale: true },
-    { feature: "Smart Image Prompts", starter: "300", growth: "900", scale: "1,500" },
-    { feature: "Advanced Image Controls", starter: true, growth: true, scale: true },
+    { feature: "Style Presets", starter: true, growth: true, scale: true },
    
    { feature: "AUTOMATION PIPELINE", starter: null, growth: null, scale: null, isCategory: true },
    { feature: "7-Stage Automation Pipeline", starter: true, growth: true, scale: true },
--- a/frontend/src/marketing/pages/Product.tsx
+++ b/frontend/src/marketing/pages/Product.tsx
@@ -12,6 +12,10 @@ import {
  ArrowRightIcon,
  RocketLaunchIcon,
  ChatBubbleLeftRightIcon,
+  ClipboardDocumentCheckIcon,
+  CheckBadgeIcon,
+  GlobeAltIcon,
+  CalendarDaysIcon,
 } from "@heroicons/react/24/outline";
 import { testimonials } from "../data/testimonials";
 import SEO from "../components/SEO";
@@ -41,26 +45,29 @@ const Product: React.FC = () => {
    );
  };

+  // 8-Stage Content Pipeline - matches current implementation
  const workflowSteps = [
-    { name: "Keywords", icon: ListBulletIcon, color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]" },
-    { name: "Clusters", icon: UserGroupIcon, color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]" },
-    { name: "Ideas", icon: LightBulbIcon, color: "from-[var(--color-warning)] to-[var(--color-warning-dark)]" },
-    { name: "Tasks", icon: DocumentTextIcon, color: "from-[var(--color-success)] to-[var(--color-success-dark)]" },
-    { name: "Content", icon: SparklesIcon, color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]" },
-    { name: "Publish", icon: BoltIcon, color: "from-[var(--color-success)] to-[var(--color-success-dark)]" },
+    { name: "Keywords", icon: ListBulletIcon, color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]", description: "Import & organize" },
+    { name: "Clusters", icon: UserGroupIcon, color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]", description: "Group related terms" },
+    { name: "Ideas", icon: LightBulbIcon, color: "from-[var(--color-warning)] to-[var(--color-warning-dark)]", description: "Generate concepts" },
+    { name: "Tasks", icon: ClipboardDocumentCheckIcon, color: "from-[var(--color-success)] to-[var(--color-success-dark)]", description: "Create briefs" },
+    { name: "Content", icon: DocumentTextIcon, color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]", description: "AI writing" },
+    { name: "Images", icon: PhotoIcon, color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]", description: "Visual generation" },
+    { name: "Review", icon: CheckBadgeIcon, color: "from-[var(--color-warning)] to-[var(--color-warning-dark)]", description: "Quality check" },
+    { name: "Published", icon: GlobeAltIcon, color: "from-[var(--color-success)] to-[var(--color-success-dark)]", description: "Go live" },
  ];

  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.",
+      subtitle: "Keyword → Cluster → Ideas Engine (Stages 1-3)",
+      description: "Import keywords via CSV or manual entry, organize them into topical clusters using AI-powered semantic grouping, and generate content ideas with AI scoring and prioritization. Build your content foundation systematically.",
      features: [
-        "Global keyword database with opportunity scoring, SERP overlays, and traffic estimates",
+        "CSV import or manual keyword entry with bulk operations and tagging",
        "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",
+        "Idea generation with AI scoring based on search intent and opportunity",
+        "Brief creation workflow to transform ideas into actionable content plans",
+        "Pipeline view showing content flow from keywords through to publication",
      ],
      icon: ChartBarIcon,
      color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]",
@@ -69,14 +76,14 @@ const Product: React.FC = () => {
    },
    {
      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.",
+      subtitle: "Tasks → Content → Images → Review (Stages 4-7)",
+      description: "Transform ideas into detailed content briefs, generate AI-powered articles with multiple provider options, create images with DALL-E 3, Runware, or Bria, and review content before publishing.",
      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",
+        "Multi-provider AI writing: OpenAI GPT-4o and Anthropic Claude support",
+        "Image generation with DALL-E 3, Runware, and Bria AI providers",
+        "Rich text editor with formatting, SEO metadata, and preview modes",
+        "Token-based credit system for text, fixed credits for images (5 basic, 25 premium)",
+        "Review workflow with quality checks before moving to publication",
      ],
      icon: SparklesIcon,
      color: "from-[var(--color-success)] to-[var(--color-success-dark)]",
@@ -84,33 +91,33 @@ const Product: React.FC = () => {
      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.",
+      title: "Publisher",
+      subtitle: "Calendar & WordPress Integration (Stage 8)",
+      description: "Schedule content on a visual calendar, connect to WordPress via the IGNY8 WP Bridge plugin, and publish directly with SEO metadata, categories, tags, and featured images automatically configured.",
      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",
+        "Visual calendar with drag-and-drop scheduling for content planning",
+        "One-click WordPress publishing via the IGNY8 WP Bridge plugin",
+        "Automatic SEO metadata, categories, tags, and featured image assignment",
+        "Multi-site WordPress management for agencies and publishers",
+        "Publication status tracking with draft, scheduled, and published states",
      ],
-      icon: BoltIcon,
+      icon: CalendarDaysIcon,
      color: "from-[var(--color-warning)] to-[var(--color-warning-dark)]",
-      image: "thinker-dashboard.png",
-      link: "#thinker",
+      image: "publisher-dashboard.png",
+      link: "#publisher",
    },
    {
      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.",
+      subtitle: "7-Stage Handoff Engine",
+      description: "Orchestrate the entire 8-stage pipeline with 7 automated handoffs. Configure triggers, batch sizes, and scheduling to run your content factory on autopilot with real-time progress monitoring.",
      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",
+        "7 configurable automation stages: Keywords→Clusters→Ideas→Tasks→Content→Images→Review→Published",
+        "Customizable batch sizes, limits, and scheduling for each handoff",
+        "Real-time progress monitoring with success/error tracking",
+        "Enable/disable individual stages for hybrid manual-auto workflows",
+        "Automation dashboard with pipeline visualization and controls",
      ],
-      icon: PhotoIcon,
+      icon: BoltIcon,
      color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]",
      image: "automation-dashboard.png",
      link: "#automation",
@@ -153,29 +160,34 @@ const Product: React.FC = () => {
        <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-gray-900 mb-4">
-              How the IGNY8 Engine Works
+              The 8-Stage Content Pipeline
            </h2>
            <p className="text-lg text-gray-600 max-w-2xl mx-auto">
-              A seamless pipeline from keyword discovery to published content
+              From keyword discovery to WordPress publishing in one unified workflow
            </p>
          </div>
-          
-          {/* Horizontal Timeline */}
+
+          {/* 8-Stage 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-[var(--color-primary)] via-[var(--color-purple)] via-[var(--color-warning)] via-[var(--color-success)] to-[var(--color-primary)] opacity-25 hidden md:block shadow-lg shadow-[var(--color-primary)]/20" />
-            
-            <div className="grid grid-cols-2 md:grid-cols-6 gap-6 md:gap-4">
+            <div className="absolute top-12 left-0 right-0 h-1 bg-gradient-to-r from-[var(--color-primary)] via-[var(--color-purple)] via-[var(--color-warning)] via-[var(--color-success)] to-[var(--color-primary)] opacity-25 hidden md:block shadow-lg shadow-[var(--color-primary)]/20" />
+
+            <div className="grid grid-cols-2 sm:grid-cols-4 md:grid-cols-8 gap-4 md:gap-3">
              {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" />
+                  <div key={step.name} className="flex flex-col items-center gap-2">
+                    <div className={`relative size-20 md: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-8 w-8 md:h-10 md:w-10" />
+                      {/* Stage number badge */}
+                      <div className="absolute -top-1 -right-1 size-6 rounded-full bg-white text-gray-900 text-xs font-bold flex items-center justify-center shadow-md">
+                        {index + 1}
+                      </div>
                      {/* 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-gray-900 text-center">{step.name}</span>
+                    <span className="text-xs text-gray-500 text-center hidden md:block">{step.description}</span>
                  </div>
                );
              })}
@@ -279,28 +291,28 @@ const Product: React.FC = () => {
                </h2>
              </div>
              <p className="text-xl text-gray-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.
+                7 automated handoffs orchestrate your entire 8-stage content pipeline. Configure batch sizes, scheduling, and triggers to run your content factory on autopilot.
              </p>
-              
-              {/* Automation Timeline with neon glows */}
-              <div className="space-y-6">
+
+              {/* 7 Automation Handoffs with neon glows */}
+              <div className="space-y-4">
                {[
-                  { from: "Keywords", to: "Clusters", icon: "→", color: "from-[var(--color-primary)] to-[var(--color-purple)]", glow: "shadow-[var(--color-primary)]/50" },
-                  { from: "Clusters", to: "Ideas", icon: "→", color: "from-[var(--color-purple)] to-[var(--color-warning)]", glow: "shadow-[var(--color-purple)]/50" },
-                  { from: "Ideas", to: "Tasks", icon: "→", color: "from-[var(--color-warning)] to-[var(--color-success)]", glow: "shadow-[var(--color-warning)]/50" },
-                  { from: "Tasks", to: "Content", icon: "→", color: "from-[var(--color-success)] to-[var(--color-primary)]", glow: "shadow-[var(--color-success)]/50" },
-                  { from: "Content", to: "Images", icon: "→", color: "from-[var(--color-primary)] to-[var(--color-purple)]", glow: "shadow-[var(--color-primary)]/50" },
-                  { from: "Images", to: "Publish", icon: "→", color: "from-[var(--color-purple)] to-[var(--color-success)]", glow: "shadow-[var(--color-purple)]/50" },
+                  { from: "Keywords", to: "Clusters", stage: 1, color: "from-[var(--color-primary)] to-[var(--color-purple)]", glow: "shadow-[var(--color-primary)]/50" },
+                  { from: "Clusters", to: "Ideas", stage: 2, color: "from-[var(--color-purple)] to-[var(--color-warning)]", glow: "shadow-[var(--color-purple)]/50" },
+                  { from: "Ideas", to: "Tasks", stage: 3, color: "from-[var(--color-warning)] to-[var(--color-success)]", glow: "shadow-[var(--color-warning)]/50" },
+                  { from: "Tasks", to: "Content", stage: 4, color: "from-[var(--color-success)] to-[var(--color-primary)]", glow: "shadow-[var(--color-success)]/50" },
+                  { from: "Content", to: "Images", stage: 5, color: "from-[var(--color-primary)] to-[var(--color-purple)]", glow: "shadow-[var(--color-primary)]/50" },
+                  { from: "Images", to: "Review", stage: 6, color: "from-[var(--color-purple)] to-[var(--color-warning)]", glow: "shadow-[var(--color-purple)]/50" },
+                  { from: "Review", to: "Published", stage: 7, color: "from-[var(--color-warning)] to-[var(--color-success)]", glow: "shadow-[var(--color-warning)]/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}
+                  <div key={i} className="flex items-center gap-3">
+                    <div className={`relative w-10 h-10 rounded-lg bg-gradient-to-br ${handoff.color} flex items-center justify-center text-white text-sm font-bold shadow-lg ${handoff.glow} group`}>
+                      {handoff.stage}
                      {/* 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 className={`absolute -inset-1 bg-gradient-to-br ${handoff.color} rounded-lg 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-gray-300">Automated handoff with quality checks</div>
+                      <div className="text-white font-semibold">{handoff.from} → {handoff.to}</div>
                    </div>
                  </div>
                ))}
@@ -328,17 +340,23 @@ const Product: React.FC = () => {
            </div>
          </div>

-          {/* 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-gray-400">Completion Rate</div>
-              <div className="text-xs text-gray-500 mt-2">Average automation success across all workflows</div>
+          {/* Platform Stats */}
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 max-w-4xl mx-auto">
+            <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-4 text-center">
+              <div className="text-3xl font-bold text-white mb-1">8</div>
+              <div className="text-xs text-gray-400">Pipeline Stages</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-gray-400">Faster Velocity</div>
-              <div className="text-xs text-gray-500 mt-2">Content creation speed compared to manual processes</div>
+            <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-4 text-center">
+              <div className="text-3xl font-bold text-white mb-1">7</div>
+              <div className="text-xs text-gray-400">Auto Handoffs</div>
+            </div>
+            <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-4 text-center">
+              <div className="text-3xl font-bold text-white mb-1">5</div>
+              <div className="text-xs text-gray-400">AI Providers</div>
+            </div>
+            <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-4 text-center">
+              <div className="text-3xl font-bold text-white mb-1">3</div>
+              <div className="text-xs text-gray-400">Payment Methods</div>
            </div>
          </div>
        </div>
--- a/frontend/src/pages/Help/Help.tsx
+++ b/frontend/src/pages/Help/Help.tsx