{"id":493,"date":"2026-08-05T19:02:39","date_gmt":"2026-08-05T19:02:39","guid":{"rendered":"https:\/\/monichron.co.za\/?page_id=493"},"modified":"2026-08-05T19:09:44","modified_gmt":"2026-08-05T19:09:44","slug":"products","status":"publish","type":"page","link":"https:\/\/monichron.co.za\/index.php\/products\/","title":{"rendered":"Products"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800&amp;family=Space+Grotesk:wght@500;600;700&amp;display=swap\" rel=\"stylesheet\">\n<style>\n  .products-section{\n    --ink-deep:#0B0F1F;\n    --accent:#5AC8E8; \/* neutral default before any product is picked *\/\n    --accent-deep:#2FA0C4;\n    position:relative;\n    background:var(--ink-deep);\n    font-family:'Inter',system-ui,-apple-system,sans-serif;\n    padding:130px 24px 150px;\n    overflow:hidden;\n    transition:background 0.6s ease;\n  }\n  .products-section *{box-sizing:border-box;}\n\n  \/* ---- ambient: soft blurred colour masses that morph to the active\n     product's accent \u2014 the page's throughline, distinct from the cog\n     rings and the pulse-line canvas used elsewhere on the site ---- *\/\n  .products__ambient{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;}\n  .products__blob{\n    position:absolute;border-radius:50%;\n    background-color:var(--accent);\n    filter:blur(90px);opacity:0.28;\n    transition:background-color 0.7s ease;\n  }\n  .products__blob--a{width:520px;height:520px;top:-180px;left:-120px;animation:blob-drift-a 26s ease-in-out infinite;}\n  .products__blob--b{width:420px;height:420px;top:120px;right:-140px;opacity:0.2;animation:blob-drift-b 32s ease-in-out infinite;}\n  .products__blob--c{width:360px;height:360px;bottom:-160px;left:38%;opacity:0.18;animation:blob-drift-c 22s ease-in-out infinite;}\n  @keyframes blob-drift-a{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(60px,40px) scale(1.12);}}\n  @keyframes blob-drift-b{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-50px,30px) scale(0.92);}}\n  @keyframes blob-drift-c{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(30px,-40px) scale(1.08);}}\n\n  \/* ---- intro ---- *\/\n  .products__intro{position:relative;z-index:2;max-width:640px;margin:0 auto 20px;text-align:center;}\n  .products__eyebrow{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:18px;}\n  .products__eyebrow .rule{width:40px;height:3px;background:var(--accent);border-radius:2px;transition:background 0.5s ease;}\n  .products__eyebrow span{font-family:'Space Grotesk',sans-serif;font-size:0.78rem;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:rgba(255,255,255,0.6);}\n  .products__heading{\n    font-family:'Space Grotesk',sans-serif;color:#fff;font-size:clamp(1.9rem,4vw,2.7rem);\n    font-weight:700;margin:0 0 16px;letter-spacing:-0.01em;line-height:1.15;\n  }\n  .products__sub{color:rgba(255,255,255,0.58);font-size:0.98rem;line-height:1.65;margin:0;}\n\n  \/* ---- dock switcher ---- *\/\n  .products__dock-wrap{position:relative;z-index:2;display:flex;justify-content:center;margin:52px 0 44px;}\n  .products__dock{\n    position:relative;display:inline-flex;gap:4px;padding:6px;\n    background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.12);\n    border-radius:999px;backdrop-filter:blur(16px);\n  }\n  .products__dock-indicator{\n    position:absolute;top:6px;left:6px;height:calc(100% - 12px);border-radius:999px;\n    background:var(--accent);\n    box-shadow:0 8px 24px -4px rgba(0,0,0,0.5);\n    transition:transform 0.45s cubic-bezier(.22,1,.36,1), width 0.45s cubic-bezier(.22,1,.36,1), background-color 0.6s ease;\n    z-index:0;\n  }\n  .products__dock-btn{\n    position:relative;z-index:1;display:flex;align-items:center;gap:9px;\n    background:none;border:none;cursor:pointer;font-family:'Space Grotesk',sans-serif;\n    font-size:0.86rem;font-weight:600;letter-spacing:-0.01em;\n    padding:11px 20px;border-radius:999px;color:rgba(255,255,255,0.55);\n    transition:color 0.35s ease;white-space:nowrap;\n  }\n  .products__dock-btn.is-active{color:#0B0F1F;}\n  .products__dock-dot{width:8px;height:8px;border-radius:50%;background:currentColor;flex:0 0 auto;opacity:0.7;}\n  .products__dock-btn.is-active .products__dock-dot{opacity:1;}\n\n  \/* ---- stage ---- *\/\n  .products__stage{\n    position:relative;z-index:2;max-width:1080px;margin:0 auto;\n    display:grid;grid-template-columns:1fr 0.95fr;gap:56px;align-items:center;\n  }\n\n  .products__panel{\n    opacity:0;transform:translateY(14px);\n    transition:opacity 0.45s ease, transform 0.45s cubic-bezier(.22,1,.36,1);\n  }\n  .products__panel.is-visible{opacity:1;transform:translateY(0);}\n\n  .products__badge{\n    display:inline-flex;align-items:center;gap:8px;\n    background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.16);\n    border-radius:999px;padding:6px 14px 6px 10px;margin-bottom:22px;\n  }\n  .products__badge-icon{\n    width:22px;height:22px;border-radius:50%;background:var(--accent);\n    display:flex;align-items:center;justify-content:center;transition:background-color 0.6s ease;\n  }\n  .products__badge-icon svg{width:12px;height:12px;stroke:#0B0F1F;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}\n  .products__badge span{font-size:0.72rem;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;color:rgba(255,255,255,0.65);}\n\n  .products__name{\n    font-family:'Space Grotesk',sans-serif;color:#fff;font-size:clamp(1.7rem,3vw,2.3rem);\n    font-weight:700;margin:0 0 6px;letter-spacing:-0.01em;\n  }\n  .products__tagline{color:var(--accent);font-size:0.98rem;font-weight:600;margin:0 0 20px;transition:color 0.6s ease;}\n  .products__desc{color:rgba(255,255,255,0.68);font-size:0.96rem;line-height:1.72;margin:0 0 26px;max-width:440px;}\n\n  .products__chips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:32px;}\n  .products__chip{\n    font-size:0.78rem;font-weight:600;color:rgba(255,255,255,0.78);\n    background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.14);\n    border-radius:999px;padding:7px 14px;\n  }\n\n  .products__cta{\n    display:inline-flex;align-items:center;gap:9px;\n    background:var(--accent);color:#0B0F1F;text-decoration:none;\n    font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:0.86rem;\n    padding:13px 24px;border-radius:999px;\n    transition:background-color 0.6s ease, transform 0.25s ease, box-shadow 0.25s ease;\n  }\n  .products__cta:hover{transform:translateY(-2px);box-shadow:0 14px 30px -10px var(--accent);}\n  .products__cta svg{width:14px;height:14px;stroke:#0B0F1F;stroke-width:2.4;}\n\n  .products__domain{\n    display:block;margin-top:14px;font-family:'Space Grotesk',sans-serif;\n    font-size:0.76rem;color:rgba(255,255,255,0.4);letter-spacing:0.02em;\n  }\n\n  \/* ---- mockup frame ---- *\/\n  .products__frame{\n    position:relative;border-radius:18px;overflow:hidden;\n    background:rgba(255,255,255,0.04);\n    border:1px solid rgba(255,255,255,0.14);\n    box-shadow:0 30px 70px -30px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.02);\n    transition:box-shadow 0.6s ease;\n  }\n  .products__frame-bar{\n    display:flex;align-items:center;gap:8px;padding:11px 14px;\n    background:rgba(255,255,255,0.03);border-bottom:1px solid rgba(255,255,255,0.08);\n  }\n  .products__frame-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.18);}\n  .products__frame-url{\n    margin-left:8px;font-family:'Space Grotesk',sans-serif;font-size:0.72rem;\n    color:rgba(255,255,255,0.4);background:rgba(255,255,255,0.04);\n    border-radius:6px;padding:4px 10px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\n  }\n  .products__frame-body{\n    position:relative;aspect-ratio:4\/3;display:flex;align-items:center;justify-content:center;\n    overflow:hidden;background:#070A16;\n  }\n  .products__frame-img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;}\n  .products__frame-logo{width:56%;max-width:200px;filter:drop-shadow(0 10px 30px rgba(0,0,0,0.4));}\n  .products__frame-abstract{width:100%;height:100%;}\n  .products__frame-caption{\n    position:absolute;bottom:10px;right:12px;font-size:0.62rem;font-weight:600;\n    letter-spacing:0.05em;text-transform:uppercase;color:rgba(255,255,255,0.32);\n  }\n\n  \/* ---- CTA strip ---- *\/\n  .products__banner{\n    position:relative;z-index:2;max-width:820px;margin:88px auto 0;text-align:center;\n    padding:38px 32px;border-radius:22px;\n    background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.12);\n    backdrop-filter:blur(16px);\n  }\n  .products__banner h3{\n    font-family:'Space Grotesk',sans-serif;color:#fff;font-size:1.2rem;font-weight:700;\n    margin:0 0 10px;letter-spacing:-0.01em;\n  }\n  .products__banner p{color:rgba(255,255,255,0.6);font-size:0.9rem;line-height:1.6;margin:0 0 22px;}\n  .products__banner-cta{\n    display:inline-flex;align-items:center;gap:8px;\n    background:transparent;color:#fff;text-decoration:none;\n    border:1px solid rgba(255,255,255,0.28);\n    font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:0.84rem;\n    padding:12px 24px;border-radius:999px;\n    transition:border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;\n  }\n  .products__banner-cta:hover{border-color:var(--accent);background:rgba(255,255,255,0.06);transform:translateY(-2px);}\n  .products__banner-cta svg{width:13px;height:13px;stroke:#fff;stroke-width:2.2;}\n\n  @media (max-width:900px){\n    .products__stage{grid-template-columns:1fr;gap:36px;}\n    .products__desc{max-width:none;}\n  }\n  @media (max-width:640px){\n    .products-section{padding:100px 20px 110px;}\n    .products__dock{flex-wrap:wrap;justify-content:center;border-radius:20px;}\n    .products__dock-wrap{margin:40px 0 36px;}\n    .products__dock-indicator{display:none;}\n    .products__dock-btn.is-active{background:var(--accent);}\n  }\n\n  @media (prefers-reduced-motion:reduce){\n    .products__blob{animation:none !important;}\n    .products__panel{transition:opacity 0.3s ease !important;transform:none !important;}\n  }\n<\/style>\n\n<section class=\"products-section\" id=\"productsSection\">\n  <div class=\"products__ambient\" aria-hidden=\"true\">\n    <div class=\"products__blob products__blob--a\"><\/div>\n    <div class=\"products__blob products__blob--b\"><\/div>\n    <div class=\"products__blob products__blob--c\"><\/div>\n  <\/div>\n\n  <div class=\"products__intro\">\n    <div class=\"products__eyebrow\"><div class=\"rule\"><\/div><span>Our Products<\/span><\/div>\n    <h2 class=\"products__heading\">Software we&#8217;ve built, not just supported<\/h2>\n    <p class=\"products__sub\">A look at some of the standalone products to come out of our development team \u2014 real tools, built for real problems, live right now.<\/p>\n  <\/div>\n\n  <div class=\"products__dock-wrap\">\n    <div class=\"products__dock\" id=\"productsDock\">\n      <div class=\"products__dock-indicator\" id=\"dockIndicator\"><\/div>\n    <\/div>\n  <\/div>\n\n  <div class=\"products__stage\">\n    <div class=\"products__panel\" id=\"productsPanel\">\n      <div class=\"products__badge\">\n        <span class=\"products__badge-icon\" id=\"badgeIcon\"><\/span>\n        <span id=\"badgeLabel\">Live Product<\/span>\n      <\/div>\n      <h3 class=\"products__name\" id=\"pName\"><\/h3>\n      <p class=\"products__tagline\" id=\"pTagline\"><\/p>\n      <p class=\"products__desc\" id=\"pDesc\"><\/p>\n      <div class=\"products__chips\" id=\"pChips\"><\/div>\n      <a class=\"products__cta\" id=\"pCta\" href=\"#\" target=\"_blank\" rel=\"noopener noreferrer\">\n        <span id=\"pCtaLabel\">Visit product<\/span>\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M7 17L17 7M7 7h10v10\"><\/path><\/svg>\n      <\/a>\n      <span class=\"products__domain\" id=\"pDomain\"><\/span>\n    <\/div>\n\n    <div class=\"products__panel\" id=\"productsFramePanel\">\n      <div class=\"products__frame\">\n        <div class=\"products__frame-bar\">\n          <span class=\"products__frame-dot\"><\/span><span class=\"products__frame-dot\"><\/span><span class=\"products__frame-dot\"><\/span>\n          <span class=\"products__frame-url\" id=\"frameUrl\"><\/span>\n        <\/div>\n        <div class=\"products__frame-body\" id=\"frameBody\"><\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <div class=\"products__banner\">\n    <h3>Have an idea like this?<\/h3>\n    <p>We design and build custom software products end to end \u2014 not just IT support. If you&#8217;ve got a concept that needs a real build, let&#8217;s talk about it.<\/p>\n    <a class=\"products__banner-cta\" href=\"https:\/\/monichron.co.za\/index.php\/contact-2\/\">\n      Start a Conversation\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M13 6l6 6-6 6\"><\/path><\/svg>\n    <\/a>\n  <\/div>\n<\/section>\n\n<script>\n(function(){\n  var ABSTRACT = {\n    dash: function(accent){\n      return '<svg class=\"products__frame-abstract\" viewBox=\"0 0 400 300\" preserveAspectRatio=\"xMidYMid slice\">' +\n        '<rect width=\"400\" height=\"300\" fill=\"#0B0F1F\"\/>' +\n        '<g opacity=\"0.9\">' +\n        '<rect x=\"28\" y=\"180\" width=\"34\" height=\"90\" rx=\"4\" fill=\"' + accent + '\" opacity=\"0.55\"\/>' +\n        '<rect x=\"74\" y=\"130\" width=\"34\" height=\"140\" rx=\"4\" fill=\"' + accent + '\" opacity=\"0.75\"\/>' +\n        '<rect x=\"120\" y=\"160\" width=\"34\" height=\"110\" rx=\"4\" fill=\"' + accent + '\" opacity=\"0.5\"\/>' +\n        '<rect x=\"166\" y=\"100\" width=\"34\" height=\"170\" rx=\"4\" fill=\"' + accent + '\"\/>' +\n        '<rect x=\"212\" y=\"150\" width=\"34\" height=\"120\" rx=\"4\" fill=\"' + accent + '\" opacity=\"0.6\"\/>' +\n        '<\/g>' +\n        '<circle cx=\"320\" cy=\"90\" r=\"46\" fill=\"none\" stroke=\"' + accent + '\" stroke-width=\"8\" opacity=\"0.35\"\/>' +\n        '<circle cx=\"320\" cy=\"90\" r=\"46\" fill=\"none\" stroke=\"' + accent + '\" stroke-width=\"8\" stroke-dasharray=\"180 400\" stroke-linecap=\"round\" transform=\"rotate(-90 320 90)\"\/>' +\n        '<text x=\"320\" y=\"97\" text-anchor=\"middle\" font-family=\"Space Grotesk, sans-serif\" font-size=\"22\" font-weight=\"700\" fill=\"#fff\">64%<\/text>' +\n        '<line x1=\"28\" y1=\"284\" x2=\"372\" y2=\"284\" stroke=\"rgba(255,255,255,0.14)\" stroke-width=\"1\"\/>' +\n        '<\/svg>';\n    },\n    beat: function(accent){\n      return '<svg class=\"products__frame-abstract\" viewBox=\"0 0 400 300\" preserveAspectRatio=\"xMidYMid slice\">' +\n        '<rect width=\"400\" height=\"300\" fill=\"#0B0F1F\"\/>' +\n        '<path d=\"M20 150 L100 150 L120 90 L150 210 L175 150 L400 150\" fill=\"none\" stroke=\"' + accent + '\" stroke-width=\"3\" opacity=\"0.85\"\/>' +\n        '<circle cx=\"120\" cy=\"90\" r=\"6\" fill=\"' + accent + '\"\/>' +\n        '<circle cx=\"150\" cy=\"210\" r=\"6\" fill=\"' + accent + '\" opacity=\"0.6\"\/>' +\n        '<circle cx=\"300\" cy=\"150\" r=\"9\" fill=\"' + accent + '\"><animate attributeName=\"r\" values=\"9;16;9\" dur=\"1.8s\" repeatCount=\"indefinite\"\/><animate attributeName=\"opacity\" values=\"1;0.25;1\" dur=\"1.8s\" repeatCount=\"indefinite\"\/><\/circle>' +\n        '<g font-family=\"Space Grotesk, sans-serif\" font-size=\"12\" fill=\"rgba(255,255,255,0.45)\">' +\n        '<text x=\"30\" y=\"230\">Checkpoint 1<\/text>' +\n        '<text x=\"140\" y=\"230\">Checkpoint 2<\/text>' +\n        '<text x=\"270\" y=\"230\">Checkpoint 3<\/text>' +\n        '<\/g>' +\n        '<\/svg>';\n    }\n  };\n\n  var PRODUCTS = [\n    {\n      id:'safegrid',\n      name:'SafeGrid',\n      tagline:'Your community. One grid. Safer together.',\n      desc:'The operating system for neighbourhood watches and community security teams \u2014 live patrol tracking, panic-button alerts, and WhatsApp-integrated incident reporting, all feeding one control-room view.',\n      chips:['Live Patrol Tracking','Panic Button & SOS','WhatsApp-Integrated Reporting','Two-Way Radio','CCTV & Drone Integration'],\n      url:'https:\/\/safegrid.online',\n      domain:'safegrid.online',\n      accent:'#22D3EE', accentDeep:'#0EA5C7',\n      mockup:'image', image:'https:\/\/safegrid.online\/images\/dashboard-preview.png'\n    },\n    {\n      id:'kidkpi',\n      name:'KidKPI',\n      tagline:'Turn chores into cheers.',\n      desc:'A chore app kids actually want to open \u2014 points, podiums, and parent-set rewards turn the daily chore list into a game. Built to work across one home, two homes, or a whole team of caregivers.',\n      chips:['Points & Podiums','Parent-Set Rewards','Multi-Home Support','Caregiver Team Access'],\n      url:'https:\/\/kidkpi.com',\n      domain:'kidkpi.com',\n      accent:'#FF9F5A', accentDeep:'#E8823A',\n      mockup:'logo', image:'https:\/\/kidkpi.com\/logo.png'\n    },\n    {\n      id:'dash',\n      name:'Dash',\n      tagline:'Operations, at a glance.',\n      desc:\"A real-time operations dashboard built for Bidvest Protea Coin's security business \u2014 giving control-room teams and management one live view of guarding performance, incidents, and site metrics across the group.\",\n      chips:['Live Operations View','Site Performance Metrics','Incident Oversight','Management Reporting'],\n      url:'https:\/\/dash.proteacoin.co.za',\n      domain:'dash.proteacoin.co.za',\n      accent:'#E8B62F', accentDeep:'#C99518',\n      mockup:'abstract', abstractKey:'dash'\n    },\n    {\n      id:'beat',\n      name:'Beat',\n      tagline:'Every patrol, accounted for.',\n      desc:\"A patrol and checkpoint verification system for security officers on the ground \u2014 confirming every beat was walked, every checkpoint was scanned, and flagging the moment one isn't.\",\n      chips:['Patrol Beat Verification','Checkpoint Scanning','Real-Time Officer Tracking','Exception Alerts'],\n      url:'https:\/\/beat.proteacoin.co.za',\n      domain:'beat.proteacoin.co.za',\n      accent:'#F5426C', accentDeep:'#D62A54',\n      mockup:'abstract', abstractKey:'beat'\n    }\n  ];\n\n  var section = document.getElementById('productsSection');\n  var dock = document.getElementById('productsDock');\n  var dockIndicator = document.getElementById('dockIndicator');\n  var panel = document.getElementById('productsPanel');\n  var framePanel = document.getElementById('productsFramePanel');\n  var badgeIcon = document.getElementById('badgeIcon');\n  var pName = document.getElementById('pName');\n  var pTagline = document.getElementById('pTagline');\n  var pDesc = document.getElementById('pDesc');\n  var pChips = document.getElementById('pChips');\n  var pCta = document.getElementById('pCta');\n  var pDomain = document.getElementById('pDomain');\n  var frameUrl = document.getElementById('frameUrl');\n  var frameBody = document.getElementById('frameBody');\n\n  var CHECK_ICON = '<path d=\"M20 6L9 17l-5-5\"><\/path>';\n  var current = 0;\n\n  var dockBtns = [];\n  PRODUCTS.forEach(function(p, i){\n    var btn = document.createElement('button');\n    btn.className = 'products__dock-btn';\n    btn.type = 'button';\n    btn.innerHTML = '<span class=\"products__dock-dot\" style=\"background:' + p.accent + '\"><\/span>' + p.name;\n    btn.addEventListener('click', function(){ selectProduct(i); });\n    dock.appendChild(btn);\n    dockBtns.push(btn);\n  });\n\n  function moveIndicator(i){\n    var btn = dockBtns[i];\n    dockIndicator.style.width = btn.offsetWidth + 'px';\n    dockIndicator.style.transform = 'translateX(' + btn.offsetLeft + 'px)';\n  }\n\n  function selectProduct(i, immediate){\n    current = i;\n    var p = PRODUCTS[i];\n\n    dockBtns.forEach(function(b, bi){ b.classList.toggle('is-active', bi === i); });\n    moveIndicator(i);\n\n    section.style.setProperty('--accent', p.accent);\n    section.style.setProperty('--accent-deep', p.accentDeep);\n    badgeIcon.innerHTML = '<svg viewBox=\"0 0 24 24\">' + CHECK_ICON + '<\/svg>';\n\n    var swap = function(){\n      pName.textContent = p.name;\n      pTagline.textContent = p.tagline;\n      pDesc.textContent = p.desc;\n      pChips.innerHTML = p.chips.map(function(c){ return '<span class=\"products__chip\">' + c + '<\/span>'; }).join('');\n      pCta.href = p.url;\n      document.getElementById('pCtaLabel').textContent = 'Visit ' + p.name;\n      pDomain.textContent = p.domain;\n      frameUrl.textContent = p.domain;\n\n      if(p.mockup === 'image'){\n        frameBody.innerHTML = '<img decoding=\"async\" class=\"products__frame-img\" src=\"' + p.image + '\" alt=\"' + p.name + ' preview\">';\n      } else if(p.mockup === 'logo'){\n        frameBody.style.background = 'linear-gradient(155deg, ' + p.accent + '22, #0B0F1F 70%)';\n        frameBody.innerHTML = '<img decoding=\"async\" class=\"products__frame-logo\" src=\"' + p.image + '\" alt=\"' + p.name + ' logo\">';\n      } else {\n        frameBody.style.background = '#070A16';\n        frameBody.innerHTML = ABSTRACT[p.abstractKey](p.accent) +\n          '<span class=\"products__frame-caption\">Conceptual preview<\/span>';\n      }\n\n      panel.classList.add('is-visible');\n      framePanel.classList.add('is-visible');\n    };\n\n    if(immediate){\n      swap();\n    } else {\n      panel.classList.remove('is-visible');\n      framePanel.classList.remove('is-visible');\n      setTimeout(swap, 220);\n    }\n  }\n\n  window.addEventListener('resize', function(){ moveIndicator(current); });\n\n  if('IntersectionObserver' in window){\n    var seen = false;\n    var io = new IntersectionObserver(function(entries){\n      entries.forEach(function(entry){\n        if(entry.isIntersecting && !seen){\n          seen = true;\n          selectProduct(0, true);\n          io.disconnect();\n        }\n      });\n    }, {threshold:0.2});\n    io.observe(section);\n  } else {\n    selectProduct(0, true);\n  }\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Our Products Software we&#8217;ve built, not just supported A look at some of the standalone products to come out of our development team \u2014 real tools, built for real problems, live right now. Live Product Visit product Have an idea like this? We design and build custom software products end to end \u2014 not just IT support. If you&#8217;ve got a concept that needs a real build, let&#8217;s talk about it. Start a Conversation<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"blank-canvas","meta":{"_gspb_post_css":"","om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"footnotes":""},"class_list":["post-493","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/monichron.co.za\/index.php\/wp-json\/wp\/v2\/pages\/493","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/monichron.co.za\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/monichron.co.za\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/monichron.co.za\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/monichron.co.za\/index.php\/wp-json\/wp\/v2\/comments?post=493"}],"version-history":[{"count":1,"href":"https:\/\/monichron.co.za\/index.php\/wp-json\/wp\/v2\/pages\/493\/revisions"}],"predecessor-version":[{"id":494,"href":"https:\/\/monichron.co.za\/index.php\/wp-json\/wp\/v2\/pages\/493\/revisions\/494"}],"wp:attachment":[{"href":"https:\/\/monichron.co.za\/index.php\/wp-json\/wp\/v2\/media?parent=493"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}