Naser Mansour
0f9d12c3cf
Adds docs/tasks/ (16 epics + 102 stories converted to task/subtask files with statuses.md as the new status source of truth) and docs/ux-design.md (retrospective design-system reference), and points CLAUDE.md at them. docs/prd.md and docs/architecture.md are kept as BMAD wrote them; the legacy docs/stories/, docs/epics/, docs/qa/gates/ and .bmad-core/ stay in place as historical/traceability records, superseded but not deleted. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2.4 KiB
2.4 KiB
id, title, status, date, parent
| id | title | status | date | parent |
|---|---|---|---|---|
| 1-4 | 1-4 Base UI & Navigation | Done | 2026-09-27 | 1 |
Description
As a website visitor or logged-in user, I want a professional, responsive navigation system with brand colors, So that I can easily navigate the platform on any device. Context: Integrates with: Flux UI Free, Tailwind CSS 4, bilingual system; Technology: Livewire Volt, Flux UI components, Alpine.js; Follows pattern: Flux UI navbar patterns, mobile-first design. - Logo SVG: Required at public/images/logo.svg - Fallback: Text "Libra" in gold displayed if logo asset not available - Logo Specs: SVG format preferred, min 120px width desktop, 80px mobile - Note: Logo asset to be provided by client; use text fallback during development. Full implementation history: docs/stories/story-1.4-base-ui-navigation.md
Acceptance Criteria
- Primary: Dark Navy Blue (#0A1F44) - backgrounds, headers
- Accent: Gold (#D4AF37) - buttons, links, accents
- Light Gold: #F4E4B8 - hover states
- Off-White/Cream: #F9F7F4 - cards, content areas
- Charcoal Gray: #2C3E50 - secondary text
- Custom Tailwind colors configured via @theme
- Fixed top position
- Navy blue background
- Logo placement: left on desktop, centered on mobile
- Main menu items: Home, Booking, Posts, Login/Dashboard
- Language toggle (Arabic/English) visible
- Responsive mobile hamburger menu
- Gold text for links, hover effects
- Full-width dropdown or slide-in
- Navy background with gold text
- Touch-friendly targets (44px+ height)
- Smooth open/close animation
- Close on outside click or navigation
- Navy blue background
- Libra logo (smaller version)
- Firm contact information
- Links: Terms of Service, Privacy Policy
- Copyright notice with current year
- Sticky footer (always at bottom of viewport)
- Card-based layouts with proper shadows and border-radius
- Consistent spacing using Tailwind utilities
- Container max-width: 1200px, centered
- WCAG AA contrast compliance verified
- Flux UI components used where available
- Works with RTL and LTR layouts
- Navigation state reflects current page
- Login/logout state reflected in menu
- Responsive on all breakpoints (mobile, tablet, desktop)
- No horizontal scroll on any viewport
- Fast loading (minimal CSS/JS)
- Tests verify navigation rendering