Front-End Offer Page Workflow

Overview

Build premium front-end offer pages for done-for-you service offerings. These pages convert warm traffic into booked diagnostic calls. Use when client has a packaged offer, knows their audience, and has at least one proof point.

Owner Kathryn Brown

Duration 2-4 hours

Artifacts 1 output (HTML page)

Context Required

TemplateGolden Example

TemplatePage Template

ReferenceDesign System

ReferenceConvertri Rules

ValidationQC Checklist

InputCompleted Inputs Template

Process Flow

flowchart LR A[[GATHER INPUTS]] --> B[[VALIDATE]] B --> C[[BUILD PAGE]] C --> D[[QC CHECK]] D --> E[[DELIVER]] style E fill:#0a0a0a,stroke:#0a0a0a,color:#f8f7f4

Process Guide

Human-Readable Reference

Gather Inputs

Complete inputs template with offer details, positioning, proof

Use the inputs template to capture all required information:

Offer architecture (name, price, timeline, deliverables)
Positioning (who it's for, who it's not, key distinction)
Transformation framework (symptom → constraint → system → outcome)
Proof (testimonials with specific outcomes)
Funnel context (where page sits, CTA destination)
Brand constraints (words to avoid, do not mention)

Output

Completed inputs template

Validate Inputs

Confirm all required fields are complete before building

Do not proceed with gaps. Required minimums:

Offer name, price, timeline defined
3+ "who it's for" criteria
3+ "who it's NOT for" disqualifiers
Key distinction that justifies price
3+ primary objections (become FAQ)
Complete transformation framework
At least one testimonial with specific outcome
Pull-quote identified
CTA text and destination URL

If anything is missing, ask clarifying questions before proceeding.

Output

Validated inputs (ready to build)

Build Page

Generate HTML following template structure and agent instructions

Build sections in order:

Header (logo + CTA)
Hero (who, what, timeline visual, CTA)
Problem (validate their situation)
Distinction (justify price — this vs. not this)
How It Works (transformation framework with real examples)
Your Time Investment (their hours, not deliverables)
What You Get (deliverables list)
For You / Not For You (qualification)
Proof (featured testimonial with pull-quote)
Investment (price, includes, CTA)
FAQ (objection handling)
Final CTA
Footer

Critical: Follow Convertri rules (no CSS variables, no mailto, hardcoded colors).

Output

Draft HTML page

QC Check

Validate against checklist before delivery

Run through QC checklist. Key validation points:

Technical: Zero var(--), zero mailto, gold scrollbar present
5-Second Test: Who, what, CTA clear above fold
Distinction: Price justified, not just stated
Proof: Testimonials show transformation, not praise
Interactive: Click states reveal content, not cosmetic
Copy: No AI patterns, no weak words, "stalled" not "stuck"
Visual: For You has gold border, Not For You muted

Output

QC checklist (all items passed)

Deliver

Export final HTML with correct naming convention

Final file naming: [offer-name]-v[version].html

Example: deploy-sprint-v3.html

Deliver HTML file. Ready for Convertri upload or direct hosting.

Output

Final HTML page

Executable Workflow

Copy → Paste → Run

RUN THIS WORKFLOW STEP BY STEP STARTING RIGHT NOW

================================================================================
PROCESS 1: INPUTS ANALYST
================================================================================

TASK:
Gather all required context for building a front-end offer page.

Ask about each section. Do not proceed until complete:

1. OFFER ARCHITECTURE
   - What is the offer name?
   - What is the price?
   - What is the timeline/duration?
   - What's included? (deliverables, sessions, artifacts)
   - What is this NOT? (coaching, templates, courses, ongoing support)

2. POSITIONING
   - Who is this for? (minimum 3 specific criteria)
   - Who is this NOT for? (minimum 3 disqualifiers)
   - What are the primary objections/skepticism? (minimum 3)
   - What is the key distinction that justifies the price vs. cheaper alternatives?

3. TRANSFORMATION FRAMEWORK
   - What symptom does the buyer come in with? (surface problem)
   - What is the upstream constraint? (root cause)
   - What system/asset gets built? (solution)
   - What is the outcome? (measurable change)

4. PROOF
   - Who is the featured testimonial? (name, title, company)
   - What is the full quote?
   - What is the strongest single line? (becomes pull-quote)
   - What specific outcome should be highlighted?
   - Is there a supporting testimonial?

5. FUNNEL CONTEXT
   - Where does this page sit in the buyer journey?
   - What do visitors already know before arriving?
   - What is the primary CTA text?
   - What is the CTA destination URL?
   - What is the CTA subtext? (lowers commitment anxiety)

6. BRAND & VOICE
   - What design system? (default: AOS)
   - What voice/tone constraints?
   - What words should be avoided?
   - What should NOT be mentioned?

Continue asking clarifying questions until ALL sections are complete.

TRANSITION:
"I have all the inputs. Let me hand this to the Page Architect to structure the page. Ready?"

================================================================================
PROCESS 2: PAGE ARCHITECT
================================================================================

TASK:
Map the inputs to the page architecture. Confirm the structure before building.

CREATE THIS STRUCTURE:

