UI Components – Bendis Library

<section class="relative py-24 bg-blue-800 overflow-hidden">
  <div class="absolute top-0 left-0">
    <svg class="ml-20" width="604" height="666" viewBox="0 0 604 666" fill="none" xmlns="http://www.w3.org/2000/svg">
      <g opacity="0.1">
        <path d="M270.294 650.18C270.453 650.18 270.611 650.18 270.77 650.022L540.271 491.827L540.429 491.669L540.588 491.511L603.841 396.911L604 396.752V396.594V396.436V396.278V396.12L540.588 111.369C540.588 111.211 540.429 111.053 540.271 110.894C540.112 110.894 539.954 110.736 539.795 110.736H539.637L395.85 150.918C395.374 151.076 395.216 151.551 395.374 151.867C395.533 152.341 395.85 152.5 396.167 152.5H396.325L539.161 112.476L602.098 395.012L425.812 328.254L323.243 182.873C323.085 182.557 322.767 182.557 322.609 182.557C322.45 182.557 322.292 182.557 322.133 182.715C321.816 183.031 321.658 183.506 321.975 183.822L423.276 327.305L250.161 261.812L246.514 194.421L350.51 165.313C350.827 165.313 350.986 164.997 350.986 164.997C350.986 164.839 351.144 164.681 350.986 164.364C350.827 163.89 350.51 163.732 350.193 163.732H350.035L246.356 192.681L239.539 66.7581L294.708 145.065C294.866 145.381 295.183 145.381 295.342 145.381C295.5 145.381 295.659 145.381 295.817 145.223C296.134 144.906 296.293 144.432 295.976 144.115L239.222 63.5942C239.064 63.436 238.905 63.2778 238.588 63.2778C238.429 63.2778 238.429 63.2778 238.271 63.2778C237.954 63.436 237.795 63.7524 237.795 64.0688L244.771 193.156L143.47 221.473L143.153 221.631H142.994L142.836 221.789L142.677 221.947L15.853 490.878C15.6945 491.195 15.6945 491.353 15.853 491.669C16.0116 491.827 16.1701 491.986 16.4872 491.986H194.358C194.834 491.986 195.151 491.669 195.151 491.195C195.151 490.72 194.834 490.404 194.358 490.404H17.9139L143.945 223.213L248.575 262.761L258.087 439.623C258.087 440.098 258.404 440.414 258.88 440.414C259.355 440.414 259.672 439.94 259.672 439.623L250.161 263.552L424.861 329.678L538.21 490.404H262.367L262.209 487.082C262.209 486.607 261.892 486.291 261.416 486.291C260.941 486.291 260.624 486.765 260.624 487.082L260.782 490.404H241.917C241.441 490.404 241.124 490.72 241.124 491.195C241.124 491.669 241.441 491.986 241.917 491.986H260.941L269.501 649.389C269.501 649.706 269.66 649.864 269.977 650.022C270.135 650.18 270.135 650.18 270.294 650.18ZM271.087 648.124L262.685 491.986H536.942L271.087 648.124ZM601.939 396.594L539.795 489.771L427.556 330.627L601.939 396.594ZM248.417 261.18L146.006 222.422L244.929 194.738L248.417 261.18Z" fill="white"></path>
        <path d="M32.4986 666C50.4125 666 64.9973 651.446 64.9973 633.57C64.9973 615.694 50.4125 601.14 32.4986 601.14C14.5847 601.14 -6.10352e-05 615.694 -6.10352e-05 633.57C-6.10352e-05 651.446 14.5847 666 32.4986 666ZM32.4986 602.722C49.6199 602.722 63.412 616.485 63.412 633.57C63.412 650.655 49.6199 664.418 32.4986 664.418C15.3774 664.418 1.58524 650.655 1.58524 633.57C1.58524 616.485 15.5359 602.722 32.4986 602.722Z" fill="white"></path>
        <path d="M412.971 64.8599C430.885 64.8599 445.47 50.3059 445.47 32.4299C445.47 14.5539 430.885 0 412.971 0C395.057 0 380.472 14.5539 380.472 32.4299C380.472 50.3059 395.057 64.8599 412.971 64.8599ZM412.971 1.58195C430.092 1.58195 443.884 15.3449 443.884 32.4299C443.884 49.515 430.092 63.2779 412.971 63.2779C395.85 63.2779 382.058 49.515 382.058 32.4299C382.058 15.3449 396.008 1.58195 412.971 1.58195Z" fill="white"></path>
        <path d="M111.764 444.527C111.923 444.527 112.24 444.369 112.398 444.211C112.557 444.053 112.557 443.894 112.557 443.736C112.557 443.578 112.398 443.262 112.398 443.104C112.24 442.945 112.081 442.945 111.764 442.945C111.605 442.945 111.288 442.945 111.13 443.104C110.971 443.262 110.813 443.42 110.813 443.736C110.813 443.894 110.971 444.211 110.971 444.211C111.447 444.369 111.605 444.527 111.764 444.527Z" fill="white"></path>
        <path d="M159.323 444.527C159.482 444.527 159.799 444.369 159.799 444.211C159.957 444.053 160.116 443.895 160.116 443.736C160.116 443.578 159.957 443.262 159.957 443.262C159.799 443.104 159.64 443.104 159.323 443.104C159.165 443.104 158.847 443.104 158.689 443.262C158.53 443.42 158.372 443.578 158.372 443.895C158.372 444.053 158.53 444.369 158.53 444.369C158.847 444.369 159.165 444.527 159.323 444.527Z" fill="white"></path>
        <path d="M206.882 444.527C207.041 444.527 207.358 444.369 207.516 444.211C207.675 444.053 207.675 443.894 207.675 443.736C207.675 443.578 207.516 443.262 207.358 443.104C207.199 442.945 207.041 442.945 206.882 442.945C206.724 442.945 206.407 442.945 206.248 443.104C206.09 443.262 205.931 443.42 205.931 443.736C205.931 443.894 206.09 444.211 206.09 444.211C206.407 444.369 206.724 444.527 206.882 444.527Z" fill="white"></path>
        <path d="M206.882 397.069C207.041 397.069 207.358 396.911 207.516 396.752C207.675 396.594 207.675 396.436 207.675 396.278C207.675 396.12 207.516 395.803 207.358 395.645C207.199 395.487 207.041 395.487 206.882 395.487C206.724 395.487 206.407 395.487 206.248 395.645C206.09 395.803 205.931 395.962 205.931 396.278C205.931 396.436 206.09 396.752 206.09 396.752C206.565 396.911 206.724 397.069 206.882 397.069Z" fill="white"></path>
        <path d="M206.882 349.611C207.041 349.611 207.358 349.452 207.358 349.294C207.516 349.136 207.675 348.978 207.675 348.82C207.675 348.661 207.516 348.345 207.358 348.187C207.199 348.029 207.041 348.029 206.882 348.029C206.724 348.029 206.407 348.029 206.248 348.187C206.09 348.345 205.931 348.503 205.931 348.82C205.931 348.978 206.09 349.294 206.09 349.294C206.407 349.452 206.724 349.611 206.882 349.611Z" fill="white"></path>
      </g>
    </svg>
  </div>
  <div class="relative container px-4 mx-auto">
    <div class="max-w-xl mx-auto bg-white py-12 px-16">
      <form action="#">
        <span class="inline-block uppercase text-blue-400 font-semibold tracking-widest">Sign Up</span>
        <h3 class="mb-4 text-2xl font-bold font-heading text-blue-800">Create new account</h3>
        <input class="block w-full py-4 pl-6 mb-2 text-sm placeholder-blue-400 text-blue-400 bg-blue-50" type="email" placeholder="E-mail address">
        <input class="block w-full py-4 pl-6 mb-2 text-sm placeholder-blue-400 text-blue-400 bg-blue-50" type="password" placeholder="Password">
        <input class="block w-full py-4 pl-6 mb-6 text-sm placeholder-blue-400 text-blue-400 bg-blue-50" type="password" placeholder="Repeat password">
        <label class="inline-flex mb-4 text-left">

