diff --git a/.eslintrc.js b/.eslintrc.js index b79dc80..4462c4e 100644 --- a/.eslintrc.js +++ b/.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, + }, }; diff --git a/src/assets/images/ai/replatforming.svg b/src/assets/images/ai/replatforming.svg new file mode 100644 index 0000000..aed4ba4 --- /dev/null +++ b/src/assets/images/ai/replatforming.svg @@ -0,0 +1 @@ +Artboard 4 \ No newline at end of file diff --git a/src/assets/images/ai/stock-ai.jpg b/src/assets/images/ai/stock-ai.jpg new file mode 100644 index 0000000..5956f6e Binary files /dev/null and b/src/assets/images/ai/stock-ai.jpg differ diff --git a/src/assets/images/ai/stock-knowledge.jpg b/src/assets/images/ai/stock-knowledge.jpg new file mode 100644 index 0000000..004c22a Binary files /dev/null and b/src/assets/images/ai/stock-knowledge.jpg differ diff --git a/src/assets/images/ai/stock-smart-assistant.jpg b/src/assets/images/ai/stock-smart-assistant.jpg new file mode 100644 index 0000000..f922f5d Binary files /dev/null and b/src/assets/images/ai/stock-smart-assistant.jpg differ diff --git a/src/assets/images/ai/trans-products.svg b/src/assets/images/ai/trans-products.svg new file mode 100644 index 0000000..3f0d9a1 --- /dev/null +++ b/src/assets/images/ai/trans-products.svg @@ -0,0 +1 @@ +Artboard 3 \ No newline at end of file diff --git a/src/assets/images/ai/transformation.svg b/src/assets/images/ai/transformation.svg new file mode 100644 index 0000000..2fef62b --- /dev/null +++ b/src/assets/images/ai/transformation.svg @@ -0,0 +1 @@ +Artboard 2 \ No newline at end of file diff --git a/src/assets/scss/_variables.scss b/src/assets/scss/_variables.scss index bcfa56a..3d21b25 100644 --- a/src/assets/scss/_variables.scss +++ b/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; \ No newline at end of file diff --git a/src/components/shared/itemized/itemized.component.js b/src/components/shared/itemized/itemized.component.js new file mode 100644 index 0000000..66c0c14 --- /dev/null +++ b/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 ( +
+
+ +
+
+ {label} +
+
+ ); +} + +Itemized.propTypes = { + trKey: PropTypes.string, + label: PropTypes.string, + small: PropTypes.bool, +}; diff --git a/src/components/shared/itemized/itemized.component.scss b/src/components/shared/itemized/itemized.component.scss new file mode 100644 index 0000000..503545f --- /dev/null +++ b/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; + } + } +} \ No newline at end of file diff --git a/src/components/shared/service-range-box/service-range-box.js b/src/components/shared/service-range-box/service-range-box.js new file mode 100644 index 0000000..9c622fd --- /dev/null +++ b/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 ( +
+
+ +
+

{text}

+ {description &&

{description}

} +
+ ); + } +} diff --git a/src/components/shared/service-range-box/service-range-box.scss b/src/components/shared/service-range-box/service-range-box.scss new file mode 100644 index 0000000..d1064dd --- /dev/null +++ b/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%; + } + } + } +} \ No newline at end of file diff --git a/src/content/navbar/navbar-items.js b/src/content/navbar/navbar-items.js index a41ea97..5e5a8ff 100644 --- a/src/content/navbar/navbar-items.js +++ b/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, + }, ]; diff --git a/src/pages/ai/ai-page.scss b/src/pages/ai/ai-page.scss new file mode 100644 index 0000000..907db91 --- /dev/null +++ b/src/pages/ai/ai-page.scss @@ -0,0 +1,477 @@ +@import "../../assets/scss/variables"; +@import "../../assets/scss/media-mixin"; + +$pc-width: 60%; +$tablet-width: 80%; +$phone-width: 90%; + +.ai { + .header { + width: 100%; + padding-top: 40px; + padding-bottom: 40px; + background-color: $blue-300; + + h1 { + color: $white; + width: 60%; + margin: 0 auto 0 auto; + font-weight: 500; + } + + p { + color: $white; + width: 60%; + margin: 20px auto 0 auto; + } + } + + .arrow-header { + width: 0; + height: 0; + border-style: solid; + border-width: 0 100vw 240px 0; + border-color: transparent $blue-300 transparent transparent; + } + + .beige-arrow { + width: 0; + height: 0; + border-style: solid; + border-width: 0 100vw 240px 0; + border-color: transparent $beige transparent transparent; + } + + .beige-arrow-reversed { + width: 0; + height: 0; + border-style: solid; + border-width: 0 100vw 240px 0; + border-color: transparent $beige transparent transparent; + transform: rotate(180deg); + } + + .beige-content { + width: 100%; + background-color: $beige; + padding-left: 20%; + padding-right: 20%; + + .table-wrapper { + .use-case-table { + display: flex; + justify-content: space-between; + align-items: stretch; + border: 1px solid black; + + .content { + padding: 1rem; + text-align: left; + flex: 1; + } + + .table-separator { + width: 1px; + background-color: black; + } + + li { + font-size: 18px; + text-align: left; + list-style-position: outside; + margin-left: 1rem; + + &::marker { + color: $blue-300; + } + } + + ul { + flex: 1; + padding-left: 20px; + margin: 0; + } + } + + .table-end { + border: 1px solid black; + border-top: none; + font-size: 18px; + font-weight: 600; + padding: 0.5rem; + } + } + + + } + + .service-range { + color: $white; + + .content { + background-color: $white; + + h4 { + color: $blue-400; + font-weight: 600; + } + + .boxes-container { + display: flex; + justify-content: center; + flex-wrap: wrap; + } + + .normal-text-wrapper { + margin-top: 80px; + + .normal-text { + color: $black; + width: 60%; + margin: 20px auto 0 auto; + } + } + + .darker-text { + color: $blue-200; + width: 60%; + margin: 20px auto 0 auto; + font-size: 1.64rem; + line-height: 2.3rem; + } + + .highlighted-darker-text { + color: $blue-200; + font-weight: 600; + } + } + } + + .main-content { + display: flex; + justify-content: center; + + .index-content-component { + padding-top: 40px; + + .content-body { + width: $pc-width; + display: flex; + margin-left: -15px; + margin-right: -15px; + } + + .mobile-image { + display: none; + } + + .mobile-image-hidden { + display: block; + } + + .space-top { + margin-top: 100px; + } + + .items-margin-top { + margin-top: 40px; + } + + .title { + display: inline-block; + margin-bottom: 5px; + + .title-slim { + font-weight: 400; + } + } + + h2 { + color: $blue-400; + font-size: 32px; + font-weight: bold; + font-family: $font-rubik; + margin-bottom: 0; + } + + h3 { + color: $blue-400; + opacity: 0.8; + font-family: $font-asap; + font-weight: normal; + font-size: 32px; + margin-bottom: 30px; + } + + .title-underline { + height: 5px; + background: $white-blue-light-gradient; + } + + .image-subtitle { + font-family: $font-asap; + font-size: 16px; + font-style: italic; + color: $grey-300; + + } + + .points { + background-color: $beige; + } + + .points-title { + display: flex; + width: calc((100% - 60px) * 0.25); + margin-right: 30px; + + div { + color: $blue-100; + font-family: $font-asap; + font-style: normal; + font-weight: bold; + font-size: 40px; + margin-right: 8px; + } + + h2 { + color: $black !important; + font-size: 24px !important; + font-family: $font-rubik !important; + font-weight: normal !important; + padding-top: 12px; + } + } + + .points-body { + width: calc((100% - 60px) * 0.45); + margin-right: 30px; + + p { + padding-top: 12px; + } + } + + .points-items { + width: calc((100% - 60px) * 0.30); + padding-top: 12px; + font-size: 18px; + + * { + padding-left: 0; + padding-right: 0; + } + + .itemized-component { + margin-bottom: 25px; + } + } + + .link { + color: $blue-100; + font-weight: 600; + font-size: large; + } + } + } +} + + +@include device-specific($media-phone) { + .ai { + .header { + padding-top: 50px; + + h1 { + color: $white; + margin: 0 auto 0 auto; + font-weight: 500; + } + + p { + color: $white; + width: $phone-width; + margin: 20px auto 0 auto; + } + } + + .arrow-header { + border-width: 0 100vw 60px 0; + } + + .beige-arrow { + border-width: 0 100vw 60px 0; + } + + .beige-arrow-reversed { + border-width: 0 100vw 60px 0; + } + + .beige-content { + padding-left: 2rem; + padding-right: 2rem; + } + + .service-range { + .content { + .normal-text-wrapper { + margin-top: 80px; + + .normal-text { + color: $black; + width: 90%; + margin: 20px auto 0 auto; + } + } + + .darker-text { + color: $blue-200; + width: 90%; + margin: 20px auto 0 auto; + font-size: 1.64rem; + line-height: 2.3rem; + } + } + } + } + + .main-content { + display: flex; + justify-content: center; + + .index-content-component { + .content-body { + width: $phone-width; + flex-wrap: wrap; + display: flex; + margin-left: -15px; + margin-right: -15px; + + .mobile-image { + display: block; + } + + .mobile-image-hidden { + display: none; + } + } + + .space-top { + margin-top: 40px; + } + + .items-margin-top { + margin-top: 0; + } + + .points { + padding-left: 15px; + } + + .points-title { + display: flex; + width: 100%; + margin-right: 15px; + + div { + font-size: 40px; + margin-right: 8px; + } + + h2 { + font-size: 24px !important; + padding-top: 12px; + } + } + + .points-body { + width: 100%; + margin-right: 15px; + + p { + padding-top: 12px; + } + } + + .points-items { + width: 90%; + padding-top: 12px; + font-size: 18px; + + .row { + padding-left: 5px; + } + + .itemized-component { + margin-bottom: 25px; + } + } + + + } + } +} + +@include device-specific($media-md) { + .ai { + .header { + h1 { + color: $white; + width: 60%; + margin: 0 auto 0 auto; + font-weight: 500; + } + + p { + color: $white; + width: 60%; + margin: 20px auto 0 auto; + } + } + + .arrow-header { + border-width: 0 100vw 120px 0; + } + + .beige-arrow { + border-width: 0 100vw 120px 0; + } + + .beige-arrow-reversed { + border-width: 0 100vw 120px 0; + } + } + +} + +@include device-specific($media-xl) { + .ai { + .header { + h1 { + color: $white; + width: 60%; + margin: 0 auto 0 auto; + font-weight: 500; + } + + p { + color: $white; + width: 60%; + margin: 20px auto 0 auto; + } + } + + .arrow-header { + border-width: 0 100vw 240px 0; + } + + .beige-arrow { + border-width: 0 100vw 240px 0; + } + + .beige-arrow-reversed { + border-width: 0 100vw 240px 0; + } + } + +} \ No newline at end of file diff --git a/src/pages/ai/index.js b/src/pages/ai/index.js new file mode 100644 index 0000000..19a6fad --- /dev/null +++ b/src/pages/ai/index.js @@ -0,0 +1,252 @@ +import React, { Component } from "react"; +import PropTypes from "prop-types"; +import { translate } from "react-i18next"; +import { Helmet } from "react-helmet"; +import { Footer } from "../../components/shared/footer/footer"; +import { Col, Container, Row } from "reactstrap"; +import { ServiceRangeBox } from "../../components/shared/service-range-box/service-range-box"; +import { Itemized } from "../../components/shared/itemized/itemized.component"; + +import rangeReplatforming from "../../assets/images/ai/replatforming.svg"; +import rangeTransformation from "../../assets/images/ai/transformation.svg"; +import rangeTransProducts from "../../assets/images/ai/trans-products.svg"; +import stockAi from "../../assets/images/ai/stock-ai.jpg"; +import stockKnowledge from "../../assets/images/ai/stock-knowledge.jpg"; +import stockSmartAssistant from "../../assets/images/ai/stock-smart-assistant.jpg"; + +import "./ai-page.scss"; + +@translate("ai") +export default class ThanksPage extends Component { + static propTypes = { + t: PropTypes.func, + }; + + constructor(props) { + super(props); + } + + componentDidMount() {} + + render() { + const { t } = this.props; + return ( +
+ + +
+ +
+
+ +

{t("title")}

+

{t("block1")}

+

{t("block2")}

+ +
+
+ +
+ +
+ + +
+ +
+ + +
+ + + +
+ + +
+ +
+ + + +
+
+
+
+ + stock-ai-form + + +
+

{t("services.item1.title")}

+
+
+

{t("services.item1.subtitle")}

+

{t("services.item1.description")}

+
+ +
+ + + + + + +
+
+ + + + + + +
+ +
+ +
+
+ + stock-architecture + + + +

{t("services.item2.above-title")}

+
+

{t("services.item2.title")}

+
+
+

{t("services.item2.description")}

+

{t("services.item2.description2")}

+
+ +
+ + + + + + +
+
+ + + + + + +
+
+ + + +
+ +
+ + + stock-architecture + +
+
+
+ +
+
+
+ + stock-security + + +
+

{t("services.item3.title")}

+
+
+

{t("services.item3.subtitle")}

+

{t("services.item3.description")}

+

{t("services.item3.description2")}

+
+ +
+ + + + + + +
+
+ + + + + + +
+
+ + + + + + +
+ +
+ +
+
+
+
+ + +
+
+
+

{t("cta.title")}

+

{t("cta.subtitle")}

+
+
+
    +
  • {t("cta.table.left.item1")}
    • +
  • {t("cta.table.left.item2")}
    • +
  • {t("cta.table.left.item3")}
    • +
  • {t("cta.table.left.item4")}
    • +
  • {t("cta.table.left.item5")}
    • +
+
+
    +
  • {t("cta.table.right.item1")}
    • +
  • {t("cta.table.right.item2")}
    • +
  • {t("cta.table.right.item3")}
    • +
  • {t("cta.table.right.item4")}
    • +
  • {t("cta.table.right.item5")}
    • +
+
+

{t("cta.table.end")}

+
+
+
+
+ +
+
+ ); + } +} diff --git a/src/pages/index.js b/src/pages/index.js index 2f40597..e0f75fc 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -1,14 +1,14 @@ -import React, {Component} from "react"; -import {Helmet} from "react-helmet"; -import {translate} from "react-i18next"; +import React, { Component } from "react"; +import { Helmet } from "react-helmet"; +import { translate } from "react-i18next"; import PropType from "prop-types"; -import Link, {push} from "gatsby-link"; +import Link, { push } from "gatsby-link"; import "./index-page.scss"; import { - ArrowDividerComponent, - ReferencesComponent, - VideoPlayerComponent + ArrowDividerComponent, + ReferencesComponent, + VideoPlayerComponent, } from "../components/shared/export.shared.components"; import digitalPlatformImage from "../assets/images/digitalPlatform.svg"; import businessApisImage from "../assets/images/businessApis.svg"; @@ -22,46 +22,45 @@ import dukeAward from "../assets/images/duke-award.jpeg"; import euroCloud from "../assets/images/logo_Eurocloud_C.jpg"; import startupSlovenia from "../assets/images/startup-slovenia.png"; import euSkladRegionalniRazvoj from "../assets/images/EU-logo.png"; -import {BLOG_URL, EE_KUMULUZ_URL, IO_KUMULUZ_URL, SUNESIS_URL} from "../content/constants"; -import {digitalLandscapeCompetition} from "../content/index-page/digital-landscape-competition.content"; -import {AppNeedsComponent, DigitalPlatformComponent} from "../components/index-page/export"; -import {highlightsList} from "../content/index-page/highlights"; -import {Footer} from "../components/shared/footer/footer"; -import {CustomersSection} from "../components/index-page/customers-section/customers-section"; -import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"; -import {faCaretRight} from "@fortawesome/free-solid-svg-icons"; -import {GoogleAnalyticsService} from "../components/shared/google-analytics/google-analytics.service"; +import { BLOG_URL, EE_KUMULUZ_URL, IO_KUMULUZ_URL, SUNESIS_URL } from "../content/constants"; +import { digitalLandscapeCompetition } from "../content/index-page/digital-landscape-competition.content"; +import { AppNeedsComponent, DigitalPlatformComponent } from "../components/index-page/export"; +import { highlightsList } from "../content/index-page/highlights"; +import { Footer } from "../components/shared/footer/footer"; +import { CustomersSection } from "../components/index-page/customers-section/customers-section"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faCaretRight } from "@fortawesome/free-solid-svg-icons"; +import { GoogleAnalyticsService } from "../components/shared/google-analytics/google-analytics.service"; @translate("index") export default class IndexPage extends Component { + static propTypes = { + t: PropType.func, + i18n: PropType.object, + }; - static propTypes = { - t: PropType.func, - i18n: PropType.object + constructor(props) { + super(props); + this.state = { + lang: props.i18n.language, }; + } - constructor(props) { - super(props); - this.state = { - lang: props.i18n.language - }; - } + componentDidMount() { + GoogleAnalyticsService.registerPageView(); + } - componentDidMount() { - GoogleAnalyticsService.registerPageView(); - } + componentWillReceiveProps(newProps) { + this.setState({ ...this.state, lang: newProps.i18n.language }); + } - componentWillReceiveProps(newProps) { - this.setState({...this.state, lang: newProps.i18n.language}); - } + render() { + const { t } = this.props; - render() { - const {t} = this.props; - - return ( -
- - {/* + return ( +
+ + {/*
@@ -69,297 +68,289 @@ export default class IndexPage extends Component {
*/} -
-
-
-

