update dashboard ux

docs/update_UX_marketplace.md

@@ -0,0 +1,27 @@
+That diagram shows the core shift: right now your homepage is basically one flat layer (cards in a grid), and the redesign organizes it into four layers that sit at different depths and move at different speeds. Here's the full plan, grounded in what's actually in your codebase (HomeContent.tsx, StatsStrip, HowItWorks, TestimonialsSection, globals.css).
+What's flat about it today
+Every section is border + bg-white/80 + backdrop-blur repeated down the page — hero, surface card, pillars, features, testimonials all use the same recipe. The only motion in the entire codebase is the number counter in StatsStrip. No parallax, no scroll-triggered reveals, no cursor reactivity, no layering — it reads like a brochure, not a product.
+Layer 1 — Background ambient
+Replace the static site-glow radial gradients with a position:fixed canvas/SVG layer behind everything: a slow-drifting gradient mesh (CSS @keyframes on background-position, 20–30s loop) plus a few large soft-edged blobs in your orange/blue brand colors that shift opacity per section as you scroll (driven by scroll progress, not JS-per-frame). This is pure atmosphere — zero interaction, lowest z-index, pointer-events:none.
+Layer 2 — Motion / parallax
+A position:absolute layer holding decorative shapes (car silhouette outlines, route-line squiggles, dashed "road" paths) that translate at a fraction of scroll speed (translateY(scrollY * 0.3)), so they appear to drift slower than the content in front of them. This is what makes a page feel "deep" instead of stacked. Good candidates: behind the hero, behind the stats strip, behind testimonials.
+Layer 3 — Content (rebuilt, not just restyled)
+This is your existing copy/cards, but reworked so each section enters with a scroll-triggered animation (fade + slight rise via IntersectionObserver, same pattern your Counter already uses — just extend it) rather than appearing fully rendered. Specific upgrades:
+
+Hero: stagger the kicker → title → body → CTAs → metric cards (100ms apart) instead of all at once.
+Pillars/features grid: cards tilt slightly on mouse-move (cheap CSS transform: perspective() tied to mouse position) instead of sitting static.
+Stats strip: already has a counter — add a connecting animated line/progress bar that draws in alongside the counters.
+Steps/How-it-works: convert from a static list into a scroll-linked progress rail — a vertical line that fills as the user scrolls past each step.
+
+Layer 4 — Foreground interactive
+Small elements that float above content and react to the user: a cursor-follow glow on hero CTAs, a sticky "live" badge that pulses (you already have dict.liveLabel — give it a pulse animation), micro-toasts like "3 companies just joined" drifting in periodically near the surface card. These sit at the highest z-index and are the layer most associated with "alive."
+Implementation plan
+
+Pick the motion engine. Since this is React/Next.js, the cleanest path is Framer Motion (npm install framer-motion) for entrance/scroll animations, plus plain CSS @keyframes for ambient/looping effects (cheaper, no JS per frame). Avoid heavy scroll libraries (GSAP ScrollTrigger) unless you want more cinematic control — Framer Motion's whileInView + useScroll/useTransform covers everything above.
+Build a <BackgroundLayers /> component mounted once in (public)/layout.tsx, rendering the ambient + parallax layers as fixed/absolute siblings behind {children}. Keeps it out of every page's content logic.
+Extract a reusable <Reveal> wrapper (IntersectionObserver + fade/rise) and wrap each existing section in HomeContent.tsx with it — minimal rewrite of your current JSX, just wrapping.
+Upgrade StatsStrip and HowItWorks with the progress-rail/connecting-line treatment since they already have the data shape for it.
+Add the foreground layer last — it's the smallest amount of code but the highest "feels dynamic" payoff, so don't front-load it; do it once the depth/motion skeleton works.
+Respect prefers-reduced-motion throughout — wrap all loops/parallax in the media query so it degrades to the current static design for users who need that.
+
+Suggested order of work: (1) background ambient layer, (2) Reveal wrapper on existing sections, (3) parallax shapes, (4) stats/steps progress treatment, (5) foreground micro-interactions, (6) cursor-tilt on cards.

docs/update_ux_dashboard.md

@@ -0,0 +1,34 @@
+Proposed plan
+Phase 1 — Design tokens & primitives
+
+Add .glass-card as the dark-mode companion to the existing .card (light mode) — same component, theme-aware via html.dark selector, so call sites don't need to branch.
+Add --bg-elevated, --border-accent, --glass-bg, glow shadows for dark; pick matching light-mode equivalents (soft shadow/border tints) so cards feel like one consistent design language in either mode, not "light mode = old style, dark mode = new style."
+Add .progress-bar / .progress-fill classes with light and dark variants (the mockup's blue/orange gradient fills work in both; just need lighter track colors for light mode).
+Add JetBrains Mono via next/font for metric values — works the same in both modes.
+Guard pulse/glow animations behind prefers-reduced-motion (applies regardless of theme).
+
+Phase 2 — StatCard v2
+
+Extend StatCard.tsx with optional target, progressPercent, pulse, valueGradient props, each with explicit light/dark Tailwind variants (dark: prefixes), backward-compatible with current usage.
+Update StatCard.test.ts, including a check that dark-mode classes are present.
+
+Phase 3 — Dashboard home restructure
+
+Reorganize (dashboard)/page.tsx into a 2/3 + 1/3 grid: bookings chart + new "Branch/Location Performance" list (left), quick stats (right) — laid out identically in both modes, only colors/surfaces change.
+New metrics (utilization rate, revenue/vehicle, fulfillment rate, branch breakdown) require backend fields on /analytics/dashboard (utilizationRate, fulfillmentRate, locationBreakdown[]) — flagged as a contract change, not faked.
+Drop the fixed-airport SVG map; replace with a data-driven branch list with progress bars, styled for both themes.
+
+Phase 4 — Sidebar & TopBar polish
+
+Sidebar: glass background in dark mode, equivalent frosted-white treatment in light mode; gradient logo badge and active-item glow tuned per theme so contrast stays good in both.
+TopBar: restyled search input with light/dark variants; keep only status indicators backed by real data.
+
+Phase 5 — i18n & RTL pass
+
+All new strings via the dictionary for fr/en/ar.
+Verify glass-cards, progress bars, and branch list mirror correctly in dir="rtl", in both light and dark.
+
+Phase 6 — QA
+
+Update/extend tests.
+Manual visual check of every changed component in 4 combinations: light+LTR, light+RTL, dark+LTR, dark+RTL.