salman/igny8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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
This commit is contained in:
IGNY8 VPS (Salman)
2026-01-08 07:45:35 +00:00
parent d4ecddba22
commit 4e9f2d9dbc
6 changed files with 1056 additions and 517 deletions
Download Patch File Download Diff File Expand all files Collapse all files

159
CHANGELOG.md
View File

@@ -1,6 +1,6 @@
# IGNY8 Change Log # IGNY8 Change Log
**Current Version:** 1.6.0 **Current Version:** 1.6.1
**Last Updated:** January 8, 2026 **Last Updated:** January 8, 2026
--- ---
@@ -9,6 +9,7 @@
| Version | Date | Summary | | 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.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.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 | | 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 ## v1.6.0 - January 8, 2026
### Major Release: Payment System Refactor Complete ### Major Release: Payment System Refactor Complete

2
docs/INDEX.md
View File

@@ -1,6 +1,6 @@
# IGNY8 Technical Documentation # IGNY8 Technical Documentation
**Version:** 1.6.0 **Version:** 1.6.1
**Last Updated:** January 8, 2026 **Last Updated:** January 8, 2026
**Purpose:** Complete technical reference for the IGNY8 AI content platform **Purpose:** Complete technical reference for the IGNY8 AI content platform

137
frontend/src/marketing/pages/Home.tsx
View File

