@ably/ui 8.7.0-dev.3fee7c0 → 8.7.0-dev.46571ce

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/core/Meganav.jsx +22 -26
  2. package/core/MeganavContentUseCases.jsx +22 -26
  3. package/core/sprites.svg +2 -0
  4. package/package.json +1 -1
  5. package/src/core/MeganavContentUseCases/component.html.erb +16 -22
  6. package/src/core/MeganavContentUseCases/component.jsx +18 -22
  7. package/src/core/icons/icon-tech-apachekafka.svg +3 -0
package/core/Meganav.jsx CHANGED
@@ -1249,7 +1249,7 @@ var MeganavContentUseCases = function MeganavContentUseCases(_ref) {
1249
1249
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
1250
1250
  className: "ui-meganav-overline",
1251
1251
  id: "meganav-use-cases-panel-use-cases"
1252
- }, "Use cases"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
1252
+ }, "Solutions"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
1253
1253
  "aria-labelledby": "meganav-use-cases-panel-industry-use-cases"
1254
1254
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
1255
1255
  href: absUrl("/solutions/chat"),
@@ -1299,8 +1299,20 @@ var MeganavContentUseCases = function MeganavContentUseCases(_ref) {
1299
1299
  className: "ui-meganav-media-heading"
1300
1300
  }, "Data Synchronization"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
1301
1301
  className: "ui-meganav-media-copy"
1302
- }, "Keep your frontend and backend in realtime sync, at global scale.")))))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
1303
- className: "col-span-full md:col-span-4 pt-24 pb-8 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white"
1302
+ }, "Keep your frontend and backend in realtime sync, at global scale.")))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
1303
+ href: absUrl("/solutions/extend-kafka-to-the-edge"),
1304
+ className: "ui-meganav-media-with-image group"
1305
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
1306
+ name: "icon-tech-apachekafka",
1307
+ size: "2.5rem"
1308
+ }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
1309
+ className: "flex flex-col justify-center"
1310
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
1311
+ className: "ui-meganav-media-heading"
1312
+ }, "Extend Kafka to the edge"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
1313
+ className: "ui-meganav-media-copy"
1314
+ }, "Reliably expand Kafka\u2019s event streaming beyond your private network.")))))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
1315
+ className: "col-span-full md:col-span-4 pt-24 pb-0 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white"
1304
1316
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
1305
1317
  className: "ui-meganav-overline",
1306
1318
  id: "meganav-use-cases-panel-industry"
@@ -1341,7 +1353,12 @@ var MeganavContentUseCases = function MeganavContentUseCases(_ref) {
1341
1353
  className: "ui-meganav-media-heading"
1342
1354
  }, "Healthcare (HIPAA)"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
1343
1355
  className: "ui-meganav-media-copy"
1344
- }, "Provide trustworthy, HIPAA-compliant realtime apps."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
1356
+ }, "Provide trustworthy, HIPAA-compliant realtime apps."))))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
1357
+ className: "col-span-full md:col-span-4 pt-0 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white"
1358
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
1359
+ "aria-labelledby": "meganav-use-cases-panel-solutions",
1360
+ className: "mt-0 md:mt-40"
1361
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
1345
1362
  href: absUrl("/solutions/ecommerce-and-retail"),
1346
1363
  className: "ui-meganav-media group"
1347
1364
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
@@ -1369,28 +1386,7 @@ var MeganavContentUseCases = function MeganavContentUseCases(_ref) {
1369
1386
  className: "ui-meganav-media-heading"
1370
1387
  }, "IoT & Connected Devices"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
1371
1388
  className: "ui-meganav-media-copy"
