Website: update /start questionnaire images (#28391)

Closes: https://github.com/fleetdm/confidential/issues/9170
Closes: https://github.com/fleetdm/confidential/issues/10348

Changes:
- Replaced the images on the /start with new captioned versions.
- Reduced the max-width and padding of the /start form on screens
smaller than 1200px
- Updated the start form to show the stage six image on the last steps
of the form.

website/assets/styles/pages/start.less

@@ -33,8 +33,8 @@
     }
   }
   [purpose='form-container'] {
-    min-width: 632px;
-    max-width: 632px;
+    min-width: 600px;
+    max-width: 600px;
     padding-left: 64px;
     padding-right: 64px;
     padding-top: 32px;
@@ -99,26 +99,27 @@
     height: 680px;
     max-width: 568px;
     background-size: cover;
-    background-position: center;
+    background-position: left;
     background-repeat: no-repeat;
     border-radius: 16px;
+    position: relative;
     &.stage-one {
-      background-image: url('/images/psystage-1-unaware-558x680@2x.png');
+      background-image: url('/images/psystage-1-unaware-caption-643x784@2x.png');
     }
     &.stage-two {
-      background-image: url('/images/psystage-2-aware-508x784@2x.png');
+      background-image: url('/images/psystage-2-aware-caption-643x784@2x.png ');
     }
     &.stage-three {
-      background-image: url('/images/psystage-3-intrigued-558x680@2x.png');
+      background-image: url('/images/psystage-3-intrigued-caption-643x784@2x.png ');
     }
     &.stage-four {
-      background-image: url('/images/psystage-4-has-use-case-508x784@2x.png');
+      background-image: url('/images/psystage-4-has-use-case-caption-643x784@2x.png');
     }
     &.stage-five {
-      background-image: url('/images/psystage-5-feeling-confident-504x784@2x.png');
+      background-image: url('/images/psystage-5-feeling-confident-caption-643x784@2x.png');
     }
     &.stage-six {
-      background-image: url('/images/psystage-6-has-team-buy-in-504x784@2x.png');
+      background-image: url('/images/psystage-6-has-team-buy-in-caption-648x789@2x.png');
     }
     &.cloud-city {
       background-image: url('/images/cropped-fleet-cloud-city-504x784@2x.png');
@@ -349,6 +350,23 @@
       }
     }
   }
+  @media (max-width: 1200px) {
+    [purpose='form-container'] {
+      min-width: 540px;
+      max-width: 540px;
+      padding-left: 32px;
+      padding-right: 32px;
+      padding-top: 32px;
+      margin-right: 0px;
+    }
+    [purpose='form-with-video-container'] {
+      width: 100%;
+      max-width: 1200px;
+      padding-left: 32px;
+      padding-right: 32px;
+      padding-top: 32px;
+    }
+  }
   @media (max-width: 991px) {
     [purpose='page-container'] {
       padding-top: 60px;

website/views/pages/start.ejs

@@ -764,7 +764,7 @@
         </ajax-form>
       </div>
     </div>
-    <div purpose="form-image" :class="currentStep === 'is-it-any-good' ? 'd-none w-0' : currentStep === 'start' ? 'stage-one' : ['thanks-for-checking-out-fleet'].includes(currentStep) ? 'cloud-city' : ['2 - Aware'].includes(psychologicalStage) ? 'stage-two' : ['3 - Intrigued'].includes(psychologicalStage) ? 'stage-three' : ['4 - Has use case'].includes(psychologicalStage) ? 'stage-four' : ['5 - Personally confident'].includes(psychologicalStage) ? 'stage-five' : ['6 - Has team buy-in'].includes(psychologicalStage) ? 'stage-six' : 'd-none w-0'">
+    <div purpose="form-image" :class="currentStep === 'is-it-any-good' ? 'd-none w-0' : currentStep === 'start' ? 'stage-one' : ['lets-talk-to-your-team', 'managed-cloud-for-growing-deployments', 'will-you-be-self-hosting', 'self-hosted-deploy', 'whats-left-to-get-you-set-up'].includes(currentStep) ? 'stage-six' : ['thanks-for-checking-out-fleet'].includes(currentStep) ? 'cloud-city' : ['2 - Aware'].includes(psychologicalStage) ? 'stage-two' : ['3 - Intrigued'].includes(psychologicalStage) ? 'stage-three' : ['4 - Has use case'].includes(psychologicalStage) ? 'stage-four' : ['5 - Personally confident'].includes(psychologicalStage) ? 'stage-five' : ['6 - Has team buy-in'].includes(psychologicalStage) ? 'stage-six' : 'd-none w-0'">
     </div>
   </div>
 </div>