@@ -12,6 +12,10 @@ import {
ArrowRightIcon, ArrowRightIcon,
RocketLaunchIcon, RocketLaunchIcon,
ChatBubbleLeftRightIcon, ChatBubbleLeftRightIcon,
ClipboardDocumentCheckIcon,
CheckBadgeIcon,
GlobeAltIcon,
CalendarDaysIcon,
} from "@heroicons/react/24/outline"; } from "@heroicons/react/24/outline";
import { testimonials } from "../data/testimonials"; import { testimonials } from "../data/testimonials";
import SEO from "../components/SEO"; import SEO from "../components/SEO";
@@ -41,25 +45,27 @@ const Home: React.FC = () => {
); );
}; };
// 8-Stage Content Pipeline - matches current implementation
const workflowSteps = [ const workflowSteps = [
{ name: "Keywords", icon: ListBulletIcon, color: "from-[var(--color-primary)] to-[var(--color-primary-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)]" }, { 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)]" }, { name: "Ideas", icon: LightBulbIcon, color: "from-[var(--color-warning)] to-[var(--color-warning-dark)]", description: "Generate concepts" },
{ name: "Tasks", icon: DocumentTextIcon, color: "from-[var(--color-success)] to-[var(--color-success-dark)]" }, { name: "Tasks", icon: ClipboardDocumentCheckIcon, color: "from-[var(--color-success)] to-[var(--color-success-dark)]", description: "Create briefs" },
{ name: "Content", icon: SparklesIcon, color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]" }, { 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)]" }, { name: "Images", icon: PhotoIcon, color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]", description: "Visual generation" },
{ name: "Publish", icon: BoltIcon, color: "from-[var(--color-success)] to-[var(--color-success-dark)]" }, { 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 = [ const productModules = [
{ {
title: "Planner", title: "Planner",
subtitle: "Market intelligence and keyword → cluster engine", subtitle: "Keyword → Cluster → Ideas Engine (Stages 1-3)",
description: "Tap into a living keyword database, cluster at scale, and prioritize opportunities with AI scoring. Build topical maps in minutes, not days.", 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: [ bullets: [
"Living keyword database with real-time search volumes", "CSV import or manual keyword entry with bulk operations",
"AI-powered clustering for topical authority mapping", "AI-powered semantic clustering for topical authority",
"Priority scoring based on opportunity and competition", "Idea generation with scoring and brief creation",
], ],
icon: ChartBarIcon, icon: ChartBarIcon,
color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]", color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]",
@@ -69,12 +75,12 @@ const Home: React.FC = () => {
}, },
{ {
title: "Writer", title: "Writer",
subtitle: "AI writing system with brand rules and editorial logic", subtitle: "Tasks → Content → Images → Review (Stages 4-7)",
description: "Generate briefs, long-form articles, and on-brand messaging with contextual SERP data, tone controls, and collaboration tools.", 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: [ bullets: [
"Context-aware content generation with SERP analysis", "Multi-provider AI writing: OpenAI GPT-4o & Anthropic Claude",
"Brand voice and tone controls for consistency", "Image generation: DALL-E 3, Runware, Bria with style presets",
"Collaborative editing and approval workflows", "Rich text editor with SEO optimization and review workflow",
], ],
icon: SparklesIcon, icon: SparklesIcon,
color: "from-[var(--color-success)] to-[var(--color-success-dark)]", color: "from-[var(--color-success)] to-[var(--color-success-dark)]",
@@ -83,30 +89,30 @@ const Home: React.FC = () => {
align: "right", align: "right",
}, },
{ {
title: "Thinker", title: "Publisher",
subtitle: "Strategic OS and thinking engine", subtitle: "Calendar & WordPress Integration (Stage 8)",
description: "Centralize prompts, author voices, and brand playbooks. Sync guidelines directly into every piece of content Igny8 creates.", 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: [ bullets: [
"Centralized prompt library and brand playbooks", "Visual calendar with drag-and-drop scheduling",
"Author voice templates and style guides", "One-click WordPress publishing via WP Bridge plugin",
"Automated guideline enforcement across all content", "Automatic SEO metadata, categories, and featured images",
], ],
icon: BoltIcon, icon: CalendarDaysIcon,
color: "from-[var(--color-warning)] to-[var(--color-warning-dark)]", color: "from-[var(--color-warning)] to-[var(--color-warning-dark)]",
image: "thinker-dashboard.png", image: "publisher-dashboard.png",
link: "/product#thinker", link: "/product#publisher",
align: "left", align: "left",
}, },
{ {
title: "Automation", title: "Automation",
subtitle: "Always-on execution engine", subtitle: "7-Stage Handoff Engine",
description: "Orchestrate keywords to ideas, tasks to content, and assets to WordPress in automated cycles—customized to your cadence.", description: "Orchestrate the entire 8-stage pipeline with automated handoffs. Configure triggers, batch sizes, and scheduling to run your content factory on autopilot.",
bullets: [ bullets: [
"End-to-end workflow automation with custom triggers", "7 configurable automation stages between pipeline steps",
"Multi-step handoffs between modules", "Customizable batch sizes, limits, and scheduling",
"Real-time monitoring and error handling", "Real-time progress monitoring and error handling",
], ],
icon: PhotoIcon, icon: BoltIcon,
color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]", color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]",
image: "automation-dashboard.png", image: "automation-dashboard.png",
link: "/product#automation", link: "/product#automation",
@@ -211,26 +217,31 @@ const Home: React.FC = () => {
How Igny8 Works How Igny8 Works
</h2> </h2>
<p className="text-lg text-gray-600 max-w-2xl mx-auto"> <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> </p>
</div> </div>
{/* Horizontal Timeline */} {/* 8-Stage Horizontal Timeline */}
<div className="relative"> <div className="relative">
{/* Enhanced connecting line with shadow */} {/* 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="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 md:grid-cols-7 gap-6 md:gap-4"> <div className="grid grid-cols-2 sm:grid-cols-4 md:grid-cols-8 gap-4 md:gap-3">
{workflowSteps.map((step, index) => { {workflowSteps.map((step, index) => {
const Icon = step.icon; const Icon = step.icon;
return ( return (
<div key={step.name} className="flex flex-col items-center gap-3"> <div key={step.name} className="flex flex-col items-center gap-2">
<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`}> <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-12 w-12" /> <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 */} {/* 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 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> </div>
<span className="text-sm font-semibold text-gray-900 text-center">{step.name}</span> <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> </div>
); );
})} })}
@@ -334,42 +345,46 @@ const Home: React.FC = () => {
</h2> </h2>
</div> </div>
<p className="text-xl text-gray-200 mb-8 leading-relaxed font-medium"> <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> </p>
{/* Automation Timeline with neon glows */} {/* 7 Automation Handoffs with neon glows */}
<div className="space-y-6 mb-8"> <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: "Keywords", to: "Clusters", stage: 1, 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: "Clusters", to: "Ideas", stage: 2, 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: "Ideas", to: "Tasks", stage: 3, 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: "Tasks", to: "Content", stage: 4, 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: "Content", to: "Images", stage: 5, 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: "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) => ( ].map((handoff, i) => (
<div key={i} className="flex items-center gap-4"> <div key={i} className="flex items-center gap-3">
<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`}> <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.icon} {handoff.stage}
{/* Neon glow effect */} {/* 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>
<div className="flex-1"> <div className="flex-1">
<div className="text-white font-semibold text-lg">{handoff.from} → {handoff.to}</div> <div className="text-white font-semibold">{handoff.from} → {handoff.to}</div>
<div className="text-sm text-gray-300">Automated handoff with quality checks</div>
</div> </div>
</div> </div>
))} ))}
</div> </div>
{/* Metrics */} {/* Metrics */}
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-3 gap-3">
<div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-4"> <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-3">
<div className="text-3xl font-bold text-white mb-1">87%</div> <div className="text-2xl font-bold text-white mb-1">8</div>
<div className="text-sm text-gray-400">Completion Rate</div> <div className="text-xs text-gray-400">Pipeline Stages</div>
</div> </div>
<div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-4"> <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-3">
<div className="text-3xl font-bold text-white mb-1">6×</div> <div className="text-2xl font-bold text-white mb-1">7</div>
<div className="text-sm text-gray-400">Faster Velocity</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> </div>
</div> </div>

7
frontend/src/marketing/pages/Pricing.tsx
View File

@@ -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: "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: "Featured Images", starter: true, growth: true, scale: true },
{ feature: "In-Article 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: "Multiple Image Sizes", starter: true, growth: true, scale: true },
{ feature: "Automatic Alt Text", 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: "Style Presets", starter: true, growth: true, scale: true },
{ feature: "Advanced Image Controls", starter: true, growth: true, scale: true },
{ feature: "AUTOMATION PIPELINE", starter: null, growth: null, scale: null, isCategory: true }, { feature: "AUTOMATION PIPELINE", starter: null, growth: null, scale: null, isCategory: true },
{ feature: "7-Stage Automation Pipeline", starter: true, growth: true, scale: true }, { feature: "7-Stage Automation Pipeline", starter: true, growth: true, scale: true },

160
frontend/src/marketing/pages/Product.tsx
View File

@@ -12,6 +12,10 @@ import {
ArrowRightIcon, ArrowRightIcon,
RocketLaunchIcon, RocketLaunchIcon,
ChatBubbleLeftRightIcon, ChatBubbleLeftRightIcon,
ClipboardDocumentCheckIcon,
CheckBadgeIcon,
GlobeAltIcon,
CalendarDaysIcon,
} from "@heroicons/react/24/outline"; } from "@heroicons/react/24/outline";
import { testimonials } from "../data/testimonials"; import { testimonials } from "../data/testimonials";
import SEO from "../components/SEO"; import SEO from "../components/SEO";
@@ -41,26 +45,29 @@ const Product: React.FC = () => {
); );
}; };
// 8-Stage Content Pipeline - matches current implementation
const workflowSteps = [ const workflowSteps = [
{ name: "Keywords", icon: ListBulletIcon, color: "from-[var(--color-primary)] to-[var(--color-primary-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)]" }, { 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)]" }, { name: "Ideas", icon: LightBulbIcon, color: "from-[var(--color-warning)] to-[var(--color-warning-dark)]", description: "Generate concepts" },
{ name: "Tasks", icon: DocumentTextIcon, color: "from-[var(--color-success)] to-[var(--color-success-dark)]" }, { name: "Tasks", icon: ClipboardDocumentCheckIcon, color: "from-[var(--color-success)] to-[var(--color-success-dark)]", description: "Create briefs" },
{ name: "Content", icon: SparklesIcon, color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]" }, { name: "Content", icon: DocumentTextIcon, color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]", description: "AI writing" },
{ name: "Publish", icon: BoltIcon, color: "from-[var(--color-success)] to-[var(--color-success-dark)]" }, { 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 = [ const productModules = [
{ {
title: "Planner", title: "Planner",
subtitle: "Market intelligence and keyword → cluster engine", subtitle: "Keyword → Cluster → Ideas Engine (Stages 1-3)",
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.", 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: [ 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", "AI-powered semantic clustering that groups related keywords automatically",
"Drag-and-drop topical mapping with visual cluster organization", "Idea generation with AI scoring based on search intent and opportunity",
"Priority scoring based on opportunity, competition, and search intent", "Brief creation workflow to transform ideas into actionable content plans",
"Alerts for emerging opportunities, competitive gaps, and seasonality shifts", "Pipeline view showing content flow from keywords through to publication",
], ],
icon: ChartBarIcon, icon: ChartBarIcon,
color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]", color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]",
@@ -69,14 +76,14 @@ const Product: React.FC = () => {
}, },
{ {
title: "Writer", title: "Writer",
subtitle: "AI writing system with brand rules and editorial logic", subtitle: "Tasks → Content → Images → Review (Stages 4-7)",
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.", 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: [ features: [
"AI briefs with outlines, talking points, and internal link suggestions", "Multi-provider AI writing: OpenAI GPT-4o and Anthropic Claude support",
"Context-aware content generation with SERP analysis and competitor insights", "Image generation with DALL-E 3, Runware, and Bria AI providers",
"Long-form drafts aligned to your brand voice, compliance rules, and target SERP", "Rich text editor with formatting, SEO metadata, and preview modes",
"Brand voice and tone controls for consistency across all content", "Token-based credit system for text, fixed credits for images (5 basic, 25 premium)",
"Editorial workspace with comments, approvals, and WordPress publishing", "Review workflow with quality checks before moving to publication",
], ],
icon: SparklesIcon, icon: SparklesIcon,
color: "from-[var(--color-success)] to-[var(--color-success-dark)]", color: "from-[var(--color-success)] to-[var(--color-success-dark)]",
@@ -84,33 +91,33 @@ const Product: React.FC = () => {
link: "#writer", link: "#writer",
}, },
{ {
title: "Thinker", title: "Publisher",
subtitle: "Strategic OS and thinking engine", subtitle: "Calendar & WordPress Integration (Stage 8)",
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.", 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: [ features: [
"Centralized prompt library and brand playbooks with version control", "Visual calendar with drag-and-drop scheduling for content planning",
"Author voice templates and style guides for consistent content", "One-click WordPress publishing via the IGNY8 WP Bridge plugin",
"Automated guideline enforcement across all content generation", "Automatic SEO metadata, categories, tags, and featured image assignment",
"Governance dashboards showing who generated what, when, and with which inputs", "Multi-site WordPress management for agencies and publishers",
"Version control for AI instructions and playbooks across teams", "Publication status tracking with draft, scheduled, and published states",
], ],
icon: BoltIcon, icon: CalendarDaysIcon,
color: "from-[var(--color-warning)] to-[var(--color-warning-dark)]", color: "from-[var(--color-warning)] to-[var(--color-warning-dark)]",
image: "thinker-dashboard.png", image: "publisher-dashboard.png",
link: "#thinker", link: "#publisher",
}, },
{ {
title: "Automation", title: "Automation",
subtitle: "Always-on execution engine", subtitle: "7-Stage Handoff 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.", 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: [ features: [
"Schedule keywords → ideas → tasks → content → images in fully automated cycles", "7 configurable automation stages: Keywords→Clusters→Ideas→Tasks→Content→Images→Review→Published",
"End-to-end workflow automation with custom triggers and conditions", "Customizable batch sizes, limits, and scheduling for each handoff",
"Trigger workflows based on SERP movements, pipeline bottlenecks, or credit availability", "Real-time progress monitoring with success/error tracking",
"Multi-step handoffs between modules with quality checks at each stage", "Enable/disable individual stages for hybrid manual-auto workflows",
"Monitor every automation with audit logs and manual override controls", "Automation dashboard with pipeline visualization and controls",
], ],
icon: PhotoIcon, icon: BoltIcon,
color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]", color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]",
image: "automation-dashboard.png", image: "automation-dashboard.png",
link: "#automation", link: "#automation",
@@ -153,29 +160,34 @@ const Product: React.FC = () => {
<div className="max-w-7xl mx-auto px-6"> <div className="max-w-7xl mx-auto px-6">
<div className="text-center mb-16"> <div className="text-center mb-16">
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4"> <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> </h2>
<p className="text-lg text-gray-600 max-w-2xl mx-auto"> <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> </p>
</div> </div>
{/* Horizontal Timeline */} {/* 8-Stage Horizontal Timeline */}
<div className="relative"> <div className="relative">
{/* Enhanced connecting line with shadow */} {/* 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="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 md:grid-cols-6 gap-6 md:gap-4"> <div className="grid grid-cols-2 sm:grid-cols-4 md:grid-cols-8 gap-4 md:gap-3">
{workflowSteps.map((step, index) => { {workflowSteps.map((step, index) => {
const Icon = step.icon; const Icon = step.icon;
return ( return (
<div key={step.name} className="flex flex-col items-center gap-3"> <div key={step.name} className="flex flex-col items-center gap-2">
<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`}> <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-12 w-12" /> <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 */} {/* 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 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> </div>
<span className="text-sm font-semibold text-gray-900 text-center">{step.name}</span> <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> </div>
); );
})} })}
@@ -279,28 +291,28 @@ const Product: React.FC = () => {
</h2> </h2>
</div> </div>
<p className="text-xl text-gray-200 mb-8 leading-relaxed font-medium"> <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> </p>
{/* Automation Timeline with neon glows */} {/* 7 Automation Handoffs with neon glows */}
<div className="space-y-6"> <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: "Keywords", to: "Clusters", stage: 1, 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: "Clusters", to: "Ideas", stage: 2, 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: "Ideas", to: "Tasks", stage: 3, 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: "Tasks", to: "Content", stage: 4, 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: "Content", to: "Images", stage: 5, 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: "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) => ( ].map((handoff, i) => (
<div key={i} className="flex items-center gap-4"> <div key={i} className="flex items-center gap-3">
<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`}> <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.icon} {handoff.stage}
{/* Neon glow effect */} {/* 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>
<div className="flex-1"> <div className="flex-1">
<div className="text-white font-semibold text-lg">{handoff.from} → {handoff.to}</div> <div className="text-white font-semibold">{handoff.from} → {handoff.to}</div>
<div className="text-sm text-gray-300">Automated handoff with quality checks</div>
</div> </div>
</div> </div>
))} ))}
@@ -328,17 +340,23 @@ const Product: React.FC = () => {
</div> </div>
</div> </div>
{/* Performance KPIs */} {/* Platform Stats */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-2xl mx-auto"> <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-6"> <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-4 text-center">
<div className="text-4xl font-bold text-white mb-2">87%</div> <div className="text-3xl font-bold text-white mb-1">8</div>
<div className="text-sm text-gray-400">Completion Rate</div> <div className="text-xs text-gray-400">Pipeline Stages</div>
<div className="text-xs text-gray-500 mt-2">Average automation success across all workflows</div>
</div> </div>
<div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-6"> <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-4 text-center">
<div className="text-4xl font-bold text-white mb-2">6×</div> <div className="text-3xl font-bold text-white mb-1">7</div>
<div className="text-sm text-gray-400">Faster Velocity</div> <div className="text-xs text-gray-400">Auto Handoffs</div>
<div className="text-xs text-gray-500 mt-2">Content creation speed compared to manual processes</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> </div>
</div> </div>

1044
frontend/src/pages/Help/Help.tsx
View File

File diff suppressed because it is too large Load Diff