Landing page

<body class="kx-page">
    <div class="kx-page__canvas kx-flex kx-justify-content-start kx-align-items-start">

        <div class="kx-page__header kx-flex">
            <header class="kx-header kx-flex kx-align-items-center" role="banner">
                <button class="kx-btn kx-hamburger kx-hamburger--spin kx-header__nav-toggle kx-js-header__nav-toggle">
    <span class="kx-hamburger__inner">
        <span class="kx-hamburger__icon"></span>
    </span>
    <span class="kx-hamburger__txt kx-is-vishidden">Menu</span>
</button>
                <a class="kx-header__title" href="#">
            My Company
        </a>
                <div class="kx-header__tools">
                    <!-- BUTTON-GROUP Component -->
                    <div class="kx-btngroup kx-flex kx-flex-wrap kx-btngroup--fit-tight kx-ui" role="group" aria-label="Tools and settings">
                        <!-- DROPDOWN Component -->
                        <div class="kx-dropdown" role="group">
                            <button id="--38038" class="kx-dropdown__toggle kx-btn kx-btn--size-base kx-btn--icon kx-js-dropdown__toggle" aria-haspopup="true" aria-expanded="false">
        <span class="kx-btn__inner">
                <!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#user"></use>
    </svg>
</i>
                <span class="kx-btn__txt kx-is-vishidden">User</span>
                </span>
    </button>
                            <div class="kx-dropdown__menu kx-dropdown__menu--align-right kx-js-dropdown__menu" aria-labelledby="--38038">
                                <ul class="kx-dropdown__list">
                                    <li class="kx-dropdown__item">
                                        <a class="kx-dropdown__link" href="#">
                            <span class="kx-dropdown__item__txt">My profile</span>
                            </a>
                                    </li>
                                    <li class="kx-dropdown__item">
                                        <a class="kx-dropdown__link" href="#">
                            <span class="kx-dropdown__item__txt">Notification settings</span>
                            </a>
                                    </li>
                                    <li class="kx-dropdown__item">
                                        <a class="kx-dropdown__link" href="#">
                            <span class="kx-dropdown__item__txt">Security</span>
                            </a>
                                    </li>
                                    <li class="kx-dropdown__item">
                                        <a class="kx-dropdown__link" href="#">
                            <span class="kx-dropdown__item__txt">Usage</span>
                            </a>
                                    </li>
                                    <li class="kx-divider kx-divider--size-mini" aria-hidden="true" tabindex="-1"></li>
                                    <li class="kx-dropdown__item">
                                        <a class="kx-dropdown__link" href="#">
                            <span class="kx-dropdown__item__txt">Logout</span>
                            </a>
                                    </li>
                                </ul>
                            </div>
                        </div>

                        <!-- DROPDOWN Component -->
                        <div class="kx-dropdown" role="group">
                            <button id="--99785" class="kx-dropdown__toggle kx-btn kx-btn--size-base kx-btn--icon kx-js-dropdown__toggle" aria-haspopup="true" aria-expanded="false">
        <span class="kx-btn__inner">
                <!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#cog"></use>
    </svg>
</i>
                <span class="kx-btn__txt kx-is-vishidden">Settings</span>
                </span>
    </button>
                            <div class="kx-dropdown__menu kx-dropdown__menu--align-right kx-js-dropdown__menu" aria-labelledby="--99785">
                                <ul class="kx-dropdown__list">
                                    <li class="kx-dropdown__item">
                                        <a class="kx-dropdown__link" href="#">
                            <span class="kx-dropdown__item__txt">Menu Editor</span>
                            </a>
                                    </li>
                                    <li class="kx-dropdown__item">
                                        <a class="kx-dropdown__link" href="#">
                            <span class="kx-dropdown__item__txt">Unit of Measure</span>
                            </a>
                                    </li>
                                </ul>
                            </div>
                        </div>

                        <!-- DROPDOWN Component -->
                        <div class="kx-dropdown" role="group">
                            <button id="--39329" class="kx-dropdown__toggle kx-btn kx-btn--size-base kx-js-dropdown__toggle" aria-haspopup="true" aria-expanded="false">
        <span class="kx-btn__inner">
                <!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#dots-horizontal"></use>
    </svg>
</i>
                <span class="kx-btn__txt">More</span>
                </span>
    </button>
                            <div class="kx-dropdown__menu kx-dropdown__menu--align-right kx-js-dropdown__menu" aria-labelledby="--39329">
                                <ul class="kx-dropdown__list">
                                    <li class="kx-dropdown__item">
                                        <a class="kx-dropdown__link" href="#">
                            <span class="kx-dropdown__item__txt">Support</span>
                            </a>
                                    </li>
                                    <li class="kx-dropdown__item">
                                        <a class="kx-dropdown__link" href="#">
                            <span class="kx-dropdown__item__txt">Give feedback</span>
                            </a>
                                    </li>
                                    <li class="kx-dropdown__item">
                                        <a class="kx-dropdown__link" href="#">
                            <span class="kx-dropdown__item__txt">Community</span>
                            </a>
                                    </li>
                                    <li class="kx-dropdown__item">
                                        <a class="kx-dropdown__link" href="#">
                            <span class="kx-dropdown__item__txt">Privacy policy</span>
                            </a>
                                    </li>
                                    <li class="kx-dropdown__item">
                                        <a class="kx-dropdown__link" href="#">
                            <span class="kx-dropdown__item__txt">About Kognifai</span>
                            </a>
                                    </li>
                                </ul>
                            </div>
                        </div>

                    </div>
                </div>
            </header>
        </div>

        <div class="kx-page__nav">

            <nav class="kx-nav kx-nav--main" aria-labelledby="--12737">
                <div class="kx-nav__search">
                    <div class="kx-inputgroup">
                        <!-- FIELD Component -->
                        <div class="kx-form__element">
                            <input class="kx-field kx-field--size-base" id="--15480" type="search" placeholder="Find component" />
                            <label class="kx-label kx-is-vishidden" for="--15480">
        Find Component
    </label>
                        </div>
                        <!-- BUTTON Component -->
                        <button class="kx-btn kx-btn--skin-primary kx-btn--size-base kx-btn--icon" aria-label="Search">
    <span class="kx-btn__inner">
        <!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#search"></use>
    </svg>
