Marketing Landing Page

Implementation Progress

Overview

The current homepage (HomePage.tsx) is a minimal placeholder: hero text, two buttons, three feature cards. It needs to become a real marketing page that sells Impact Pulse by showing the product in action, not just describing it.

Reference implementation: Study how the IdeaPlaces Style Guide does this at styleguide.ideaplaces.com. Key patterns:

• Real product output on the homepage (not mockups)
• Interactive demos using actual components
• Device frames showing platform parity
• Narrative flow: Problem → Solution → Features → Demo → CTA
• The marketing page uses the same components the app uses, so the demo is authentic

Design Principles

1. Show, don't tell. Every feature claim should have a visual proof on the page.
2. Use real components. Embed actual survey questions, result cards, and score visualizations from the app. Don't use static images when you can render the real thing.
3. Respondent-first narrative. The target audience is nonprofit program managers who need to measure impact. Speak to their problem: "Are your programs actually working?"
4. Clean, warm aesthetic. Use the Gentle Glow design system. Warm off-white backgrounds, indigo primary, mint accents. No dark mode on the marketing page.

Page Structure

1. Navigation (sticky)

┌──────────────────────────────────────────────────────────┐
│ ImpactPulse    Features  How it Works  Demo    [Sign In] [Get Started] │
└──────────────────────────────────────────────────────────┘

Smooth scroll to sections. "Get Started" is the primary CTA (links to signup).

2. Hero Section

Headline: "Measure the impact that matters" Subheadline: "Create surveys, track respondent progress over time, and prove your programs work. Built for nonprofits, community organizations, and social enterprises."

Visual: A split layout. Left: headline + CTA buttons. Right: a real rendered survey result card showing a Maslow pyramid visualization with scores, or a score breakdown card with a delta indicator showing improvement.

CTA Buttons: "Create Free Survey" (primary) / "See a Demo" (outline, scrolls to demo section)

Key: The hero visual should use a real ResultVisualization component from the app, rendered with seed data. Not a screenshot, not a mockup. The actual React component with real scores.

3. Problem Section

Three pain point cards:

4. How It Works (4 Steps)

1. Create        →  2. Share         →  3. Track          →  4. Report
[Builder icon]      [Link/QR icon]      [Reminders icon]     [Chart icon]

Build your           Share a link.       Automatic           See who improved,
survey with          No login needed     reminders when      by how much, and
drag-and-drop.       for respondents.    it's time to        where to focus
Groups, scoring,                         retake.             next.
templates.

Each step should have a small visual underneath:

• Step 1: Mini screenshot of the survey builder (drag-and-drop visible)
• Step 2: Screenshot of the share page with QR code
• Step 3: Rendered email template (the actual recurrence_reminder_email_html output)
• Step 4: Screenshot of the impact report with visual comparison bars

5. Interactive Demo Section

This is the centerpiece. Following the IdeaPlaces Style Guide pattern, embed a real interactive demo.

Approach: Render an actual survey take experience inline on the page. The visitor can:

1. See the survey intro card ("Community Wellness Survey, 3 questions, ~1 min")
2. Click "Try it" to start
3. Answer 3 questions (rating, boolean, text) using the real QuestionRenderer component
4. See their results using the real ResultVisualization component
5. See a "Create your own survey" CTA

Implementation:

• Use SurveyTakePage logic in a self-contained DemoSurvey component
• Hardcode 3 sample questions (no API call)
• Calculate score client-side
• Render result using ScoreBreakdown or GroupedBreakdown component
• No data is saved (similar to preview mode)

This is the same pattern as the IdeaPlaces DemoShowcase which uses real FullShowcase and ExplorationTree components with hardcoded data.

6. Features Grid (6 Cards)

7. Results Showcase

Show the three result visualization types side by side, using real components with seed data:

1. Pyramid (Maslow): Render PyramidVisualization with the seed data scores
2. Grouped Breakdown: Render GroupedBreakdown with category scores and percentages
3. Flat Score: Render ScoreBreakdown with per-question scores

Each in a card with a label explaining when to use it.

8. Admin vs Respondent Views

Side-by-side comparison using real screenshots from the seed data:

Left card: "Admin View"

• Screenshot of the admin dashboard (stats, surveys, orgs)
• Caption: "Create surveys, manage members, track compliance"

Right card: "Respondent View"

• Screenshot of the respondent dashboard (my surveys, scores, deltas)
• Caption: "Take surveys, see your progress, get reminders"

Use the screenshots already in progression/role-based-ui/.

9. API Section

Show a terminal/code block with a real API call:

curl -H "Authorization: Bearer ip_live_..." \
  https://impactpulse.catalyzeup.ai/api/v1/surveys/abc123/impact

{
  "total_respondents": 45,
  "multi_attempt": 28,
  "baseline_avg": 2.3,
  "latest_avg": 3.8,
  "impact_delta": "+1.5",
  "per_question": [...]
}

Caption: "Full REST API with organization-level API keys. Pull survey data into your dashboards, CRM, or grant reports."

10. Final CTA

Headline: "Start measuring what matters" Subheadline: "Create your first survey in minutes. Free to start." Button: "Create Free Survey" (links to signup)

11. Footer

ImpactPulse
Built by CatalyzeUp

Product          Resources         Company
Features         API Docs          About
Pricing          Style Guide       Contact
Templates        Changelog

Implementation

Tech Stack

Same as the app: React + Tailwind + Vite. The landing page is a route (/) in the existing SPA.

Key Components to Build

1. MarketingNav - Sticky nav with smooth scroll links
2. HeroSection - Split layout with real result visualization
3. ProblemSection - Three pain point cards
4. HowItWorksSection - 4-step flow with mini visuals
5. DemoSurvey - Self-contained interactive survey (no API)
6. FeaturesGrid - 6 feature cards
7. ResultsShowcase - Three visualization types rendered with real components
8. ViewComparison - Admin vs respondent side-by-side
9. ApiSection - Code block with example
10. FooterSection - Links and branding

Data for Demo Components

Create a static data file (src/data/demo-survey.ts) with:

• 3 sample questions (RATING, BOOLEAN, TEXT)
• Sample scores for pyramid visualization
• Sample group results for breakdown view

This mirrors how IdeaPlaces uses demo-scenarios.json for their marketing demos.

Screenshots

Generate fresh screenshots for the marketing page from the seed data:

• Admin dashboard (Chip logged in)
• Respondent dashboard (Maria logged in)
• Survey builder with drag-and-drop
• Share page with QR code
• Take page (question view)
• Result page with scores
• Impact report with comparison bars

Save to frontend/public/marketing/ for use as fallback images.

Responsive Design

The marketing page must work on mobile. Key breakpoints:

• Mobile (< 640px): Single column, stacked sections, hero visual below text
• Tablet (640-1024px): Two columns where appropriate
• Desktop (> 1024px): Full layout with side-by-side sections

Implementation Order

1. Page structure + hero (skeleton with all sections)
2. DemoSurvey component (interactive centerpiece)
3. Results showcase (pyramid, breakdown, flat using real components)
4. Features grid + how it works (static content)
5. Screenshots + view comparison (from seed data)
6. API section (code block)
7. Responsive polish

Single PR to develop.