UI Components – Bendis Library

<section class="py-24 bg-blue-50">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -mx-4 mb-10">
      <div class="w-full lg:w-3/5 px-4">
        <div class="flex flex-wrap -mx-4">
          <div class="w-1/2 lg:w-1/4 px-4 mb-4">
            <h3 class="mb-4 text-base font-bold text-blue-800">Company</h3>
            <ul class="text-sm">
              <li class="mb-4"><a class="text-blue-500 hover:text-blue-600" href="#">About Us</a></li>
              <li class="mb-4"><a class="text-blue-500 hover:text-blue-600" href="#">Careers</a></li>
              <li class="mb-4"><a class="text-blue-500 hover:text-blue-600" href="#">Press</a></li>
              <li class="mb-4"><a class="text-blue-500 hover:text-blue-600" href="#">Blog</a></li>
            </ul>
          </div>
          <div class="w-1/2 lg:w-1/4 px-4 mb-4">
            <h3 class="mb-4 text-base font-bold text-blue-800">Pages</h3>
            <ul class="text-sm">
              <li class="mb-4"><a class="text-blue-500 hover:text-blue-600" href="#">Login</a></li>
              <li class="mb-4"><a class="text-blue-500 hover:text-blue-600" href="#">Register</a></li>
              <li class="mb-4"><a class="text-blue-500 hover:text-blue-600" href="#">Add list</a></li>
              <li class="mb-4"><a class="text-blue-500 hover:text-blue-600" href="#">Contact</a></li>
            </ul>
          </div>
          <div class="w-1/2 lg:w-1/4 px-4 mb-4">

<section class="relative pt-20 bg-blue-800 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="absolute top-0 right-0 mt-20">
      <svg width="728" height="804" viewBox="0 0 728 804" fill="none" xmlns="http://www.w3.org/2000/svg">
        <g opacity="0.1">
          <path d="M325.785 784.903C325.976 784.903 326.167 784.903 326.358 784.712L651.187 593.738L651.378 593.547L651.57 593.356L727.809 479.154L728 478.963V478.772V478.581V478.39V478.199L651.57 134.446C651.57 134.255 651.378 134.064 651.187 133.873C650.996 133.873 650.805 133.682 650.614 133.682H650.423L477.117 182.189C476.544 182.38 476.353 182.953 476.544 183.335C476.735 183.908 477.117 184.099 477.499 184.099H477.69L649.85 135.783L725.707 476.862L513.23 396.271L389.604 220.766C389.413 220.384 389.031 220.384 388.84 220.384C388.649 220.384 388.458 220.384 388.267 220.575C387.885 220.957 387.693 221.53 388.076 221.912L510.173 395.125L301.518 316.062L297.123 234.707L422.469 199.568C422.851 199.568 423.043 199.186 423.043 199.186C423.043 198.995 423.234 198.804 423.043 198.422C422.851 197.849 422.469 197.658 422.087 197.658H421.896L296.932 232.606L288.716 80.5911L355.21 175.123C355.402 175.505 355.784 175.505 355.975 175.505C356.166 175.505 356.357 175.505 356.548 175.314C356.93 174.932 357.121 174.359 356.739 173.977L288.334 76.7716C288.143 76.5806 287.952 76.3896 287.57 76.3896C287.378 76.3896 287.378 76.3896 287.187 76.3896C286.805 76.5806 286.614 76.9626 286.614 77.3445L295.022 233.179L172.924 267.364L172.542 267.555H172.351L172.16 267.745L171.969 267.936L19.1076 592.592C18.9166 592.974 18.9166 593.165 19.1076 593.547C19.2987 593.738 19.4897 593.929 19.8719 593.929H234.259C234.833 593.929 235.215 593.547 235.215 592.974C235.215 592.401 234.833 592.019 234.259 592.019H21.5916L173.497 269.464L299.607 317.208L311.072 530.716C311.072 531.289 311.454 531.671 312.027 531.671C312.601 531.671 312.983 531.098 312.983 530.716L301.518 318.163L512.084 397.99L648.703 592.019H316.231L316.04 588.009C316.04 587.436 315.658 587.054 315.085 587.054C314.511 587.054 314.129 587.627 314.129 588.009L314.32 592.019H291.582C291.009 592.019 290.627 592.401 290.627 592.974C290.627 593.547 291.009 593.929 291.582 593.929H314.511L324.829 783.948C324.829 784.33 325.02 784.521 325.403 784.712C325.594 784.903 325.594 784.903 325.785 784.903ZM326.74 782.42L316.613 593.929H647.175L326.74 782.42ZM725.516 478.772L650.614 591.255L515.332 399.135L725.516 478.772ZM299.416 315.298L175.981 268.509L295.213 235.089L299.416 315.298Z" fill="white"></path>
          <path d="M39.1702 804C60.7618 804 78.3408 786.43 78.3408 764.85C78.3408 743.27 60.7618 725.701 39.1702 725.701C17.5786 725.701 -0.000366211 743.27 -0.000366211 764.85C-0.000366211 786.43 17.5786 804 39.1702 804ZM39.1702 727.61C59.8064 727.61 76.4301 744.225 76.4301 764.85C76.4301 785.476 59.8064 802.09 39.1702 802.09C18.534 802.09 1.91039 785.476 1.91039 764.85C1.91039 744.225 18.7251 727.61 39.1702 727.61Z" fill="white"></path>
          <path d="M497.753 78.2993C519.345 78.2993 536.924 60.7297 536.924 39.1496C536.924 17.5696 519.345 0 497.753 0C476.162 0 458.583 17.5696 458.583 39.1496C458.583 60.7297 476.162 78.2993 497.753 78.2993ZM497.753 1.90974C518.389 1.90974 535.013 18.5245 535.013 39.1496C535.013 59.7748 518.389 76.3895 497.753 76.3895C477.117 76.3895 460.493 59.7748 460.493 39.1496C460.493 18.5245 477.308 1.90974 497.753 1.90974Z" fill="white"></path>
          <path d="M134.709 536.637C134.9 536.637 135.282 536.446 135.473 536.255C135.664 536.064 135.664 535.873 135.664 535.682C135.664 535.491 135.473 535.109 135.473 534.918C135.282 534.727 135.091 534.727 134.709 534.727C134.518 534.727 134.135 534.727 133.944 534.918C133.753 535.109 133.562 535.3 133.562 535.682C133.562 535.873 133.753 536.255 133.753 536.255C134.327 536.446 134.518 536.637 134.709 536.637Z" fill="white"></path>
          <path d="M192.032 536.637C192.223 536.637 192.605 536.446 192.605 536.255C192.796 536.064 192.987 535.873 192.987 535.682C192.987 535.491 192.796 535.109 192.796 535.109C192.605 534.918 192.414 534.918 192.032 534.918C191.841 534.918 191.459 534.918 191.268 535.109C191.077 535.3 190.885 535.491 190.885 535.873C190.885 536.064 191.077 536.446 191.077 536.446C191.459 536.446 191.841 536.637 192.032 536.637Z" fill="white"></path>
          <path d="M249.354 536.637C249.545 536.637 249.927 536.446 250.118 536.255C250.31 536.064 250.31 535.873 250.31 535.682C250.31 535.491 250.119 535.109 249.927 534.918C249.736 534.727 249.545 534.727 249.354 534.727C249.163 534.727 248.781 534.727 248.59 534.918C248.399 535.109 248.208 535.3 248.208 535.682C248.208 535.873 248.399 536.255 248.399 536.255C248.781 536.446 249.163 536.637 249.354 536.637Z" fill="white"></path>
          <path d="M249.354 479.344C249.545 479.344 249.927 479.153 250.118 478.962C250.31 478.771 250.31 478.58 250.31 478.389C250.31 478.198 250.119 477.817 249.927 477.626C249.736 477.435 249.545 477.435 249.354 477.435C249.163 477.435 248.781 477.435 248.59 477.626C248.399 477.817 248.208 478.007 248.208 478.389C248.208 478.58 248.399 478.962 248.399 478.962C248.972 479.153 249.163 479.344 249.354 479.344Z" fill="white"></path>
          <path d="M249.354 422.052C249.545 422.052 249.927 421.861 249.927 421.67C250.119 421.479 250.31 421.288 250.31 421.097C250.31 420.906 250.119 420.525 249.927 420.334C249.736 420.143 249.545 420.143 249.354 420.143C249.163 420.143 248.781 420.143 248.59 420.334C248.399 420.525 248.208 420.715 248.208 421.097C248.208 421.288 248.399 421.67 248.399 421.67C248.781 421.861 249.163 422.052 249.354 422.052Z" fill="white"></path>
        </g>
      </svg>
    </div>
    <div class="relative z-10">
      <div class="text-center mb-16">
        <div class="pb-10 lg:pb-0">
          <div class="max-w-4xl mx-auto">
            <h2 class="mt-8 mb-6 text-4xl lg:text-5xl font-bold text-white">Take quick action that increases your brand's regular profit.</h2>
            <p class="max-w-3xl mx-auto mb-10 text-lg text-white">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
            <a class="inline-block w-full md:w-auto py-5 px-8 text-sm font-bold uppercase bg-yellow-500 hover:bg-yellow-400 text-blue-800 transition duration-200" href="#">Try Demo</a>
          </div>

