Mastering Campaigns

Welcome to the We Generate Campaign Tutorial. This guide explains the core pillars of our new case study architecture, ensuring every story we tell looks and feels premium.

The key to a great campaign is the balance between Metadata (Hard Data) and the Narrative (The Story).

01. Understanding Metadata

Every campaign starts with a robust frontmatter. We use five main blocks to define the identity and data of the case study:

1. Metadata: Defines the title, subtitle, and branding media (Cards and Hero).
2. Media Array: An interleaved set of assets for the story. Each item needs a `src` and a `mediaType` ('image' or 'video').
3. Insights: The "Heart" of the data. Includes a descriptive copy and the first row of impact numbers.
4. Results: The "Conclusion" of the data. High-level counters that sit before the footer.

02. The Narrative Engine

Our layout uses a Smart Alternating Grid. To control the flow, use the horizontal rule separator (`---`) in your Markdown.

• Each block of text separated by `---` will be paired with the next available item in the `media` array.
• The First Block is special: it automatically integrates the Campaign Title and uses a Vertical (9:16) media format.
• Subsequent blocks use a Horizontal (16:9) format and alternate sides (Text|Media -> Media|Text).

03. Interactive Sugar

We've added a layer of interactivity that rewards curiosity:

• Typography: Titles and subtitles are white by default but react with Brand Colors (Pink, Blue, Green, etc.) on hover. This is handled automatically by our `ColorService`.
• Media Reveal: Images and videos feature a Cinematic Zoom and elevation effect on hover, synchronized with the page's active color.
• Smart Counting: Numbers only start animating when they enter the viewport and feature a 60s memory reset.

04. Markdown Best Practices

The engine supports standard Markdown with some "premium" upgrades:

• Bold Text: Always renders in `--we-pink` using Gotham Bold (700).
• Tables: Use them for technical specs; they are automatically styled and responsive.
• Sub-headers: Use `###` for secondary points within a narrative block.

Now you are ready to generate Tomorrow's Virality.