New version

.eslintrc.js

@@ -1,20 +1,20 @@
 module.exports = {
-    extends: ["eslint:recommended", "plugin:react/recommended"],
-    parser: "babel-eslint",
-    rules: {
-        indent: ["error", 4, {SwitchCase: 1}],
-        quotes: ["error", "double"],
-        "no-console": "error",
-        semi: ["error", "always"],
-        "react/no-deprecated": "off"
+  extends: ["eslint:recommended", "plugin:react/recommended"],
+  parser: "babel-eslint",
+  rules: {
+    /* indent: ["error", 4, {SwitchCase: 1}], */
+    /* quotes: ["error", "double"], */
+    "no-console": "error",
+    semi: ["error", "always"],
+    "react/no-deprecated": "off",
+  },
+  parserOptions: {
+    ecmaFeatures: {
+      legacyDecorators: true,
     },
-    parserOptions: {
-        ecmaFeatures: {
-            legacyDecorators: true
-        }
-    },
-    env: {
-        browser: true,
-        node: true
-    }
+  },
+  env: {
+    browser: true,
+    node: true,
+  },
 };

src/assets/scss/_variables.scss

@@ -2,11 +2,15 @@ $blue-100: #5dc2ef;
 $blue-200: #367dbf;
 $blue-300: #254a99;
 $blue-400: #2b2b6f;
+
+$beige: #F4F5F5;
+
 $blue-gradient: linear-gradient(to right, $blue-300, $blue-400);
 $blue-gradient-left: linear-gradient(to left, $blue-300, $blue-400);
 $blue-light-gradient: linear-gradient(to right, $blue-200, $blue-300);
 $blue-top-to-bottom-gradient: linear-gradient(to bottom, $blue-300, $blue-400);
 $blue-top-to-bottom-gradient-light: linear-gradient(to bottom, $blue-200, $blue-300);
+$white-blue-light-gradient: linear-gradient(to right, transparent, $blue-100);
 
 $red: #ec6b6b;
 $red-gradient: linear-gradient(to right, $red, #ce5050);
@@ -26,17 +30,23 @@ $black: #333;
 $grey: #e6e7e8;
 $grey-100: #f4f5f5;
 $grey-300: #a6a6a6;
-$light-grey: rgba(36,54,138,.2);
+$light-grey: rgba(36, 54, 138, .2);
 $grey-shadow: 0 7px 20px $light-grey;
 $red-shadow: 0px 0px 20px $red;
 
 @mixin disable-text-selection() {
-  -webkit-touch-callout: none; /* iOS Safari */
-  -webkit-user-select: none; /* Safari */
-  -khtml-user-select: none; /* Konqueror HTML */
-  -moz-user-select: none; /* Firefox */
-  -ms-user-select: none; /* Internet Explorer/Edge */
-  user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
+  -webkit-touch-callout: none;
+  /* iOS Safari */
+  -webkit-user-select: none;
+  /* Safari */
+  -khtml-user-select: none;
+  /* Konqueror HTML */
+  -moz-user-select: none;
+  /* Firefox */
+  -ms-user-select: none;
+  /* Internet Explorer/Edge */
+  user-select: none;
+  /* Non-prefixed version, currently supported by Chrome and Opera */
 }
 
 @mixin set-prop-to-calc-size($prop, $expr) {
@@ -49,5 +59,7 @@ $red-shadow: 0px 0px 20px $red;
 @import url('https://fonts.googleapis.com/css?family=Rubik:300,500,700');
 @import url('https://fonts.googleapis.com/css?family=Asap:400,700');
 
-$font-rubik: 'Rubik', sans-serif;
-$font-asap: 'Asap', sans-serif;
+$font-rubik: 'Rubik',
+sans-serif;
+$font-asap: 'Asap',
+sans-serif;

src/components/shared/itemized/itemized.component.js

@@ -0,0 +1,25 @@
+import React from "react";
+import * as PropTypes from "prop-types";
+
+import "./itemized.component.scss";
+
+export function Itemized(props) {
+  const { label, small = false } = props;
+
+  return (
+    <div className="itemized-component">
+      <div className={small ? "box-container box-container-small" : "box-container"}>
+        <span className="box" />
+      </div>
+      <div className={small ? "content content-small" : "content"}>
+        <span>{label}</span>
+      </div>
+    </div>
+  );
+}
+
+Itemized.propTypes = {
+  trKey: PropTypes.string,
+  label: PropTypes.string,
+  small: PropTypes.bool,
+};

src/components/shared/itemized/itemized.component.scss

@@ -0,0 +1,38 @@
+@import "../../../assets/scss/variables";
+
+.itemized-component {
+  display: flex;
+
+  .box-container {
+    width: 35px;
+    min-width: 35px;
+
+    .box {
+      display: inline-block !important;
+      width: 10px !important;
+      height: 10px !important;
+      min-width: 10px !important;
+      min-height: 10px !important;
+      max-width: 10px !important;
+      max-height: 10px !important;
+      background-color: $blue-100 !important;
+      box-shadow: none !important;
+      margin: 0 !important;
+      padding: 0 !important;
+    }
+
+    &.box-container-small {
+      width: 18px;
+      min-width: 18px;
+    }
+  }
+
+  .content {
+    font-family: $font-asap;
+    font-size: 20px;
+
+    &.content-small {
+      font-size: 18px;
+    }
+  }
+}

src/components/shared/service-range-box/service-range-box.js

@@ -0,0 +1,26 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+
+import "./service-range-box.scss";
+
+export class ServiceRangeBox extends Component {
+  static propTypes = {
+    img: PropTypes.string,
+    text: PropTypes.string,
+    description: PropTypes.string,
+  };
+
+  render() {
+    const { img, description, text } = this.props;
+
+    return (
+      <div className="box">
+        <div className="img-div">
+          <img src={img} />
+        </div>
+        <p>{text}</p>
+        {description && <p style={{ fontWeight: 500, fontSize: "16px", lineHeight: "18px" }}>{description}</p>}
+      </div>
+    );
+  }
+}

src/components/shared/service-range-box/service-range-box.scss

@@ -0,0 +1,80 @@
+@import "../../../assets/scss/variables";
+@import "../../../assets/scss/media-mixin";
+
+@include device-specific($media-phone) {
+  .box {
+    width: 100%;
+    margin: 5px !important;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+
+    p {
+      color: $black;
+      margin-top: 20px;
+      font-weight: 600;
+    }
+
+    img {
+      margin: 20px auto 0 auto;
+      width: 33%;
+      height: 33%;
+    }
+
+    .img-div {
+      width: 100%;
+
+    }
+  }
+}
+
+@include device-specific($media-md) {
+  .box {
+    width: 23%;
+    margin: 5px !important;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+
+    p {
+      color: $black;
+      margin-top: 20px;
+      font-weight: 600;
+    }
+
+    img {
+      margin: 20px auto 0 auto;
+      width: 33%;
+      height: 33%;
+    }
+
+    .img-div {
+      width: 100%;
+    }
+  }
+}
+
+@include device-specific($media-xl) {
+  .box {
+    width: 23%;
+    margin: 5px !important;
+    padding: 20px;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+
+    p {
+      color: $black;
+      margin-top: 20px;
+      font-weight: 600;
+    }
+
+    img {
+      margin: 20px auto 0 auto;
+      width: 33%;
+      height: 33%;
+    }
+
+    .img-div {
+      width: 100%;
+
+      img {
+        width: 27%;
+      }
+    }
+  }
+}

src/content/navbar/navbar-items.js

@@ -1,31 +1,35 @@
-import {BLOG_URL} from "../constants";
-
-export const navbarItems = t => [
-    {
-        url: "/business-apis",
-        title: t("navbar.business-apis"),
-        external: false
-    },
-    {
-        url: "/digital-platform",
-        title: t("navbar.digital-platform"),
-        external: false
-    },
-    {
-        url: "/partners",
-        title: t("navbar.partners"),
-        external: false
-    },
-    {
-        url: BLOG_URL,
-        title: t("navbar.blog"),
-        external: true
-    },
-    {
-        url: "#",
-        title: t("navbar.contact"),
-        external: false,
-        isButton: true
-    },
+import { BLOG_URL } from "../constants";
 
+export const navbarItems = (t) => [
+  {
+    url: "/business-apis",
+    title: t("navbar.business-apis"),
+    external: false,
+  },
+  {
+    url: "/digital-platform",
+    title: t("navbar.digital-platform"),
+    external: false,
+  },
+  {
+    url: "/ai",
+    title: t("navbar.ai"),
+    external: false,
+  },
+  {
+    url: "/partners",
+    title: t("navbar.partners"),
+    external: false,
+  },
+  {
+    url: BLOG_URL,
+    title: t("navbar.blog"),
+    external: true,
+  },
+  {
+    url: "#",
+    title: t("navbar.contact"),
+    external: false,
+    isButton: true,
+  },
 ];