# Shiftbase Comparison Table Analysis

**Last Updated:** 2025-01-27

## Overview

Deep analysis of Shiftbase's feature comparison table design, structure, and interactions to inform the Ordio pricing page redesign.

## Table Structure

### Layout

- **Type**: Clean HTML table structure
- **Background**: Pure white (#FFFFFF)
- **Borders**: Subtle gray borders (#E5E7EB)
- **Spacing**: Generous padding (p-4 to p-6)
- **Rounded Corners**: rounded-lg (8px) for sections

### Tab Navigation

- **Location**: Above the comparison table
- **Tabs**:
  - "Funktionen pro Kategorie" (Functions by Category) - Active
  - "Funktionen pro Plan" (Functions by Plan)
- **Styling**: Clean underline indicator for active tab
- **Interaction**: Smooth transition when switching tabs

### Sticky Header

- **Position**: Sticky at top when scrolling
- **Content**: Plan names (Basic, Premium, Enterprise)
- **Styling**: White background with subtle shadow
- **Z-index**: High enough to stay above content

## Collapsible Sections

### Implementation

- **Pattern**: HTML5 `<details>` and `<summary>` elements
- **Default State**: Some sections expanded, others collapsed
- **Icon**: Plus/minus icon that rotates on expand/collapse
- **Animation**: Smooth transition (approximately 0.3s ease)

### Category Headers

- **Styling**: Clickable summary elements
- **Typography**: Bold, larger text (text-xl)
- **Hover State**: Subtle background change
- **Focus State**: Visible focus indicator
- **Icon Position**: Right side of header

### Section Content

- **Padding**: Consistent padding inside expanded sections
- **Spacing**: Proper gap between features
- **Borders**: Subtle borders between sections

## Feature Rows

### Structure

- **Left Column**: Feature name with optional info icon
- **Plan Columns**: Checkmarks or feature details
- **Alignment**: Left-aligned feature names, centered checkmarks

### Icons

- **Checkmarks**: Blue (#4D8EF3) for included features
- **Crosses**: Gray (#6B7280) for excluded features
- **Info Icons**: Small circular 'i' icon for tooltips
- **Size**: Consistent icon sizing (approximately 20-24px)

### Typography

- **Feature Names**: text-sm to text-base, readable
- **Plan Details**: text-sm, centered
- **Category Headers**: text-xl, bold

## Color Scheme

### Primary Colors

- **Background**: #FFFFFF (white)
- **Borders**: #E5E7EB (light gray)
- **Text**: #1F2937 (dark gray)
- **Accents**: #4D8EF3 (blue for checkmarks, active states)

### Interactive Elements

- **Hover**: Subtle gray background (#F9FAFB)
- **Active Tab**: Blue underline
- **Focus**: Blue outline (#4D8EF3)

## Responsive Behavior

### Desktop

- Full table width
- All columns visible
- Sticky header functional
- Smooth animations

### Mobile

- Horizontal scroll for table
- Collapsible sections work on touch
- Tab navigation accessible
- Optimized spacing

## Accessibility Features

### Keyboard Navigation

- Tab key navigates through interactive elements
- Enter/Space toggles collapsible sections
- Arrow keys for tab navigation

### ARIA Attributes

- Proper `role` attributes
- `aria-expanded` for collapsible sections
- `aria-label` for icons
- Screen reader friendly

### Focus Indicators

- Visible focus outlines
- High contrast
- Proper focus order

## Animation Details

### Expand/Collapse

- **Duration**: ~0.3s
- **Easing**: ease or ease-in-out
- **Property**: height/opacity transition
- **Icon Rotation**: Smooth 180deg rotation

### Tab Switching

- **Duration**: ~0.2s
- **Effect**: Underline slides to new tab
- **Content**: Fade transition

## Best Practices Observed

1. **Semantic HTML**: Proper use of `<table>`, `<details>`, `<summary>`
2. **Progressive Enhancement**: Works without JavaScript
3. **Accessibility First**: ARIA labels, keyboard navigation
4. **Performance**: Smooth 60fps animations
5. **Clean Design**: Minimal, professional aesthetic
6. **Consistent Spacing**: Generous whitespace
7. **Clear Hierarchy**: Typography and spacing create visual hierarchy

## Key Takeaways for Implementation

1. Use HTML5 `<details>`/`<summary>` for collapsible sections
2. Implement tab navigation above table
3. Clean table structure with proper semantic HTML
4. Blue checkmarks (#4D8EF3) for included features
5. Smooth animations (0.3s ease)
6. Sticky header with plan information
7. Info icons for tooltips where needed
8. Mobile-friendly with horizontal scroll
9. Full keyboard accessibility
10. Clean, minimal design with generous whitespace