Adjusted styling for mobile

Official-MoonDao · Dec 21, 2023 · 31de2d6 · 31de2d6
1 parent 3c3e2a3
commit 31de2d6
Showing 1 changed file with 14 additions and 13 deletions.
diff --git a/ui/pages/index.tsx b/ui/pages/index.tsx
@@ -11,29 +11,29 @@ 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>
           <p className="mt-6 sm:mt-6 lg:mt-8 font-RobotoMono text-sm sm:text-base lg:text-sm xl:text-base max-w-[698px] text-left lg:text-left text-gray-600 dark:text-white dark:opacity-60">
             {`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>