Discharge7443/fleet
1
0
Fork 0
Code Issues Pull Requests Actions 8 Packages Projects Releases Wiki Activity

Website: Update "Try it yourself" links (#36095)

Browse Source 
Closes: https://github.com/fleetdm/fleet/issues/36007
Related to: https://github.com/fleetdm/fleet/issues/35263

Changes:
- Created a new component: `<signup-button>`. A button that opens the
signup modal for non-logged-in users, and takes logged-in users to the
/try page
- Replaced "Try it yourself" links on the /device-management,
/orchestration, /software-management, /testimonials, and the homepage
with the `<signup-button>` component.
- Updated the hover styles of the links on the support page.
This commit is contained in:
Eric
2025-11-20 16:58:07 -06:00
committed by GitHub
parent fa38994494
commit d6a75ebc8b
8 changed files with 72 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/assets/js/components/signup-button.component.js
Vendored
+57
View File
@@ -0,0 +1,57 @@
/**
* <signup-button>
* -----------------------------------------------------------------------------
* An animated arrow button that either opens the signup model or sends logged-in users to the Fleet Premium trial page.
*
* @type {Component}
*
* Example usage:
* <signup-button :is-logged-in="!! this.me"></signup-button>
*
* -----------------------------------------------------------------------------
*/
parasails.registerComponent('signupButton', {
// ╔═╗╦═╗╔═╗╔═╗╔═╗
// ╠═╝╠╦╝║ ║╠═╝╚═╗
// ╩ ╩╚═╚═╝╩ ╚═╝
props: [
'isLoggedIn',
],
// ╦╔╗╔╦╔╦╗╦╔═╗╦ ╔═╗╔╦╗╔═╗╔╦╗╔═╗
// ║║║║║ ║ ║╠═╣║ ╚═╗ ║ ╠═╣ ║ ║╣
// ╩╝╚╝╩ ╩ ╩╩ ╩╩═╝ ╚═╝ ╩ ╩ ╩ ╩ ╚═╝
data: function (){
return {};
},
// ╦ ╦╔╦╗╔╦╗╦
// ╠═╣ ║ ║║║║
// ╩ ╩ ╩ ╩ ╩╩═╝
template: `
<div>
<animated-arrow-button href="/try" v-if="isLoggedIn">Try it yourself</animated-arrow-button>
<animated-arrow-button data-toggle="modal" data-target="#signupmodal" v-else>Try it yourself</animated-arrow-button>
</div>
`,
// ╦ ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦ ╔═╗
// ║ ║╠╣ ║╣ ║ ╚╦╝║ ║ ║╣
// ╩═╝╩╚ ╚═╝╚═╝ ╩ ╚═╝╩═╝╚═╝
beforeMount: function() {
//…
},
mounted: async function(){
//…
},
beforeDestroy: function() {
//…
},
// ╦╔╗╔╔╦╗╔═╗╦═╗╔═╗╔═╗╔╦╗╦╔═╗╔╗╔╔═╗
// ║║║║ ║ ║╣ ╠╦╝╠═╣║ ║ ║║ ║║║║╚═╗
// ╩╝╚╝ ╩ ╚═╝╩╚═╩ ╩╚═╝ ╩ ╩╚═╝╝╚╝╚═╝
methods: {
//…
}
});
website/assets/styles/pages/support.less
Vendored
+6
View File
@@ -74,6 +74,9 @@
a {
text-decoration: none;
min-width: 0px;
&:hover {
color: @core-fleet-black-75;
}
}
[purpose='support-card'] {
width: 100%;
@@ -87,6 +90,9 @@
a {
text-decoration: none;
min-width: 0px;
&:hover {
color: @core-fleet-black-75;
}
}
flex-direction: column;
[purpose='support-row'] {
website/views/layouts/layout.ejs
Vendored
+1
View File
@@ -885,6 +885,7 @@
<script src="/js/components/parallax-city.component.js"></script>
<script src="/js/components/rituals.component.js"></script>
<script src="/js/components/scrollable-tweets.component.js"></script>
<script src="/js/components/signup-button.component.js"></script>
<script src="/js/components/signup-modal.component.js"></script>
<script src="/js/components/stripe-card-element.component.js"></script>
<script src="/js/utilities/open-stripe-checkout.js"></script>
website/views/pages/device-management.ejs
Vendored
+2 -2
View File
@@ -824,7 +824,7 @@
<div purpose="button-row" style="margin-top: 40px;" class="d-flex flex-sm-row flex-column justify-content-center align-items-center mx-auto">
<a purpose="cta-button" href="/contact">Get a demo</a>
<animated-arrow-button href="/register">Try it yourself</animated-arrow-button>
<signup-button :is-logged-in="!! this.me"></signup-button>
</div>
</div>
<%/* Shorten the feedback loop section */%>
@@ -914,7 +914,7 @@
<h2>Your last MDM migration</h2>
<div purpose="button-row" style="margin-top: 32px;" class="d-flex justify-content-center align-items-center mx-auto">
<a purpose="cta-button" href="/contact">Get a demo</a>
<animated-arrow-button href="/register">Try it yourself</animated-arrow-button>
<signup-button :is-logged-in="!! this.me"></signup-button>
</div>
</div>
</div>
website/views/pages/homepage.ejs
Vendored
+1 -1
View File
@@ -1452,7 +1452,7 @@
</h1>
<div purpose="button-row" style="margin-top: 40px;" class="d-flex flex-sm-row flex-column justify-content-center align-items-center mx-auto">
<a purpose="cta-button" href="/contact">Get a demo</a>
<animated-arrow-button href="/register">Try it yourself</animated-arrow-button>
<signup-button :signed-in="this.me"></signup-button>
</div>
</div>
</div>
website/views/pages/observability.ejs
Vendored
+2 -2
View File
@@ -28,7 +28,7 @@
<% }%>
<div purpose="button-row" class="d-flex flex-sm-row flex-column justify-content-start align-items-center">
<a purpose="cta-button" href="/contact">Get a demo</a>
<animated-arrow-button href="/register">Try it yourself</animated-arrow-button>
<signup-button :is-logged-in="!! this.me"></signup-button>
</div>
</div>
</div>
@@ -272,7 +272,7 @@
<h2><%= pagePersonalization==='eo-security'? 'Instrument your endpoints' : 'Talk to your computers'%></h2>
<div purpose="button-row" style="margin-top: 32px;" class="d-flex flex-sm-row flex-column justify-content-center align-items-center mx-auto">
<a purpose="cta-button" href="/contact">Get a demo</a>
<animated-arrow-button href="/register">Try it yourself</animated-arrow-button>
<signup-button :is-logged-in="!! this.me"></signup-button>
</div>
</div>
</div>
website/views/pages/software-management.ejs
Vendored
+2 -2
View File
@@ -7,7 +7,7 @@
<p purpose="hero-text">Pick from a curated software catalog or upload your own custom packages. Configure custom installation scripts if you need or let Fleet do it for you.</p>
<div purpose="button-row" class="d-flex justify-content-start">
<a class="btn btn-primary" purpose="contact-button" href="/contact">Get a demo</a>
<animated-arrow-button href="/register">Try it yourself</animated-arrow-button>
<signup-button :is-logged-in="!! this.me"></signup-button>
</div>
</div>
<div purpose="hero-slides">
@@ -220,7 +220,7 @@
<h2>Manage software consistently</h2>
<div purpose="button-row" class="d-flex justify-content-center align-items-center mx-auto">
<a class="btn btn-primary" purpose="contact-button" href="/contact">Get a demo</a>
<animated-arrow-button href="/register">Try it yourself</animated-arrow-button>
<signup-button :is-logged-in="!! this.me"></signup-button>
</div>
</div>
</div>
website/views/pages/testimonials.ejs
Vendored
+1 -1
View File
@@ -164,7 +164,7 @@
<h2 class="mx-auto" v-if="selectedContent === 'security'">Easily get security data</h2>
<div purpose="button-row" style="margin-top: 40px;" class="d-flex flex-sm-row flex-column justify-content-center align-items-center mx-auto">
<a purpose="cta-button" href="/contact">Get a demo</a>
<animated-arrow-button href="/register">Try it yourself</animated-arrow-button>
<signup-button :is-logged-in="!! this.me"></signup-button>
</div>
</div>
</div>