Desktop Design

Active States

Mobile Design

Digital bank landing page

<button type="button" class="chakra-button css-7cezz3"><p class="chakra-text css-1wocpjt">Request Invite</p></button>

<div class="css-1gnpvl3"><h2 class="chakra-heading css-1hq5zwo">Why choose Easybank?</h2><p class="chakra-text css-z279rf">We leverage Open Banking to turn your bank account into your financial hub. Control your finances like never before.</p></div>

<h2 class="chakra-heading css-18biwlh">Online Banking</h2>

<p class="chakra-text css-0">Our modern web and mobile applications allow you to keep track of your finances wherever you are in the world.</p>

<h2 class="chakra-heading css-18biwlh">Simple Budgeting</h2>

<p class="chakra-text css-0">See exactly where your money goes each month. Receive notifications when you're close to hitting your limits.</p>

<h2 class="chakra-heading css-18biwlh">Fast Onboarding</h2>

<p class="chakra-text css-0">We don't do branches. Open your account in minutes online and start taking control of your fiances right away.</p>

<p class="chakra-text css-0">Manage your savings, investments, pension, and much more from one account. Tracking your money has never been easier.</p>

<h2 class="chakra-heading css-ofcq6v">Latest Articles</h2>

<div class="css-m67lcb"><p class="chakra-text css-0">About Us</p><p class="chakra-text css-0">Contact</p><p class="chakra-text css-0">Blog</p><p class="chakra-text css-0">Careers</p><p class="chakra-text css-0">Support</p><p class="chakra-text css-0">Privacy Policy</p></div>

<div class="css-1gpxqzj"><button type="button" class="chakra-button css-3tu1jn"><p class="chakra-text css-79wky">Request Invite</p></button><p class="chakra-text css-1oewr8f">© Easybank. All Rights Reserved</p></div>

s-7cezz3`><p class=`chakra-text css-1wocpjt`>Reques

s-b5af11`><p class=`chakra-text css-79wky`>Reques

s-gmuwbf`><img alt=`desktopBg` src=`/_next/static/media/bg-intro-desktop.d3565ef6.svg` decoding=`async` data-nimg=`raw` style=`position:relative;width:clamp(50%,2000px,90%);top:-23vh;z-index:-1;height:auto` srcset=`/_next/static/media/bg-intro-desktop.d3565ef6.svg 1x, /_next/static/media/bg-intro-desktop.d3565ef6.svg 2x` width=`1271` height=`1034`><noscr

/noscript><img alt=`phones` src=`/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fimage-mockups.77453f95.png&amp;w=1920&amp;q=75` decoding=`async` data-nimg=`raw` style=`position:absolute;top:-15vh;z-index:-1;width:clamp(50%,800px,90%);height:auto` srcset=`/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fimage-mockups.77453f95.png&amp;w=828&amp;q=75 1x, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fimage-mockups.77453f95.png&amp;w=1920&amp;q=75 2x` width=`767` height=`939`><noscr

elative;`><img src=`/_next/static/media/icon-online.60d1ce4c.svg` decoding=`async` data-nimg=`fixed` style=`position: absolute; inset: 0px; box-sizing: border-box; padding: 0px; border: medium none; margin: auto; display: block; width: 0px; height: 0px; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%;` srcset=`/_next/static/media/icon-online.60d1ce4c.svg 1x, /_next/static/media/icon-online.60d1ce4c.svg 2x`><noscr

elative;`><img src=`/_next/static/media/icon-budgeting.95f085e6.svg` decoding=`async` data-nimg=`fixed` style=`position: absolute; inset: 0px; box-sizing: border-box; padding: 0px; border: medium none; margin: auto; display: block; width: 0px; height: 0px; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%;` srcset=`/_next/static/media/icon-budgeting.95f085e6.svg 1x, /_next/static/media/icon-budgeting.95f085e6.svg 2x`><noscr

elative;`><img src=`/_next/static/media/icon-onboarding.9165ae79.svg` decoding=`async` data-nimg=`fixed` style=`position: absolute; inset: 0px; box-sizing: border-box; padding: 0px; border: medium none; margin: auto; display: block; width: 0px; height: 0px; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%;` srcset=`/_next/static/media/icon-onboarding.9165ae79.svg 1x, /_next/static/media/icon-onboarding.9165ae79.svg 2x`><noscr

