---
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