diff --git a/hifi-src/src/i18n/de.js b/hifi-src/src/i18n/de.js index ca1660d..b3c71f9 100644 --- a/hifi-src/src/i18n/de.js +++ b/hifi-src/src/i18n/de.js @@ -156,6 +156,15 @@ export default { requestContact: 'Kontakt anfragen', featuredBadge: 'Empfohlen', tierLabels: ['Einstieg', 'Upgrade', 'Performance', 'Premium', 'High-End', 'Signature', 'Referenz'], + tierDescriptions: [ + 'Solider Sound und spürbare Verbesserung für jeden Tag.', + 'Mehr Klarheit und Dynamik für ein intensiveres Hörerlebnis.', + 'Spürbar mehr Leistung und Kontrolle für echte Fahrfreude.', + 'Premium-Komponenten perfekt abgestimmt für höchste Ansprüche.', + 'High-End Performance und individuelle Abstimmung auf höchstem Niveau.', + 'Maßgeschneiderte Lösungen und einzigartige Integration für Kenner.', + 'Außergewöhnliche Projekte. Grenzenlos in Technik und Design.', + ], tiersHeading: (count) => `${count} Stufen. Ein Ziel: perfekter Klang.`, tiersSubheading: 'Von der soliden Basis bis zum kompromisslosen Meisterwerk – finde dein Paket.', }, diff --git a/hifi-src/src/i18n/en.js b/hifi-src/src/i18n/en.js index 08eaf48..f9135d6 100644 --- a/hifi-src/src/i18n/en.js +++ b/hifi-src/src/i18n/en.js @@ -156,6 +156,15 @@ export default { requestContact: 'Request contact', featuredBadge: 'Recommended', tierLabels: ['Entry', 'Upgrade', 'Performance', 'Premium', 'High-End', 'Signature', 'Reference'], + tierDescriptions: [ + 'Solid sound and a noticeable improvement for every day.', + 'More clarity and dynamics for a richer listening experience.', + 'Noticeably more power and control for real driving enjoyment.', + 'Premium components perfectly tuned for the highest demands.', + 'High-end performance and individual tuning at the highest level.', + 'Tailored solutions and unique integration for connoisseurs.', + 'Exceptional projects. Limitless in technology and design.', + ], tiersHeading: (count) => `${count} tiers. One goal: perfect sound.`, tiersSubheading: 'From a solid foundation to an uncompromising masterpiece – find your package.', }, diff --git a/hifi-src/src/pages/public/ModelPage.jsx b/hifi-src/src/pages/public/ModelPage.jsx index e73cb64..14d3bf4 100644 --- a/hifi-src/src/pages/public/ModelPage.jsx +++ b/hifi-src/src/pages/public/ModelPage.jsx @@ -48,6 +48,10 @@ const PACKAGE_THEMES = { ], }; +// Ein Icon je Kategorie-Stufe (nicht pro Paket - siehe tierLabels), fuer die erklaerende +// Legende unter der Kachel-Reihe. Reihenfolge muss zu modelPage.tierLabels passen. +const TIER_ICONS = ['route', 'activity', 'gauge', 'shield-check', 'gem', 'crown', 'star']; + const hslToRgb = (h, s, l) => { s /= 100; l /= 100; @@ -126,6 +130,15 @@ export default function ModelPage() { // oben. Das braucht keine zusaetzliche Admin-Einstellung und passt sich automatisch // an jede Paketanzahl an. const tierLabels = t('modelPage.tierLabels'); + const tierDescriptions = t('modelPage.tierDescriptions'); + // Erklaerende Legende unter den Karten: ein Eintrag je Kategorie-Stufe (nicht je Paket), + // Akzentfarbe an einem repraesentativen Punkt der jeweiligen Kategorie-Spanne entnommen, + // damit die Legende farblich zu den Karten oben passt. + const tierLegend = tierLabels.map((label, i) => { + const legendT = (i + 0.5) / tierLabels.length; + const accentRgb = materialRgbAt(MATERIALS, legendT, 'accent').map(Math.round); + return { label, description: tierDescriptions[i], icon: TIER_ICONS[i], color: `rgb(${accentRgb.join(', ')})` }; + }); const rankById = new Map( [...packages].sort((a, b) => a.total_price - b.total_price).map((p, i) => [p.id, i]) ); @@ -312,6 +325,18 @@ export default function ModelPage() { ); })} + +
+ {item.label} +
+{item.description}
+