<section class="py-24 bg-blue-50">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap justify-between items-center -mx-2">
      <div class="w-full lg:w-2/6 px-2">
        <a class="inline-block mb-6 text-blue-800 text-lg font-semibold" href="#">
          <img class="h-7" src="bendis-assets/logos/bendis-blue.svg" alt="" width="auto">
        </a>
        <p class="hidden lg:block text-sm text-gray-500">All rights reserved © Wireframes Corporation 2021</p>
      </div>
      <div class="w-full lg:w-4/6 px-2">
        <div class="flex flex-wrap items-center justify-end">
          <ul class="w-full lg:w-auto inline-flex flex-wrap mb-4 lg:mb-0 md:mr-6 lg:mr-16">
            <li class="mr-10 mb-2 md:mb-0"><a class="text-sm text-blue-500 hover:text-blue-600" href="#">Company</a></li>
            <li class="mr-10 mb-2 md:mb-0"><a class="text-sm text-blue-500 hover:text-blue-600" href="#">Pages</a></li>
            <li class="mr-10 mb-2 md:mb-0"><a class="text-sm text-blue-500 hover:text-blue-600" href="#">Legal</a></li>
            <li class="mb-2 md:mb-0"><a class="text-sm text-blue-500 hover:text-blue-600" href="#">Resources</a></li>
          </ul>
          <a class="inline-block mr-auto lg:mr-0 py-5 px-8 text-sm text-blue-800 font-bold uppercase bg-yellow-500 hover:bg-yellow-400" href="#">Action</a>
        </div>
        <p class="mt-6 lg:hidden text-sm text-gray-500">All rights reserved © Wireframes Corporation 2021</p>
      </div>
    </div>
  </div>