-

-
-

- {t("header.subtitle")} -

-
+
+
+
+

+

+
+

{t("header.subtitle")}

+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
- -
-
-
- {t("header.tiles.left-tile.above-title")} -
-
- {t("header.tiles.left-tile.title")} -
-
- {t("header.tiles.left-tile.subtitle")} -
-
- - push("/business-apis")}> - {t("header.tiles.buttons.learn-more")} - - -
-
-
-
-
-
-
-
- -
-
-
- {t("header.tiles.right-tile.above-title")} -
-
- {t("header.tiles.right-tile.title")} -
-
- {t("header.tiles.right-tile.subtitle")} -
-
- - push("/digital-platform")}> - {t("header.tiles.buttons.learn-more")} - - -
-
-
-
-
-
+
+
{t("header.tiles.left-tile.above-title")}
+
{t("header.tiles.left-tile.title")}
+
{t("header.tiles.left-tile.subtitle")}
+
+ + push("/business-apis")}> + {t("header.tiles.buttons.learn-more")} + + +
+
-
-
-
-

- {t("content.title")} -

-
-
-

- {t("content.text")}  - - {t("content.blog-link")}... - -

-
-
- -
-
- -
+
+
+
+
+
+
+
{t("header.tiles.middle-tile.above-title")}
+
{t("header.tiles.middle-tile.title")}
+
{t("header.tiles.middle-tile.subtitle")}
+
+ + push("/business-apis")}> + {t("header.tiles.buttons.learn-more")} + + +
+
+
-
-
-
-

