atQuest yet again emerged as an exclusive winner for the inaugural award by Microsoft at Information Worker (IW) category. Winning this award reinforces atQuest’s commitment in delivering high class solutions for our clients.
<!-- ============================================================
ELEMENTOR PASTE START ▼ (copy from here to PASTE END)
Paste into an HTML widget on the jurunav_26 Elementor Canvas
page, replacing its current content.
This is fetched live by every page's juru-nav-loader script,
which looks for these exact three ids: #juru-nav, #juru-nav-css,
#juru-nav-js — keep them as-is or the loader silently no-ops.
============================================================ -->
<nav id="juru-nav" class="jnav">
<div class="jnav-in">
<a href="/home_26/" class="jlogo" aria-label="Juru — home">
<img class="jlogo-img" src="https://www.juru.ai/wp-content/uploads/2023/03/logo-header-2.jpg" alt="Juru — SME100 Fast Moving Companies Award">
</a>
<button type="button" class="jnav-burger" id="jnavBurger" aria-label="Open menu" aria-expanded="false" aria-controls="jnavMenu">
<span></span><span></span><span></span>
</button>
<div class="jnav-menu" id="jnavMenu">
<ul class="jnav-links">
<li class="jnav-drop">
<button type="button" class="jnav-drop-trigger" id="jnavDropTrigger" aria-expanded="false" aria-controls="jnavDropmenu">
Products
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
</button>
<div class="jnav-dropmenu" id="jnavDropmenu">
<a href="/jurupay_26/"><span class="jnav-dot"></span>JuruPay</a>
<a href="/jurupos_26/"><span class="jnav-dot"></span>JuruPOS</a>
<a href="/jurumenu_26/"><span class="jnav-dot"></span>JuruMenu</a>
<a href="/jurustore_26/"><span class="jnav-dot"></span>JuruStore</a>
<a href="/jurureward_26/"><span class="jnav-dot"></span>JuruReward</a>
<a href="https://www.juruschool.com/" target="_blank" rel="noopener"><span class="jnav-dot"></span>JuruSchool</a>
</div>
</li>
<li><a href="/news/" class="jnav-link">News</a></li>
</ul>
<a href="https://www.juru.ai/contact-us/" class="jnav-cta">Talk to Us
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
</a>
</div>
</div>
</nav>
<style id="juru-nav-css">
/* ============================================================
JURU NAV — scoped to #juru-nav so it can never bleed into the
host page. Brand tokens are hardcoded (not shared CSS vars)
since this nav is fetched and injected as a standalone fragment
into pages it doesn't share a stylesheet with.
============================================================ */
#juru-nav{
--jr: #E11B22;
--jr-glow: #FF6B62;
--jr-soft: #FDF1F0;
--ink: #1B1416;
--ink-2: #6B6065;
--line: #EDE4E3;
--paper: #FFFFFF;
--ease: cubic-bezier(.22,.61,.36,1);
position:fixed; top:0; left:0; right:0; z-index:1000;
font-family:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
padding:0;
background:rgba(255,255,255,.66);
backdrop-filter:blur(14px) saturate(140%);
-webkit-backdrop-filter:blur(14px) saturate(140%);
border-bottom:1px solid rgba(27,20,22,.06);
transition:padding .55s var(--ease), background .45s var(--ease),
border-color .45s var(--ease);
}
#juru-nav *{box-sizing:border-box;}
#juru-nav a{color:inherit;text-decoration:none;}
#juru-nav ul{list-style:none;margin:0;padding:0;}
#juru-nav button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0;}
#juru-nav svg{display:block;flex:none;}
/* Scrolled state — toggled by juru-nav-js.
The full-width bar hands its surface over to .jnav-in, which pulls in
from both edges and rounds off into a floating island. So the outer
element goes transparent and gains a gutter, and the inner one takes
on the background, the border, the shadow and the radius. */
#juru-nav.is-scrolled{
background:transparent;
backdrop-filter:none;
-webkit-backdrop-filter:none;
border-bottom-color:transparent;
padding:12px 20px;
}
#juru-nav .jnav-in{
max-width:1200px; margin:0 auto;
display:flex; align-items:center; justify-content:space-between;
padding:22px 28px;
border:1px solid transparent; border-radius:0;
background:transparent;
transition:max-width .55s var(--ease), padding .55s var(--ease),
border-radius .55s var(--ease), background .45s var(--ease),
border-color .45s var(--ease), box-shadow .55s var(--ease);
}
#juru-nav.is-scrolled .jnav-in{
max-width:1020px;
padding:10px 12px 10px 24px;
border-radius:100px;
background:rgba(255,255,255,.9);
backdrop-filter:blur(18px) saturate(160%);
-webkit-backdrop-filter:blur(18px) saturate(160%);
border-color:var(--line);
box-shadow:0 1px 2px rgba(27,20,22,.05), 0 16px 38px -18px rgba(27,20,22,.45);
}
#juru-nav .jlogo{ display:flex; align-items:center; flex:none; }
#juru-nav .jlogo-img{
height:40px; width:auto; display:block;
transition:height .35s var(--ease);
}
#juru-nav.is-scrolled .jlogo-img{ height:28px; }
#juru-nav .jnav-menu{ display:flex; align-items:center; gap:34px; }
#juru-nav .jnav-links{ display:flex; align-items:center; gap:8px; }
#juru-nav .jnav-drop{ position:relative; }
#juru-nav .jnav-drop-trigger{
display:flex; align-items:center; gap:7px;
font-size:15px; font-weight:500; color:var(--ink);
padding:9px 4px;
}
#juru-nav .jnav-drop-trigger svg{ transition:transform .3s var(--ease); color:var(--ink-2); }
#juru-nav .jnav-drop-trigger[aria-expanded="true"] svg{ transform:rotate(180deg); color:var(--jr); }
#juru-nav .jnav-drop-trigger:hover{ color:var(--jr); }
#juru-nav .jnav-link{
display:flex; align-items:center;
font-size:15px; font-weight:500; color:var(--ink);
padding:9px 10px; transition:color .2s;
}
#juru-nav .jnav-link:hover{ color:var(--jr); }
#juru-nav .jnav-dropmenu{
position:absolute; top:calc(100% + 10px); left:50%; transform:translate(-50%,6px);
min-width:210px; background:var(--paper);
border:1px solid var(--line); border-radius:16px;
box-shadow:0 2px 4px rgba(16,19,23,.05), 0 18px 48px rgba(16,19,23,.12);
padding:8px; display:grid; gap:2px;
opacity:0; visibility:hidden; pointer-events:none;
transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
#juru-nav .jnav-drop-trigger[aria-expanded="true"] + .jnav-dropmenu{
opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0);
}
#juru-nav .jnav-dropmenu a{
display:flex; align-items:center; gap:10px;
font-size:14.5px; font-weight:500; color:var(--ink);
padding:10px 14px; border-radius:10px;
transition:background .2s, color .2s;
}
#juru-nav .jnav-dropmenu a:hover{ background:var(--jr-soft); color:var(--jr); }
#juru-nav .jnav-dot{
width:6px; height:6px; border-radius:50%; background:var(--line); flex:none;
transition:background .2s;
}
#juru-nav .jnav-dropmenu a:hover .jnav-dot{ background:var(--jr); }
#juru-nav .jnav-cta{
display:inline-flex; align-items:center; gap:9px;
background:linear-gradient(135deg,var(--jr) 0%,var(--jr-glow) 100%);
color:#fff; font-weight:700; font-size:14.5px;
padding:12px 22px; border-radius:100px;
box-shadow:0 10px 26px -8px rgba(225,27,34,.5);
transition:transform .25s var(--ease), box-shadow .25s var(--ease), padding .35s var(--ease);
}
#juru-nav .jnav-cta svg{ transition:transform .25s var(--ease); }
#juru-nav .jnav-cta:hover{ transform:translateY(-2px); box-shadow:0 14px 32px -8px rgba(225,27,34,.6); }
#juru-nav .jnav-cta:hover svg{ transform:translateX(3px); }
#juru-nav.is-scrolled .jnav-cta{ padding:9px 18px; }
#juru-nav .jnav-burger{
display:none; flex-direction:column; justify-content:center; gap:5px;
width:34px; height:34px; flex:none;
}
#juru-nav .jnav-burger span{
display:block; width:100%; height:2px; background:var(--ink); border-radius:2px;
transition:transform .3s var(--ease), opacity .3s var(--ease);
}
#juru-nav .jnav-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
#juru-nav .jnav-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
#juru-nav .jnav-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
#juru-nav a:focus-visible,
#juru-nav button:focus-visible{
outline:3px solid var(--jr); outline-offset:3px; border-radius:6px;
}
@media (max-width:860px){
/* No island on a phone: narrowing a bar that is already narrow buys
nothing, and backdrop-filter on .jnav-in would make it the
containing block for the fixed slide-in panel and mis-place it.
So the mobile bar keeps its original full-width behaviour. */
#juru-nav.is-scrolled{
background:rgba(255,255,255,.94);
backdrop-filter:blur(14px) saturate(140%);
-webkit-backdrop-filter:blur(14px) saturate(140%);
border-bottom-color:var(--line);
padding:0;
}
#juru-nav.is-scrolled .jnav-in{
max-width:1200px; padding:11px 22px; border-radius:0;
background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none;
border-color:transparent; box-shadow:none;
}
#juru-nav .jnav-burger{ display:flex; }
#juru-nav .jnav-menu{
position:fixed; top:0; right:0; height:100vh; width:min(320px,86vw);
background:var(--paper); flex-direction:column; align-items:stretch;
gap:0; padding:88px 26px 32px;
box-shadow:-24px 0 60px rgba(16,19,23,.16);
transform:translateX(100%); transition:transform .4s var(--ease);
}
#juru-nav .jnav-menu.is-open{ transform:translateX(0); }
#juru-nav .jnav-links{ flex-direction:column; align-items:stretch; gap:4px; }
#juru-nav .jnav-drop-trigger,
#juru-nav .jnav-link{
justify-content:space-between; width:100%; padding:14px 4px;
font-size:17px; border-bottom:1px solid var(--line);
}
#juru-nav .jnav-dropmenu{
position:static; transform:none; min-width:0; border:0; box-shadow:none;
padding:4px 0 4px 6px; max-height:0; overflow:hidden;
opacity:1; visibility:visible; pointer-events:auto;
transition:max-height .3s var(--ease);
}
#juru-nav .jnav-drop-trigger[aria-expanded="true"] + .jnav-dropmenu{ max-height:320px; transform:none; }
#juru-nav .jnav-cta{ justify-content:center; margin-top:22px; }
}
@media (prefers-reduced-motion:reduce){
#juru-nav, #juru-nav *{ transition:none !important; }
}
</style>
<script id="juru-nav-js">
(function(){
var nav = document.getElementById('juru-nav');
if(!nav) return;
/* shrink on scroll */
function onScroll(){
if(window.scrollY > 24){ nav.classList.add('is-scrolled'); }
else{ nav.classList.remove('is-scrolled'); }
}
onScroll();
window.addEventListener('scroll', onScroll, {passive:true});
/* products dropdown */
var dropTrigger = document.getElementById('jnavDropTrigger');
var dropMenu = document.getElementById('jnavDropmenu');
function closeDrop(){ dropTrigger.setAttribute('aria-expanded','false'); }
function toggleDrop(e){
e.stopPropagation();
var open = dropTrigger.getAttribute('aria-expanded') === 'true';
dropTrigger.setAttribute('aria-expanded', open ? 'false' : 'true');
}
if(dropTrigger){
dropTrigger.addEventListener('click', toggleDrop);
document.addEventListener('click', function(e){
if(!nav.contains(e.target)) closeDrop();
});
document.addEventListener('keydown', function(e){
if(e.key === 'Escape') closeDrop();
});
}
/* mobile menu */
var burger = document.getElementById('jnavBurger');
var menu = document.getElementById('jnavMenu');
if(burger){
burger.addEventListener('click', function(){
var open = burger.getAttribute('aria-expanded') === 'true';
burger.setAttribute('aria-expanded', open ? 'false' : 'true');
menu.classList.toggle('is-open', !open);
document.body.style.overflow = open ? '' : 'hidden';
});
}
})();
</script>
<!-- ============================================================
ELEMENTOR PASTE END ▲
============================================================ -->
Malaysia (HQ)
Unit 901A, Level 9, Tower A, Uptown 5, No. 5 Jalan SS21/39, Damansara Uptown, 47400 Petaling Jaya, Malaysia.
Singapore
1, North Bridge Road #24-01, High Street Centre, Singapore 179094
Hong Kong
1318-20, Hollywood Plaza, 610 Nathan Road, Mongkok, Kowloon, Hong Kong.
China
ChuangXin GuangChang, No. 2007, Pingshan Avenue, Pingshan Road, Pingshan District, Shenzhen, China.
ANZ
6 Clayton Street, Newmarket, Auckland 1023, New Zealand.
Copyright All Rights Reserved © 2025