</section>

<section class="relative py-24 overflow-hidden">
  <div class="hidden lg:block absolute top-0 left-0 h-full w-1/2 bg-blue-50 clip-path-right-top"></div>
  <div class="relative container px-4 mx-auto">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full lg:w-2/5 px-4 mb-20 lg:mb-0">
        <div class="max-w-md">
          <span class="text-blue-400 uppercase font-semibold tracking-widest">Lorem ipsum</span>
          <h2 class="mt-4 mb-6 text-4xl font-bold font-heading text-blue-800">Lorem ipsum dolor sit amet consectutar</h2>
          <p class="mb-8 text-xl 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 px-8 py-5 text-sm uppercase text-blue-800 font-bold bg-yellow-500 hover:bg-yellow-400 transition duration-200" href="#">Try Demo</a>
        </div>
      </div>
      <div class="w-full lg:w-3/5 px-4">
        <div class="lg:ml-16 flex flex-wrap -mx-5">
          <div class="w-full lg:w-1/2 px-5 mb-8">
            <span class="flex justify-center items-center mb-4 w-20 h-12 clip-path-both bg-yellow-500 text-2xl text-blue-800 font-bold">1</span>
            <p class="text-base text-gray-500">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
          </div>
          <div class="w-full lg:w-1/2 px-5 mb-8">
            <span class="flex justify-center items-center mb-4 w-20 h-12 clip-path-both bg-yellow-500 text-2xl text-blue-800 font-bold">2</span>
            <p class="text-base text-gray-500">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
          </div>
          <div class="w-full lg:w-1/2 px-5 mb-8 lg:mb-0">
            <span class="flex justify-center items-center mb-4 w-20 h-12 clip-path-both bg-yellow-500 text-2xl text-blue-800 font-bold">3</span>