<section class="py-8 px-4 lg:px-10 bg-blue-800" x-data="{ mobileNavOpen: false }">
  <div class="container px-4 mx-auto">
    <nav class="relative">
      <div class="flex justify-between items-center">
        <a class="text-lg font-semibold" href="#">
          <img class="h-7" src="bendis-assets/logos/bendis-light.svg" alt="" width="auto">
        </a>
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="lg:hidden">
          <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="2.5" y="6" width="20" height="2" fill="white"></rect><rect x="2.5" y="11" width="20" height="2" fill="white"></rect><rect x="2.5" y="16" width="20" height="2" fill="white"></rect></svg>
        </button>
        <div class="hidden lg:block"><a class="inline-block px-4 text-white hover:text-blue-50 font-semibold" href="#">Sign in</a><a class="inline-block px-4 text-white hover:text-blue-50 font-semibold" href="#">Sign up</a></div>
      </div>
    </nav>
  </div>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-blue-800 opacity-90"></div>
    <nav class="relative flex flex-col py-8 w-full h-full bg-white border-r overflow-y-auto">
      <div class="flex items-center mb-16 pr-6">
        <a class="ml-16 mr-auto text-xl text-blue-800 font-semibold leading-none" href="#">
          <img class="h-7" src="bendis-assets/logos/bendis-blue.svg" alt="" width="auto">
        </a>
      </div>
      <div>
        <ul>

<section class="py-12">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center -m-4">
      <div class="w-full md:w-1/3 lg:w-1/6 p-4">
        <div class="py-16 bg-blue-50">
          <img class="h-6 mx-auto" src="bendis-assets/logos/slack-color.svg" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/3 lg:w-1/6 p-4">
        <div class="py-16 bg-blue-50">
          <img class="h-6 mx-auto" src="bendis-assets/logos/dropbox-color.svg" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/3 lg:w-1/6 p-4">
        <div class="py-16 bg-blue-50">
          <img class="h-6 mx-auto" src="bendis-assets/logos/spotify-color.svg" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/3 lg:w-1/6 p-4">
        <div class="py-16 bg-blue-50">
          <img class="h-6 mx-auto" src="bendis-assets/logos/amazon-color.svg" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/3 lg:w-1/6 p-4">

<section class="relative bg-blue-50 py-24" x-data="{ tab: '' }" x-init="tab = $refs.tab1.textContent">
  <div class="container mx-auto px-4">
    <div class="mb-12 lg:mb-16 text-center">
      <div class="max-w-xl mx-auto">
        <span class="text-base uppercase text-blue-500 font-semibold tracking-widest">Lorem ipsum</span>
        <h2 class="mt-3 mb-8 text-4xl font-bold text-blue-800 font-heading">Lorem ispum dolor sit amet consectutar</h2>
      </div>
      <div class="flex flex-wrap justify-center">
        <button x-ref="tab1" x-on:click="tab = $refs.tab1.textContent" class="w-full sm:w-auto px-8 py-2 mb-2 lg:mb-0 mx-px leading-8 font-semibold text-white bg-blue-800" :class="{ 'font-semibold text-white bg-blue-800': tab == $refs.tab1.textContent, 'text-blue-800 bg-blue-100 hover:bg-blue-200': tab != $refs.tab1.textContent }">Normal Tab 1</button>
        <button x-ref="tab2" x-on:click="tab = $refs.tab2.textContent" class="w-full sm:w-auto px-8 py-2 mb-2 lg:mb-0 mx-px leading-8 text-blue-800 bg-blue-100 hover:bg-blue-200" :class="{ 'font-semibold text-white bg-blue-800': tab == $refs.tab2.textContent, 'text-blue-800 bg-blue-100 hover:bg-blue-200': tab != $refs.tab2.textContent }">Normal Tab 2</button>
        <button x-ref="tab3" x-on:click="tab = $refs.tab3.textContent" class="w-full sm:w-auto px-8 py-2 mb-2 lg:mb-0 mx-px leading-8 text-blue-800 bg-blue-100 hover:bg-blue-200" :class="{ 'font-semibold text-white bg-blue-800': tab == $refs.tab3.textContent, 'text-blue-800 bg-blue-100 hover:bg-blue-200': tab != $refs.tab3.textContent }">Normal Tab 3</button>
        <button x-ref="tab4" x-on:click="tab = $refs.tab4.textContent" class="w-full sm:w-auto px-8 py-2 mb-2 lg:mb-0 mx-px leading-8 text-blue-800 bg-blue-100 hover:bg-blue-200" :class="{ 'font-semibold text-white bg-blue-800': tab == $refs.tab4.textContent, 'text-blue-800 bg-blue-100 hover:bg-blue-200': tab != $refs.tab4.textContent }">Normal Tab 4</button>
      </div>
    </div>
    <div class="flex flex-wrap -m-px">
      <div class="flex flex-wrap w-full md:w-1/2 lg:h-screen p-px -m-px">
        <div class="w-full lg:w-1/2 h-64 lg:h-1/3 p-px">
          <img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1536851101967-55988a52f455?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
        </div>
        <div class="w-full lg:w-1/2 h-64 lg:h-1/3 p-px">
          <img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1562785072-c65ab858fcbc?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=967&amp;q=80" alt="">
        </div>
        <div class="w-full h-64 lg:h-2/3 p-px">
          <img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1615072870329-51396f9838a2?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1051&amp;q=80" alt="">

<section class="relative bg-blue-800 py-24 overflow-hidden">
  <div class="absolute inset-0">
    <svg class="mt-20" width="705" height="798" viewBox="0 0 705 798" fill="none" xmlns="http://www.w3.org/2000/svg">
      <g opacity="0.1">
        <path d="M704.81 796.481L605.701 697.372C636.839 655.792 655.256 604.148 655.256 548.328C655.256 442.384 588.803 351.629 495.58 315.365L704.81 1.51892C705 1.13919 705 0.759458 704.81 0.569593C704.81 0.189864 704.43 0 704.051 0H-92.0507C-92.4304 0 -92.8101 0.189864 -92.8101 0.569593C-92.8101 0.949322 -93 1.13919 -92.8101 1.51892L85.8522 269.607L-92.8101 448.08C-93 448.27 -93 448.46 -93 448.839C-93 449.219 -93 449.409 -92.8101 449.599C-92.6203 449.789 -92.4304 449.789 -92.0507 449.789C-91.6709 449.789 -91.4811 449.789 -91.2912 449.599L86.9914 271.316L188.949 424.347C167.874 460.801 155.722 503.141 155.722 548.328C155.722 685.98 267.742 798 405.584 798C486.656 798 558.994 759.078 604.562 698.891L703.291 797.62C703.481 797.81 703.671 797.81 704.051 797.81C704.43 797.81 704.62 797.81 704.81 797.62C705 797.43 705 797.241 705 796.861C705 796.481 705 796.671 704.81 796.481ZM88.3205 269.797L157.431 200.687C157.621 200.497 157.621 200.307 157.621 199.927C157.621 199.547 157.621 199.358 157.431 199.168C157.051 198.788 156.482 198.788 156.102 199.168L87.1813 268.089L-90.3419 1.89864H702.342L493.871 314.605C466.341 304.163 436.722 298.467 405.774 298.467C313.879 298.467 233.567 348.211 190.088 422.258L88.3205 269.797ZM492.732 316.314L305.905 596.364L191.037 424.157C233.946 350.3 314.069 300.555 405.394 300.555C436.152 300.365 465.581 306.061 492.732 316.314ZM405.584 796.101C268.882 796.101 157.621 684.841 157.621 548.328C157.621 503.9 169.393 462.13 190.088 425.866L305.146 598.453C305.335 598.642 305.525 598.832 305.905 598.832C306.285 598.832 306.475 598.642 306.665 598.453L494.44 317.074C587.284 352.958 653.357 443.143 653.357 548.518C653.357 603.769 635.13 655.032 604.372 696.233L505.642 597.503C505.263 597.124 504.693 597.124 504.313 597.503C504.123 597.693 504.123 597.883 504.123 598.263C504.123 598.642 504.123 598.832 504.313 599.022L603.233 697.941C558.045 757.369 486.276 796.101 405.584 796.101Z" fill="white"></path>
        <path d="M82.055 572.251H-92.0507C-92.6203 572.251 -93 572.631 -93 573.201V747.306C-93 747.876 -92.6203 748.255 -92.0507 748.255H82.055C82.6246 748.255 83.0043 747.876 83.0043 747.306V573.201C83.0043 572.631 82.6246 572.251 82.055 572.251ZM81.1057 746.357H-91.1014V574.15H81.1057V746.357Z" fill="white"></path>
        <path d="M367.612 225.749C367.801 225.939 367.991 225.939 368.181 225.939C368.371 225.939 368.561 225.939 368.751 225.749L480.771 151.132C480.961 150.942 481.15 150.752 481.15 150.373C481.15 149.993 480.961 149.803 480.771 149.613L368.751 74.9964C368.371 74.8065 367.991 74.8065 367.612 74.9964L255.592 149.613C255.402 149.803 255.212 149.993 255.212 150.373C255.212 150.752 255.402 150.942 255.592 151.132L367.612 225.749ZM368.181 76.7052L478.492 150.183L368.181 223.66L257.87 150.183L368.181 76.7052Z" fill="white"></path>
      </g>
    </svg>
  </div>
  <div class="relative container mx-auto px-4">
    <div class="max-w-2xl mb-16 mx-auto text-center">
      <h2 class="mb-6 text-4xl font-bold text-white">Take quick action that increases your brand's regular profit.</h2>
      <p class="mb-10 text-lg text-gray-50">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
    </div>
    <div class="flex flex-wrap -mx-4 -mb-6">
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-6">
        <img class="w-full h-64 lg:h-72 object-cover" src="https://images.unsplash.com/photo-1615866369373-8d232ea5a028?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=634&amp;q=80" alt="">
        <div class="py-16 px-10 text-center bg-blue-900">
          <h3 class="mb-4 text-lg text-white font-bold uppercase font-heading">Change of access</h3>
          <p class="text-base text-white">Take care to develop resources continually and integrity them with previous projects.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-6">

