diff --git a/website/assets/images/docs-premium-cta-computer-125x134@2x.png b/website/assets/images/docs-premium-cta-computer-125x134@2x.png new file mode 100644 index 0000000000..145c7ccaf6 Binary files /dev/null and b/website/assets/images/docs-premium-cta-computer-125x134@2x.png differ diff --git a/website/assets/images/docs-premium-cta-telephone-125x134@2x.png b/website/assets/images/docs-premium-cta-telephone-125x134@2x.png new file mode 100644 index 0000000000..289b55d83a Binary files /dev/null and b/website/assets/images/docs-premium-cta-telephone-125x134@2x.png differ diff --git a/website/assets/js/pages/docs/basic-documentation.page.js b/website/assets/js/pages/docs/basic-documentation.page.js index e8a86cec6b..8adc1d5bd6 100644 --- a/website/assets/js/pages/docs/basic-documentation.page.js +++ b/website/assets/js/pages/docs/basic-documentation.page.js @@ -10,7 +10,7 @@ parasails.registerPage('basic-documentation', { inputTimers: {}, searchString: '', showDocsNav: false, - + currentDocsSection: '', breadcrumbs: [], pages: [], pagesBySectionSlug: {}, @@ -81,6 +81,12 @@ parasails.registerPage('basic-documentation', { }, mounted: async function() { + + // Set a currentDocsSection value to display different Fleet premium CTAs based on what section is being viewed. + if(!this.isDocsLandingPage){ + this.currentDocsSection = this.thisPage.url.split(/\//).slice(-2)[0]; + } + // Algolia DocSearch if(this.algoliaPublicKey) { // Note: Docsearch will only be enabled if sails.config.custom.algoliaPublicKey is set. If the value is undefined, the documentation search will be disabled. docsearch({ diff --git a/website/assets/styles/pages/docs/basic-documentation.less b/website/assets/styles/pages/docs/basic-documentation.less index 525416d6e5..6d30620f1f 100644 --- a/website/assets/styles/pages/docs/basic-documentation.less +++ b/website/assets/styles/pages/docs/basic-documentation.less @@ -405,6 +405,58 @@ } [purpose='right-sidebar-buttons'] { margin-top: 30px; + [purpose='premium-cta'] { + margin-top: 16px; + text-align: center; + padding: 16px; + color: #FFF; + border-radius: 6px; + p { + font-size: 15px; + line-height: 17px; + span { + font-weight: 800; + } + } + [purpose='docs-cta-image'] { + margin-bottom: 16px; + img { + width: 124px; + } + } + + [purpose='premium-cta-btn'] { + text-align: center; + font-weight: 700; + padding: 4px 16px; + display: flex; + justify-content: center; + width: 100%; + position: relative; + background: #192147; + box-shadow: 1px 1px 2px rgba(25, 33, 71, 0.24); + border-radius: 4px; + color: #fff; + overflow: hidden; + } + [purpose='premium-cta-btn']::before { + background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%); + opacity: 1; + content: ' '; + position: absolute; + top: 0; + left: -5px; + width: 55%; + height: 100%; + transform: skew(-10deg); + transition: left 0.5s ease-in, opacity 0.50s ease-in, width 0.5s ease-in; + } + [purpose='premium-cta-btn']:hover:before { + opacity: 0; + left: 160px; + width: 110%; + } + } [purpose='demo-cta'] { display: flex; border: 1px solid #E3E3E3; diff --git a/website/views/pages/docs/basic-documentation.ejs b/website/views/pages/docs/basic-documentation.ejs index 372a71dca1..936b58c134 100644 --- a/website/views/pages/docs/basic-documentation.ejs +++ b/website/views/pages/docs/basic-documentation.ejs @@ -177,6 +177,22 @@ +
+
+
+ A computer next to a coffee cup +
+

Even more control with Fleet Premium

+ Learn more +
+
+
+ A telephone in a glass display case +
+

Expertise on-demand with Fleet Premium

+ Learn more +
+