Merge pull request #214 from sanjam-deriv/homedesigns

Author: hubert-deriv

src/features/Home/Benefits/Benefits.module.scss

@@ -12,17 +12,19 @@
     width: 100%;
     flex-wrap: nowrap;
     margin-bottom: rem(6.4);
-    gap: rem(3);
+    gap: rem(20);
     display: flex;
-    justify-content: space-evenly;
+    justify-content: center;
     padding: 0 rem(1);
 
     @media screen and (max-width: 992px) {
       margin-top: rem(3);
+      gap: rem(8.8);
     }
 
     @media screen and (max-width: 425px) {
       flex-direction: column;
+      gap: rem(3);
     }
   }
 
@@ -39,10 +41,6 @@
       margin: rem(1.6) 0;
     }
 
-    img {
-      margin-bottom: rem(4);
-    }
-
     @media screen and (max-width: 992px) {
       flex-wrap: wrap;
       width: 90%;

src/features/Home/Benefits/Benefits.tsx

@@ -52,7 +52,7 @@ export const Benefits = () => {
         <article className={styles.InformationContainer}>
           <ImageContainer image='personalisation' alt='personalisation' />
           <section className={styles.InformationContent}>
-            <h1>Personalize your trading</h1>
+            <h1>Personalise your trading</h1>
             <Text type='subtitle-2' as='p'>
               Personalize your trading apps to match your needs. Create charts and views the way you
               like them. Develop your trading app using any common programming language and extend

src/features/Home/Benefits/__tests__/Benefits.test.tsx

@@ -23,7 +23,7 @@ describe('Benefits', () => {
     expect(execution).toBeInTheDocument();
   });
   it('should render personalize your trading information', () => {
-    const title = screen.getByText(/Personalize your trading$/i);
+    const title = screen.getByText(/Personalise your trading$/i);
     const information = screen.getByText(/create charts and views/i);
 
     expect(title).toBeInTheDocument();

src/features/Home/GetStarted/GetStarted.tsx

@@ -29,7 +29,7 @@ export const GetStarted = () => {
               <Text type='subtitle-1' bold className={`${styles.dark} ${styles.header}`} as='h2'>
                 1. Learn about our API
               </Text>
-              <p>Understand basic concepts and terminologies.</p>
+              <p>Understand basic concepts and terminologies</p>
             </section>
             <figure className={styles.arrowIcon}>
               <img src='img/home-arrow.svg' />
@@ -47,7 +47,7 @@ export const GetStarted = () => {
               <Text type='subtitle-1' bold className={`${styles.dark} ${styles.header}`} as='h2'>
                 2. Sign up
               </Text>
-              <p>Create a free Deriv account to access our API.</p>
+              <p>Create a free Deriv account to access our API</p>
             </section>
             <figure className={styles.arrowIcon}>
               <img src='img/home-arrow.svg' />
@@ -64,7 +64,7 @@ export const GetStarted = () => {
               <Text type='subtitle-1' bold className={`${styles.dark} ${styles.header}`} as='h2'>
                 3. Register your app
               </Text>
-              <p>Fill out the registration form to start using Deriv API.</p>
+              <p>Fill out the registration form to start using Deriv API</p>
             </section>
             <figure className={styles.arrowIcon}>
               <img src='img/home-arrow.svg' />

src/features/Home/HeroHeader/HeroHeader.tsx

@@ -6,7 +6,7 @@ export const HeroHeader = () => {
   return (
     <header className={styles.HeroImageStyle} data-testid='hero-header'>
       <div className={styles.HeroContainerStyle}>
-        <Text type='heading-1' as={'h1'} bold className={styles.heading} aria-level={2}>
+        <Text type='hero' as={'h1'} bold className={styles.heading} aria-level={2}>
           Deriv API
         </Text>
         <Text

src/styles/index.scss

@@ -343,6 +343,10 @@ div[class*='sidebarViewport'] {
   }
 }
 
+.navbar__item {
+  padding: rem(0.4) rem(1.6) rem(0.4) rem(1.6);
+}
+
 main[class*='docMainContainer'] .container {
   padding-top: rem(4) !important; // Have to use important since docusaurus does the same.
   margin: 0 rem(4);