@ably/ui 14.7.0-dev.19c0991 → 14.7.1-dev.4cc0c0c
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.
- package/core/Icon/computed-icons.js +1 -0
- package/core/Icon/types.js +1 -1
- package/core/MeganavContentDevelopers.js +1 -1
- package/core/MeganavContentProducts.js +1 -1
- package/core/MeganavContentUseCases.js +1 -1
- package/core/Pricing/PricingCards.js +1 -1
- package/core/Pricing/data.js +1 -1
- package/core/icons/icon-display-private-link.svg +20 -0
- package/core/sprites.svg +1 -1
- package/core/styles/colors/types.js +1 -1
- package/core/styles/colors/utils.js +1 -1
- package/index.d.ts +29 -15
- package/package.json +5 -3
- /package/core/icons/{icon-live-updates-results-metrics-col.svg → icon-display-live-updates-results-metrics-col.svg} +0 -0
- /package/core/icons/{icon-multi-user-spaces-col.svg → icon-display-multi-user-spaces-col.svg} +0 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export const computedIcons={"display":["icon-display-48hrs","icon-display-ably-channels","icon-display-about-ably-col","icon-display-api-keys","icon-display-api","icon-display-architectural-guidance","icon-display-asset-tracking-col","icon-display-authentication","icon-display-avatar-stack","icon-display-browser","icon-display-calendar","icon-display-call-mobile","icon-display-careers-col","icon-display-case-studies-col","icon-display-chat-col","icon-display-chat-stack-col","icon-display-chat-stack","icon-display-cloud-servers","icon-display-compare-tech-col","icon-display-connection-state-&-recovery","icon-display-consumer-groups","icon-display-custom-cname","icon-display-custom","icon-display-customers-col","icon-display-data-broadcast-col","icon-display-data-synchronization-col","icon-display-dedicated-cluster","icon-display-deltas","icon-display-docs-col","icon-display-documentation","icon-display-dynamic-channel-groups","icon-display-edge-network","icon-display-elasticity","icon-display-events-col","icon-display-exactly-once-delivery","icon-display-examples-col","icon-display-fan-out","icon-display-firehose","icon-display-gdpr","icon-display-general-comms","icon-display-granular-permissions","icon-display-hipaa-mono","icon-display-hipaa","icon-display-history","icon-display-integrations-col","icon-display-integrations","icon-display-it-support-access","icon-display-it-support-helpdesk","icon-display-kafka-at-the-edge-col","icon-display-laptop","icon-display-lightbulb-col","icon-display-live-chat","icon-display-live-updates-results-metrics-col","icon-display-map-pin","icon-display-message-batching","icon-display-message-persistence","icon-display-message-queues","icon-display-message","icon-display-multi-user-spaces-col","icon-display-observe-analytics","icon-display-padlock-closed","icon-display-platform","icon-display-play","icon-display-premium-support","icon-display-privacy-shield-framework","icon-display-private-link","icon-display-push-notifications-col","icon-display-push-notifications","icon-display-quickstart-guides-col","icon-display-resources-col","icon-display-rewind","icon-display-sdks-col","icon-display-send-received-messages","icon-display-servers","icon-display-shopping-cart","icon-display-sla","icon-display-soc2-type2-mono","icon-display-soc2-type2","icon-display-subscription-filters","icon-display-system-metadata","icon-display-tech-account-comms","icon-display-tutorials-demos-col","icon-display-virtual-events-col","icon-display-virtual-events"],"gui":["icon-gui-ably-badge","icon-gui-arrow-bidirectional-horizontal","icon-gui-arrow-bidirectional-vertical","icon-gui-arrow-down","icon-gui-arrow-left","icon-gui-arrow-right","icon-gui-arrow-up","icon-gui-burger-menu","icon-gui-check-circled-fill-black","icon-gui-check-circled-fill","icon-gui-check-circled","icon-gui-checklist-checked","icon-gui-clock","icon-gui-close","icon-gui-copy","icon-gui-cross-circled-fill","icon-gui-cross-circled","icon-gui-dash-circled","icon-gui-disclosure-arrow","icon-gui-document-generic","icon-gui-enlarge","icon-gui-external-link","icon-gui-filter-flow-step-1","icon-gui-filter-flow-step-2","icon-gui-filter-flow-step-3","icon-gui-history","icon-gui-info","icon-gui-link-arrow","icon-gui-link","icon-gui-live-chat","icon-gui-minus","icon-gui-partial","icon-gui-plus","icon-gui-quote-marks-solid","icon-gui-refresh","icon-gui-resources","icon-gui-search","icon-gui-tick","icon-gui-warning"],"other":["icon-other-quote"],"product":["icon-product-asset-tracking","icon-product-chat","icon-product-liveobjects","icon-product-livesync","icon-product-pubsub","icon-product-spaces"],"social":["icon-social-discord","icon-social-facebook","icon-social-github","icon-social-glassdoor","icon-social-google","icon-social-linkedin","icon-social-stackoverflow","icon-social-twitter","icon-social-x","icon-social-youtube"],"tech":["icon-tech-amqp10","icon-tech-apache-kafka","icon-tech-apachepulsar","icon-tech-awskinesis","icon-tech-awslambda","icon-tech-awssqs","icon-tech-azureservicebus","icon-tech-cloudflareworkers","icon-tech-csharp","icon-tech-flutter","icon-tech-gcloudfunctions","icon-tech-go","icon-tech-ifttt","icon-tech-java","icon-tech-javascript","icon-tech-net","icon-tech-objectivec","icon-tech-php","icon-tech-python","icon-tech-react","icon-tech-ruby","icon-tech-swift","icon-tech-terraform","icon-tech-zapier"]};
|
package/core/Icon/types.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
import{computedIcons}from"./computed-icons";export const iconNames={gui:computedIcons.gui,display:computedIcons.display,social:computedIcons.social,other:computedIcons.other,tech:computedIcons.tech,product:computedIcons.product};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import React from"react";import Icon from"./Icon";import Status from"./Status";const MeganavContentDevelopers=({absUrl,statusUrl})=>/*#__PURE__*/React.createElement("div",{className:"flex max-w-screen-xl mx-auto"},/*#__PURE__*/React.createElement("div",{className:"ui-meganav-content-spacer"}),/*#__PURE__*/React.createElement("section",{className:"grid grid-cols-12 ui-grid-gap-x w-full"},/*#__PURE__*/React.createElement("div",{className:"col-span-full md:col-span-4 pt-24 md:py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24"},/*#__PURE__*/React.createElement("h3",{className:"ui-meganav-overline uppercase",id:"meganav-developers-panel-explore"},"Explore"),/*#__PURE__*/React.createElement("ul",{"aria-labelledby":"meganav-developers-panel-explore"},/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/docs"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-docs-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Documentation"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Technical guides to help you build with Ably.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/docs/quick-start-guide"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-quickstart-guides-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Quickstart guides"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Documentation to help you get started quickly.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/integrations"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-integrations-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Integrations"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Find out more about Ably integrations."," ")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/examples"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-examples-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Live examples"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Discover our features and their use cases.")))))),/*#__PURE__*/React.createElement("div",{className:"col-span-full md:col-span-4 pb-8 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0"},/*#__PURE__*/React.createElement("ul",{className:"md:mt-40","aria-labelledby":"meganav-developers-panel-explore"},/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/docs/sdks"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-sdks-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"SDKs"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Download an SDK to help you build realtime apps faster.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/tutorials"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-tutorials-demos-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Tutorials & Demos"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Get stuck in with our hands-on resources.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/reference-guide-chat"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-chat-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Chat apps reference guide"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Learn how to build chat apps with Ably.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/reference-guide-multiplayer"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-multi-user-spaces-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Multiplayer reference guide"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Learn how to build collaborative features with Ably.")))))),/*#__PURE__*/React.createElement("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"},/*#__PURE__*/React.createElement("h3",{className:"ui-meganav-overline uppercase",id:"meganav-developers-panel-quick-links"},"Quick links"),/*#__PURE__*/React.createElement("ul",{"aria-labelledby":"meganav-developers-panel-quick-links"},/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:"https://discord.gg/jwBPhEZ9g5",className:"group ui-meganav-media py-12"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Discord"))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:"https://github.com/ably",className:"group ui-meganav-media py-12"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"GitHub"))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:"https://changelog.ably.com/",className:"group ui-meganav-media py-12"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Changelog"))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:"https://status.ably.com/",className:"group ui-meganav-media py-12"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Status",/*#__PURE__*/React.createElement(Status,{statusUrl:statusUrl,additionalCSS:"ml-4 align-middle"})))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/support"),className:"group ui-meganav-media py-12"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Support & FAQs")))))),/*#__PURE__*/React.createElement("div",{className:"ui-meganav-content-spacer"}));export default MeganavContentDevelopers;
|
|
1
|
+
import React from"react";import Icon from"./Icon";import Status from"./Status";const MeganavContentDevelopers=({absUrl,statusUrl})=>/*#__PURE__*/React.createElement("div",{className:"flex max-w-screen-xl mx-auto"},/*#__PURE__*/React.createElement("div",{className:"ui-meganav-content-spacer"}),/*#__PURE__*/React.createElement("section",{className:"grid grid-cols-12 ui-grid-gap-x w-full"},/*#__PURE__*/React.createElement("div",{className:"col-span-full md:col-span-4 pt-24 md:py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24"},/*#__PURE__*/React.createElement("h3",{className:"ui-meganav-overline uppercase",id:"meganav-developers-panel-explore"},"Explore"),/*#__PURE__*/React.createElement("ul",{"aria-labelledby":"meganav-developers-panel-explore"},/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/docs"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-docs-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Documentation"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Technical guides to help you build with Ably.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/docs/quick-start-guide"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-quickstart-guides-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Quickstart guides"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Documentation to help you get started quickly.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/integrations"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-integrations-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Integrations"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Find out more about Ably integrations."," ")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/examples"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-examples-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Live examples"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Discover our features and their use cases.")))))),/*#__PURE__*/React.createElement("div",{className:"col-span-full md:col-span-4 pb-8 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0"},/*#__PURE__*/React.createElement("ul",{className:"md:mt-40","aria-labelledby":"meganav-developers-panel-explore"},/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/docs/sdks"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-sdks-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"SDKs"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Download an SDK to help you build realtime apps faster.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/tutorials"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-tutorials-demos-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Tutorials & Demos"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Get stuck in with our hands-on resources.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/reference-guide-chat"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-chat-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Chat apps reference guide"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Learn how to build chat apps with Ably.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/reference-guide-multiplayer"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-multi-user-spaces-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Multiplayer reference guide"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Learn how to build collaborative features with Ably.")))))),/*#__PURE__*/React.createElement("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"},/*#__PURE__*/React.createElement("h3",{className:"ui-meganav-overline uppercase",id:"meganav-developers-panel-quick-links"},"Quick links"),/*#__PURE__*/React.createElement("ul",{"aria-labelledby":"meganav-developers-panel-quick-links"},/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:"https://discord.gg/jwBPhEZ9g5",className:"group ui-meganav-media py-12"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Discord"))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:"https://github.com/ably",className:"group ui-meganav-media py-12"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"GitHub"))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:"https://changelog.ably.com/",className:"group ui-meganav-media py-12"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Changelog"))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:"https://status.ably.com/",className:"group ui-meganav-media py-12"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Status",/*#__PURE__*/React.createElement(Status,{statusUrl:statusUrl,additionalCSS:"ml-4 align-middle"})))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/support"),className:"group ui-meganav-media py-12"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Support & FAQs")))))),/*#__PURE__*/React.createElement("div",{className:"ui-meganav-content-spacer"}));export default MeganavContentDevelopers;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import React from"react";import FeaturedLink from"./FeaturedLink";const MeganavContentProducts=({paths,absUrl})=>/*#__PURE__*/React.createElement("div",{className:"flex max-w-screen-xl mx-auto"},/*#__PURE__*/React.createElement("div",{className:"ui-meganav-content-spacer bg-extra-light-grey"}),/*#__PURE__*/React.createElement("section",{className:"grid grid-cols-12 ui-grid-gap-x w-full"},/*#__PURE__*/React.createElement("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"},/*#__PURE__*/React.createElement("div",{className:"flex mb-20"},paths&&/*#__PURE__*/React.createElement("img",{src:paths?.ablyStack,alt:"Ably homepage"}),/*#__PURE__*/React.createElement("h3",{className:"ui-meganav-overline ml-24"},"The Ably Platform")),/*#__PURE__*/React.createElement("p",{className:"ui-text-p2 font-bold mb-24",style:{maxWidth:"330px"}},"Easily power any realtime experience in your application. No complex infrastructure to manage or provision. Just a simple API that handles everything realtime, and lets you focus on your code."),/*#__PURE__*/React.createElement(FeaturedLink,{url:absUrl("/platform"),textSize:"text-p2"},"Explore how it works")),/*#__PURE__*/React.createElement("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"},/*#__PURE__*/React.createElement("h3",{className:"ui-meganav-overline",id:"meganav-products-panel-list-examples"},"Products"),/*#__PURE__*/React.createElement("ul",{className:"mb-16","aria-labelledby":"meganav-products-panel-list-examples"},/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/pubsub"),className:"group ui-meganav-media"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Pub/Sub
|
|
1
|
+
import React from"react";import FeaturedLink from"./FeaturedLink";const MeganavContentProducts=({paths,absUrl})=>/*#__PURE__*/React.createElement("div",{className:"flex max-w-screen-xl mx-auto"},/*#__PURE__*/React.createElement("div",{className:"ui-meganav-content-spacer bg-extra-light-grey"}),/*#__PURE__*/React.createElement("section",{className:"grid grid-cols-12 ui-grid-gap-x w-full"},/*#__PURE__*/React.createElement("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"},/*#__PURE__*/React.createElement("div",{className:"flex mb-20"},paths&&/*#__PURE__*/React.createElement("img",{src:paths?.ablyStack,alt:"Ably homepage"}),/*#__PURE__*/React.createElement("h3",{className:"ui-meganav-overline ml-24"},"The Ably Platform")),/*#__PURE__*/React.createElement("p",{className:"ui-text-p2 font-bold mb-24",style:{maxWidth:"330px"}},"Easily power any realtime experience in your application. No complex infrastructure to manage or provision. Just a simple API that handles everything realtime, and lets you focus on your code."),/*#__PURE__*/React.createElement(FeaturedLink,{url:absUrl("/platform"),textSize:"text-p2"},"Explore how it works")),/*#__PURE__*/React.createElement("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"},/*#__PURE__*/React.createElement("h3",{className:"ui-meganav-overline",id:"meganav-products-panel-list-examples"},"Products"),/*#__PURE__*/React.createElement("ul",{className:"mb-16","aria-labelledby":"meganav-products-panel-list-examples"},/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/pubsub"),className:"group ui-meganav-media"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Pub/Sub"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Build infinitely scalable realtime applications."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/spaces"),className:"group ui-meganav-media"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Spaces (Beta)"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Create multi-user collaborative environments."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/livesync"),className:"group ui-meganav-media"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"LiveSync (Alpha)"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Seamlessly sync database changes with frontend clients at scale."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/chat"),className:"group ui-meganav-media"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Chat (Beta)"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Deliver highly reliable chat experiences at scale."))))),/*#__PURE__*/React.createElement("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"},/*#__PURE__*/React.createElement("h3",{className:"ui-meganav-overline",id:"meganav-products-panel-list-our-technology"},"Technology"),/*#__PURE__*/React.createElement("ul",{className:"mb-16","aria-labelledby":"meganav-products-panel-list-our-technology"},/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/four-pillars-of-dependability#performance"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Predictable performance"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"A low-latency and high-throughput global network."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/four-pillars-of-dependability#integrity"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Guaranteed ordering & delivery"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Data is delivered - in order - even after disconnections."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/four-pillars-of-dependability#reliability"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Fault tolerant infrastructure"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Redundancy is built in at global and regional levels."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/four-pillars-of-dependability#availability"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"High scalability & availability"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Built for scale with legitimate 99.999% uptime SLAs."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/network"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Global edge network"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"An edge network of 15 core routing datacenters and 205+ PoPs.")))),/*#__PURE__*/React.createElement(FeaturedLink,{url:absUrl("/four-pillars-of-dependability"),textSize:"text-p3"},"Explore Four Pillars of Dependability"))),/*#__PURE__*/React.createElement("div",{className:"ui-meganav-content-spacer"}));export default MeganavContentProducts;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import React from"react";import Icon from"./Icon";const MeganavContentUseCases=({absUrl})=>/*#__PURE__*/React.createElement("div",{className:"flex max-w-screen-xl mx-auto"},/*#__PURE__*/React.createElement("div",{className:"ui-meganav-content-spacer bg-extra-light-grey"}),/*#__PURE__*/React.createElement("section",{className:"grid grid-cols-12 ui-grid-gap-x w-full"},/*#__PURE__*/React.createElement("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"},/*#__PURE__*/React.createElement("h3",{className:"ui-meganav-overline",id:"meganav-use-cases-panel-use-cases"},"Solutions"),/*#__PURE__*/React.createElement("ul",{"aria-labelledby":"meganav-use-cases-panel-industry-use-cases"},/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/chat"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-chat-stack-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Live Chat"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Deliver highly reliable chat experiences at scale.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/multiplayer-collaboration"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-multi-user-spaces-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Multiplayer Collaboration"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Bring collaborative multiplayer experiences to your users.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/data-broadcast"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-data-broadcast-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Data Broadcast"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Broadcast realtime event data to millions of devices around the globe.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/data-synchronization"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-data-synchronization-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Data Synchronization"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Keep your frontend and backend in realtime sync, at global scale.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/push-notifications"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-push-notifications-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Notifications"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Deliver cross-platform push notifications with a simple unified API.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/asset-tracking"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-asset-tracking-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Asset Tracking (Beta)"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Track assets in realtime with a solution optimised for last mile logistics.")))))),/*#__PURE__*/React.createElement("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"},/*#__PURE__*/React.createElement("h3",{className:"ui-meganav-overline",id:"meganav-use-cases-panel-industry"},"Industry"),/*#__PURE__*/React.createElement("ul",{"aria-labelledby":"meganav-use-cases-panel-industry"},/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/
|
|
1
|
+
import React from"react";import Icon from"./Icon";const MeganavContentUseCases=({absUrl})=>/*#__PURE__*/React.createElement("div",{className:"flex max-w-screen-xl mx-auto"},/*#__PURE__*/React.createElement("div",{className:"ui-meganav-content-spacer bg-extra-light-grey"}),/*#__PURE__*/React.createElement("section",{className:"grid grid-cols-12 ui-grid-gap-x w-full"},/*#__PURE__*/React.createElement("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"},/*#__PURE__*/React.createElement("h3",{className:"ui-meganav-overline",id:"meganav-use-cases-panel-use-cases"},"Solutions"),/*#__PURE__*/React.createElement("ul",{"aria-labelledby":"meganav-use-cases-panel-industry-use-cases"},/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/chat"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-chat-stack-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Live Chat"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Deliver highly reliable chat experiences at scale.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/multiplayer-collaboration"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-multi-user-spaces-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Multiplayer Collaboration"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Bring collaborative multiplayer experiences to your users.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/data-broadcast"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-data-broadcast-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Data Broadcast"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Broadcast realtime event data to millions of devices around the globe.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/data-synchronization"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-data-synchronization-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Data Synchronization"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Keep your frontend and backend in realtime sync, at global scale.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/push-notifications"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-push-notifications-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Notifications"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Deliver cross-platform push notifications with a simple unified API.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/asset-tracking"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-asset-tracking-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Asset Tracking (Beta)"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Track assets in realtime with a solution optimised for last mile logistics.")))))),/*#__PURE__*/React.createElement("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"},/*#__PURE__*/React.createElement("h3",{className:"ui-meganav-overline",id:"meganav-use-cases-panel-industry"},"Industry"),/*#__PURE__*/React.createElement("ul",{"aria-labelledby":"meganav-use-cases-panel-industry"},/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/sports-and-media"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Sports, Media & Fan Engagement"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Deliver engaging global realtime experiences."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/b2b-platforms"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"B2B Platforms"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Empower your customers with realtime solutions."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/fintech"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"FinTech"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Deliver personalised financial data in realtime."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/edtech"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"EdTech"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Deliver interactive learning experiences."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/healthcare"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Healthcare (HIPAA)"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Provide trustworthy, HIPAA-compliant realtime apps."))))),/*#__PURE__*/React.createElement("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"},/*#__PURE__*/React.createElement("ul",{"aria-labelledby":"meganav-use-cases-panel-solutions",className:"mt-0 md:mt-40"},/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/gaming"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Gaming"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Power ultra fast and reliable gaming experiences."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/automotive-logistics-and-mobility"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Automotive, Logistics, & Mobility"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Power diagnostics, order tracking and more."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/ecommerce-and-retail"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"eCommerce & Retail"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Enrich customer experiences with realtime updates."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/iot-and-connected-devices"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"IoT & Connected Devices"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Monitor and control global IoT deployments in realtime.")))))),/*#__PURE__*/React.createElement("div",{className:"ui-meganav-content-spacer"}));export default MeganavContentUseCases;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import React,{Fragment,useEffect,useRef,useState}from"react";import throttle from"lodash.throttle";import Icon from"../Icon";import FeaturedLink from"../FeaturedLink";import Tooltip from"../Tooltip";import useTheming from"../hooks/useTheming";const PricingCards=({data,theme="dark",delimiter})=>{const descriptionsRef=useRef([]);const[descriptionHeight,setDescriptionHeight]=useState(0);const determineMaxDescriptionHeight=throttle(()=>{if(descriptionsRef.current.length){setDescriptionHeight(Math.max(...descriptionsRef.current.map(description=>description?.getBoundingClientRect().height??0)))}},100);useEffect(()=>{determineMaxDescriptionHeight();window.addEventListener("resize",determineMaxDescriptionHeight);return()=>{window.removeEventListener("resize",determineMaxDescriptionHeight);determineMaxDescriptionHeight.cancel()}},[]);const{themeColor}=useTheming({baseTheme:"dark",theme});const delimiterColumn=index=>delimiter&&index%2===1?/*#__PURE__*/React.createElement("div",{className:`flex items-center justify-center w-full @[920px]:w-20 ${delimiter!=="blank"?"m-8":""}`},delimiter!=="blank"?/*#__PURE__*/React.createElement(Icon,{name:delimiter,size:"20",additionalCSS:themeColor("text-neutral-500")}):null):null;const gridRules={nonDelimited:"grid @[552px]:grid-cols-2 @[1104px]:grid-cols-4",delimited:"flex flex-col items-center @[920px]:flex-row"};const borderClasses=color=>{const classes={neutral:{border:"border-neutral-700",bg:"bg-neutral-700"},blue:{border:"border-blue-600",bg:"bg-blue-600"},orange:{border:"border-orange-600",bg:"bg-orange-600"}};if(color&&classes[color]){return classes[color]}};return /*#__PURE__*/React.createElement("div",{className:"@container flex justify-center"},/*#__PURE__*/React.createElement("div",{className:`${delimiter?gridRules.delimited:gridRules.nonDelimited} gap-8`},data.map(({title,description,price,cta,sections,border},index)=>/*#__PURE__*/React.createElement(Fragment,{key:title.content},delimiterColumn(index),/*#__PURE__*/React.createElement("div",{className:`relative border ${themeColor(borderClasses(border?.color)?.border??"border-neutral-1100")} ${border?.style??""} flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group ${delimiter?"@[520px]:flex-row @[920px]:flex-col":""} min-w-[272px] backdrop-blur
|
|
1
|
+
import React,{Fragment,useEffect,useRef,useState}from"react";import throttle from"lodash.throttle";import Icon from"../Icon";import FeaturedLink from"../FeaturedLink";import Tooltip from"../Tooltip";import useTheming from"../hooks/useTheming";const PricingCards=({data,theme="dark",delimiter})=>{const descriptionsRef=useRef([]);const[descriptionHeight,setDescriptionHeight]=useState(0);const determineMaxDescriptionHeight=throttle(()=>{if(descriptionsRef.current.length){setDescriptionHeight(Math.max(...descriptionsRef.current.map(description=>description?.getBoundingClientRect().height??0)))}},100);useEffect(()=>{determineMaxDescriptionHeight();window.addEventListener("resize",determineMaxDescriptionHeight);return()=>{window.removeEventListener("resize",determineMaxDescriptionHeight);determineMaxDescriptionHeight.cancel()}},[]);const{themeColor}=useTheming({baseTheme:"dark",theme});const delimiterColumn=index=>delimiter&&index%2===1?/*#__PURE__*/React.createElement("div",{className:`flex items-center justify-center w-full @[920px]:w-20 ${delimiter!=="blank"?"m-8":""}`},delimiter!=="blank"?/*#__PURE__*/React.createElement(Icon,{name:delimiter,size:"20",additionalCSS:themeColor("text-neutral-500")}):null):null;const gridRules={nonDelimited:"grid @[552px]:grid-cols-2 @[1104px]:grid-cols-4",delimited:"flex flex-col items-center @[920px]:flex-row"};const borderClasses=color=>{const classes={neutral:{border:"border-neutral-700",bg:"bg-neutral-700"},blue:{border:"border-blue-600",bg:"bg-blue-600"},orange:{border:"border-orange-600",bg:"bg-orange-600"}};if(color&&classes[color]){return classes[color]}};return /*#__PURE__*/React.createElement("div",{className:"@container flex justify-center","data-testid":delimiter?"delimited-pricing-card-group":"pricing-card-group"},/*#__PURE__*/React.createElement("div",{className:`${delimiter?gridRules.delimited:gridRules.nonDelimited} gap-8`},data.map(({title,description,price,cta,sections,border},index)=>/*#__PURE__*/React.createElement(Fragment,{key:title.content},delimiterColumn(index),/*#__PURE__*/React.createElement("div",{className:`relative border ${themeColor(borderClasses(border?.color)?.border??"border-neutral-1100")} ${border?.style??""} flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group ${delimiter?"@[520px]:flex-row @[920px]:flex-col":""} min-w-[272px] backdrop-blur`,"data-testid":delimiter?"delimited-pricing-card":"pricing-card"},border?/*#__PURE__*/React.createElement("div",{className:`flex items-center absolute z-10 -top-12 self-center font-semibold uppercase font-sans text-white ${borderClasses(border?.color)?.border} ${borderClasses(border?.color)?.bg} h-24 text-[11px] px-[10px] py-2 rounded-2xl select-none tracking-widen-0.1`},border.text):null,/*#__PURE__*/React.createElement("div",{className:`absolute z-0 top-0 left-0 w-full h-full rounded-2xl ${themeColor("bg-neutral-1300")} ${!delimiter?`${themeColor("group-hover:bg-neutral-1200")} group-hover:opacity-100`:""} transition-[colors,opacity] opacity-25`}),/*#__PURE__*/React.createElement("div",{className:`relative z-10 flex flex-col gap-24 ${delimiter?"@[520px]:flex-1 @[920px]:flex-none":""}`},/*#__PURE__*/React.createElement("div",null,/*#__PURE__*/React.createElement("div",{className:"flex items-center mb-12"},/*#__PURE__*/React.createElement("p",{className:`${title.className??""} ${themeColor(title.color??"text-neutral-000")}`},title.content),title.tooltip?/*#__PURE__*/React.createElement(Tooltip,{theme:theme,interactive:typeof title.tooltip!=="string"},title.tooltip):null),/*#__PURE__*/React.createElement("p",{className:`ui-text-p1 ${description.className??""} ${themeColor(description.color??"text-neutral-000")} min-h-20`,style:{height:descriptionHeight}},/*#__PURE__*/React.createElement("span",{ref:el=>descriptionsRef.current[index]=el},description.content))),/*#__PURE__*/React.createElement("div",{className:`flex items-end gap-8 ${delimiter?"@[520px]:flex-col @[520px]:items-start @[920px]:flex-row @[920px]:items-end":""}`},/*#__PURE__*/React.createElement("p",{className:`ui-text-title font-medium tracking-tight leading-none ${themeColor("text-neutral-000")}`},price.amount),/*#__PURE__*/React.createElement("div",{className:`ui-text-p3 ${themeColor("text-neutral-000")}`},price.content)),cta?/*#__PURE__*/React.createElement("div",{className:"group"},/*#__PURE__*/React.createElement(FeaturedLink,{additionalCSS:`text-center ui-btn ${themeColor("bg-neutral-000")} ${themeColor("text-neutral-1300")} hover:text-neutral-000 px-24 !py-12 ${cta.className??""} cursor-pointer`,url:cta.url,onClick:cta.onClick,disabled:cta.disabled},cta.text)):delimiter?null:/*#__PURE__*/React.createElement("div",{className:"flex items-center justify-center h-48 w-full"},/*#__PURE__*/React.createElement("hr",{className:`${themeColor("border-neutral-800")} w-64`}))),/*#__PURE__*/React.createElement("div",{className:"flex-1 flex flex-col gap-24 relative z-10"},sections.map(({title,items,listItemColors,cta})=>/*#__PURE__*/React.createElement("div",{key:title,className:"flex flex-col gap-12"},/*#__PURE__*/React.createElement("p",{className:`${themeColor("text-neutral-500")} font-mono uppercase text-overline2 tracking-[0.16em]`},title),/*#__PURE__*/React.createElement("div",{className:delimiter?"":"flex flex-col gap-4"},items.map((item,index)=>Array.isArray(item)?/*#__PURE__*/React.createElement("div",{key:item[0],className:`flex justify-between gap-16 px-8 -mx-8 ${index===0?"py-8":"py-4"} ${index>0&&index%2===0?`${themeColor("bg-blue-900")} rounded-md`:""}`},item.map((subItem,subIndex)=>/*#__PURE__*/React.createElement("span",{key:subItem,className:`ui-text-p3 ${index===0?"font-bold":"font-medium"} ${themeColor("text-neutral-300")} ${subIndex%2===1?"text-right":""}`},subItem))):/*#__PURE__*/React.createElement("div",{key:item,className:"flex gap-8 items-start"},listItemColors?/*#__PURE__*/React.createElement(Icon,{name:"icon-gui-check-circled-fill",color:themeColor(listItemColors.background),secondaryColor:themeColor(listItemColors.foreground),size:"16",additionalCSS:"mt-2"}):null,/*#__PURE__*/React.createElement("div",{className:`flex-1 ${listItemColors?"ui-text-p3":"ui-text-p2"} font-medium ${themeColor("text-neutral-300")}`},item)))),cta?/*#__PURE__*/React.createElement("div",{className:"relative -mx-24 flex items-center h-40 overflow-x-hidden"},/*#__PURE__*/React.createElement(FeaturedLink,{url:cta.url,additionalCSS:`absolute sm:-translate-x-120 sm:opacity-0 sm:group-hover:translate-x-24 duration-300 delay-0 sm:group-hover:delay-100 sm:group-hover:opacity-100 transition-[transform,opacity] font-medium ui-text-p3 ${themeColor("text-neutral-500")} hover:${themeColor("text-neutral-000")} cursor-pointer`,onClick:cta.onClick,iconColor:themeColor(listItemColors?.foreground??"text-white")},cta.text),/*#__PURE__*/React.createElement("div",{className:`absolute sm:translate-x-24 sm:opacity-100 sm:group-hover:translate-x-120 sm:group-hover:opacity-0 duration-200 delay-100 sm:group-hover:delay-0 transition-[transform,opacity] leading-6 tracking-widen-0.15 font-light text-p3 ${themeColor("text-neutral-800")}`},"•••")):null)))),delimiterColumn(index)))))};export default PricingCards;
|
package/core/Pricing/data.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import React from"react";export const planData=[{title:{content:"Free",className:"font-mono text-p3 uppercase font-extrabold tracking-[0.16em]",color:"text-neutral-700"},description:{content:"Build a proof of concept.",className:"ui-text-p1",color:"text-neutral-500"},price:{amount:"$0"},cta:{text:"Start for free",url:"/sign-up"},sections:[{title:"Limits",items:["200 concurrent channels","200 concurrent connections","500 messages/second","6M messages/month"]},{title:"Includes",items:["Community & email support (best effort)","No commitment"],listItemColors:{foreground:"text-neutral-600",background:"text-neutral-1000"},cta:{text:"See all features",url:"#pricing-table"}}]},{title:{content:"Standard",className:"font-mono text-p3 uppercase font-extrabold tracking-[0.16em]",color:"text-neutral-000"},description:{content:"Roll-out into production.",className:"ui-text-p1",color:"text-neutral-500"},price:{amount:"$29",content:/*#__PURE__*/React.createElement(React.Fragment,null,/*#__PURE__*/React.createElement("p",{className:"ui-text-p3 font-medium",style:{color:"currentColor"}},"/month"),/*#__PURE__*/React.createElement("p",{className:"ui-text-p2 font-bold text-gui-blue-default-dark -mt-6"},"+ consumption"))},cta:{text:"Get started",url:"/users/paid_sign_up?package=standard"},sections:[{title:"Limits",items:["10k concurrent channels","10k concurrent connections","2.5k messages/second"]},{title:"Includes",items:["1 day email support SLA","Uptime SLO"],listItemColors:{foreground:"text-blue-400",background:"text-blue-800"},cta:{text:"See all features",url:"#pricing-table"}}]},{title:{content:"Pro",className:"font-mono text-p3 uppercase font-extrabold tracking-[0.16em]",color:"text-neutral-000"},description:{content:"Scale
|
|
1
|
+
import React from"react";export const planData=[{title:{content:"Free",className:"font-mono text-p3 uppercase font-extrabold tracking-[0.16em]",color:"text-neutral-700"},description:{content:"Build a proof of concept.",className:"ui-text-p1",color:"text-neutral-500"},price:{amount:"$0"},cta:{text:"Start for free",url:"/sign-up"},sections:[{title:"Limits",items:["200 concurrent channels","200 concurrent connections","500 messages / second","6M messages / month"]},{title:"Includes",items:["Community & email support (best effort)","No commitment"],listItemColors:{foreground:"text-neutral-600",background:"text-neutral-1000"},cta:{text:"See all features",url:"#pricing-table"}}]},{title:{content:"Standard",className:"font-mono text-p3 uppercase font-extrabold tracking-[0.16em]",color:"text-neutral-000"},description:{content:"Roll-out into production.",className:"ui-text-p1",color:"text-neutral-500"},price:{amount:"$29",content:/*#__PURE__*/React.createElement(React.Fragment,null,/*#__PURE__*/React.createElement("p",{className:"ui-text-p3 font-medium",style:{color:"currentColor"}},"/ month"),/*#__PURE__*/React.createElement("p",{className:"ui-text-p2 font-bold text-gui-blue-default-dark -mt-6"},"+ consumption"))},cta:{text:"Get started",url:"/users/paid_sign_up?package=standard"},sections:[{title:"Limits",items:["10k concurrent channels","10k concurrent connections","2.5k messages / second"]},{title:"Includes",items:["1 day email support SLA","Uptime SLO"],listItemColors:{foreground:"text-blue-400",background:"text-blue-800"},cta:{text:"See all features",url:"#pricing-table"}}]},{title:{content:"Pro",className:"font-mono text-p3 uppercase font-extrabold tracking-[0.16em]",color:"text-neutral-000"},description:{content:"Scale with confidence.",className:"ui-text-p1",color:"text-neutral-500"},price:{amount:"$399",content:/*#__PURE__*/React.createElement(React.Fragment,null,/*#__PURE__*/React.createElement("p",{className:"ui-text-p3 font-medium",style:{color:"currentColor"}},"/ month"),/*#__PURE__*/React.createElement("p",{className:"ui-text-p2 font-bold text-gui-blue-default-dark -mt-6"},"+ consumption"))},cta:{text:"Get started",url:"/users/paid_sign_up?package=pro"},sections:[{title:"Limits",items:["50k concurrent channels","50k concurrent connections","10k messages / second"]},{title:"Includes",items:["2 hour support SLA","Datadog (lite)","Uptime SLO"],listItemColors:{foreground:"text-blue-400",background:"text-blue-800"},cta:{text:"See all features",url:"#pricing-table"}}]},{title:{content:"Enterprise",className:"font-mono text-p3 uppercase font-extrabold tracking-[0.16em]",color:"text-orange-600"},description:{content:"Deliver without limits.",className:"ui-text-p1",color:"text-neutral-500"},price:{amount:"Custom"},cta:{text:"Contact us",url:"/contact",className:"ui-btn-alt text-white"},sections:[{title:"Unlimited",items:["Concurrent channels","Concurrent connections","Messages / second"]},{title:"Includes",items:["24/7 mission critical support","99.999% uptime SLAs","Committed use discounts","Datadog","CNAME, SSO, & more"],listItemColors:{foreground:"text-orange-600",background:"text-orange-1000"},cta:{text:"See all features",url:"#pricing-table"}}]}];export const consumptionData=[{title:{content:"Messages",className:"ui-text-h3",color:"text-neutral-000"},description:{content:"Messages contain the data that a client is communicating, such as the contents of a chat message.",className:"ui-text-p3",color:"text-neutral-600"},price:{amount:"$2.50",content:"/ million"},sections:[{title:"Volume discounts",items:[["Consumption","$ / million msgs"],["First 50 million msgs","$2.50"],["Next 450 million msgs","$2.25"],["Next 4.5 billion msgs","$1.95"],["Next 15 billion msgs","$1.65"],["Next 30 billion msgs","$1.40"],["Over 50 billion msgs","$1.25"]]}]},{title:{content:"Channels",className:"ui-text-h3",color:"text-neutral-000",tooltip:/*#__PURE__*/React.createElement("p",null,"We charge you for the amount of time a channel is active in our network by the minute. For example, if ten channels are in use for 45 minutes, you will be charged a total of 450 channel minutes.")},description:{content:"Channels are used to route messages from publishers to subscribers. Channels are billed by the minute when actively being used by a connected client.",className:"ui-text-p3",color:"text-neutral-600"},price:{amount:"$1.00",content:"/ million mins"},sections:[{title:"Volume discounts",items:[["Consumption","$ / million mins"],["First 10 million mins","$1.00"],["Next 90 million mins","$0.95"],["Next 900 million mins","$0.85"],["Next 4 billion mins","$0.75"],["Next 10 billion mins","$0.65"],["Over 15 billion mins","$0.60"]]}]},{title:{content:"Connections",className:"ui-text-h3",color:"text-neutral-000",tooltip:/*#__PURE__*/React.createElement("p",null,"We charge you for the amount of time devices are connected to our network by the minute. For example, if ten devices are each connected for 45 minutes, you will be charged a total of 450 connection minutes.")},description:{content:"Clients establish and maintain a connection to the Ably service, typically over WebSockets.",className:"ui-text-p3",color:"text-neutral-600"},price:{amount:"$1.00",content:"/ million mins"},sections:[{title:"Volume discounts",items:[["Consumption","$ / million mins"],["First 10 million mins","$1.00"],["Next 90 million mins","$0.95"],["Next 900 million mins","$0.85"],["Next 4 billion mins","$0.75"],["Next 10 billion mins","$0.65"],["Over 15 billion mins","$0.60"]]}]}];
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
<svg width="49" height="48" viewBox="0 0 49 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<g clip-path="url(#clip0_2889_2903)">
|
|
3
|
+
<circle cx="35.5" cy="13" r="13" fill="#FF5416"/>
|
|
4
|
+
<rect x="1.25" y="22.75" width="24.5" height="24.5" rx="6.25" stroke="#C6CED9" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
|
5
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.77885 39.9989L13.335 28H11.5662L5.5 39.1021L6.77885 39.9989ZM19.9826 39.9989L13.4264 28H15.1952L18.2283 33.5511L21.2614 39.1021L19.9826 39.9989ZM13.3806 34.9718L19.8912 40.0704L18.5625 41.0004L13.3806 36.944L8.19881 41.0004L6.87014 40.0704L13.3806 34.9718Z" fill="#C6CED9"/>
|
|
6
|
+
<rect x="29.5" y="10" width="12" height="9" rx="0.996429" stroke="#03020D" stroke-width="1.5" stroke-linejoin="round"/>
|
|
7
|
+
<path d="M38.5 10V8.18182V8C38.5 6.34315 37.1569 5 35.5 5V5C33.8431 5 32.5 6.34315 32.5 8V8.18182V10" stroke="#03020D" stroke-width="1.5" stroke-linejoin="round"/>
|
|
8
|
+
<path d="M40.5 36V36C40.5 38.2091 38.7091 40 36.5 40V40" stroke="#C6CED9" stroke-width="1.5" stroke-miterlimit="2.61313" stroke-linecap="round"/>
|
|
9
|
+
<path d="M40.5 32V28.5" stroke="#C6CED9" stroke-width="1.5" stroke-linecap="round"/>
|
|
10
|
+
<path d="M32.5 40L29 40" stroke="#C6CED9" stroke-width="1.5" stroke-linecap="round"/>
|
|
11
|
+
<path d="M8.5 12V12C8.5 9.79086 10.2909 8 12.5 8V8" stroke="#C6CED9" stroke-width="1.5" stroke-miterlimit="2.61313" stroke-linecap="round"/>
|
|
12
|
+
<path d="M8.5 16L8.5 19.5" stroke="#C6CED9" stroke-width="1.5" stroke-linecap="round"/>
|
|
13
|
+
<path d="M16.5 8L20 8" stroke="#C6CED9" stroke-width="1.5" stroke-linecap="round"/>
|
|
14
|
+
</g>
|
|
15
|
+
<defs>
|
|
16
|
+
<clipPath id="clip0_2889_2903">
|
|
17
|
+
<rect width="48" height="48" fill="white" transform="translate(0.5)"/>
|
|
18
|
+
</clipPath>
|
|
19
|
+
</defs>
|
|
20
|
+
</svg>
|