# Feature Comparison Table Analysis

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

## Current Table Structure

### Location

- **File:** `v2/pages/static_pricing.php`
- **Lines:** 519-3927 (approximately 3400 lines)
- **Included in:** `v2/pages/static_pricing_new.php` via file extraction (lines 289-297)

### Categories Identified

1. Digitale Personalakte (line ~591)
2. Dokumente (line ~773)
3. Verfügbarkeiten (line ~1010)
4. Rechte & Rollen (line ~1188)
5. Lohn & Gehalt (line ~1366)
6. Schichtplan (line ~1772)
7. Zeiterfassung (line ~2177)
8. Team Terminal (line ~2596)
9. Kommunikation (line ~2836)
10. Checklisten & Aufgaben (line ~2957)
11. Steuerberater & Schnittstellen (line ~3266)
12. Appstore & Integrationen (line ~3450)
13. Sicherheit & Support (line ~3574)

### Current Structure Pattern

Each category follows this pattern:

1. Category header section with h3 title
2. Empty spacer divs for column alignment
3. Relative container with:
   - Fake card backgrounds (absolute positioned)
   - Table with feature rows
   - Fake card borders (absolute positioned)

### Features

- Sticky header with plan names, prices, descriptions, CTAs
- Feature rows with checkmarks (blue for Pro, gray for others)
- Complex layout using flexbox with fixed column widths (w-2/6, w-1/6)
- Fake card backgrounds and borders for visual effect

### Issues to Address

- Complex nested structure with fake backgrounds
- No collapsible functionality
- No tab navigation
- Hard to maintain (3400+ lines)
- Not mobile-friendly
- No tooltips/info icons

## Target Design (Shiftbase-Inspired)

### Key Features Needed

1. **Tab Navigation**

   - "Funktionen pro Kategorie" (default view - current structure)
   - "Funktionen pro Plan" (alternative view - group by plan)

2. **Collapsible Categories**

   - All 13 categories should be collapsible
   - Use `<details>`/`<summary>` for accessibility
   - Smooth animations
   - Default: expanded on desktop, collapsed on mobile

3. **Modern Styling**

   - Clean white table
   - Remove fake card backgrounds
   - Better spacing and typography
   - Blue checkmarks for Pro plan
   - Gray checkmarks for others

4. **Info Icons**

   - Circular 'i' icon for features needing explanation
   - CSS tooltips

5. **FAQ Sections**
   - 2-3 collapsible FAQ sections at bottom
   - Common pricing questions

## Implementation Strategy

### Phase 1: Data Extraction

- Parse existing table to extract all features
- Organize by category and plan availability
- Create structured data format

### Phase 2: Component Creation

- Create `pricing-comparison-table-modern.php`
- Implement tab navigation with Alpine.js
- Add collapsible sections
- Modern styling

### Phase 3: Integration

- Replace file extraction in `static_pricing_new.php`
- Add CSS and JS
- Test functionality