1. SECTION MAPPING
   For each section, confirm what content goes where:
   
   | Section | Content Source |
   |---------|----------------|
   | Hero | Offer name, audience, headline, timeline visual |
   | Problem | What they've tried, why it hasn't worked |
   | Distinction | Key distinction (this vs not this) |
   | How It Works | Transformation framework with example |
   | Time Investment | Session structure from their perspective |
   | What You Get | Deliverables list |
   | For You / Not For You | Positioning criteria |
   | Proof | Featured testimonial + pull-quote |
   | Investment | Price, includes, CTA |
   | FAQ | Primary objections as questions |

2. HEADLINE OPTIONS
   Propose 2-3 headline options. Rule: Clear > Clever.
   If clever, subhead MUST do the work.

3. DISTINCTION FRAMING
   Frame the "Not This / This" contrast:
   - Not This: What does [lower price] get you?
   - This: What does [your price] get them?

4. FAQ SELECTION
   Select 4 FAQs from objections. Frame as buyer skepticism:
   - "[Objection 1]?"
   - "[Objection 2]?"
   - "[Objection 3]?"
   - "[Objection 4]?"

Present structure for confirmation before proceeding.

TRANSITION:
"Structure confirmed. Now let's build the page. Ready for the Page Builder?"

================================================================================
PROCESS 3: PAGE BUILDER
================================================================================

TASK:
Generate the complete HTML page following the template and design system.

CRITICAL RULES - VIOLATIONS BREAK THE PAGE:

1. NO CSS VARIABLES — Every color hardcoded as hex. Never var(--anything).
2. NO MAILTO LINKS — Use Calendly only.
3. EXPLICIT TEXT ALIGNMENT — text-align: left on all content.
4. GOLD SCROLLBAR — Include scrollbar styles.

COLOR REFERENCE (hardcoded hex):
| Name | Hex |
|------|-----|
| Gold | #b79d64 |
| Gold Light | #c4aa74 |
| Charcoal | #1a1a1a |
| Deep Charcoal | #0f0f0f |
| Cream | #f9f7f4 |
| Off-White | #faf9f7 |
| Stone | #8a8680 |
| Slate Blue | #4a5a6a |

BUILD SECTIONS IN ORDER:
1. Header (logo + CTA)
2. Hero (who, what, timeline visual, CTA)
3. Problem (validate, don't lecture)
4. Distinction (justify price — this vs not this)
5. How It Works (transformation framework with real example)
6. Time Investment (their hours, not deliverables)
7. What You Get (deliverables list)
8. For You / Not For You (gold border vs muted)
9. Proof (featured testimonial with pull-quote)
10. Investment (price, includes, CTA)
11. FAQ (4 objections as questions)
12. Final CTA
13. Footer

COPY RULES:
- "Stalled" not "stuck" (except "stuck in your head")
- No AI patterns: avoid "Not X. Not Y. Z." reveals
- No weak words: autopilot, leverage, synergy, unlock, empower
- Every sentence earns its place

INTERACTIVE ELEMENTS:
- All cards: hover with translateY(-4px) + shadow
- Tabs: click fills gold, switches content
- For You: 2px gold border
- Not For You: 1px muted border

Generate complete HTML file.

TRANSITION:
"Page built. Now let's validate against the QC checklist. Ready for QC?"

================================================================================
PROCESS 4: QC VALIDATOR
================================================================================

TASK:
Validate the page against the QC checklist. Report any failures.

CHECK EACH CATEGORY:

TECHNICAL (Required — all must pass)
[ ] Zero instances of var(--
[ ] Zero mailto: links
[ ] Gold scrollbar styles present
[ ] Mobile responsive breakpoints included
[ ] File ends with proper </body></html>

ABOVE-THE-FOLD CLARITY
[ ] 5-second test: Who is this for?
[ ] 5-second test: What do they get?
[ ] 5-second test: What's the CTA?
[ ] Headline: Clear > Clever
[ ] CTA subtext lowers anxiety

OFFER ARCHITECTURE
[ ] Price clearly stated
[ ] Scope clearly defined
[ ] Distinction justifies price
[ ] No overpromising
[ ] What it's NOT is clear

PROOF & TRUST
[ ] Testimonial shows transformation
[ ] Outcome is specific
[ ] Pull-quote is strongest line
[ ] Attribution complete
[ ] No weak testimonials

COPY QUALITY
[ ] No redundancy between sections
[ ] Every sentence earns its place
[ ] Voice consistent throughout
[ ] "Stalled" not "stuck"
[ ] No AI patterns

VISUAL HIERARCHY
[ ] For You has gold border
[ ] Not For You has muted border
[ ] Long content broken up
[ ] Interactive elements reveal content

OUTPUT FORMAT:
```
QC RESULTS
==========
Technical: [PASS/FAIL] - [issues if any]
Above-the-Fold: [PASS/FAIL] - [issues if any]
Offer Architecture: [PASS/FAIL] - [issues if any]
Proof: [PASS/FAIL] - [issues if any]
Copy: [PASS/FAIL] - [issues if any]
Visual: [PASS/FAIL] - [issues if any]

ISSUES TO FIX:
1. [Issue and fix]
2. [Issue and fix]
...

OVERALL: [PASS/FAIL]
```

If FAIL: List specific fixes needed and return to Page Builder.
If PASS: Deliver final file.

FINAL OUTPUT:
File: [offer-name]-v[version].html

================================================================================
END OF WORKFLOW
================================================================================

Expected Outputs

📄

Front-End Offer Page

Complete, Convertri-ready HTML page

.html

✓

QC Checklist

Completed validation checklist

.html