<section class="relative pt-24 overflow-x-hidden bg-blue-50">
  <div class="container px-4 mx-auto">
    <div class="w-full lg:w-1/2 mb-24 ml-auto">
      <div class="flex flex-wrap sm:max-w-md">
        <h2 class="mb-6 text-5xl font-bold font-heading text-blue-800">Lorem Ipsum dolor sit amet</h2>
        <p class="mb-8 text-lg text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
        <div class="flex items-center mb-8">
          <span class="flex w-20 h-12 mr-6 items-center clip-path-right-top bg-yellow-500">
            <svg class="ml-5 text-blue-800 h-6 w-6" viewBox="0 0 26 26" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <path d="M13 -0.043335L0 12.7833L13 25.61L26 12.7833L13 -0.043335ZM3.06377 12.7833L13 2.97959L17.2022 7.12581L15.6702 8.63743L13 6.00348L6.12852 12.7833L8.79775 15.4179L7.2657 16.9296L3.06377 12.7833ZM16.8087 12.7833L13 16.5422L9.1923 12.7833L13 9.0264L16.8087 12.7833ZM8.79775 18.4412L10.3298 16.9296L13 19.5632L19.8725 12.7833L17.2022 10.1487L18.7343 8.63711L22.9362 12.7833L13 22.5871L8.79775 18.4412Z"></path>
            </svg>
          </span>
          <div class="max-w-sm">
            <p class="text-lg text-gray-500">Lorem Ipsum dolor</p>
          </div>
        </div>
        <div class="flex items-center mb-8">
          <span class="flex w-20 h-12 mr-6 items-center clip-path-right-top bg-yellow-500">
            <svg class="ml-5 text-blue-800 h-6 w-6" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <path d="M13 0V1.98083C18.055 2.47811 22 6.70233 22 11.84C22 16.9768 18.055 21.2007 13 21.698V23.68C19.1593 23.1762 24.0001 18.0714 24.0001 11.84C24.0001 5.60772 19.1593 0.504976 13 0Z"></path>
              <path d="M11.0001 21.698C5.9472 21.2007 2.0001 16.9768 2.0001 11.84C2.0001 6.70262 5.9472 2.47811 11.0001 1.98083V0C4.842 0.504976 0 5.60772 0 11.84C0 18.0714 4.842 23.1762 11.0001 23.68V21.698Z"></path>
              <path d="M6.08989 10.8534C6.56629 8.05416 9.02719 5.92 11.9999 5.92C14.9726 5.92 17.4335 8.05416 17.9099 10.8534H19.9304C19.4384 6.96073 16.0802 3.94656 11.9999 3.94656C7.92169 3.94656 4.56229 6.96073 4.06909 10.8534H6.08989Z"></path>
              <path d="M17.9101 12.8266C17.4337 15.6247 14.9728 17.76 12.0001 17.76C9.02738 17.76 6.56648 15.6247 6.09008 12.8266H4.06958C4.56248 16.7193 7.92188 19.7334 12.0001 19.7334C16.0804 19.7334 19.4386 16.7193 19.9309 12.8266H17.9101Z"></path>
              <path d="M11.9999 7.89343C9.791 7.89343 8 9.66055 8 11.84C8 14.0195 9.791 15.7866 11.9999 15.7866C14.2097 15.7866 15.9998 14.0195 15.9998 11.84C15.9998 9.66055 14.2097 7.89343 11.9999 7.89343ZM11.9999 13.8134C10.8953 13.8134 9.9998 12.9299 9.9998 11.84C9.9998 10.7501 10.8953 9.86657 11.9999 9.86657C13.1054 9.86657 14 10.7501 14 11.84C14 12.9299 13.1054 13.8134 11.9999 13.8134Z"></path>

<section class="relative bg-blue-800 py-24" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center mb-12 pb-16 border-b border-blue-500">
      <h2 class="mb-6 lg:mb-0 text-5xl font-bold text-white">Lorem ipsum</h2>
      <div class="ml-auto flex flex-row border-2 border-yellow-300">
        <button x-on:click="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="w-16 h-16 border-r-2 border-yellow-300 hover:bg-blue-900 text-yellow-300">
          <svg class="mx-auto" width="12" height="16" viewBox="0 0 12 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M8.75 0L11.25 2.5L5.75 8L11.25 13.5L8.75 16L0.75 8L8.75 0Z" fill="currentColor"></path>
          </svg>
        </button>
        <button x-on:click="activeSlide < slideCount - 1 ? (activeSlide += 1, slideWidth += $refs['slide' + activeSlide].offsetWidth) : activeSlide = slideCount - 1" class="w-16 h-16 hover:bg-blue-900 text-yellow-300">
          <svg class="mx-auto" width="12" height="16" viewBox="0 0 12 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3.25 0L0.75 2.5L6.25 8L0.75 13.5L3.25 16L11.25 8L3.25 0Z" fill="currentColor"></path>
          </svg>
        </button>
      </div>
    </div>
    <div class="overflow-hidden">
        <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out -m-5">
            <div x-ref="slide1" class="flex-shrink-0 w-full p-5">
                <div class="flex flex-wrap -mx-5">
                  <div class="w-full lg:w-1/3 px-5 mb-10 lg:mb-0">
                    <p class="mb-6 text-base text-blue-300">Take care to develop resources continually and integrity</p>
                    <img class="w-full h-96" src="https://images.unsplash.com/photo-1593776805861-74972b600999?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">

<section class="relative py-24 bg-blue-50 overflow-x-hidden">
  <div class="absolute inset-0">
    <svg class="mx-auto mt-10" width="804" height="728" viewBox="0 0 804 728" fill="none" xmlns="http://www.w3.org/2000/svg">
      <g opacity="0.1" clip-path="url(#clip0)">
        <path d="M784.903 402.215C784.903 402.024 784.903 401.833 784.712 401.642L593.738 76.8126L593.547 76.6215L593.356 76.4305L479.154 0.191094L478.963 1.7597e-05L478.772 1.75887e-05L478.581 1.75803e-05L478.39 1.7572e-05L478.199 1.75636e-05L134.446 76.4304C134.255 76.4304 134.064 76.6215 133.873 76.8126C133.873 77.0037 133.682 77.1948 133.682 77.3858L133.682 77.5769L182.189 250.883C182.38 251.456 182.953 251.647 183.335 251.456C183.908 251.265 184.099 250.883 184.099 250.501L184.099 250.31L135.783 78.1501L476.862 2.29293L396.271 214.77L220.766 338.396C220.384 338.587 220.384 338.969 220.384 339.16C220.384 339.351 220.384 339.542 220.575 339.733C220.957 340.115 221.53 340.307 221.912 339.924L395.125 217.827L316.062 426.482L234.707 430.877L199.568 305.531C199.568 305.149 199.186 304.957 199.186 304.957C198.995 304.957 198.804 304.766 198.422 304.957C197.849 305.149 197.658 305.531 197.658 305.913L197.658 306.104L232.606 431.068L80.5911 439.284L175.123 372.79C175.505 372.598 175.505 372.216 175.505 372.025C175.505 371.834 175.505 371.643 175.314 371.452C174.932 371.07 174.359 370.879 173.977 371.261L76.7716 439.666C76.5806 439.857 76.3896 440.048 76.3896 440.43C76.3896 440.622 76.3896 440.622 76.3896 440.813C76.5806 441.195 76.9626 441.386 77.3445 441.386L233.179 432.978L267.363 555.076L267.554 555.458L267.554 555.649L267.745 555.84L267.936 556.032L592.592 708.892C592.974 709.083 593.165 709.083 593.547 708.892C593.738 708.701 593.929 708.51 593.929 708.128L593.929 493.741C593.929 493.167 593.547 492.785 592.974 492.785C592.401 492.785 592.019 493.167 592.019 493.741L592.019 706.408L269.464 554.503L317.208 428.393L530.716 416.928C531.289 416.928 531.671 416.546 531.671 415.973C531.671 415.399 531.098 415.017 530.716 415.017L318.163 426.482L397.99 215.916L592.019 79.2966L592.019 411.769L588.009 411.96C587.436 411.96 587.054 412.342 587.054 412.916C587.054 413.489 587.627 413.871 588.009 413.871L592.019 413.68L592.019 436.418C592.019 436.991 592.401 437.373 592.974 437.373C593.547 437.373 593.929 436.991 593.929 436.418L593.929 413.489L783.948 403.171C784.33 403.171 784.521 402.98 784.712 402.597C784.903 402.406 784.903 402.406 784.903 402.215ZM782.42 401.26L593.929 411.387L593.929 80.8252L782.42 401.26ZM478.772 2.48401L591.255 77.3858L399.135 212.668L478.772 2.48401ZM315.298 428.584L268.509 552.019L235.089 432.787L315.298 428.584Z" fill="#6CA2FA"></path>
        <path d="M804 688.829C804 667.238 786.43 649.659 764.85 649.659C743.27 649.659 725.701 667.238 725.701 688.829C725.701 710.421 743.27 728 764.85 728C786.43 728 804 710.421 804 688.829ZM727.61 688.829C727.61 668.193 744.225 651.57 764.85 651.57C785.476 651.57 802.09 668.193 802.09 688.829C802.09 709.466 785.476 726.089 764.85 726.089C744.225 726.089 727.61 709.275 727.61 688.829Z" fill="#6CA2FA"></path>
        <path d="M78.2993 230.247C78.2993 208.655 60.7297 191.076 39.1496 191.076C17.5696 191.076 -7.68403e-07 208.655 -1.7122e-06 230.247C-2.656e-06 251.838 17.5696 269.417 39.1496 269.417C60.7297 269.417 78.2993 251.838 78.2993 230.247ZM1.90974 230.247C1.90974 209.61 18.5245 192.987 39.1496 192.987C59.7748 192.987 76.3895 209.61 76.3895 230.247C76.3895 250.883 59.7748 267.507 39.1496 267.507C18.5245 267.507 1.90974 250.692 1.90974 230.247Z" fill="#6CA2FA"></path>
        <path d="M536.636 593.291C536.636 593.1 536.445 592.718 536.254 592.527C536.063 592.336 535.872 592.336 535.681 592.336C535.49 592.336 535.109 592.527 534.918 592.527C534.727 592.718 534.727 592.909 534.727 593.291C534.727 593.482 534.727 593.865 534.918 594.056C535.109 594.247 535.299 594.438 535.681 594.438C535.872 594.438 536.254 594.247 536.254 594.247C536.445 593.674 536.636 593.482 536.636 593.291Z" fill="#6CA2FA"></path>
        <path d="M536.637 535.969C536.637 535.777 536.446 535.395 536.255 535.395C536.064 535.204 535.873 535.013 535.682 535.013C535.491 535.013 535.109 535.204 535.109 535.204C534.918 535.395 534.918 535.586 534.918 535.969C534.918 536.16 534.918 536.542 535.109 536.733C535.3 536.924 535.491 537.115 535.873 537.115C536.064 537.115 536.446 536.924 536.446 536.924C536.446 536.542 536.637 536.16 536.637 535.969Z" fill="#6CA2FA"></path>
        <path d="M536.636 478.646C536.636 478.455 536.445 478.072 536.254 477.881C536.063 477.69 535.872 477.69 535.681 477.69C535.49 477.69 535.109 477.881 534.918 478.072C534.727 478.264 534.727 478.455 534.727 478.646C534.727 478.837 534.727 479.219 534.918 479.41C535.109 479.601 535.299 479.792 535.681 479.792C535.872 479.792 536.254 479.601 536.254 479.601C536.445 479.219 536.636 478.837 536.636 478.646Z" fill="#6CA2FA"></path>
        <path d="M479.344 478.646C479.344 478.455 479.153 478.072 478.962 477.881C478.771 477.69 478.58 477.69 478.389 477.69C478.198 477.69 477.817 477.881 477.626 478.072C477.435 478.264 477.435 478.455 477.435 478.646C477.435 478.837 477.435 479.219 477.626 479.41C477.817 479.601 478.007 479.792 478.389 479.792C478.58 479.792 478.962 479.601 478.962 479.601C479.153 479.028 479.344 478.837 479.344 478.646Z" fill="#6CA2FA"></path>
        <path d="M422.052 478.646C422.052 478.455 421.861 478.072 421.67 478.072C421.479 477.881 421.288 477.69 421.097 477.69C420.906 477.69 420.525 477.881 420.334 478.072C420.143 478.264 420.143 478.455 420.143 478.646C420.143 478.837 420.143 479.219 420.334 479.41C420.525 479.601 420.715 479.792 421.097 479.792C421.288 479.792 421.67 479.601 421.67 479.601C421.861 479.219 422.052 478.837 422.052 478.646Z" fill="#6CA2FA"></path>
      </g>
      <defs><clipPath id="clip0"><rect width="728" height="804" fill="white" transform="matrix(-4.37114e-08 1 1 4.37114e-08 0 0)"></rect></clipPath></defs>
    </svg>
  </div>
  <div class="relative container px-4 mx-auto">
    <div class="max-w-2xl mx-auto text-center mb-16">
      <h2 class="mb-6 text-5xl font-bold font-heading text-blue-800">Get our Free Mobile App</h2>
      <p class="mb-8 text-lg text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
      <div class="flex justify-center items-center">
        <a class="mr-4" href="#">
          <img class="h-12" src="bendis-assets/images/app-store-blue.png" alt="">
        </a>