</i>
        <span class="kx-btn__txt kx-is-vishidden">Search</span>
    </span>
</button>
                    </div>
                </div>
                <h2 class="kx-nav__header kx-is-vishidden" id="--12737">Main Navigation</h2>
                <ul class="kx-tree kx-is-root">
                    <li class="kx-tree__item kx-is-node kx-is-open" data-treedepth="0">
                        <a href="#" class="kx-tree__link">
                            <!-- ICON Component -->
                            <i class="kx-icon kx-icon--size-tiny kx-tree__caret">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
    </svg>
</i>
                            <!-- ICON Component -->
                            <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                            <span class="kx-tree__link__txt">Link level 0</span>
                        </a>
                        <ul class="kx-tree">
                            <li class="kx-tree__item kx-is-node kx-is-open" data-treedepth="1">
                                <a href="#" class="kx-tree__link">
                                    <!-- ICON Component -->
                                    <i class="kx-icon kx-icon--size-tiny kx-tree__caret">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
    </svg>
</i>
                                    <!-- ICON Component -->
                                    <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                    <span class="kx-tree__link__txt">Link level 1</span>
                                </a>
                                <ul class="kx-tree">
                                    <li class="kx-tree__item kx-is-node kx-is-open" data-treedepth="2">
                                        <a href="#" class="kx-tree__link">
                                            <!-- ICON Component -->
                                            <i class="kx-icon kx-icon--size-tiny kx-tree__caret">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
    </svg>
</i>
                                            <!-- ICON Component -->
                                            <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                            <span class="kx-tree__link__txt">Link level 2</span>
                                        </a>
                                        <ul class="kx-tree">
                                            <li class="kx-tree__item kx-is-leaf" data-treedepth="3">
                                                <a href="#" class="kx-tree__link">
                                                    <!-- ICON Component -->
                                                    <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                                    <span class="kx-tree__link__txt">Link level 3</span>
                                                </a>
                                            </li>
                                            <li class="kx-tree__item kx-is-leaf" data-treedepth="3">
                                                <a href="#" class="kx-tree__link">
                                                    <!-- ICON Component -->
                                                    <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                                    <span class="kx-tree__link__txt">Link level 3</span>
                                                </a>
                                            </li>
                                            <li class="kx-tree__item kx-is-leaf" data-treedepth="3">
                                                <a href="#" class="kx-tree__link">
                                    <span class="kx-tree__link__txt">Link level 3</span>
                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="kx-tree__item kx-is-node" data-treedepth="2">
                                        <a href="#" class="kx-tree__link">
                                            <!-- ICON Component -->
                                            <i class="kx-icon kx-icon--size-tiny kx-tree__caret">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
    </svg>
</i>
                                            <!-- ICON Component -->
                                            <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                            <span class="kx-tree__link__txt">Link level 2</span>
                                        </a>
                                        <ul class="kx-tree">
                                            <li class="kx-tree__item kx-is-leaf" data-treedepth="3">
                                                <a href="#" class="kx-tree__link">
                                                    <!-- ICON Component -->
                                                    <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                                    <span class="kx-tree__link__txt">Link level 3</span>
                                                </a>
                                            </li>
                                            <li class="kx-tree__item kx-is-leaf" data-treedepth="3">
                                                <a href="#" class="kx-tree__link">
                                                    <!-- ICON Component -->
                                                    <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                                    <span class="kx-tree__link__txt">Link level 3</span>
                                                </a>
                                            </li>
                                            <li class="kx-tree__item kx-is-leaf" data-treedepth="3">
                                                <a href="#" class="kx-tree__link">
                                    <span class="kx-tree__link__txt">Link level 3</span>
                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="kx-tree__item kx-is-node" data-treedepth="2">
                                        <a href="#" class="kx-tree__link">
                                            <!-- ICON Component -->
                                            <i class="kx-icon kx-icon--size-tiny kx-tree__caret">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
    </svg>
</i>
                                            <!-- ICON Component -->
                                            <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                            <span class="kx-tree__link__txt">Link level 2</span>
                                        </a>
                                        <ul class="kx-tree">
                                            <li class="kx-tree__item kx-is-leaf" data-treedepth="3">
                                                <a href="#" class="kx-tree__link">
                                                    <!-- ICON Component -->
                                                    <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                                    <span class="kx-tree__link__txt">Link level 3</span>
                                                </a>
                                            </li>
                                            <li class="kx-tree__item kx-is-leaf" data-treedepth="3">
                                                <a href="#" class="kx-tree__link">
                                                    <!-- ICON Component -->
                                                    <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                                    <span class="kx-tree__link__txt">Link level 3</span>
                                                </a>
                                            </li>
                                            <li class="kx-tree__item kx-is-leaf" data-treedepth="3">
                                                <a href="#" class="kx-tree__link">
                                    <span class="kx-tree__link__txt">Link level 3</span>
                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li class="kx-tree__item kx-is-node" data-treedepth="1">
                                <a href="#" class="kx-tree__link">
                                    <!-- ICON Component -->
                                    <i class="kx-icon kx-icon--size-tiny kx-tree__caret">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
    </svg>
</i>
                                    <!-- ICON Component -->
                                    <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                    <span class="kx-tree__link__txt">Link level 1</span>
                                </a>
                                <ul class="kx-tree">
                                    <li class="kx-tree__item kx-is-node kx-is-open" data-treedepth="2">
                                        <a href="#" class="kx-tree__link">
                                            <!-- ICON Component -->
                                            <i class="kx-icon kx-icon--size-tiny kx-tree__caret">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
    </svg>
</i>
                                            <!-- ICON Component -->
                                            <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                            <span class="kx-tree__link__txt">Link level 2</span>
                                        </a>
                                        <ul class="kx-tree">
                                            <li class="kx-tree__item kx-is-leaf" data-treedepth="3">
                                                <a href="#" class="kx-tree__link">
                                                    <!-- ICON Component -->
                                                    <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                                    <span class="kx-tree__link__txt">Link level 3</span>
                                                </a>
                                            </li>
                                            <li class="kx-tree__item kx-is-leaf" data-treedepth="3">
                                                <a href="#" class="kx-tree__link">
                                                    <!-- ICON Component -->
                                                    <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                                    <span class="kx-tree__link__txt">Link level 3</span>
                                                </a>
                                            </li>
                                            <li class="kx-tree__item kx-is-leaf" data-treedepth="3">
                                                <a href="#" class="kx-tree__link">
                                    <span class="kx-tree__link__txt">Link level 3</span>
                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="kx-tree__item kx-is-node" data-treedepth="2">
                                        <a href="#" class="kx-tree__link">
                                            <!-- ICON Component -->
                                            <i class="kx-icon kx-icon--size-tiny kx-tree__caret">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
    </svg>
