Redesign the landing page - #339
Merged
prodbycorne merged 2 commits intoSep 7, 2026
Merged
Conversation
Adds app.accent3 (violet) and app.accent4 (pink), plus matching glow shadow tokens (glowBlue, glowViolet, glowPink), to give the landing page redesign a fuller, multi-hue palette instead of leaning on a single green accent everywhere. Purely additive — no existing token value changes, so every other page's look (and its Playwright visual regression screenshots) is unaffected. Both new colors verified against WCAG AA (4.5:1) for both light and dark mode: #7c3aed on white is 5.7:1, #c4b5fd on the dark bg is 10.56:1; #be185d on white is 6.04:1, #f9a8d4 on the dark bg is 10.75:1.
The dashboard read as a generic dark-mode/single-accent SaaS template — flat cards in a plain row, one gradient. Reworked the visual layer without touching any data-fetching logic or the shared AppShell/Navbar chrome (both are screenshotted by other routes' Playwright visual regression tests, so they're deliberately untouched): - Ambient background: three slow-drifting, blurred gradient orbs in the theme's green/violet/blue accents, plus a faint dot-grid masked to fade out below the hero. Scoped to this page's own stacking context (position: relative + z-index), so it can't bleed into other routes. - Hero heading now spans the full green -> violet -> blue accent gradient instead of a single accent, at a noticeably larger size. The literal text "SmartDrop Dashboard" is unchanged — the 404 page's "back to home" Playwright test asserts on it being visible. - Stat cards moved from four equal-width cards to an asymmetric bento grid: Total Value Locked and Users Online are the featured 2-column cards, Active Pools and Total Users are single cards, each with its own accent hue, its own glow-on-hover shadow, and a small inline SVG icon (no new icon-package dependency — four glyphs, hand-drawn). - The credits panel gets a soft radial accent glow and a two-tone gradient on the credit total instead of a flat accent color. Data bindings (usePlatformStats, useTotalUserCredits, useStellarWallet, the toast error handling) are untouched.
✅ Deploy Preview for spiffy-melomakarona-eb1e8a ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for smart-drop ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
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
The dashboard's design read as generic — flat single-accent dark-mode SaaS boilerplate. This redesigns the landing page's visual layer while leaving every data binding and the shared chrome (Navbar/Footer/AppShell) alone.
position: relative+ its ownz-index), so it can't bleed into other routes.app.accent3(violet) andapp.accent4(pink) plus matching glow shadow tokens, purely additive — no existing token value changed.Why the Navbar/Footer/background chrome wasn't touched
e2e/visual-regression.spec.tstakes full-page Playwright screenshots on the 404 page and the leaderboard page (404-page-light.png,404-page-dark.png,leaderboard-credits.png,leaderboard-stake.png), and both routes render the sharedAppShell/Navbar/Footer. Any change to those would invalidate those baselines, which I can't regenerate here. So all of the visual work is scoped tosrc/app/page.tsx's own content and two purely-additive theme tokens.That same spec also asserts
SmartDrop Dashboardis visible on/after navigating home from the 404 page — kept that text exactly as-is.No new dependency
The four stat-card icons are small hand-drawn inline SVGs rather than pulling in an icon package — this repo ships both
package-lock.jsonandpnpm-lock.yaml, and I didn't want to risk the two drifting out of sync for four glyphs.Test plan
pnpm run typecheck— cleanpnpm run lint— 0 errors (pre-existing unrelated warnings only, confirmed present on a cleanmaincheckout)pnpm run build— succeeds,/route bundle 8.15 kBpnpm run test— full suite is flaky under parallel execution on this machine regardless of branch (two consecutive runs of the same code produced different failure sets); confirmed viagit stashthat the same tests fail on a cleanmaincheckout too, and none of the flaky failures are anywhere nearpage.tsx/theme.tspnpm run start+ manual check:/returns 200, contains the literal "SmartDrop Dashboard" text, and renders 9 inline<svg>elements (4 new stat icons + existing chrome icons)ERROR: Playwright does not support chromium on mac13), so I couldn't capture before/after screenshots myself. Flagging so this isn't mistaken for a verified visual pass — would appreciate a look in an actual browser before merging.