Banners
Component 1
Live messaging. limitless possibilites.
All good things starts with a homepage. Get inspired without
breaking your wallet with premium Figma and Sketch templates.
<!-- Nayzak Banner -->
<section class="pb-md-5 text-center text-dark">
<div class="container pb-md-2 mb-md-4">
<div class="col-lg-9 mx-auto position-relative index-1">
<h2 class="h1 mb-3" data-aos="fade-up" data-aos-delay="50" data-aos-duration="800">Live messaging. limitless possibilites.</h2>
<p class="text-secondary fs-1" data-aos="fade-up" data-aos-delay="100" data-aos-duration="800">All good things starts with a homepage. Get inspired without <br class="d-xl-block d-none"> breaking your wallet with premium Figma and Sketch templates.</p>
<div class="d-flex align-items-center justify-content-center gap-3 pt-md-3 pt-2" data-aos="fade-up" data-aos-delay="150" data-aos-duration="800">
<a href="#" class="btn btn-lg btn-primary rounded-pill hvr-grow">Get started</a>
</div>
</div>
</div>
<img src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/lazy-placeholder.gif" data-src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/banner.png" class="mt-n7 d-md-inline d-none" alt="Banner" width="1288" height="1059" data-aos="fade-up" data-aos-delay="200" data-aos-duration="800">
<img src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/lazy-placeholder.gif" data-src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/banner-mobile.png" class="mt-n7 w-100 d-md-none" alt="Banner" width="375" height="528" data-aos="fade-up" data-aos-delay="200" data-aos-duration="800">
</section>
Component 2
Connect thousands of apps in one click
All good things starts with a homepage. Get inspired without
breaking your wallet with premium Figma and Sketch templates.
<!-- Nayzak Banner -->
<section class="pb-0">
<div class="container d-flex justify-content-center text-center pb-md-2">
<div class="col-lg-9">
<h2 class="h1 mb-3 text-dark" data-aos="fade-up" data-aos-delay="50" data-aos-duration="800">Connect thousands of apps in one click</h2>
<p class="text-secondary fs-1" data-aos="fade-up" data-aos-delay="100" data-aos-duration="800">All good things starts with a homepage. Get inspired without <br class="d-none d-xl-block"> breaking your wallet with premium Figma and Sketch templates.</p>
<div class="d-flex align-items-center justify-content-center gap-3 pt-3" data-aos="fade-up" data-aos-delay="150" data-aos-duration="800">
<a href="#" class="btn btn-lg btn-dark rounded-pill hvr-grow">Get started</a>
</div>
</div>
</div>
<picture>
<source media="(max-width:575px)" srcset="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/banner-mobile1.svg">
<img class="w-100 pt-4 pt-md-5 mt-lg-1" src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/lazy-placeholder.gif" data-src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/banner1.svg" alt="Nayzak" data-aos="fade-up" data-aos-delay="50" data-aos-duration="800">
</picture>
</section>
Component 3
Collaborate code writing in one place
All good things starts with a homepage. Get inspired without breaking your wallet with premium Figma and Sketch templates.
<!-- Nayzak Banner -->
<section class="text-center text-white overflow-hidden position-relative index-0 bg-brand-5">
<img class="w-100 start-0 position-absolute top-0 index-0" src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/lazy-placeholder.gif" data-src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/background1.svg" alt="Nayzak" width="1920" height="641">
<div class="container position-relative index-1 pb-md-2 mt-lg-5 pt-lg-4 pt-5">
<div class="col-lg-9 mx-auto">
<h2 class="h1 mb-3" data-aos="fade-up" data-aos-delay="50" data-aos-duration="800">Collaborate code writing in one place</h2>
<p class="fs-1" data-aos="fade-up" data-aos-delay="100" data-aos-duration="800">All good things starts with a homepage. Get inspired without breaking your wallet with premium Figma and Sketch templates.</p>
<div class="d-flex align-items-center justify-content-center gap-3 pt-md-3 pt-2" data-aos="fade-up" data-aos-delay="150" data-aos-duration="800">
<a href="#" class="btn btn-lg btn-purple rounded-pill hvr-grow">Get started</a>
</div>
</div>
<div class="pt-md-5 pt-3 mt-3" data-aos="fade-up" data-aos-delay="200" data-aos-duration="800">
<img src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/lazy-placeholder.gif" data-src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/banner2.svg" alt="Banner" width="1288" height="653">
</div>
</div>
</section>
Component 4
Regain users with the fastest chat app
All good things homepage. Get inspired without breaking your wallet.
Download premium Figma and Sketch templates.
<!-- Nayzak Banner -->
<section class="text-center pt-5 mt-lg-5 pb-0 bg-brand-1">
<div class="container pt-2 pt-md-5 mt-lg-4 d-flex justify-content-center">
<div class="col-lg-9">
<a href="#0">
<img class="px-5 px-md-0 pb-lg-4 mb-3" src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/lazy-placeholder.gif" data-src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/logo-banner.svg" width="229" height="44" alt="Nayzak" data-aos="fade-up" data-aos-delay="50" data-aos-duration="800">
</a>
<h2 class="mb-3 mb-md-4 text-dark" data-aos="fade-up" data-aos-delay="100" data-aos-duration="800">Regain users with the fastest chat app</h2>
</div>
</div>
<picture>
<source media="(max-width:767px)" srcset="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/banner-mobile3.svg">
<img src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/lazy-placeholder.gif" data-src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/banner3.svg" class="w-100 pb-4 pb-md-5 mb-2" alt="Nayzak" data-aos="fade-up" data-aos-delay="150" data-aos-duration="800">
</picture>
<div class="container d-flex justify-content-center">
<div class="col-lg-9">
<p class="text-black-90 fs-1" data-aos="fade-up" data-aos-delay="200" data-aos-duration="800">All good things homepage. Get inspired without breaking your wallet. <br class="d-none d-xxl-block">Download premium Figma and Sketch templates.</p>
<div class="d-flex align-items-center justify-content-center gap-3 pt-md-3" data-aos="fade-up" data-aos-delay="250" data-aos-duration="800">
<a href="#" class="btn btn-lg btn-dark rounded-pill hvr-grow">Get started</a>
</div>
</div>
</div>
</section>
Component 5
Simplify digital payments for all platforms.
All good things starts with a homepage — Get inspired without breaking your wallet with premium Figma and
Sketch templates.
Over 9.4 million customers checkout every day using
our secure payment gateway.
Trusted by great companies
<!-- Nayzak Banner -->
<section class="pb-3 pb-md-5 mb-4 overflow-hidden">
<div class="container pt-4 pt-sm-0">
<div class="pt-4 pt-md-0 pt-xxl-5 pb-3 pb-sm-5 mt-xxl-5 mb-3 mb-md-5">
<div class="col-md-7 py-xxl-5 mt-xxl-4 mb-xxl-5">
<h2 class="h1 mb-md-3 text-dark" data-aos="fade-up" data-aos-delay="100" data-aos-duration="800">Simplify digital payments for all platforms.</h2>
<p class="text-secondary fs-1 mb-0" data-aos="fade-up" data-aos-delay="150" data-aos-duration="800">All good things starts with a homepage — Get inspired without breaking your wallet with premium Figma and <br class="d-none d-lg-block"> Sketch templates.</p>
<div class="d-flex align-items-center gap-3 pt-3 pt-md-5" data-aos="fade-up" data-aos-delay="200" data-aos-duration="800">
<a href="#" class="btn btn-primary-dark">Get started</a>
<a href="#" class="btn-link link-dark">Contact sales <i class="ti ti-arrow-narrow-right"></i></a>
</div>
<picture class="hero-mobile d-block position-absolute top-0 end-0" data-aos="fade-in" data-aos-delay="50" data-aos-duration="800">
<source media="(max-width:767px)" srcset="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/banner-mobile4.png">
<img src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/lazy-placeholder.gif" data-src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/banner4.png" width="920" height="1376" alt="Nayzak">
</picture>
<div class="col-lg-8 pt-md-5 mt-lg-4">
<div class="d-flex gap-3 gap-md-4 pb-3" data-aos="fade-up" data-aos-delay="250" data-aos-duration="800">
<img class="avatar rounded-circle border border-2 border-white" src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/lazy-placeholder.gif" data-src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/avatar20.png" alt="Avatar" width="86" height="86">
<img class="avatar rounded-circle border border-2 border-white" src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/lazy-placeholder.gif" data-src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/avatar18.png" alt="Avatar" width="86" height="86">
<img class="avatar rounded-circle border border-2 border-white" src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/lazy-placeholder.gif" data-src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/avatar17.png" alt="Avatar" width="86" height="86">
</div>
<p class="text-secondary fs-4" data-aos="fade-up" data-aos-delay="300" data-aos-duration="800">Over 9.4 million customers checkout every day using <br class="d-none d-xxl-block"> our secure payment gateway.</p>
</div>
</div>
</div>
<div class="clients">
<h2 class="font-inter fw-normal l-spacing-normal fs-5 text-secondary pb-md-4 mb-3" data-aos="fade-up" data-aos-delay="50" data-aos-duration="800">Trusted by great companies</h2>
<div class="row row-cols-lg-6 row-cols-3 g-4 align-items-center justify-content-center">
<div class="col">
<div class="card bg-transparent border-0" data-aos="fade-up" data-aos-delay="100" data-aos-duration="800">
<img src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/lazy-placeholder.gif" data-src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/google-logo-light.svg" alt="Nayzak" width="118" height="39">
</div>
</div>
<div class="col">
<div class="card bg-transparent border-0" data-aos="fade-up" data-aos-delay="150" data-aos-duration="800">
<img src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/lazy-placeholder.gif" data-src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/disney-logo-light.svg" alt="Nayzak" width="114" height="45">
</div>
</div>
<div class="col">
<div class="card bg-transparent border-0" data-aos="fade-up" data-aos-delay="200" data-aos-duration="800">
<img src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/lazy-placeholder.gif" data-src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/netflix-logo-light.svg" alt="Nayzak" width="124" height="33">
</div>
</div>
<div class="col">
<div class="card bg-transparent border-0" data-aos="fade-up" data-aos-delay="250" data-aos-duration="800">
<img src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/lazy-placeholder.gif" data-src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/dropbox-logo-light.svg" alt="Nayzak" width="156" height="30">
</div>
</div>
<div class="col">
<div class="card bg-transparent border-0" data-aos="fade-up" data-aos-delay="300" data-aos-duration="800">
<img src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/lazy-placeholder.gif" data-src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/spotify-logo-light.svg" alt="Nayzak" width="140" height="42">
</div>
</div>
<div class="col">
<div class="card bg-transparent border-0" data-aos="fade-up" data-aos-delay="350" data-aos-duration="800">
<img src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/lazy-placeholder.gif" data-src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/slack-logo-light.svg" alt="Nayzak" width="126" height="32">
</div>
</div>
</div>
</div>
</div>
</section>