Huddle feature page with a live interactive demo

FeatureShipped· 3 days ago

Imported from GitHub pull request El-SaMa/hollahoop#124 by @El-SaMa.

What

A public feature page for Huddle at /features/huddle. Its hero is a live demo instead of a screenshot.

Demo (src/components/marketing/huddle-demo/): a mini browser (traffic lights, tabs, acme-bakery.com/menu) with a made-up bakery site and the Huddle toolbar inside the frame.

Comment mode toggle. Click or tap anywhere to drop a numbered pin. Each pin is anchored to the region under the click (headline, button, menu card and so on) with percent coordinates, so it stays put on resize.
Popover thread with avatar, name, role and time. Post, reply, Resolve or Reopen. Resolved pins hide unless "Show resolved" is on.
A side list of pins (click to open), 3 seeded example pins from a client and a designer, and Reset demo.
State is client only: a pure reducer plus optional sessionStorage. No network calls and nothing touches the Huddle API.
Accessibility: pins are buttons with labels, a keyboard "Comment on ..." button per region, focus is trapped in the popover, Esc closes and returns focus, Enter posts (Shift+Enter adds a line), a live region announces actions, and motion is gated behind motion-safe. Logical CSS is used throughout, so the frame mirrors correctly under dir="rtl".
Compact variant (frame only) now sits in a new Huddle section on the landing page.

Page sections: how it works in 3 steps (script tag or WordPress plugin, guest link with no login, comments become posts and sync to GitHub), PDF and mockup review, guest links, privacy (safety scan, publish guard, Live switch), FAQ, and a sign-up CTA.

Wiring: nav (Product menu), footer, sitemap, cache policy, custom-domain passthrough, and features added to reserved slugs. Metadata plus its own OG image: the OG card is now a shared renderOgCard helper, and the root OG uses it too. Faq, Cta and Feature take optional props, and their defaults are unchanged.

i18n: marketing copy is English only in this repo (the 7-locale packs cover product UI), so no locale keys were added.

Checks

vitest: 262 files, 2039 tests pass (new: reducer, popover placement, DOM helpers, component flow)
tsc --noEmit: exit 0
npm run lint: 0 errors
check-copy-dashes, check-tracked-secrets, check-client-facing-copy, commit attribution check: pass
fallow audit --base origin/master: pass (only inherited findings remain)
axe (test:a11y) against a local next start: / and /features/huddle have 0 serious or critical violations, also with the popover open in light and dark. /features/huddle is added to the spec.

Huddle feature page with a live interactive demo

What

Checks

Comments (0)