From 31de2d66f90ad2fc68dca50cc516d796e6099d45 Mon Sep 17 00:00:00 2001
From: colinmfoster4723 <colin.foster4723@gmail.com>
Date: Thu, 21 Dec 2023 15:12:05 -0600
Subject: [PATCH] Adjusted styling for mobile

---
 ui/pages/index.tsx | 27 ++++++++++++++-------------
 1 file changed, 14 insertions(+), 13 deletions(-)

diff --git a/ui/pages/index.tsx b/ui/pages/index.tsx
index ff7298aa7..d3549d8a5 100644
--- a/ui/pages/index.tsx
+++ b/ui/pages/index.tsx
@@ -11,9 +11,9 @@ export default function Home() {
 
       <div
         id="home-hero"
-        className="flex flex-col pt-10 mt-3 px-5 lg:px-7 xl:px-9 py-12 lg:py-14 lg:mt-10 w-[336px] sm:w-[400px] lg:w-full lg:max-w-[1080px]"
+        className="flex flex-col lg:px-7 xl:px-9 py-4 lg:py-14 lg:mt-10 w-[336px] sm:w-[400px] lg:w-full lg:max-w-[1080px]"
       >
-        <div className="flex flex-col items-left">
+        <div className="flex flex-col items-center">
           <h2 className="text-[#071732] dark:text-white font-GoodTimes text-4xl sm:text-5xl lg:text-4xl xl:text-5xl text-center lg:text-left">
             Welcome to MoonDAO
           </h2>
@@ -21,19 +21,19 @@ export default function Home() {
             {`MoonDAO is accelerating the development of a lunar base through better coordination. Want to help? This flow will onboard you into our community in less than 5 minutes, even if you’re new to Web3.`}
           </p>
           <iframe
-            className="mt-10 w-full xl:w-5/6 aspect-video object-cover"
-            src="https://www.youtube.com/embed/Vs_vAtRgaBA?autoplay=0&showinfo=0&controls=0&rel=0"
+            className="mt-10 xl:w-5/6 aspect-video object-cover w-screen md:w-full"
+            src="https://www.youtube.com/embed/Vs_vAtRgaBA?showinfo=0&controls=1&rel=0&mute=1&autoplay=1"
             allowFullScreen
           />
-          <button
-            className="mt-10 px-8 py-4 lg:w-[300px] font-RobotoMono font-bold w-full bg-moon-orange text-white hover:scale-105 transition-all duration-150 hover:bg-white hover:text-moon-orange"
-            onClick={() => {
-              router.push('/join')
-            }}
-          >
-            Join MoonDAO
-          </button>
         </div>
+        <button
+          className="mt-10 px-8 py-4 lg:w-[300px] font-RobotoMono font-bold w-full bg-moon-orange text-white hover:scale-105 transition-all duration-150 hover:bg-white hover:text-moon-orange"
+          onClick={() => {
+            router.push('/join')
+          }}
+        >
+          Join MoonDAO
+        </button>
         <div className="mt-12">
           <div className="">
             <h2 className="text-3xl text-[#071732] dark:text-white font-GoodTimes sm:text-4xl lg:text-4xl xl:text-4xl text-center lg:text-left">
@@ -134,7 +134,8 @@ export default function Home() {
                 </dt>
                 <dd className="mt-5 lg:mt-4 xl:mt-6 font-RobotoMono text-sm sm:text-base lg:text-sm xl:text-base sm:mt-6 max-w-[698px] text-left lg:text-left text-gray-600 dark:text-white dark:opacity-60">
                   Enjoy access to exclusive events like our Ticket to Space
-                  sweepstakes, Zero Gravity training with NASA astronauts, and other unforgettable experiences.
+                  sweepstakes, Zero Gravity training with NASA astronauts, and
+                  other unforgettable experiences.
                 </dd>
               </div>
             </div>