<section class="relative pt-20 bg-blue-50 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="absolute top-0 right-0 mt-20">
      <svg width="728" height="804" viewBox="0 0 728 804" fill="none" xmlns="http://www.w3.org/2000/svg">
        <g opacity="0.15">
          <path d="M325.785 784.903C325.976 784.903 326.167 784.903 326.358 784.712L651.187 593.738L651.378 593.547L651.57 593.356L727.809 479.153L728 478.962V478.771V478.581V478.39V478.199L651.57 134.446C651.57 134.255 651.378 134.064 651.187 133.873C650.996 133.873 650.805 133.682 650.614 133.682H650.423L477.117 182.189C476.544 182.38 476.353 182.953 476.544 183.335C476.735 183.908 477.117 184.099 477.499 184.099H477.69L649.85 135.782L725.707 476.862L513.23 396.271L389.604 220.766C389.413 220.384 389.031 220.384 388.84 220.384C388.649 220.384 388.458 220.384 388.267 220.575C387.885 220.957 387.693 221.53 388.076 221.912L510.173 395.125L301.518 316.062L297.123 234.707L422.469 199.568C422.851 199.568 423.043 199.186 423.043 199.186C423.043 198.995 423.234 198.804 423.043 198.422C422.851 197.849 422.469 197.658 422.087 197.658H421.896L296.932 232.606L288.716 80.591L355.21 175.123C355.402 175.505 355.784 175.505 355.975 175.505C356.166 175.505 356.357 175.505 356.548 175.314C356.93 174.932 357.121 174.359 356.739 173.977L288.334 76.7715C288.143 76.5805 287.952 76.3895 287.57 76.3895C287.378 76.3895 287.378 76.3895 287.187 76.3895C286.805 76.5805 286.614 76.9624 286.614 77.3444L295.022 233.179L172.924 267.363L172.542 267.554H172.351L172.16 267.745L171.969 267.936L19.1076 592.592C18.9166 592.974 18.9166 593.165 19.1076 593.547C19.2987 593.738 19.4897 593.929 19.8719 593.929H234.259C234.833 593.929 235.215 593.547 235.215 592.974C235.215 592.401 234.833 592.019 234.259 592.019H21.5916L173.497 269.464L299.607 317.208L311.072 530.716C311.072 531.289 311.454 531.671 312.027 531.671C312.601 531.671 312.983 531.098 312.983 530.716L301.518 318.162L512.084 397.99L648.703 592.019H316.231L316.04 588.009C316.04 587.436 315.658 587.054 315.085 587.054C314.511 587.054 314.129 587.627 314.129 588.009L314.32 592.019H291.582C291.009 592.019 290.627 592.401 290.627 592.974C290.627 593.547 291.009 593.929 291.582 593.929H314.511L324.829 783.948C324.829 784.33 325.02 784.521 325.403 784.712C325.594 784.903 325.594 784.903 325.785 784.903ZM326.74 782.42L316.613 593.929H647.175L326.74 782.42ZM725.516 478.771L650.614 591.255L515.332 399.135L725.516 478.771ZM299.416 315.298L175.981 268.509L295.213 235.089L299.416 315.298Z" fill="#A0CDFA"></path>
          <path d="M39.1702 804C60.7618 804 78.3408 786.43 78.3408 764.85C78.3408 743.27 60.7618 725.701 39.1702 725.701C17.5786 725.701 -0.000366211 743.27 -0.000366211 764.85C-0.000366211 786.43 17.5786 804 39.1702 804ZM39.1702 727.61C59.8064 727.61 76.4301 744.225 76.4301 764.85C76.4301 785.476 59.8064 802.09 39.1702 802.09C18.534 802.09 1.91039 785.476 1.91039 764.85C1.91039 744.225 18.7251 727.61 39.1702 727.61Z" fill="#A0CDFA"></path>
          <path d="M497.753 78.2993C519.345 78.2993 536.924 60.7297 536.924 39.1496C536.924 17.5696 519.345 0 497.753 0C476.162 0 458.583 17.5696 458.583 39.1496C458.583 60.7297 476.162 78.2993 497.753 78.2993ZM497.753 1.90974C518.389 1.90974 535.013 18.5245 535.013 39.1496C535.013 59.7748 518.389 76.3895 497.753 76.3895C477.117 76.3895 460.493 59.7748 460.493 39.1496C460.493 18.5245 477.308 1.90974 497.753 1.90974Z" fill="#A0CDFA"></path>
          <path d="M134.709 536.637C134.9 536.637 135.282 536.446 135.473 536.255C135.664 536.064 135.664 535.873 135.664 535.682C135.664 535.491 135.473 535.109 135.473 534.918C135.282 534.727 135.091 534.727 134.709 534.727C134.518 534.727 134.135 534.727 133.944 534.918C133.753 535.109 133.562 535.3 133.562 535.682C133.562 535.873 133.753 536.255 133.753 536.255C134.327 536.446 134.518 536.637 134.709 536.637Z" fill="#A0CDFA"></path>
          <path d="M192.032 536.637C192.223 536.637 192.605 536.446 192.605 536.255C192.796 536.064 192.987 535.873 192.987 535.682C192.987 535.491 192.796 535.109 192.796 535.109C192.605 534.918 192.414 534.918 192.032 534.918C191.841 534.918 191.459 534.918 191.268 535.109C191.077 535.3 190.885 535.491 190.885 535.873C190.885 536.064 191.077 536.446 191.077 536.446C191.459 536.446 191.841 536.637 192.032 536.637Z" fill="#A0CDFA"></path>
          <path d="M249.354 536.637C249.545 536.637 249.927 536.446 250.118 536.255C250.31 536.064 250.31 535.873 250.31 535.682C250.31 535.491 250.119 535.109 249.927 534.918C249.736 534.727 249.545 534.727 249.354 534.727C249.163 534.727 248.781 534.727 248.59 534.918C248.399 535.109 248.208 535.3 248.208 535.682C248.208 535.873 248.399 536.255 248.399 536.255C248.781 536.446 249.163 536.637 249.354 536.637Z" fill="#A0CDFA"></path>
          <path d="M249.354 479.344C249.545 479.344 249.927 479.153 250.118 478.962C250.31 478.772 250.31 478.581 250.31 478.39C250.31 478.199 250.119 477.817 249.927 477.626C249.736 477.435 249.545 477.435 249.354 477.435C249.163 477.435 248.781 477.435 248.59 477.626C248.399 477.817 248.208 478.008 248.208 478.39C248.208 478.581 248.399 478.962 248.399 478.962C248.972 479.153 249.163 479.344 249.354 479.344Z" fill="#A0CDFA"></path>
          <path d="M249.354 422.052C249.545 422.052 249.927 421.861 249.927 421.67C250.119 421.479 250.31 421.288 250.31 421.097C250.31 420.906 250.119 420.525 249.927 420.334C249.736 420.143 249.545 420.143 249.354 420.143C249.163 420.143 248.781 420.143 248.59 420.334C248.399 420.525 248.208 420.715 248.208 421.097C248.208 421.288 248.399 421.67 248.399 421.67C248.781 421.861 249.163 422.052 249.354 422.052Z" fill="#A0CDFA"></path>
        </g>
      </svg>
    </div>
    <div class="relative z-10">
      <div class="px-4 text-center mb-16">
        <div class="w-full lg:w-9/12 px-4 mx-auto pb-10 lg:pb-0">
          <div class="max-w-4xl mx-auto">
            <h2 class="mt-8 mb-6 text-4xl lg:text-5xl font-bold text-blue-800">Take quick action that increases your brand's regular profit.</h2>
            <p class="max-w-3xl mx-auto mb-10 text-lg text-gray-500">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
            <a class="inline-block w-full md:w-auto py-5 px-8 text-sm font-bold uppercase bg-yellow-500 hover:bg-yellow-400 text-blue-800 transition duration-200" href="#">Try Demo</a>
          </div>

