Improve hub page: new RouteStepper, HubProductCard with ApexCharts

- Redesign RouteStepper: nodes connected by lines with distance on line
- Add HubProductCard component with sparkline chart background
- Auto-select first product when hub page loads
- Remove placeholder with package-x icon
- Add ApexCharts plugin for charts
- Pass startName/endName to RouteStepper for route visualization

package.json

@@ -38,6 +38,7 @@
     "@sentry/vue": "^10.29.0",
     "@tailwindcss/vite": "^4.1.17",
     "@vue/apollo-composable": "^4.2.2",
+    "apexcharts": "^5.3.6",
     "eslint": "^9.39.1",
     "mapbox-gl": "^3.17.0",
     "nuxt": "^4.1.0",
@@ -46,7 +47,8 @@
     "pinia": "^3.0.3",
     "vue": "^3.5.20",
     "vue-router": "^4.5.1",
-    "vue-timeline-chart": "^1.1.1"
+    "vue-timeline-chart": "^1.1.1",
+    "vue3-apexcharts": "^1.10.0"
   },
   "devDependencies": {
     "@graphql-codegen/cli": "^6.1.0",