adjust animation to big screens

Author: clxandstuff

src/components/wizard/stories/create-account.tsx

@@ -155,7 +155,15 @@ const SuccessStep = ({avatarImage}: {avatarImage: string}) => {
           left: '10%',
         }}
       >
-        <Lottie animationData={brandHeroesAnimation} />
+        <div
+          style={{
+            margin: '0 auto',
+            width: '100%',
+            maxWidth: '1000px',
+          }}
+        >
+          <Lottie animationData={brandHeroesAnimation} />
+        </div>
       </div>
       <div
         style={{
@@ -166,12 +174,20 @@ const SuccessStep = ({avatarImage}: {avatarImage: string}) => {
           left: '10%',
         }}
       >
-        <Lottie
-          lottieRef={confettiAnimationRef}
-          animationData={confettiAnimation}
-          loop={false}
-          autoplay={false}
-        />
+        <div
+          style={{
+            margin: '0 auto',
+            width: '100%',
+            maxWidth: '1000px',
+          }}
+        >
+          <Lottie
+            lottieRef={confettiAnimationRef}
+            animationData={confettiAnimation}
+            loop={false}
+            autoplay={false}
+          />
+        </div>
       </div>
     </>
   );
@@ -218,7 +234,7 @@ const CreateAccountStory = () => {
   return (
     <Wizard onComplete={onComplete}>
       <Wizard.ProgressBar>Join Brainly</Wizard.ProgressBar>
-      <WizardStep>
+      {/* <WizardStep>
         <Wizard.Title subtitle="Let us know you better">
           Almost there.
         </Wizard.Title>
@@ -363,7 +379,7 @@ const CreateAccountStory = () => {
         <WizardStep.Submit variant="solid-indigo">
           create account
         </WizardStep.Submit>
-      </WizardStep>
+      </WizardStep> */}
       <WizardStep>
         <SuccessStep avatarImage={avatarImage} />
       </WizardStep>