From a9fbe76bc3c0aa4968bf0aad2cc590061410f83c Mon Sep 17 00:00:00 2001
From: Eric <eashaw@sailsjs.com>
Date: Fri, 20 Dec 2024 17:16:13 -0600
Subject: [PATCH 1/4] add styles for video in start flow

---
 website/assets/styles/pages/start.less | 28 ++++++++++++++++++++++----
 website/views/pages/start.ejs          | 13 ++++++------
 2 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/website/assets/styles/pages/start.less b/website/assets/styles/pages/start.less
index 7e42ac554cab..90f539642372 100644
--- a/website/assets/styles/pages/start.less
+++ b/website/assets/styles/pages/start.less
@@ -44,6 +44,26 @@
     padding-top: 32px;
     margin-right: 20px;
   }
+  [purpose='form-with-video-container'] {
+    width: 100%;
+    // max-width: 960px;
+    padding-left: 64px;
+    padding-right: 64px;
+    padding-top: 32px;
+  }
+  [purpose='embedded-video'] {
+    position: relative;
+    margin-bottom: 40px;
+    width: 100%;
+    padding-bottom: 57%;
+    iframe {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+  }
   [purpose='form-tip'] {
     margin-top: 32px;
     padding: 16px;
@@ -321,9 +341,9 @@
       padding-top: 60px;
       padding-left: 40px;
       padding-right: 40px;
-      max-width: 600px;
+      // max-width: 600px;
     }
-    [purpose='form-container'] {
+    [purpose='form-container'],  [purpose='form-with-video-container'] {
       padding: 0;
       // min-width: unset;
       max-width: 504px;
@@ -341,7 +361,7 @@
       padding-left: 24px;
       padding-right: 24px;
     }
-    [purpose='form-container'] {
+    [purpose='form-container'],  [purpose='form-with-video-container'] {
       min-width: unset;
       width: 100%;
     }
@@ -360,7 +380,7 @@
       margin-right: unset;
       margin-bottom: 20px;
     }
-    [purpose='form-container'] {
+    [purpose='form-container'],  [purpose='form-with-video-container'] {
       width: 100%;
       margin-left: 0;
       margin-right: 0;
diff --git a/website/views/pages/start.ejs b/website/views/pages/start.ejs
index 4c4669abe45b..314c6da6a050 100644
--- a/website/views/pages/start.ejs
+++ b/website/views/pages/start.ejs
@@ -1,6 +1,6 @@
 <div id="start" v-cloak>
   <div class="d-flex container d-flex flex-row" purpose="page-container">
-    <div purpose="form-container">
+    <div :purpose="[[currentStep !== 'is-it-any-good' ? 'form-container' : 'form-with-video-container']]">
       <%//  ┌─┐┌┬┐┌─┐┬─┐┌┬┐
         //  └─┐ │ ├─┤├┬┘ │
         //  └─┘ ┴ ┴ ┴┴└─ ┴ %>
@@ -439,13 +439,14 @@
             <div purpose="form-progress-bar"><div purpose="current-progress" style="width: 50%"></div></div>
             <img purpose="success-icon" alt="🚀" src="/images/icon-form-success-16x16@2x.png">
           </div>
-          <h2>Is it any good?</h2>
-          <div purpose="start-cards">
-            <a purpose="card" class="w-100" href="https://youtu.be/QpdRADHWP_o?feature=shared&t=1333" target="_blank">
+          <h2>Fleet in 15 minutes</h2>
+          <div purpose="embedded-video">
+            <iframe src="https://www.youtube.com/embed/QpdRADHWP_o?rel=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+<!--             <a purpose="card" class="w-100" href="https://youtu.be/QpdRADHWP_o?feature=shared&t=1333" target="_blank">
               <img alt="Watch a demo" src="/images/play-button-64x64@2x.png">
               <h2>Watch a demo</h2>
               <p>See what Fleet can do</p>
-            </a>
+            </a> -->
           </div>
           <p>Got questions? <a purpose="contact-link" href="/contact">Ask us anything</a>.</p>
 
@@ -760,7 +761,7 @@
         </ajax-form>
       </div>
     </div>
-    <div purpose="form-image" :class="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' : ['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>

From 662dff3ea808145cdd630aced5998c3caeb05ecb Mon Sep 17 00:00:00 2001
From: Eric <eashaw@sailsjs.com>
Date: Fri, 20 Dec 2024 17:23:55 -0600
Subject: [PATCH 2/4] update embedded link and styles

---
 website/assets/styles/pages/start.less | 11 ++++++++---
 website/views/pages/start.ejs          |  4 ++--
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/website/assets/styles/pages/start.less b/website/assets/styles/pages/start.less
index 90f539642372..dbe97b208803 100644
--- a/website/assets/styles/pages/start.less
+++ b/website/assets/styles/pages/start.less
@@ -46,7 +46,7 @@
   }
   [purpose='form-with-video-container'] {
     width: 100%;
-    // max-width: 960px;
+    max-width: 1200px;
     padding-left: 64px;
     padding-right: 64px;
     padding-top: 32px;
@@ -343,9 +343,14 @@
       padding-right: 40px;
       // max-width: 600px;
     }
-    [purpose='form-container'],  [purpose='form-with-video-container'] {
+    [purpose='form-with-video-container'] {
+      padding: 0;
+      margin-left: auto;
+      margin-right: auto;
+
+    }
+    [purpose='form-container'] {
       padding: 0;
-      // min-width: unset;
       max-width: 504px;
       margin-left: auto;
       margin-right: auto;
diff --git a/website/views/pages/start.ejs b/website/views/pages/start.ejs
index 314c6da6a050..e359edf557f3 100644
--- a/website/views/pages/start.ejs
+++ b/website/views/pages/start.ejs
@@ -439,9 +439,9 @@
             <div purpose="form-progress-bar"><div purpose="current-progress" style="width: 50%"></div></div>
             <img purpose="success-icon" alt="🚀" src="/images/icon-form-success-16x16@2x.png">
           </div>
-          <h2>Fleet in 15 minutes</h2>
+          <h2>Fleet in 19 minutes</h2>
           <div purpose="embedded-video">
-            <iframe src="https://www.youtube.com/embed/QpdRADHWP_o?rel=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+            <iframe src="https://www.youtube.com/embed/07ErAAahRsg?rel=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
 <!--             <a purpose="card" class="w-100" href="https://youtu.be/QpdRADHWP_o?feature=shared&t=1333" target="_blank">
               <img alt="Watch a demo" src="/images/play-button-64x64@2x.png">
               <h2>Watch a demo</h2>

From 4708f8600257d7ddcda1f7b035c1e47550ab8146 Mon Sep 17 00:00:00 2001
From: Eric <eashaw@sailsjs.com>
Date: Fri, 20 Dec 2024 17:31:39 -0600
Subject: [PATCH 3/4] Update start.less

---
 website/assets/styles/pages/start.less | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/website/assets/styles/pages/start.less b/website/assets/styles/pages/start.less
index dbe97b208803..8683e3e6cd8c 100644
--- a/website/assets/styles/pages/start.less
+++ b/website/assets/styles/pages/start.less
@@ -366,7 +366,7 @@
       padding-left: 24px;
       padding-right: 24px;
     }
-    [purpose='form-container'],  [purpose='form-with-video-container'] {
+    [purpose='form-container'], [purpose='form-with-video-container'] {
       min-width: unset;
       width: 100%;
     }
@@ -385,7 +385,7 @@
       margin-right: unset;
       margin-bottom: 20px;
     }
-    [purpose='form-container'],  [purpose='form-with-video-container'] {
+    [purpose='form-container'], [purpose='form-with-video-container'] {
       width: 100%;
       margin-left: 0;
       margin-right: 0;

From c0fa29a3b3a91aa78cefd44e3e3ba4ebf2906c80 Mon Sep 17 00:00:00 2001
From: Eric <eashaw@sailsjs.com>
Date: Fri, 20 Dec 2024 17:41:12 -0600
Subject: [PATCH 4/4] Update start.less

---
 website/assets/styles/pages/start.less | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/website/assets/styles/pages/start.less b/website/assets/styles/pages/start.less
index 8683e3e6cd8c..5c0e7823c8a1 100644
--- a/website/assets/styles/pages/start.less
+++ b/website/assets/styles/pages/start.less
@@ -55,13 +55,15 @@
     position: relative;
     margin-bottom: 40px;
     width: 100%;
-    padding-bottom: 57%;
+    padding-bottom: 56%;
     iframe {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
+      border: none;
+      border-radius: 12px;
     }
   }
   [purpose='form-tip'] {