fix(client): login cta in multiple places (#55001)

client/src/components/landing/landing.css

@@ -173,7 +173,7 @@ figcaption.caption {
 .as-seen-in,
 .certification-section,
 .testimonials {
-  padding-block: 4vw;
+  padding: 4vw 15px;
 }
 
 .certification-section {

client/src/components/layouts/global.css

@@ -265,6 +265,7 @@ fieldset[disabled] .btn {
   background-image: linear-gradient(#fecc4c, #ffac33);
   border: 3px solid #feac32;
   color: #0a0a23 !important;
+  text-align: center;
 }
 .btn-cta:hover,
 .btn-cta:focus,

client/src/templates/Challenges/components/completion-modal.css

@@ -69,6 +69,12 @@
   transition: width 0ms linear;
 }
 
+/* The maximum width of login button is 500px, which is set in global.css.
+   An override is needed as 500px is not enough to allow the button to span the modal width. */
+.completion-modal-login-btn .signup-btn {
+  max-width: 100%;
+}
+
 @media screen and (max-width: 991px) {
   .progress-bar-wrap,
   .progress-bar-background {

client/src/templates/Challenges/components/completion-modal.tsx

@@ -206,10 +206,10 @@ class CompletionModal extends Component<
         </Modal.Body>
         <Modal.Footer>
           {isSignedIn ? null : (
-            <>
+            <div className='completion-modal-login-btn'>
               <Login block={true}>{t('learn.sign-in-save')}</Login>
               <Spacer size='xxSmall' />
-            </>
+            </div>
           )}
           <Button
             block={true}