feat: implement PWA scaffold, dark design system, and 3-tab glassmorphism nav

- Add @serwist/next for PWA service worker (precaching, offline support)
- Create public/manifest.json with dark theme (#0a0a0f) and SVG icons
- Rewrite globals.css with full dark premium design system (Tailwind v4)
  - Design tokens: bg-deep, bg-card, gold, nur-purple, emerald, borders, text
  - Utility classes: .glass, .glass-light, .gold-gradient, .nur-gradient, .gold-purple-gradient
  - Prayer ring SVG styles
- Replace old 5-tab nav with 3-tab floating glassmorphism pill
  - Home (House), Nur center raised 56px gold-purple circle, Profile (User)
  - Active gold #D4AF37, inactive #666, safe-area-aware
- Create src/lib/api/wordpress.ts fetchAPI wrapper with JWT auth
- Update layout.tsx with manifest, apple-web-app, Viewport export
This commit is contained in:
FalahMobile
2026-07-02 20:54:00 +08:00
parent 61baf3ac5d
commit 1d82eb66ac
10 changed files with 240 additions and 50 deletions
+25
View File
@@ -0,0 +1,25 @@
const WP_API = process.env.NEXT_PUBLIC_WP_API_URL || ''
export async function fetchAPI<T>(
endpoint: string,
options?: RequestInit
): Promise<T> {
const token =
typeof window !== 'undefined'
? localStorage.getItem('flh_token')
: null
const res = await fetch(`${WP_API}/${endpoint}`, {
headers: {
'Content-Type': 'application/json',
...(token ? { Authorization: `Bearer ${token}` } : {}),
},
...options,
})
if (!res.ok) {
throw new Error(`WordPress API error: ${res.status}`)
}
return res.json()
}