# Current Comparison Table Audit

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

## Overview

Complete audit of the current feature comparison table implementation in `static_pricing.php` (lines 519-3927).

## Table Structure

### Current Implementation

- **Type**: Complex flex-based layout with fake card backgrounds
- **Location**: Lines 519-3927 in `static_pricing.php`
- **Total Lines**: ~3408 lines
- **Structure**: Nested divs with absolute positioning for card backgrounds

### Sticky Header

- **Location**: Lines 540-587
- **Structure**: Flex layout with plan columns
- **Content**: Plan names, prices, descriptions, CTAs
- **Styling**: Backdrop blur, z-index 10
- **Plans**: Starter, Plus, Pro, Enterprise

## Category Sections

### Identified Categories

1. **Digitale Personalakte** (Line 591)

   - Stammdaten in der Personalakte
   - Verknüpfung mit dem Steuerberater

2. **Dokumente** (Line 770)

   - Intelligente Dokumentenregeln
   - Automatisierung durch Workflows
   - Automatische Erinnerungen erstellen

3. **Verfügbarkeiten** (Line 1006)

   - Abwesenheiten & Urlaubsplaner
   - Verfügbarkeiten via App abfragen

4. **Rechte & Rollen** (Line 1184)

   - Beliebig viele Administratoren
   - Individuelle Rechte & Rollen

5. **Lohn & Gehalt** (Line 1362)

   - Lohnregeln & Urlaubsregeln
   - (Additional features)

6. **Schichtplan** (Line 1768)

   - (Multiple features)

7. **Zeiterfassung** (Line 2173)

   - (Multiple features)

8. **Checklisten** (Line 2953)
   - (Multiple features)

### Category Structure Pattern

Each category follows this pattern:

```html
<div class="overflow-hidden max-w-7xl mx-auto pb-3 px-6">
  <div class="w-full flex items-stretch">
    <div class="w-2/6 py-3 pr-4 flex items-end">
      <h3 class="mt-auto text-xl lg:font-gilroybold text-gray">
        Category Name
      </h3>
    </div>
    <!-- Empty spacer divs for each plan -->
  </div>

  <div class="relative">
    <!-- Fake card backgrounds (absolute positioned) -->
    <!-- Table with feature rows -->
    <!-- Fake card borders (absolute positioned) -->
  </div>
</div>
```

## Feature Row Structure

### Pattern

```html
<tr>
  <th scope="row" class="w-2/6 py-3 pr-4 text-left text-sm">Feature Name</th>
  <td class="pl-4 relative w-1/6 py-0 text-center">
    <!-- Checkmark or cross SVG icon -->
  </td>
  <!-- Repeat for each plan (4 columns) -->
</tr>
```

### Icon Usage

- **Checkmarks**: SVG with stroke="#394347" (gray) or stroke="#4d8ef3" (blue for Pro plan)
- **Crosses**: SVG with stroke="#6b7280" (gray)
- **Size**: h-8 w-8 (32px)
- **Position**: Centered in cell

## Plan Columns

### Four Plans

1. **Starter** (w-1/6)
2. **Plus** (w-1/6)
3. **Pro** (w-1/6) - Highlighted with blue checkmarks
4. **Enterprise** (w-1/6)

### Column Widths

- Feature column: w-2/6 (33.33%)
- Each plan column: w-1/6 (16.67%)
- Total: 100%

## Styling Details

### Fake Card Backgrounds

- **Position**: Absolute, inset-0
- **Background**: bg-white rounded-lg shadow
- **Purpose**: Create card-like appearance behind table

### Fake Card Borders

- **Position**: Absolute, inset-0
- **Border**: ring-1 or ring-2 (Pro has ring-ordio-blue)
- **Purpose**: Visual separation between plans

### Current CSS Classes

- `overflow-hidden max-w-7xl mx-auto pb-3 px-6` - Category container
- `w-full flex items-stretch` - Flex layout wrapper
- `w-2/6 py-3 pr-4` - Feature column
- `w-1/6 pl-4` - Plan column
- `relative w-full` - Table wrapper
- `divide-y divide-neutral-100` - Row separators

## Issues with Current Implementation

1. **Complexity**: 3400+ lines of nested divs
2. **Maintainability**: Hard to update or modify
3. **Performance**: Multiple absolute positioned elements
4. **Accessibility**: Limited ARIA labels, no keyboard navigation for categories
5. **Mobile**: Complex layout may not work well on small screens
6. **No Collapsible Sections**: All categories always visible
7. **No Tab Functionality**: Single view only
8. **Fake Elements**: Using absolute positioning for visual effects

## Data Structure

### Feature Data

- Feature name in `<th>` element
- Check/cross in each plan's `<td>` element
- Icons are inline SVG elements
- No structured data format (all HTML)

### Plan Information

- Plan names in sticky header
- Prices in sticky header (with pricing toggle support)
- Descriptions in sticky header
- CTAs in sticky header

## Required Changes

1. **Simplify Structure**: Replace flex layout with clean HTML table
2. **Add Collapsible**: Wrap categories in `<details>`/`<summary>`
3. **Add Tabs**: Implement tab navigation above table
4. **Remove Fake Elements**: Use real table borders and backgrounds
5. **Improve Accessibility**: Add ARIA labels, keyboard navigation
6. **Mobile Optimization**: Horizontal scroll container
7. **Clean CSS**: Remove complex absolute positioning