1372
- }, "Monitor and control global IoT deployments in realtime."))))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
1373
- className: "col-span-full md:col-span-4 pt-8 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white"
1374
- }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
1375
- className: "ui-meganav-overline",
1376
- id: "meganav-use-cases-panel-solutions"
1377
- }, "Solutions"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
1378
- "aria-labelledby": "meganav-use-cases-panel-solutions"
1379
- }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
1380
- href: absUrl("/solutions/extend-kafka-to-the-edge"),
1381
- className: "ui-meganav-media group"
1382
- }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
1383
- className: "ui-meganav-media-heading"
1384
- }, "Extend Kafka to the edge"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
1385
- className: "ui-meganav-media-copy"
1386
- }, "Reliably expand Kafka\u2019s event streaming beyond your private network."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
1387
- href: absUrl("/solutions/asset-tracking"),
1388
- className: "ui-meganav-media group"
1389
- }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
1390
- className: "ui-meganav-media-heading"
1391
- }, "Asset Tracking"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
1392
- className: "ui-meganav-media-copy"
1393
- }, "Track assets in realtime with a solution optimised for last mile logistics.")))))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
1389
+ }, "Monitor and control global IoT deployments in realtime.")))))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
1394
1390
  className: "ui-meganav-content-spacer"
1395
1391
  }));
1396
1392
  };
package/core/MeganavContentUseCases.jsx CHANGED
@@ -175,7 +175,7 @@ var MeganavContentUseCases = function MeganavContentUseCases(_ref) {
175
175
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
176
176
  className: "ui-meganav-overline",
177
177
  id: "meganav-use-cases-panel-use-cases"
178
- }, "Use cases"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
178
+ }, "Solutions"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
179
179
  "aria-labelledby": "meganav-use-cases-panel-industry-use-cases"
180
180
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
181
181
  href: absUrl("/solutions/chat"),
@@ -225,8 +225,20 @@ var MeganavContentUseCases = function MeganavContentUseCases(_ref) {
225
225
  className: "ui-meganav-media-heading"
226
226
  }, "Data Synchronization"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
227
227
  className: "ui-meganav-media-copy"
228
- }, "Keep your frontend and backend in realtime sync, at global scale.")))))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
229
- className: "col-span-full md:col-span-4 pt-24 pb-8 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white"
228
+ }, "Keep your frontend and backend in realtime sync, at global scale.")))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
229
+ href: absUrl("/solutions/extend-kafka-to-the-edge"),
230
+ className: "ui-meganav-media-with-image group"
231
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
232
+ name: "icon-tech-apachekafka",
233
+ size: "2.5rem"
234
+ }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
235
+ className: "flex flex-col justify-center"
236
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
237
+ className: "ui-meganav-media-heading"
238
+ }, "Extend Kafka to the edge"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
239
+ className: "ui-meganav-media-copy"
240
+ }, "Reliably expand Kafka\u2019s event streaming beyond your private network.")))))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
241
+ className: "col-span-full md:col-span-4 pt-24 pb-0 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white"
230
242
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
231
243
  className: "ui-meganav-overline",
232
244
  id: "meganav-use-cases-panel-industry"
@@ -267,7 +279,12 @@ var MeganavContentUseCases = function MeganavContentUseCases(_ref) {
267
279
  className: "ui-meganav-media-heading"
268
280
  }, "Healthcare (HIPAA)"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
269
281
  className: "ui-meganav-media-copy"
270
- }, "Provide trustworthy, HIPAA-compliant realtime apps."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
282
+ }, "Provide trustworthy, HIPAA-compliant realtime apps."))))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
283
+ className: "col-span-full md:col-span-4 pt-0 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white"
284
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
285
+ "aria-labelledby": "meganav-use-cases-panel-solutions",
286
+ className: "mt-0 md:mt-40"
287
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
271
288
  href: absUrl("/solutions/ecommerce-and-retail"),
272
289
  className: "ui-meganav-media group"
273
290
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
@@ -295,28 +312,7 @@ var MeganavContentUseCases = function MeganavContentUseCases(_ref) {
295
312
  className: "ui-meganav-media-heading"
296
313
  }, "IoT & Connected Devices"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
297
314
  className: "ui-meganav-media-copy"
