binary-com · mohsen-deriv · Apr 27, 2023 · Apr 24, 2023 · Apr 24, 2023 · Apr 24, 2023
diff --git a/src/components/Footer/Footer.module.scss b/src/components/Footer/Footer.module.scss
@@ -11,6 +11,7 @@
   @media screen and (max-width: 992px) {
     flex-direction: column;
     gap: rem(2);
+    padding: rem(4);
   }
 
   .FooterBody {
@@ -23,17 +24,25 @@
       font-size: rem(3.2);
       color: var(--ifm-color-white);
       @media screen and (max-width: 992px) {
-        font-size: rem(2);
+        font-size: rem(2.4);
       }
     }
     .FooterBodyContent {
       color: var(--ifm-color-white);
       font-weight: 400;
+      text-align: center;
       @media screen and (max-width: 992px) {
-        font-size: rem(1.5);
+        font-size: rem(1.6);
       }
     }
 
+    .FooterBodyContentEmail {
+      color: var(--ifm-color-white);
+      font-weight: 400;
+      @media screen and (max-width: 992px) {
+        font-size: rem(1.4);
+      }
+    }
     .Email {
       color: var(--ifm-color-danger);
       padding: 0 rem(0.5);

diff --git a/src/components/Footer/__tests__/Footer.test.tsx b/src/components/Footer/__tests__/Footer.test.tsx
@@ -34,7 +34,7 @@ describe('HeroHeader', () => {
     const community_link = screen.getByTestId('community-link');
     const { getByRole } = within(community_link);
     const button = getByRole('button');
-    expect(button).toHaveTextContent('Join Our Community');
+    expect(button).toHaveTextContent('Join our community');
   });
   it('should render footer body texts properly', () => {
     const help_text = screen.getByText(/^we're here to help$/i);

diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
@@ -17,14 +17,14 @@ const Footer = () => {
           style={{ textDecoration: 'none' }}
           href='https://binary.vanillacommunity.com/'
         >
-          <button className={styles.communityButton}>Join Our Community</button>
+          <button className={styles.communityButton}>Join our community</button>
         </a>
       </section>
       <section className={styles.FooterBody}>
         <Text type='subtitle-1' as='h2' align='center' className={styles.FooterContent}>
           We&apos;re here to help
         </Text>
-        <Text type='paragraph-1' align='center' className={styles.FooterBodyContent}>
+        <Text type='paragraph-1' align='center' className={styles.FooterBodyContentEmail}>
           Email us at{' '}
           <a className={styles.Email} href={'mailto:[email protected]'}>
             [email protected]

diff --git a/src/features/Home/ApiFeatures/ApiFeatures.module.scss b/src/features/Home/ApiFeatures/ApiFeatures.module.scss
@@ -27,6 +27,11 @@
       display: flex;
       flex-direction: column;
       gap: rem(2);
+      @media screen and (max-width: 992px) {
+        > h2 {
+          text-align: center;
+        }
+      }
     }
 
     @media (min-width: 425px) {
@@ -40,7 +45,10 @@
       margin-left: rem(-2);
       font-weight: 400;
       padding-left: rem(2);
-
+      @media screen and (max-width: 992px) {
+        font-size: rem(1.4);
+      }
+
       .FeatureOptions {
         align-items: center;
         list-style-type: none;

diff --git a/src/features/Home/Benefits/Benefits.module.scss b/src/features/Home/Benefits/Benefits.module.scss
@@ -90,6 +90,15 @@
         }
         .InformationContent {
           width: 100%;
+
+          > h1 {
+            margin-bottom: rem(0.8);
+            font-size: rem(2.4);
+          }
+          > p {
+            line-height: rem(3.6);
+            font-size: rem(1.8);
+          }
         }
       }
     }
@@ -101,6 +110,11 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  @media screen and (max-width: 992px) {
+    > figcaption {
+      font-size: var(--fontSizes-sm);
+    }
+  }
 
   .BenefitsImage {
     background-size: contain;

diff --git a/src/features/Home/ClientLibraries/ClientLibraries.module.scss b/src/features/Home/ClientLibraries/ClientLibraries.module.scss
@@ -22,6 +22,8 @@
     padding: 0 rem(2);
     @media (max-width: 992px) {
       text-align: center;
+      font-size: rem(1.8);
+      line-height: rem(2.6);
     }
   }
   .IconJS {

diff --git a/src/features/Home/GetStarted/GetStarted.module.scss b/src/features/Home/GetStarted/GetStarted.module.scss
@@ -24,6 +24,9 @@
 
     .termConditions {
       padding: 0 rem(2.5);
+      @media screen and (max-width: 992px) {
+        font-size: rem(1.2);
+      }
     }
 
     .cardContainer {
@@ -51,12 +54,19 @@
       color: var(--ifm-color-black);
       margin-bottom: 0;
       position: relative;
-      transition: box-shadow .2s;
+      transition: box-shadow 0.2s;
 
       section {
         display: flex;
         flex-direction: column;
         gap: rem(0.8);
+
+        > p {
+          font-family: var(--ibm-font-family-base);
+          @media screen and (max-width: 992px) {
+            font-size: rem(1.4);
+          }
+        }
       }
 
       .cardIcon {

diff --git a/src/features/Home/HeroHeader/HeroHeader.module.scss b/src/features/Home/HeroHeader/HeroHeader.module.scss
@@ -15,12 +15,11 @@
   padding-top: rem(4);
 
   @media screen and (max-width: 992px) {
-    margin-top: rem(4.7);
     padding-top: unset;
   }
 
-  @media screen and (min-width: 320px) and (max-width: 375px) {
-    height: rem(37.8);
+  @media screen and (min-width: 320px) and (max-width: 415px) {
+    height: rem(35);
   }
   .HeroContainerStyle {
     display: flex;
@@ -33,12 +32,11 @@
     @media screen and (max-width: 992px) {
       width: 100%;
       padding: rem(8) rem(4);
-      align-items: baseline;
     }
     .heading {
       color: var(--ifm-color-white);
       @media screen and (max-width: 992px) {
-        font-size: rem(2);
+        font-size: rem(3.2);
       }
     }
 
@@ -47,7 +45,9 @@
       font-weight: 400;
 
       @media screen and (max-width: 992px) {
-        text-align: left;
+        text-align: center;
+        font-size: rem(1.6);
+        margin-top: rem(0.8);
       }
     }
     .HeroButton {
@@ -62,6 +62,9 @@
       background: #ff444f;
       border-radius: rem(1.5);
       font-size: rem(1.6);
+      @media screen {
+        font-size: rem(1.4);
+      }
     }
   }
 }
diff --git a/src/features/Home/styles.module.scss b/src/features/Home/styles.module.scss
@@ -5,6 +5,9 @@
   display: flex;
   flex-direction: column;
   gap: rem(16);
+  @media (max-width: 992px) {
+    gap: rem(5.2);
+  }
 }
 
 .featureSvg {

diff --git a/src/styles/index.scss b/src/styles/index.scss
@@ -22,7 +22,7 @@
   --ifm-color-primary-lightest: #3cad6e;
   --ifm-code-font-size: 95%;
   --text-profit-success: #4bb4b3;
-  --demo-account: #377CFC;
+  --demo-account: #377cfc;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
   --nav-height: 60px;
   --ifm-menu-color: #414652;
@@ -33,7 +33,6 @@
   --schema-array: #ff8fc8;
   --schema-number: #acb2ff;
   --schema-integer: #f8c272;
-
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
@@ -151,7 +150,7 @@ div[class*='sidebarViewport'] {
   > div {
     z-index: 1000;
   }
-  div[role="dialog"] {
+  div[role='dialog'] {
     z-index: 1001;
   }
 }
@@ -255,8 +254,8 @@ main[class*='docMainContainer'] .container {
   .navbar__logo {
     width: rem(7.4);
   }
-  
+
   .navbar__toggle {
     width: rem(1.2);
   }
-}
+}