Skip to content

Add interactive demo interface section with styles and auto-rotating screens#1

Merged
helloroman-bez merged 7 commits into
claude/create-claude-md-eIMxyfrom
codex/review-repository-contents
Mar 25, 2026
Merged

Add interactive demo interface section with styles and auto-rotating screens#1
helloroman-bez merged 7 commits into
claude/create-claude-md-eIMxyfrom
codex/review-repository-contents

Conversation

@helloroman-bez
Copy link
Copy Markdown
Owner

Motivation

  • Provide an embedded visual demo of the product UI to showcase dashboard, leads list, and chat flows for visitors.
  • Improve conversion by giving a realistic preview of monitored platforms and lead scoring directly on the landing page.
  • Offer an accessible, responsive visual component that complements existing hero and "how it works" blocks.

Description

  • Added a new section with id="demo" containing a platform strip, tabbed demo shell, three demo screens (Dashboard, Leads list, Chat), and dot indicators.
  • Introduced CSS rules for the demo block and responsive adjustments, including .demo-shell, .demo-tab, .demo-screen, .demo-metric, and related classes to style the dark demo UI and grid layout.
  • Included an inline SVG chart and static demo cards for leads and chat content to represent UI elements and metrics.
  • Added client-side behavior with setDemoScreen, startDemoRotation, and event listeners to enable auto-rotation of screens every 5 seconds and manual tab/dot switching.

Testing

  • No automated tests were added or executed for this change.

Codex Task

@helloroman-bez helloroman-bez merged commit 2aef3b9 into claude/create-claude-md-eIMxy Mar 25, 2026
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant