root
c77d0a8e89
Build & Push / Build & Push Docker Image (push) Failing after 10m39s
Replace storefront naming across source, tests, docs, config, and production scripts. Rename the legacy top-level app directory and Carplace component files, remove duplicate storefront startup scripts, and refresh the lockfile.
293 lines
8.2 KiB
Markdown
293 lines
8.2 KiB
Markdown
# 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 Carplace — 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 carplace
|
||
└── 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 30 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
|
||
- [ ] `CarplaceHeader` — add mobile hamburger menu, improve nav spacing
|
||
- [ ] `CarplaceFooter` — 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 | Carplace 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 carplace 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 — Carplace 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
|
||
|
||
### Carplace
|
||
| 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/CarplaceHeader.tsx` | Mobile menu |
|
||
| `src/components/CarplaceFooter.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.
|