diff --git a/hifi-src/src/i18n/de.js b/hifi-src/src/i18n/de.js index a8a3ef1..1b7ee48 100644 --- a/hifi-src/src/i18n/de.js +++ b/hifi-src/src/i18n/de.js @@ -155,6 +155,7 @@ export default { productLoading: 'Produkt wird geladen…', requestContact: 'Kontakt anfragen', featuredBadge: 'Empfohlen', + tierLabels: ['Einstieg', 'Upgrade', 'Performance', 'Premium', 'High-End', 'Signature', 'Referenz'], }, leistungen: { metaTitle: 'Leistungen', diff --git a/hifi-src/src/i18n/en.js b/hifi-src/src/i18n/en.js index 965dc18..9506557 100644 --- a/hifi-src/src/i18n/en.js +++ b/hifi-src/src/i18n/en.js @@ -155,6 +155,7 @@ export default { productLoading: 'Loading product…', requestContact: 'Request contact', featuredBadge: 'Recommended', + tierLabels: ['Entry', 'Upgrade', 'Performance', 'Premium', 'High-End', 'Signature', 'Reference'], }, leistungen: { metaTitle: 'Services', diff --git a/hifi-src/src/pages/public/ModelPage.jsx b/hifi-src/src/pages/public/ModelPage.jsx index aa1c804..cac910a 100644 --- a/hifi-src/src/pages/public/ModelPage.jsx +++ b/hifi-src/src/pages/public/ModelPage.jsx @@ -111,6 +111,7 @@ export default function ModelPage() { // oben. Das braucht keine zusaetzliche Admin-Einstellung und passt sich automatisch // an jede Paketanzahl an. const materials = theme === 'dark' ? MATERIALS_DARK : MATERIALS_LIGHT; + const tierLabels = t('modelPage.tierLabels'); const rankById = new Map( [...packages].sort((a, b) => a.total_price - b.total_price).map((p, i) => [p.id, i]) ); @@ -118,6 +119,8 @@ export default function ModelPage() { const n = packages.length; const rank = rankById.get(pkg.id) ?? 0; const tierT = n <= 1 ? 0 : rank / (n - 1); + const tierNumber = String(rank + 1).padStart(2, '0'); + const tierLabel = tierLabels[Math.min(Math.floor(tierT * tierLabels.length), tierLabels.length - 1)]; const bgRgb = materialRgbAt(materials, tierT, 'bg').map(Math.round); const accentRgbFloat = materialRgbAt(materials, tierT, 'accent'); @@ -151,6 +154,8 @@ export default function ModelPage() { return { isDarkCard, mutedColor, + tierNumber, + tierLabel, priceColor: `rgb(${priceRgb.join(', ')})`, iconChipStyle: { backgroundColor: `rgba(${accentRgb.join(', ')}, 0.16)`, @@ -198,7 +203,7 @@ export default function ModelPage() {
+ {tierNumber} · {tierLabel} +
+ {pkg.icon_name && (