# Item 6: Frontend Marketing Site Updates

**Priority:** High  
**Target:** Production Launch  
**Last Updated:** December 11, 2025

---

## Overview

Update and polish the marketing website including homepage, features pages, product pages, use-case pages, pricing page, about, and contact pages. Ensure consistent branding, clear value propositions, and conversion-optimized layouts.

---

## Current Implementation

### Marketing Site Structure

**Location:** `frontend/src/pages/` (marketing section)

**Current Pages:**
- Homepage
- Features (general)
- Pricing
- About
- Contact
- (Possibly others)

**Issues:**
- Content may be outdated or generic
- Feature descriptions don't match current capabilities
- Pricing page needs plan updates (from Item 2)
- No dedicated product pages for each module
- No use-case specific pages
- Missing social proof and testimonials
- CTAs not optimized

---

## Required Pages and Updates

### A. Homepage

**Location:** `frontend/src/pages/marketing/Home.tsx` or similar

#### Current Issues
- Value proposition unclear or generic
- Feature highlights incomplete
- Workflow demonstration missing
- CTAs not prominent

#### Required Sections

**1. Hero Section**

**Content:**
- **Headline:** "AI-Powered Content Creation for SEO-Driven Websites"
- **Subheadline:** "Transform your content strategy with semantic AI. Plan, write, and publish high-quality content that ranks."
- **Primary CTA:** "Start Free Trial" (14-day trial, no credit card)
- **Secondary CTA:** "See How It Works" (scroll to demo video)
- **Hero Visual:** Animated workflow diagram or product screenshot

**Design:**
- Full-width, above fold
- Gradient background or image
- Logo grid: "Trusted by [companies/users]"

---

**2. Problem Statement**

**Content:**
- "Content creation is time-consuming and expensive"
- "SEO is complex and constantly changing"
- "Scaling content while maintaining quality is hard"
- Visual: Problem illustration

---

**3. Solution Overview**

**Content:**
- "IGNY8 uses semantic AI to automate your entire content workflow"
- 3 key benefits:
  1. **Plan:** AI clusters keywords into strategic topics
  2. **Write:** Generate SEO-optimized content in minutes
  3. **Publish:** Direct WordPress integration
- Visual: 3-column benefit cards

---

**4. Feature Highlights**

**Content:**
- AI Planner: Keyword extraction → Clustering → Idea generation
- AI Writer: Content generation → Image creation → SEO optimization
- Automation: End-to-end workflow automation
- Analytics: Track performance and ROI

**Design:**
- 4 feature cards with icons
- Each card links to detailed feature page

---

**5. How It Works**

**Content:**
- Step-by-step workflow:
  1. Add keywords or import from GSC
  2. AI clusters keywords semantically
  3. Generate content ideas for each cluster
  4. AI writes SEO-optimized articles
  5. Generate images with AI
  6. Publish to WordPress automatically

**Visual:**
- Animated step diagram
- Or short video demo (30-60 seconds)

---

**6. Social Proof**

**Content:**
- User testimonials (3-4 quotes)
- Usage statistics:
  - "10,000+ articles generated"
  - "500+ active users"
  - "95% time saved on content creation"
- Company logos (if applicable)

**Design:**
- Testimonial cards with photos
- Stats counter animation

---

**7. Pricing Preview**

**Content:**
- "Plans for every team size"
- Show 3 plan tiers with key features
- CTA: "View Full Pricing" → /pricing

---

**8. Final CTA**

**Content:**
- "Ready to transform your content strategy?"
- Primary CTA: "Start Free Trial"
- Secondary CTA: "Schedule Demo"

---

### B. Features Page

**Location:** `frontend/src/pages/marketing/Features.tsx`

#### Required Sections

**1. Features Overview**

**Content:**
- List all major features with descriptions
- Organized by category:
  - **Planning & Strategy**
    - Keyword Extraction
    - Semantic Clustering
    - Content Idea Generation
    - SAG Mapping (if implemented)
  - **Content Creation**
    - AI Writing (multiple lengths)
    - Content Structure Templates
    - SEO Optimization
    - Tone & Style Control
  - **Visual Content**
    - Image Prompt Generation
    - AI Image Creation
    - Image Optimization
  - **Publishing & Distribution**
    - WordPress Integration
    - Automated Publishing
    - Content Scheduling
  - **Automation**
    - End-to-end Workflow Automation
    - Batch Processing
    - Custom Workflows
  - **Analytics & Insights**
    - Content Performance Tracking
    - SEO Metrics
    - Credit Usage Reports

