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
This commit is contained in:
IGNY8 VPS (Salman)
@@ -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>
|
||||
|
||||
@@ -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 },
|
||||
|
||||
@@ -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>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user