<section class="py-24 bg-blue-800">
  <div class="container px-4 mx-auto">
    <h3 class="mb-8 text-center text-lg text-blue-300">Trusted by brands all over the world</h3>
    <div class="flex flex-wrap items-center -m-4 lg:-mx-0">
      <div class="w-full md:w-1/2 lg:w-1/4 py-4 lg:px-0">
        <div class="w-80 md:w-auto py-14 mx-auto bg-blue-900 clip-path-both">
          <img class="h-6 mx-auto" src="bendis-assets/logos/slack-light-blue.svg" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 py-4 lg:px-0">
        <div class="w-80 md:w-auto py-14 mx-auto bg-blue-900 clip-path-both">
          <img class="h-6 mx-auto" src="bendis-assets/logos/dropbox-light-blue.svg" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 py-4 lg:px-0">
        <div class="w-80 md:w-auto py-14 mx-auto bg-blue-900 clip-path-both">
          <img class="h-6 mx-auto" src="bendis-assets/logos/spotify-light-blue.svg" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 py-4 lg:px-0">
        <div class="w-80 md:w-auto py-14 mx-auto bg-blue-900 clip-path-both">
          <img class="h-6 mx-auto" src="bendis-assets/logos/stripe-light-blue.svg" alt="">
        </div>
      </div>

<section class="relative bg-blue-50 py-24 overflow-hidden">
  <div class="absolute inset-0">
    <svg class="mt-20" width="705" height="798" viewBox="0 0 705 798" fill="none" xmlns="http://www.w3.org/2000/svg">
      <g opacity="0.15">
        <path d="M704.81 796.481L605.701 697.372C636.839 655.792 655.256 604.148 655.256 548.328C655.256 442.384 588.803 351.629 495.58 315.365L704.81 1.51892C705 1.13919 705 0.759458 704.81 0.569593C704.81 0.189864 704.43 0 704.051 0H-92.0507C-92.4304 0 -92.8101 0.189864 -92.8101 0.569593C-92.8101 0.949322 -93 1.13919 -92.8101 1.51892L85.8522 269.607L-92.8101 448.08C-93 448.27 -93 448.46 -93 448.839C-93 449.219 -93 449.409 -92.8101 449.599C-92.6203 449.789 -92.4304 449.789 -92.0507 449.789C-91.6709 449.789 -91.4811 449.789 -91.2912 449.599L86.9914 271.316L188.949 424.347C167.874 460.801 155.722 503.141 155.722 548.328C155.722 685.98 267.742 798 405.584 798C486.656 798 558.994 759.078 604.562 698.891L703.291 797.62C703.481 797.81 703.671 797.81 704.051 797.81C704.43 797.81 704.62 797.81 704.81 797.62C705 797.43 705 797.241 705 796.861C705 796.481 705 796.671 704.81 796.481ZM88.3205 269.797L157.431 200.687C157.621 200.497 157.621 200.307 157.621 199.927C157.621 199.547 157.621 199.358 157.431 199.168C157.051 198.788 156.482 198.788 156.102 199.168L87.1813 268.089L-90.3419 1.89864H702.342L493.871 314.605C466.341 304.163 436.722 298.467 405.774 298.467C313.879 298.467 233.567 348.211 190.088 422.258L88.3205 269.797ZM492.732 316.314L305.905 596.364L191.037 424.157C233.946 350.3 314.069 300.555 405.394 300.555C436.152 300.365 465.581 306.061 492.732 316.314ZM405.584 796.101C268.882 796.101 157.621 684.841 157.621 548.328C157.621 503.9 169.393 462.13 190.088 425.866L305.146 598.453C305.335 598.642 305.525 598.832 305.905 598.832C306.285 598.832 306.475 598.642 306.665 598.453L494.44 317.074C587.284 352.958 653.357 443.143 653.357 548.518C653.357 603.769 635.13 655.032 604.372 696.233L505.642 597.503C505.263 597.124 504.693 597.124 504.313 597.503C504.123 597.693 504.123 597.883 504.123 598.263C504.123 598.642 504.123 598.832 504.313 599.022L603.233 697.941C558.045 757.369 486.276 796.101 405.584 796.101Z" fill="#A0CDFA"></path>
        <path d="M82.055 572.251H-92.0507C-92.6203 572.251 -93 572.631 -93 573.201V747.306C-93 747.876 -92.6203 748.255 -92.0507 748.255H82.055C82.6246 748.255 83.0043 747.876 83.0043 747.306V573.201C83.0043 572.631 82.6246 572.251 82.055 572.251ZM81.1057 746.357H-91.1014V574.15H81.1057V746.357Z" fill="#A0CDFA"></path>
        <path d="M367.612 225.749C367.801 225.939 367.991 225.939 368.181 225.939C368.371 225.939 368.561 225.939 368.751 225.749L480.771 151.132C480.961 150.942 481.15 150.752 481.15 150.373C481.15 149.993 480.961 149.803 480.771 149.613L368.751 74.9964C368.371 74.8065 367.991 74.8065 367.612 74.9964L255.592 149.613C255.402 149.803 255.212 149.993 255.212 150.373C255.212 150.752 255.402 150.942 255.592 151.132L367.612 225.749ZM368.181 76.7052L478.492 150.183L368.181 223.66L257.87 150.183L368.181 76.7052Z" fill="#A0CDFA"></path>
      </g>
    </svg>
  </div>
  <div class="relative container mx-auto px-4">
    <div class="max-w-2xl mb-16 mx-auto text-center">
      <h2 class="mb-6 text-4xl font-bold text-blue-800">Take quick action that increases your brand's regular profit.</h2>
      <p class="mb-10 text-lg text-gray-500">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
    </div>
    <div class="flex flex-wrap -mx-4 -mb-6">
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-6">
        <img class="w-full h-64 lg:h-72 object-cover" src="https://images.unsplash.com/photo-1615866369373-8d232ea5a028?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=634&amp;q=80" alt="">
        <div class="py-16 px-10 text-center bg-white">
          <h3 class="mb-4 text-lg text-blue-800 font-bold uppercase font-heading">Change of access</h3>
          <p class="text-base text-gray-500">Take care to develop resources continually and integrity them with previous projects.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-6">

<section class="py-8 px-4 lg:px-10 bg-blue-800" x-data="{ mobileNavOpen: false }">
  <div class="container px-4 mx-auto">
    <nav class="relative">
      <div class="flex justify-between items-center">
        <a class="text-lg font-semibold" href="#">
          <img class="h-7" src="bendis-assets/logos/bendis-light.svg" alt="" width="auto">
        </a>
        <div class="lg:hidden">
          <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center p-3 rounded">
            <svg class="block text-white h-4 w-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
              <title>Mobile menu</title>
              <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
            </svg>
          </button>
        </div>
        <ul class="hidden absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2 lg:flex lg:items-center lg:w-auto lg:space-x-10">
          <li><a class="text-white font-semibold hover:text-blue-50" href="#">About</a></li>
          <li><a class="text-white font-semibold hover:text-blue-50" href="#">Company</a></li>
          <li><a class="text-white font-semibold hover:text-blue-50" href="#">Services</a></li>
          <li><a class="text-white font-semibold hover:text-blue-50" href="#">Testimonials</a></li>
        </ul>
        <div class="hidden lg:inline-flex">
          <input class="hidden lg:inline-block pl-6 py-3 bg-white text-blue-400 text-sm font-semibold placeholder-blue-400" placeholder="Search">
          <button class="px-4 bg-white">

