fix: homepage design

Author: sanjam-deriv

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/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