[FEAT]: Add the app navigation shell to connect all screens

[grantfox-oss]

📘 Description

The screens exist but there's no way to move between them. Add a shared, mobile-first bottom
navigation bar and wire buttons/links so users can navigate all sections, with smooth active-state
and screen transitions. This is the integration issue — it's the only one that touches the shared
layout.

✅ Acceptance Criteria

• New component frontend/components/ui/bottom-nav.tsx: fixed bottom bar, lucide-react icons +
  labels, next/link items for Home /, Orders /p2p/orders, Wallet /wallet,
  Transactions /transactions (add Chat/Messages if desired).
• Active item is derived from usePathname() and styled with primary (mirror the active style in
  frontend/components/ui/tab-bar.tsx).
• Mounted via app/layout.tsx. The marketing home / should not show the app nav — use a
  route group (e.g. app/(app)/layout.tsx) or hide the bar on /. Document the choice in the PR.
• Wire cross-screen navigation buttons: order list row → order detail (/p2p/orders/[id]),
  "Start trade" → trade status (/trades/[id]), a back button on detail screens, and an entry to
  the wallet/chat.
• Add a light page/enter transition (reuse Reveal or a framer-motion wrapper), respecting
  prefers-reduced-motion.
• Ensure the fixed nav doesn't overlap content (add bottom padding) and coexists with the existing
  theme toggle. Light + dark correct.

🌎 References

• frontend/components/ui/tab-bar.tsx (active-state styling pattern)
• app/layout.tsx (mount point; currently also hosts ThemeToggle)
• frontend/components/motion/reveal.tsx

📜 Additional Notes

• This is the only issue that edits app/layout.tsx — keep it last to avoid conflicts with the
  screen issues.
• Coordinate the final route names with issues Create .github/workflows directory #1–Init project with NextJS #4 (they're listed in the isolation map above).
• Should wait to merge issues Create .github/workflows directory #1 to Init project with NextJS #4

---

Guidelines

• Use semantic brand tokens only — bg-card, text-foreground, text-muted-foreground,
  bg-primary, border-border, etc. No hardcoded hex. Reference:
  docs/guidelines/colors.md.
• Typography is Satoshi (already global) — no font setup needed.
• Light + dark: build both. Test with the theme toggle (bottom-right) — every screen must
  look right in both themes.
• Reuse existing components before building new ones: Button
  (frontend/components/ui/Button), WalletBadge, TransactionList, TabBar, SearchBar,
  Reveal (frontend/components/motion/reveal.tsx).
• Motion: wrap screen content / lists in <Reveal> for a subtle entrance; it already
  honors prefers-reduced-motion.
• Layout: mobile-first. Match existing screens — centered column, max-w-md, bg-background.
• Data: mock data only (no backend). Keep mock arrays in the page file or a local mock.ts.
• Copy: match the language of the surrounding screens (currently Spanish labels, e.g.
  "Comprar", "Transacciones"). Don't introduce a new convention.
• Accessibility: semantic elements, aria-labels, keyboard-focusable controls.
• Definition of done: npm run lint + npx tsc --noEmit clean; screen renders at its route
  in both themes; no changes to files outside the issue's declared scope.

[sainath5001]

Hi! I'm a blockchain developer with experience building full-stack dApps using Next.js, React, TypeScript, Tailwind CSS, and App Router. I've reviewed the issue requirements and understand the need for a shared mobile-first navigation shell, route-based active states using usePathname(), layout integration, and smooth page transitions while preserving the existing UI structure. I'll follow the acceptance criteria closely, reuse existing components where possible, ensure light/dark theme compatibility and responsive behavior, and submit a clean, well-tested PR.

[Primex-hub]

I will like to take this job

[ghost-cy829]

I’m a full-stack software developer experienced in both enterprise applications and Web3 projects, with four hackathon wins and hands-on work across frontend, backend, APIs, databases, and blockchain integrations. I will first review the issue and existing codebase, then implement a clean, well-tested solution and submit a clear PR within the agreed timeline. Kindly assign.

[grantfox-oss]

🦊 GrantFox — @sainath5001 has been assigned to this issue as part of the Official Campaign | FWC26 campaign!

Next steps:

1. Open a Pull Request referencing this issue (e.g., Closes #323)
2. Your PR will be reviewed by the Kaizenode maintainers

Good luck! Track your progress on GrantFox.