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,92 @@
+# Story 9.6: Component Styling - Cards & Containers
+
+## Epic Reference
+**Epic 9:** Design & Branding Implementation
+
+## User Story
+As a **user**,
+I want **consistent card and container styling**,
+So that **content is well-organized and visually appealing**.
+
+## Acceptance Criteria
+
+### Card Styling
+- [ ] Background: Off-white/cream
+- [ ] Box-shadow: 0 2px 8px rgba(0,0,0,0.1)
+- [ ] Border-radius: 8px
+- [ ] Padding: 24px
+
+### Gold Border Highlight
+- [ ] Optional gold top/left border
+- [ ] For featured/important cards
+
+### Hover States
+- [ ] Subtle lift effect
+- [ ] Shadow increase
+
+### Dashboard Stat Cards
+- [ ] Icon with gold accent
+- [ ] Large number display
+- [ ] Trend indicator
+
+### List Cards
+- [ ] Consistent item spacing
+- [ ] Clear click targets
+
+### Containers
+- [ ] Max-width: 1200px, centered
+
+## Technical Notes
+
+```blade
+<!-- resources/views/components/card.blade.php -->
+@props([
+    'variant' => 'default',
+    'hover' => false,
+    'highlight' => false
+])
+
+<div {{ $attributes->merge([
+    'class' => collect([
+        'bg-cream rounded-lg p-6',
+        'shadow-sm' => $variant === 'default',
+        'shadow-md' => $variant === 'elevated',
+        'hover:shadow-md hover:-translate-y-0.5 transition-all cursor-pointer' => $hover,
+        'border-s-4 border-gold' => $highlight,
+    ])->filter()->implode(' ')
+]) }}>
+    {{ $slot }}
+</div>
+
+<!-- Stat card component -->
+@props(['icon', 'value', 'label', 'trend' => null])
+
+<x-card>
+    <div class="flex items-center gap-4">
+        <div class="p-3 bg-gold/10 rounded-lg">
+            <flux:icon :name="$icon" class="w-6 h-6 text-gold" />
+        </div>
+        <div>
+            <div class="text-2xl font-bold text-navy">{{ $value }}</div>
+            <div class="text-sm text-charcoal/70">{{ $label }}</div>
+            @if($trend)
+                <div class="text-xs {{ $trend > 0 ? 'text-success' : 'text-danger' }}">
+                    {{ $trend > 0 ? '+' : '' }}{{ $trend }}%
+                </div>
+            @endif
+        </div>
+    </div>
+</x-card>
+```
+
+## Definition of Done
+- [ ] Card component created
+- [ ] Shadow and radius consistent
+- [ ] Hover effects work
+- [ ] Stat cards work
+- [ ] Highlight variant works
+- [ ] Container max-width applied
+- [ ] Tests pass
+
+## Estimation
+**Complexity:** Medium | **Effort:** 3 hours