<section class="relative py-20 overflow-hidden">
  <img class="absolute top-0 left-0 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=1036&amp;q=80" alt="">
  <div class="relative container px-4 mx-auto z-10">
    <div class="max-w-xl mx-auto lg:mx-0 py-12 pl-16 pr-32 bg-white clip-path-right-top">
      <h3 class="mb-4 text-2xl font-semibold text-blue-800">Weekly email updates</h3>
      <p class="mb-7 text-gray-500 text-base leading-relaxed">Focus on your business with a large number of useful tools to take care of your company's development. Share your difficulties with us, and we will help you.</p>
      <a class="flex items-center text-blue-800 text-sm font-bold uppercase hover:underline" href="#">
        <spam>Try demo</spam>
        <span class="ml-2">
          <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M1.875 0L0 1.875L4.125 6L0 10.125L1.875 12L7.875 6L1.875 0Z" fill="#3C74F9"></path>
          </svg>
        </span>
      </a>
    </div>
  </div>
</section>

<section class="bg-blue-800 py-24">
  <div class="container mx-auto px-4">
    <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">
        <img class="w-full h-64 lg:h-72 object-cover" src="https://images.unsplash.com/photo-1615866431878-500cc9e74d82?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">Frequent authentication</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">
        <img class="w-full h-64 lg:h-72 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="">
        <div class="py-16 px-10 text-center bg-blue-900">
          <h3 class="mb-4 text-lg text-white font-bold uppercase font-heading">List of regular users</h3>
          <p class="text-base text-white">Take care to develop resources continually and integrity them with previous projects.</p>
        </div>
      </div>

<section class="py-12 bg-blue-800">
  <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-900">
          <img class="h-6 mx-auto" src="bendis-assets/logos/slack-light-blue.svg" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/3 lg:w-1/6 p-4">
        <div class="py-16 bg-blue-900">
          <img class="h-6 mx-auto" src="bendis-assets/logos/dropbox-light-blue.svg" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/3 lg:w-1/6 p-4">
        <div class="py-16 bg-blue-900">
          <img class="h-6 mx-auto" src="bendis-assets/logos/spotify-light-blue.svg" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/3 lg:w-1/6 p-4">
        <div class="py-16 bg-blue-900">
          <img class="h-6 mx-auto" src="bendis-assets/logos/amazon-light-blue.svg" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/3 lg:w-1/6 p-4">

<section class="relative py-24 bg-blue-50 overflow-hidden">
  <div class="absolute top-0 bottom-0 -left-1/4 -right-1/4 flex items-center justify-center">
    <h2 class="stroke opacity-25">CONTACTS</h2>
  </div>
  <div class="relative container px-4 mx-auto">
    <div class="max-w-2xl mx-auto mb-16 text-center">
      <h2 class="mb-5 text-3xl lg:text-4xl font-bold font-heading text-blue-800">Lorem ipsum dolor sit amet consectutar</h2>
      <p class="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>
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/3 px-4 mb-4 lg:mb-0">
        <div class="py-16 h-full bg-white text-center">
          <h3 class="mb-4 text-lg font-semibold font-heading text-blue-800">Visit Us</h3>
          <p class="text-gray-500">1686 Geraldine Lane</p>
          <p class="text-gray-500">New York, NY 10013</p>
        </div>
      </div>
      <div class="w-full lg:w-1/3 px-4 mb-4 lg:mb-0">
        <div class="py-16 h-full bg-white text-center">
          <h3 class="mb-4 text-lg font-semibold font-heading text-blue-800">Contacts</h3>
          <p class="text-gray-500">hello@wireframes.org</p>
          <p class="text-gray-500">+7-843-672-431</p>
        </div>
      </div>

