generated sotries

2025-12-20 21:04:23 +02:00
parent d889b24f12
commit 8f95089814
65 changed files with 9501 additions and 0 deletions
@@ -0,0 +1,181 @@
+# Story 1.4: Base UI & Navigation
+
+## Epic Reference
+**Epic 1:** Core Foundation & Infrastructure
+
+## User Story
+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**.
+
+## Story Context
+
+### Existing System Integration
+- **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
+- **Touch points:** All pages (layout component)
+
+## Acceptance Criteria
+
+### Color Scheme
+- [ ] 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
+
+### Navigation Bar
+- [ ] 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
+
+### Mobile Menu
+- [ ] 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
+
+### Footer
+- [ ] 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)
+
+### Layout Components
+- [ ] Card-based layouts with proper shadows and border-radius
+- [ ] Consistent spacing using Tailwind utilities
+- [ ] Container max-width: 1200px, centered
+- [ ] WCAG AA contrast compliance verified
+
+### Integration Requirements
+- [ ] Flux UI components used where available
+- [ ] Works with RTL and LTR layouts
+- [ ] Navigation state reflects current page
+- [ ] Login/logout state reflected in menu
+
+### Quality Requirements
+- [ ] Responsive on all breakpoints (mobile, tablet, desktop)
+- [ ] No horizontal scroll on any viewport
+- [ ] Fast loading (minimal CSS/JS)
+- [ ] Tests verify navigation rendering
+
+## Technical Notes
+
+### Tailwind Color Configuration
+```css
+/* In resources/css/app.css */
+@import "tailwindcss";
+
+@theme {
+  --color-navy: #0A1F44;
+  --color-gold: #D4AF37;
+  --color-gold-light: #F4E4B8;
+  --color-cream: #F9F7F4;
+  --color-charcoal: #2C3E50;
+  --color-success: #27AE60;
+  --color-danger: #E74C3C;
+  --color-warning: #F39C12;
+}
+```
+
+### Layout Component Structure
+```blade
+<!-- resources/views/components/layouts/app.blade.php -->
+<!DOCTYPE html>
+<html lang="{{ app()->getLocale() }}" dir="{{ app()->getLocale() === 'ar' ? 'rtl' : 'ltr' }}">
+<head>...</head>
+<body class="bg-cream min-h-screen flex flex-col">
+    <x-navigation />
+    <main class="flex-1 container mx-auto px-4 py-8">
+        {{ $slot }}
+    </main>
+    <x-footer />
+</body>
+</html>
+```
+
+### Navigation Component
+```blade
+<!-- Using Flux UI navbar -->
+<flux:navbar class="bg-navy">
+    <flux:brand href="/" class="text-gold">
+        <x-logo />
+    </flux:brand>
+
+    <flux:navbar.links class="text-gold">
+        <flux:navbar.link href="/" :active="request()->is('/')">
+            {{ __('navigation.home') }}
+        </flux:navbar.link>
+        <!-- More links -->
+    </flux:navbar.links>
+
+    <x-language-toggle />
+</flux:navbar>
+```
+
+### Mobile Menu with Alpine.js
+```blade
+<div x-data="{ open: false }">
+    <button @click="open = !open" class="md:hidden">
+        <flux:icon name="menu" />
+    </button>
+    <div x-show="open" x-transition @click.away="open = false">
+        <!-- Mobile menu content -->
+    </div>
+</div>
+```
+
+### Logo Component
+```blade
+<!-- resources/views/components/logo.blade.php -->
+@props(['size' => 'default'])
+
+<img
+    src="{{ asset('images/logo.svg') }}"
+    alt="{{ __('Libra Law Firm') }}"
+    @class([
+        'h-8' => $size === 'small',
+        'h-12' => $size === 'default',
+        'h-16' => $size === 'large',
+    ])
+/>
+```
+
+## Definition of Done
+
+- [ ] Navigation renders correctly on all viewports
+- [ ] Color scheme matches brand guidelines
+- [ ] Mobile menu opens/closes smoothly
+- [ ] Footer sticks to bottom of page
+- [ ] Language toggle functional
+- [ ] RTL/LTR layouts correct
+- [ ] All navigation links work
+- [ ] Login state reflected in menu
+- [ ] Tests pass for navigation
+- [ ] Code formatted with Pint
+
+## Dependencies
+
+- **Story 1.1:** Database schema (for user authentication state)
+- **Story 1.2:** Authentication (for login/logout state in nav)
+- **Story 1.3:** Bilingual infrastructure (for language toggle and translations)
+
+## Risk Assessment
+
+- **Primary Risk:** Flux UI limitations for custom styling
+- **Mitigation:** Extend Flux components with custom Tailwind classes
+- **Rollback:** Build custom navigation if Flux doesn't meet needs
+
+## Estimation
+
+**Complexity:** Medium
+**Estimated Effort:** 4-5 hours