One landing-page template for multiple campaign personas instead of one-off pages

What was happening

The campaign requirement called for several persona-specific landing pages. Each variation could use different hero content, imagery, product bundles, benefits, and FAQ answers. One existing campaign page served as the first content basis, while another would be used by QA or project management to verify that the documentation was reusable.

Why the obvious solution was not enough

The template needed to be flexible without becoming a generic page builder. Product bundles and FAQs were dynamic, but the conversion hierarchy still had to stay consistent so every campaign did not reinvent the customer journey.

How the solution works

1. Define the stable conversion structure first: hero, offer or bundle area, supporting benefits, editable FAQ, and campaign CTA.
2. Move campaign-specific values into editable fields or data objects instead of duplicating the section markup for each persona.
3. Make FAQ items repeatable so each landing page can have its own questions without code changes.
4. Keep product or bundle references data-driven so a campaign can change the offer without editing HTML inside the section.
5. Document which fields must be updated when creating a new page and which layout rules should not be changed.
6. Use a second real campaign content set as the acceptance test for the documentation. If another person cannot build the second page from the instructions, the template is not actually reusable.
7. Defer nonessential carousel work when it is explicitly outside the first acceptance scope instead of increasing the initial implementation risk.

const campaign = {
  hero: { heading, body, image },
  bundles: selectedBundleIds,
  benefits,
  faq: [
    { question: '...', answer: '...' },
    { question: '...', answer: '...' },
  ],
};

renderLandingPage(campaign);

What should be verified before shipping

• Create a second campaign page using only the documentation and editable configuration.
• Use a different FAQ count and confirm spacing and accordion behavior remain correct.
• Change the selected bundle set and verify the layout handles shorter or longer product titles.
• Test the page with the real paid-campaign parameters that will reach it.
• Confirm deferred components are visibly out of scope rather than half-implemented and accidentally shipped.

What changed

The landing-page work became a repeatable campaign system rather than a collection of one-off pages. That reduces development duplication and gives QA a consistent set of behaviors to verify across personas.

Reusable lesson

A reusable landing page is proven by the second page, not the first. Design the content model so someone else can create the next variation without editing the template.