elative;`><img src=`/_next/static/media/icon-api.ec9e04dd.svg` decoding=`async` data-nimg=`fixed` style=`position: absolute; inset: 0px; box-sizing: border-box; padding: 0px; border: medium none; margin: auto; display: block; width: 0px; height: 0px; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%;` srcset=`/_next/static/media/icon-api.ec9e04dd.svg 1x, /_next/static/media/icon-api.ec9e04dd.svg 2x`><n

e`></span><img src=`data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7` decoding=`async` data-nimg=`intrinsic` class=`css-1v0bbpy` style=`position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%`><noscr

s-3tu1jn`><p class=`chakra-text css-79wky`>Reques

a-portal`><ul role=`region` aria-live=`polite` id=`chakra-toast-manager-top` style=`position: fixed; z-index: 5500; pointer-events: none; display: flex; flex-direction: column; margin: 0px auto; top: env(safe-area-inset-top, 0px); right: env(safe-area-inset-right, 0px); left: env(safe-area-inset-left, 0px);`></ul><

x);`></ul><ul role=`region` aria-live=`polite` id=`chakra-toast-manager-top-left` style=`position: fixed; z-index: 5500; pointer-events: none; display: flex; flex-direction: column; top: env(safe-area-inset-top, 0px); left: env(safe-area-inset-left, 0px);`></ul><

x);`></ul><ul role=`region` aria-live=`polite` id=`chakra-toast-manager-top-right` style=`position: fixed; z-index: 5500; pointer-events: none; display: flex; flex-direction: column; top: env(safe-area-inset-top, 0px); right: env(safe-area-inset-right, 0px);`></ul><

x);`></ul><ul role=`region` aria-live=`polite` id=`chakra-toast-manager-bottom-left` style=`position: fixed; z-index: 5500; pointer-events: none; display: flex; flex-direction: column; bottom: env(safe-area-inset-bottom, 0px); left: env(safe-area-inset-left, 0px);`></ul><

x);`></ul><ul role=`region` aria-live=`polite` id=`chakra-toast-manager-bottom` style=`position: fixed; z-index: 5500; pointer-events: none; display: flex; flex-direction: column; margin: 0px auto; bottom: env(safe-area-inset-bottom, 0px); right: env(safe-area-inset-right, 0px); left: env(safe-area-inset-left, 0px);`></ul><

x);`></ul><ul role=`region` aria-live=`polite` id=`chakra-toast-manager-bottom-right` style=`position: fixed; z-index: 5500; pointer-events: none; display: flex; flex-direction: column; bottom: env(safe-area-inset-bottom, 0px); right: env(safe-area-inset-right, 0px);`></ul><

s-d18ijn`><button type=`button` id=`tabs-:Rkt9f6:--tab-0` role=`tab` tabindex=`0` aria-selected=`true` aria-controls=`tabs-:Rkt9f6:--tabpanel-0` class=`chakra-tabs__tab css-1fu7ome` data-index=`0`>Home</

e</button><button type=`button` id=`tabs-:Rkt9f6:--tab-1` role=`tab` tabindex=`-1` aria-selected=`false` aria-controls=`tabs-:Rkt9f6:--tabpanel-1` class=`chakra-tabs__tab css-1fu7ome` data-index=`1`>About<

t</button><button type=`button` id=`tabs-:Rkt9f6:--tab-2` role=`tab` tabindex=`-1` aria-selected=`false` aria-controls=`tabs-:Rkt9f6:--tabpanel-2` class=`chakra-tabs__tab css-1fu7ome` data-index=`2`>Contac

t</button><button type=`button` id=`tabs-:Rkt9f6:--tab-3` role=`tab` tabindex=`-1` aria-selected=`false` aria-controls=`tabs-:Rkt9f6:--tabpanel-3` class=`chakra-tabs__tab css-1fu7ome` data-index=`3`>Blog</

g</button><button type=`button` id=`tabs-:Rkt9f6:--tab-4` role=`tab` tabindex=`-1` aria-selected=`false` aria-controls=`tabs-:Rkt9f6:--tabpanel-4` class=`chakra-tabs__tab css-1vp08z4` data-index=`4`>Career

TYPE html><html data-theme=`light`><head>

Please log in to post a comment

Community feedback

Responsive Solution using Chakra UI and NextJS

Solution retrospective

Please log in to post a comment

Community feedback

Join our Discord community