298
- }, "Monitor and control global IoT deployments in realtime."))))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
299
- className: "col-span-full md:col-span-4 pt-8 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white"
300
- }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
301
- className: "ui-meganav-overline",
302
- id: "meganav-use-cases-panel-solutions"
303
- }, "Solutions"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
304
- "aria-labelledby": "meganav-use-cases-panel-solutions"
305
- }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
306
- href: absUrl("/solutions/extend-kafka-to-the-edge"),
307
- className: "ui-meganav-media group"
308
- }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
309
- className: "ui-meganav-media-heading"
310
- }, "Extend Kafka to the edge"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
311
- className: "ui-meganav-media-copy"
312
- }, "Reliably expand Kafka\u2019s event streaming beyond your private network."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
313
- href: absUrl("/solutions/asset-tracking"),
314
- className: "ui-meganav-media group"
315
- }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
316
- className: "ui-meganav-media-heading"
317
- }, "Asset Tracking"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
318
- className: "ui-meganav-media-copy"
319
- }, "Track assets in realtime with a solution optimised for last mile logistics.")))))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
315
+ }, "Monitor and control global IoT deployments in realtime.")))))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
320
316
  className: "ui-meganav-content-spacer"
321
317
  }));
322
318
  };
package/core/sprites.svg CHANGED
@@ -411,6 +411,8 @@
411
411
  <path d="M12.8863 45.5057L1.62891 41.3499L6.37144 39.1648L7.96873 34.5518L12.8863 45.5057Z" stroke="#03020D" stroke-width="1.5" stroke-linejoin="round"/>
412
412
  <path d="M30.2574 0.999899L19 5.15576L23.7425 7.34085L25.3398 11.9538L30.2574 0.999899Z" stroke="#03020D" stroke-width="1.5" stroke-linejoin="round"/>
413
413
  <path d="M33 6L44 6" stroke="#03020D" stroke-width="1.5" stroke-linecap="round"/>
414
+ </symbol><symbol fill="none" id="sprite-icon-tech-apachekafka" viewBox="0 0 48 48"><title>sprite-icon-tech-apachekafka</title>
415
+ <path d="M32.3062 26.586C30.437 26.586 28.7612 27.4141 27.6137 28.7179L24.6732 26.6362C24.9853 25.7768 25.1645 24.854 25.1645 23.8881C25.1645 22.9389 24.9915 22.0316 24.6897 21.1849L27.6236 19.1252C28.7711 20.4225 30.4424 21.2461 32.3062 21.2461C35.7562 21.2461 38.5635 18.4393 38.5635 14.9888C38.5635 11.5382 35.7562 8.73143 32.3062 8.73143C28.8562 8.73143 26.0489 11.5382 26.0489 14.9888C26.0489 15.6064 26.1422 16.2019 26.3097 16.7659L23.3737 18.8266C22.1473 17.3051 20.3815 16.2428 18.3696 15.9185V12.3801C21.204 11.7848 23.3396 9.26646 23.3396 6.25732C23.3396 2.80681 20.5323 0 17.0823 0C13.6322 0 10.825 2.80681 10.825 6.25732C10.825 9.22616 12.9053 11.7134 15.683 12.3512V15.9356C11.8921 16.601 9 19.9094 9 23.8881C9 27.8862 11.9208 31.2067 15.739 31.8495V35.6343C12.9329 36.2511 10.825 38.7536 10.825 41.7427C10.825 45.1932 13.6322 48 17.0823 48C20.5323 48 23.3396 45.1932 23.3396 41.7427C23.3396 38.7536 21.2317 36.2511 18.4256 35.6343V31.8494C20.3979 31.5172 22.1313 30.4759 23.3451 28.9882L26.3053 31.0834C26.1409 31.6423 26.0489 32.232 26.0489 32.8433C26.0489 36.2938 28.8562 39.1007 32.3062 39.1007C35.7562 39.1007 38.5635 36.2938 38.5635 32.8433C38.5635 29.3928 35.7562 26.586 32.3062 26.586ZM32.3062 11.9549C33.9792 11.9549 35.3399 13.3162 35.3399 14.9888C35.3399 16.6613 33.9792 18.0225 32.3062 18.0225C30.6332 18.0225 29.2725 16.6613 29.2725 14.9888C29.2725 13.3162 30.6332 11.9549 32.3062 11.9549ZM14.0484 6.25732C14.0484 4.58479 15.4093 3.22359 17.0823 3.22359C18.7553 3.22359 20.116 4.58479 20.116 6.25732C20.116 7.92986 18.7553 9.29106 17.0823 9.29106C15.4093 9.29106 14.0484 7.92986 14.0484 6.25732ZM20.116 41.7427C20.116 43.4152 18.7553 44.7764 17.0823 44.7764C15.4093 44.7764 14.0484 43.4152 14.0484 41.7427C14.0484 40.0701 15.4093 38.7089 17.0823 38.7089C18.7553 38.7089 20.116 40.0701 20.116 41.7427ZM17.082 28.1192C14.7487 28.1192 12.8505 26.2213 12.8505 23.8881C12.8505 21.5548 14.7487 19.6566 17.082 19.6566C19.4152 19.6566 21.3134 21.5548 21.3134 23.8881C21.3134 26.2213 19.4152 28.1192 17.082 28.1192ZM32.3062 35.8772C30.6332 35.8772 29.2725 34.5159 29.2725 32.8433C29.2725 31.1708 30.6332 29.8096 32.3062 29.8096C33.9792 29.8096 35.3399 31.1708 35.3399 32.8433C35.3399 34.5159 33.9792 35.8772 32.3062 35.8772Z" fill="#03020D"/>
414
416
  </symbol><symbol id="sprite-linkedin" viewBox="0 0 24 24"><title>sprite-linkedin</title>