<section class="relative py-24 bg-blue-50 overflow-hidden">
  <div class="absolute inset-0">
    <svg class="mx-auto mt-4" 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.153 0.191094L478.962 1.7597e-05L478.771 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.782 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.5909 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.7715 439.666C76.5805 439.857 76.3895 440.048 76.3895 440.43C76.3895 440.622 76.3895 440.622 76.3895 440.813C76.5805 441.195 76.9624 441.386 77.3444 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.162 426.482L397.989 215.916L592.019 79.2966L592.019 411.769L588.008 411.96C587.436 411.96 587.054 412.342 587.054 412.916C587.054 413.489 587.627 413.871 588.008 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.771 2.48401L591.255 77.3858L399.135 212.668L478.771 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.611 18.5245 192.987 39.1496 192.987C59.7748 192.987 76.3895 209.611 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.637 593.291C536.637 593.1 536.446 592.718 536.255 592.527C536.064 592.336 535.873 592.336 535.682 592.336C535.491 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.3 594.438 535.682 594.438C535.873 594.438 536.255 594.247 536.255 594.247C536.446 593.673 536.637 593.482 536.637 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.637 478.646C536.637 478.455 536.446 478.072 536.255 477.881C536.064 477.69 535.873 477.69 535.682 477.69C535.491 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.3 479.792 535.682 479.792C535.873 479.792 536.255 479.601 536.255 479.601C536.446 479.219 536.637 478.837 536.637 478.646Z" fill="#6CA2FA"></path>
        <path d="M479.344 478.646C479.344 478.455 479.153 478.072 478.962 477.881C478.772 477.69 478.581 477.69 478.39 477.69C478.199 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.008 479.792 478.39 479.792C478.581 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.524 477.881 420.333 478.072C420.142 478.264 420.142 478.455 420.142 478.646C420.142 478.837 420.142 479.219 420.333 479.41C420.524 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="flex flex-wrap items-center -mx-8">
      <div class="w-full md:w-3/5 px-8 mb-16 md:mb-0">
        <div class="max-w-max ml-auto">
          <h2 class="mb-6 text-5xl font-bold font-heading text-blue-800">Get our Free Mobile App</h2>
          <div class="max-w-xl mb-10">
            <p class="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>

<section class="py-24">
  <div class="container px-4 mx-auto">
    <div class="max-w-2xl mx-auto">
      <h2 class="mb-6 text-3xl font-bold font-heading text-blue-800">When I was a developer, I often had a hundred questions when</h2>
      <p class="mb-6 text-lg text-gray-500">Building websites from wireframes that I had received. Some of those questions were:</p>
      <ul>
        <li class="flex mb-6 items-center">
          <span class="flex-shrink-0 mr-6 w-14 py-1 pl-4 clip-path-right-top bg-yellow-500 text-lg text-blue-800 font-bold font-heading">1</span>
          <h3 class="text-gray-500 text-lg font-medium">How will this design scale when I shrink the browser window?</h3>
        </li>
        <li class="flex mb-6 items-center">
          <span class="flex-shrink-0 mr-6 w-14 py-1 pl-4 clip-path-right-top bg-yellow-500 text-lg text-blue-800 font-bold font-heading">2</span>
          <h3 class="text-gray-500 text-lg font-medium">What happens when this shape is filled out incorrectly?</h3>
        </li>
        <li class="flex mb-10 items-center">
          <span class="flex-shrink-0 mr-6 w-14 py-1 pl-4 clip-path-right-top bg-yellow-500 text-lg text-blue-800 font-bold font-heading">3</span>
          <h3 class="text-gray-500 text-lg font-medium">What are the options in this sorting filter, and what do they do?</h3>
        </li>
      </ul>
      <p class="mb-6 text-lg text-gray-500">These types of questions led me to miss numerous deadlines, and I wasted time and energy in back-and-forth communication. Sadly, this situation could have been avoided if the wireframes had provided enough detail.</p>
      <p class="mb-6 text-lg text-gray-500">Now that I am a UX designer, I notice that some designers tend to forget that wireframes are equally creative and technical. We are responsible for designing great ideas, but we are also responsible for creating product specifications. I admit that there can be so many details to remember that it’s easy to lose track. To save time and energy for myself, I gathered all of my years of wireframing knowledge into a single checklist that I refer to throughout the process. And now I am sharing this knowledge with you, so that you can get back to being creative.</p>
    </div>
  </div>
</section>

<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="text-white block h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
              <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: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: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>

