Social Content Calendar Engine - PRD

# Social Content Calendar Engine - PRD

## Overview
ContentCal is an AI-powered social content calendar platform that helps creators, marketers, and businesses plan, generate, and schedule platform-specific content across Instagram, X (Twitter), and LinkedIn.

## Target Users
- Solo entrepreneurs/creators
- Small business owners
- Marketing teams/agencies

## Core Features

### 1. Landing Page
- Hero section with value proposition
- Platform badges (Instagram, X, LinkedIn)
- Features overview (AI-Powered Content, Visual Calendar, Brand Voice Lock, Smart Templates, Flexible Export, Goal Alignment)
- Social proof stats
- Call-to-action for onboarding

### 2. Onboarding Flow (4 Steps)
1. **About You**: Business name, industry, user type selection
2. **Platforms**: Select social platforms to target
3. **Goals**: Define content objectives (awareness, engagement, leads, sales, authority)
4. **Brand Voice**: Choose voice traits and set forbidden topics

### 3. Dashboard
- Stats overview (Total Posts, Scheduled, Published, Drafts)
- Quick action cards (Generate Content, View Calendar, Browse Templates)
- Today's content preview
- Brand voice summary

### 4. Content Calendar
- Monthly calendar view with navigation
- Today button for quick access
- Click-to-create on any date
- Post preview cards on calendar cells
- Edit/Delete/Duplicate actions

### 5. AI Content Generator
- Platform selection (Instagram, X, LinkedIn)
- Content goal selection
- Content type templates (Value Tip, Story, How-To, List)
- Optional topic input
- AI-generated content with:
  - Hook (attention-grabbing opening)
  - Body (main content)
  - CTA (call to action)
  - Hashtags (platform-specific)
  - Creative direction
- Copy and save functionality

### 6. Brand Voice Configuration
- Voice personality traits (up to 4)
- Tone description field
- Voice sample input
- Forbidden topics list
- Real-time voice preview

### 7. Content Templates
- Pre-built content frameworks:
  - Product Launch
  - Behind the Scenes
  - Value Tip
  - Customer Story
  - Industry News
- Category filtering
- Template detail modal with structure breakdown
- Copy and use functionality

### 8. Export Options
- **CSV**: For spreadsheet apps (Excel, Google Sheets)
- **ICS**: For calendar apps (Google Calendar, Apple Calendar, Outlook)
- **JSON**: Notion-ready structured data
- Platform and date range filters

## Technical Implementation

### Frontend Stack
- React 19 with React Router
- Tailwind CSS with custom design system
- shadcn/ui components
- lucide-react icons
- date-fns for date handling
- sonner for toast notifications
- LocalStorage for data persistence (MOCK - no backend integration)

### Design System
- Clean, minimal SaaS aesthetic
- Primary color: Ocean Blue (#3B82F6)
- Platform-specific colors for Instagram, Twitter, LinkedIn
- Status colors for draft, scheduled, published, review
- Custom typography: Inter (body), Space Grotesk (headings)
- Light/dark mode support via CSS custom properties

### Data Model (LocalStorage)
```javascript
{
  user_profile: {
    businessName: string,
    userType: string,
    industry: string,
    platforms: string[],
    goals: string[]
  },
  brand_voice: {
    traits: string[],
    sample: string,
    forbiddenTopics: string[],
    toneDescription: string
  },
  content_posts: [{
    id: string,
    hook: string,
    body: string,
    cta: string,
    hashtags: string[],
    platform: string,
    status: string,
    scheduledDate: string,
    createdAt: string
  }],
  templates: [...default templates]
}
```

## IMPORTANT NOTES

### MOCK Implementation
⚠️ **This is a FRONTEND PROTOTYPE only**. The following features are MOCKED:
- AI content generation uses client-side templates, not actual LLM API
- Data is stored in localStorage (no database)
- No user authentication
- No actual post scheduling to social platforms
- Export downloads files but doesn't integrate with scheduling tools

### Future Backend Requirements
To make this production-ready, would need:
1. Backend API for user authentication
2. LLM integration (OpenAI/Claude) for actual AI content generation
3. MongoDB database for persistent storage
4. OAuth integrations for social platforms
5. Scheduling service for automated posting

## File Structure
```
/app/frontend/src/
├── components/
│   ├── common/
│   │   ├── ContentCard.jsx
│   │   ├── PlatformBadge.jsx
│   │   └── StatusBadge.jsx
│   ├── layout/
│   │   ├── AppLayout.jsx
│   │   └── Navbar.jsx
│   └── ui/
│       └── [shadcn components]
├── lib/
│   ├── store.js
│   └── utils.js
├── pages/
│   ├── LandingPage.jsx
│   ├── OnboardingPage.jsx
│   ├── Dashboard.jsx
│   ├── CalendarPage.jsx
│   ├── ContentGenerator.jsx
│   ├── BrandVoicePage.jsx
│   ├── TemplatesPage.jsx
│   └── ExportPage.jsx
├── App.js
├── App.css
└── index.css
```

## Routes
- `/` - Landing page
- `/onboarding` - Multi-step onboarding
- `/dashboard` - Main dashboard
- `/calendar` - Content calendar view
- `/generate` - AI content generator
- `/brand-voice` - Brand voice settings
- `/templates` - Template library
- `/export` - Export options