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>
51 lines
2.4 KiB
Markdown
51 lines
2.4 KiB
Markdown
---
|
|
id: 1-4
|
|
title: 1-4 Base UI & Navigation
|
|
status: Done
|
|
date: 2026-09-27
|
|
parent: 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
|