**Design:**
- Accordion or tab-based navigation
- Feature cards with icons
- "Learn More" links to detail pages

---

**2. Feature Comparison Table**

**Content:**
- Compare features across plans
- Show which features are in which tier

**Table:**

| Feature | Free | Starter | Growth | Pro | Enterprise |
|---------|------|---------|--------|-----|------------|
| Keywords | 100 | 1,000 | 5,000 | 25,000 | Unlimited |
| AI Clustering | ✓ | ✓ | ✓ | ✓ | ✓ |
| Content Generation | ✓ | ✓ | ✓ | ✓ | ✓ |
| Image Generation | ✓ | ✓ | ✓ | ✓ | ✓ |
| WordPress Integration | ✓ | ✓ | ✓ | ✓ | ✓ |
| Automation | ✗ | ✗ | ✓ | ✓ | ✓ |
| API Access | ✗ | ✗ | ✓ | ✓ | ✓ |
| Priority Support | ✗ | ✗ | ✗ | ✓ | ✓ |

---

### C. Product Pages (One per Module)

**Create dedicated pages:**

#### 1. AI Planner Page

**URL:** `/product/planner`

**Sections:**
- Hero: "Plan Your Content Strategy with AI"
- Problem: Manual keyword research is slow
- Solution: Automated clustering and idea generation
- Features:
  - Keyword extraction from GSC
  - Semantic clustering
  - Content idea generation with outlines
  - Visual cluster mapping
- Use cases:
  - Blog content planning
  - Topic cluster strategy
  - Content calendar creation
- Demo video or screenshots
- CTA: "Try Planner Free"

---

#### 2. AI Writer Page

**URL:** `/product/writer`

**Sections:**
- Hero: "AI-Powered Content Creation"
- Problem: Writing is time-consuming and expensive
- Solution: Generate SEO-optimized content in minutes
- Features:
  - Multiple article lengths (500, 1000, 1500 words)
  - Content structure templates
  - SEO keyword integration
  - Tone and style control
- Use cases:
  - Blog posts
  - Product descriptions
  - Landing pages
  - Guides and tutorials
- Demo video or screenshots
- CTA: "Start Writing with AI"

---

#### 3. Automation Page

**URL:** `/product/automation`

**Sections:**
- Hero: "Automate Your Entire Content Workflow"
- Problem: Managing content at scale is complex
- Solution: End-to-end automation from keywords to publication
- Features:
  - 7-stage automated workflow
  - Batch processing
  - Scheduled runs
  - Progress monitoring
- Use cases:
  - Agency content production
  - E-commerce catalog automation
  - Multi-site management
- Demo video or screenshots
- CTA: "Automate Your Workflow"

---

### D. Use-Case Pages

**Create industry/persona-specific pages:**

#### 1. For Agencies

**URL:** `/use-cases/agencies`

**Content:**
- Hero: "Scale Content Production for Your Clients"
- Challenges: Managing multiple clients, tight deadlines, budget constraints
- Solution: Automate content at scale without sacrificing quality
- Features relevant to agencies:
  - Multi-site management
  - Team collaboration
  - White-label potential (if applicable)
  - Bulk operations
- Case study or testimonial
- Pricing: Focus on Growth and Pro plans
- CTA: "Book Agency Demo"

---

#### 2. For E-commerce

**URL:** `/use-cases/ecommerce`

**Content:**
- Hero: "Generate Product Content at Scale"
- Challenges: Large product catalogs, SEO for products, content updates
- Solution: Automate product descriptions, category pages, blog content
- Features relevant to e-commerce:
  - Product description generation
  - Category landing pages
  - SEO-optimized content
  - Image generation for products
- Case study or testimonial
- CTA: "Start Free Trial"

---

#### 3. For Content Teams

**URL:** `/use-cases/content-teams`

**Content:**
- Hero: "Supercharge Your Content Team"
- Challenges: Content velocity, consistency, SEO optimization
- Solution: AI assists writers, not replaces them
- Features relevant to content teams:
  - Content planning and ideation
  - Draft generation
  - SEO optimization
  - Workflow automation
- Case study or testimonial
- CTA: "Try Team Plan"

---

### E. Pricing Page

**Location:** `frontend/src/pages/marketing/Pricing.tsx`

#### Required Updates (From Item 2)

**1. Plan Tiers**

Display all 5 tiers:
- Free (hidden from public, internal only)
- Starter ($29/mo or $299/year)
- Growth ($99/mo or $1,019/year)
- Pro ($299/mo or $3,077/year)
- Enterprise (Custom pricing)

