1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[13116],{27474:function(a,b,c){(window.__NEXT_P=window.__NEXT_P||[]).push(["/case-studies/afcu",function(){return c(79105)}])},65436:function(a,b,c){"use strict";var d=c(85893),e=c(35736),f=c(71819),g=c(57344);function h(){var a,b,c=(a=["\n position: relative;\n padding-top: 63px;\n overflow: hidden;\n\n .cta-accent-top {\n position: absolute;\n left: calc(50% - -348px);\n top: -11px;\n z-index: 2;\n @media (max-width: 950px) {\n left: calc(50%);\n }\n }\n .cta-accent-bottom {\n position: absolute;\n left: calc(50% - 925px);\n bottom: 13px;\n z-index: 2;\n\n @media (max-width: 950px) {\n display: none;\n }\n }\n\n .inner {\n .block-graphic {\n position: absolute;\n top: -20px;\n left: calc(50% + 219px);\n @media (max-width: 950px) {\n display: none;\n }\n }\n .bg-graphic {\n position: absolute;\n top: 0;\n left: calc(50% + -750px);\n height: 100%;\n }\n\n background: black;\n max-width: 100%;\n position: relative;\n display: grid;\n place-items: center;\n padding: 75px 30px;\n\n h2 {\n font-size: 38px;\n font-style: normal;\n font-weight: 700;\n line-height: 1.25;\n color: white;\n width: 460px;\n max-width: 100%;\n @media (max-width: 500px) {\n width: 300px;\n }\n }\n\n .inner-inner {\n width: 745px;\n max-width: 100%;\n position: relative;\n z-index: 2;\n @media (max-width: 800px) {\n width: unset;\n }\n\n p {\n font-size: 18px;\n font-style: normal;\n font-weight: 400;\n line-height: 1.5;\n color: white;\n margin: 20px 0;\n }\n }\n }\n"],b||(b=a.slice(0)),Object.freeze(Object.defineProperties(a,{raw:{value:Object.freeze(b)}})));return h=function(){return c},c}var i=c(19521).default.section(h());b.Z=function(a){var b=a.header,c=a.paragraph,h=a.btnText,j=a.btnHref,k=a.blueButton,l=a.className;return(0,d.jsxs)(i,{className:"cta-2023".concat(l?" ".concat(l):""),children:[(0,d.jsx)(f.Z,{className:"cta-accent-top",url:"https://assets.mx.com/images/accent-graphics/cta-accent-top.svg"}),(0,d.jsx)(f.Z,{className:"cta-accent-bottom",url:"https://assets.mx.com/images/accent-graphics/cta-accent-bottom.svg"}),(0,d.jsxs)("div",{className:"inner",children:[(0,d.jsx)("img",{className:"block-graphic",src:"https://assets.mx.com/images/resources/2023/bg-block.svg",alt:"bg block"}),(0,d.jsx)("img",{className:"bg-graphic",src:"https://assets.mx.com/images/resources/2023/cta-bg.jpg",alt:"cta bg"}),(0,d.jsxs)("div",{className:"inner-inner",children:[(0,d.jsx)("h2",{children:b}),!c&&(0,d.jsx)(g.Z,{size:33}),c&&(0,d.jsx)("p",{children:c}),k?(0,d.jsx)(e.Z,{href:j,text:h}):(0,d.jsx)(e.Z,{href:j,text:h,darkOutlined:!0})]})]})]})}},14996:function(a,b,c){"use strict";var d=c(85893);function e(){var a,b,c=(a=["\n display: inline-flex;\n align-items: center;\n svg {\n transition: rotate ease 0.3s;\n }\n &.down svg {\n rotate: 90deg;\n }\n &.left svg {\n rotate: 180deg;\n }\n"],b||(b=a.slice(0)),Object.freeze(Object.defineProperties(a,{raw:{value:Object.freeze(b)}})));return e=function(){return c},c}var f=c(19521).default.div(e());b.Z=function(a){var b=a.color,c=a.direction,e=a.down,g=a.onClick;return(0,d.jsx)(f,{onClick:g,className:"arrow ".concat(c||""," ").concat(e?"down":""),children:(0,d.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"7",height:"12",viewBox:"0 0 7 12",fill:"none",children:(0,d.jsx)("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M0.292893 0.292893C0.683417 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L6.70711 5.29289C7.09763 5.68342 7.09763 6.31658 6.70711 6.70711L1.70711 11.7071C1.31658 12.0976 0.683417 12.0976 0.292893 11.7071C-0.0976311 11.3166 -0.0976311 10.6834 0.292893 10.2929L4.58579 6L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683417 0.292893 0.292893Z",fill:b||"#2C64EF"})})})}},2498:function(a,b,c){"use strict";var d=c(85893),e=c(67294),f=c(11405);b.Z=function(a){var b=a.children,c=a.onlyOnce,g=(0,e.useState)(""),h=g[0],i=g[1],j=(0,e.useRef)();return(0,e.useEffect)(function(){var a=function(){if(!h||!c){var a=f.Z.isHalfInViewport(j.current,300);a!=h&&i(a)}};return window.addEventListener("scroll",a),a(),function(){window.removeEventListener("scroll",a)}}
1,[h]),(0,d.jsx)("div",{ref:j,className:h?"on-screen":"",children:b})}},29624:function(a,b,c){"use strict";var d=c(85893);c(67294);var e=c(19521);function f(){var a,b,c=(a=["\n background: #000;\n position: relative;\n overflow: hidden;\n width: 1191px;\n max-width: 100%;\n margin: 0 auto;\n border-radius: 200px;\n margin-bottom: 50px;\n padding: 80px 20px;\n box-sizing: content-box;\n\n @media only screen and (max-width: 1100px) {\n max-width: 90%;\n }\n\n @media only screen and (max-width: 600px) {\n max-width: 100%;\n border-radius: 20px;\n }\n\n &:after {\n filter: blur(100px);\n position: absolute;\n width: 100%;\n height: 80%;\n z-index: 1;\n content: \"\";\n top: 0;\n left: 0;\n background: linear-gradient(\n 212deg,\n rgba(0, 188, 248, 100) 18.9%,\n rgba(0, 117, 255, 100) 42.9%,\n rgba(155, 63, 223, 100) 74.43%\n );\n }\n\n @media only screen and (max-width: 1200px) {\n box-sizing: border-box;\n }\n\n .text {\n position: relative;\n z-index: 2;\n padding: 0 100px;\n\n @media only screen and (max-width: 1100px) {\n padding: 0 50px;\n }\n @media only screen and (max-width: 600px) {\n padding: 0 20px;\n }\n\n blockquote {\n }\n\n p {\n color: #fff;\n font-size: 24px;\n font-weight: 300;\n line-height: 1.6;\n margin: 0;\n\n @media only screen and (max-width: 1100px) {\n font-size: 18px;\n }\n }\n .name {\n color: #fff;\n font-weight: 700;\n font-size: 18px;\n margin: 20px 0 0 0;\n\n @media only screen and (max-width: 1100px) {\n font-size: 16px;\n }\n }\n .title {\n color: #fff;\n font-weight: 300;\n font-size: 18px;\n @media only screen and (max-width: 1100px) {\n font-size: 16px;\n }\n }\n }\n\n .quote-logo {\n position: absolute;\n right: 100px;\n bottom: 0;\n\n @media only screen and (max-width: 800px) {\n right: unset;\n position: relative;\n display: block;\n text-align: center;\n width: fit-content;\n margin: 0 auto;\n margin-top: 20px;\n }\n }\n"],b||(b=a.slice(0)),Object.freeze(Object.defineProperties(a,{raw:{value:Object.freeze(b)}})));return f=function(){return c},c}c(71819),c(35736);var g=e.default.div.withConfig({componentId:"sc-d98df5f9-0"})(f());b.Z=function(a){var b=a.quoteText,c=a.quoteeName,e=a.quoteeTitle,f=a.clientLogo;return(0,d.jsx)(d.Fragment,{children:(0,d.jsx)(g,{className:"quote",children:(0,d.jsxs)("div",{className:"text",children:[(0,d.jsx)("blockquote",{children:b}),(0,d.jsx)("p",{className:"name",children:c}),(0,d.jsx)("p",{className:"title",children:e}),f&&(0,d.jsx)("img",{className:"quote-logo",src:f,alt:"logo"})]})})})}},71819:function(a,b,c){"use strict";c.d(b,{Z:function(){return m}});var d=c(85893),e=c(34051),f=c.n(e),g=c(67294);function h(a,b,c,d,e,f,g){try{var h=a[f](g),i=h.value}catch(j){c(j);return}h.done?b(i):Promise.resolve(i).then(d,e)}var i=function(a){var b=a.url;a.animateClass;var c=(0,g.useRef)(null);return(0,g.useEffect)(function(){var a,d;(a=f().mark(function a(){var d,e,g,h,i,j;return f().wrap(function(a){for(;;)switch(a.prev=a.next){case 0:return a.prev=2,a.next=5,fetch(b);case 5:return d=a.sent,a.next=8,d.text();case 8:e=a.sent,a.next=13;break;case 11:a.prev=11,a.t0=a.catch(2);case 13:if(d){a.next=15;break}return a.abrupt("return");case 15:(i=(h=(g=new DOMParser()).parseFromString(e,"image/svg+xml")).documentElement).setAttribute("xmlns","http://www.w3.org/2000/svg"),(j=Array.from(i.children)).forEach(function(a,b){a.classList.contains("dont-animate")||(a.classList.add("loadified"),a.style.animationDelay="".concat(.2*b,"s"))}),c&&c.current&&c.current.replaceWith(i);case 22:case"end":return a.stop()}},a,null,[[2,11]])}),d=function(){var b=this,c=arguments;return new Promise(function(d,e){var f=a.apply(b,c);function g(a){h(f,d,e,g,i,"next",a)}function i(a){h(f,d,e,g,i,"throw",a)}g(void 0)})},function(){return d.apply(this,arguments)})()},[b]),(0,d.jsx)(d.Fragment,{children:(0,d.jsx)("div",{ref:c})})},j=c(2498);function k(){var a,b,c=(a=["\n position: absolute;\n z-index: -1;\n\n svg {\n overflow: visible;\n }\n\n @keyframes loadified-left-in {\n 0% {\n translate: 100px;\n opacity: 0;\n }\n 100% {\n translate: 0px;\n opacity: 1;\n }\n }\n\n @keyframes loadified-right-in {\n 0% {\n translate: -100px;\n opacity: 0;\n }\n 100% {\n translate: 0px;\n opacity: 1;\n }\n }\n\n .loadified {\n animation-duration: 2s;\n animation-fill-mode: forwards;\n animation-timing-function: ease;\n opacity: 0;\n }\n\n .on-screen {\n .loadified:nth-child(odd) {\n animation-name: loadified-left-in;\n }\n\n .loadified:nth-child(even) {\n animation-name: loadified-right-in;\n }\n }\n"],b||(b=a.slice(0)),Object.freeze(Object.defineProperties(a,{raw:{value:Object.freeze(b)}})));return k=function(){return c},c}var l=c(19521).default.div(k()),m=function(a){var b=a.className,c=a.url;return(0,d.jsx)(l,{className:"fade-accent ".concat(b),children:(0,d.jsx)(j.Z,{children:(0,d.jsx)(i,{url:c})})})}},99057:function(a,b,c){"use strict";var d=c(47902);b.Z=d.Z},69170:function(a,b,c){"use strict";var d=c(31672);b.Z=d.Z},79105:function(a,b,c){"use strict";c.r(b);var d=c(85893);c(67294);var e=c(63189),f=c(19521),g=c(69170),h=c(99057),i=c(39994),j=c(71819),k=c(65436),l=c(14996),m=c(35736),n=c(57344),o=c(29624);function p(a,b){return b||(b=a.slice(0)),Object.freeze(Object.defineProperties(a,{raw:{value:Object.freeze(b)}}))}function q(){var a=p(["\n overflow: hidden;\n position: relative;\n\n //tweak just for this page\n .quote-logo {\n width: 172px;\n }\n\n @media only screen and (max-width: 1100px) {\n overflow: hidden;\n }\n\n p {\n font-size: 16px;\n font-weight: 300;\n line-height: 1.2;\n }\n\n .popup-video {\n top: 30px;\n background-color: #000;\n padding: 0;\n\n @media only screen and (max-width: 900px) {\n top: 50px;\n }\n\n #close-x {\n top: -25px;\n right: -35px;\n filter: invert(1);\n\n @media only screen and (max-width: 900px) {\n top: -40px;\n right: 0;\n margin: auto;\n }\n }\n }\n\n .hero-accent-1 {\n @media only screen and (max-width: 1100px) {\n display: none;\n }\n }\n\n #hero-bottom-wrap {\n width: 100%;\n position: relative;\n z-index: -1;\n .accent-hero-bottom {\n position: absolute;\n bottom: -31px;\n left: calc(50% - 1595px);\n z-index: 5;\n @media only screen and (max-width: 1100px) {\n left: calc(50% - 1285px);\n }\n }\n }\n"]);return q=function(){return a},a}function r(){var a=p(["\n position: relative;\n z-index: 1;\n padding: 0;\n background: #000;\n margin-bottom: 20px;\n\n #bg-wrap {\n position: absolute;\n height: 100%;\n width: 100%;\n overflow: hidden;\n top: 0;\n right: 0;\n }\n #hero-bg-gradient {\n position: absolute;\n top: -237px;\n right: calc(50% - 868px);\n z-index: -1;\n width: 1200px;\n pointer-events: none;\n @media only screen and (max-width: 1100px) {\n top: unset;\n bottom: -307px;\n right: calc(50% - 466px);\n }\n }\n\n #hero-black-overlay {\n position: absolute;\n height: 100px;\n background: linear-gradient(0deg, #000 20%, transparent 100%);\n left: 0;\n right: 0;\n width: 100%;\n bottom: 0;\n z-index: 1;\n }\n\n .back-arrow {\n font-style: normal !important;\n font-weight: 600 !important;\n font-size: 16px !important;\n line-height: 1 !important;\n color: #0075ff !important;\n cursor: pointer !important;\n margin-top: 15px !important;\n margin-bottom: 50px;\n display: block;\n\n .arrow {\n margin-right: 10px;\n /* transition: transform 0.3s ease; */\n }\n\n &:hover {\n .arrow {\n /* transform: translateX(-10px); */\n }\n }\n }\n\n .case-featured-logo {\n border-radius: 30px;\n line-height: 1;\n margin: 0;\n width: fit-content;\n display: flex;\n margin-bottom: 30px;\n border: 1px solid #fff;\n max-height: 70px;\n overflow: hidden;\n\n @media only screen and (max-width: 1100px) {\n margin: 0 auto 30px auto;\n ",";\n }\n }\n\n .partner-logo-wrap {\n border-radius: 0 30px 30px 0;\n padding: 15px 30px 15px 5px;\n background: #fff;\n width: 100%;\n margin-left: -2px;\n\n .partner-logo {\n height: 20px;\n }\n }\n\n .mx-logo-wrap {\n display: flex;
1\n align-items: center;\n padding-right: 20px;\n background: linear-gradient(-70deg, #fff 0%, #fff 25px, transparent 10px);\n width: 90px;\n\n .mx-logo {\n padding: 0 0 0 20px;\n margin-right: 10px;\n box-sizing: content-box;\n width: 40px;\n height: auto;\n }\n }\n\n .wrapper {\n position: relative;\n width: 1191px;\n max-width: 100%;\n margin: 0 auto;\n padding: 0 20px;\n box-sizing: content-box;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n\n @media only screen and (max-width: 1250px) {\n box-sizing: border-box;\n }\n @media only screen and (max-width: 1100px) {\n padding: 0;\n flex-direction: column;\n align-items: center;\n text-align: center;\n }\n\n @media only screen and (max-width: 600px) {\n box-sizing: border-box;\n }\n\n .hero-cta-btns {\n display: flex;\n width: 100%;\n align-items: center;\n margin-top: 50px;\n position: relative;\n z-index: 5;\n\n @media only screen and (max-width: 1100px) {\n margin: 30px auto 0 auto;\n justify-content: space-between;\n width: 600px;\n justify-content: center;\n }\n @media only screen and (max-width: 700px) {\n width: 100%;\n flex-direction: column;\n }\n\n .primary-button {\n }\n\n .video-btn {\n display: flex;\n align-items: center;\n margin-left: 100px;\n\n @media only screen and (max-width: 700px) {\n text-align: center;\n flex-direction: column;\n margin: 30px auto;\n }\n\n p {\n font-size: 15px;\n font-style: normal;\n font-weight: 700;\n color: #fff;\n\n @media only screen and (max-width: 700px) {\n margin-bottom: 15px;\n }\n }\n\n img {\n margin-left: 20px;\n width: 171px;\n cursor: pointer;\n }\n }\n }\n .hero-img-wrap {\n position: relative;\n top: 48px;\n width: 450px;\n max-width: 100%;\n z-index: 2;\n margin-left: 40px;\n align-self: center;\n\n @media only screen and (max-width: 1200px) {\n margin-left: 0;\n padding-left: 20px;\n }\n\n @media only screen and (max-width: 1100px) {\n padding-left: 0;\n margin: 0 auto;\n width: 100%;\n }\n\n .hero-tall-img {\n transform-origin: left;\n pointer-events: none;\n width: 676px;\n top: 2px;\n left: 10px;\n position: relative;\n z-index: 2;\n\n @media only screen and (max-width: 1200px) {\n transform: scale(1);\n }\n\n @media only screen and (max-width: 1100px) {\n padding: 0 20px;\n left: 0px;\n }\n\n @media only screen and (max-width: 600px) {\n width: 100%;\n }\n }\n .hero-user-back {\n position: absolute;\n bottom: 219px;\n left: 57px;\n z-index: 1;\n @media only screen and (max-width: 1100px) {\n left: calc(50% - 235px);\n }\n @media only screen and (max-width: 500px) {\n left: calc(50% - 235px);\n scale: 0.8;\n transform-origin: bottom;\n bottom: 129px;\n }\n @media only screen and (max-width: 370px) {\n scale: 0.7;\n bottom: 80px;\n }\n }\n .hero-user-bottom {\n position: absolute;\n bottom: -18px;\n left: 107px;\n z-index: 3;\n @media only screen and (max-width: 1100px) {\n left: calc(50% - 175px);\n }\n @media only screen and (max-width: 500px) {\n scale: 0.6;\n }\n }\n }\n\n .content {\n z-index: 1;\n max-width: 100%;\n padding: 40px 0 50px 0;\n display: flex;\n justify-content: space-between;\n height: 495px;\n\n @media only screen and (max-width: 1100px) {\n height: auto;\n width: 100%;\n padding: 40px 0 0 0;\n flex-direction: column;\n box-sizing: border-box;\n }\n\n #hero-logo {\n width: 256px;\n max-width: 90%;\n }\n\n h1 {\n color: #fff;\n font-size: 48px;\n font-weight: 600;\n line-height: 1.2;\n margin-bottom: 20px;\n width: 400px;\n @media only screen and (max-width: 1100px) {\n margin-top: 20px;\n width: auto;\n }\n\n @media only screen and (max-width: 600px) {\n font-size: 30px;\n }\n }\n & > div > p {\n color: #fff;\n font-size: 21px;\n font-weight: 300;\n line-height: 1.4;\n margin-bottom: 30px;\n\n @media only screen and (max-width: 1100px) {\n margin: 0 auto;\n }\n @media only screen and (max-width: 600px) {\n font-size: 18px;\n }\n }\n }\n }\n .hero-top {\n top: 33px;\n right: 427px;\n z-index: 3;\n @media only screen and (max-width: 1100px) {\n right: -76px;\n }\n @media only screen and (max-width: 650px) {\n display: none;\n }\n }\n"]);return r=function(){return a},a}function s(){var a=p(["\n width: 1191px;\n max-width: 100%;\n margin: 0 auto;\n position: relative;\n padding: 0 20px;\n box-sizing: content-box;\n margin-top: 100px;\n\n p.intro {\n max-width: calc(100% - 30px);\n @media only screen and (max-width: 1100px) {\n max-width: 100%;\n }\n\n color: #000;\n font-size: 16px;\n font-weight: 400;\n line-height: 24px;\n\n @media only screen and (max-width: 600px) {\n padding: 0 3
10px;\n }\n }\n\n @media only screen and (max-width: 1100px) {\n flex-direction: column;\n padding: 0 20px;\n box-sizing: border-box;\n }\n\n .hero-accent-1 {\n z-index: 2;\n top: 120px;\n right: -10px;\n\n @media only screen and (max-width: 1100px) {\n top: 135px;\n right: -150px;\n }\n @media only screen and (max-width: 900px) {\n display: none;\n }\n }\n\n p {\n font-size: 16px;\n font-weight: 300;\n line-height: 1.6;\n }\n\n & > p {\n max-width: 100%;\n\n @media only screen and (max-width: 1100px) {\n min-height: initial;\n margin: 0 auto 50px auto;\n text-align: center;\n width: 700px;\n }\n }\n\n #challenge-solution {\n display: flex;\n justify-content: space-between;\n flex-direction: column;\n margin: 50px auto;\n\n @media only screen and (max-width: 1100px) {\n flex-direction: column;\n }\n\n p {\n margin: 10px 0;\n color: #000;\n font-size: 16px;\n font-weight: 400;\n line-height: 24px;\n }\n\n .col-2 {\n max-width: calc(100% - 30px);\n\n @media only screen and (max-width: 1100px) {\n width: 663px;\n flex-direction: column;\n align-items: center;\n margin: 0 auto;\n text-align: center;\n }\n\n & > div {\n @media only screen and (max-width: 1100px) {\n width: 663px;\n max-width: 100%;\n }\n\n &:first-child {\n margin-right: 40px;\n\n @media only screen and (max-width: 1100px) {\n margin-right: 0;\n }\n }\n }\n }\n\n h2 {\n color: #0075ff;\n font-size: 32px;\n font-weight: bold;\n margin-bottom: 20px;\n\n @media only screen and (max-width: 1100px) {\n text-align: center;\n }\n }\n\n ul {\n padding-left: 20px;\n list-style: disc;\n margin-top: 20px;\n\n li {\n margin: 10px 0;\n line-height: 1.6;\n }\n }\n\n #solution {\n h3 {\n color: #0075ff;\n font-size: 20px;\n font-style: normal;\n font-weight: 400;\n line-height: 1.2;\n }\n i {\n color: #000;\n font-size: 16px;\n font-style: italic;\n font-weight: 400;\n line-height: 24px;\n }\n @media only screen and (max-width: 1100px) {\n width: 663px;\n max-width: 100%;\n margin: 0 auto;\n }\n }\n }\n"]);return s=function(){return a},a}function t(){var a=p(["\n background: #000;\n padding: 50px 0 70px;\n text-align: center;\n position: relative;\n\n .accent-benefits-left {\n left: calc(50% + 444px);\n top: 83px;\n z-index: 2;\n }\n\n h2 {\n color: #fff;\n font-size: 32px;\n font-weight: 600;\n margin-bottom: 50px;\n }\n\n .accent-benefits-mid {\n left: calc(50% - 639px);\n bottom: -30px;\n z-index: 2;\n @media only screen and (max-width: 950px) {\n left: unset;\n right: -46px;\n }\n }\n\n .wrapper {\n width: 652px;\n max-width: 100%;\n margin: 0 auto;\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n\n .benefit {\n text-align: center;\n margin: 10px 0;\n box-sizing: content-box;\n width: 246px;\n &.wide {\n @media only screen and (min-width: 700px) {\n width: 300px;\n }\n }\n\n @media only screen and (max-width: 700px) {\n width: 100%;\n padding: 20px;\n margin: 0;\n }\n\n img {\n margin-bottom: 20px;\n height: 70px;\n }\n p {\n color: #fff;\n font-size: 14px;\n font-weight: 300;\n line-height: 1.6;\n\n @media only screen and (max-width: 700px) {\n width: 200px;\n max-width: 100%;\n margin: 0 auto;\n }\n }\n }\n }\n"]);return t=function(){return a},a}function u(){var a=p(["\n position: relative;\n padding: 0px 20px 50px;\n box-sizing: content-box;\n\n .squeeze-in {\n margin-bottom: -50px;\n }\n\n .accent-feature-1 {\n position: absolute;\n right: 200px;\n bottom: -30px;\n z-index: -1;\n height: 100px;\n\n @media only screen and (max-width: 1100px) {\n display: none;\n }\n }\n\n .accent-feature-2 {\n left: 0;\n top: 0;\n }\n .accent-feature-3 {\n right: 300px;\n bottom: 0;\n\n @media only screen and (max-width: 600px) {\n display: none;\n }\n }\n .accent-feature-bottom {\n left: -79px;\n bottom: 25px;\n @media only screen and (max-width: 1100px) {\n bottom: 0;\n }\n }\n\n .wrapper {\n width: 1191px;\n max-width: 100%;\n margin: 0 auto;\n }\n .feature {\n display: flex;\n position: relative;\n\n @media only screen and (max-width: 1100px) {\n flex-direction: column-reverse;\n padding: 0 20px;\n margin-top: 20px;\n }\n\n &.v-center {\n align-items: center;\n }\n\n .link-line {\n margin-top: 20px;\n }\n\n .text {\n width: 596px;\n max-width: 100%;\n margin-right: 30px;\n margin-top: 70px;\n\n @media only screen and (max-width: 1100px) {\n margin: 20px auto !important;\n }\n\n h3 {\n font-size: 32px;\n font-style: normal;\n font-weight: 700;\n line-height: 1;\n margin-bottom: 30px;\n }\n p {\n font-size: 16px;\n font-weight: 300;\n line-height: 1.5;\n }\n }\n img {\n width: 600px;\n max-width: 100%;\n }\n &.reverse {\n flex-direction: row-reverse;\n\n @media only screen and (max-width: 1100px) {\n flex-direction: column-reverse;\n }\n\n .text {\n margin-left: 30px;\n margin-right: 0;\n }\n }\n\n #product-image-1 {\n position: relative;\n width: 702px;\n scale: 1.09;\n left: -6px;\n top: 50px;\n @media only screen and (max-width: 1100px) {\n left: unset;\n top: -42px;\n margin-top: 80px;\n }\n }\n }\n"]);return u=function(){return a},a}function v(){var a=p(["\n .outer-wrap {\n flex-direction: column;\n display: flex;
1\n align-items: center;\n }\n\n h2 {\n color: #000;\n text-align: center;\n font-size: 22px;\n font-weight: 700;\n line-height: 35px;\n @media only screen and (max-width: 1100px) {\n padding: 0 30px;\n }\n }\n\n .box-wrap {\n display: grid;\n grid-gap: 26px;\n position: relative;\n grid-template-columns: 406px 323px 406px;\n grid-template-rows: 172px 172px;\n\n @media only screen and (max-width: 1350px) {\n scale: 0.9;\n }\n @media only screen and (max-width: 1200px) {\n scale: 1;\n grid-template-columns: 1.25fr 1fr 1.25fr;\n grid-template-rows: auto auto;\n padding: 0 30px;\n }\n @media only screen and (max-width: 950px) {\n grid-template-columns: 1fr 1fr;\n }\n @media only screen and (max-width: 500px) {\n grid-template-columns: 1fr;\n }\n }\n\n .blue-box {\n flex-direction: column;\n display: flex;\n border-radius: 15px;\n border: 2px solid #0075ff;\n padding: 23px 20px;\n box-sizing: border-box;\n\n .stars-5 {\n margin-top: 10px;\n }\n\n @media only screen and (max-width: 1200px) {\n height: fit-content;\n }\n\n @media only screen and (min-width: 1201px) {\n &.new-app {\n height: 191px;\n }\n\n &.should-be {\n height: 153px;\n position: relative;\n top: 17px;\n }\n }\n\n &.double-row {\n @media only screen and (min-width: 500px) {\n grid-area: 1/2/3/3;\n }\n }\n\n p {\n text-align: left;\n color: #000;\n font-size: 18px;\n line-height: 26px;\n }\n }\n\n .stars-5 {\n width: 163.312px;\n }\n\n .quote-top-left {\n position: absolute;\n left: -76px;\n top: -75px;\n @media only screen and (max-width: 1200px) {\n left: 10px;\n }\n }\n\n .quote-bottom-right {\n position: absolute;\n right: -76px;\n bottom: -75px;\n transform: rotate(180deg);\n @media only screen and (max-width: 1200px) {\n right: 10px;\n }\n }\n"]);return v=function(){return a},a}function w(){var a=p(["\n z-index: 1;\n position: absolute;\n ",";\n ","\n ","\n ","\n width: ",";\n background: #000;\n height: ",";\n"]);return w=function(){return a},a}var x=f.default.div.withConfig({componentId:"sc-e78a359b-0"})(q()),y=f.default.div.withConfig({componentId:"sc-e78a359b-1"})(r(),function(a){return"".concat(a.noHeaderImage&&"margin: 30px auto")}),z=f.default.div.withConfig({componentId:"sc-e78a359b-2"})(s()),A=f.default.div.withConfig({componentId:"sc-e78a359b-3"})(t()),B=f.default.div.withConfig({componentId:"sc-e78a359b-4"})(u()),C=f.default.div.withConfig({componentId:"sc-e78a359b-5"})(v()),D=f.default.div.withConfig({componentId:"sc-e78a359b-6"})(w(),function(a){return a.top&&"top: ".concat(a.top,";")},function(a){return a.bottom&&"bottom: ".concat(a.bottom,";")},function(a){return a.left&&"left: ".concat(a.left,";")},function(a){return a.right&&"right: ".concat(a.right,";")},function(a){return a.width?a.width:"100%"},function(a){return a.height?a.height:"50px"});b.default=function(a){var a=null!==a?a:function(a){throw a}(new TypeError("Cannot destructure undefined"));return(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(e.Z,{title:"AFCU Delights Members Using MX Mobile | Case Study",meta:"With the MX Mobile Banking cross-platform framework, AFCU improved mobile app ratings, customer satisfaction, and engagement.",metaImage:"https://assets.mx.com/images/case-studies/afcu/meta.jpg"}),(0,d.jsx)(g.Z,{}),(0,d.jsxs)(x,{children:[(0,d.jsxs)(y,{className:"hero",children:[(0,d.jsx)("div",{id:"bg-wrap",children:(0,d.jsx)("img",{src:"https://assets.mx.com/images/case-studies/cure-for-lost-deposits/bg-gradient.svg",alt:"background gradient",id:"hero-bg-gradient"})}),(0,d.jsx)("div",{className:"wrapper",children:(0,d.jsxs)("div",{className:"content",children:[(0,d.jsxs)("div",{children:[(0,d.jsxs)("a",{className:"back-arrow",href:"/case-studies/",children:[(0,d.jsx)(l.Z,{color:"#0075FF",direction:"left"}),"View All Case Studies"]}),(0,d.jsx)("img",{src:"https://assets.mx.com/images/case-studies/afcu/mx-america-first-logo.png",alt:"mx + america first logo",id:"hero-logo"}),(0,d.jsx)(n.Z,{size:12}),(0,d.jsx)("h1",{children:"The Future of Mobile Banking"}),(0,d.jsx)("p",{children:"AFCU Delights Members Using MX Mobile"}),(0,d.jsx)("div",{className:"hero-cta-btns",children:(0,d.jsx)(m.Z,{text:"Download the PDF",href:"https://assets.mx.com/images/case-studies/afcu/afcu.pdf"})})]}),(0,d.jsxs)("div",{className:"hero-img-wrap",children:[(0,d.jsx)("img",{className:"hero-tall-img",src:"https://assets.mx.com/images/case-studies/afcu/hero-user.png",alt:"product image"}),(0,d.jsx)(j.Z,{className:"hero-user-bottom",url:"https://assets.mx.com/images/accent-graphics/case-studies/afcu/hero-user-bottom.svg"})]})]})})]}),(0,d.jsx)("div",{id:"hero-bottom-wrap",children:(0,d.jsx)(j.Z,{className:"accent-hero-bottom",url:"https://assets.mx.com/images/accent-graphics/case-studies/afcu/hero-bottom.svg"})}),(0,d.jsx)(n.Z,{size:12,mobile:1100,mSize:20}),(0,d.jsxs)(z,{children:[(0,d.jsx)("p",{className:"intro",children:"As the largest credit union in the state of Utah, America First boasts a long-standing history and 78 years serving members â and has become one of the largest, most stable and most progressive credit unions in the country while remaining a member-owned, not-for-profit cooperative financial institution. Today, America First has 119 locations, and is the eighth largest credit union in assets in the United States with over $18 billion, and the fifth largest credit union in membership in America with more than 1.3 million members."}),(0,d.jsx)(n.Z,{size:1}),(0,d.jsxs)("div",{id:"challenge-solution",children:[(0,d.jsxs)("div",{id:"challenge",className:"col-2",children:[(0,d.jsx)("h2",{children:"The Challenge"}),(0,d.jsx)("div",{children:(0,d.jsx)("div",{children:(0,d.jsx)("p",{children:"When it comes to its mobile offering, America First Credit Union (AFCU) has one primary goal in mind: Delight its members. This goal is why the MX Mobile Banking (formerly called Helios) cross- platform framework caught AFCUâs attention. It was drawn to the way MX Mobile Banking would give AFCU the ability to quickly port its app to many platforms. From a certain perspective, offering an app based on this framework was a bold move. AFCU had been using a waterfall development approach, where programmers would make a long laundry list of changes over months and possibly years before implementing them."})})})]}),(0,d.jsx)(n.Z,{size:50}),(0,d.jsxs)("div",{id:"solution",className:"col-2",children:[(0,d.jsx)("h2",{children:"The Solution"}),(0,d.jsx)("div",{children:(0,d.jsx)("div",{children:(0,d.jsxs)("p",{children:["MX uses an agile approach, releasing updates within weeks. With the MX Mobile Banking cross-platform framework, AFCUâs mobile app shot from a D to an A+ in appbot ratings, and the app is showing a 4.5+ star rating in both the Apple and Android app stores â up from an average rating of 2.5 with the prior version. In addition, MX is able to quickly respond to complaints and publish new versions of the app. âGoing forward weâre going to appreciate the agile development that MX provides,â Brice Mindrum, Mobile Services Manager at AFCU said. âItâs a vastly better way than the huge, monolithic upgrades we were doing before.",(0,d.jsx)("br",{}),(0,d.jsx)("br",{}),"Mindrum added, âWe were essentially cruising along on a nice cruise ship that worked, and we jumped overboard and got on a yacht. We can now move quickly and cater to the needs of members in a personalized way. The safe decision was to stay on the cruise ship. But that wasnât the decision that would delight our members.â",(0,d.jsx)("br",{}),(0,d.jsx)("br",{}),"Finally, AFCU has also been pleased with the people at MX. âFrom a development and knowledge standpoint, you wonât find anyone above what the MX engineering team has to offer,â
1 Mindrum said. âThe integration process has been fantastic, and the team has been ready to help along the way.â"]})})})]})]})]}),(0,d.jsx)(n.Z,{size:30}),(0,d.jsx)(o.Z,{quoteText:(0,d.jsx)(d.Fragment,{children:(0,d.jsxs)("p",{children:["Our previous app had some good reviews, no question. But as a whole our members were merely satisfied â not delighted."," ",(0,d.jsx)("b",{children:"Now our members are almost uniformly pleased with the experience, and weâre quickly working to make it even better."})]})}),quoteeName:"Brice Mindrum",quoteeTitle:"Mobile Services Manager at AFCU",clientLogo:"https://assets.mx.com/images/case-studies/afcu/america-first-logo.png"}),(0,d.jsx)(n.Z,{size:90}),(0,d.jsx)(C,{children:(0,d.jsxs)("div",{className:"outer-wrap",children:[(0,d.jsx)("h2",{children:"Here is some of the feedback AFCU has received from end users:"}),(0,d.jsx)(n.Z,{size:90}),(0,d.jsx)("div",{children:(0,d.jsxs)("div",{className:"box-wrap",children:[(0,d.jsxs)("div",{className:"blue-box",children:[(0,d.jsxs)("p",{children:["Before the update the app looked old and dated, after the update it looks great! ",(0,d.jsx)("b",{children:"And I love the touchID!"})]}),(0,d.jsx)("div",{children:(0,d.jsx)("img",{alt:"5 stars",className:"stars-5",src:"https://assets.mx.com/images/case-studies/afcu/5-stars.svg"})})]}),(0,d.jsxs)("div",{className:"blue-box new-app",children:[(0,d.jsxs)("p",{children:[(0,d.jsx)("b",{children:"This new app is awesome."}),(0,d.jsx)("br",{}),"Love how I can integrate multiple accounts from multiple sources and have all the info at my fingertips."]}),(0,d.jsx)("div",{children:(0,d.jsx)("img",{alt:"5 stars",className:"stars-5",src:"https://assets.mx.com/images/case-studies/afcu/5-stars.svg"})})]}),(0,d.jsxs)("div",{className:"blue-box double-row",children:[(0,d.jsxs)("p",{children:[(0,d.jsx)("b",{children:"This app is unparalleled. I love how this app is intuitive and easy to use."})," ","Not only can I easily consume my data within minutes. I also spend less time organizing my spending data, due to the amazing categorization engine that power this app, and more time on being strategic with",(0,d.jsx)("br",{}),"my budget."]}),(0,d.jsx)("div",{children:(0,d.jsx)("img",{alt:"5 stars",className:"stars-5",src:"https://assets.mx.com/images/case-studies/afcu/5-stars.svg"})})]}),(0,d.jsxs)("div",{className:"blue-box",children:[(0,d.jsxs)("p",{children:[(0,d.jsx)("b",{children:"Best update possible."})," Now has everything Iâm looking for in a banking app and more!"]}),(0,d.jsx)("div",{children:(0,d.jsx)("img",{alt:"5 stars",className:"stars-5",src:"https://assets.mx.com/images/case-studies/afcu/5-stars.svg"})})]}),(0,d.jsxs)("div",{className:"blue-box should-be",children:[(0,d.jsxs)("p",{children:["This is everything a banking app ",(0,d.jsx)("b",{children:"should be."})]}),(0,d.jsx)("div",{children:(0,d.jsx)("img",{alt:"5 stars",className:"stars-5",src:"https://assets.mx.com/images/case-studies/afcu/5-stars.svg"})})]}),(0,d.jsx)("img",{alt:"quote icon",className:"quote-top-left",src:"https://assets.mx.com/images/case-studies/afcu/quote.svg"}),(0,d.jsx)("img",{alt:"quote icon",className:"quote-bottom-right",src:"https://assets.mx.com/images/case-studies/afcu/quote.svg"})]})})]})}),(0,d.jsx)(n.Z,{size:200}),(0,d.jsxs)(A,{benefits:2,children:[(0,d.jsx)(D,{top:"-10px",right:"0",left:"0",width:"80%",style:{borderRadius:"50px 50px 0 0",margin:"0 auto"}}),(0,d.jsx)("h2",{children:"Key Benefits"}),(0,d.jsxs)("div",{className:"wrapper",children:[(0,d.jsx)(j.Z,{className:"accent-benefits-left",url:"https://assets.mx.com/images/accent-graphics/case-studies/afcu/key-top.svg"}),(0,d.jsx)(j.Z,{className:"accent-benefits-mid",url:"https://assets.mx.com/images/accent-graphics/case-studies/afcu/key-bottom.svg"}),(0,d.jsxs)("div",{className:"benefit",children:[(0,d.jsx)("img",{src:"https://assets.mx.com/images/case-studies/afcu/benefits-icon-1.svg",alt:"icon"}),(0,d.jsx)("p",{children:"AFCUâs mobile app shot from a D to an A+ in appbot ratings"})]}),(0,d.jsxs)("div",{className:"benefit wide",children:[(0,d.jsx)("img",{src:"https://assets.mx.com/images/case-studies/afcu/benefits-icon-2.svg",alt:"icon"}),(0,d.jsx)("p",{children:"Went from average rating of 2.5 to 4.5+ star rating in both the Apple and Android app stores"})]})]})]}),(0,d.jsx)(n.Z,{size:30}),(0,d.jsxs)(B,{children:[(0,d.jsx)("div",{className:"wrapper",children:(0,d.jsxs)("div",{className:"feature v-center",children:[(0,d.jsxs)("div",{className:"text",children:[(0,d.jsx)("h3",{children:"About MX Mobile Banking"}),(0,d.jsx)("p",{children:"MX offers a fully-featured digital banking platform that empowers financial institutions and fintechs to deliver data-driven, contextual, and personalized experiences."}),(0,d.jsx)(i.Z,{href:"/products/mobile-banking/",children:"Learn More"})]}),(0,d.jsx)("img",{id:"product-image-1",src:"https://assets.mx.com/images/case-studies/cure-for-lost-deposits/mobile-banking-apps.png",alt:"product image"})]})}),(0,d.jsx)(n.Z,{size:50,mSize:100,mobile:1100}),(0,d.jsx)(j.Z,{className:"accent-feature-bottom",url:"https://assets.mx.com/images/accent-graphics/case-studies/mobile-first-initiative/pre-cta.svg"})]}),(0,d.jsx)(k.Z,{header:"Ready to Get Started?",paragraph:"Explore how MX can help you get the most from financial data and build better money experiences for consumers.",btnText:"Request Demo",btnHref:"/request-demo/",blueButton:!0})]}),(0,d.jsx)(h.Z,{})]})}},11405:function(a,b){"use strict";b.Z={isDivVerticallyCentered:function(a,b){var c=a.getBoundingClientRect(),d=window.innerHeight/2;return c.top<=d+b&&c.bottom>=d-b},isHalfInViewport:function(a){var b=a.getBoundingClientRect();return b.top+b.height/2>=0&&b.bottom-b.height/2<=window.innerHeight}}},11163:function(a,b,c){a.exports=c(90387)},4298:function(a,b,c){a.exports=c(20699)}},function(a){a.O(0,[7080,31672,49774,92888,40179],function(){return a(a.s=27474)}),_N_E=a.O()}])
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.