feat: live demo, nav overlay, and 4th partner from updated design#1
Open
PrakharSingh0908 wants to merge 1 commit into
Open
feat: live demo, nav overlay, and 4th partner from updated design#1PrakharSingh0908 wants to merge 1 commit into
PrakharSingh0908 wants to merge 1 commit into
Conversation
Implements the deltas from the latest Provekit Design System bundle: - Live Demo (LiveDemo.tsx + LiveDemoSection.astro): interactive zero-knowledge proof generation widget on /benchmarks, above the methodology panel. React island via @astrojs/react with framer-motion driving the step progress bars, dot pulse, byte reveal, caret blink, and section swap-ins. Locked to the Age verification scenario per the final design iteration; Poseidon/SHA-256 toggle re-scales constraints and timing. Hydrated only on /benchmarks via client:visible. - Nav overlay (NavOverlay.astro + nav-overlay.ts): full-page navigation sheet that opens from the hamburger. Five numbered items with hover translate + arrow rotate, two meta columns (Resources / Community), CTA strip, backdrop blur, ESC + backdrop click to close, body scroll lock, and a hamburger -> X swap. Vanilla TS controller, no React. - Nethermind added as 4th partner in EngineeringCredit. - 4 demo keyframes (pulse, caret, byte-in, swap-in) in global.css with prefers-reduced-motion guards. Type-checks (pnpm check: 0 errors) and builds cleanly. The new React bundle is loaded only when /benchmarks scrolls into view, so the landing page critical path is unchanged.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Implements the deltas from the latest Provekit Design System bundle (chats 6 & 7) on top of the existing Astro implementation. Three feature areas, all gated to scope:
/benchmarks(above Methodology) — interactive zero-knowledge proof generation widget. React island via@astrojs/reactwithframer-motiondriving the step progress bars, dot pulse, byte reveal, caret blink, and section swap-ins. Locked to the Age verification scenario per the final design iteration; Poseidon ↔ SHA-256 toggle re-scales constraint count and timing. Hydrated only viaclient:visible.EngineeringCredit.Also adds 4 demo-specific keyframes (
pk-demo-pulse,pk-demo-caret,pk-demo-byte-in,pk-demo-swap-in) withprefers-reduced-motionguards.Files
New
src/components/demo/LiveDemo.tsx— React + framer-motion island, ported frommobile/MobileDemo.jsxsrc/components/demo/LiveDemoSection.astro— panel chrome + hydration boundarysrc/components/nav/NavOverlay.astro— full-page nav sheet markup + stylessrc/scripts/nav-overlay.ts— open/close controller (aria-expanded, ESC, scroll lock, focus management)public/figma/nethermind-logo.svgModified
astro.config.mjs—@astrojs/reactintegration (include: ['**/*.tsx'])tsconfig.json—jsx: "react-jsx",jsxImportSource: "react"package.json/pnpm-lock.yaml—@astrojs/react,react,react-dom,framer-motion,@types/react,@types/react-domsrc/pages/benchmarks.astro—<LiveDemoSection />slotted between Hero and Methodologysrc/components/nav/TopBar.astro— hamburger wired to overlay, hamburger ↔ X swapsrc/components/credits/EngineeringCredit.astro— Nethermind partner rowsrc/styles/global.css— 4 demo keyframesBundle impact
LiveDemo.*.js/benchmarks(viaclient:visible)client.*.js(React DOM)/benchmarks(lazy)nav-overlay.*.jsThe landing page's critical path is unchanged — React only loads when
/benchmarksscrolls the demo into view.Test plan
pnpm check— 0 errors (verified locally)pnpm build— both pages build cleanly (verified locally)pnpm test— Vitest passespnpm test:e2e— Playwright across the three viewportspnpm lhci— confirm the Lighthouse budgets still hold on/(the demo bundle only affects/benchmarks)/benchmarks, click GENERATE PROOF, confirm the 4-step trace runs, bytes reveal, KPIs settle to VERIFIED; ABORT and RESET both cancel cleanly; Poseidon ↔ SHA-256 toggle rescales constraints/timing and resets stateprefers-reduced-motion: reduce— demo animations and overlay transitions drop to instanthttps://claude.ai/code/session_01WAsKJHJnswDKVg22V5yx5v
Generated by Claude Code