# Komplettlösung features carousel (4 tabs) **Last Updated:** 2026-04-01 ## Purpose Reusable **4-tab** Alpine carousel (“Die **Komplettlösung** …”) used on paid LPs (`/gastro`, `/schichtbetriebe`, `/paid`, `/kostenlos-testen`) and **homepage v3** (`/v3`). It is **not** the 7-tab `#feature-showcase-section` block in `v2/start-v2.php` (different JS and markup). ## Files | Role | Path | |------|------| | Variant data (SSOT) | `v2/data/komplettloesung-features-carousel-4/{gastro,schichtbetriebe,paid_paid,kostenlos-testen,landing-v3}.php` | | Markup partial | `v2/sections/partials/komplettloesung-features-carousel-4.php` | | Head assets (CSS + JS, once per request) | `v2/sections/partials/komplettloesung-features-carousel-4-assets.php` | | Source CSS | `v2/css/komplettloesung-features-carousel-4.css` | | Minified CSS | `v2/css/komplettloesung-features-carousel-4.min.css` | | Source JS | `v2/js/komplettloesung-features-carousel-4.js` | | Minified JS | `v2/js/komplettloesung-features-carousel-4.min.js` | Alpine component name: **`ordioKomplettloesungFeatures4`** (registered on `alpine:init`). ## Head load order Include **`komplettloesung-features-carousel-4-assets.php` inside `` before `v2/base/head.php`** so the deferred bundle runs **before** `alpine.min.js` and registers `Alpine.data` in time. ## Usage ```php 'gastro', // loads v2/data/komplettloesung-features-carousel-4/gastro.php 'instance_id' => 'gastro-lp', // unique DOM id prefix // Optional overrides: // 'section_title_html' => '...', // 'section_classes' => 'extra-class', // 'section_padding' => 'py-12 sm:py-16', // default; override for page-specific vertical rhythm (e.g. v3) // 'headline_block_mb_class' => 'mb-12', // default; space below headline row before tabs/panels ]; include __DIR__ . '/../sections/partials/komplettloesung-features-carousel-4.php'; ?> ``` After editing CSS or JS: **`npm run minify`** (entries are listed in `minify-assets.js`). ## Validation ```bash php -l v2/sections/partials/komplettloesung-features-carousel-4.php php v2/scripts/dev-helpers/verify-komplettloesung-features-carousel-4.php ``` ## Related - Distinction from the 8-card grid: `docs/systems/shared-components/FEATURE_SHOWCASE_GRID.md` - Cursor rule: `.cursor/rules/komplettloesung-features-carousel-4.mdc`