[Phase 2] Playground Examples

[prosdev]

Description

Create interactive playground examples showcasing display condition plugins with appropriate layouts (modal, inline, banner).

Closes #33

Tasks

• Create /display-conditions section in playground
• Build exit intent example (modal)
  • Modal triggered on exit intent
  • Show trigger state and metrics
  • Reset button for testing
  • Explainability display
• Build scroll depth example (inline or banner)
  • Triggered at 75% scroll
  • Show scroll percentage metrics
  • Real-time scroll tracking display
• Build page visits example (modal)
  • Different modal for returning visitors
  • Show visit counts (session + total)
  • First-time vs returning logic
• Build time delay example (banner)
  • Banner after 5 seconds
  • Show elapsed time
  • Pause when tab hidden demo
• Build composition example (modal or banner)
  • Combine scroll + time + visits
  • Show AND/OR/NOT logic
  • Complex targeting display
• Add overview page explaining display conditions
• Update homepage navigation

Acceptance Criteria

• 5 interactive examples (1 per plugin + composition)
• Each example shows:
  • Live demo with working triggers
  • Configuration code
  • Explainability (decision, trace, context)
  • Reset/test controls
  • Best practices tips
• Mobile responsive
• Deployed to Vercel
• Issue [Phase 1] Playground Examples #33 closed

Estimate: 1 day