</i>
                                            <!-- ICON Component -->
                                            <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                            <span class="kx-tree__link__txt">Link level 2</span>
                                        </a>
                                        <ul class="kx-tree">
                                            <li class="kx-tree__item kx-is-leaf" data-treedepth="3">
                                                <a href="#" class="kx-tree__link">
                                                    <!-- ICON Component -->
                                                    <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                                    <span class="kx-tree__link__txt">Link level 3</span>
                                                </a>
                                            </li>
                                            <li class="kx-tree__item kx-is-leaf" data-treedepth="3">
                                                <a href="#" class="kx-tree__link">
                                                    <!-- ICON Component -->
                                                    <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                                    <span class="kx-tree__link__txt">Link level 3</span>
                                                </a>
                                            </li>
                                            <li class="kx-tree__item kx-is-leaf" data-treedepth="3">
                                                <a href="#" class="kx-tree__link">
                                    <span class="kx-tree__link__txt">Link level 3</span>
                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="kx-tree__item kx-is-node" data-treedepth="2">
                                        <a href="#" class="kx-tree__link">
                                            <!-- ICON Component -->
                                            <i class="kx-icon kx-icon--size-tiny kx-tree__caret">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
    </svg>
</i>
                                            <!-- ICON Component -->
                                            <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                            <span class="kx-tree__link__txt">Link level 2</span>
                                        </a>
                                        <ul class="kx-tree">
                                            <li class="kx-tree__item kx-is-leaf" data-treedepth="3">
                                                <a href="#" class="kx-tree__link">
                                                    <!-- ICON Component -->
                                                    <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                                    <span class="kx-tree__link__txt">Link level 3</span>
                                                </a>
                                            </li>
                                            <li class="kx-tree__item kx-is-leaf" data-treedepth="3">
                                                <a href="#" class="kx-tree__link">
                                                    <!-- ICON Component -->
                                                    <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                                    <span class="kx-tree__link__txt">Link level 3</span>
                                                </a>
                                            </li>
                                            <li class="kx-tree__item kx-is-leaf" data-treedepth="3">
                                                <a href="#" class="kx-tree__link">
                                    <span class="kx-tree__link__txt">Link level 3</span>
                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li class="kx-tree__item kx-is-node" data-treedepth="1">
                                <a href="#" class="kx-tree__link">
                                    <!-- ICON Component -->
                                    <i class="kx-icon kx-icon--size-tiny kx-tree__caret">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
    </svg>
</i>
                                    <!-- ICON Component -->
                                    <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                    <span class="kx-tree__link__txt">Link level 1</span>
                                </a>
                                <ul class="kx-tree">
                                    <li class="kx-tree__item kx-is-node kx-is-open" data-treedepth="2">
                                        <a href="#" class="kx-tree__link">
                                            <!-- ICON Component -->
                                            <i class="kx-icon kx-icon--size-tiny kx-tree__caret">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
    </svg>
</i>
                                            <!-- ICON Component -->
                                            <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                            <span class="kx-tree__link__txt">Link level 2</span>
                                        </a>
                                        <ul class="kx-tree">
                                            <li class="kx-tree__item kx-is-leaf" data-treedepth="3">
                                                <a href="#" class="kx-tree__link">
                                                    <!-- ICON Component -->
                                                    <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                                    <span class="kx-tree__link__txt">Link level 3</span>
                                                </a>
                                            </li>
                                            <li class="kx-tree__item kx-is-leaf" data-treedepth="3">
                                                <a href="#" class="kx-tree__link">
                                                    <!-- ICON Component -->
                                                    <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                                    <span class="kx-tree__link__txt">Link level 3</span>
                                                </a>
                                            </li>
                                            <li class="kx-tree__item kx-is-leaf" data-treedepth="3">
                                                <a href="#" class="kx-tree__link">
                                    <span class="kx-tree__link__txt">Link level 3</span>
                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="kx-tree__item kx-is-node" data-treedepth="2">
                                        <a href="#" class="kx-tree__link">
                                            <!-- ICON Component -->
                                            <i class="kx-icon kx-icon--size-tiny kx-tree__caret">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
    </svg>
</i>
                                            <!-- ICON Component -->
                                            <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                            <span class="kx-tree__link__txt">Link level 2</span>
                                        </a>
                                        <ul class="kx-tree">
                                            <li class="kx-tree__item kx-is-leaf" data-treedepth="3">
                                                <a href="#" class="kx-tree__link">
                                                    <!-- ICON Component -->
                                                    <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                                    <span class="kx-tree__link__txt">Link level 3</span>
                                                </a>
                                            </li>
                                            <li class="kx-tree__item kx-is-leaf" data-treedepth="3">
                                                <a href="#" class="kx-tree__link">
                                                    <!-- ICON Component -->
                                                    <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                                    <span class="kx-tree__link__txt">Link level 3</span>
                                                </a>
                                            </li>
                                            <li class="kx-tree__item kx-is-leaf" data-treedepth="3">
                                                <a href="#" class="kx-tree__link">
                                    <span class="kx-tree__link__txt">Link level 3</span>
                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="kx-tree__item kx-is-node" data-treedepth="2">
                                        <a href="#" class="kx-tree__link">
                                            <!-- ICON Component -->
                                            <i class="kx-icon kx-icon--size-tiny kx-tree__caret">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
    </svg>
</i>
                                            <!-- ICON Component -->
                                            <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                            <span class="kx-tree__link__txt">Link level 2</span>
                                        </a>
                                        <ul class="kx-tree">
                                            <li class="kx-tree__item kx-is-leaf" data-treedepth="3">
                                                <a href="#" class="kx-tree__link">
                                                    <!-- ICON Component -->
                                                    <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                                    <span class="kx-tree__link__txt">Link level 3</span>
                                                </a>
                                            </li>
                                            <li class="kx-tree__item kx-is-leaf" data-treedepth="3">
                                                <a href="#" class="kx-tree__link">
                                                    <!-- ICON Component -->
                                                    <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                                    <span class="kx-tree__link__txt">Link level 3</span>
                                                </a>
                                            </li>
                                            <li class="kx-tree__item kx-is-leaf" data-treedepth="3">
                                                <a href="#" class="kx-tree__link">
                                    <span class="kx-tree__link__txt">Link level 3</span>
                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li class="kx-tree__item kx-is-node" data-treedepth="1">
                                <a href="#" class="kx-tree__link">
                                    <!-- ICON Component -->
                                    <i class="kx-icon kx-icon--size-tiny kx-tree__caret">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
    </svg>
</i>
                                    <!-- ICON Component -->
                                    <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                    <span class="kx-tree__link__txt">Link level 1</span>
                                </a>
                                <ul class="kx-tree">
                                    <li class="kx-tree__item kx-is-node kx-is-open" data-treedepth="2">
                                        <a href="#" class="kx-tree__link">
                                            <!-- ICON Component -->
                                            <i class="kx-icon kx-icon--size-tiny kx-tree__caret">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
    </svg>
</i>
                                            <!-- ICON Component -->
                                            <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                            <span class="kx-tree__link__txt">Link level 2</span>
                                        </a>
                                        <ul class="kx-tree">
                                            <li class="kx-tree__item kx-is-leaf" data-treedepth="3">
                                                <a href="#" class="kx-tree__link">
                                                    <!-- ICON Component -->
                                                    <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                                    <span class="kx-tree__link__txt">Link level 3</span>
                                                </a>
                                            </li>
                                            <li class="kx-tree__item kx-is-leaf" data-treedepth="3">
                                                <a href="#" class="kx-tree__link">
                                                    <!-- ICON Component -->
                                                    <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                                    <span class="kx-tree__link__txt">Link level 3</span>
                                                </a>
                                            </li>
                                            <li class="kx-tree__item kx-is-leaf" data-treedepth="3">
                                                <a href="#" class="kx-tree__link">
                                    <span class="kx-tree__link__txt">Link level 3</span>
                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="kx-tree__item kx-is-node" data-treedepth="2">
                                        <a href="#" class="kx-tree__link">
                                            <!-- ICON Component -->
                                            <i class="kx-icon kx-icon--size-tiny kx-tree__caret">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
    </svg>
</i>
                                            <!-- ICON Component -->
                                            <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                            <span class="kx-tree__link__txt">Link level 2</span>
                                        </a>
                                        <ul class="kx-tree">
                                            <li class="kx-tree__item kx-is-leaf" data-treedepth="3">
                                                <a href="#" class="kx-tree__link">
                                                    <!-- ICON Component -->
                                                    <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                                    <span class="kx-tree__link__txt">Link level 3</span>
                                                </a>
                                            </li>
                                            <li class="kx-tree__item kx-is-leaf" data-treedepth="3">
                                                <a href="#" class="kx-tree__link">
                                                    <!-- ICON Component -->
                                                    <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                                    <span class="kx-tree__link__txt">Link level 3</span>
                                                </a>
                                            </li>
                                            <li class="kx-tree__item kx-is-leaf" data-treedepth="3">
                                                <a href="#" class="kx-tree__link">
                                    <span class="kx-tree__link__txt">Link level 3</span>
                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="kx-tree__item kx-is-node" data-treedepth="2">
                                        <a href="#" class="kx-tree__link">
                                            <!-- ICON Component -->
                                            <i class="kx-icon kx-icon--size-tiny kx-tree__caret">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
    </svg>
</i>
                                            <!-- ICON Component -->
                                            <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                            <span class="kx-tree__link__txt">Link level 2</span>
                                        </a>
                                        <ul class="kx-tree">
                                            <li class="kx-tree__item kx-is-leaf" data-treedepth="3">
                                                <a href="#" class="kx-tree__link">
                                                    <!-- ICON Component -->
                                                    <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                                    <span class="kx-tree__link__txt">Link level 3</span>
                                                </a>
                                            </li>
                                            <li class="kx-tree__item kx-is-leaf" data-treedepth="3">
                                                <a href="#" class="kx-tree__link">
                                                    <!-- ICON Component -->
                                                    <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
                                                    <span class="kx-tree__link__txt">Link level 3</span>
                                                </a>
                                            </li>
                                            <li class="kx-tree__item kx-is-leaf" data-treedepth="3">
                                                <a href="#" class="kx-tree__link">
                                    <span class="kx-tree__link__txt">Link level 3</span>
                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </div>

        <div class="kx-page__main">
            <main class="kx-main" role="main">

                <button class="kx-page__overlay">
                    <span class="kx-is-vishidden">Close</span>
                </button>

                <div class="kx-page__content">

                    <div class="kx-hero kx-hero--50 kx-objectfit">
                        <picture class="kx-hero__poster">
                            <source srcset="../../assets/img/content/1920x960(2_1)-wave.jpg" media="(min-width: 1920px)">
                            <source srcset="../../assets/img/content/1600x800(2_1)-wave.jpg" media="(min-width: 1600px)">
                            <source srcset="../../assets/img/content/1280x853(3_2)-wave.jpg" media="(min-width: 1280px)">
                            <source srcset="../../assets/img/content/1024x683(3_2)-wave.jpg" media="(min-width: 1024px)">
                            <source srcset="../../assets/img/content/800x800(1_1)-wave.jpg" media="(min-width: 800px)">
                            <source srcset="../../assets/img/content/600x800(3_4)-wave.jpg" media="(min-width: 600px)">
                            <source srcset="../../assets/img/content/480x640(3_2)-wave.jpg" media="(min-width: 480px)">
                            <img class="kx-hero__img kx-objectfit__img" src="../../assets/img/content/1600x800(2_1)-wave.jpg" data-fallback="../../assets/img/content/1600x800(2_1)-wave.jpg" alt="Alternative text">
                        </picture>
                        <div class="kx-hero__content">
                            <div class="kx-hero__content__item">
                                <div class="kx-container kx-container--tab-m kx-mx--auto kx-txt-center">
                                    <h1 class="kx-hero__title">
                                        Developers
                                    </h1>

                                    <p class="kx-hero__lead">Develop. Distribute. Communicate</p>

                                    <!-- LINK AS BUTTON Component -->
                                    <a class="kx-btn kx-btn--skin-primary kx-btn--size-large kx-hero__cta" href="#">
    <span class="kx-btn__inner">
        <span class="kx-btn__txt">Get Started</span>
    </span>
</a>

                                </div>
                            </div>
                        </div>
                    </div>

                    <section class="kx-py--large kx-pt--xxlarge@tab-m kx-pb--xlarge@tab-m">
                        <div class="kx-container kx-container--tab-m kx-mx--auto kx-center">
                            <h2>About kognifai Developers</h2>
                            <p>Here you will find information, instructions and guidelines that will help you build high quality applications and solutions, bringing out the value of your business.</p>
                            <p>The Application Framework, Global System Tools and IoT Services provide powerful and flexible capabilities for reading, presenting and analyzing asset performance data between remote locations in a secure environment.</p>
                        </div>
                    </section>

                    <section class="kx-py--large kx-py--xlarge@tab-m">
                        <div class="kx-container kx-container--ltp-s kx-mx--auto">
                            <h2 class="kx-center kx-is-vishidden">Get started</h2>
                            <div class="kx-row kx-row--gutters kx-align-items-stretch">
                                <div class="kx-col kx-col--12 kx-col--4@tab-m">
                                    <div class="kx-pb--base kx-px--large@tab-m kx-center">
                                        <h3>Creating Applications</h3>
                                        <p>A quick introduction of the platform architecture and it services and help you set up your development environment.</p>
                                    </div>
                                </div>
                                <div class="kx-col kx-col--12 kx-col--4@tab-m">
                                    <div class="kx-pb--base kx-px--large@tab-m kx-center">
                                        <h3>IoT Platform</h3>
                                        <p>Data Management, Analytics and IoT Platform capabilities.</p>
                                    </div>
                                </div>
                                <div class="kx-col kx-col--12 kx-col--4@tab-m">
                                    <div class="kx-pb--base kx-px--large@tab-m kx-center">
                                        <h3>Secure Connectivity</h3>
                                        <p>A high-level introduction to the globally distributed and secure network.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>

                    <section class="kx-py--large kx-py--xlarge@tab-m">
                        <div class="kx-container kx-container--ltp-s kx-mx--auto">
                            <div class="kx-row kx-align-items-stretch">

                                <div class="kx-col kx-col--12 kx-col--4@tab-s kx-odd">
                                    <a href="#" class="kx-topictile">
    <span class="kx-topictile__title kx-txt-center">Creating Applications</span>
    <img class="kx-topictile__img" src="/assets/img/icons/industries/maritime-offshore-white.svg" alt="Alternative text">
</a>
                                </div>

                                <div class="kx-col kx-col--12 kx-col--4@tab-s kx-even">
                                    <a href="#" class="kx-topictile">
    <span class="kx-topictile__title kx-txt-center">IoT Platform</span>
    <img class="kx-topictile__img" src="/assets/img/icons/industries/subsea-white.svg" alt="Alternative text">
</a>
                                </div>

                                <div class="kx-col kx-col--12 kx-col--4@tab-s kx-odd">
                                    <a href="#" class="kx-topictile">
    <span class="kx-topictile__title kx-txt-center">Secure Connectivity</span>
    <img class="kx-topictile__img" src="/assets/img/icons/industries/fishery-white.svg" alt="Alternative text">
</a>
                                </div>

                            </div>
                        </div>
                    </section>

                    <section class="kx-py--large kx-py--xlarge@tab-m">
                        <div class="kx-container kx-container--tab-l kx-mx--auto">
                            <h2 class="kx-center">Explore kognifai</h2>
                            <img src="/assets/img/content/explore-kognifai-diagram.png" class="kx-py--large" alt="Diagram over kognifai">
                        </div>
                        <div class="kx-container kx-container--ltp-s kx-mx--auto">
                            <div class="kx-row kx-row--gutters kx-align-items-stretch">

                                <div class="kx-col kx-col--12 kx-col--6@tab-m kx-col--4@ltp-s">
                                    <div class="kx-card kx-card--skin-default">
                                        <header class="kx-card__header">
                                            <h3 class="kx-card__title"><a class="kx-card__title-link" href="#">Application Framework</a></h3>
                                        </header>
                                        <div class="kx-card__body">
                                            <p>Application framework provides components and services that help developers quickly and easily build secure applications and widgets. Use the articles in this section to start building on the digital platform.</p>
                                        </div>
                                        <footer class="kx-card__footer">
                                            <div class="kx-card__tags">
                                                <!-- ICON Component -->
                                                <i class="kx-icon kx-icon--size-small">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#bookmark"></use>
    </svg>
</i>
                                                <ul class="kx-card__taglist">
                                                    <li class="kx-card__tagitem"><span>Utilities</span></li>
                                                    <li class="kx-card__tagitem"><span>Smart Grid</span></li>
                                                    <li class="kx-card__tagitem"><span>Smart Metering</span></li>
                                                    <li class="kx-card__tagitem"><span>Smart City</span></li>
                                                    <li class="kx-card__tagitem"><span>Power Grid</span></li>
                                                </ul>
                                            </div>
                                            <!-- LINK AS BUTTON Component -->
                                            <a class="kx-btn kx-btn--skin-flat kx-btn--size-base kx-card__cta" href="#">
    <span class="kx-btn__inner">
        <span class="kx-btn__txt">Learn More</span>
    </span>
</a>
                                        </footer>
                                    </div>
                                </div>

                                <div class="kx-col kx-col--12 kx-col--6@tab-m kx-col--4@ltp-s">
                                    <div class="kx-card kx-card--skin-default">
                                        <header class="kx-card__header">
                                            <h3 class="kx-card__title"><a class="kx-card__title-link" href="#">Visualization</a></h3>
                                        </header>
                                        <div class="kx-card__body">
                                            <p>Advanced 3D visualization capabilities such as Virtual Reality, Augmented Reality and Graphical Information System capabilities for apps and solutions developed on the kognifai platform.</p>
                                        </div>
                                        <footer class="kx-card__footer">
                                            <div class="kx-card__tags">
                                                <!-- ICON Component -->
                                                <i class="kx-icon kx-icon--size-small">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#bookmark"></use>
    </svg>
</i>
                                                <ul class="kx-card__taglist">
                                                    <li class="kx-card__tagitem"><span>Maritime</span></li>
                                                    <li class="kx-card__tagitem"><span>Subsea Performance</span></li>
                                                </ul>
                                            </div>
                                            <!-- LINK AS BUTTON Component -->
                                            <a class="kx-btn kx-btn--skin-flat kx-btn--size-base kx-card__cta" href="#">
    <span class="kx-btn__inner">
        <span class="kx-btn__txt">Learn More</span>
    </span>
</a>
                                        </footer>
                                    </div>
                                </div>

                                <div class="kx-col kx-col--12 kx-col--6@tab-m kx-col--4@ltp-s">
                                    <div class="kx-card kx-card--skin-default">
                                        <header class="kx-card__header">
                                            <h3 class="kx-card__title"><a class="kx-card__title-link" href="#">Developers.kognif.ai</a></h3>
                                        </header>
                                        <div class="kx-card__body">
                                            <p>An open ecosystem and community providing detailed insight, support and services for developers on the kognifai platform and on Kongsberg solutions.</p>
                                        </div>
                                        <footer class="kx-card__footer">
                                            <!-- LINK AS BUTTON Component -->
                                            <a class="kx-btn kx-btn--skin-flat kx-btn--size-base kx-card__cta" href="#">
    <span class="kx-btn__inner">
        <span class="kx-btn__txt">Learn More</span>
    </span>
</a>
                                        </footer>
                                    </div>
                                </div>

                                <div class="kx-col kx-col--12 kx-col--6@tab-m kx-col--4@ltp-s">
                                    <div class="kx-card kx-card--skin-default">
                                        <header class="kx-card__header">
                                            <h3 class="kx-card__title"><a class="kx-card__title-link" href="#">Advanced Analytics</a></h3>
                                        </header>
                                        <div class="kx-card__body">
                                            <p>Advanced real time stream analytics, both on premise and in cloud provides powerful sensor data manipulation for transforming raw sensor values into high quality information.</p>
                                        </div>
                                        <footer class="kx-card__footer">
                                            <div class="kx-card__tags">
                                                <!-- ICON Component -->
                                                <i class="kx-icon kx-icon--size-small">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#bookmark"></use>
    </svg>
</i>
                                                <ul class="kx-card__taglist">
                                                    <li class="kx-card__tagitem"><span>Maritime</span></li>
                                                    <li class="kx-card__tagitem"><span>Subsea Performance</span></li>
                                                </ul>
                                            </div>
                                            <!-- LINK AS BUTTON Component -->
                                            <a class="kx-btn kx-btn--skin-flat kx-btn--size-base kx-card__cta" href="#">
    <span class="kx-btn__inner">
        <span class="kx-btn__txt">Learn More</span>
    </span>
</a>
                                        </footer>
                                    </div>
                                </div>

                                <div class="kx-col kx-col--12 kx-col--6@tab-m kx-col--4@ltp-s">
                                    <div class="kx-card kx-card--skin-default">
                                        <header class="kx-card__header">
                                            <h3 class="kx-card__title"><a class="kx-card__title-link" href="#">IoT Platform</a></h3>
                                        </header>
                                        <div class="kx-card__body">
                                            <p>A highly scalable and flexible IoT platform enable secure and reliable data collection, analytics and distribution for distributed industrial scale on premise or cloud based solutions.</p>
                                        </div>
                                        <footer class="kx-card__footer">
                                            <div class="kx-card__tags">
                                                <!-- ICON Component -->
                                                <i class="kx-icon kx-icon--size-small">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#bookmark"></use>
    </svg>
</i>
                                                <ul class="kx-card__taglist">
                                                    <li class="kx-card__tagitem"><span>Utilities</span></li>
                                                    <li class="kx-card__tagitem"><span>Smart Grid</span></li>
                                                    <li class="kx-card__tagitem"><span>Smart Metering</span></li>
                                                    <li class="kx-card__tagitem"><span>Smart City</span></li>
                                                    <li class="kx-card__tagitem"><span>Power Grid</span></li>
                                                </ul>
                                            </div>
                                            <!-- LINK AS BUTTON Component -->
                                            <a class="kx-btn kx-btn--skin-flat kx-btn--size-base kx-card__cta" href="#">
    <span class="kx-btn__inner">
        <span class="kx-btn__txt">Learn More</span>
    </span>
</a>
                                        </footer>
                                    </div>
                                </div>

                                <div class="kx-col kx-col--12 kx-col--6@tab-m kx-col--4@ltp-s">
                                    <div class="kx-card kx-card--skin-default">
                                        <header class="kx-card__header">
                                            <h3 class="kx-card__title"><a class="kx-card__title-link" href="#">Global System Tools</a></h3>
                                        </header>
                                        <div class="kx-card__body">
                                            <p>Ready to go applications and tools enable solution providers to faster deliver value for their customers.</p>
                                        </div>
                                        <footer class="kx-card__footer">
                                            <!-- LINK AS BUTTON Component -->
                                            <a class="kx-btn kx-btn--skin-flat kx-btn--size-base kx-card__cta" href="#">
    <span class="kx-btn__inner">
        <span class="kx-btn__txt">Learn More</span>
    </span>
</a>
                                        </footer>
                                    </div>
                                </div>

                                <div class="kx-col kx-col--12 kx-col--6@tab-m kx-col--4@ltp-s">
                                    <div class="kx-card kx-card--skin-default">
                                        <header class="kx-card__header">
                                            <h3 class="kx-card__title"><a class="kx-card__title-link" href="#">Connectivity</a></h3>
                                        </header>
                                        <div class="kx-card__body">
                                            <p>The Global Secure Network ensures a reliable, secure and unified way of communication and data transfer between remote installations, public and private clouds, customers, industrial infrastructure and sensors.</p>
                                        </div>
                                        <footer class="kx-card__footer">
                                            <!-- LINK AS BUTTON Component -->
                                            <a class="kx-btn kx-btn--skin-flat kx-btn--size-base kx-card__cta" href="#">
    <span class="kx-btn__inner">
        <span class="kx-btn__txt">Learn More</span>
    </span>
</a>
                                        </footer>
                                    </div>
                                </div>

                                <div class="kx-col kx-col--12 kx-col--6@tab-m kx-col--4@ltp-s">
                                    <div class="kx-card kx-card--skin-default">
                                        <header class="kx-card__header">
                                            <h3 class="kx-card__title"><a class="kx-card__title-link" href="#">Self Service Portal</a></h3>
                                        </header>
                                        <div class="kx-card__body">
                                            <p>Globally distributed, scalable, and industrial hardened, self-serviced cloud infrastructure provides the flexibility, effectiveness and security needed for digitalized industrial solutions.</p>
                                        </div>
                                        <footer class="kx-card__footer">
                                            <div class="kx-card__tags">
                                                <!-- ICON Component -->
                                                <i class="kx-icon kx-icon--size-small">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#bookmark"></use>
    </svg>
</i>
                                                <ul class="kx-card__taglist">
                                                    <li class="kx-card__tagitem"><span>Maritime</span></li>
                                                    <li class="kx-card__tagitem"><span>Subsea Performance</span></li>
                                                </ul>
                                            </div>
                                            <!-- LINK AS BUTTON Component -->
                                            <a class="kx-btn kx-btn--skin-flat kx-btn--size-base kx-card__cta" href="#">
    <span class="kx-btn__inner">
        <span class="kx-btn__txt">Learn More</span>
    </span>
</a>
                                        </footer>
                                    </div>
                                </div>

                                <div class="kx-col kx-col--12 kx-col--6@tab-m kx-col--4@ltp-s">
                                    <div class="kx-card kx-card--skin-default">
                                        <header class="kx-card__header">
                                            <h3 class="kx-card__title"><a class="kx-card__title-link" href="#">Cyber Security</a></h3>
                                        </header>
                                        <div class="kx-card__body">
                                            <p>Take advantage of our state of the art security infrastructure and cyber security management.</p>
                                        </div>
                                        <footer class="kx-card__footer">
                                            <div class="kx-card__tags">
                                                <!-- ICON Component -->
                                                <i class="kx-icon kx-icon--size-small">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#bookmark"></use>
    </svg>
</i>
                                                <ul class="kx-card__taglist">
                                                    <li class="kx-card__tagitem"><span>Utilities</span></li>
                                                    <li class="kx-card__tagitem"><span>Smart Grid</span></li>
                                                    <li class="kx-card__tagitem"><span>Smart Metering</span></li>
                                                    <li class="kx-card__tagitem"><span>Smart City</span></li>
                                                    <li class="kx-card__tagitem"><span>Power Grid</span></li>
                                                </ul>
                                            </div>
                                            <!-- LINK AS BUTTON Component -->
                                            <a class="kx-btn kx-btn--skin-flat kx-btn--size-base kx-card__cta" href="#">
    <span class="kx-btn__inner">
        <span class="kx-btn__txt">Learn More</span>
    </span>
</a>
                                        </footer>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </section>

                </div>
            </main>
        </div>

    </div>

    <script>
        let buttons = document.querySelectorAll('.kx-btn');
        for (let i = 0; i < buttons.length; i++) {
            buttons[i].addEventListener('click', function(event) {
                this.blur();
            });
        }
    </script>
    <script src="../../assets/scripts/js/helpers.js"></script>
    <script src="../../assets/scripts/js/navigation.js"></script>
    <script src="../../assets/scripts/js/object-fit-fallback.js"></script>

    <script src="../../assets/scripts/js/components/dropdown.js"></script>

</body>
{% extends "@page" %}

{% block main %}
    {% render '@hero', hero.context, true %}

    <section class="kx-py--large kx-pt--xxlarge@tab-m kx-pb--xlarge@tab-m">
        <div class="kx-container kx-container--tab-m kx-mx--auto kx-center">
            <h2>About kognifai Developers</h2>
            <p>Here you will find information, instructions and guidelines that will help you build high quality applications and solutions, bringing out the value of your business.</p>
            <p>The Application Framework, Global System Tools and IoT Services provide powerful and flexible capabilities for reading, presenting and analyzing asset performance data between remote locations in a secure environment.</p>
        </div>
    </section>

    <section class="kx-py--large kx-py--xlarge@tab-m">
        <div class="kx-container kx-container--ltp-s kx-mx--auto">
            <h2 class="kx-center kx-is-vishidden">Get started</h2>
            <div class="kx-row kx-row--gutters kx-align-items-stretch">
                <div class="kx-col kx-col--12 kx-col--4@tab-m">
                    <div class="kx-pb--base kx-px--large@tab-m kx-center">
                        <h3>Creating Applications</h3>
                        <p>A quick introduction of the platform architecture and it services and help you set up your development environment.</p>
                    </div>
                </div>
                <div class="kx-col kx-col--12 kx-col--4@tab-m">
                    <div class="kx-pb--base kx-px--large@tab-m kx-center">
                        <h3>IoT Platform</h3>
                        <p>Data Management, Analytics and IoT Platform capabilities.</p>
                    </div>
                </div>
                <div class="kx-col kx-col--12 kx-col--4@tab-m">
                    <div class="kx-pb--base kx-px--large@tab-m kx-center">
                        <h3>Secure Connectivity</h3>
                        <p>A high-level introduction to the globally distributed and secure network.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="kx-py--large kx-py--xlarge@tab-m">
        <div class="kx-container kx-container--ltp-s kx-mx--auto">
            <div class="kx-row kx-align-items-stretch">
            {% set cls = cycler("kx-odd", "kx-even") %}
            {% for tile in tiles %}
                <div class="kx-col kx-col--12 kx-col--4@tab-s {{ cls.next() }}">
                {% render '@topictile', tile.context %}
                </div>
            {% endfor %}
            </div>
        </div>
    </section>

    <section class="kx-py--large kx-py--xlarge@tab-m">
        <div class="kx-container kx-container--tab-l kx-mx--auto">
            <h2 class="kx-center">Explore kognifai</h2>
            <img src="/assets/img/content/explore-kognifai-diagram.png" class="kx-py--large" alt="Diagram over kognifai">
        </div>
        <div class="kx-container kx-container--ltp-s kx-mx--auto">
            <div class="kx-row kx-row--gutters kx-align-items-stretch">
                {% for card in cards %}
                    <div class="kx-col kx-col--12 kx-col--6@tab-m kx-col--4@ltp-s">
                        {% render '@card', card.context, true %}
                    </div>
                {% endfor %}
            </div>
        </div>
    </section>
{% endblock %}
{
  "pageTitle": "Dashboard Title",
  "navContext": {
    "classes": [
      "kx-nav--main"
    ],
    "header": "Main Navigation",
    "hideHeader": true,
    "search": true,
    "items": [
      {
        "text": "Home"
      }
    ]
  },
  "hero": {
    "context": {
      "img": {
        "rwd": [
          {
            "srcset": "/assets/img/content/1920x960(2_1)-wave.jpg",
            "size": "(min-width: 1920px)"
          },
          {
            "srcset": "/assets/img/content/1600x800(2_1)-wave.jpg",
            "size": "(min-width: 1600px)"
          },
          {
            "srcset": "/assets/img/content/1280x853(3_2)-wave.jpg",
            "size": "(min-width: 1280px)"
          },
          {
            "srcset": "/assets/img/content/1024x683(3_2)-wave.jpg",
            "size": "(min-width: 1024px)"
          },
          {
            "srcset": "/assets/img/content/800x800(1_1)-wave.jpg",
            "size": "(min-width: 800px)"
          },
          {
            "srcset": "/assets/img/content/600x800(3_4)-wave.jpg",
            "size": "(min-width: 600px)"
          },
          {
            "srcset": "/assets/img/content/480x640(3_2)-wave.jpg",
            "size": "(min-width: 480px)"
          }
        ],
        "url": "/assets/img/content/320x427(3_2)-wave.jpg",
        "alt": "Alternative text",
        "fallback": {
          "url": "/assets/img/content/1600x800(2_1)-wave.jpg"
        }
      },
      "size": "50",
      "content": {
        "title": "Developers",
        "lead": "Develop. Distribute. Communicate",
        "cta": {
          "text": "Get Started",
          "href": "#"
        },
        "align": "center"
      }
    }
  },
  "cards": [
    {
      "context": {
        "title": "Application Framework",
        "skin": "default",
        "cta": {
          "text": "Learn More",
          "href": "#"
        },
        "tags": [
          "Utilities",
          "Smart Grid",
          "Smart Metering",
          "Smart City",
          "Power Grid"
        ],
        "content": "Application framework provides components and services that help developers quickly and easily build secure applications and widgets. Use the articles in this section to start building on the digital platform."
      }
    },
    {
      "context": {
        "title": "Visualization",
        "skin": "default",
        "tags": [
          "Maritime",
          "Subsea Performance"
        ],
        "cta": {
          "text": "Learn More",
          "href": "#"
        },
        "content": "Advanced 3D visualization capabilities such as Virtual Reality, Augmented Reality and Graphical Information System capabilities for apps and solutions developed on the kognifai platform."
      }
    },
    {
      "context": {
        "title": "Developers.kognif.ai",
        "skin": "default",
        "cta": {
          "text": "Learn More",
          "href": "#"
        },
        "content": "An open ecosystem and community providing detailed insight, support and services for developers on the kognifai platform and on Kongsberg solutions."
      }
    },
    {
      "context": {
        "title": "Advanced Analytics",
        "skin": "default",
        "cta": {
          "text": "Learn More",
          "href": "#"
        },
        "tags": [
          "Maritime",
          "Subsea Performance"
        ],
        "content": "Advanced real time stream analytics, both on premise and in cloud provides powerful sensor data manipulation for transforming raw sensor values into high quality information."
      }
    },
    {
      "context": {
        "title": "IoT Platform",
        "skin": "default",
        "cta": {
          "text": "Learn More",
          "href": "#"
        },
        "tags": [
          "Utilities",
          "Smart Grid",
          "Smart Metering",
          "Smart City",
          "Power Grid"
        ],
        "content": "A highly scalable and flexible IoT platform enable secure and reliable data collection, analytics and distribution for distributed industrial scale on premise or cloud based solutions."
      }
    },
    {
      "context": {
        "title": "Global System Tools",
        "skin": "default",
        "cta": {
          "text": "Learn More",
          "href": "#"
        },
        "content": "Ready to go applications and tools enable solution providers to faster deliver value for their customers."
      }
    },
    {
      "context": {
        "title": "Connectivity",
        "skin": "default",
        "cta": {
          "text": "Learn More",
          "href": "#"
        },
        "content": "The Global Secure Network ensures a reliable, secure and unified way of communication and data transfer between remote installations, public and private clouds, customers, industrial infrastructure and sensors."
      }
    },
    {
      "context": {
        "title": "Self Service Portal",
        "skin": "default",
        "cta": {
          "text": "Learn More",
          "href": "#"
        },
        "tags": [
          "Maritime",
          "Subsea Performance"
        ],
        "content": "Globally distributed, scalable, and industrial hardened, self-serviced cloud infrastructure provides the flexibility, effectiveness and security needed for digitalized industrial solutions."
      }
    },
    {
      "context": {
        "title": "Cyber Security",
        "skin": "default",
        "cta": {
          "text": "Learn More",
          "href": "#"
        },
        "tags": [
          "Utilities",
          "Smart Grid",
          "Smart Metering",
          "Smart City",
          "Power Grid"
        ],
        "content": "Take advantage of our state of the art security infrastructure and cyber security management."
      }
    }
  ],
  "tiles": [
    {
      "context": {
        "title": "Creating Applications",
        "img": {
          "url": "/assets/img/icons/industries/maritime-offshore-white.svg",
          "alt": "Alternative text"
        },
        "href": "#"
      }
    },
    {
      "context": {
        "title": "IoT Platform",
        "img": {
          "url": "/assets/img/icons/industries/subsea-white.svg",
          "alt": "Alternative text"
        },
        "href": "#"
      }
    },
    {
      "context": {
        "title": "Secure Connectivity",
        "img": {
          "url": "/assets/img/icons/industries/fishery-white.svg",
          "alt": "Alternative text"
        },
        "href": "#"
      }
    }
  ]
}

There are no notes for this item.