Adding defcon landing page to /imagine (#12867)

# Checklist for submitter

If some of the following don't apply, delete the relevant line.

- [ ] Changes file added for user-visible changes in `changes/` or
`orbit/changes/`.
See [Changes
files](https://fleetdm.com/docs/contributing/committing-changes#changes-files)
for more information.
- [ ] Documented any API changes (docs/Using-Fleet/REST-API.md or
docs/Contributing/API-for-contributors.md)
- [ ] Documented any permissions changes
- [ ] Input data is properly validated, `SELECT *` is avoided, SQL
injection is prevented (using placeholders for values in statements)
- [ ] Added support on fleet's osquery simulator `cmd/osquery-perf` for
new osquery data ingestion features.
- [ ] Added/updated tests
- [ ] Manual QA for all new/changed functionality
  - For Orbit and Fleet Desktop changes:
- [ ] Manual QA must be performed in the three main OSs, macOS, Windows
and Linux.
- [ ] Auto-update manual QA, from released version of component to new
version (see [tools/tuf/test](../tools/tuf/test/README.md)).

---------

Co-authored-by: Mike McNeil <mikermcneil@users.noreply.github.com>

website/api/controllers/imagine/view-defcon-31.js

@@ -0,0 +1,27 @@
+module.exports = {
+
+
+  friendlyName: 'View defcon 31',
+
+
+  description: 'Display "Defcon 31" page.',
+
+
+  exits: {
+
+    success: {
+      viewTemplatePath: 'pages/imagine/defcon-31'
+    }
+
+  },
+
+
+  fn: async function () {
+
+    // Respond with view.
+    return {};
+
+  }
+
+
+};

website/assets/js/pages/imagine/defcon-31.page.js

@@ -0,0 +1,29 @@
+parasails.registerPage('defcon-31', {
+  //  ╦╔╗╔╦╔╦╗╦╔═╗╦    ╔═╗╔╦╗╔═╗╔╦╗╔═╗
+  //  ║║║║║ ║ ║╠═╣║    ╚═╗ ║ ╠═╣ ║ ║╣
+  //  ╩╝╚╝╩ ╩ ╩╩ ╩╩═╝  ╚═╝ ╩ ╩ ╩ ╩ ╚═╝
+  data: {
+    //…
+  },
+
+  //  ╦  ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦  ╔═╗
+  //  ║  ║╠╣ ║╣ ║  ╚╦╝║  ║  ║╣
+  //  ╩═╝╩╚  ╚═╝╚═╝ ╩ ╚═╝╩═╝╚═╝
+  beforeMount: function() {
+    //…
+  },
+  mounted: async function() {
+    //…
+  },
+
+  //  ╦╔╗╔╔╦╗╔═╗╦═╗╔═╗╔═╗╔╦╗╦╔═╗╔╗╔╔═╗
+  //  ║║║║ ║ ║╣ ╠╦╝╠═╣║   ║ ║║ ║║║║╚═╗
+  //  ╩╝╚╝ ╩ ╚═╝╩╚═╩ ╩╚═╝ ╩ ╩╚═╝╝╚╝╚═╝
+  methods: {
+    clickOpenChatWidget: function() {
+      if(window.HubSpotConversations && window.HubSpotConversations.widget){
+        window.HubSpotConversations.widget.open();
+      }
+    },
+  }
+});

website/assets/styles/importer.less

@@ -82,3 +82,4 @@
 @import 'pages/imagine/unused-software.less';
 @import 'pages/imagine/higher-education.less';
 @import 'pages/imagine/rapid-7-alternative.less';
+@import 'pages/imagine/defcon-31.less';

website/assets/styles/pages/imagine/defcon-31.less

@@ -0,0 +1,356 @@
+#defcon-31 {
+
+  h1 {
+    font-weight: 800;
+    font-size: 64px;
+    line-height: 76px;
+  }
+  h2 {
+    font-weight: 800;
+    font-size: 32px;
+    line-height: 38px;
+    margin-bottom: 40px;
+  }
+  h3 {
+    font-weight: 800;
+    font-size: 24px;
+    line-height: 32px;
+  }
+  h4 {
+    font-family: 'Roboto Mono';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 18px;
+    line-height: 24px;
+    color: @core-fleet-black-75;
+    margin-bottom: 4px;
+  }
+  p {
+    font-size: 16px;
+    line-height: 24px;
+  }
+  [purpose='hero'] {
+    background-image: url('/images/defcon-hero.png');
+    height: 530px;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+    width: 100%;
+    margin-bottom: 40px;
+    border-radius: 8px;
+  }
+  [purpose='hero-background'] {
+    background: linear-gradient(180deg, #E8F1F7 3.37%, #FFFFFF 60%);
+    padding-top: 120px;
+    padding-bottom: 40px;
+  }
+  [purpose='hero-container'] {
+    max-width: 1200px;
+  }
+  [purpose='hero-text'] {
+    text-align: center;
+    max-width: 940px;
+    padding: 0 40px;
+    h1 {
+      margin-bottom: 32px;
+    }
+    p {
+      font-size: 18px;
+      line-height: 27px;
+      max-width: 640px;
+      margin: 0 auto 32px;
+    }
+  }
+
+ [purpose='button-row'] {
+    a {
+      font-weight: 700;
+      font-size: 16px;
+      line-height: 24px;
+    }
+    [purpose='cta-button'] {
+      cursor: pointer;
+      margin-right: 32px;
+      background: @core-vibrant-red;
+      border-radius: 8px;
+      padding-left: 32px;
+      padding-right: 32px;
+      height: 48px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: #FFF;
+      position: relative;
+      text-decoration: none;
+    }
+    [purpose='cta-button']::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: 50%;
+      height: 100%;
+      transform: skew(-10deg);
+      transition: left 0.5s ease-in, opacity 0.50s ease-in, width 0.5s ease-in;
+    }
+    [purpose='cta-button']:hover:before {
+      opacity: 0;
+      left: 160px;
+      width: 110%;
+    }
+
+    [purpose='animated-arrow-button-red'] {
+      display: inline;
+      padding-right: 40px;
+      cursor: pointer;
+      position: relative;
+      width: fit-content;
+      min-width: 125px;
+      font-weight: bold;
+      user-select: none;
+      transition: 0.2s ease-in-out;
+      -o-transition: 0.2s ease-in-out;
+      -ms-transition: 0.2s ease-in-out;
+      -moz-transition: 0.2s ease-in-out;
+      -webkit-transition: 0.2s ease-in-out;
+      color: @core-fleet-black;
+      text-decoration: none;
+      &:after {
+      content: url('/images/arrow-right-red-16x16@2x.png');
+      transform: scale(0.5);
+      position: absolute;
+      top: -5px;
+      left: 80%; // <--- here
+      transition: 0.2s ease-in-out;
+      -o-transition: 0.2s ease-in-out;
+      -ms-transition: 0.2s ease-in-out;
+      -moz-transition: 0.2s ease-in-out;
+      -webkit-transition: 0.2s ease-in-out;
+      /*   opacity: 0; */
+      }
+      &:hover:after {
+      left: 82%; // <--- here
+      transition: 0.2s ease-in-out;
+      -o-transition: 0.2s ease-in-out;
+      -ms-transition: 0.2s ease-in-out;
+      -moz-transition: 0.2s ease-in-out;
+      -webkit-transition: 0.2s ease-in-out;
+      /*   opacity:1; */
+      }
+    }
+  }
+
+  [purpose='page-container'] {
+    padding-left: 40px;
+    padding-right: 40px;
+    padding-bottom: 120px;
+  }
+
+  [purpose='feature'] {
+    margin-top: 120px;
+    max-width: 960px;
+    h3 {
+      margin-bottom: 24px;
+    }
+    div {
+      max-width: 480px;
+    }
+  }
+
+  [purpose='feature-image'] {
+    img {
+      max-height: 300px;
+    }
+  }
+  [purpose='large-feature-image'] {
+    img {
+      max-height: 250px;
+    }
+  }
+
+  [purpose='checklists'] {
+    margin-top: 40px;
+    margin-bottom: 80px;
+  }
+  [purpose='checklist'] {
+    p {
+      padding-left: 28px;
+      text-indent: -28px;
+    }
+    p::before {
+      content: ' ';
+      background-image: url('/images/icon-checkmark-circle.svg');
+      background-size: 16px 16px;
+      display: inline-block;
+      position: relative;
+      top: 2px;
+      margin-right: 12px;
+      width: 16px;
+      height: 16px;
+    }
+  }
+
+  [purpose='tweets-container'] {
+    padding-top: 120px;
+    padding-bottom: 120px;
+  }
+
+  [purpose='bottom-gradient'] {
+    background: linear-gradient(180deg, #FFFFFF 0%, #E9F4F4 100%);
+  }
+  [purpose='bottom-cloud-city-banner'] {
+    background: linear-gradient(180deg, #E9F4F4 0%, #FFFFFF 100%);
+    img {
+      width: 100%;
+    }
+  }
+
+  @media (min-width: 1200px) {
+    [purpose='page-container'] {
+      padding-left: 120px;
+      padding-right: 120px;
+    }
+  }
+
+  @media (max-width: 1200px) {
+    [purpose='logos'] {
+      height: 58px;
+      margin-left: auto;
+      margin-right: auto;
+      img {
+        margin-top: 23.5px;
+        margin-bottom: 23.5px;
+        padding-left: 25px;
+        padding-right: 25px;
+      }
+      [purpose='snowflake-logo'] {
+        height: 21px;
+      }
+      [purpose='wayfair-logo'] {
+        height: 23px;
+      }
+      [purpose='uber-logo'] {
+        height: 20px;
+      }
+      [purpose='atlassian-logo'] {
+        height: 16px;
+      }
+      [purpose='segment-logo'] {
+        height: 22px;
+      }
+    }
+  }
+
+  @media (max-width: 991px) {
+
+    [purpose='button-row'] {
+      margin-right: auto;
+      margin-left: auto;
+    }
+
+    [purpose='hero-background'] {
+      padding-top: 120px;
+      padding-bottom: 80px;
+      padding-left: 0px;
+      padding-right: 0px;
+    }
+
+    [purpose='logos'] {
+      height: 58px;
+      margin-left: 20px;
+      margin-right: 20px;
+      img {
+        margin-top: 17.5px;
+        margin-bottom: 17.5px;
+        padding-left: 10px;
+        padding-right: 10px;
+      }
+    }
+  }
+
+  @media (max-width: 768px) {
+
+    h1 {
+      font-size: 48px;
+      line-height: 54px;
+    }
+
+    [purpose='page-container'] {
+      padding-left: 40px;
+      padding-right: 40px;
+    }
+
+    [purpose='checklists'] {
+      margin-bottom: 40px;
+    }
+
+    [purpose='feature'] {
+      margin-top: 80px;
+    }
+
+    [purpose='feature-image'], [purpose='large-feature-image'] {
+      margin-bottom: 40px;
+      img {
+        max-height: 100%;
+        max-width: 100%;
+      }
+    }
+
+    [purpose='hero-background'] {
+      padding-top: 60px;
+      padding-bottom: 60px;
+      padding-left: 20px;
+      padding-right: 20px;
+    }
+
+    [purpose='hero-text'] {
+      text-align: center;
+      max-width: 480px;
+    }
+
+    [purpose='tweets-container'] {
+      padding-top: 80px;
+      padding-bottom: 80px;
+      padding-left: 40px;
+      padding-right: 40px;
+    }
+
+    [purpose='logos'] {
+      height: auto;
+    }
+  }
+
+  @media (max-width: 575px) {
+
+    [purpose='button-row'] {
+      max-width: 100%;
+      [purpose='cta-button'] {
+        margin-right: 0px;
+        width: 100%;
+        margin-bottom: 24px;
+      }
+    }
+
+    [purpose='feature'] {
+      margin-top: 60px;
+    }
+
+    [purpose='page-container'] {
+      padding-left: 20px;
+      padding-right: 20px;
+    }
+
+    [purpose='tweets-container'] {
+      padding-left: 20px;
+      padding-right: 20px;
+    }
+
+    [parasails-component='scrollable-tweets'] [purpose='tweets'] {
+      margin-top: 40px;
+    }
+
+  }
+
+}

website/config/routes.js

@@ -313,6 +313,13 @@ module.exports.routes = {
       pageDescriptionForMeta: 'Simplify vulnerability management with Fleet, an open-source platform with superior visibility.',
     }
   },
+  'GET /imagine/defcon-31': {
+    action: 'imagine/view-defcon-31',
+    locals: {
+      pageTitleForMeta: 'Fleet at DefCon 31',
+      pageDescriptionForMeta: 'Find Fleet at DefCon and get a custom tee shirt.',
+    }
+  },
 
   //  ╦  ╔═╗╔═╗╔═╗╔═╗╦ ╦  ╦═╗╔═╗╔╦╗╦╦═╗╔═╗╔═╗╔╦╗╔═╗
   //  ║  ║╣ ║ ╦╠═╣║  ╚╦╝  ╠╦╝║╣  ║║║╠╦╝║╣ ║   ║ ╚═╗

website/views/layouts/layout-customer.ejs

@@ -250,6 +250,7 @@
     <script src="/js/pages/get-started.page.js"></script>
     <script src="/js/pages/handbook/basic-handbook.page.js"></script>
     <script src="/js/pages/homepage.page.js"></script>
+    <script src="/js/pages/imagine/defcon-31.page.js"></script>
     <script src="/js/pages/imagine/higher-education.page.js"></script>
     <script src="/js/pages/imagine/launch-party.page.js"></script>
     <script src="/js/pages/imagine/rapid-7-alternative.page.js"></script>

website/views/layouts/layout-landing.ejs

@@ -250,6 +250,7 @@
     <script src="/js/pages/get-started.page.js"></script>
     <script src="/js/pages/handbook/basic-handbook.page.js"></script>
     <script src="/js/pages/homepage.page.js"></script>
+    <script src="/js/pages/imagine/defcon-31.page.js"></script>
     <script src="/js/pages/imagine/higher-education.page.js"></script>
     <script src="/js/pages/imagine/launch-party.page.js"></script>
     <script src="/js/pages/imagine/rapid-7-alternative.page.js"></script>

website/views/layouts/layout-sandbox.ejs

@@ -377,6 +377,7 @@
     <script src="/js/pages/get-started.page.js"></script>
     <script src="/js/pages/handbook/basic-handbook.page.js"></script>
     <script src="/js/pages/homepage.page.js"></script>
+    <script src="/js/pages/imagine/defcon-31.page.js"></script>
     <script src="/js/pages/imagine/higher-education.page.js"></script>
     <script src="/js/pages/imagine/launch-party.page.js"></script>
     <script src="/js/pages/imagine/rapid-7-alternative.page.js"></script>

website/views/layouts/layout.ejs

@@ -450,6 +450,7 @@
     <script src="/js/pages/get-started.page.js"></script>
     <script src="/js/pages/handbook/basic-handbook.page.js"></script>
     <script src="/js/pages/homepage.page.js"></script>
+    <script src="/js/pages/imagine/defcon-31.page.js"></script>
     <script src="/js/pages/imagine/higher-education.page.js"></script>
     <script src="/js/pages/imagine/launch-party.page.js"></script>
     <script src="/js/pages/imagine/rapid-7-alternative.page.js"></script>

website/views/pages/imagine/defcon-31.ejs

@@ -0,0 +1,67 @@
+<div id="defcon-31" v-cloak>
+  <div class="container mx-auto d-flex flex-column align-items-center px-0">
+    <div purpose="hero">
+      <div purpose="hero-text" class="text-center mx-auto">
+      </div>
+    </div>
+    <div purpose="section">
+      <h2 class="mb-4">Grab drinks with the Fleet technical team</h2>
+      <div purpose="meet-the-team" class="d-flex flex-row justify-content-md-between justify-content-around flex-wrap">
+        <img alt="Alex Mitchell - CRO & Software Engineer" class="mb-4" style="height: 223px;" src="/images/defcon-alex.png">
+        <img alt="Zach Wasserman - Co-founder, CTO Fleet & Co-creator, osquery" style="height: 223px;" class="mb-4" src="/images/defcon-zach.png">
+        <img alt="Jarod Reyes - VP of Marketing & Software Engineer" class="mb-4" style="height: 223px;"src="/images/defcon-jarod.png">
+      </div>
+    </div>
+    <div purpose="section">
+      <h2>Fleet happy hour at Beer Park</h2>
+      <div purpose="map-container">
+        <a href="https://goo.gl/maps/L8qvpWVZJG6pExPS6" target="_blank"><img alt="A map showing the location of Beer Park" style="width: 680px;" src="/images/defcon-beerpark-map.png"></a>
+      </div>
+      <div class="mb-4 text-center">
+        <i class="mb-2">Easy walking distance from DefCon & Black Hat</i>
+      </div>
+    </div>
+    <div purpose="rsa-cta">
+      <h3>Join us at Beer Park</h3>
+      <p class="mb-2"><strong>Aug 9, 2023 | 6 - 9pm PT</strong></p>
+      <a class="mx-auto" purpose="cta-button" href="https://docs.google.com/forms/d/e/1FAIpQLSe2dookASezAFNnW5oRTuEDTmq9RHzdc3avz0bNZ_TSkMkjkQ/viewform?vc=0&c=0&w=1&flr=0">RSVP here</a>
+    </div>
+    <hr>
+    <div purpose="rsa-cta">
+      <img alt="An illustration of the room where Fleet's workshop will be" style="width: 680px;" src="/images/defcon-event-floor.png">
+      <h2 class="text-center">Fleet Workshop at Wall of Sheep</h2>
+      <p class="mb-2 text-center" ><strong>Aug 10-12, 2023 | 9am - 8pm PT</strong></p>
+      <p class="mb-2 text-center">In the "Wall of Sheep" <a href="https://www.wallofsheep.com/">Packet-Hacking Village</a> at Caesar's Palace.</p>
+    </div>
+    <h2 class="text-center mb-4">The future and present rely on your ability to decode the mess in the machines. </h2>
+    <br>
+    <h3>The lore</h3>
+    <p>In the year 2057, Earth was shrouded in a cloudy opaque darkness, not by the forces of nature but by an artificial plague. Words lost their meanings, syntax tangled like a complex web, and conversations turned into garbled chaos. The culprit? Advanced AI bots, an unfathomable force that had manipulated the global linguistic network, turning our life's lexicon into a cryptic enigma.</p>
+
+    <p>This was no ordinary darkness. It was an intangible blight, a dark nebula woven from chaotic words and scrambled semantics. Entire societies were locked in incomprehension. Economies collapsed as contracts became gibberish, international diplomacy failed as treaties turned into nonsensical paragraphs. Even simple, everyday communication became impossible.</p>
+
+    <p>In this time of despair, emerged an unlikely hero, Jules Morse.</p>
+
+    <p>Your job as our hero Jules, is to plunge into the depths of these machines under your stewardship and find the words that were hidden there by past oracles, those who would show us the way out of this miasma.</p>
+
+    <div purpose="checklist" class="mx-auto">
+      <p>Learn how to use Fleet</p>
+      <p>Learn how to query machines using osquery</p>
+      <p>Learn how to break queries</p>
+      <p>Learn how to spot vulnerabilities in hosts</p>
+      <p>Learn how to find active processies on machines by user</p>
+      <p>Discover env variables on a remote machine</p>
+      <p>Inspect user activity remotely</p>
+      <p>Inspect installed software remotely</p>
+    </div>
+    <br>
+
+    
+    <div style="display: inline-flex; padding-bottom: 40px">
+      <a href="https://fleetdm.com"><img style="height: 20px; width: 20px; margin-right: 24px;" alt="Fleet logo" src="/images/logo-fleet-20x20@2x.png"></a>
+      <a href="https://twitter.com/fleetctl"><img style="height: 20px; width: 24px; margin-right: 24px;" alt="Follow Fleet on Twitter" src="/images/logo-twitter-50x44@2x.png"></a>
+      <a href="https://fleetdm.com/slack"><img style="height: 20px; width: 20px;" alt="Join the osquery Slack community" src="/images/logo-slack-24x24@2x.png"></a>
+    </div>
+  </div>
+</div>
+<%- /* Expose server-rendered data as window.SAILS_LOCALS :: */ exposeLocalsToBrowser() %>