Fixed for mobile, added Google Workspace

index.html

@@ -77,20 +77,6 @@
                   </div>
                 </div>
 
-                <div class="block md:hidden">
-                  <button class="rounded bg-gray-100 p-2 text-gray-600 transition hover:text-gray-600/75">
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      class="h-5 w-5"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      stroke="currentColor"
-                      stroke-width="2"
-                    >
-                      <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
-                    </svg>
-                  </button>
-                </div>
               </div>
             </div>
           </div>
@@ -164,7 +150,13 @@ <h2 class="text-4xl font-extrabold py-8 sm:text-5xl">
       </div>
 
       <div class="mt-8 grid grid-cols-1 gap-8 lg:grid-cols-2 lg:gap-16">
-        <div class="relative h-64 overflow-hidden sm:h-80 lg:h-full">
+
+        <div class="lg:py-2">
+          <article id="contentArea" class="text-gray-600">
+            <video class="rounded-xl w-full sm:w-[26rem] sm:-m-2 border bg-base-200" autoplay loop playsinline controls muted width="666" height="666"><source src="feature_1.mp4"></video>
+          </article>
+        </div>
+        <div class="relative overflow-hidden sm:h-80 lg:h-full">
             <div class="space-y-4">
                 <details class="bg-white rounded-lg group [&_summary::-webkit-details-marker]:hidden" open>
                   <summary
@@ -206,7 +198,7 @@ <h2 class="font-medium">1. Connect our platform to your Microsoft tenant</h2>
                   </summary>
 
                   <p class="p-4 leading-relaxed text-gray-700">
-                    LastPhish accesses your organization's data through Microsoft Entra ID. With access to your tenant via the Microsoft Graph API, we can personalize our campaigns, and ensure that all phishes are delivered successfully.
+                    LastPhish accesses your organization's data through the Microsoft Graph API and the Google Workspace API, so that we can personalize our campaigns, and ensure that all phishes are delivered successfully.
                   </p>
                 </details>
 
@@ -300,11 +292,6 @@ <h2 class="font-medium">3. Get reports and insight into how your employees are d
               </div>
         </div>
 
-        <div class="lg:py-2">
-          <article id="contentArea" class="text-gray-600">
-            <video class="rounded-xl w-full sm:w-[26rem] sm:-m-2 border bg-base-200" autoplay loop playsinline controls muted width="666" height="666"><source src="feature_1.mp4"></video>
-          </article>
-        </div>
       </div>
     </div>
   </section>
@@ -503,6 +490,51 @@ <h3 class="text-xl font-normal mt-5 mb-6">We're getting ready to go live. If you
                       required
                     />
                 </div>
+
+                <div>
+                  <p>Which e-mail provider do your company use?</p>
+                  <fieldset class="grid grid-cols-2 gap-4">
+                    <legend class="sr-only">Tenant type</legend>
+
+                    <div>
+                      <label
+                        for="MicrosoftType"
+                        class="block cursor-pointer rounded-lg border border-gray-100 bg-white p-4 text-sm font-medium shadow-sm hover:border-gray-200 has-[:checked]:border-blue-500 has-[:checked]:ring-1 has-[:checked]:ring-blue-500"
+                      >
+                        <div>
+                          <p class="text-gray-700">Microsoft</p>
+                        </div>
+
+                        <input
+                          type="radio"
+                          name="tenantType"
+                          value="Microsoft"
+                          id="MicrosoftType"
+                          class="sr-only"
+                        />
+                      </label>
+                    </div>
+
+                    <div>
+                      <label
+                        for="GoogleType"
+                        class="block cursor-pointer rounded-lg border border-gray-100 bg-white p-4 text-sm font-medium shadow-sm hover:border-gray-200 has-[:checked]:border-blue-500 has-[:checked]:ring-1 has-[:checked]:ring-blue-500"
+                      >
+                        <div>
+                          <p class="text-gray-700">Google Workspace</p>
+                        </div>
+
+                        <input
+                          type="radio"
+                          name="tenantType"
+                          value="Google"
+                          id="GoogleType"
+                          class="sr-only"
+                        />
+                      </label>
+                    </div>
+                  </fieldset>
+                </div>
 
                 <div>
                   <label class="sr-only" for="message">Message</label>