- {t("digitalLandscapeCompetition.title")} -

-
+
+
+
+
+
-
-
- {digitalLandscapeCompetition(t).map((comp, index) => ( -
-
- -
-
- {comp.title} -
-
- {comp.content} -
-
- ))} -
+
+
{t("header.tiles.right-tile.above-title")}
+
{t("header.tiles.right-tile.title")}
+
{t("header.tiles.right-tile.subtitle")}
+
+ push("/ai")}> + {t("header.tiles.buttons.learn-more")} + + +
+
- -
-
-
- -
-
-
- -
-
-
-

{t("bapis.title")}

-

- {t("bapis.subtitle")} -

-
- -
+
+
+
+
+
+
+
+

{t("content.title")}

+
+
+

+ {t("content.text")}  + + {t("content.blog-link")}... + +

+
+
+ +
+
+ +
+
+
+
+
+
+

{t("digitalLandscapeCompetition.title")}

+
+
+
+
+ {digitalLandscapeCompetition(t).map((comp, index) => ( +
+
+ +
+
{comp.title}
+
{comp.content}
+ ))} +
+
+
-
-
-
- -
-
-
- -
-
-
- -
-
- -
-
-
+
+
+
+ +
+
+
+ +
+
+
+

{t("bapis.title")}

+

{t("bapis.subtitle")}

