igny8/docs/plans/FINAL-PRELAUNCH.md

IGNY8 Launch Tasks - Complete Implementation Guide

---

PHASE 0 ✅ Completed

1. Design System Consolidation

✅ Update the rules files, to follow the rules in all changes for styles, for components, for coding rules, to use consistent design

---

2. Visual Verifications

2.1 ✅ - All logos and images to update for dark and light color scheme layout, and logo design final as well as favicon, and move images to right folder 2.2 ✅ - Sidebar menu rearrange for items that need rearranging, and reduce padding/spacing 2.3 ✅ - Fix the sidebar active/selected menu and hover color 2.4 ✅ - Assign manually the colors to each module, and verify and fix that in each page and progress bar consistent colors are used, across module pages, automation and dashboard 2.5 ✅ - Use colors in setup, sites and account and all its subpages

---

3. AI Provider Configuration

3.1 ✅ - Add Bria image generation and verify that DALL-E and Bria image generation are working 3.2 ✅ - Add and verify Claude API and models 3.3 ✅ - Update the 2 image sizes to be landscape and 2 square, and update the template to use full width image on full section, and half width content section

---

PHASE 1: App UI Quick Fixes

1.1 - Credits Display Fix ✅

Location: App header component

Current: Shows abbreviated format (e.g., "12k")

Required: Show full number (e.g., "12,000")

---

1.2 - Sites Card Redesign ✅

Location: Sites listing/grid component

Changes required:

• Reduce padding to half of current value
• Use smaller badges for all 3 badges
• Move URL to below the site title (currently beside or above)
• Show description only when not empty (hide element completely if empty)

---

1.3 - Page Loading Standardization ✅

Current problem: Each page has its own loading spinner/text implementation

Required solution:

• Remove all individual page loading implementations
• Implement loading state in global app wrapper (same component where sidebar/header resides)
• Single consistent spinner/text across entire app
• Same approach as standard page margins/padding (defined once globally)

Location: App layout wrapper component (where sidebar/header are defined)

---

1.4 - Global Layout Spacing ✅

Required:

• Define exact padding in global app layout ONLY:
  • Below header: 12px
  • After sidebar: 12px
  • Top/bottom: 12px
  • Left/right: 12px
• Remove ALL inner margins and padding from internal page main wrappers
• Every page should inherit spacing from global layout, not define its own

Location: Global app layout component

---

1.5 - Button Standardization ✅

Current problems:

1. Icon-on-top bug: Some buttons render icon above text instead of inline
2. Inconsistent type attribute: Some buttons have type="button", some don't
3. No unified component usage across app

Required solution:

Create/enforce global button components for each variant:

Variant	Component	Usage
Standard button	<Button>	Default actions
Button with icon	<Button icon={...}>	Actions with icon left/right of text
Icon-only button	<IconButton>	Toolbar actions, compact UI
Button group	<ButtonGroup>	Related actions grouped together
Toggle button	<ToggleButton>	On/off states

Implementation requirements:

• All variants should NOT require type="button" in the HTML output (handle internally in component)
• Icon must render INLINE with text (flex row), never on top (flex column)
• Single source of truth for each button type
• Audit entire codebase and replace all ad-hoc button implementations

Audit command:

grep -rn "<button" src/ --include="*.jsx" --include="*.tsx"

---

1.6 - Legacy Cleanup ❌

Action: Remove all unused pages, routes, and related data from:

• System codebase
• Documentation

Note: Identify specific legacy items before removal

---

PHASE 2: App Features & Improvements

2.1 - Setup Wizard Redesign ✅

Current problems:

• Converted from modal - not a good design
• Unnecessary header and icon on wizard main page
• Unclear intro cards

Required changes:

1. Convert to proper page style (like other app pages)
2. Remove unnecessary header from wizard main page
3. Create cleaner, better intro cards that clearly explain:
   • What is being provided through wizard
   • What each step accomplishes
   • What user will have after completion

---

2.2 - Dashboard Widgets (3 new) ✅

Location: Home/Dashboard page

Widget 1: Sites Overview ✅

• Show sites with small data/status info
• Include action buttons to directly navigate to:
  • Site settings
  • Site actions
• Compact format showing key site health indicators

Widget 2: Credits Usage ✅

• Remaining credits display
• AI runs count
• Style: Match existing site dashboard widget style
• Visual progress indicator for usage

Widget 3: Account Info ✅

Display the following account-related information:

• Credits consumed (this billing period)
• Credits remaining
• Reset day (when credits refresh)
• Last payment date
• Next payment due date
• Current plan/package type

Note: Evaluate and track what account-related info is most valuable to display

---

2.3 - WordPress & Content Templates ❌

2.3.1 - Post Template Optimization

• Review and optimize WordPress post template structure
• Improve SEO elements
• Ensure clean HTML output

2.3.2 - Header Section Cleanup

Current: Shows various tags including non-public/non-SEO-friendly ones

Required:

• Show ONLY publicly visible, SEO-friendly tags
• Show ONLY tags that are working/functional
• Remove all other tags from header section

---

PHASE 3: Credits, Pricing & Payments

3.1 - Credits Structure ✅

3.1.1 - Token Costing ✅

• Finalize credits token costing
• Define limits per plan
• Document per-plan structure

3.1.2 - Pricing Display ✅

• Finalize what to show in pricing plans on frontend
• Finalize what to show in pricing plans in-app
• Ensure consistency between both

3.1.3 - Subscription Verification ✅

