# Feature showcase grid (8 product cards)

**Last Updated:** 2026-04-01

**Not to be confused with:** the **4-tab “Komplettlösung”** carousel (Schichtplan / Zeiterfassung / Löhne / Personal) — see `docs/systems/shared-components/KOMPLETTLOESUNG_FEATURES_CAROUSEL_4.md` and `v2/sections/partials/komplettloesung-features-carousel-4.php`. That block uses Alpine tab panels and separate assets; this document covers the **8-card** product link grid only.

## Purpose

Single canonical implementation of the homepage-style 8-card feature grid (Schichtplanung, Zeiterfassung, Lohnabrechnung, etc.) with:

- Per-page **scoped SVG/DOM ids** (`ordio-fsg-{instance_id}-…`) to avoid duplicate `id` collisions when multiple sections or pages load similar SVGs.
- **`data-ordio-fsg-role`** hooks for JS (`rotate`, `time`, `euro`, `progress`) instead of global ids inside the grid.
- **`v2/js/feature-showcase-grid.min.js`** — scroll-linked demo animation (IntersectionObserver + `requestAnimationFrame`), `prefers-reduced-motion` static state.

## Files

| Role | Path |
|------|------|
| Markup + scoped defs | `v2/components/feature-cards-grid.php` |
| Options + include wrapper | `v2/sections/partials/feature-showcase-grid.php` |
| Source JS | `v2/js/feature-showcase-grid.js` |
| Minified JS | `v2/js/feature-showcase-grid.min.js` (run `npm run minify` after edits) |

The component prints the script tag **once per HTTP request** (static guard), even if included multiple times.

## Usage

```php
<?php
$feature_showcase_options = [
    'instance_id' => 'my-page',   // slug: letters, digits, underscore, hyphen
    'enable_aos' => true,         // optional; footer line AOS
    'show_footer_line' => true,   // optional; “und viele weitere Funktionen…”
];
// From v2/pages/*.php:
include __DIR__ . '/../sections/partials/feature-showcase-grid.php';
// From v2/start-v2.php or v2/start.php:
// include __DIR__ . '/sections/partials/feature-showcase-grid.php';
?>
```

All cards are **canonical `<a href="…">`** links to product URLs (same targets as homepage).

## Validation

```bash
php v2/scripts/dev-helpers/verify-feature-showcase-grid.php
```

Fails if the grid layout marker is duplicated outside `feature-cards-grid.php`, if JS files are missing, or if a file under `v2/pages/` uses the wrong `__DIR__` path to the partial.

## Related

- `docs/systems/shared-components/COMPONENT_USAGE_GUIDE.md` (quick reference table)
- `.cursor/rules/feature-showcase-grid.mdc` (agent guardrails)