<section class="relative py-24 bg-blue-800 overflow-x-hidden">
  <div class="absolute inset-0">
    <svg class="mx-auto mt-10" width="804" height="728" viewBox="0 0 804 728" fill="none" xmlns="http://www.w3.org/2000/svg">
      <g opacity="0.1" clip-path="url(#clip0)">
        <path d="M784.903 402.215C784.903 402.024 784.903 401.833 784.712 401.642L593.738 76.8126L593.547 76.6215L593.356 76.4305L479.154 0.191094L478.963 1.7597e-05L478.772 1.75887e-05L478.581 1.75803e-05L478.39 1.7572e-05L478.199 1.75636e-05L134.446 76.4304C134.255 76.4304 134.064 76.6215 133.873 76.8126C133.873 77.0037 133.682 77.1948 133.682 77.3858L133.682 77.5769L182.189 250.883C182.38 251.456 182.953 251.647 183.335 251.456C183.908 251.265 184.099 250.883 184.099 250.501L184.099 250.31L135.783 78.1501L476.862 2.29293L396.271 214.77L220.766 338.396C220.384 338.587 220.384 338.969 220.384 339.16C220.384 339.351 220.384 339.542 220.575 339.733C220.957 340.115 221.53 340.307 221.912 339.924L395.125 217.827L316.062 426.482L234.707 430.877L199.568 305.531C199.568 305.149 199.186 304.957 199.186 304.957C198.995 304.957 198.804 304.766 198.422 304.957C197.849 305.149 197.658 305.531 197.658 305.913L197.658 306.104L232.606 431.068L80.5911 439.284L175.123 372.79C175.505 372.598 175.505 372.216 175.505 372.025C175.505 371.834 175.505 371.643 175.314 371.452C174.932 371.07 174.359 370.879 173.977 371.261L76.7716 439.666C76.5806 439.857 76.3896 440.048 76.3896 440.43C76.3896 440.622 76.3896 440.622 76.3896 440.813C76.5806 441.195 76.9626 441.386 77.3445 441.386L233.179 432.978L267.363 555.076L267.554 555.458L267.554 555.649L267.745 555.84L267.936 556.032L592.592 708.892C592.974 709.083 593.165 709.083 593.547 708.892C593.738 708.701 593.929 708.51 593.929 708.128L593.929 493.741C593.929 493.167 593.547 492.785 592.974 492.785C592.401 492.785 592.019 493.167 592.019 493.741L592.019 706.408L269.464 554.503L317.208 428.393L530.716 416.928C531.289 416.928 531.671 416.546 531.671 415.973C531.671 415.399 531.098 415.017 530.716 415.017L318.163 426.482L397.99 215.916L592.019 79.2966L592.019 411.769L588.009 411.96C587.436 411.96 587.054 412.342 587.054 412.916C587.054 413.489 587.627 413.871 588.009 413.871L592.019 413.68L592.019 436.418C592.019 436.991 592.401 437.373 592.974 437.373C593.547 437.373 593.929 436.991 593.929 436.418L593.929 413.489L783.948 403.171C784.33 403.171 784.521 402.98 784.712 402.597C784.903 402.406 784.903 402.406 784.903 402.215ZM782.42 401.26L593.929 411.387L593.929 80.8252L782.42 401.26ZM478.772 2.48401L591.255 77.3858L399.135 212.668L478.772 2.48401ZM315.298 428.584L268.509 552.019L235.089 432.787L315.298 428.584Z" fill="#6CA2FA"></path>
        <path d="M804 688.829C804 667.238 786.43 649.659 764.85 649.659C743.27 649.659 725.701 667.238 725.701 688.829C725.701 710.421 743.27 728 764.85 728C786.43 728 804 710.421 804 688.829ZM727.61 688.829C727.61 668.193 744.225 651.57 764.85 651.57C785.476 651.57 802.09 668.193 802.09 688.829C802.09 709.466 785.476 726.089 764.85 726.089C744.225 726.089 727.61 709.275 727.61 688.829Z" fill="#6CA2FA"></path>
        <path d="M78.2993 230.247C78.2993 208.655 60.7297 191.076 39.1496 191.076C17.5696 191.076 -7.68403e-07 208.655 -1.7122e-06 230.247C-2.656e-06 251.838 17.5696 269.417 39.1496 269.417C60.7297 269.417 78.2993 251.838 78.2993 230.247ZM1.90974 230.247C1.90974 209.61 18.5245 192.987 39.1496 192.987C59.7748 192.987 76.3895 209.61 76.3895 230.247C76.3895 250.883 59.7748 267.507 39.1496 267.507C18.5245 267.507 1.90974 250.692 1.90974 230.247Z" fill="#6CA2FA"></path>
        <path d="M536.636 593.291C536.636 593.1 536.445 592.718 536.254 592.527C536.063 592.336 535.872 592.336 535.681 592.336C535.49 592.336 535.109 592.527 534.918 592.527C534.727 592.718 534.727 592.909 534.727 593.291C534.727 593.482 534.727 593.865 534.918 594.056C535.109 594.247 535.299 594.438 535.681 594.438C535.872 594.438 536.254 594.247 536.254 594.247C536.445 593.674 536.636 593.482 536.636 593.291Z" fill="#6CA2FA"></path>
        <path d="M536.637 535.969C536.637 535.777 536.446 535.395 536.255 535.395C536.064 535.204 535.873 535.013 535.682 535.013C535.491 535.013 535.109 535.204 535.109 535.204C534.918 535.395 534.918 535.586 534.918 535.969C534.918 536.16 534.918 536.542 535.109 536.733C535.3 536.924 535.491 537.115 535.873 537.115C536.064 537.115 536.446 536.924 536.446 536.924C536.446 536.542 536.637 536.16 536.637 535.969Z" fill="#6CA2FA"></path>
        <path d="M536.636 478.646C536.636 478.455 536.445 478.072 536.254 477.881C536.063 477.69 535.872 477.69 535.681 477.69C535.49 477.69 535.109 477.881 534.918 478.072C534.727 478.264 534.727 478.455 534.727 478.646C534.727 478.837 534.727 479.219 534.918 479.41C535.109 479.601 535.299 479.792 535.681 479.792C535.872 479.792 536.254 479.601 536.254 479.601C536.445 479.219 536.636 478.837 536.636 478.646Z" fill="#6CA2FA"></path>
        <path d="M479.344 478.646C479.344 478.455 479.153 478.072 478.962 477.881C478.771 477.69 478.58 477.69 478.389 477.69C478.198 477.69 477.817 477.881 477.626 478.072C477.435 478.264 477.435 478.455 477.435 478.646C477.435 478.837 477.435 479.219 477.626 479.41C477.817 479.601 478.007 479.792 478.389 479.792C478.58 479.792 478.962 479.601 478.962 479.601C479.153 479.028 479.344 478.837 479.344 478.646Z" fill="#6CA2FA"></path>
        <path d="M422.052 478.646C422.052 478.455 421.861 478.072 421.67 478.072C421.479 477.881 421.288 477.69 421.097 477.69C420.906 477.69 420.525 477.881 420.334 478.072C420.143 478.264 420.143 478.455 420.143 478.646C420.143 478.837 420.143 479.219 420.334 479.41C420.525 479.601 420.715 479.792 421.097 479.792C421.288 479.792 421.67 479.601 421.67 479.601C421.861 479.219 422.052 478.837 422.052 478.646Z" fill="#6CA2FA"></path>
      </g>
      <defs><clipPath id="clip0"><rect width="728" height="804" fill="white" transform="matrix(-4.37114e-08 1 1 4.37114e-08 0 0)"></rect></clipPath></defs>
    </svg>
  </div>
  <div class="relative container px-4 mx-auto">
    <div class="max-w-2xl mx-auto text-center mb-16">
      <h2 class="mb-6 text-5xl font-bold font-heading text-white">Get our Free Mobile App</h2>
      <p class="mb-8 text-lg text-gray-50">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
      <div class="flex justify-center items-center">
        <a class="mr-4" href="#">
          <img class="h-12" src="bendis-assets/images/app-store.png" alt="">
        </a>

<section class="relative bg-blue-50 py-24" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center mb-12 pb-16 border-b border-blue-200">
      <h2 class="mb-6 lg:mb-0 text-5xl font-bold text-blue-800">Lorem ipsum</h2>
      <div class="ml-auto flex flex-row border-2 border-blue-800">
        <button x-on:click="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="w-16 h-16 border-r-2 border-blue-800 hover:bg-blue-100 text-blue-800">
          <svg class="mx-auto" width="12" height="16" viewBox="0 0 12 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M8.75 0L11.25 2.5L5.75 8L11.25 13.5L8.75 16L0.75 8L8.75 0Z" fill="currentColor"></path>
          </svg>
        </button>
        <button x-on:click="activeSlide < slideCount - 1 ? (activeSlide += 1, slideWidth += $refs['slide' + activeSlide].offsetWidth) : activeSlide = slideCount - 1" class="w-16 h-16 hover:bg-blue-100 text-blue-800">
          <svg class="mx-auto" width="12" height="16" viewBox="0 0 12 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3.25 0L0.75 2.5L6.25 8L0.75 13.5L3.25 16L11.25 8L3.25 0Z" fill="currentColor"></path>
          </svg>
        </button>
      </div>
    </div>
    <div class="overflow-hidden">
        <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out -m-5">
            <div x-ref="slide1" class="flex-shrink-0 w-full p-5">
                <div class="flex flex-wrap -mx-5">
                  <div class="w-full lg:w-1/3 px-5 mb-10 lg:mb-0">
                    <p class="mb-6 text-base text-gary-500">Take care to develop resources continually and integrity</p>
                    <img class="w-full h-96" src="https://images.unsplash.com/photo-1593776805861-74972b600999?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">

<section class="py-24">
  <div class="container px-4 mx-auto">
    <h3 class="mb-8 text-center text-lg text-gray-500">Trusted by brands all over the world</h3>
    <div class="flex flex-wrap items-center -m-4 lg:-mx-0">
      <div class="w-full md:w-1/2 lg:w-1/4 py-4 lg:px-0">
        <div class="w-80 md:w-auto py-14 mx-auto bg-blue-50 clip-path-both">
          <img class="h-6 mx-auto" src="bendis-assets/logos/slack.svg" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 py-4 lg:px-0">
        <div class="w-80 md:w-auto py-14 mx-auto bg-blue-50 clip-path-both">
          <img class="h-6 mx-auto" src="bendis-assets/logos/dropbox.svg" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 py-4 lg:px-0">
        <div class="w-80 md:w-auto py-14 mx-auto bg-blue-50 clip-path-both">
          <img class="h-6 mx-auto" src="bendis-assets/logos/spotify.svg" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 py-4 lg:px-0">
        <div class="w-80 md:w-auto py-14 mx-auto bg-blue-50 clip-path-both">
          <img class="h-6 mx-auto" src="bendis-assets/logos/stripe.svg" alt="">
        </div>
      </div>