<section class="py-24 bg-blue-50" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 4 }">
  <div class="container px-4 mx-auto">
    <div class="flex items-center justify-around -mx-4 mb-16">
      <div class="px-4">
        <button x-on:click="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="flex-shrink-0 mr-2 hidden lg:block w-16 h-16 border-2 border-blue-900 text-blue-900 hover:bg-blue-100">
          <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>
      </div>
      <div class="overflow-hidden pb-28 lg:pb-0">
        <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out">
            <div x-ref="slide1" class="flex-shrink-0 w-full">
                <div class="bg-white">
                  <div class="flex flex-wrap -mx-4">
                    <div class="w-full lg:w-3/5 px-12 lg:px-4 lg:mb-0 py-10 lg:py-20">
                      <div class="lg:max-w-md mx-auto">
                        <span class="text-blue-400">UI Designer</span>
                        <h2 class="mt-2 mb-6 text-4xl font-bold font-heading text-blue-800">Sara Harris</h2>
                        <p class="mb-6 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">
                          <a class="inline-flex items-center justify-center w-12 h-12 mr-4 bg-blue-50 text-blue-500" href="#">
                            <svg width="10" height="18" viewBox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                              <path fill-rule="evenodd" clip-rule="evenodd" d="M6.63494 17.7272V9.766H9.3583L9.76688 6.66243H6.63494V4.68126C6.63494 3.78299 6.88821 3.17083 8.20297 3.17083L9.87712 3.17015V0.394215C9.5876 0.357312 8.59378 0.272705 7.43708 0.272705C5.0217 0.272705 3.3681 1.71878 3.3681 4.37389V6.66243H0.636475V9.766H3.3681V17.7272H6.63494Z" fill="currentColor"></path>

<section class="py-24 bg-blue-50" x-data="{ showContent: false }">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -m-4 mb-16">
      <div class="w-full md:w-1/2 lg:w-1/3 p-4">
        <div class="bg-white">
          <div class="relative h-52">
            <span class="absolute top-0 left-0 pr-10 pl-8 py-4 text-xs uppercase text-gray-500 bg-white clip-path-right-small">Development</span>
            <img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1506464253090-7af30fe60a71?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=334&amp;q=80" alt="">
          </div>
          <div class="p-10">
            <h2 class="mb-2 text-2xl font-semibold font-heading text-blue-800">Vestibulum sapien diam, fermentum</h2>
            <span class="text-xs text-blue-400 font-semibold">10 JUN 2021 | 19:40</span>
            <p class="mt-2 mb-4 text-base leading-loose text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
            <a class="text-sm uppercase font-bold text-blue-800 hover:underline" href="#">
              <span>Read more</span>
              <span class="inline-block ml-2">
                <svg class="text-blue-500 h-3 w-3" viewBox="0 0 8 12" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                  <path d="M1.875 0L0 1.875L4.125 6L0 10.125L1.875 12L7.875 6L1.875 0Z"></path>
                </svg>
              </span>
            </a>
          </div>
        </div>
      </div>

<section class="py-24 bg-blue-800">
  <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-300">Company</h3>
            <ul class="text-sm">
              <li class="mb-4"><a class="text-white hover:text-blue-200" href="#">About Us</a></li>
              <li class="mb-4"><a class="text-white hover:text-blue-200" href="#">Careers</a></li>
              <li class="mb-4"><a class="text-white hover:text-blue-200" href="#">Press</a></li>
              <li class="mb-4"><a class="text-white hover:text-blue-200" 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-300">Pages</h3>
            <ul class="text-sm">
              <li class="mb-4"><a class="text-white hover:text-blue-200" href="#">Login</a></li>
              <li class="mb-4"><a class="text-white hover:text-blue-200" href="#">Register</a></li>
              <li class="mb-4"><a class="text-white hover:text-blue-200" href="#">Add list</a></li>
              <li class="mb-4"><a class="text-white hover:text-blue-200" href="#">Contact</a></li>
            </ul>
          </div>
          <div class="w-1/2 lg:w-1/4 px-4 mb-4">