+
+ +
+
-
-
-
- {highlightsList(t).map((highlight, index) => ( -
-
- -
-
- {highlight.content} -
-
- ))} -
-
-
-
-
-
-
- {t("awards.title")}: -
-
- - - -
-
-
-
+
+
+
+ +
+
+
+ +
+
+
+ +
+
+ +
+
+
+ +
+
+
+ {highlightsList(t).map((highlight, index) => ( +
+
+ +
+
{highlight.content}
+ ))} +
+
+
+
+
+
+
{t("awards.title")}:
+
+ + + +
+
+
+
+
-
-
-
- -
-
-
-
-

{t("other-products.title")}

-
-
-
- -
-
-
{t("other-products.tiles.first-tile.above-title")}
-

{t("other-products.tiles.first-tile.title")}

-

{t("other-products.tiles.first-tile.para")}

- -
-
-
-
- -
-
-
{t("other-products.tiles.second-tile.above-title")}
-

{t("other-products.tiles.second-tile.title")}

-

{t("other-products.tiles.second-tile.para")}

- -
-
-
-
- -
-
-
{t("other-products.tiles.third-tile.above-title")}
-

{t("other-products.tiles.third-tile.title")}

-

{t("other-products.tiles.third-tile.para")}

- -
-
-
-
-
-
-
- -
+
+
+
+ +
+
+
+
+

{t("other-products.title")}

+
+
+
+ +
+
+
{t("other-products.tiles.first-tile.above-title")}
+

{t("other-products.tiles.first-tile.title")}

+

{t("other-products.tiles.first-tile.para")}

+ +
- - - -
-
-
+
+
+ +
+
+
{t("other-products.tiles.second-tile.above-title")}
+

{t("other-products.tiles.second-tile.title")}

+

{t("other-products.tiles.second-tile.para")}

+ +
- -
-
-
- -
+
+
+ +
+
+
{t("other-products.tiles.third-tile.above-title")}
+

{t("other-products.tiles.third-tile.title")}

+

{t("other-products.tiles.third-tile.para")}

+ +
+
+
+
+
+
+ +
+
+
+ + -