<section class="relative bg-blue-800 py-24 overflow-hidden" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <div class="container px-4 mx-auto">
    <div class="absolute inset-0">
      <svg class="mx-auto mt-10" width="628" height="628" viewBox="0 0 628 628" fill="none" xmlns="http://www.w3.org/2000/svg">
        <g opacity="0.1">
          <path d="M627.851 626.805L549.855 548.809C574.359 516.087 588.853 475.445 588.853 431.517C588.853 348.142 536.557 276.72 463.193 248.182L627.851 1.19534C628 0.896503 628 0.597668 627.851 0.448251C627.851 0.149417 627.552 0 627.253 0H0.747085C0.448251 0 0.149417 0.149417 0.149417 0.448251C0.149417 0.747085 0 0.896503 0.149417 1.19534L140.751 212.172L0.149417 352.624C0 352.774 0 352.923 0 353.222C0 353.521 0 353.67 0.149417 353.82C0.298834 353.969 0.448251 353.969 0.747085 353.969C1.04592 353.969 1.19534 353.969 1.34475 353.82L141.647 213.517L221.884 333.947C205.299 362.635 195.736 395.955 195.736 431.517C195.736 539.844 283.892 628 392.369 628C456.17 628 513.098 597.37 548.958 550.004L626.655 627.701C626.805 627.851 626.954 627.851 627.253 627.851C627.552 627.851 627.701 627.851 627.851 627.701C628 627.552 628 627.402 628 627.104C628 626.805 628 626.954 627.851 626.805ZM142.693 212.322L197.081 157.934C197.231 157.784 197.231 157.635 197.231 157.336C197.231 157.037 197.231 156.888 197.081 156.739C196.782 156.44 196.334 156.44 196.035 156.739L141.797 210.977L2.09184 1.49417H625.908L461.848 247.584C440.183 239.366 416.874 234.884 392.519 234.884C320.201 234.884 256.997 274.031 222.781 332.304L142.693 212.322ZM460.952 248.929L313.925 469.319L223.528 333.798C257.296 275.675 320.35 236.527 392.22 236.527C416.425 236.378 439.585 240.86 460.952 248.929ZM392.369 626.506C284.789 626.506 197.231 538.947 197.231 431.517C197.231 396.553 206.494 363.681 222.781 335.143L313.328 470.963C313.477 471.112 313.626 471.262 313.925 471.262C314.224 471.262 314.374 471.112 314.523 470.963L462.296 249.527C535.361 277.766 587.359 348.739 587.359 431.666C587.359 475.146 573.015 515.489 548.809 547.912L471.112 470.216C470.813 469.917 470.365 469.917 470.066 470.216C469.917 470.365 469.917 470.514 469.917 470.813C469.917 471.112 469.917 471.262 470.066 471.411L547.912 549.257C512.351 596.025 455.872 626.506 392.369 626.506Z" fill="white"></path>
          <path d="M137.763 450.343H0.747085C0.298834 450.343 0 450.642 0 451.09V588.106C0 588.554 0.298834 588.853 0.747085 588.853H137.763C138.211 588.853 138.51 588.554 138.51 588.106V451.09C138.51 450.642 138.211 450.343 137.763 450.343ZM137.015 587.359H1.49417V451.837H137.015V587.359Z" fill="white"></path>
          <path d="M362.486 177.657C362.636 177.806 362.785 177.806 362.934 177.806C363.084 177.806 363.233 177.806 363.383 177.657L451.539 118.936C451.688 118.787 451.838 118.637 451.838 118.338C451.838 118.04 451.688 117.89 451.539 117.741L363.383 59.0198C363.084 58.8704 362.785 58.8704 362.486 59.0198L274.33 117.741C274.181 117.89 274.031 118.04 274.031 118.338C274.031 118.637 274.181 118.787 274.33 118.936L362.486 177.657ZM362.934 60.3645L449.746 118.189L362.934 176.013L276.123 118.189L362.934 60.3645Z" fill="white"></path>
        </g>
      </svg>
    </div>
    <div class="relative flex flex-wrap items-center -mx-10">
      <div class="relative w-full lg:w-1/2 px-10 pb-12 lg:pb-0">
        <div>
            <div class="overflow-hidden">
                <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out -m-5">
                    <div x-ref="slide1" class="flex-shrink-0 w-full p-5">
                        <h2 class="mb-6 text-4xl font-bold text-white">Take quick action that increases your brand's regular profit.</h2>
                        <p class="mb-10 text-lg text-gray-50">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
                    </div>
                    <div x-ref="slide2" class="flex-shrink-0 w-full p-5">
                        <h2 class="mb-6 text-4xl font-bold text-white">Enhance Your Brand's Visibility and Sales Potential.</h2>
                        <p class="mb-10 text-lg text-gray-50">Discover effective strategies to boost your brand's presence and drive revenue growth. Elevate your business to new heights with these actionable insights.</p>
                    </div>

<section class="py-8 px-4 lg:px-10 bg-blue-800" x-data="{ mobileNavOpen: false }">
  <div class="container px-4 mx-auto">
    <nav class="relative">
      <div class="flex justify-between items-center">
        <button>
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M22.7973 21.0328L17.4361 15.4697C19.7112 11.9316 19.2607 7.2297 16.3549 4.22699C14.7105 2.55107 12.548 1.62 10.2278 1.62C7.90764 1.62 5.74515 2.55107 4.12329 4.22699C0.766928 7.71851 0.766928 13.3748 4.12329 16.843C7.02913 19.8457 11.5794 20.3112 15.0033 17.9836L20.387 23.5467C20.6348 23.8028 21.0628 23.8028 21.3106 23.5467L22.7973 22.0104C23.0676 21.7311 23.0676 21.2889 22.7973 21.0328ZM14.3726 14.8179C12.0975 17.1689 8.38069 17.1689 6.08304 14.8179C3.80793 12.467 3.80793 8.6263 6.08304 6.25207C8.35816 3.90112 12.0749 3.90112 14.3726 6.25207C16.6477 8.6263 16.6477 12.467 14.3726 14.8179Z" fill="white"></path>
          </svg>
        </button>
        <a class="text-lg font-semibold" href="#">
          <img class="h-7" src="bendis-assets/logos/bendis-light.svg" alt="" width="auto">
        </a>
        <div>
          <button x-on:click="mobileNavOpen = !mobileNavOpen">
            <svg class="inline-block text-white w-6 h-6" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="2" y="6" width="20" height="2" fill="white"></rect><rect x="2" y="11" width="20" height="2" fill="white"></rect><rect x="2" y="16" width="20" height="2" fill="white"></rect></svg>
          </button>
        </div>
      </div>
    </nav>
  </div>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-blue-800 opacity-90"></div>
    <nav class="relative flex flex-col py-8 w-full h-full bg-white border-r overflow-y-auto">
      <div class="flex items-center mb-16 pr-6">

