feat: DX-2283 - [1-1 implementation review - S41] Why Dataxplorer

src/app/modules/home-module/components/hero/index.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { ReactComponent as GoogleIcon } from "app/modules/onboarding-module/asset/google-img.svg";
 import { ReactComponent as LinkedInIcon } from "app/modules/onboarding-module/asset/linkedIn-img.svg";
 import { ReactComponent as MicrosoftIcon } from "app/modules/onboarding-module/asset/microsoft-img.svg";
-import HeroEllipses from "app/modules/home-module/assets/hero-ellipses.svg";
+import HeroEllipses from "app/modules/home-module/assets/hero-ellipses.png";
 import HeroEllipsesTablet from "app/modules/home-module/assets/hero-ellipses-tablet.svg";
 import HeroEllipsesMobile from "app/modules/home-module/assets/hero-ellipses-mobile.svg";
 
@@ -23,8 +23,8 @@ export default function Hero() {
           linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #f2f7fd 100%);
         background-color: #f2f7fd;
         background-repeat: no-repeat;
-        background-size: contain;
-        background-position: bottom;
+        background-size: cover;
+        background-position: 58px 0%;
         @media (max-width: 960px) {
           background: url(${HeroEllipsesTablet}),
             linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #f2f7fd 100%);

src/app/modules/home-module/sub-modules/why-dx/components/tryUsBlock.tsx

@@ -55,7 +55,7 @@ export default function TryUsBlock() {
             &:nth-of-type(2) {
               font-size: 24px;
               color: #f4f4f4;
-              font-family: "GothamNarrow-Bold", "Helvetica Neue", sans-serif;
+              font-family: "GothamNarrow-Book", "Helvetica Neue", sans-serif;
             }
           }
           @media (max-width: 1120px) {

src/app/modules/home-module/sub-modules/why-dx/index.tsx

@@ -53,12 +53,14 @@ export default function WhyDX() {
               <TryUsBlock />
               <div
                 css={`
-                  height: 50px;
+                  height: 120px;
+                  @media (max-width: 1024px) {
+                    height: 40px;
+                  }
                 `}
               />
             </Container>
           </div>
-          <div css="width: 100%;height: 19px" />
         </div>
         <HomeFooter />
       </div>

src/app/modules/home-module/sub-modules/why-dx/style.ts

@@ -35,6 +35,10 @@ export const keyfeaturescss = {
     z-index: 1;
     padding-top: 120px;
 
+    @media (max-width: 1024px) {
+      padding-top: 40px;
+    }
+
     svg {
       @media (max-width: 1200px) {
         flex-direction: column;
@@ -47,7 +51,7 @@ export const keyfeaturescss = {
       font-size: 48px;
       line-height: 43px;
       text-align: center;
-      color: #000000;
+      color: #231d2c;
       margin-top: 0;
       margin-bottom: 80px;
       font-family: "GothamNarrow-Bold", sans-serif;
@@ -65,7 +69,7 @@ export const keyfeaturescss = {
       font-size: 36px;
       line-height: 20px;
       font-weight: 350;
-      font-family: "GothamNarrow-Medium", sans-serif;
+      font-family: "GothamNarrow-Bold", sans-serif;
       margin-bottom: 25px;
       margin-top: 0;
       color: #231d2c;
@@ -76,11 +80,11 @@ export const keyfeaturescss = {
       }
     }
     p:nth-of-type(2) {
-      font-family: "GothamNarrow-Medium", sans-serif;
+      font-family: "GothamNarrow-Book", sans-serif;
       font-weight: 350;
       line-height: 30px;
       letter-spacing: 0.5px;
-      font-size: 20px;
+      font-size: 25px;
       color: #231d2c;
       @media (max-width: 600px) {
         font-size: 14px;