415
417
  <path d="M24 1.76471V22.2353C24 22.7033 23.8141 23.1522 23.4831 23.4831C23.1522 23.8141 22.7033 24 22.2353 24H1.76471C1.29668 24 0.847817 23.8141 0.51687 23.4831C0.185924 23.1522 0 22.7033 0 22.2353L0 1.76471C0 1.29668 0.185924 0.847817 0.51687 0.51687C0.847817 0.185924 1.29668 0 1.76471 0L22.2353 0C22.7033 0 23.1522 0.185924 23.4831 0.51687C23.8141 0.847817 24 1.29668 24 1.76471ZM7.05882 9.17647H3.52941V20.4706H7.05882V9.17647ZM7.37647 5.29412C7.37833 5.02715 7.32759 4.76242 7.22714 4.51506C7.12669 4.2677 6.9785 4.04255 6.79103 3.85246C6.60357 3.66237 6.38049 3.51107 6.13455 3.4072C5.88861 3.30332 5.62462 3.24891 5.35765 3.24706H5.29412C4.7512 3.24706 4.23053 3.46273 3.84663 3.84663C3.46273 4.23053 3.24706 4.7512 3.24706 5.29412C3.24706 5.83703 3.46273 6.35771 3.84663 6.74161C4.23053 7.1255 4.7512 7.34118 5.29412 7.34118C5.56111 7.34774 5.82678 7.30164 6.07594 7.2055C6.32511 7.10936 6.55289 6.96506 6.74627 6.78086C6.93965 6.59666 7.09484 6.37616 7.20297 6.13196C7.3111 5.88775 7.37006 5.62464 7.37647 5.35765V5.29412ZM20.4706 13.6094C20.4706 10.2141 18.3106 8.89412 16.1647 8.89412C15.4621 8.85894 14.7626 9.00858 14.1358 9.32814C13.5091 9.64769 12.9771 10.126 12.5929 10.7153H12.4941V9.17647H9.17647V20.4706H12.7059V14.4635C12.6549 13.8483 12.8487 13.2378 13.2452 12.7646C13.6417 12.2915 14.2089 11.9939 14.8235 11.9365H14.9576C16.08 11.9365 16.9129 12.6424 16.9129 14.4212V20.4706H20.4424L20.4706 13.6094Z"/>