<section class="relative pt-24 bg-blue-50 overflow-hidden">
  <div class="absolute inset-0">
    <svg class="mx-auto mt-10" width="1166" height="1006" viewBox="0 0 1166 1006" fill="none" xmlns="http://www.w3.org/2000/svg">
      <g opacity="0.1" clip-path="url(#clip0)">
        <path d="M1138.3 583.433C1138.3 583.156 1138.3 582.879 1138.03 582.602L861.067 111.421L860.79 111.143L860.513 110.866L694.891 0.277191L694.615 2.55201e-05L694.338 2.5508e-05L694.061 2.54958e-05L693.784 2.54837e-05L693.507 2.54716e-05L194.979 110.866C194.702 110.866 194.425 111.143 194.149 111.42C194.149 111.698 193.872 111.975 193.872 112.252L193.872 112.529L264.219 363.918C264.496 364.75 265.327 365.027 265.881 364.75C266.712 364.472 266.989 363.918 266.989 363.364L266.989 363.087L196.918 113.361L691.568 3.32601L574.691 311.534L320.165 490.86C319.611 491.137 319.611 491.691 319.611 491.968C319.611 492.246 319.611 492.523 319.888 492.8C320.442 493.354 321.273 493.631 321.827 493.077L573.029 315.968L458.368 618.633L340.383 625.008L289.423 443.187C289.423 442.633 288.869 442.356 288.869 442.356C288.592 442.356 288.315 442.079 287.761 442.356C286.93 442.633 286.653 443.187 286.653 443.742L286.653 444.019L337.337 625.285L116.877 637.203L253.972 540.75C254.526 540.472 254.526 539.918 254.526 539.641C254.526 539.364 254.526 539.087 254.249 538.809C253.695 538.255 252.864 537.978 252.31 538.532L111.338 637.757C111.061 638.035 110.784 638.312 110.784 638.866C110.784 639.143 110.784 639.143 110.784 639.42C111.061 639.975 111.615 640.252 112.168 640.252L338.167 628.057L387.743 805.165L388.02 805.72L388.02 805.997L388.297 806.274L388.574 806.551L859.405 1028.28C859.959 1028.56 860.236 1028.56 860.79 1028.28C861.067 1028.01 861.344 1027.73 861.344 1027.17L861.344 716.195C861.344 715.364 860.79 714.809 859.959 714.809C859.129 714.809 858.575 715.364 858.575 716.195L858.575 1024.68L390.79 804.334L460.03 621.405L769.671 604.775C770.501 604.775 771.055 604.22 771.055 603.389C771.055 602.557 770.224 602.003 769.671 602.003L461.415 618.633L577.184 313.197L858.575 115.024L858.575 597.291L852.758 597.569C851.928 597.569 851.374 598.123 851.374 598.954C851.374 599.786 852.205 600.34 852.758 600.34L858.575 600.063L858.575 633.046C858.575 633.877 859.129 634.431 859.959 634.431C860.79 634.431 861.344 633.877 861.344 633.046L861.344 599.786L1136.92 584.819C1137.47 584.819 1137.75 584.542 1138.03 583.987C1138.3 583.71 1138.3 583.71 1138.3 583.433ZM1134.7 582.047L861.344 596.737L861.344 117.241L1134.7 582.047ZM694.338 3.60317L857.467 112.252L578.845 308.485L694.338 3.60317ZM457.26 621.682L389.405 800.731L340.937 627.779L457.26 621.682Z" fill="#6CA2FA"></path>
        <path d="M1166 999.181C1166 967.862 1140.52 942.362 1109.22 942.362C1077.93 942.362 1052.45 967.862 1052.45 999.181C1052.45 1030.5 1077.93 1056 1109.22 1056C1140.52 1056 1166 1030.5 1166 999.181ZM1055.22 999.181C1055.22 969.247 1079.31 945.134 1109.22 945.134C1139.13 945.134 1163.23 969.247 1163.23 999.181C1163.23 1029.12 1139.13 1053.23 1109.22 1053.23C1079.31 1053.23 1055.22 1028.84 1055.22 999.181Z" fill="#6CA2FA"></path>
        <path d="M113.553 333.984C113.553 302.665 88.0732 277.165 56.7767 277.165C25.4803 277.165 -1.11461e-06 302.665 -2.48363e-06 333.984C-3.85266e-06 365.304 25.4803 390.803 56.7767 390.803C88.0732 390.803 113.553 365.304 113.553 333.984ZM2.76959 333.984C2.76959 304.05 26.8651 279.937 56.7767 279.937C86.6884 279.937 110.784 304.05 110.784 333.984C110.784 363.918 86.6884 388.032 56.7767 388.032C26.8651 388.032 2.76959 363.641 2.76959 333.984Z" fill="#6CA2FA"></path>
        <path d="M778.256 860.598C778.256 860.321 777.979 859.767 777.702 859.49C777.425 859.213 777.149 859.213 776.872 859.213C776.595 859.213 776.041 859.49 775.764 859.49C775.487 859.767 775.487 860.044 775.487 860.598C775.487 860.876 775.487 861.43 775.764 861.707C776.041 861.984 776.318 862.261 776.872 862.261C777.149 862.261 777.702 861.984 777.702 861.984C777.979 861.153 778.256 860.876 778.256 860.598Z" fill="#6CA2FA"></path>
        <path d="M778.257 777.449C778.257 777.172 777.98 776.617 777.703 776.617C777.426 776.34 777.149 776.063 776.872 776.063C776.595 776.063 776.041 776.34 776.041 776.34C775.764 776.617 775.764 776.895 775.764 777.449C775.764 777.726 775.764 778.28 776.041 778.558C776.318 778.835 776.595 779.112 777.149 779.112C777.426 779.112 777.98 778.835 777.98 778.835C777.98 778.28 778.257 777.726 778.257 777.449Z" fill="#6CA2FA"></path>
        <path d="M778.256 694.299C778.256 694.022 777.979 693.468 777.702 693.191C777.425 692.913 777.149 692.913 776.872 692.913C776.595 692.913 776.041 693.191 775.764 693.468C775.487 693.745 775.487 694.022 775.487 694.299C775.487 694.576 775.487 695.131 775.764 695.408C776.041 695.685 776.318 695.962 776.872 695.962C777.149 695.962 777.702 695.685 777.702 695.685C777.979 695.131 778.256 694.576 778.256 694.299Z" fill="#6CA2FA"></path>
        <path d="M695.169 694.299C695.169 694.022 694.892 693.468 694.615 693.191C694.338 692.913 694.061 692.913 693.784 692.913C693.507 692.913 692.953 693.191 692.676 693.468C692.399 693.745 692.399 694.022 692.399 694.299C692.399 694.576 692.399 695.131 692.676 695.408C692.953 695.685 693.23 695.962 693.784 695.962C694.061 695.962 694.615 695.685 694.615 695.685C694.892 694.854 695.169 694.576 695.169 694.299Z" fill="#6CA2FA"></path>
        <path d="M612.081 694.299C612.081 694.022 611.804 693.468 611.527 693.468C611.25 693.191 610.973 692.913 610.696 692.913C610.419 692.913 609.865 693.191 609.588 693.468C609.311 693.745 609.311 694.022 609.311 694.299C609.311 694.576 609.311 695.131 609.588 695.408C609.865 695.685 610.142 695.962 610.696 695.962C610.973 695.962 611.527 695.685 611.527 695.685C611.804 695.131 612.081 694.576 612.081 694.299Z" fill="#6CA2FA"></path>
      </g>
      <defs><clipPath id="clip0"><rect width="1056" height="1166" fill="white" transform="matrix(-4.37114e-08 1 1 4.37114e-08 0 0)"></rect></clipPath></defs>
    </svg>
  </div>
  <div class="relative container px-4 mx-auto text-center">
    <div class="max-w-2xl mx-auto mb-20">
      <span class="text-blue-400 uppercase font-semibold tracking-widest">New feature</span>
      <h2 class="mt-4 mb-6 text-4xl font-bold font-heading text-blue-800">Take quick action that increases your brand's regular profit.</h2>
      <p class="text-lg text-gray-500">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
    </div>
    <div class="max-w-4xl mx-auto">
      <img class="mx-auto" src="bendis-assets/images/computer-head.png" alt="">

<section class="relative bg-blue-50 py-24 overflow-hidden" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <div class="container px-4 mx-auto">
    <div class="absolute inset-0">
      <svg class="mx-auto mt-10" width="628" height="628" viewBox="0 0 628 628" fill="none" xmlns="http://www.w3.org/2000/svg">
        <g opacity="0.15">
          <path d="M627.851 626.805L549.855 548.809C574.359 516.087 588.853 475.445 588.853 431.517C588.853 348.142 536.557 276.72 463.193 248.182L627.851 1.19534C628 0.896503 628 0.597668 627.851 0.448251C627.851 0.149417 627.552 0 627.253 0H0.747085C0.448251 0 0.149417 0.149417 0.149417 0.448251C0.149417 0.747085 0 0.896503 0.149417 1.19534L140.751 212.172L0.149417 352.624C0 352.774 0 352.923 0 353.222C0 353.521 0 353.67 0.149417 353.82C0.298834 353.969 0.448251 353.969 0.747085 353.969C1.04592 353.969 1.19534 353.969 1.34475 353.82L141.647 213.517L221.884 333.947C205.299 362.635 195.736 395.955 195.736 431.517C195.736 539.844 283.892 628 392.369 628C456.17 628 513.098 597.37 548.958 550.004L626.655 627.701C626.805 627.851 626.954 627.851 627.253 627.851C627.552 627.851 627.701 627.851 627.851 627.701C628 627.552 628 627.402 628 627.104C628 626.805 628 626.954 627.851 626.805ZM142.693 212.322L197.081 157.934C197.231 157.784 197.231 157.635 197.231 157.336C197.231 157.037 197.231 156.888 197.081 156.739C196.782 156.44 196.334 156.44 196.035 156.739L141.797 210.977L2.09184 1.49417H625.908L461.848 247.584C440.183 239.366 416.874 234.884 392.519 234.884C320.201 234.884 256.997 274.031 222.781 332.304L142.693 212.322ZM460.952 248.929L313.925 469.319L223.528 333.798C257.296 275.675 320.35 236.527 392.22 236.527C416.425 236.378 439.585 240.86 460.952 248.929ZM392.369 626.506C284.789 626.506 197.231 538.947 197.231 431.517C197.231 396.553 206.494 363.681 222.781 335.143L313.328 470.963C313.477 471.112 313.626 471.262 313.925 471.262C314.224 471.262 314.374 471.112 314.523 470.963L462.296 249.527C535.361 277.766 587.359 348.739 587.359 431.666C587.359 475.146 573.015 515.489 548.809 547.912L471.112 470.216C470.813 469.917 470.365 469.917 470.066 470.216C469.917 470.365 469.917 470.514 469.917 470.813C469.917 471.112 469.917 471.262 470.066 471.411L547.912 549.257C512.351 596.025 455.872 626.506 392.369 626.506Z" fill="#A0CDFA"></path>
          <path d="M137.763 450.343H0.747085C0.298834 450.343 0 450.642 0 451.09V588.106C0 588.554 0.298834 588.853 0.747085 588.853H137.763C138.211 588.853 138.51 588.554 138.51 588.106V451.09C138.51 450.642 138.211 450.343 137.763 450.343ZM137.015 587.359H1.49417V451.837H137.015V587.359Z" fill="#A0CDFA"></path>
          <path d="M362.486 177.657C362.636 177.806 362.785 177.806 362.934 177.806C363.084 177.806 363.233 177.806 363.383 177.657L451.539 118.936C451.688 118.787 451.838 118.637 451.838 118.338C451.838 118.04 451.688 117.89 451.539 117.741L363.383 59.0198C363.084 58.8704 362.785 58.8704 362.486 59.0198L274.33 117.741C274.181 117.89 274.031 118.04 274.031 118.338C274.031 118.637 274.181 118.787 274.33 118.936L362.486 177.657ZM362.934 60.3645L449.746 118.189L362.934 176.013L276.123 118.189L362.934 60.3645Z" fill="#A0CDFA"></path>
        </g>
      </svg>
    </div>
    <div class="relative flex flex-wrap items-center -mx-10">
      <div class="relative w-full lg:w-1/2 px-10 pb-12 lg:pb-0">
        <div>
            <div class="overflow-hidden">
                <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out -m-5">
                    <div x-ref="slide1" class="flex-shrink-0 w-full p-5">
                        <h2 class="mb-6 text-4xl font-bold text-blue-800">Take quick action that increases your brand's regular profit.</h2>
                        <p class="mb-10 text-lg text-gray-500">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
                    </div>
                    <div x-ref="slide2" class="flex-shrink-0 w-full p-5">
                        <h2 class="mb-6 text-4xl font-bold text-blue-800">Enhance Your Brand's Visibility and Sales Potential.</h2>
                        <p class="mb-10 text-lg text-gray-500">Discover effective strategies to boost your brand's presence and drive revenue growth. Elevate your business to new heights with these actionable insights.</p>
                    </div>