Compare commits
8 Commits
d4ecddba22
...
34c8cc410a
| Author | SHA1 | Date | |
|---|---|---|---|
|
34c8cc410a | ||
|
|
4f99fc1451 | ||
|
|
84ed711f6d | ||
|
|
7c79bdcc6c | ||
|
|
74370685f4 | ||
|
|
e2a1c15183 | ||
|
|
51512d6c91 | ||
|
|
4e9f2d9dbc |
313
CHANGELOG.md
313
CHANGELOG.md
@@ -1,6 +1,6 @@
|
||||
# IGNY8 Change Log
|
||||
|
||||
**Current Version:** 1.6.0
|
||||
**Current Version:** 1.6.2
|
||||
**Last Updated:** January 8, 2026
|
||||
|
||||
---
|
||||
@@ -9,6 +9,8 @@
|
||||
|
||||
| Version | Date | Summary |
|
||||
|---------|------|---------|
|
||||
| 1.6.2 | Jan 8, 2026 | **Design Refinements** - Updated marketing site gradients to brand colors (primary + success), reduced shadow weights, simplified automation icons, added Upcoming Features page |
|
||||
| 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 +39,315 @@
|
||||
|
||||
---
|
||||
|
||||
## v1.6.2 - January 8, 2026
|
||||
|
||||
### Marketing Site Design Refinements
|
||||
|
||||
This release updates the marketing site visual design to use consistent brand colors (primary + success gradient mix) throughout, reduces shadow weights for a cleaner appearance, and adds a comprehensive Upcoming Features roadmap page.
|
||||
|
||||
---
|
||||
|
||||
### 🎨 Brand Color Consistency
|
||||
|
||||
**Gradient Updates - Primary + Success Mix:**
|
||||
All marketing page gradients updated from purple/pink tones to brand colors (primary + success)
|
||||
|
||||
**Hero Sections Updated:**
|
||||
- `Home.tsx` - Hero gradient: `from-primary via-primary-dark to-success`
|
||||
- `Upcoming.tsx` - Hero gradient: `from-primary via-primary-dark to-success`
|
||||
- Updated radial glow overlays to use success RGB values
|
||||
|
||||
**CTA Sections Before Footer:**
|
||||
All pre-footer CTA sections updated across 5 pages:
|
||||
- `Home.tsx` - CTA gradient: `from-success via-primary-dark to-primary`
|
||||
- `Product.tsx` - CTA gradient: `from-success via-primary-dark to-primary`
|
||||
- `Pricing.tsx` - CTA gradient: `from-success via-primary-dark to-primary`
|
||||
- `Solutions.tsx` - CTA gradient: `from-success via-primary-dark to-primary`
|
||||
- `Partners.tsx` - CTA gradient: `from-success via-primary-dark to-primary`
|
||||
- `CaseStudies.tsx` - CTA gradient: `from-success via-primary-dark to-primary`
|
||||
|
||||
---
|
||||
|
||||
### 🧹 Shadow & Visual Refinements
|
||||
|
||||
**Product Module Screenshots:**
|
||||
- Reduced shadow from `shadow-2xl` to `shadow-md` for cleaner appearance
|
||||
- Reduced blur from `blur-xl` to `blur-lg` on gradient glows
|
||||
- Reduced inset values for more subtle frame effects
|
||||
- Updated across all 4 product module sections
|
||||
|
||||
**Hero Dashboard:**
|
||||
- Reduced shadow from `shadow-2xl` to `shadow-lg`
|
||||
- Reduced blur effects from `blur-3xl`/`blur-2xl` to `blur-xl`/`blur-lg`
|
||||
- Toned down opacity on glow effects (from 30%/20% to 20%/10%)
|
||||
|
||||
**Automation Engine Section:**
|
||||
- Simplified numbered badges from colorful mix to consistent primary gradient
|
||||
- Changed size from `w-10 h-10` to `w-9 h-9` for cleaner appearance
|
||||
- Removed heavy `shadow-lg` effects, using subtle `shadow-sm`
|
||||
- Removed neon glow and hover animations for cleaner branded look
|
||||
- Reduced automation dashboard shadow from `shadow-2xl` to `shadow-md`
|
||||
- Updated all 7 automation handoff badges to use consistent primary gradient
|
||||
|
||||
---
|
||||
|
||||
### 🚀 Upcoming Features Page
|
||||
|
||||
**New Page: `/upcoming`**
|
||||
- Comprehensive roadmap page with timeline-based feature organization
|
||||
- 3 phases with unique visual badges
|
||||
- 10 major upcoming features documented
|
||||
|
||||
**Phase 1 - Launching February 2026:**
|
||||
- **Linker Module** - Internal/external linking with keyword clustering
|
||||
- **Optimizer Module** - Content re-optimization engine
|
||||
|
||||
**Phase 2 - Launching Q2 2026:**
|
||||
- **Products Pages** - E-commerce product content generation
|
||||
- **Services Pages** - Service business content engine
|
||||
- **Company Pages** - Corporate website essentials
|
||||
- **Socializer** - Multi-platform social media publishing
|
||||
|
||||
**Phase 3 - Launching Q3-Q4 2026:**
|
||||
- **Video Content Creator** - AI video generation & publishing
|
||||
- **Site Builder** - The SEO holy grail
|
||||
- **Advanced Analytics** - Performance insights & reporting
|
||||
|
||||
**Visual Design:**
|
||||
- Rich gradient badges for each timeline phase (Success, Purple, Warning gradients)
|
||||
- Feature cards with icons, descriptions, and detailed bullet points
|
||||
- Hover effects and visual polish
|
||||
- Consistent with marketing site design system
|
||||
|
||||
**Navigation:**
|
||||
- Added "Upcoming Features" link to footer Resources section
|
||||
- Route integrated in `MarketingApp.tsx`
|
||||
- Lazy-loaded for performance
|
||||
|
||||
---
|
||||
|
||||
### 📄 Documentation Updates
|
||||
|
||||
**Marketing Site Updates:**
|
||||
All marketing pages synced with current app architecture:
|
||||
- Updated `Home.tsx` with 8-stage pipeline and 7 automation handoffs
|
||||
- Updated `Product.tsx` with accurate module descriptions
|
||||
- Updated `Tour.tsx` with 5 comprehensive steps
|
||||
- Updated `Solutions.tsx` with current architecture
|
||||
|
||||
**Prelaunch Plan Progress:**
|
||||
- Marked Phase 7.1 (Documentation Updates) complete
|
||||
- Marked Phase 8.1 (Site Content) complete
|
||||
- Marked Phase 8.2 (Pricing Page) complete
|
||||
- Marked Phase 8.3 (Upcoming Features Section) complete
|
||||
|
||||
---
|
||||
|
||||
### 📦 Files Changed Summary
|
||||
|
||||
**Frontend Marketing Pages (8):**
|
||||
| File | Changes | Description |
|
||||
|------|---------|-------------|
|
||||
| `marketing/pages/Home.tsx` | ~30 lines | Hero gradient, CTA gradient, shadow reductions, automation simplification |
|
||||
| `marketing/pages/Upcoming.tsx` | NEW - 362 lines | Comprehensive upcoming features page |
|
||||
| `marketing/pages/Product.tsx` | ~5 lines | CTA gradient update |
|
||||
| `marketing/pages/Pricing.tsx` | ~5 lines | CTA gradient update |
|
||||
| `marketing/pages/Solutions.tsx` | ~5 lines | CTA gradient update |
|
||||
| `marketing/pages/Partners.tsx` | ~5 lines | CTA gradient update |
|
||||
| `marketing/pages/CaseStudies.tsx` | ~5 lines | CTA gradient update |
|
||||
| `marketing/MarketingApp.tsx` | +3 lines | Upcoming route |
|
||||
|
||||
**Navigation & Config (1):**
|
||||
| File | Changes | Description |
|
||||
|------|---------|-------------|
|
||||
| `marketing/data/navLinks.ts` | +1 link | Added "Upcoming Features" to footer |
|
||||
|
||||
**Documentation (1):**
|
||||
| File | Changes | Description |
|
||||
|------|---------|-------------|
|
||||
| `docs/plans/FINAL-PRELAUNCH.md` | ~20 lines | Marked Phase 7 & 8 tasks complete |
|
||||
|
||||
---
|
||||
|
||||
### 🎯 Design Principles Applied
|
||||
|
||||
1. **Brand Consistency** - All gradients now use primary + success mix (matching logo)
|
||||
2. **Visual Hierarchy** - Reduced shadow weights prevent visual overwhelm
|
||||
3. **Clean & Branded** - Simplified automation icons from "trainbox mix" to consistent primary gradient
|
||||
4. **Subtle & Elegant** - Shadow weights reduced to md/lg instead of 2xl for modern appearance
|
||||
5. **Content First** - Reduced decorative effects to let content shine
|
||||
|
||||
---
|
||||
|
||||
### Git Reference
|
||||
```bash
|
||||
# Commits in this release:
|
||||
4f99fc14 - Update all CTA section backgrounds to primary + success gradient
|
||||
84ed711f - Reduce shadow weights and simplify automation icons
|
||||
7c79bdcc - Update gradient backgrounds from purple/pink to primary + success mix
|
||||
74370685 - Add Upcoming Features page with timeline-based roadmap
|
||||
e2a1c151 - Update FINAL-PRELAUNCH.md: Mark Phase 7 & 8 tasks complete
|
||||
51512d6c - Update Tour and Solutions pages with accurate pipeline
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 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
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
# IGNY8 Technical Documentation
|
||||
|
||||
**Version:** 1.6.0
|
||||
**Version:** 1.6.2
|
||||
**Last Updated:** January 8, 2026
|
||||
**Purpose:** Complete technical reference for the IGNY8 AI content platform
|
||||
|
||||
|
||||
@@ -379,25 +379,31 @@ Deploy and verify the following sites:
|
||||
|
||||
# PHASE 7: Documentation & Media
|
||||
|
||||
## 7.1 - Documentation Updates
|
||||
## 7.1 - Documentation Updates ✅
|
||||
|
||||
- Update all feature documentation
|
||||
- Finalize help documentation
|
||||
- Ensure accuracy with V1.0 release features
|
||||
- ✅ Update all feature documentation
|
||||
- ✅ Finalize help documentation
|
||||
- ✅ Ensure accuracy with V1.0 release features
|
||||
|
||||
**Completed Items**:
|
||||
- Updated docs/INDEX.md to v1.6.1
|
||||
- Updated CHANGELOG.md with v1.6.1 release details
|
||||
- Updated Help.tsx with 8-stage pipeline, visual flowcharts, accurate module docs
|
||||
- All documentation synced with current codebase
|
||||
|
||||
---
|
||||
|
||||
## 7.2 - Media Creation
|
||||
## 7.2 - Media Creation ❌
|
||||
|
||||
### 7.2.1 - Feature Screencasts
|
||||
### 7.2.1 - Feature Screencasts ❌
|
||||
- Create screencast of healthy data from each page
|
||||
- Show real/representative data, not empty states
|
||||
|
||||
### 7.2.2 - Feature Explainer Videos
|
||||
### 7.2.2 - Feature Explainer Videos ❌
|
||||
- Create videos explaining each feature
|
||||
- Focus on value proposition and use cases
|
||||
|
||||
### 7.2.3 - Tutorial Videos
|
||||
### 7.2.3 - Tutorial Videos ❌
|
||||
- Create functional screencasts
|
||||
- How-to video tutorials for common workflows
|
||||
|
||||
@@ -407,17 +413,24 @@ Deploy and verify the following sites:
|
||||
|
||||
> ⚠️ **DEPENDENCY**: This phase can ONLY be finalized after Phase 7 documentation is complete
|
||||
|
||||
## 8.1 - Site Content
|
||||
## 8.1 - Site Content ✅
|
||||
|
||||
- Complete site content based on:
|
||||
- ✅ Complete site content based on:
|
||||
- Final documentation
|
||||
- Final feature set
|
||||
- Help documentation
|
||||
- Ensure messaging matches actual V1.0 capabilities
|
||||
- ✅ Ensure messaging matches actual V1.0 capabilities
|
||||
|
||||
**Completed Items**:
|
||||
- Updated Home.tsx with 8-stage pipeline and 7 automation handoffs
|
||||
- Updated Product.tsx with accurate module descriptions and features
|
||||
- Updated Tour.tsx with 5 detailed steps and accurate pipeline
|
||||
- Updated Solutions.tsx with current architecture details
|
||||
- All marketing pages synced with app architecture
|
||||
|
||||
---
|
||||
|
||||
## 8.2 - Pricing Page
|
||||
## 8.2 - Pricing Page ✅
|
||||
|
||||
Simple pricing page with three plans:
|
||||
|
||||
@@ -427,27 +440,46 @@ Simple pricing page with three plans:
|
||||
| Growth | $199/mo |
|
||||
| Scale | $299/mo |
|
||||
|
||||
- Include credits information for each plan
|
||||
- Clear feature comparison
|
||||
- ✅ Include credits information for each plan
|
||||
- ✅ Clear feature comparison
|
||||
|
||||
**Completed Items**:
|
||||
- Updated Pricing.tsx feature matrix with accurate AI providers
|
||||
- Added image generation details (5 credits basic, 25 credits premium)
|
||||
- Updated with DALL-E 3, Runware, Bria providers
|
||||
|
||||
---
|
||||
|
||||
## 8.3 - Upcoming Features Section
|
||||
## 8.3 - Upcoming Features Section ✅
|
||||
|
||||
**Location**: Frontend marketing site ONLY (not in-app)
|
||||
|
||||
Highlight coming soon features:
|
||||
- New site builder (THE SEO HOLY GRAIL)
|
||||
- Interlinking
|
||||
- Backlinks
|
||||
- Optimization
|
||||
- Socializer - integration and posting to social and video channels
|
||||
- Videos and reels in article and social
|
||||
- Products / Services pages (coming soon)
|
||||
- ✅ Created dedicated `/upcoming` page with timeline-based feature groups
|
||||
- ✅ Organized features into 3 phases: Feb 2026, Q2 2026, Q3-Q4 2026
|
||||
- ✅ Added to footer navigation under "Resources"
|
||||
|
||||
**Texts to fix**:
|
||||
- Standardize terminology: "articles" vs "content" vs "pages"
|
||||
- Mark Products/Services as "(coming soon)"
|
||||
**Completed Features Documented**:
|
||||
|
||||
**Phase 1 - Launching February 2026**:
|
||||
- Linker Module (internal/external linking with clustering)
|
||||
- Optimizer Module (content re-optimization engine)
|
||||
|
||||
**Phase 2 - Launching Q2 2026**:
|
||||
- Products Pages (e-commerce product content generation)
|
||||
- Services Pages (service business content engine)
|
||||
- Company Pages (corporate website essentials)
|
||||
|
||||
**Phase 3 - Launching Q3-Q4 2026**:
|
||||
- Socializer Module (multi-platform social publishing)
|
||||
- Video Content Creator (AI video generation & publishing)
|
||||
- Site Builder (the SEO holy grail)
|
||||
- Advanced Analytics (performance insights & reporting)
|
||||
|
||||
**Visual Design**:
|
||||
- Unique color badges for each timeline phase
|
||||
- Rich visual layout with gradients and hover effects
|
||||
- Feature cards with icons, descriptions, and detailed bullet points
|
||||
- Consistent with existing marketing site design system
|
||||
|
||||
---
|
||||
|
||||
|
||||
@@ -14,6 +14,7 @@ const CaseStudies = lazy(() => import("./pages/CaseStudies"));
|
||||
const Partners = lazy(() => import("./pages/Partners"));
|
||||
const Contact = lazy(() => import("./pages/Contact"));
|
||||
const Waitlist = lazy(() => import("./pages/Waitlist"));
|
||||
const Upcoming = lazy(() => import("./pages/Upcoming"));
|
||||
|
||||
const MarketingApp: React.FC = () => {
|
||||
return (
|
||||
@@ -31,6 +32,7 @@ const MarketingApp: React.FC = () => {
|
||||
<Route path="/partners" element={<Partners />} />
|
||||
<Route path="/contact" element={<Contact />} />
|
||||
<Route path="/waitlist" element={<Waitlist />} />
|
||||
<Route path="/upcoming" element={<Upcoming />} />
|
||||
</Routes>
|
||||
</Suspense>
|
||||
</MarketingLayout>
|
||||
|
||||
@@ -36,6 +36,7 @@ export const footerNavGroups: { title: string; links: NavLinkItem[] }[] = [
|
||||
{ name: "Help Center", path: "/resources#help" },
|
||||
{ name: "Documentation", path: "/resources#docs" },
|
||||
{ name: "Partner Program", path: "/partners" },
|
||||
{ name: "Upcoming Features", path: "/upcoming" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
@@ -202,7 +202,7 @@ const CaseStudies: React.FC = () => {
|
||||
</section>
|
||||
|
||||
{/* FINAL CTA */}
|
||||
<section className="relative overflow-hidden bg-gradient-to-br from-[var(--color-primary)] via-[var(--color-purple)] to-[var(--color-purple-400)]">
|
||||
<section className="relative overflow-hidden bg-gradient-to-br from-[var(--color-success)] via-[var(--color-primary-dark)] to-[var(--color-primary)]">
|
||||
{/* Radial glow */}
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(255,255,255,0.1),transparent_70%)]" />
|
||||
|
||||
|
||||
@@ -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",
|
||||
@@ -119,10 +125,10 @@ const Home: React.FC = () => {
|
||||
<SEO meta={getMetaTags("home")} />
|
||||
<div className="bg-white">
|
||||
{/* HERO SECTION */}
|
||||
<section className="relative overflow-hidden bg-gradient-to-br from-[var(--color-primary)] via-[var(--color-purple)] to-[var(--color-purple-400)]">
|
||||
<section className="relative overflow-hidden bg-gradient-to-br from-[var(--color-primary)] via-[var(--color-primary-dark)] to-[var(--color-success)]">
|
||||
{/* Radial glow behind headline */}
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_50%,rgba(255,255,255,0.1),transparent_60%)]" />
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_20%,rgba(109,74,227,0.2),transparent_50%)]" />
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_20%,rgba(var(--color-success-rgb),0.2),transparent_50%)]" />
|
||||
|
||||
<div className="relative max-w-7xl mx-auto px-6 py-20 md:py-32 lg:py-40">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center">
|
||||
@@ -153,10 +159,10 @@ const Home: React.FC = () => {
|
||||
<div className="relative z-10">
|
||||
<div className="relative scale-110 lg:scale-125">
|
||||
{/* Soft glow behind screenshot */}
|
||||
<div className="absolute -inset-8 bg-gradient-to-br from-white/30 via-[var(--color-primary)]/20 to-[var(--color-purple)]/20 rounded-3xl blur-3xl" />
|
||||
<div className="absolute -inset-6 bg-gradient-to-br from-white/20 via-[var(--color-primary)]/10 to-[var(--color-purple)]/10 rounded-3xl blur-xl" />
|
||||
{/* Device frame effect */}
|
||||
<div className="absolute -inset-4 bg-gradient-to-br from-white/20 to-white/5 rounded-3xl blur-2xl" />
|
||||
<div className="relative rounded-2xl border-4 border-white/20 bg-white/10 backdrop-blur-sm shadow-2xl overflow-hidden">
|
||||
<div className="absolute -inset-3 bg-gradient-to-br from-white/10 to-white/5 rounded-3xl blur-lg" />
|
||||
<div className="relative rounded-2xl border-4 border-white/20 bg-white/10 backdrop-blur-sm shadow-lg overflow-hidden">
|
||||
<div className="absolute top-0 left-0 right-0 h-12 bg-gradient-to-b from-gray-800/50 to-transparent flex items-center gap-2 px-4">
|
||||
<div className="flex gap-2">
|
||||
<div className="w-3 h-3 rounded-full bg-error-500/50" />
|
||||
@@ -171,7 +177,7 @@ const Home: React.FC = () => {
|
||||
/>
|
||||
</div>
|
||||
{/* Soft shadow */}
|
||||
<div className="absolute -bottom-8 -left-8 right-8 h-32 bg-gradient-to-t from-[var(--color-primary)]/20 to-transparent blur-3xl -z-10" />
|
||||
<div className="absolute -bottom-6 -left-6 right-6 h-24 bg-gradient-to-t from-[var(--color-primary)]/10 to-transparent blur-xl -z-10" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -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>
|
||||
);
|
||||
})}
|
||||
@@ -258,8 +269,8 @@ const Home: React.FC = () => {
|
||||
<div className={`relative ${!isLeft ? "lg:col-start-2" : ""}`}>
|
||||
<div className="relative scale-110 lg:scale-115">
|
||||
{/* Gradient frame background with colored glow */}
|
||||
<div className={`absolute -inset-6 bg-gradient-to-br ${module.color} rounded-3xl opacity-10 blur-xl`} />
|
||||
<div className="relative rounded-2xl border-2 border-gray-200 bg-white shadow-2xl overflow-hidden">
|
||||
<div className={`absolute -inset-4 bg-gradient-to-br ${module.color} rounded-3xl opacity-10 blur-lg`} />
|
||||
<div className="relative rounded-2xl border-2 border-gray-200 bg-white shadow-md overflow-hidden">
|
||||
<div className="absolute top-0 left-0 right-0 h-12 bg-gradient-to-b from-gray-800/30 to-transparent flex items-center gap-2 px-4">
|
||||
<div className="flex gap-2">
|
||||
<div className="w-3 h-3 rounded-full bg-error-500/50" />
|
||||
@@ -326,7 +337,7 @@ const Home: React.FC = () => {
|
||||
{/* Left: Content */}
|
||||
<div className="z-10">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="size-12 rounded-xl bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-purple)] flex items-center justify-center text-white shadow-lg shadow-[var(--color-primary)]/30">
|
||||
<div className="size-12 rounded-xl bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-primary-dark)] flex items-center justify-center text-white shadow-sm">
|
||||
<BoltIcon className="h-6 w-6" />
|
||||
</div>
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-white">
|
||||
@@ -334,49 +345,51 @@ 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 - clean and simple */}
|
||||
<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-primary-dark)]" },
|
||||
{ from: "Clusters", to: "Ideas", stage: 2, color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]" },
|
||||
{ from: "Ideas", to: "Tasks", stage: 3, color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]" },
|
||||
{ from: "Tasks", to: "Content", stage: 4, color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]" },
|
||||
{ from: "Content", to: "Images", stage: 5, color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]" },
|
||||
{ from: "Images", to: "Review", stage: 6, color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]" },
|
||||
{ from: "Review", to: "Published", stage: 7, color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]" },
|
||||
].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}
|
||||
{/* 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 key={i} className="flex items-center gap-3">
|
||||
<div className={`relative w-9 h-9 rounded-lg bg-gradient-to-br ${handoff.color} flex items-center justify-center text-white text-sm font-bold shadow-sm`}>
|
||||
{handoff.stage}
|
||||
</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>
|
||||
|
||||
{/* Right: Automation Dashboard Screenshot */}
|
||||
<div className="relative z-10">
|
||||
<div className="relative rounded-2xl border-2 border-white/20 bg-white/5 backdrop-blur-sm shadow-2xl overflow-hidden">
|
||||
<div className="relative rounded-2xl border-2 border-white/20 bg-white/5 backdrop-blur-sm shadow-md overflow-hidden">
|
||||
<div className="absolute top-0 left-0 right-0 h-12 bg-gradient-to-b from-gray-800/50 to-transparent flex items-center gap-2 px-4">
|
||||
<div className="flex gap-2">
|
||||
<div className="w-3 h-3 rounded-full bg-error-500/50" />
|
||||
@@ -391,7 +404,7 @@ const Home: React.FC = () => {
|
||||
/>
|
||||
</div>
|
||||
{/* Glow effect */}
|
||||
<div className="absolute -inset-4 bg-gradient-to-br from-[var(--color-primary)]/20 to-[var(--color-purple)]/20 rounded-2xl blur-2xl -z-10" />
|
||||
<div className="absolute -inset-3 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-success)]/10 rounded-2xl blur-xl -z-10" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -457,7 +470,7 @@ const Home: React.FC = () => {
|
||||
</section>
|
||||
|
||||
{/* FINAL CTA */}
|
||||
<section className="relative overflow-hidden bg-gradient-to-br from-[var(--color-purple-400)] via-[var(--color-purple)] to-[var(--color-primary)]">
|
||||
<section className="relative overflow-hidden bg-gradient-to-br from-[var(--color-success)] via-[var(--color-primary-dark)] to-[var(--color-primary)]">
|
||||
{/* Dashboard overlay in background */}
|
||||
<div className="absolute inset-0 opacity-10">
|
||||
<div className="absolute inset-0 bg-[url('/marketing/images/hero-dashboard.png')] bg-cover bg-center scale-150 blur-3xl" />
|
||||
|
||||
@@ -186,7 +186,7 @@ const Partners: React.FC = () => {
|
||||
</section>
|
||||
|
||||
{/* FINAL CTA */}
|
||||
<section className="relative overflow-hidden bg-gradient-to-br from-[var(--color-primary)] via-[var(--color-purple)] to-[var(--color-purple-400)]">
|
||||
<section className="relative overflow-hidden bg-gradient-to-br from-[var(--color-success)] via-[var(--color-primary-dark)] to-[var(--color-primary)]">
|
||||
{/* Radial glow */}
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(255,255,255,0.1),transparent_70%)]" />
|
||||
|
||||
|
||||
@@ -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 },
|
||||
@@ -488,7 +489,7 @@ const Pricing: React.FC = () => {
|
||||
</section>
|
||||
|
||||
{/* FINAL CTA */}
|
||||
<section className="relative overflow-hidden bg-gradient-to-br from-[var(--color-primary)] via-[var(--color-purple)] to-[var(--color-purple-400)]">
|
||||
<section className="relative overflow-hidden bg-gradient-to-br from-[var(--color-success)] via-[var(--color-primary-dark)] to-[var(--color-primary)]">
|
||||
{/* Radial glow */}
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(255,255,255,0.1),transparent_70%)]" />
|
||||
|
||||
|
||||
@@ -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>
|
||||
@@ -404,7 +422,7 @@ const Product: React.FC = () => {
|
||||
</section>
|
||||
|
||||
{/* FINAL CTA */}
|
||||
<section className="relative overflow-hidden bg-gradient-to-br from-[var(--color-primary)] via-[var(--color-purple)] to-[var(--color-purple-400)]">
|
||||
<section className="relative overflow-hidden bg-gradient-to-br from-[var(--color-success)] via-[var(--color-primary-dark)] to-[var(--color-primary)]">
|
||||
{/* Dashboard overlay in background */}
|
||||
<div className="absolute inset-0 opacity-10">
|
||||
<div className="absolute inset-0 bg-[url('/marketing/images/hero-dashboard.png')] bg-cover bg-center scale-150 blur-3xl" />
|
||||
|
||||
@@ -53,9 +53,10 @@ const Solutions: React.FC = () => {
|
||||
"Manual image sourcing and WordPress publishing bottlenecks",
|
||||
],
|
||||
outcomes: [
|
||||
"Launch keyword → content automation that protects brand voice",
|
||||
"Keep editors in control with approvals and Thinker playbooks",
|
||||
"Automate image generation and WordPress publishing by site",
|
||||
"Launch 8-stage automation pipeline protecting brand voice",
|
||||
"Keep editors in control with review workflow and approval gates",
|
||||
"Automate image generation (DALL-E 3, Runware) and WordPress publishing",
|
||||
"Use content calendar for scheduled publishing across sites",
|
||||
],
|
||||
color: "from-[var(--color-primary)]/5 to-white",
|
||||
borderColor: "border-[var(--color-primary)]/20",
|
||||
@@ -73,9 +74,10 @@ const Solutions: React.FC = () => {
|
||||
"Client-specific brand guidelines and tone management",
|
||||
],
|
||||
outcomes: [
|
||||
"Shared workspaces for each client with automation templates",
|
||||
"Real-time dashboards to prove impact and showcase velocity",
|
||||
"Reusable Thinker libraries to standardize tone and strategy",
|
||||
"Shared workspaces for each client with custom automation configs",
|
||||
"Real-time dashboards showing pipeline progress and content velocity",
|
||||
"Reusable prompts and brand voice settings per client account",
|
||||
"Multi-site WordPress publishing with client-specific credentials",
|
||||
],
|
||||
color: "from-[var(--color-success)]/5 to-white",
|
||||
borderColor: "border-[var(--color-success)]/20",
|
||||
@@ -93,9 +95,10 @@ const Solutions: React.FC = () => {
|
||||
"Tool sprawl creating visibility gaps",
|
||||
],
|
||||
outcomes: [
|
||||
"Automated pipeline from keyword intake to published content",
|
||||
"Dashboards that unite SEO, writers, designers, and leadership",
|
||||
"Insights to reallocate focus when campaigns spike or drop",
|
||||
"Automated 8-stage pipeline from keyword intake to WordPress publishing",
|
||||
"Unified dashboard showing SEO, content, images, and publication metrics",
|
||||
"Credit-based usage tracking to optimize spend and resource allocation",
|
||||
"Publisher module for content calendar and scheduled publishing",
|
||||
],
|
||||
color: "from-[var(--color-purple)]/5 to-white",
|
||||
borderColor: "border-[var(--color-purple)]/20",
|
||||
@@ -348,7 +351,7 @@ const Solutions: React.FC = () => {
|
||||
</section>
|
||||
|
||||
{/* FINAL CTA */}
|
||||
<section className="relative overflow-hidden bg-gradient-to-br from-[var(--color-primary)] via-[var(--color-purple)] to-[var(--color-purple-400)]">
|
||||
<section className="relative overflow-hidden bg-gradient-to-br from-[var(--color-success)] via-[var(--color-primary-dark)] to-[var(--color-primary)]">
|
||||
{/* Radial glow */}
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(255,255,255,0.1),transparent_70%)]" />
|
||||
|
||||
|
||||
@@ -6,27 +6,33 @@ import { getMetaTags } from "../config/metaTags";
|
||||
|
||||
const tourSteps = [
|
||||
{
|
||||
title: "Kick off in the Dashboard",
|
||||
title: "Dashboard: Your Command Center",
|
||||
description:
|
||||
"Get instant visibility into automation coverage, credit usage, and pipeline health with filters for every site and team.",
|
||||
"Get instant visibility into your 8-stage pipeline, credit usage, and workflow progress. Track keywords through to published content with real-time metrics.",
|
||||
image: "tour-dash.png",
|
||||
},
|
||||
{
|
||||
title: "Research in Planner",
|
||||
title: "Planner: Keywords → Clusters → Ideas (Stages 1-3)",
|
||||
description:
|
||||
"Explore the global keyword graph, build clustering blueprints, and score opportunities with AI to set your roadmap.",
|
||||
"Import keywords via CSV or database, organize them into semantic clusters using AI, and generate content ideas. Build your content strategy foundation.",
|
||||
image: "tour-planner.png",
|
||||
},
|
||||
{
|
||||
title: "Generate briefs and drafts in Writer",
|
||||
title: "Writer: Tasks → Content → Images → Review (Stages 4-7)",
|
||||
description:
|
||||
"Create detailed briefs, assign tasks, and produce on-brand drafts tuned to your tone, format, and competitive insights.",
|
||||
"Convert ideas to tasks, generate AI content with GPT-4o or Claude, create images with DALL-E 3 or Runware, and review before publishing.",
|
||||
image: "tour-writer.png",
|
||||
},
|
||||
{
|
||||
title: "Automate delivery",
|
||||
title: "Publisher: Schedule & Publish to WordPress (Stage 8)",
|
||||
description:
|
||||
"Configure recipes that move keywords to ideas, content, and imagery. Publish to WordPress or notify your CMS automatically.",
|
||||
"Use the visual calendar to schedule content, then publish to WordPress via the IGNY8 WP Bridge plugin with one click. SEO metadata and images sync automatically.",
|
||||
image: "tour-automation.png",
|
||||
},
|
||||
{
|
||||
title: "Automation: 7-Stage Handoff Engine",
|
||||
description:
|
||||
"Configure automated handoffs between each stage. Set batch sizes, schedules, and triggers. Run your content factory on autopilot with real-time monitoring.",
|
||||
image: "tour-automation.png",
|
||||
},
|
||||
];
|
||||
@@ -86,18 +92,19 @@ const Tour: React.FC = () => {
|
||||
<section className="bg-gradient-to-br from-[var(--color-primary)]/10 via-gray-50/70 to-[var(--color-success)]/10 border-y border-[var(--color-primary)]/20">
|
||||
<div className="max-w-6xl mx-auto px-6 py-24 space-y-10">
|
||||
<SectionHeading
|
||||
eyebrow="Automation recipes"
|
||||
title="Pre-built workflows you can launch on day one."
|
||||
description="Activate automation templates or customize them in minutes. Igny8 tracks dependencies, statuses, and handoffs."
|
||||
eyebrow="7 Automation Handoffs"
|
||||
title="Orchestrate your 8-stage pipeline on autopilot."
|
||||
description="Configure each handoff independently. Set batch sizes, schedules, and credit limits. IGNY8 tracks every item through the pipeline."
|
||||
/>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 text-sm text-gray-600">
|
||||
{[
|
||||
{ name: "Keywords → Ideas", time: "Nightly", highlight: "Targets new opportunities", color: "border-[var(--color-primary)]/40", gradient: "from-[var(--color-primary)]/10 to-white" },
|
||||
{ name: "Ideas → Tasks", time: "Daily", highlight: "Staff writers automatically", color: "border-[var(--color-success)]/40", gradient: "from-[var(--color-success)]/10 to-white" },
|
||||
{ name: "Tasks → Content", time: "Hourly", highlight: "Generate & queue drafts", color: "border-[var(--color-warning)]/40", gradient: "from-[var(--color-warning)]/10 to-white" },
|
||||
{ name: "Content → Images", time: "On approval", highlight: "Produce branded visuals", color: "border-[var(--color-purple)]/40", gradient: "from-[var(--color-purple)]/10 to-white" },
|
||||
{ name: "Content → WordPress", time: "Manual launch", highlight: "One-click publish", color: "border-[var(--color-primary)]/40", gradient: "from-[var(--color-primary)]/10 to-white" },
|
||||
{ name: "SERP Win/Loss Alerts", time: "Real-time", highlight: "Trigger optimizations", color: "border-[var(--color-success)]/40", gradient: "from-[var(--color-success)]/10 to-white" },
|
||||
{ name: "Keywords → Clusters", time: "Stage 1", highlight: "Auto-cluster by AI similarity", color: "border-[var(--color-primary)]/40", gradient: "from-[var(--color-primary)]/10 to-white" },
|
||||
{ name: "Clusters → Ideas", time: "Stage 2", highlight: "Generate content concepts", color: "border-[var(--color-purple)]/40", gradient: "from-[var(--color-purple)]/10 to-white" },
|
||||
{ name: "Ideas → Tasks", time: "Stage 3", highlight: "Create writing assignments", color: "border-[var(--color-warning)]/40", gradient: "from-[var(--color-warning)]/10 to-white" },
|
||||
{ name: "Tasks → Content", time: "Stage 4", highlight: "Generate AI articles", color: "border-[var(--color-success)]/40", gradient: "from-[var(--color-success)]/10 to-white" },
|
||||
{ name: "Content → Images", time: "Stage 5", highlight: "Create featured & in-article images", color: "border-[var(--color-primary)]/40", gradient: "from-[var(--color-primary)]/10 to-white" },
|
||||
{ name: "Images → Review", time: "Stage 6", highlight: "Queue for editorial approval", color: "border-[var(--color-purple)]/40", gradient: "from-[var(--color-purple)]/10 to-white" },
|
||||
{ name: "Review → Published", time: "Stage 7", highlight: "Publish to WordPress", color: "border-[var(--color-success)]/40", gradient: "from-[var(--color-success)]/10 to-white" },
|
||||
].map((recipe) => (
|
||||
<div
|
||||
key={recipe.name}
|
||||
|
||||
332
frontend/src/marketing/pages/Upcoming.tsx
Normal file
332
frontend/src/marketing/pages/Upcoming.tsx
Normal file
@@ -0,0 +1,332 @@
|
||||
import React from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import {
|
||||
LinkIcon,
|
||||
ShoppingBagIcon,
|
||||
BriefcaseIcon,
|
||||
ArrowTrendingUpIcon,
|
||||
ShareIcon,
|
||||
VideoCameraIcon,
|
||||
SparklesIcon,
|
||||
BuildingStorefrontIcon,
|
||||
PencilSquareIcon,
|
||||
ChartBarIcon,
|
||||
GlobeAltIcon,
|
||||
RocketLaunchIcon,
|
||||
} from "@heroicons/react/24/outline";
|
||||
import SEO from "../components/SEO";
|
||||
import { getMetaTags } from "../config/metaTags";
|
||||
|
||||
const Upcoming: React.FC = () => {
|
||||
const renderCta = (cta: { label: string; href: string }, className: string) => {
|
||||
const isExternal = cta.href.startsWith("http");
|
||||
|
||||
if (isExternal) {
|
||||
return (
|
||||
<a
|
||||
href={cta.href}
|
||||
className={className}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
{cta.label}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Link to={cta.href} className={className}>
|
||||
{cta.label}
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
|
||||
const upcomingFeatures = [
|
||||
{
|
||||
phase: "Launching February 2026",
|
||||
badge: "Launching Soon",
|
||||
badgeColor: "bg-gradient-to-r from-[var(--color-success)] to-[var(--color-success-dark)] text-white",
|
||||
borderColor: "border-[var(--color-success)]/30",
|
||||
features: [
|
||||
{
|
||||
icon: LinkIcon,
|
||||
title: "Linker Module",
|
||||
subtitle: "Intelligent Internal & External Linking",
|
||||
description: "Automatically create strategic internal links between related content based on your keyword clusters. Build topical authority with AI-powered link suggestions that understand semantic relationships.",
|
||||
bullets: [
|
||||
"Internal linking mapped to keyword clusters",
|
||||
"External link suggestions to authoritative sources",
|
||||
"Anchor text optimization for SEO",
|
||||
"Link health monitoring and broken link detection",
|
||||
"Cross-site linking for multi-brand portfolios",
|
||||
],
|
||||
color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]",
|
||||
},
|
||||
{
|
||||
icon: ArrowTrendingUpIcon,
|
||||
title: "Optimizer Module",
|
||||
subtitle: "Content Re-Optimization Engine",
|
||||
description: "Analyze and improve existing content performance. AI-powered recommendations for content updates, keyword optimization, and structural improvements to boost rankings.",
|
||||
bullets: [
|
||||
"Content performance analysis and scoring",
|
||||
"AI-powered rewrite suggestions",
|
||||
"Keyword gap analysis vs competitors",
|
||||
"Structure and readability improvements",
|
||||
"Auto-update stale content with fresh information",
|
||||
],
|
||||
color: "from-[var(--color-warning)] to-[var(--color-warning-dark)]",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
phase: "Launching Q2 2026",
|
||||
badge: "In Development",
|
||||
badgeColor: "bg-gradient-to-r from-[var(--color-purple)] to-[var(--color-purple-dark)] text-white",
|
||||
borderColor: "border-[var(--color-purple)]/30",
|
||||
features: [
|
||||
{
|
||||
icon: ShoppingBagIcon,
|
||||
title: "Products Pages",
|
||||
subtitle: "E-commerce Product Content Generation",
|
||||
description: "Generate SEO-optimized product pages at scale. Create product descriptions, specifications, features, and benefits with AI that understands your product catalog and target audience.",
|
||||
bullets: [
|
||||
"Bulk product page generation from catalog data",
|
||||
"Product attribute optimization (specs, features, benefits)",
|
||||
"Category landing pages with clustering",
|
||||
"Product comparison pages",
|
||||
"Schema markup for rich snippets",
|
||||
],
|
||||
color: "from-[var(--color-success)] to-[var(--color-success-dark)]",
|
||||
},
|
||||
{
|
||||
icon: BriefcaseIcon,
|
||||
title: "Services Pages",
|
||||
subtitle: "Service Business Content Engine",
|
||||
description: "Create comprehensive service pages for B2B and B2C service businesses. Generate service descriptions, process explanations, pricing structures, and case studies.",
|
||||
bullets: [
|
||||
"Service description templates by industry",
|
||||
"Multi-location service pages",
|
||||
"Service area pages for local SEO",
|
||||
"Process and methodology explanations",
|
||||
"Integration with company brand guidelines",
|
||||
],
|
||||
color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]",
|
||||
},
|
||||
{
|
||||
icon: BuildingStorefrontIcon,
|
||||
title: "Company Pages",
|
||||
subtitle: "Corporate Website Essentials",
|
||||
description: "Generate and optimize essential company pages: About Us, Team, Careers, Contact, FAQ. Maintain brand consistency while optimizing for search and conversion.",
|
||||
bullets: [
|
||||
"About Us, Mission, Vision, Values pages",
|
||||
"Team member profiles and bios",
|
||||
"Careers and job listing pages",
|
||||
"FAQ pages mapped to search intent",
|
||||
"Press and media pages",
|
||||
],
|
||||
color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
phase: "Launching Q3-Q4 2026",
|
||||
badge: "Planned",
|
||||
badgeColor: "bg-gradient-to-r from-[var(--color-warning)] to-[var(--color-warning-dark)] text-white",
|
||||
borderColor: "border-[var(--color-warning)]/30",
|
||||
features: [
|
||||
{
|
||||
icon: ShareIcon,
|
||||
title: "Socializer Module",
|
||||
subtitle: "Multi-Platform Social Publishing",
|
||||
description: "Automatically publish content to top 5 social platforms. Generate platform-specific posts, images, and captions optimized for each channel. Schedule and manage all social content from one place.",
|
||||
bullets: [
|
||||
"Auto-post to LinkedIn, Twitter/X, Facebook, Instagram, TikTok",
|
||||
"Platform-specific content adaptation (tone, length, format)",
|
||||
"Social media calendar integrated with content calendar",
|
||||
"Image optimization per platform specs",
|
||||
"Engagement tracking and analytics",
|
||||
],
|
||||
color: "from-[var(--color-success)] to-[var(--color-success-dark)]",
|
||||
},
|
||||
{
|
||||
icon: VideoCameraIcon,
|
||||
title: "Video Content Creator",
|
||||
subtitle: "AI Video Generation & Publishing",
|
||||
description: "Generate video content from articles. Create short-form videos for social (Reels, Shorts, TikTok) and long-form for YouTube. Automated video publishing to video platforms.",
|
||||
bullets: [
|
||||
"Article-to-video conversion with AI voiceover",
|
||||
"Short-form video for Reels, Shorts, TikTok",
|
||||
"Long-form video for YouTube with chapters",
|
||||
"Video SEO optimization (titles, descriptions, tags)",
|
||||
"Automated publishing to video platforms",
|
||||
],
|
||||
color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]",
|
||||
},
|
||||
{
|
||||
icon: SparklesIcon,
|
||||
title: "Site Builder",
|
||||
subtitle: "The SEO Holy Grail",
|
||||
description: "Revolutionary site builder that creates fully optimized, content-rich websites from scratch. Automated architecture planning, content generation, design selection, and deployment.",
|
||||
bullets: [
|
||||
"Automated site architecture based on keyword research",
|
||||
"Full website content generation in minutes",
|
||||
"SEO-optimized templates and design systems",
|
||||
"Internal linking structure built-in",
|
||||
"One-click deployment to hosting",
|
||||
],
|
||||
color: "from-[var(--color-warning)] to-[var(--color-warning-dark)]",
|
||||
},
|
||||
{
|
||||
icon: ChartBarIcon,
|
||||
title: "Advanced Analytics",
|
||||
subtitle: "Performance Insights & Reporting",
|
||||
description: "Deep analytics for content performance, keyword rankings, traffic attribution, and ROI tracking. Custom reports and dashboards for agencies and enterprises.",
|
||||
bullets: [
|
||||
"Keyword ranking tracking integration",
|
||||
"Content performance analytics",
|
||||
"Traffic and conversion attribution",
|
||||
"Custom white-label reports",
|
||||
"API access for data export",
|
||||
],
|
||||
color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]",
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<SEO meta={getMetaTags("home")} />
|
||||
<div className="bg-white">
|
||||
{/* HERO SECTION */}
|
||||
<section className="relative overflow-hidden bg-gradient-to-br from-[var(--color-primary)] via-[var(--color-primary-dark)] to-[var(--color-success)]">
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_50%,rgba(255,255,255,0.1),transparent_60%)]" />
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_20%,rgba(var(--color-success-rgb),0.2),transparent_50%)]" />
|
||||
|
||||
<div className="relative max-w-7xl mx-auto px-6 py-20 md:py-32">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<div className="inline-flex items-center gap-2 px-4 py-2 bg-white/10 backdrop-blur-sm rounded-full border border-white/20 text-white text-sm mb-6">
|
||||
<RocketLaunchIcon className="w-4 h-4" />
|
||||
<span className="font-medium">Innovation Roadmap</span>
|
||||
</div>
|
||||
|
||||
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6 leading-tight">
|
||||
What's Coming to IGNY8
|
||||
</h1>
|
||||
|
||||
<p className="text-xl md:text-2xl text-white/90 mb-8 leading-relaxed">
|
||||
We're building the future of AI-powered content marketing. Here's what's launching in 2026.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap justify-center gap-4">
|
||||
{renderCta(
|
||||
{ label: "Start Creating Today", href: "https://app.igny8.com/signup" },
|
||||
"px-8 py-4 bg-white text-[var(--color-primary)] rounded-lg font-semibold hover:bg-gray-100 transition-colors shadow-lg"
|
||||
)}
|
||||
{renderCta(
|
||||
{ label: "View Current Features", href: "/product" },
|
||||
"px-8 py-4 bg-white/10 backdrop-blur-sm text-white rounded-lg font-semibold hover:bg-white/20 transition-colors border border-white/20"
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* UPCOMING FEATURES TIMELINE */}
|
||||
{upcomingFeatures.map((phase, phaseIndex) => (
|
||||
<section key={phase.phase} className={`py-20 ${phaseIndex % 2 === 0 ? 'bg-white' : 'bg-gray-50'}`}>
|
||||
<div className="max-w-7xl mx-auto px-6">
|
||||
{/* Phase Header */}
|
||||
<div className="text-center mb-12">
|
||||
<div className="inline-flex items-center gap-3 mb-4">
|
||||
<span className={`px-6 py-2 rounded-full text-sm font-bold ${phase.badgeColor} shadow-lg`}>
|
||||
{phase.badge}
|
||||
</span>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
|
||||
{phase.phase}
|
||||
</h2>
|
||||
<div className="w-24 h-1 bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-purple)] mx-auto rounded-full" />
|
||||
</div>
|
||||
|
||||
{/* Features Grid */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
{phase.features.map((feature, index) => {
|
||||
const Icon = feature.icon;
|
||||
return (
|
||||
<div
|
||||
key={feature.title}
|
||||
className={`group relative bg-white rounded-2xl border-2 ${phase.borderColor} p-8 hover:shadow-2xl transition-all duration-300 hover:-translate-y-1`}
|
||||
>
|
||||
{/* Icon & Badge */}
|
||||
<div className="flex items-start justify-between mb-6">
|
||||
<div className={`p-4 rounded-xl bg-gradient-to-br ${feature.color} text-white shadow-lg group-hover:scale-110 transition-transform`}>
|
||||
<Icon className="w-8 h-8" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Title & Subtitle */}
|
||||
<h3 className="text-2xl font-bold text-gray-900 mb-2">
|
||||
{feature.title}
|
||||
</h3>
|
||||
<p className="text-sm font-medium text-gray-500 mb-4">
|
||||
{feature.subtitle}
|
||||
</p>
|
||||
|
||||
{/* Description */}
|
||||
<p className="text-gray-600 mb-6 leading-relaxed">
|
||||
{feature.description}
|
||||
</p>
|
||||
|
||||
{/* Bullet Points */}
|
||||
<ul className="space-y-3">
|
||||
{feature.bullets.map((bullet, bulletIndex) => (
|
||||
<li key={bulletIndex} className="flex items-start gap-3">
|
||||
<div className={`w-1.5 h-1.5 rounded-full bg-gradient-to-br ${feature.color} mt-2 flex-shrink-0`} />
|
||||
<span className="text-sm text-gray-600">{bullet}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
{/* Hover Accent */}
|
||||
<div className={`absolute inset-0 rounded-2xl bg-gradient-to-br ${feature.color} opacity-0 group-hover:opacity-5 transition-opacity -z-10`} />
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
))}
|
||||
|
||||
{/* CTA SECTION */}
|
||||
<section className="relative overflow-hidden bg-gradient-to-br from-[var(--color-success)] via-[var(--color-primary-dark)] to-[var(--color-primary)]">
|
||||
<div className="absolute inset-0 opacity-10">
|
||||
<div className="absolute inset-0 bg-[url('/marketing/images/hero-dashboard.png')] bg-cover bg-center scale-150 blur-3xl" />
|
||||
</div>
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(255,255,255,0.1),transparent_70%)]" />
|
||||
|
||||
<div className="relative max-w-4xl mx-auto px-6 py-24 md:py-32 text-center z-10">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-white mb-6">
|
||||
Start Creating Content Today
|
||||
</h2>
|
||||
<p className="text-xl text-white/90 mb-8 leading-relaxed">
|
||||
Don't wait for tomorrow's features. Start using IGNY8's powerful 8-stage pipeline today and scale your content production.
|
||||
</p>
|
||||
<div className="flex flex-wrap justify-center gap-4">
|
||||
{renderCta(
|
||||
{ label: "Get Started Free", href: "https://app.igny8.com/signup" },
|
||||
"px-8 py-4 bg-white text-[var(--color-primary)] rounded-lg font-semibold hover:bg-gray-100 transition-colors shadow-lg text-lg"
|
||||
)}
|
||||
{renderCta(
|
||||
{ label: "View Pricing", href: "/pricing" },
|
||||
"px-8 py-4 bg-white/10 backdrop-blur-sm text-white rounded-lg font-semibold hover:bg-white/20 transition-colors border border-white/20 text-lg"
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Upcoming;
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user