416
418
  </symbol><symbol id="sprite-quote" viewBox="0 0 25 19"><title>sprite-quote</title>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ably/ui",
3
- "version": "8.7.0-dev.3fee7c0",
3
+ "version": "8.7.0-dev.46571ce",
4
4
  "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
5
5
  "repository": {
6
6
  "type": "git",
package/src/core/MeganavContentUseCases/component.html.erb CHANGED
@@ -3,7 +3,7 @@
3
3
  <section class="grid grid-cols-12 ui-grid-gap-x w-full">
4
4
  <div class="col-span-full md:col-span-4 py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24 bg-extra-light-grey">
5
5
  <h3 class="ui-meganav-overline" id="meganav-use-cases-panel-use-cases">
6
- Use cases
6
+ Solutions
7
7
  </h3>
8
8
  <ul aria-labelledby="meganav-use-cases-panel-industry-use-cases">
9
9
  <li>
@@ -42,10 +42,19 @@
42
42
  </div>
43
43
  <% end %>
44
44
  </li>
45
+ <li>
46
+ <%= link_to abs_url("/solutions/extend-kafka-to-the-edge"), class: "ui-meganav-media-with-image group" do %>
47
+ <%= render(AblyUi::Core::Icon.new(name: "icon-tech-apachekafka", size: "2.5rem")) %>
48
+ <div class="flex flex-col justify-center">
49
+ <p class="ui-meganav-media-heading">Extend Kafka to the edge</p>
50
+ <p class="ui-meganav-media-copy">Reliably expand Kafka’s event streaming beyond your private network.</p>
51
+ </div>
52
+ <% end %>
53
+ </li>
45
54
  </ul>
46
55
  </div>
47
56
 
48
- <div class="col-span-full md:col-span-4 pt-24 pb-8 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white">
57
+ <div class="col-span-full md:col-span-4 pt-24 pb-0 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white">
49
58
  <h3 class="ui-meganav-overline" id="meganav-use-cases-panel-industry">
50
59
  Industry
51
60
  </h3>
@@ -80,6 +89,11 @@
80
89
  <p class="ui-meganav-media-copy">Provide trustworthy, HIPAA-compliant realtime apps.</p>
81
90
  <% end %>
82
91
  </li>
92
+ </ul>
93
+ </div>
94
+
95
+ <div class="col-span-full md:col-span-4 pt-0 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white">
96
+ <ul aria-labelledby="meganav-use-cases-panel-solutions" class="mt-0 md:mt-40">
83
97
  <li>
84
98
  <%= link_to abs_url("/solutions/ecommerce-and-retail"), class: "ui-meganav-media group" do %>
85
99
  <p class="ui-meganav-media-heading">eCommerce & Retail</p>
@@ -106,26 +120,6 @@
106
120
  </li>
107
121
  </ul>
108
122
  </div>
109
-
110
- <div class="col-span-full md:col-span-4 pt-8 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white">
111
- <h3 class="ui-meganav-overline" id="meganav-use-cases-panel-solutions">
112
- Solutions
113
- </h3>
114
- <ul aria-labelledby="meganav-use-cases-panel-solutions">
115
- <li>
116
- <%= link_to abs_url("/solutions/extend-kafka-to-the-edge"), class: "ui-meganav-media group" do %>
117
- <p class="ui-meganav-media-heading">Extend Kafka to the edge</p>
118
- <p class="ui-meganav-media-copy">Reliably expand Kafka’s event streaming beyond your private network.</p>
119
- <% end %>
120
- </li>
121
- <li>
122
- <%= link_to abs_url("/solutions/asset-tracking"), class: "ui-meganav-media group" do %>
123
- <p class="ui-meganav-media-heading">Asset Tracking</p>
124
- <p class="ui-meganav-media-copy">Track assets in realtime with a solution optimised for last mile logistics.</p>
125
- <% end %>
126
- </li>
127
- </ul>
128
- </div>
129
123
  </section>
130
124
  <div class="ui-meganav-content-spacer"></div>
131
125
  </div>
package/src/core/MeganavContentUseCases/component.jsx CHANGED
@@ -9,7 +9,7 @@ const MeganavContentUseCases = ({ absUrl }) => (
9
9
  <section className="grid grid-cols-12 ui-grid-gap-x w-full">
10
10
  <div className="col-span-full md:col-span-4 py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24 bg-extra-light-grey">
11
11
  <h3 className="ui-meganav-overline" id="meganav-use-cases-panel-use-cases">
12
- Use cases
12
+ Solutions
13
13
  </h3>
14
14
  <ul aria-labelledby="meganav-use-cases-panel-industry-use-cases">
15
15
  <li>
@@ -48,10 +48,19 @@ const MeganavContentUseCases = ({ absUrl }) => (
48
48
  </div>
49
49
  </a>
50
50
  </li>
51
+ <li>
52
+ <a href={absUrl("/solutions/extend-kafka-to-the-edge")} className="ui-meganav-media-with-image group">
53
+ <Icon name="icon-tech-apachekafka" size="2.5rem" />
54
+ <div className="flex flex-col justify-center">
55
+ <p className="ui-meganav-media-heading">Extend Kafka to the edge</p>
56
+ <p className="ui-meganav-media-copy">Reliably expand Kafka’s event streaming beyond your private network.</p>
57
+ </div>
58
+ </a>
59
+ </li>
51
60
  </ul>
52
61
  </div>
53
62
 
54
- <div className="col-span-full md:col-span-4 pt-24 pb-8 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white">
63
+ <div className="col-span-full md:col-span-4 pt-24 pb-0 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white">
55
64
  <h3 className="ui-meganav-overline" id="meganav-use-cases-panel-industry">
56
65
  Industry
57
66
  </h3>
@@ -86,6 +95,13 @@ const MeganavContentUseCases = ({ absUrl }) => (
86
95
  <p className="ui-meganav-media-copy">Provide trustworthy, HIPAA-compliant realtime apps.</p>
87
96
  </a>
88
97
  </li>
98
+ </ul>
99
+ </div>
100
+
101
+ <div className="col-span-full md:col-span-4 pt-0 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white">
102
+
103
+
104
+ <ul aria-labelledby="meganav-use-cases-panel-solutions" className="mt-0 md:mt-40">
89
105
  <li>
90
106
  <a href={absUrl("/solutions/ecommerce-and-retail")} className="ui-meganav-media group">
91
107
  <p className="ui-meganav-media-heading">eCommerce & Retail</p>
@@ -112,26 +128,6 @@ const MeganavContentUseCases = ({ absUrl }) => (
112
128
  </li>
113
129
  </ul>
114
130
  </div>
115
-
116
- <div className="col-span-full md:col-span-4 pt-8 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white">
117
- <h3 className="ui-meganav-overline" id="meganav-use-cases-panel-solutions">
118
- Solutions
119
- </h3>
120
- <ul aria-labelledby="meganav-use-cases-panel-solutions">
121
- <li>
122
- <a href={absUrl("/solutions/extend-kafka-to-the-edge")} className="ui-meganav-media group">
123
- <p className="ui-meganav-media-heading">Extend Kafka to the edge</p>
124
- <p className="ui-meganav-media-copy">Reliably expand Kafka’s event streaming beyond your private network.</p>
125
- </a>
126
- </li>
127
- <li>
128
- <a href={absUrl("/solutions/asset-tracking")} className="ui-meganav-media group">
129
- <p className="ui-meganav-media-heading">Asset Tracking</p>
130
- <p className="ui-meganav-media-copy">Track assets in realtime with a solution optimised for last mile logistics.</p>
131
- </a>
132
- </li>
133
- </ul>
134
- </div>
135
131
  </section>
136
132
  <div className="ui-meganav-content-spacer"></div>
137
133
  </div>
package/src/core/icons/icon-tech-apachekafka.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M32.3062 26.586C30.437 26.586 28.7612 27.4141 27.6137 28.7179L24.6732 26.6362C24.9853 25.7768 25.1645 24.854 25.1645 23.8881C25.1645 22.9389 24.9915 22.0316 24.6897 21.1849L27.6236 19.1252C28.7711 20.4225 30.4424 21.2461 32.3062 21.2461C35.7562 21.2461 38.5635 18.4393 38.5635 14.9888C38.5635 11.5382 35.7562 8.73143 32.3062 8.73143C28.8562 8.73143 26.0489 11.5382 26.0489 14.9888C26.0489 15.6064 26.1422 16.2019 26.3097 16.7659L23.3737 18.8266C22.1473 17.3051 20.3815 16.2428 18.3696 15.9185V12.3801C21.204 11.7848 23.3396 9.26646 23.3396 6.25732C23.3396 2.80681 20.5323 0 17.0823 0C13.6322 0 10.825 2.80681 10.825 6.25732C10.825 9.22616 12.9053 11.7134 15.683 12.3512V15.9356C11.8921 16.601 9 19.9094 9 23.8881C9 27.8862 11.9208 31.2067 15.739 31.8495V35.6343C12.9329 36.2511 10.825 38.7536 10.825 41.7427C10.825 45.1932 13.6322 48 17.0823 48C20.5323 48 23.3396 45.1932 23.3396 41.7427C23.3396 38.7536 21.2317 36.2511 18.4256 35.6343V31.8494C20.3979 31.5172 22.1313 30.4759 23.3451 28.9882L26.3053 31.0834C26.1409 31.6423 26.0489 32.232 26.0489 32.8433C26.0489 36.2938 28.8562 39.1007 32.3062 39.1007C35.7562 39.1007 38.5635 36.2938 38.5635 32.8433C38.5635 29.3928 35.7562 26.586 32.3062 26.586ZM32.3062 11.9549C33.9792 11.9549 35.3399 13.3162 35.3399 14.9888C35.3399 16.6613 33.9792 18.0225 32.3062 18.0225C30.6332 18.0225 29.2725 16.6613 29.2725 14.9888C29.2725 13.3162 30.6332 11.9549 32.3062 11.9549ZM14.0484 6.25732C14.0484 4.58479 15.4093 3.22359 17.0823 3.22359C18.7553 3.22359 20.116 4.58479 20.116 6.25732C20.116 7.92986 18.7553 9.29106 17.0823 9.29106C15.4093 9.29106 14.0484 7.92986 14.0484 6.25732ZM20.116 41.7427C20.116 43.4152 18.7553 44.7764 17.0823 44.7764C15.4093 44.7764 14.0484 43.4152 14.0484 41.7427C14.0484 40.0701 15.4093 38.7089 17.0823 38.7089C18.7553 38.7089 20.116 40.0701 20.116 41.7427ZM17.082 28.1192C14.7487 28.1192 12.8505 26.2213 12.8505 23.8881C12.8505 21.5548 14.7487 19.6566 17.082 19.6566C19.4152 19.6566 21.3134 21.5548 21.3134 23.8881C21.3134 26.2213 19.4152 28.1192 17.082 28.1192ZM32.3062 35.8772C30.6332 35.8772 29.2725 34.5159 29.2725 32.8433C29.2725 31.1708 30.6332 29.8096 32.3062 29.8096C33.9792 29.8096 35.3399 31.1708 35.3399 32.8433C35.3399 34.5159 33.9792 35.8772 32.3062 35.8772Z" fill="#03020D"/>
3
+ </svg>