• Verify correct renewal date logic
• Verify correct reset of credits date
• Test edge cases (upgrades, downgrades, mid-cycle changes)

---

3.2 - Payment Integration ✅

3.2.1 - Stripe Integration ✅

• Full payment flow integration
• Subscription management
• Webhook handling

3.2.2 - PayPal Integration ✅

• Full payment flow integration
• Subscription management
• Webhook handling

---

3.3 - Plans & Packages ✅

3.3.1 - Upgrade Flow ✅

• Credits package upgrade flow
• Plan upgrade flow
• Proration handling

3.3.2 - Service Packages ✅

Create two package types:

Package	Type	Includes
Setup App	One-time	Initial configuration, onboarding
Campaign Management	Monthly	Keyword selection, ongoing management

---

PHASE 4: Email Setup ✅

4.1 - Email Services ✅

Use Case	Service	Free Limit	Why
Transactional	Resend	3,000/mo	Better deliverability, faster delivery, cleaner API
Marketing	Brevo	9,000/mo	Higher volume, built-in templates, unsubscribe management, analytics

Total free capacity: 12,000 emails/month

---

4.2 - Email Implementation ✅

4.2.1 - Service Configuration ✅

• Configure Resend for transactional emails
• Configure Brevo for marketing emails
• Set up API keys and authentication

4.2.2 - App Integration ✅

• Integrate both providers into app backend
• Create email service abstraction layer
• Route emails to correct provider based on type

4.2.3 - Email Triggers Definition ✅

Define and configure when emails are triggered:

Email Type	Trigger	Service
Signup confirmation	User registration	Resend
Password reset	User request	Resend
Alert notifications	System events	Resend
Newsletters	Scheduled/manual	Brevo
Marketing campaigns	Scheduled/manual	Brevo

Action: Audit backend/frontend to ensure all triggers are configured

4.2.4 - Mail History Log ✅

Requirements:

• Store small mail details (not full content)
• Archive every 30 days
• Compact format to minimize database clutter
• Must remain accessible for later reference

Suggested schema:

- id
- email_type (transactional/marketing)
- recipient_email (hashed or partial)
- subject_summary
- status (sent/failed/bounced)
- sent_at
- archived_at

4.2.5 - Verification ✅

• Verify all signup emails sending successfully
• Verify all alert emails sending successfully
• Verify all notification emails sending successfully
• Create test suite for email delivery

---

PHASE 5: Pipeline & Testing

5.1 - Pipeline Verification

• Run complete manual pipeline end-to-end
• Run complete automated pipeline end-to-end
• Document and fix any issues found

---

5.2 - QA & Testing

5.2.1 - CRUD Operations

• Collect current CRUD implementation from codebase
• Visually verify each operation
• Functionally verify each operation manually
• Document any issues

5.2.2 - Automation Pipeline

• Full end-to-end test
• From clustering to publishing
• Verify each stage completes correctly

5.2.3 - Credits Accuracy

• Verify accurate credits consumption
• Verify accurate cost calculations
• Test edge cases (zero credits, negative, overflow)

---

PHASE 6: Data Cleanup & Deployment

6.1 - Data Cleanup

Clear ALL IGNY8 data:

• Sites
• Images
• Content
• All database tables
• All logs

---

6.2 - V1.0 Configuration Lock

• Final configuration lock for V1.0 release
• Document all configuration values
• No changes after lock without version bump

---

6.3 - User Testing

New User Signup Test

• Signup 3 new users on Starter plan - verify
• Signup 3 new users on Growth plan - verify
• Signup 3 new users on Scale plan - verify

Personal Deployment

• Use own account to deploy personal sites

---

6.4 - Site Deployments

Deploy and verify the following sites:

• homeg8.com
• massagersmart.com
• Alorig.com
• SalmanSadiq.com
• AIAI.pk

---

PHASE 7: Documentation & Media

7.1 - Documentation Updates ✅

• ✅ 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.1 - Feature Screencasts ❌

• Create screencast of healthy data from each page
• Show real/representative data, not empty states

7.2.2 - Feature Explainer Videos ❌

• Create videos explaining each feature
• Focus on value proposition and use cases

7.2.3 - Tutorial Videos ❌

• Create functional screencasts
• How-to video tutorials for common workflows

---

PHASE 8: Frontend Marketing Site

⚠️ DEPENDENCY: This phase can ONLY be finalized after Phase 7 documentation is complete

8.1 - Site Content ✅

• ✅ Complete site content based on:
  • Final documentation
  • Final feature set
  • Help documentation
• ✅ 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 ✅

Simple pricing page with three plans:

Plan	Price
Starter	$99/mo
Growth	$199/mo
Scale	$299/mo

• ✅ 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 ✅

Location: Frontend marketing site ONLY (not in-app)

• ✅ 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"

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

---

Execution Summary

Phase	Scope	Difficulty	Dependencies
1	App UI quick fixes	Easy	None
2	App features	Medium	Phase 1
3	Credits/Payments	Medium	None
4	Email setup	Medium	None
5	Pipeline/Testing	Medium	Phases 1-4
6	Cleanup/Deploy	Medium	Phase 5
7	Documentation	Medium	Phase 6
8	Frontend site	Easy-Medium	Phase 7 (hard dependency)

---

Parallel Execution

Can run simultaneously:

• Phase 1 + Phase 3 + Phase 4 (all independent)
• Phase 2 (after Phase 1) + Phase 3 + Phase 4

Must be sequential:

• Phase 5 → Phase 6 → Phase 7 → Phase 8