Stepper UI fix for bigger screens

Web3Auth · Sep 9, 2024 · 9e4fea3 · 9e4fea3
1 parent b755cd1
commit 9e4fea3
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 6 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/public/videos/Web3paygif3.mp4 b/public/videos/Web3paygif3.mp4
diff --git a/src/components/ConnectStep.tsx b/src/components/ConnectStep.tsx
@@ -216,7 +216,7 @@ const ConnectStep = ({
       )}
       <div
         className={cn(
-          "mt-16 w-full flex items-center flex-col sm:flex-row justify-center lg:w-[85%] xl:w-[65%]",
+          "mt-16 w-full flex items-center flex-col sm:flex-row justify-center lg:w-[85%]",
           { "mt-0": activeStep === STEPS.VIEW_SUMMARY }
         )}
       >

diff --git a/src/components/Web3Pay.tsx b/src/components/Web3Pay.tsx
@@ -73,13 +73,26 @@ const Web3Pay = ({
           Use, Interact and Spend Crypto As One
         </p>
         <div className="flex flex-col lg:flex-row items-center gap-y-6 lg:gap-x-10">
-          <Image
+          {/* <Image
             src="/images/web3pay-user.svg"
             alt="Web3PayUser"
             height={500}
             width={600}
             className="w-full lg:w-[40%] md:h-[480px] lg:h-[500px]"
-          />
+          /> */}
+          <video
+            width="320"
+            height="240"
+            className="w-full lg:w-[40%] md:h-[480px] lg:h-[500px]"
+            autoPlay
+            loop
+            muted
+            // controls
+            // poster="/images/web3pay-user.svg"
+          >
+            <source src="/videos/Web3paygif3.mp4" type="video/mp4" />
+            Your browser does not support the video tag.
+          </video>
           <div className="flex flex-col gap-y-6 md:gap-y-8 lg:gap-y-10 lg:w-[60%] p-6 md:p-10 lg:pr-16">
             <div className="text-left flex flex-col gap-y-2">
               <p className="text-xl md:text-[32px] font-semibold leading-9 text-white break-words">