708 lines
17 KiB
Markdown
708 lines
17 KiB
Markdown
# 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)
|