One Spend website
The landing page for One Spend, a subscription and spend tracker for Android styled after Samsung One UI. Live at https://syedarhamraza.github.io.
Next.js 16 (static export), Tailwind CSS v4, Motion, and GSAP ScrollTrigger with Lenis for the pinned scroll scenes. Dark-only, like the app. Every visual is a real app capture or a port of a real app widget.
Develop
npm install
npm run dev # http://localhost:3000
npm run build # static site in out/
Pushing to main builds and deploys to GitHub Pages (.github/workflows/pages.yml).
Updating screenshots and the privacy policy
public/screens, public/brand and content/privacy-policy.md are copies from the app repo. After changing the store captures, icon, feature graphic or policy there, refresh them and commit:
npm run sync -- ../one-spend
The script crops the status bar off each capture and converts it to WebP.
Layout
app/: the page, /privacy (rendered from content/privacy-policy.md), global tokens in globals.css that mirror the app's OneUIThemecomponents/: one file per section; bento/ holds the feature tiles, ui/ the One UI switch and segmented pillslib/site.ts: copy and sample data (the app's fictional demo services, never real brands)
Rules the site follows: no em or en dashes in visible copy, one accent colour (#5390F5), radii 34 / 26 / 20, and useReduced() from lib/useReduced.ts instead of Motion's useReducedMotion (which mismatches during hydration).
