style(newsletter): update newsletter form to match latest Figma design

CHANGELOG.md

@@ -234,4 +234,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ### Fixed
 
+- Updated newsletter input and subscribe button styling to match the latest Figma design.
+- Improved newsletter component responsiveness across different screen sizes.
+
 ### Changed

components/NewsletterSubscribe/NewsletterForm/NewsletterForm.module.scss

@@ -60,27 +60,34 @@
 .input {
   display: block;
   font-size: 1.2rem;
-  border-radius: 1rem;
-  height: 2rem;
+  border-radius: 0.75rem;
+  min-height: 2.75rem;
   margin: 1rem 0;
-  padding: 1rem 1.25rem;
-  border: 1px solid var(--dark-bg);
+  padding: 0.75rem 1rem;
+  border: 1px solid var(--bg-color);
   width: 100%;
 
   &::placeholder {
-    color: var(--color-primary-content);
+    color: var(--color-grey);
   }
 
   &:focus {
     outline: none;
   }
 
   @include large-desktop {
-    font-size: 1.5rem;
+    font-size: 1rem;
     height: 3rem;
     border-radius: 3rem;
     max-width: 25rem;
   }
+  @include desktop {
+    font-size: 0.9rem;
+    height: 2.5rem;
+    border-radius: 0.75rem;
+    min-width: 15rem;
+    padding: 0.75rem 1rem;
+  }
 }
 
 .inputName {

components/NewsletterSubscribe/NewsletterForm/index.js

@@ -125,23 +125,23 @@ const NewsletterForm = ({ getReCaptchaToken }) => {
         </h2>
         <div>
           <form className={styles.form} onSubmit={handleFormSubmit}>
-            <input
-              className={styles.inputName}
-              onChange={event => setName(event?.target?.value ?? '')}
-              type='text'
-              name='name'
-              value={name}
-              placeholder='name'
-            />
             <input
               className={styles.inputEmail}
               onChange={event => setEmail(event?.target?.value ?? '')}
               type='email'
               name='email'
               value={email}
-              placeholder='email'
+              placeholder='Enter Your Email'
               onKeyUp={event => handleInputKeyEvent(event)}
             />
+            <input
+              className={styles.inputName}
+              onChange={event => setName(event?.target?.value ?? '')}
+              type='text'
+              name='name'
+              value={name}
+              placeholder='Enter Your Name'
+            />
             <NewsLetterSubmitButton label='Subscribe' />
           </form>
 

components/buttons/SubmitButton/SubmitButton.module.scss

@@ -8,7 +8,9 @@
   background-color: var(--color-primary-content);
   border-radius: 2rem;
   cursor: pointer;
-  font-weight: bold;
+  font-weight: 545;
+  line-height: 1;
+  letter-spacing: 0;
   text-align: center;
   display: block;
   border: 1px solid var(--color-primary-content);
@@ -43,7 +45,7 @@
   @include desktop {
     font-size: 1.2rem;
     min-width: 11rem;
-    padding: 0.3rem 0;
+    padding: 0.6rem 0;
   }
 
   @include large-desktop {