redesign the dashboard

2026-06-24 02:00:31 -04:00
parent 6c50458aca
commit 8ee9bc0bca
32 changed files with 1314 additions and 260 deletions
@@ -0,0 +1,292 @@
+# Front-End Redesign Plan
+> Based on: https://isysolution.com/ reference | Preserving existing brand colors
+
+---
+
+## 1. Existing Color System (Keep As-Is)
+
+### Primary Palette
+| Token | Value | Usage |
+|---|---|---|
+| Blue 950 | `#172554` | Body text, headings |
+| Blue 900 | `#1e3a8a` | Dark backgrounds, sidebar |
+| Blue 800 | `#1e40af` | Borders, accents |
+| Orange 600 | `#ea580c` | Primary CTA buttons |
+| Orange 500 | `#f97316` | Dark mode CTA |
+| White | `#ffffff` | Backgrounds, cards |
+
+### CSS Variables (dashboard)
+```css
+--primary: #2563eb;
+--primary-hover: #1d4ed8;
+--accent: #f97316;
+--sidebar-bg: #0a1128;
+--sidebar-text: #94a3b8;
+--sidebar-active: #ffffff;
+```
+
+### Background Gradients (keep)
+- Light: `linear-gradient(180deg, #ffffff 0%, #f5f8ff 28%, #eef4ff 58%, #ffffff 100%)`
+- Dark: `linear-gradient(180deg, #0a1535 0%, #0d1f52 35%, #091228 100%)`
+
+### Glow Effects (keep)
+- Orange glow top-left: `rgba(234, 88, 12, 0.24)`
+- Blue glow top-right: `rgba(59, 130, 246, 0.18)`
+
+---
+
+## 2. Typography (Keep As-Is)
+- Font: **Inter** (already configured)
+- Headings: `font-black`, `tracking-[-0.04em]`
+- Kicker labels: `text-xs font-bold uppercase tracking-[0.28em] text-orange-600`
+
+---
+
+## 3. What to Redesign (Inspired by isysolution.com)
+
+### 3.1 Marketplace — Public Pages
+
+#### Home Page (`/`)
+Current issues to fix:
+- Hero section needs stronger visual hierarchy
+- Add animated stats/counters section
+- Add "How it works" step-by-step section
+- Add industry/use-case cards section
+- Add social proof / testimonials section
+- Add partners/logos strip
+
+Redesign plan:
+```
+Hero
+  ├── Kicker badge (orange)
+  ├── Large headline (blue-950)
+  ├── Subheadline
+  ├── Two CTAs: "Get Started" (orange pill) + "See Demo" (outline pill)
+  └── Hero visual / mockup card
+
+Stats Strip
+  └── 3–4 animated counters (vehicles, companies, bookings, countries)
+
+How It Works
+  ├── Step 1: Create your workspace
+  ├── Step 2: Add your fleet
+  ├── Step 3: Go live on marketplace
+  └── Step 4: Manage everything from dashboard
+
+Services / Features Grid
+  └── 6 feature cards (icon + title + description)
+  └── Keep existing feature copy, improve card layout
+
+Industries / Use Cases
+  └── Cards: Car Rental, Truck Fleet, Luxury, Tourism
+
+Testimonials
+  └── 2–3 quote cards with avatar, name, company
+
+Pricing CTA Banner
+  └── "Start free for 90 days" with orange CTA
+
+Footer
+```
+
+#### Features Page (`/features`)
+- Convert flat card list to alternating left/right sections
+- Add icon illustrations per feature
+- Add a comparison table vs competitors
+
+#### Pricing Page (`/pricing`)
+- Add toggle: Monthly / Annual
+- Highlight recommended plan with orange border
+- Improve FAQ accordion styling
+- Add trust badges below pricing cards
+
+#### Explore Page (`/explore`)
+- Improve search form visual weight
+- Add filter sidebar
+- Improve vehicle card design (image, price, rating, CTA)
+
+#### Company Workspace Page
+- Add hero with company branding mockup
+- Add feature highlights
+
+---
+
+### 3.2 Dashboard — Internal Pages
+
+#### Sidebar Navigation
+Current: basic sidebar
+Redesign:
+- Sticky sidebar with logo at top
+- Grouped nav sections with labels
+- Active state: white text + orange left border indicator
+- Collapsed mobile drawer
+
+#### Dashboard Home (`/`)
+- Add KPI summary cards row (reservations, revenue, fleet, customers)
+- Add recent activity feed
+- Add quick action buttons
+- Add chart section (reservations over time)
+
+#### Reservations (`/reservations`)
+- Improve table design: rounded rows, status badges
+- Add filter bar at top
+- Add empty state illustration
+
+#### Fleet (`/fleet`)
+- Add vehicle card grid view option
+- Improve vehicle detail page layout
+- Add availability calendar
+
+#### Customers (`/customers`)
+- Add customer profile cards
+- Improve table with avatar column
+
+#### Contracts (`/contracts`)
+- Add contract status timeline
+- Improve contract detail page
+
+#### Reports (`/reports`)
+- Add chart components (bar, line, doughnut)
+- Add date range picker
+
+---
+
+## 4. Component Redesign Checklist
+
+### Shared Components
+- [ ] `MarketplaceHeader` — add mobile hamburger menu, improve nav spacing
+- [ ] `MarketplaceFooter` — add logo, social links, newsletter input
+- [ ] `BookingForm` — improve step layout, add progress indicator
+- [ ] `WorkspaceTabs` — improve active tab styling
+
+### New Components to Build
+- [ ] `StatsStrip` — animated counters
+- [ ] `HowItWorks` — numbered steps with icons
+- [ ] `TestimonialsSection` — quote cards
+- [ ] `FeatureAlternating` — left/right alternating sections
+- [ ] `PricingToggle` — monthly/annual switch
+- [ ] `KPICard` — dashboard metric card
+- [ ] `ActivityFeed` — recent events list
+- [ ] `ChartCard` — wrapper for chart components
+- [ ] `EmptyState` — illustration + message
+- [ ] `FilterBar` — search + filter controls
+- [ ] `VehicleCard` — improved explore card
+
+---
+
+## 5. Design Patterns to Adopt from Reference Site
+
+| Pattern | Where to Apply |
+|---|---|
+| Sticky header with blur backdrop | Already done — keep |
+| Section kicker labels (orange caps) | Already done — keep |
+| Large bold hero headlines | Already done — keep |
+| Rounded pill buttons | Already done — keep |
+| Card with soft shadow + blur | Already done — keep |
+| Alternating feature sections | Features page |
+| Numbered step process | Home "How it works" |
+| Stats/counters strip | Home page |
+| Testimonials carousel | Home page |
+| Mega footer with columns | Marketplace footer |
+| Sidebar with grouped nav | Dashboard |
+| KPI metric cards | Dashboard home |
+
+---
+
+## 6. Responsive Strategy
+
+### Breakpoints (Tailwind defaults — keep)
+- Mobile: `< 640px`
+- Tablet: `sm: 640px`
+- Desktop: `lg: 1024px`
+- Wide: `xl: 1280px`, `2xl: 1536px`
+
+### Mobile Improvements Needed
+- [ ] Hamburger menu for marketplace header
+- [ ] Collapsible sidebar for dashboard
+- [ ] Stack pricing cards vertically
+- [ ] Full-width booking form
+- [ ] Swipeable testimonials
+
+---
+
+## 7. Animation & Interaction
+
+### Recommended Additions
+- Scroll-triggered fade-in for sections (use `IntersectionObserver` or Framer Motion)
+- Counter animation for stats strip
+- Hover lift effect on feature cards (`hover:-translate-y-1 transition`)
+- Smooth accordion for FAQ
+- Loading skeleton for data tables
+
+### Keep Existing
+- `transition-colors` on theme switch
+- Backdrop blur on header/footer
+- Button hover states
+
+---
+
+## 8. Implementation Phases
+
+### Phase 1 — Marketplace Public Pages (Priority)
+1. Home page redesign
+   - Stats strip
+   - How it works section
+   - Testimonials section
+2. Features page alternating layout
+3. Pricing page toggle + improved cards
+4. Explore page vehicle cards
+
+### Phase 2 — Dashboard UX
+1. Sidebar redesign
+2. Dashboard home KPI cards + charts
+3. Reservations table improvements
+4. Fleet page improvements
+
+### Phase 3 — Polish
+1. Mobile responsiveness audit
+2. Animations
+3. Empty states
+4. Accessibility audit
+5. Performance optimization
+
+---
+
+## 9. Files to Modify
+
+### Marketplace
+| File | Change |
+|---|---|
+| `src/app/(public)/HomeContent.tsx` | Add stats, how-it-works, testimonials sections |
+| `src/app/(public)/features/page.tsx` | Alternating layout |
+| `src/app/(public)/pricing/PricingPageContent.tsx` | Toggle + improved cards |
+| `src/app/(public)/explore/ExploreVehicleGrid.tsx` | Improved vehicle cards |
+| `src/components/MarketplaceHeader.tsx` | Mobile menu |
+| `src/components/MarketplaceFooter.tsx` | Mega footer |
+| `src/app/globals.css` | No changes needed |
+
+### Dashboard
+| File | Change |
+|---|---|
+| `src/app/(dashboard)/page.tsx` | KPI cards + charts |
+| `src/app/(dashboard)/reservations/page.tsx` | Table improvements |
+| `src/app/(dashboard)/fleet/page.tsx` | Card grid view |
+| `src/app/globals.css` | No changes needed |
+
+---
+
+## 10. What NOT to Change
+- Color palette (blue-950, orange-600, gradients)
+- Font (Inter)
+- Dark mode implementation
+- CSS utility classes (`.card`, `.site-page`, `.site-panel`, `.btn-primary`, etc.)
+- Tailwind config
+- Authentication flows
+- API integration layer
+
+---
+
+## Notes
+- The existing design system is already high quality — the goal is to add missing sections and improve layout density, not rebuild from scratch.
+- All new sections should use existing CSS utility classes (`.site-section`, `.site-panel`, `.site-kicker`, `.site-title`, `.site-lead`).
+- Maintain dark mode support on all new components.