<section class="py-24">
  <div class="container px-4 mx-auto">
    <div class="max-w-2xl mx-auto">
      <h2 class="mb-6 text-3xl font-bold font-heading text-blue-800">When I was a developer, I often had a hundred questions when</h2>
      <p class="mb-6 text-lg text-gray-500">These types of questions led me to miss numerous deadlines, and I wasted time and energy in back-and-forth communication. Sadly, this situation could have been avoided if the wireframes had provided enough detail.</p>
      <div class="relative h-112 mb-10 lg:-mx-20 xl:-mx-40">
        <img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1458080767772-b1011d305557?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1043&amp;q=80" alt="">
        <span class="absolute bottom-0 right-0 pl-10 pr-8 py-3 text-gray-500 bg-blue-50 clip-path-left-small">Tom Harris, CEO &amp; Founder at Wireframes</span>
      </div>
      <p class="mb-6 text-lg text-gray-500">These types of questions led me to miss numerous deadlines, and I wasted time and energy in back-and-forth communication. Sadly, this situation could have been avoided if the wireframes had provided enough detail.</p>
      <p class="text-lg text-gray-500">Now that I am a UX designer, I notice that some designers tend to forget that wireframes are equally creative and technical. We are responsible for designing great ideas, but we are also responsible for creating product specifications. I admit that there can be so many details to remember that it’s easy to lose track. To save time and energy for myself, I gathered all of my years of wireframing knowledge into a single checklist that I refer to throughout the process. And now I am sharing this knowledge with you, so that you can get back to being creative.</p>
    </div>
  </div>
</section>

<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">
      <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="{ 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-200 font-semibold tracking-widest">Lorem ipsum</span>
        <h2 class="mt-3 mb-8 text-4xl font-bold text-white 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-blue-800 bg-white" :class="{ 'font-semibold text-blue-800 bg-white': tab == $refs.tab1.textContent, 'text-base text-white bg-blue-900 hover:bg-blue-700': 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-base text-white bg-blue-900 hover:bg-blue-700" :class="{ 'font-semibold text-blue-800 bg-white': tab == $refs.tab2.textContent, 'text-base text-white bg-blue-900 hover:bg-blue-700': 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-base text-white bg-blue-900 hover:bg-blue-700" :class="{ 'font-semibold text-blue-800 bg-white': tab == $refs.tab3.textContent, 'text-base text-white bg-blue-900 hover:bg-blue-700': 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-base text-white bg-blue-900 hover:bg-blue-700" :class="{ 'font-semibold text-blue-800 bg-white': tab == $refs.tab4.textContent, 'text-base text-white bg-blue-900 hover:bg-blue-700': 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="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.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.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.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.svg" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/3 lg:w-1/6 p-4">

<section class="bg-blue-50 py-24">
  <div class="container mx-auto px-4">
    <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">
        <img class="w-full h-64 lg:h-72 object-cover" src="https://images.unsplash.com/photo-1615866431878-500cc9e74d82?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">Frequent authentication</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">
        <img class="w-full h-64 lg:h-72 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="">
        <div class="py-16 px-10 text-center bg-white">
          <h3 class="mb-4 text-lg text-blue-800 font-bold uppercase font-heading">List of regular users</h3>
          <p class="text-base text-gray-500">Take care to develop resources continually and integrity them with previous projects.</p>
        </div>
      </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">
          <svg 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>
    </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>
          <li class="mb-1"><a class="block pl-16 py-5 font-semibold text-blue-800 hover:bg-blue-50 rounded" href="#">About</a></li>

<section class="relative py-24 bg-blue-50">
  <div class="relative container px-4 mx-auto">
    <div class="max-w-4xl mx-auto mb-14 text-center">
      <span class="text-blue-400 font-semibold uppercase tracking-widest">New feature</span>
      <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 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 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=1036&amp;q=80" alt="">
    </div>
  </div>
</section>