feat: public marketing landing page at / - #4
Merged
Merged
Conversation
Add a public marketing landing page at "/" in front of the wallet-connect treasury dashboard. This commit is the routing scaffold only — no landing content or design tokens yet; sections follow in later commits. Routing decision: multiple root layouts via route groups, not a single shared root layout. The landing page needs a fundamentally different shell from the dashboard — light neo-brutalist theme, its own display/mono fonts, its own nav, and no wallet Providers — while the dashboard keeps its dark theme, SiteHeader, and React Query + wallet Providers. Two route groups, each with its own root <html>/<body> layout, isolate the two shells cleanly; a single shared root layout would force conditional chrome and a shared <body> theme. (The PRD left this open pending the actual repo layout.) - Delete the top-level app/layout.tsx root layout. - (app)/ group: the dashboard root layout (moved from the old root layout) plus every dashboard route. The org directory moves from "/" to "/app"; /new and /org/[treasury]/... keep their exact URLs so direct treasury links still resolve without detouring through the landing page. - (marketing)/ group: root layout + landing page owning "/". - Moved routes switch to the @/ import alias (depth-independent), and the in-app "home" links (header wordmark, "All organizations" back links) now point at /app. globals.css stays at app/globals.css, imported by both root layouts. No dashboard behavior or visual change — it simply lives at /app now. typecheck + next build pass; routes: / (static landing), /app, /new, /org/[treasury], /org/[treasury]/requests/[requestId].
Add the soft-rounded neo-brutalist token set the marketing landing page builds on, scoped so the dashboard renders identically: - colors: ink becomes CSS-variable-backed (rgb(var(--color-ink, ...))), with fallback channels reproducing the exact dashboard hexes; additive paper / paper-raised / ledger-gold / signal-green / flag-red. - borderRadius: card 20px, pill 999px, badge 12px. - boxShadow: brutal (4px 4px 0) and brutal-pressed (2px 2px 0) hard edges. - fontFamily: display (Space Grotesk) and body (Inter); mono is reused, the marketing root repointing --font-mono at IBM Plex Mono. The (marketing) root layout loads the three fonts via next/font and applies .marketing-root, which sets --color-ink and color-scheme: light. The dashboard sets none of these variables, so its dark theme is unchanged. typecheck + build:web pass.
A horizontal pill of `total` equal segments with hard 2px ink gaps. Filled segments carry the ledger-gold fill; a fully-met meter (filled === total) turns its final segment signal-green with a check. - animate (hero only) fills left-to-right over ~800ms on mount; under prefers-reduced-motion it renders fully filled immediately, no timers. - Deterministic initial state keeps SSR/hydration in sync (matchMedia is read only in the effect). - The optional label carries the meaning as mono text so state never depends on colour; the bar is aria-hidden when a label is present and otherwise exposes its own n-of-m aria-label. Lives under components/marketing/ to stay separate from the dashboard's dark-theme component set. typecheck + lint pass.
Inverted bg-ink/text-paper footer in mono with product, source, and project link columns. License intentionally omitted (repo has no LICENSE file). Softens contributors intro from 'open source' to 'developed in the open' for the same reason.
First focusable element, sr-only until focused; lets keyboard users bypass the sticky nav. Adds id=main-content on <main>.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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
1 participant
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.
Public marketing landing page at
/Adds a public marketing landing page in front of the wallet-connect treasury dashboard. The dashboard moves to
/app; the new landing page owns/.Routing
Uses multiple root layouts via Next.js route groups — there is no shared top-level
app/layout.tsx:app/(app)/— the existing dashboard, now served at/app(dark theme, wallet Providers). Only import paths and internal home links changed; behavior is unchanged.app/(marketing)/— the new landing page at/(its own<html>/<body>, light neo-brutalist theme, no wallet code).What's on the page
Nav → Hero → Problem → How it works → Proof (on-chain) → Contributors → Footer. One animated element (the approval-threshold meter, honoring
prefers-reduced-motion). Copy is grounded inREADME.mdandSECURITY.md.Constraints honored
NEXT_PUBLIC_FACTORY_CONTRACT_IDat build/render time (a build-inlined public constant), not a live fetch/RPC/indexer call. Confirmed by the build output:/stays○ (Static).strict, noany.tsc --noEmitclean.theme.extend; the dashboard never references them.Accessibility
lang="en";banner/main/contentinfolandmarks; labeled<nav>s; valid h1→h2→h3 outline; skip-to-content link; visible focus rings on every control (paper-colored on the inverted footer); external-link convention (↗+rel="noopener noreferrer"+ sr-only "opens in a new tab"); the threshold meter carries meaning in text, never color alone.Verification
npm run typecheck --workspace @charter/web— cleannpm run lint --workspace @charter/web— no warnings or errorsnpm run build --workspace @charter/web— success;/prerendered as static content (1.55 kB, 108 kB First Load JS)These are items I could not verify against the repository. Per the brief, I flagged them here rather than inventing facts:
DOCS_URL=https://chusdrter.gitbook.io/chusdrter-docscame from the build brief. The docs content now lives in-repo underdocs/(this branch was updated frommain, which merged the GitBook docs in docs: add GitBook documentation site #2), and.gitbook.yamlsetsroot: ./docs— but nothing in the repo records the published GitBook subdomain, so the exact URL inlinks.tsstill can't be confirmed from source. Please confirm it resolves, or point me at the canonical docs URL.LICENSEfile exists anywhere in the repo. I therefore omitted any license claim from the footer and softened the contributors copy from "open source" to "developed in the open." If Charter is meant to be open source, add aLICENSEand I'll restore the wording + a footer license line.$4.8B(Uniswap) /$200M+(Optimism) /$40M–$200M(Arbitrum). These are not in the repo; they're framed on-card as "Publicly reported DAO treasuries · illustrative" and are not presented as Charter's own data. Kept per direction — please date/source them or swap for a citation.NEXT_PUBLIC_FACTORY_CONTRACT_IDthe build is configured with; when blank the section says so and points at read-only browse mode (matching the README). Nothing is hard-coded.github.com/Ch-rter/app+/contract, maintainer@fadesany, thegood first issuelabel, and the README Contributing anchor all check out againstREADME.md.