**2. Monthly/Annual Toggle**

- Default: Monthly
- Show savings badge for annual ("Save 15%")
- Update prices dynamically on toggle

**3. Plan Cards**

**Each card shows:**
- Plan name
- Price (monthly or annual)
- "Most Popular" badge (Growth plan)
- Key features (5-7 bullets):
  - Monthly credits
  - Max keywords, clusters, content, images
  - Key features (automation, API, support)
- CTA button:
  - Free: "Start Free"
  - Paid: "Start Trial" (14 days)
  - Enterprise: "Contact Sales"

**4. Detailed Comparison Table**

Show full feature comparison (expandable):
- All features listed
- Checkmarks or values per plan
- Tooltips explaining features

**5. Credit System Explanation**

**Section:**
- "How Credits Work"
- What credits are used for
- How they're consumed (per operation)
- How to buy more
- Credit rollover rules (if applicable)

**Example:**

| Operation | Credits |
|-----------|---------|
| Keyword Clustering | 10 credits |
| Idea Generation | 15 credits |
| Content Generation (1000 words) | 10 credits |
| Image Generation | 5 credits per image |

**6. FAQ Section**

**Questions to answer:**
- What happens when I run out of credits?
- Can I change plans mid-month?
- Do unused credits roll over?
- What's included in Enterprise?
- Is there a free trial?
- Can I cancel anytime?
- What payment methods do you accept?
- Do you offer refunds?

**7. CTA Section**

- "Still have questions?"
- CTA: "Contact Sales" or "Schedule Demo"
- Phone number, email, or chat option

---

### F. About Page

**Location:** `frontend/src/pages/marketing/About.tsx`

#### Required Sections

**1. Mission Statement**

- "Our mission is to democratize AI-powered content creation..."
- Why IGNY8 exists
- Vision for the future

**2. Team** (if applicable)

- Founder(s) photo and bio
- Key team members
- Company history/journey

**3. Technology & Approach**

- "Built on semantic AI and NLP"
- Explanation of SAG architecture (simplified)
- Why our approach is different/better

**4. Values**

- Quality over quantity
- User-centric design
- Transparency
- Innovation

**5. Contact**

- How to reach us
- Office location (if applicable)
- Link to Contact page

---

### G. Contact Page

**Location:** `frontend/src/pages/marketing/Contact.tsx`

#### Required Elements

**1. Contact Form**

**Fields:**
- Name (required)
- Email (required)
- Company (optional)
- Message (required)
- Subject dropdown:
  - General Inquiry
  - Sales
  - Support
  - Partnership
  - Press

**2. Alternative Contact Methods**

- Email: support@igny8.com (or similar)
- Phone: (if available)
- Live chat: (if enabled)
- Social media links

**3. Support Resources**

- Link to Help Center / Documentation
- Link to FAQ
- Link to Community (if applicable)

**4. Office Location** (if applicable)

- Address
- Map embed

---

## Design & Branding Guidelines

### Visual Design

**Color Scheme:**
- Primary: Brand blue/purple
- Secondary: Accent colors
- Neutral: Grays for text and backgrounds

**Typography:**
- Headings: Bold, clear hierarchy
- Body: Readable, 16px+ base size
- Code/monospace: For technical content

**Imagery:**
- Product screenshots
- Workflow diagrams
- Illustrations for concepts
- Real user photos for testimonials

**Icons:**
- Consistent icon set throughout
- Use for feature highlights, benefits

---

### Tone & Voice

**Brand Voice:**
- Professional but approachable
- Technical but not jargon-heavy
- Confident but not boastful
- Helpful and supportive

**Messaging Principles:**
- Focus on benefits, not just features
- Use clear, concise language
- Avoid marketing fluff
- Be specific with numbers and results
- Address pain points directly

---

### Call-to-Actions

**Primary CTAs:**
- "Start Free Trial" (most common)
- "Get Started Free"
- "Try IGNY8 Free"

**Secondary CTAs:**
- "Schedule Demo"
- "Contact Sales"
- "Learn More"
- "View Pricing"

**CTA Design:**
- Primary: Large, prominent button (brand color)
- Secondary: Outline button or link
- Clear contrast with background
- Include arrow or icon for clarity

---

## SEO Optimization

### Meta Tags

**Each page needs:**
- Title tag (50-60 chars)
- Meta description (150-160 chars)
- OG tags (for social sharing)
- Schema markup (Organization, Product, FAQ)

**Example (Homepage):**
```html
<title>IGNY8 - AI-Powered Content Creation for SEO-Driven Websites</title>
<meta name="description" content="Automate your content strategy with semantic AI. Generate SEO-optimized articles, cluster keywords, and publish to WordPress automatically.">
<meta property="og:title" content="IGNY8 - AI Content Creation Platform">
<meta property="og:description" content="Transform your content strategy with AI...">
<meta property="og:image" content="https://igny8.com/og-image.jpg">
```

---

### Keyword Optimization

**Target Keywords per Page:**

| Page | Primary Keyword | Secondary Keywords |
|------|----------------|-------------------|
| Homepage | AI content creation | SEO automation, content strategy, semantic AI |
| Features | AI content platform features | content automation tools, SEO software |
| Planner | AI content planning | keyword clustering, topic research, content ideation |
| Writer | AI article writer | content generation, SEO writing, blog automation |
| Pricing | AI content pricing | content automation cost, SEO software pricing |
| Agencies | AI content for agencies | agency content automation, white-label content |

---

### Performance

**Requirements:**
- Page load time < 3 seconds
- Lighthouse score > 90
- Mobile-friendly (responsive)
- Core Web Vitals: Pass all metrics

---

## Implementation Plan

### Phase 1: Content Audit & Updates (Week 1)
1. ✅ Audit all existing marketing pages
2. ✅ Identify outdated or missing content
3. ✅ Write new content for homepage
4. ✅ Update features page content
5. ✅ Draft about and contact pages

### Phase 2: New Pages (Week 1-2)
1. ✅ Create product pages (Planner, Writer, Automation)
2. ✅ Create use-case pages (Agencies, E-commerce, Content Teams)
3. ✅ Write content for each page
4. ✅ Design page layouts

### Phase 3: Pricing Page (Week 2)
1. ✅ Implement plan comparison table
2. ✅ Add monthly/annual toggle
3. ✅ Add credit cost table
4. ✅ Write FAQ section
5. ✅ Test all CTAs

### Phase 4: Design & Branding (Week 2-3)
1. ✅ Finalize color scheme and typography
2. ✅ Create or source imagery
3. ✅ Design icons for features
4. ✅ Create demo videos or screenshots
5. ✅ Ensure mobile responsiveness

### Phase 5: SEO & Performance (Week 3)
1. ✅ Add meta tags to all pages
2. ✅ Implement schema markup
3. ✅ Optimize images (compression, lazy loading)
4. ✅ Test page speed
5. ✅ Submit sitemap to search engines

---

## Success Metrics

- ✅ All pages load in < 3 seconds
- ✅ Lighthouse score > 90 for all pages
- ✅ Mobile responsive (all pages)
- ✅ Clear value proposition on homepage
- ✅ Pricing page matches Item 2 specifications
- ✅ CTAs prominent and clear
- ✅ SEO meta tags on all pages
- ✅ Professional, consistent design
- ✅ User feedback: easy to understand offering

---

## Related Files Reference

### Frontend Pages
- `frontend/src/pages/marketing/Home.tsx`
- `frontend/src/pages/marketing/Features.tsx`
- `frontend/src/pages/marketing/Pricing.tsx`
- `frontend/src/pages/marketing/About.tsx`
- `frontend/src/pages/marketing/Contact.tsx`
- `frontend/src/pages/marketing/product/Planner.tsx` (NEW)
- `frontend/src/pages/marketing/product/Writer.tsx` (NEW)
- `frontend/src/pages/marketing/product/Automation.tsx` (NEW)
- `frontend/src/pages/marketing/use-cases/Agencies.tsx` (NEW)
- `frontend/src/pages/marketing/use-cases/Ecommerce.tsx` (NEW)
- `frontend/src/pages/marketing/use-cases/ContentTeams.tsx` (NEW)

### Components
- `frontend/src/components/marketing/HeroSection.tsx`
- `frontend/src/components/marketing/FeatureCard.tsx`
- `frontend/src/components/marketing/PricingCard.tsx`
- `frontend/src/components/marketing/TestimonialCard.tsx`
- `frontend/src/components/marketing/CTASection.tsx`

---

## Notes

- Keep messaging consistent across all pages
- Test all CTAs and forms before launch
- Consider A/B testing headlines and CTAs
- Update screenshots when product UI changes
- Consider adding live chat widget
- Plan for ongoing content updates (blog, case studies)
- Consider multilingual support (future phase)