Website: redesign /support page with unified card grid and testimonial (#50132)
**Related issue:** Related to fleetdm/confidential#16762 (not a full close — see Notes) # Checklist for submitter ## Testing - [x] QA'd all new/changed functionality manually ## Summary Redesigns fleetdm.com/support: - Merges the previous "Ask the community" and "Support" sections into one unified "How can we help?" section with a single 6-card grid - Adds a new "Professional support" card linking to the SLA section of the go-to-market-operations handbook page - Adds a customer testimonial - Consolidates responsive breakpoints (single-column switch and card centering now both happen at 991px) - Removes target="_blank" from the two cards linking to fleetdm.com itself (Professional support, Ask us anything). ## Related - fleetdm/confidential#16762 ## Notes This is a first iteration toward the broader vision in https://github.com/fleetdm/confidential/issues/16762, discussed in design review but intentionally deferred. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Summary by CodeRabbit * **New Features** * Redesigned the Support page header into a single “How can we help?” entry point. * Added a Professional Support card linking to service-level agreement details. * Introduced a customer quote section with author information. * **Improvements** * Refreshed support card design (cleaner layout, consistent spacing, updated typography and link hover behavior). * **Responsive** * Improved the support card layout across breakpoints, including 3-column to 2-column to single-column grid behavior. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Claude Sonnet 5 <noreply@anthropic.com> Co-authored-by: Eric <eashaw@sailsjs.com>
This commit is contained in:
Mike Thomas
co-authored by
Claude Sonnet 5
Eric
Claude Sonnet 5
Eric
parent
a810f3b2c1
commit
fb06efcaac
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
+71
-133
@@ -36,8 +36,31 @@
|
||||
box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
[purpose='support-cards'] {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 24px;
|
||||
margin: 0 auto;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
min-width: 0px;
|
||||
&:hover {
|
||||
color: @core-fleet-black-75;
|
||||
}
|
||||
&:nth-child(-n+3) [purpose='support-card'] {
|
||||
min-height: 221px;
|
||||
}
|
||||
&:nth-child(n+4) [purpose='support-card'] {
|
||||
min-height: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[purpose='support-card'] {
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
img {
|
||||
height: auto;
|
||||
width: 48px;
|
||||
@@ -53,14 +76,10 @@
|
||||
line-height: 21px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
height: 318px;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #E2E4EA;
|
||||
border: 1px solid @core-fleet-black-10;
|
||||
border-radius: 16px;
|
||||
padding: 40px;
|
||||
margin-left: 12px;
|
||||
margin-right: 12px;
|
||||
margin-bottom: 30px;
|
||||
padding: 24px;
|
||||
box-shadow: none;
|
||||
|
||||
&:hover {
|
||||
@@ -68,42 +87,45 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
[purpose='community-cards'] {
|
||||
margin-bottom: 30px;
|
||||
a {
|
||||
text-decoration: none;
|
||||
min-width: 0px;
|
||||
&:hover {
|
||||
color: @core-fleet-black-75;
|
||||
}
|
||||
}
|
||||
[purpose='support-card'] {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
img {
|
||||
margin-right: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
[purpose='support-cards'] {
|
||||
a {
|
||||
text-decoration: none;
|
||||
min-width: 0px;
|
||||
&:hover {
|
||||
color: @core-fleet-black-75;
|
||||
}
|
||||
}
|
||||
[purpose='support-quote'] {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
[purpose='support-row'] {
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
}
|
||||
a {
|
||||
width: 33%;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
max-width: 668px;
|
||||
margin: 0 auto;
|
||||
margin-top: 80px;
|
||||
gap: 24px;
|
||||
|
||||
img {
|
||||
width: 86px;
|
||||
height: 72px;
|
||||
}
|
||||
|
||||
[purpose='quote-text'] {
|
||||
font-size: 18px;
|
||||
line-height: 1.5;
|
||||
font-style: italic;
|
||||
color: @core-fleet-black-75;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
[purpose='quote-author-info'] {
|
||||
[purpose='quote-author-name'] {
|
||||
color: @core-fleet-black;
|
||||
font-weight: @bold;
|
||||
font-size: 14px;
|
||||
line-height: 150%;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
[purpose='quote-author-title'] {
|
||||
color: @core-fleet-black-75;
|
||||
font-size: 14px;
|
||||
line-height: 150%;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1201px) {
|
||||
@@ -113,99 +135,39 @@
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
|
||||
[purpose='support-cards'] {
|
||||
flex-direction: row;
|
||||
max-width: 1120px;
|
||||
[purpose='support-row'] {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
[purpose='support-row'] {
|
||||
[purpose='support-card'] {
|
||||
width: 341px;
|
||||
height: 221px;
|
||||
}
|
||||
}
|
||||
|
||||
[purpose='community-cards'] {
|
||||
margin-bottom: 50px;
|
||||
[purpose='support-card'] {
|
||||
width: 384px;
|
||||
height: 178px;
|
||||
}
|
||||
}
|
||||
[purpose='page-title'] {
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
[purpose='page-container'] {
|
||||
padding-top: 60px;
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
|
||||
[purpose='community-cards'] {
|
||||
a {
|
||||
width: 50%;
|
||||
}
|
||||
[purpose='support-card'] {
|
||||
height: 178px;
|
||||
}
|
||||
}
|
||||
[purpose='support-cards'] {
|
||||
[purpose='support-card'] {
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (max-width: 991px) {
|
||||
[purpose='support-cards'] {
|
||||
[purpose='support-card'] {
|
||||
height: 221px;
|
||||
}
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
[purpose='support-card'] {
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
[purpose='support-quote'] {
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
|
||||
@media (max-width: 767px) {
|
||||
[purpose='support-cards'] {
|
||||
flex-direction: column;
|
||||
[purpose='support-row'] {
|
||||
flex-direction: column;
|
||||
}
|
||||
a {
|
||||
width: 100%;
|
||||
}
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
[purpose='community-cards'] {
|
||||
a {
|
||||
width: 100%;
|
||||
}
|
||||
[purpose='support-card'] {
|
||||
height: 230px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@media (max-width: 576px) {
|
||||
|
||||
[purpose='support-cards'] {
|
||||
[purpose='support-card'] {
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
[purpose='community-cards'] {
|
||||
[purpose='support-card'] {
|
||||
padding: 32px 40px 40px 40px;
|
||||
height: fit-content;
|
||||
}
|
||||
}
|
||||
[purpose='page-title'] {
|
||||
margin-bottom: 40px;
|
||||
max-width: 380px;
|
||||
@@ -218,33 +180,9 @@
|
||||
}
|
||||
}
|
||||
@media (max-width: 375px) {
|
||||
|
||||
h1 {
|
||||
line-height: 43px;
|
||||
}
|
||||
|
||||
[purpose='support-card'] {
|
||||
margin-bottom: 30px;
|
||||
margin-right: 0px;
|
||||
margin-left: 0px;
|
||||
|
||||
}
|
||||
[purpose='community-cards'] {
|
||||
[purpose='support-card'] {
|
||||
padding-top: 32px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
}
|
||||
}
|
||||
[purpose='support-cards'] {
|
||||
[purpose='support-card'] {
|
||||
margin-bottom: 16px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
Vendored
+53
-54
@@ -2,62 +2,61 @@
|
||||
<div purpose="page-container" class="container">
|
||||
|
||||
<div purpose="page-title" class="mx-auto">
|
||||
<h1>Ask the community</h1>
|
||||
<p>Fleet has an active open-source community of kind and helpful people. If you have a question about something that isn't in the documentation, we hang out in:</p>
|
||||
<%primaryBuyingSituation%>
|
||||
</div>
|
||||
<div purpose="community-cards" class="d-flex justify-content-center flex-sm-row flex-column">
|
||||
<a href="https://macadmins.org" target="_blank" class="<%= !primaryBuyingSituation || ['it-misc', 'it-major-mdm', 'it-gap-filler-mdm'].includes(primaryBuyingSituation) ? 'd-flex' : 'd-none' %>" no-icon>
|
||||
<div purpose="support-card" class="card d-flex justify-content-center" >
|
||||
<div class="d-flex flex-row align-items-center">
|
||||
<img alt="Macadmins logo" src="/images/logo-macadmins-48x48@2x.png">
|
||||
<h3>macadmins // #fleet</h3>
|
||||
</div>
|
||||
<p>Chat about next-gen MDM, packaging, Apple, Windows, desktop Linux, apps, scripting. (And all things IT.)</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="https://chat.osquery.io/c/fleet" target="_blank" class="<%= ['it-misc', 'it-major-mdm', 'it-gap-filler-mdm'].includes(primaryBuyingSituation) ? 'd-none' : 'd-flex'%>" no-icon>
|
||||
<div purpose="support-card" class="card d-flex justify-content-center">
|
||||
<div class="d-flex flex-row align-items-center">
|
||||
<img alt="Osquery logo" src="/images/logo-osquery-48x48@2x.png">
|
||||
<h3>osquery // #fleet</h3>
|
||||
</div>
|
||||
<p><%= primaryBuyingSituation === 'security-misc' ? 'Chat about securing servers, laptops, and more.' :
|
||||
primaryBuyingSituation === 'security-vm' ? 'Chat about the future of security engineering, vulnerability management, OT/ICS, cybersecurity, and more.' :
|
||||
'Chat about posture, detection, vulns, reporting. (And all things cybersecurity.)'
|
||||
%>
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div purpose="page-title" class="mx-auto">
|
||||
<h1>Support</h1>
|
||||
<p>Ask a question, chat with engineers, or get in touch with the Fleet team. For answers to commonly asked questions, check the <a href="/docs/get-started/faq">FAQ</a>.</p>
|
||||
<h1>How can we help?</h1>
|
||||
<p>Ask a question, chat with the community, or get in touch with the Fleet team. For answers to commonly asked questions, check the <a href="/docs/get-started/faq">FAQ</a>.</p>
|
||||
</div>
|
||||
|
||||
<div purpose="support-cards" class="d-flex mx-auto justify-content-center">
|
||||
<div purpose="support-row" class="d-flex">
|
||||
<a href="https://github.com/fleetdm/fleet/issues/new?assignees=&labels=bug%2C%3Areproduce&projects=&template=bug-report.md&title=" target="_blank" no-icon>
|
||||
<div purpose="support-card" class="card d-flex justify-content-center">
|
||||
<img alt="Bug report" src="/images/icon-bug-64x64@2x.png">
|
||||
<h3>Bug report</h3>
|
||||
<p>Report a bug to help us improve.</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="https://github.com/fleetdm/fleet/issues/new?assignees=&labels=~customer+request&projects=&template=feature-request.md&title=" target="_blank" no-icon>
|
||||
<div purpose="support-card" class="card d-flex justify-content-center">
|
||||
<img alt="Suggestions" src="/images/icon-suggestion-64x64@2x.png" class="mx-auto mx-sm-0">
|
||||
<h3>Suggest a feature</h3>
|
||||
<p>Propose a new feature or enhancement in Fleet.</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="/contact?sendMessage">
|
||||
<div purpose="support-card" class="card d-flex justify-content-center" >
|
||||
<img alt="Ask us anything" src="/images/icon-ask-anything-64x64@2x.png">
|
||||
<h3>Ask us anything</h3>
|
||||
<p>Can’t find what you’re looking for? Get in touch.</p>
|
||||
</div>
|
||||
</a>
|
||||
<div purpose="support-cards">
|
||||
<a href="https://fleetdm.com/handbook/company/go-to-market-operations#customer-support-service-level-objectives-slos" no-icon>
|
||||
<div purpose="support-card" class="card">
|
||||
<img alt="Fleet professional support" src="/images/logo-fleet-professional-support-48x48@2x.png">
|
||||
<h3>Professional support</h3>
|
||||
<p>Direct access to engineers via email, phone, or a dedicated Slack channel. <u>See SLAs</u>.</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="https://macadmins.org" target="_blank" no-icon>
|
||||
<div purpose="support-card" class="card">
|
||||
<img alt="Macadmins logo" src="/images/logo-macadmins-48x48@2x.png">
|
||||
<h3>macadmins // #fleet</h3>
|
||||
<p>Chat about next-gen MDM, Apple, Windows, Linux, scripting, and all things IT.</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="https://chat.osquery.io/c/fleet" target="_blank" no-icon>
|
||||
<div purpose="support-card" class="card">
|
||||
<img alt="Osquery logo" src="/images/logo-osquery-48x48@2x.png">
|
||||
<h3>osquery // #fleet</h3>
|
||||
<p>Chat about posture, detection, vulns, reporting, and all things cybersecurity.</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="https://github.com/fleetdm/fleet/issues/new?assignees=&labels=bug%2C%3Areproduce&projects=&template=bug-report.md&title=" target="_blank" no-icon>
|
||||
<div purpose="support-card" class="card">
|
||||
<img alt="Bug report" src="/images/icon-bug-64x64@2x.png">
|
||||
<h3>Bug report</h3>
|
||||
<p>Report a bug to help us improve.</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="https://github.com/fleetdm/fleet/issues/new?assignees=&labels=~customer+request&projects=&template=feature-request.md&title=" target="_blank" no-icon>
|
||||
<div purpose="support-card" class="card">
|
||||
<img alt="Suggestions" src="/images/icon-suggestion-64x64@2x.png" class="mx-auto mx-sm-0">
|
||||
<h3>Suggest a feature</h3>
|
||||
<p>Propose a new feature or enhancement.</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="/contact?sendMessage">
|
||||
<div purpose="support-card" class="card">
|
||||
<img alt="Ask us anything" src="/images/icon-ask-anything-64x64@2x.png">
|
||||
<h3>Ask us anything</h3>
|
||||
<p>Need help? Get in touch.</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div purpose="support-quote">
|
||||
<img alt="Adam Anklewicz" src="/images/support-quote-adam-anklewicz-86x72@2x.png">
|
||||
<p purpose="quote-text">“Their support is huge. I just post in our joint Slack channel and within minutes I will get a reply and we can have a proper conversation.”</p>
|
||||
<div purpose="quote-author-info">
|
||||
<p purpose="quote-author-name">Adam Anklewicz</p>
|
||||
<p purpose="quote-author-title">Manager of IT Endpoint Engineering at Thumbtack</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user