Skip to content

Redesign landing page with catalog-grid layout#91

Open
PetarStoev02 wants to merge 2 commits into
feat/docs-websitefrom
feat/landing-redesign-v1
Open

Redesign landing page with catalog-grid layout#91
PetarStoev02 wants to merge 2 commits into
feat/docs-websitefrom
feat/landing-redesign-v1

Conversation

@PetarStoev02
Copy link
Copy Markdown
Contributor

Summary

  • Replace bento/ecosystem landing with a catalog-grid design inspired by parts-manual aesthetic
  • 12 interactive mini-component demos (ConnectWallet, TokenSwap, GasTracker, etc.) in a coordinate-labeled grid with category filter chips
  • New sections: feature comparison table, chains/tokens registry strip, recipe cards, stats bar, terminal mockup CTA
  • Custom landing nav with dark/light toggle and custom multi-column footer
  • Add Instrument Serif font for accent italic typography
  • New CSS tokens (surface, accent-wash, grid-line) with full dark mode support
  • Remove old bento-section, bento-cells, ecosystem-map-section, hero-visual components

Test plan

  • Verify landing page loads at localhost:3000 with all 8 sections rendering
  • Test dark/light theme toggle in landing nav
  • Test catalog filter chips (all, wallet, defi, chain, etc.)
  • Verify interactive mini-components work (ConnectWallet state, TokenSwap input, GasTracker animation)
  • Test copy-to-clipboard on CLI commands (hero + CTA)
  • Check responsive behavior on smaller viewports
  • Verify Instrument Serif font loads for italic accent text
  • Confirm dark mode renders correctly across all sections
  • Ensure no TypeScript errors (npx tsc --noEmit passes)

Replace bento/ecosystem landing with a new catalog-grid design featuring:
- Interactive component catalog with 12 live mini-demos and filter chips
- Coordinate-labeled grid layout (like a parts manual)
- Feature comparison table (w3-kit vs Thirdweb, RainbowKit, Wagmi)
- Chains/tokens registry strip with colored marks
- Recipe cards with time estimates and CLI commands
- Stats section with key metrics
- Terminal mockup CTA with copy-to-clipboard
- Custom landing nav with dark/light toggle
- Custom multi-column footer
- Instrument Serif font for accent typography
- New CSS tokens (surface, accent-wash, grid-line) with dark mode support
@vercel
Copy link
Copy Markdown

vercel Bot commented Apr 21, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
w3-kit Error Error May 11, 2026 8:47am

Replaces hand-maintained preview duplicates with a build-time mirror
of the ui submodule, eliminating drift between landing demos and the
real registry components.

- Add scripts/generate-ui-mirror.ts (wired via predev/prebuild) that
  copies ui/registry/w3-kit/ into src/shared/ui/w3-kit/ on each build.
- Add src/shared/ui/w3-kit-demos.tsx exporting a DEMOS map keyed by
  component slug — single rendering authority used by landing,
  ui-explorer, and component-detail pages.
- Delete 27 src/shared/ui/previews/*.tsx files and 6 orphaned
  landing/ui/<slug>/ directories that duplicated component logic.
- Add scripts/generate-stats.ts and entities/stats for landing stats.
- Gitignore the mirror output and *.gen.ts files (generated at build).
- Update landing-nav to split mega menu into 3 dropdowns.
@peter941221
Copy link
Copy Markdown

I could not continue pushing to this branch from the current account because the head branch lives in w3-kit/website and I do not have write access there. I continued the same landing redesign plus the standalone-build fix in #92 so the maintainers can review a writable branch.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants