Doing the impossible: Making loading screens entertaining since 2015.
30%
Parallax Image

North Star Security Group (NSSG)

North Star Security Group (NSSG) offers trusted risk and crisis management solutions worldwide, ensuring their clients’ peace of mind even in the most challenging environments. Neo Vision’s mission was to create a website that embodies NSSG’s commitment to safety, professionalism, and modernity.

 

Parallax Image

Debrief

Client
NSSG
Design
High Contrast
Role
Product Strategy, Frontend Development, Backend Development, CMS Development, DevOps, Continuous Development

Business Goals

Parallax Image
Parallax Image
Parallax Image
Parallax Image
Parallax Image
Parallax Image

Product Description

Parallax Image
Parallax Image
Parallax Image
Parallax Image
Parallax Image
Parallax Image

Development Process

Parallax Image
Parallax Image
Parallax Image
Parallax Image
Parallax Image
Parallax Image

Backend Development

Neo Vision’s work with NSSG resulted in a streamlined, high-impact digital platform that supports NSSG’s ambitions on a global scale. The new website, featuring a cohesive brand identity, multilingual capabilities, and engaging visuals, positions NSSG as a dependable partner for risk management and crisis solutions across borders.

NSSG now has a robust online presence to foster international business connections and build credibility with its clientele.

Let
's talk about
yo
ur
project
NSSG Code Snippet
<div id="left-country-overlay" class="nssg-globekit__left">

  <div id="general-country-overlay" class="nssg-globekit-overlay-1">
    <h1 class="text-h1 nssg-globekit-title">Global Travel Monitor</h1>

    <div class="nssg-globekit-subtitle">We believe that global dynamics impose the business tempo. Therefore, we developed a visual tool to support your decision making process.</div>

    <div class="nssg-globekit-country-wrapper ngcw">

      <div class="ngcw__input-wrapper">
        <input type="text" id="globekit-country-input" placeholder="Type a country name in here" autocomplete="false" class="ngcw__input">

        <svg class="ngcw__arrow" width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M10.293 0.292969L5.99997 4.58597L1.70697 0.292969L0.292969 1.70697L5.99997 7.41397L11.707 1.70697L10.293 0.292969Z" fill="#1F171E"/>
        </svg>
      </div>

      <div id="globekit-country-options" class="ngcw__list"></div>
    </div>

    <div class="nssg-globekit-footer text-detail">
      Risk levels are assessed based on terror, crime, environmental and health-related events that determine either combined or independently what type of preventive measures should be taken when planning travel. Note that the assigned risk level is related to the macro areas and specific zones could be subject to a different risk level.        </div>
  </div>

  <div id="selected-country-overlay" class="nssg-globekit-overlay">
    <div id="selected-country-overlay-back" class="nssg-globekit-overlay__back">
      <svg width="11" height="12" viewBox="0 0 11 12" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M0.46967 5.46967C0.176777 5.76256 0.176777 6.23744 0.46967 6.53033L5.24264 11.3033C5.53553 11.5962 6.01041 11.5962 6.3033 11.3033C6.59619 11.0104 6.59619 10.5355 6.3033 10.2426L2.06066 6L6.3033 1.75736C6.59619 1.46447 6.59619 0.989593 6.3033 0.696699C6.01041 0.403806 5.53553 0.403806 5.24264 0.696699L0.46967 5.46967ZM11 5.25H1V6.75H11V5.25Z" fill="#1F171E"/>
      </svg>
      <span>Back to Global Monitor</span>
    </div>

    <h1 class="text-h1 nssg-globekit-title" id="selected-coutry-name">Iran</h1>

    <div class="nssg-globekit-subtitle" id="selected-coutry-desc"></div>



        <div class="nssg-globekit-after-select">
          <a id="nssg-globekit-destination-page-link" href="https://nssg.global/assistance-request/" data-base="https://nssg.global/assistance-request/" target="_self" class="btn btn--primary">Assistance request</a>
        </div>



  </div>
</div>

<div class="nssg-globekit__right">
  <div id="globekit-container">
    <canvas id="globekit-canvas"></canvas>
    <div id="callout-container"></div>
  </div>

  <div class="nssg-globekit-footer nssg-globekit-footer--mobile text-detail">
    Risk levels are assessed based on terror, crime, environmental and health-related events that determine either combined or independently what type of preventive measures should be taken when planning travel. Note that the assigned risk level is related to the macro areas and specific zones could be subject to a different risk level.      </div>
</div>

</div>
NSSG Code Snippet
<div id="left-country-overlay" class="nssg-globekit__left">

  <div id="general-country-overlay" class="nssg-globekit-overlay-1">
    <h1 class="text-h1 nssg-globekit-title">Global Travel Monitor</h1>

    <div class="nssg-globekit-subtitle">We believe that global dynamics impose the business tempo. Therefore, we developed a visual tool to support your decision making process.</div>

    <div class="nssg-globekit-country-wrapper ngcw">

      <div class="ngcw__input-wrapper">
        <input type="text" id="globekit-country-input" placeholder="Type a country name in here" autocomplete="false" class="ngcw__input">

        <svg class="ngcw__arrow" width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M10.293 0.292969L5.99997 4.58597L1.70697 0.292969L0.292969 1.70697L5.99997 7.41397L11.707 1.70697L10.293 0.292969Z" fill="#1F171E"/>
        </svg>
      </div>

      <div id="globekit-country-options" class="ngcw__list"></div>
    </div>

    <div class="nssg-globekit-footer text-detail">
      Risk levels are assessed based on terror, crime, environmental and health-related events that determine either combined or independently what type of preventive measures should be taken when planning travel. Note that the assigned risk level is related to the macro areas and specific zones could be subject to a different risk level.        </div>
  </div>

  <div id="selected-country-overlay" class="nssg-globekit-overlay">
    <div id="selected-country-overlay-back" class="nssg-globekit-overlay__back">
      <svg width="11" height="12" viewBox="0 0 11 12" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M0.46967 5.46967C0.176777 5.76256 0.176777 6.23744 0.46967 6.53033L5.24264 11.3033C5.53553 11.5962 6.01041 11.5962 6.3033 11.3033C6.59619 11.0104 6.59619 10.5355 6.3033 10.2426L2.06066 6L6.3033 1.75736C6.59619 1.46447 6.59619 0.989593 6.3033 0.696699C6.01041 0.403806 5.53553 0.403806 5.24264 0.696699L0.46967 5.46967ZM11 5.25H1V6.75H11V5.25Z" fill="#1F171E"/>
      </svg>
      <span>Back to Global Monitor</span>
    </div>

    <h1 class="text-h1 nssg-globekit-title" id="selected-coutry-name">Iran</h1>

    <div class="nssg-globekit-subtitle" id="selected-coutry-desc"></div>



        <div class="nssg-globekit-after-select">
          <a id="nssg-globekit-destination-page-link" href="https://nssg.global/assistance-request/" data-base="https://nssg.global/assistance-request/" target="_self" class="btn btn--primary">Assistance request</a>
        </div>



  </div>
</div>

<div class="nssg-globekit__right">
  <div id="globekit-container">
    <canvas id="globekit-canvas"></canvas>
    <div id="callout-container"></div>
  </div>

  <div class="nssg-globekit-footer nssg-globekit-footer--mobile text-detail">
    Risk levels are assessed based on terror, crime, environmental and health-related events that determine either combined or independently what type of preventive measures should be taken when planning travel. Note that the assigned risk level is related to the macro areas and specific zones could be subject to a different risk level.      </div>
</div>

</div>