mirror of
https://github.com/fleetdm/fleet
synced 2026-05-22 00:18:27 +00:00
0f60611dd8
Closes https://github.com/fleetdm/confidential/issues/12017 Closes https://github.com/fleetdm/fleet/issues/32440 Closes https://github.com/fleetdm/fleet/issues/32441 Changes: - Updated CTAs across the website ("Talk to an engineer" » "Get a demo") - Removed the clickable link on the "More" dropdown menu - Removed the funding announcement banner
243 lines
17 KiB
Text
Vendored
243 lines
17 KiB
Text
Vendored
<div id="contact" v-cloak>
|
||
<div purpose="page-container" class="container-fluid">
|
||
<div class="d-flex flex-lg-row flex-column justify-content-center">
|
||
<div purpose="form-container" v-if="!cloudSuccess">
|
||
<h2>Get in touch</h2>
|
||
<p v-if="userHasPremiumSubscription" style="margin-bottom: 40px;">Dedicated professional support from the Fleet team.</p>
|
||
<p v-else-if="psychologicalStage === '4 - Has use case'">Let us help you deploy and evaluate Fleet quickly for yourself. We’d love to save you some time.</p>
|
||
<p v-else-if="psychologicalStage === '5 - Personally confident'">Schedule a personalized demo for your team and get support or training.</p>
|
||
<p v-else>Schedule a personalized demo, or ask us anything. We’d love to chat.</p>
|
||
<div purpose="contact-form-switch" class="d-flex flex-sm-row flex-column justify-content-center mx-auto" v-if="!userHasPremiumSubscription">
|
||
<div purpose="switch-option" :class="[formToDisplay === 'talk-to-us' ? 'selected' : '']" @click="clickSwitchForms('talk-to-us')">Get a demo</div>
|
||
<div purpose="switch-option" :class="[formToDisplay === 'contact' ? 'selected' : '']" @click="clickSwitchForms('contact')">Send a message</div>
|
||
<div purpose="switch" :class="formToDisplay+'-selected'"></div>
|
||
</div>
|
||
<div v-if="formToDisplay === 'contact'">
|
||
|
||
|
||
<div purpose="note" v-if="!userIsLoggedIn">
|
||
<div>
|
||
<img src="/images/icon-info-16x16@2x.png" alt="An icon indicating that this section has important information">
|
||
</div>
|
||
<p>Already a Fleet customer? <a href="/login#contact">Sign in</a> for Premium support</p>
|
||
</div>
|
||
|
||
<div purpose="note" v-if="userIsLoggedIn && !userHasPremiumSubscription">
|
||
<div>
|
||
<img src="/images/icon-info-16x16@2x.png" alt="An icon indicating that this section has important information">
|
||
</div>
|
||
<p>Already a Premium customer? Reach out to us directly or use the form below.</p>
|
||
</div>
|
||
|
||
|
||
<ajax-form action="deliverContactFormMessage" class="contact" :form-errors.sync="formErrors" :form-data="formData" :form-rules="contactFormRules" :syncing.sync="syncing" :cloud-error.sync="cloudError" @submitted="submittedContactForm()">
|
||
<div class="form-group">
|
||
<label for="contact-email-address">Work email *</label>
|
||
<input class="form-control" id="contact-email-address" name="email-address" type="email" :class="[formErrors.emailAddress ? 'is-invalid' : cloudError && cloudError === 'invalidEmailDomain' ? 'is-invalid' : '']" v-model.trim="formData.emailAddress" autocomplete="email" focus-first>
|
||
<div class="invalid-feedback" v-if="formErrors.emailAddress">Please enter a valid work email address</div>
|
||
<cloud-error class="p-0 mt-1 mb-0 bg-transparent invalid-feedback" v-if="cloudError && cloudError === 'invalidEmailDomain'">
|
||
<p>Please enter a valid work email address</p>
|
||
</cloud-error>
|
||
|
||
</div>
|
||
<div class="form-group">
|
||
<div class="row">
|
||
<div purpose="first-name-column" class="col-sm mb-4 mb-sm-0">
|
||
<label for="contact-first-name">First name *</label>
|
||
<input class="form-control" id="contact-first-name" name="first-name" type="text" :class="[formErrors.firstName ? 'is-invalid' : '']" v-model.trim="formData.firstName" autocomplete="given-name">
|
||
<div class="invalid-feedback" v-if="formErrors.firstName">Please let us know what to call you.</div>
|
||
</div>
|
||
<div purpose="last-name-column" class="col-sm">
|
||
<label for="contact-last-name">Last name *</label>
|
||
<input class="form-control" id="contact-last-name" name="last-name" type="text" :class="[formErrors.lastName ? 'is-invalid' : '']" v-model.trim="formData.lastName" autocomplete="family-name">
|
||
<div class="invalid-feedback" v-if="formErrors.lastName">Please let us know what to call you.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="message">Message *</label>
|
||
<textarea class="form-control" id="message" name="message" :class="[formErrors.message ? 'is-invalid' : '']" v-model.trim="formData.message" autocomplete="none"></textarea>
|
||
<div class="invalid-feedback" v-if="formErrors.message">Message cannot be empty.</div>
|
||
</div>
|
||
<cloud-error v-if="cloudError && cloudError !== 'invalidEmailDomain'"></cloud-error>
|
||
<div class="form-group btn-container">
|
||
<ajax-button purpose="submit-button" type="submit" :syncing="syncing" class="btn btn-primary">Send</ajax-button>
|
||
</div>
|
||
</ajax-form>
|
||
</div>
|
||
<div v-else>
|
||
<ajax-form action="deliverTalkToUsFormSubmission" class="contact" :form-errors.sync="formErrors" :form-data="formData" :form-rules="talkToUsFormRules" :syncing.sync="syncing" :cloud-error.sync="cloudError" @submitted="submittedTalkToUsForm()">
|
||
<div class="form-group">
|
||
<label for="email-address">Work email *</label>
|
||
<input class="form-control" id="email-address" name="email-address" type="email" :class="[formErrors.emailAddress ? 'is-invalid' : '']" v-model.trim="formData.emailAddress" autocomplete="email" focus-first>
|
||
<div class="invalid-feedback" v-if="formErrors.emailAddress">Please enter a valid work email address</div>
|
||
<cloud-error class="p-0 mt-1 mb-0 bg-transparent invalid-feedback" v-if="cloudError && cloudError === 'invalidEmailDomain'">
|
||
<p>Please enter a valid work email address</p>
|
||
</cloud-error>
|
||
</div>
|
||
<div class="form-group">
|
||
<div class="row">
|
||
<div purpose="first-name-column" class="col-sm mb-4 mb-sm-0">
|
||
<label for="first-name">First name *</label>
|
||
<input class="form-control" id="first-name" name="first-name" type="text" :class="[formErrors.firstName ? 'is-invalid' : '']" v-model.trim="formData.firstName" autocomplete="given-name">
|
||
<div class="invalid-feedback" v-if="formErrors.firstName">Please let us know what to call you.</div>
|
||
</div>
|
||
<div purpose="last-name-column" class="col-sm">
|
||
<label for="last-name">Last name *</label>
|
||
<input class="form-control" id="last-name" name="last-name" type="text" :class="[formErrors.lastName ? 'is-invalid' : '']" v-model.trim="formData.lastName" autocomplete="family-name">
|
||
<div class="invalid-feedback" v-if="formErrors.lastName">Please let us know what to call you.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="organization">Organization *</label>
|
||
<input class="form-control" id="organization" name="organization" type="text" :class="[formErrors.organization ? 'is-invalid' : '']" v-model.trim="formData.organization" autocomplete="email">
|
||
<div class="invalid-feedback" v-if="formErrors.organization">Please enter the name of your organization.</div>
|
||
</div>
|
||
<div class="form-group" :class="[formErrors.primaryBuyingSituation ? 'is-invalid' : '']" >
|
||
<label class="mb-3"><strong>What will you be using Fleet for? *</strong></label>
|
||
<label purpose="form-option" class="form-control" :class="[formData.primaryBuyingSituation === 'it-major-mdm' ? 'selected' : '']">
|
||
<input type="radio" :class="[formErrors.primaryBuyingSituation ? 'is-invalid' : '']" v-model.trim="formData.primaryBuyingSituation" value="it-major-mdm">
|
||
<span purpose="custom-radio"><span purpose="custom-radio-selected"></span></span>
|
||
Device management (MDM)
|
||
</label>
|
||
<label purpose="form-option" class="form-control" :class="[formData.primaryBuyingSituation === 'it-gap-filler-mdm' ? 'selected' : '']">
|
||
<input type="radio" :class="[formErrors.primaryBuyingSituation ? 'is-invalid' : '']" v-model.trim="formData.primaryBuyingSituation" value="it-gap-filler-mdm">
|
||
<span purpose="custom-radio"><span purpose="custom-radio-selected"></span></span>
|
||
Linux management
|
||
</label>
|
||
<label purpose="form-option" class="form-control" :class="[formData.primaryBuyingSituation === 'it-misc' ? 'selected' : '']">
|
||
<input type="radio" :class="[formErrors.primaryBuyingSituation ? 'is-invalid' : '']" v-model.trim="formData.primaryBuyingSituation" value="it-misc">
|
||
<span purpose="custom-radio"><span purpose="custom-radio-selected"></span></span>
|
||
IT engineering
|
||
</label>
|
||
<label purpose="form-option" class="form-control" :class="[formData.primaryBuyingSituation === 'security-misc' ? 'selected' : '']">
|
||
<input type="radio" v-model.trim="formData.primaryBuyingSituation" value="security-misc">
|
||
<span purpose="custom-radio"><span purpose="custom-radio-selected"></span></span>
|
||
Security engineering
|
||
</label>
|
||
<label purpose="form-option" class="form-control" :class="[formData.primaryBuyingSituation === 'security-vm' ? 'selected' : '']">
|
||
<input type="radio" v-model.trim="formData.primaryBuyingSituation" value="security-vm">
|
||
<span purpose="custom-radio"><span purpose="custom-radio-selected"></span></span>
|
||
Vulnerability reporting
|
||
</label>
|
||
<div class="invalid-feedback" v-if="formErrors.primaryBuyingSituation">Please select an option</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="number-of-hosts">How many employees are in your organization? *</label>
|
||
<input class="form-control" id="number-of-hosts" name="number-of-hosts" type="number" :class="[formErrors.numberOfHosts ? 'is-invalid' : '']" min="1" v-model.trim="formData.numberOfHosts">
|
||
<!-- <p purpose="devices-note" class="mt-3 mb-0" v-if="!primaryBuyingSituation || ['eo-it', 'mdm', 'vm'].includes(primaryBuyingSituation)">Includes computers, servers, phones, and more.</p>
|
||
<p purpose="devices-note" class="mt-3 mb-0" v-if="primaryBuyingSituation === 'eo-security'">Includes servers, supercomputers, and everything else.</p> -->
|
||
<!-- <p purpose="devices-note" class="mt-3 mb-0" v-if="primaryBuyingSituation === 'eo-it'">Includes Apple, Windows, Linux workstations, Chromebooks, servers, and other hosts. </p> -->
|
||
<!-- <p purpose="devices-note" class="mt-3 mb-0" v-if="primaryBuyingSituation === 'mdm'">Includes Apple, Windows, and desktop Linux. Android coming soon.</p> -->
|
||
<!-- <p purpose="devices-note" class="mt-3 mb-0" v-if="primaryBuyingSituation === 'vm'">Includes computers, servers, OT/ICS, containers, and other hosts.</p> -->
|
||
<div class="invalid-feedback" v-if="formErrors.numberOfHosts">Please enter a number of employees</div>
|
||
</div>
|
||
<cloud-error v-if="cloudError && cloudError === 'invalidEmailDomain'">
|
||
<p>Please enter a valid work email address</p>
|
||
</cloud-error>
|
||
<cloud-error v-if="cloudError && cloudError !== 'invalidEmailDomain'"></cloud-error>
|
||
<div class="form-group btn-container">
|
||
<ajax-button type="submit" purpose="submit-button" :syncing="syncing" class="btn btn-primary">Schedule a call</ajax-button>
|
||
</div>
|
||
</ajax-form>
|
||
</div>
|
||
</div>
|
||
<div purpose="success-message" v-else>
|
||
<h2>Thank you!</h2>
|
||
<p class="mt-3">A member of our team will get back to you soon.<br>Usually within one business day (or less!)</p>
|
||
</div>
|
||
<div purpose="quote-and-logos">
|
||
<div purpose="quote" v-if="primaryBuyingSituation === 'security-vm'">
|
||
<div purpose="logo" class="mb-4"><img height="32" alt="Rivian logo" src="/images/logo-rivian-dark-120x32@2x.png"></div>
|
||
<p purpose="quote-text">
|
||
The visibility down into the assets covered by the agent is phenomenal. Fleet has become the central source for a lot of things.
|
||
</p>
|
||
<div purpose="quote-author-info" class="d-flex flex-row align-items-center">
|
||
<div purpose="profile-picture">
|
||
<img alt="Andre Shields" src="/images/testimonial-author-andre-shields-48x48@2x.png">
|
||
</div>
|
||
<div class="d-flex flex-column align-self-top">
|
||
<p purpose="name" class="font-weight-bold m-0">Andre Shields</p>
|
||
<p purpose="job-title" class="m-0">Staff Cybersecurity Engineer, Vulnerability Management</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div purpose="quote" v-else-if="primaryBuyingSituation === 'it-misc'">
|
||
<div purpose="logo" class="mb-4"><img height="32" alt="Deputy logo" src="/images/social-proof-logo-stripe-67x32@2x.png"></div>
|
||
<p purpose="quote-text">
|
||
Mad props to how easy making a deploy pkg of the agent was. I wish everyone made stuff that easy.
|
||
</p>
|
||
<div purpose="quote-author-info" class="d-flex flex-row align-items-center">
|
||
<div purpose="profile-picture">
|
||
<img alt="Wes Whetstone" src="/images/testimonial-author-wes-whetstone-48x48@2x.png">
|
||
</div>
|
||
<div class="d-flex flex-column align-self-top">
|
||
<p purpose="name" class="font-weight-bold m-0">Wes Whetstone</p>
|
||
<p purpose="job-title" class="m-0">Staff CPE</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div purpose="quote" v-else-if="primaryBuyingSituation === 'security-misc'">
|
||
<div purpose="logo" class="mb-4"><img height="32" alt="Deloitte logo" src="/images/social-proof-logo-deloitte-130x32@2x.png"></div>
|
||
<p purpose="quote-text">
|
||
Something I really appreciate about working with you guys is that it doesn't feel like I'm talking to a vendor. It actually feels like I'm talking to my team, and I really appreciate it.
|
||
</p>
|
||
<div purpose="quote-author-info" class="d-flex flex-row align-items-center">
|
||
<div purpose="profile-picture">
|
||
<img alt="Chandra Majumdar" src="/images/testimonial-author-chandra-majumdar-48x48@2x.png">
|
||
</div>
|
||
<div class="d-flex flex-column align-self-top">
|
||
<p purpose="name" class="font-weight-bold m-0">Chandra Majumdar</p>
|
||
<p purpose="job-title" class="m-0">Partner - Cyber and Strategic Risk</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div purpose="quote" v-else>
|
||
<div purpose="logo" class="mb-4"><img height="32" alt="Stripe logo" src="/images/social-proof-logo-stripe-67x32@2x.png"></div>
|
||
<p purpose="quote-text">
|
||
We've been using Fleet for a few years at Stripe and we couldn't be happier. The fact that it's also open-source made it easy for us to try it out, customise it to our needs, and seamlessly integrate it into our existing environment.
|
||
</p>
|
||
<div purpose="quote-author-info" class="d-flex flex-row align-items-center">
|
||
<div purpose="profile-picture">
|
||
<img alt="Scott MacVicar" style="border-radius: 50%" src="/images/testimonial-author-scott-macvicar-100x100@2x.png">
|
||
</div>
|
||
<div class="d-flex flex-column align-self-top">
|
||
<p purpose="name" class="font-weight-bold m-0">Scott MacVicar</p>
|
||
<p purpose="job-title" class="m-0">Head of Developer Infrastructure & Corporate Technology</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div purpose="logos" class="flex-column flex-wrap align-items-center w-100">
|
||
<div purpose="logo-row" class="d-flex flex-row justify-content-between">
|
||
<img alt="Notion logo" src="/images/logo-notion-68x32@2x.png">
|
||
<img alt="Atlassian logo" src="/images/logo-atlassian-140x32@2x.png">
|
||
<img alt="Mr Beast logo" src="/images/logo-mr-beast-muted-90x32@2x.png">
|
||
</div>
|
||
<div purpose="logo-row" class="d-flex flex-row flex-wrap justify-content-between">
|
||
<img alt="Rivian logo" src="/images/logo-rivian-120x32@2x.png">
|
||
<img alt="Flywire logo" src="/images/logo-flywire-69x32@2x.png">
|
||
<img alt="Snowflake logo" src="/images/logo-snowflake-101x32@2x.png">
|
||
</div>
|
||
<div purpose="logo-row" class="d-flex flex-row justify-content-between">
|
||
<img alt="Uber logo" src="/images/logo-uber-65x32@2x.png">
|
||
<img alt="Gusto logo" src="/images/logo-gusto-64x32@2x.png">
|
||
<img alt="Reddit logo" src="/images/logo-reddit-80x32@2x.png">
|
||
</div>
|
||
<div purpose="logo-row" class="d-flex flex-row justify-content-between">
|
||
<img alt="Deloitte logo" src="/images/logo-deloitte-97x32@2x.png">
|
||
<img alt="Fastly logo" src="/images/logo-fastly-60x32@2x.png">
|
||
<img alt="Hashicorp logo" src="/images/logo-hashicorp-103x32@2x.png">
|
||
</div>
|
||
<div purpose="logo-row" class="d-flex flex-row justify-content-between mb-0">
|
||
<img alt="Dropbox logo" src="/images/logo-dropbox-122x32@2x.png">
|
||
<img alt="Vibe logo" src="/images/logo-vibe-72x32@2x.png">
|
||
<img alt="Nutanix logo" src="/images/logo-nutanix-125x32@2x.png">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p style="opacity: 0; line-height: 0px; font-size: 0px; margin: 0;">537c652d-cb1a-440e-ae35-0f0bf5743e75</p>
|
||
</div>
|
||
<%- /* Expose locals as `window.SAILS_LOCALS` :: */ exposeLocalsToBrowser() %>
|