UI Components – Basko Library

<section class="overflow-hidden" style="background: url('basko-assets/images/gradient.png');background-repeat: no-repeat;background-size: 100% 100%;">
  <div class="flex flex-wrap -m-8">
    <div class="w-full md:w-5/12 p-8">
      <div class="relative h-full overflow-hidden">
        <img class="absolute bottom-0 left-0 z-50 w-full" src="basko-assets/images/features/shadow-gradient.png" alt="">
        <img class="w-full h-full object-cover transform hover:scale-105 transition duration-500" src="basko-assets/images/features/media.png" alt="">
      </div>
    </div>
    <div class="w-full md:flex-1 p-8">
      <div class="flex flex-col justify-center pb-16 md:pb-0 h-full">
        <div class="p-4 max-w-xl mx-auto">
          <h3 class="font-heading mb-6 text-6xl text-white tracking-tighter">“We were thrilled with the quality of Basko.”</h3>
          <p class="mb-8 text-xl text-white tracking-tight">Use this table to compare your product competitor and show a customer just how good on-brand home for your product and save.</p>
          <a class="inline-block px-5 py-4 font-semibold tracking-tight bg-gray-50 hover:bg-gray-200 rounded-lg focus:ring-4 focus:ring-indigo-400 transition duration-200" href="#">Try 14 Days Free Trial</a>
        </div>
      </div>
    </div>
  </div>
</section>

<section x-data="{ tab: '' }" x-init="tab = $refs.tab1.textContent" class="py-24 lg:pt-28 lg:pb-36 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="mb-11 max-w-2xl mx-auto text-center">
      <h2 class="font-heading mb-4 text-6xl tracking-tighter">Boost your brand's visibility</h2>
      <p class="text-xl tracking-tight">Use this table to compare your product competitor and show a customer just how good on-brand home.</p>
    </div>
    <ul class="flex flex-wrap items-center justify-center -m-1.5 mb-20">
      <li class="p-1.5"><a x-ref="tab1" x-on:click.prevent="tab = $refs.tab1.textContent" :class="{'bg-black text-white': $refs.tab1.textContent == tab, 'text-gray-500 bg-transparent': $refs.tab1.textContent != tab}" class="inline-block px-6 py-2.5 font-medium text-white hover:text-white focus:text-white bg-black hover:bg-black focus:bg-black rounded-full tracking-tight focus:ring-4 focus:ring-gray-600 transition duration-200" href="#">Revenue</a></li>
      <li class="p-1.5"><a x-ref="tab2" x-on:click.prevent="tab = $refs.tab2.textContent" :class="{'bg-black text-white': $refs.tab2.textContent == tab, 'text-gray-500 bg-transparent': $refs.tab2.textContent != tab}" class="inline-block px-6 py-2.5 font-medium text-gray-500 hover:text-white focus:text-white hover:bg-black focus:bg-black rounded-full tracking-tight focus:ring-4 focus:ring-gray-600 transition duration-200" href="#">Security</a></li>
      <li class="p-1.5"><a x-ref="tab3" x-on:click.prevent="tab = $refs.tab3.textContent" :class="{'bg-black text-white': $refs.tab3.textContent == tab, 'text-gray-500 bg-transparent': $refs.tab3.textContent != tab}" class="inline-block px-6 py-2.5 font-medium text-gray-500 hover:text-white focus:text-white hover:bg-black focus:bg-black rounded-full tracking-tight focus:ring-4 focus:ring-gray-600 transition duration-200" href="#">Branding</a></li>
    </ul>
    <div :class="{'flex': $refs.tab1.textContent == tab, 'hidden': $refs.tab1.textContent != tab}" class="flex flex-wrap items-center -m-8">
      <div class="w-full md:w-1/2 p-8">
        <img class="mx-auto transform hover:-translate-y-2 transition duration-500" src="basko-assets/images/features/revenue.png" alt="">
      </div>
      <div class="w-full md:flex-1 p-8">
        <div class="md:max-w-sm">
          <h3 class="mb-4 text-2xl font-semibold" style="letter-spacing: -0.5px;">Revenue</h3>
          <p class="mb-6 text-gray-600 tracking-tight">Create an on-brand home for your product and sa countless hours on design time. Use this table to compare your product competitor and save.</p>
          <a class="inline-flex items-center px-5 py-4 font-semibold text-white bg-indigo-500 hover:bg-indigo-600 tracking-tight rounded-lg transition duration-300 focus:ring-4 focus:ring-indigo-300" href="#">Try 14 Days Free Trial</a>
        </div>
      </div>
    </div>
    <div :class="{'flex': $refs.tab2.textContent == tab, 'hidden': $refs.tab2.textContent != tab}" class="hidden flex flex-wrap items-center -m-8">

<section class="py-24 lg:pt-28 lg:pb-36 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="mb-20 max-w-2xl mx-auto text-center">
      <span class="inline-block mb-5 px-3 py-1.5 text-sm text-white uppercase tracking-tight font-semibold bg-gray-600 rounded-full" style="background: url('basko-assets/images/gradient.png'); background-repeat: no-repeat; background-size: cover;">Try some freebie</span>
      <h2 class="font-heading text-6xl tracking-tighter">Boost your brand's visibility and reach with Basko</h2>
    </div>
    <div class="max-w-7xl mx-auto">
      <div class="flex flex-wrap -m-4">
        <div class="w-full md:w-1/2 p-4">
          <div class="flex flex-wrap -m-4">
            <div class="w-full p-4">
              <div class="relative p-8 bg-indigo-500 bg-opacity-10 rounded-lg">
                <h3 class="mb-4 text-2xl font-semibold" style="letter-spacing: -0.5px;">Live chat technology</h3>
                <p class="mb-9 md:max-w-sm tracking-tight">Create an on-brand home for your product and create countle hours on design time. Use this table to compare your product.</p>
                <img class="relative -right-4 ml-auto mb-10" src="basko-assets/images/features/email.png" alt="">
                <a class="relative z-10 flex items-center font-semibold hover:text-indigo-500 tracking-tight transition duration-200" href="#">
                  <span class="mr-2.5">Learn more</span>
                  <div class="inline-block">
                    <svg width="23" height="24" viewBox="0 0 23 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M8.95693 7.75693L15.5566 7.75693M15.5566 7.75693L15.5566 14.3566M15.5566 7.75693L7.07132 16.2422" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </div>
                </a>
                <img class="absolute right-0 bottom-5" src="basko-assets/images/features/email-light.png" alt="">

<section class="py-24 lg:pb-36 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="mb-20 max-w-2xl mx-auto text-center">
      <h2 class="font-heading text-6xl tracking-tighter">Engage your target audience and build brand</h2>
    </div>
    <div class="max-w-5xl mx-auto">
      <div class="flex flex-wrap -m-3">
        <div class="w-full md:w-7/12 p-3">
          <div class="group relative p-8 pb-36 h-full overflow-hidden rounded-lg">
            <div class="relative z-10">
              <h3 class="mb-20 text-3xl font-semibold text-white max-w-xs" style="letter-spacing: -0.5px;">Understand real your company growth in time.</h3>
              <img class="relative right-28 ml-auto transform group-hover:scale-110 transition duration-500" src="basko-assets/images/features/card2.png" alt="">
            </div>
            <img class="absolute z-20 right-7 bottom-0" src="basko-assets/images/features/paper.png" alt="">
            <img class="absolute top-0 left-0 w-full h-full object-cover" src="basko-assets/images/features/bg.png" alt="">
            <img class="absolute top-0 right-0" src="basko-assets/images/features/shape.svg" alt="">
          </div>
        </div>
        <div class="w-full md:w-5/12 p-3">
          <div class="relative flex flex-col justify-between p-8 pb-0 h-full bg-black overflow-hidden rounded-lg">
            <div class="mb-10 max-w-xs">
              <h3 class="mb-4 text-3xl font-semibold text-white" style="letter-spacing: -0.5px;">Focus on your business growth</h3>
              <p class="text-gray-400 tracking-tight">Create an on-brand home to your and countle hours on design time table compare it.</p>
            </div>

<section class="py-24 lg:pb-28 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="mb-24 max-w-xl">
      <h2 class="font-heading mb-8 text-6xl tracking-tighter">Engage your target audience and build brand</h2>
      <a class="inline-flex items-center px-5 py-4 font-semibold text-white bg-indigo-500 hover:bg-indigo-600 tracking-tight rounded-lg transition duration-300 focus:ring-4 focus:ring-indigo-300" href="#">Explore Snippets</a>
    </div>
    <div class="flex flex-wrap -m-8">
      <div class="w-full md:w-1/2 lg:w-1/4 p-8">
        <div class="md:max-w-xs">
          <img class="mb-6" src="basko-assets/images/features/work.png" alt="">
          <h3 class="mb-4 text-xl font-semibold tracking-tight">Save works</h3>
          <p class="tracking-tight">We consider all the drivers change gives you blocks up components for it on time.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 p-8">
        <div class="md:max-w-xs">
          <img class="mb-6" src="basko-assets/images/features/message.png" alt="">
          <h3 class="mb-4 text-xl font-semibold tracking-tight">Communicate faster</h3>
          <p class="tracking-tight">We consider all the drivers change gives you blocks up components for it on time.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 p-8">
        <div class="md:max-w-xs">
          <img class="mb-6" src="basko-assets/images/features/voice.png" alt="">

<section class="py-24 lg:pb-28 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="mb-14 max-w-xl">
      <h2 class="font-heading text-6xl tracking-tighter">Feature Snapshot</h2>
    </div>
    <div class="flex flex-wrap -m-8">
      <div class="w-full md:w-1/2 lg:w-1/3 p-8">
        <div class="md:max-w-sm">
          <div class="flex flex-wrap -m-1.5">
            <div class="w-auto p-1.5">
              <svg width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M14.5 28.5C22.232 28.5 28.5 22.232 28.5 14.5C28.5 6.76801 22.232 0.5 14.5 0.5C6.76801 0.5 0.5 6.76801 0.5 14.5C0.5 22.232 6.76801 28.5 14.5 28.5ZM20.9874 12.2374C21.6709 11.554 21.6709 10.446 20.9874 9.76256C20.304 9.07915 19.196 9.07915 18.5126 9.76256L12.75 15.5251L10.4874 13.2626C9.80402 12.5791 8.69598 12.5791 8.01256 13.2626C7.32915 13.946 7.32915 15.054 8.01256 15.7374L11.5126 19.2374C12.196 19.9209 13.304 19.9209 13.9874 19.2374L20.9874 12.2374Z" fill="#5E27FF"></path>
              </svg>
            </div>
            <div class="flex-1 p-1.5">
              <h3 class="mb-2 text-xl font-semibold tracking-tight">Style Guide</h3>
              <p class="tracking-tight">We consider all the drivers change gives you blocks up components for it on change for it on time.</p>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 p-8">
        <div class="md:max-w-sm">
          <div class="flex flex-wrap -m-1.5">

<section class="pb-12 pb-lg-24 bg-dark">
  <nav class="navbar mb-12 mb-lg-16 navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
      <a class="navbar-brand" href="#">
        <img class="img-fluid" src="basko-assets/logos/basko-logo-light.png" alt="">
      </a>
      <button class="d-lg-none navbar-burger btn px-0 rounded-pill" style="border: none;" type="button">
        <svg class="text-primary" width="51" height="51" viewbox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect width="56" height="56" rx="28" fill="currentColor"></rect>
          <path d="M37 32H19M37 24H19" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </button>
      <div class="collapse navbar-collapse">
        <ul class="navbar-nav ms-lg-auto me-4">
          <li class="nav-item me-4"><a class="nav-link py-0" href="#">Features</a></li>
          <li class="nav-item me-4"><a class="nav-link py-0" href="#">Pricing</a></li>
          <li class="nav-item me-4"><a class="nav-link py-0" href="#">Automation</a></li>
          <li class="nav-item"><a class="nav-link py-0 border-start border-secondary-dark" href="#">Customer Login</a></li>
        </ul>
        <div><a class="btn btn-primary py-3" href="#">Try 14 Days Free Trial</a></div>
      </div>
    </div>
  </nav>
  <div class="container">

<section class="pb-12 pb-lg-24 bg-white">
  <nav class="navbar mb-12 mb-lg-24 navbar-expand-lg navbar-light">
    <div class="container">
      <a class="navbar-brand" href="#">
        <img class="img-fluid" src="basko-assets/logos/basko-logo-dark.png" alt="">
      </a>
      <button class="d-lg-none navbar-burger btn px-0 rounded-pill" style="border: none;" type="button">
        <svg class="text-primary" width="51" height="51" viewbox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect width="56" height="56" rx="28" fill="currentColor"></rect>
          <path d="M37 32H19M37 24H19" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </button>
      <div class="collapse navbar-collapse">
        <ul class="navbar-nav ms-lg-auto me-4">
          <li class="nav-item me-4"><a class="nav-link py-0" href="#">Features</a></li>
          <li class="nav-item me-4"><a class="nav-link py-0" href="#">Pricing</a></li>
          <li class="nav-item me-4"><a class="nav-link py-0" href="#">Automation</a></li>
          <li class="nav-item"><a class="nav-link py-0 border-start" href="#">Customer Login</a></li>
        </ul>
        <div><a class="btn btn-primary py-3" href="#">Try 14 Days Free Trial</a></div>
      </div>
    </div>
  </nav>
  <div class="container">

<section class="position-relative pb-12 pb-lg-16 bg-dark overflow-hidden">
  <img class="position-absolute top-0 start-0 w-100 h-100" src="basko-assets/images/headers/dots.png" alt="">
  <nav class="navbar mb-12 mb-lg-24 navbar-expand-lg navbar-dark border-bottom border-secondary-dark">
    <div class="container">
      <a class="navbar-brand" href="#">
        <img class="img-fluid" src="basko-assets/logos/basko-logo-light.png" alt="">
      </a>
      <button class="d-lg-none navbar-burger btn px-0 rounded-pill" style="border: none;" type="button">
        <svg class="text-primary" width="51" height="51" viewbox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect width="56" height="56" rx="28" fill="currentColor"></rect>
          <path d="M37 32H19M37 24H19" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </button>
      <div class="collapse navbar-collapse">
        <ul class="navbar-nav ms-lg-auto me-4">
          <li class="nav-item me-4"><a class="nav-link py-0" href="#">Features</a></li>
          <li class="nav-item me-4"><a class="nav-link py-0" href="#">Pricing</a></li>
          <li class="nav-item me-4"><a class="nav-link py-0" href="#">Automation</a></li>
          <li class="nav-item"><a class="nav-link py-0 border-start" href="#">Customer Login</a></li>
        </ul>
        <div><a class="btn btn-primary py-3" href="#">Try 14 Days Free Trial</a></div>
      </div>
    </div>
  </nav>

<section class="position-relative pb-24 bg-primary">
  <nav class="navbar mb-12 mb-lg-24 navbar-expand-lg navbar-dark">
    <div class="container">
      <a class="navbar-brand" href="#">
        <img class="img-fluid" src="basko-assets/logos/basko-logo-light.png" alt="">
      </a>
      <button class="d-lg-none navbar-burger btn px-0 rounded-pill" style="border: none;" type="button">
        <svg class="text-primary" width="51" height="51" viewbox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect width="56" height="56" rx="28" fill="currentColor"></rect>
          <path d="M37 32H19M37 24H19" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </button>
      <div class="collapse navbar-collapse">
        <ul class="navbar-nav ms-lg-auto me-4">
          <li class="nav-item me-4"><a class="nav-link py-0" href="#">Features</a></li>
          <li class="nav-item me-4"><a class="nav-link py-0" href="#">Pricing</a></li>
          <li class="nav-item me-4"><a class="nav-link py-0" href="#">Automation</a></li>
          <li class="nav-item"><a class="nav-link py-0 border-start" href="#">Customer Login</a></li>
        </ul>
        <div><a class="btn btn-outline-light py-3" href="#">Try 14 Days Free Trial</a></div>
      </div>
    </div>
  </nav>
  <div class="container position-relative" style="z-index: 10;">

<section class="py-12 py-lg-24 bg-light overflow-hidden">
  <div class="container">
    <div class="mw-lg mw-lg-xl mx-auto mb-16 text-center">
      <span class="position-relative overflow-hidden badge py-2 mb-5 bg-dark text-white rounded-pill">
        <img class="position-absolute top-0 start-0 w-100 h-100" src="basko-assets/images/features/bg.png" alt="">
        <span class="position-relative">TRY SOME FREEBIE</span>
      </span>
      <h2 class="mb-4">Integrate it with your favourite tools</h2>
      <p class="lead mb-0">Use and reuse tons of responsive sections to create the perfect layout. Sections are ready.</p>
    </div>
    <div class="position-relative mw-4xl mx-auto overflow-hidden">
      <div class="position-absolute top-0 end-0 w-50 h-100" style="z-index: 10; background: linear-gradient(270deg, #F3F7FA 10.94%, rgba(243, 247, 250, 0.00) 100%);"></div>
      <div class="position-absolute top-0 start-0 w-50 h-100" style="z-index: 10; background: linear-gradient(90deg, #F3F7FA 10.94%, rgba(243, 247, 250, 0.00) 100%);"></div>
      <div class="d-flex mb-3 align-items-center justify-content-center">
        <div class="d-inline-flex align-items-center justify-content-center mx-1 px-4 py-2 border border-secondary bg-white rounded-pill">
          <svg width="22" height="22" viewbox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
            <g clip-path="url(#clip0_4279_1253)">
              <path d="M10.9995 0.439941C5.16725 0.439941 0.439453 5.16774 0.439453 10.9999C0.439453 16.8321 5.16725 21.5599 10.9995 21.5599C16.8317 21.5599 21.5595 16.8321 21.5595 10.9999C21.5595 5.16774 16.8317 0.439941 10.9995 0.439941ZM13.5009 7.73734H11.9136C11.7255 7.73734 11.5165 7.98484 11.5165 8.31374V9.45994H13.502L13.2017 11.0945H11.5165V16.0016H9.64315V11.0945H7.94365V9.45994H9.64315V8.49854C9.64315 7.11914 10.6002 5.99824 11.9136 5.99824H13.5009V7.73734Z" fill="#2977EE"></path>
            </g>
          </svg>
          <span class="ms-1 fw-bold">Facebook</span>
        </div>
        <div class="d-inline-flex align-items-center justify-content-center mx-1 px-4 py-2 border border-secondary bg-white rounded-pill">
          <svg width="14" height="14" viewbox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">

<section class="py-12 py-lg-24 bg-light overflow-hidden">
  <div class="container">
    <div class="mw-xl mx-auto mb-16 text-center">
      <h2 class="mb-4">What our clients say</h2>
      <p class="lead mb-0">Use and reuse tons of responsive sections to create the perfect layout. Sections are ready.</p>
    </div>
  </div>
  <div class="position-relative">
    <div class="d-none d-sm-block position-absolute top-0 end-0 w-25 h-100" style="z-index: 10; background: linear-gradient(270deg, #F3F7FA 10.94%, rgba(243, 247, 250, 0.00) 100%);"></div>
    <div class="d-none d-sm-block position-absolute top-0 start-0 w-25 h-100" style="z-index: 10; background: linear-gradient(90deg, #F3F7FA 10.94%, rgba(243, 247, 250, 0.00) 100%);"></div>
    <div class="d-flex mb-6 justify-content-center">
      <div class="flex-shrink-0 position-relative w-100 mw-sm mx-3 p-6 bg-white">
        <span class="position-absolute top-0 end-0 m-6">
          <svg width="24" height="20" viewbox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <g clip-path="url(#clip0_4578_1545)">
              <path d="M20.9465 5.42638C20.9603 5.62475 20.9603 5.82313 20.9603 6.02338C20.9603 12.123 16.3168 19.1578 7.82588 19.1578V19.154C5.31752 19.1576 2.86113 18.4393 0.75 17.0846C1.11475 17.1285 1.48125 17.1504 1.84875 17.1513C3.92771 17.1529 5.94685 16.4556 7.58175 15.1714C6.61849 15.1532 5.68501 14.8344 4.9118 14.2597C4.13859 13.6849 3.56431 12.8829 3.26925 11.9658C3.96085 12.0991 4.67382 12.0719 5.35325 11.8863C3.19975 11.4511 1.65037 9.55901 1.65037 7.36151V7.30301C2.29236 7.66058 3.01085 7.85872 3.74538 7.88076C1.71713 6.52513 1.09188 3.82675 2.31663 1.717C3.47554 3.14312 4.92149 4.3095 6.56056 5.14038C8.19963 5.97125 9.99516 6.44804 11.8305 6.53975C11.6475 5.75205 11.6745 4.93011 11.9089 4.15613C12.1432 3.38215 12.5767 2.68327 13.1659 2.12937C15.0251 0.381619 17.9493 0.471244 19.697 2.3295C20.7308 2.1254 21.7221 1.74642 22.6284 1.20887C22.2838 2.2777 21.5626 3.18496 20.5991 3.76187C21.5142 3.65406 22.4078 3.40911 23.25 3.03525C22.6305 3.963 21.8505 4.77265 20.9465 5.42638Z" fill="#3EAEFF"></path>
            </g>
          </svg>
        </span>
        <div class="d-flex align-items-center mb-6">
          <img style="width: 55px; height: 55px;" src="basko-assets/images/testimonials/avatar10.png" alt="">
          <div class="ms-3">
            <span class="d-block fw-semibold mb-n2">Luke Mccormick</span>
            <span class="fs-6 text-secondary-dark">@andysm</span>

<section class="py-12 py-lg-24">
  <div class="container">
    <div class="row">
      <div class="col-12 col-lg-4 mb-16 mb-lg-0">
        <div class="mw-md mx-auto mx-lg-0">
          <div class="position-relative d-flex align-items-center justify-content-center rounded-3 overflow-hidden mb-8" style="width: 80px; height: 80px;">
            <img class="position-absolute top-0 start-0 w-100 h-100" src="basko-assets/images/gradient.png" alt="">
            <span class="position-relative">
              <svg width="40" height="40" viewbox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M17.2077 7.19551C17.9184 4.26816 22.0816 4.26816 22.7923 7.19552C23.2514 9.08655 25.4179 9.98396 27.0797 8.97142C29.6522 7.40398 32.596 10.3478 31.0286 12.9203C30.016 14.5821 30.9135 16.7486 32.8045 17.2077C35.7318 17.9184 35.7318 22.0816 32.8045 22.7923C30.9135 23.2514 30.016 25.4179 31.0286 27.0797C32.596 29.6522 29.6522 32.596 27.0797 31.0286C25.4179 30.016 23.2514 30.9135 22.7923 32.8045C22.0816 35.7318 17.9184 35.7318 17.2077 32.8045C16.7486 30.9135 14.5821 30.016 12.9203 31.0286C10.3478 32.596 7.40398 29.6522 8.97142 27.0797C9.98396 25.4179 9.08655 23.2514 7.19552 22.7923C4.26816 22.0816 4.26816 17.9184 7.19551 17.2077C9.08655 16.7486 9.98396 14.5821 8.97142 12.9203C7.40398 10.3478 10.3478 7.40398 12.9203 8.97141C14.5821 9.98396 16.7486 9.08655 17.2077 7.19551Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M25 20C25 22.7614 22.7614 25 20 25C17.2386 25 15 22.7614 15 20C15 17.2386 17.2386 15 20 15C22.7614 15 25 17.2386 25 20Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </span>
          </div>
          <p class="fs-4 fw-semibold mb-6">&ldquo;Basko is a total game-changer! Streamlined workflow &amp; productivity. Highly recommend!&rdquo;</p>
          <div>
            <span class="d-block fw-semibold">Annabelle Porter</span>
            <span class="d-block text-secondary-dark">Co-Founder, Marin-Jones Inc.</span>
          </div>
        </div>
      </div>
      <div class="col-12 col-lg-8">
        <div class="mw-md mw-lg-lg mx-auto me-lg-0">
          <form action="">

<section class="py-12 py-lg-24">
  <div class="container">
    <div class="mw-lg mx-auto mw-lg-none">
      <div class="row mx-0">
        <div class="col-12 col-lg-6 px-0" style="min-height: 380px;">
          <div class="position-relative h-100">
            <img class="position-absolute top-0 start-0 w-100 h-100" src="basko-assets/images/cta/bg.jpg" alt="">
            <div class="position-absolute bottom-0 start-0 mb-10 mx-4 mx-lg-10 d-flex align-items-center">
              <button class="btn border-0 p-0">
                <svg width="99" height="99" viewbox="0 0 99 99" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <circle cx="49.0879" cy="49.0874" r="30.9375" fill="white"></circle>
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M49.5004 89.0999C71.3709 89.0999 89.1004 71.3704 89.1004 49.4999C89.1004 27.6294 71.3709 9.8999 49.5004 9.8999C27.6299 9.8999 9.90039 27.6294 9.90039 49.4999C9.90039 71.3704 27.6299 89.0999 49.5004 89.0999ZM47.2962 35.4813C45.7772 34.4686 43.8242 34.3742 42.2147 35.2356C40.6052 36.097 39.6004 37.7744 39.6004 39.5999V59.3999C39.6004 61.2254 40.6052 62.9028 42.2147 63.7642C43.8242 64.6256 45.7772 64.5312 47.2962 63.5186L62.1462 53.6186C63.5232 52.7005 64.3504 51.155 64.3504 49.4999C64.3504 47.8449 63.5232 46.2993 62.1462 45.3813L47.2962 35.4813Z" fill="#171A1F"></path>
                </svg>
              </button>
              <div>
                <span class="d-block fs-4 fw-semibold">Watch this</span>
                <span class="d-block fs-4 fw-semibold">How to video</span>
              </div>
            </div>
          </div>
        </div>
        <div class="col-12 col-lg-6 px-0">
          <div class="py-10 px-6 px-sm-10 bg-black">
            <h2 class="text-white mb-8">Get more traffic with customized marketing strategies.</h2>

<section class="py-12 py-lg-24">
  <div class="container">
    <div class="row">
      <div class="col-12 col-lg-5 col-xl-6 mb-10">
        <div class="mw-lg mx-auto mx-lg-0">
          <span class="position-relative overflow-hidden badge py-2 mb-8 bg-dark text-white rounded-pill">
            <img class="position-absolute top-0 start-0 w-100 h-100" src="basko-assets/images/features/bg.png" alt="">
            <span class="position-relative">TRY SOME FREEBIE</span>
          </span>
          <h2 class="mb-0">Provide some additional information with this FAQ Accordion.</h2>
        </div>
      </div>
      <div class="col-12 col-lg-7 col-xl-6">
        <div class="mw-lg mw-lg-xl mx-auto me-lg-0">
          <button class="btn mb-2 py-5 text-start btn-outline-secondary text-black d-flex w-100 justify-content-between align-items-center">
            <span class="me-4">How many items are there in this list?</span>
            <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M7.5 4.16683L13.3333 10.0002L7.5 15.8335" stroke="#171A1F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </button>
          <button class="btn mb-2 py-5 text-start btn-outline-secondary text-black d-flex w-100 justify-content-between align-items-center">
            <span class="me-4">Can you describe Newleaf in just one sentence?</span>
            <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M7.5 4.16683L13.3333 10.0002L7.5 15.8335" stroke="#171A1F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>

<div>
  <nav class="navbar navbar-expand-lg navbar-light">
    <div class="container">
      <a class="navbar-brand" href="#">
        <img class="img-fluid" src="basko-assets/logos/basko-logo-dark.png" alt="">
      </a>
      <button class="d-lg-none navbar-burger btn px-0 rounded-pill" style="border: none;" type="button">
        <svg class="text-primary" width="51" height="51" viewbox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect width="56" height="56" rx="28" fill="currentColor"></rect>
          <path d="M37 32H19M37 24H19" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </button>
      <div class="collapse navbar-collapse">
        <ul class="navbar-nav ms-lg-auto me-4">
          <li class="nav-item me-4"><a class="nav-link py-0" href="#">Features</a></li>
          <li class="nav-item me-4"><a class="nav-link py-0" href="#">Pricing</a></li>
          <li class="nav-item me-4"><a class="nav-link py-0" href="#">Automation</a></li>
          <li class="nav-item"><a class="nav-link py-0 border-start" href="#">Customer Login</a></li>
        </ul>
        <div><a class="btn btn-primary py-3" href="#">Try 14 Days Free Trial</a></div>
      </div>
    </div>
  </nav>
  <div class="d-none navbar-menu position-fixed top-0 start-0 bottom-0 w-75 mw-xs" style="z-index: 9999;">

<section class="py-12 py-lg-24">
  <div class="container">
    <div class="row mb-8 align-items-center">
      <div class="col-12 col-lg-6 mb-8 mb-lg-0">
        <p class="fs-4 fw-semibold mb-0">Save 10% when you choose Annual Billing:</p>
      </div>
      <div class="col-12 col-lg-6 text-end">
        <div class="d-inline-flex p-2 border border-light-dark rounded-pill">
          <button class="btn btn-primary btn-sm fw-medium rounded-pill">Annual</button>
          <button class="btn btn-sm border-0 fw-medium btn-ghost rounded-pill">Monthly</button>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-12 col-md-6 pe-xl-8 mb-16 mb-md-0">
        <div class="border rounded-3">
          <div class="p-10 bg-secondary rounded-top">
            <span class="d-block fw-semibold">Basic</span>
            <p class="mb-0">Use and re-use tons of responsive sections to main &amp; create the perfect layout.</p>
          </div>
          <div class="d-flex align-items-center justify-content-between px-10 py-2 bg-secondary-dark rounded-bottom">
            <span class="fs-4 fw-semibold text-white">$49/mo</span>
            <span class="fw-medium text-white">Billed Yearly</span>
          </div>

<section class="py-12 py-lg-24 bg-dark">
  <div class="container">
    <div class="mw-md mw-lg-2xl mx-auto">
      <div class="mw-lg mb-16">
        <h2 class="text-white mb-4">Create a free account</h2>
        <p class="lead text-white mb-0">Use and reuse tons of responsive sections to create the perfect layout. Sections are ready.</p>
      </div>
      <form action="">
        <div class="row">
          <div class="col-12 col-sm-6 mb-7">
            <input class="form-control text-white bg-transparent border-secondary-dark" type="text" placeholder="Full Name">
          </div>
          <div class="col-12 col-sm-6 mb-7">
            <input class="form-control text-white bg-transparent border-secondary-dark" type="email" placeholder="Email Address">
          </div>
          <div class="col-12 col-sm-6 mb-7">
            <input class="form-control text-white bg-transparent border-secondary-dark" type="password" placeholder="Password">
          </div>
          <div class="col-12 col-sm-6 mb-7">
            <input class="form-control text-white bg-transparent border-secondary-dark" type="password" placeholder="Confirm Password">
          </div>
          <div class="col-12 mb-7">
            <div class="form-check">
              <input class="form-check-input" type="checkbox" value="" id="">

<section class="py-12 py-lg-24">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-12 col-md-12 col-lg-4 mb-12 mb-lg-0">
        <div class="mw-xs mx-auto text-center">
          <img class="img-fluid d-block mx-auto mb-8" src="basko-assets/images/features/customize.png" alt="">
          <span class="d-block fw-semibold mb-4">Customize As Needed</span>
          <p class="mb-8">We consider all the drivers of change gives you the blocks &amp; components you need to change to create.</p>
          <a class="btn btn-link fw-semibold" href="#">Start Customizing</a>
        </div>
      </div>
      <div class="col-12 col-md-12 col-lg-4 mb-12 mb-lg-0">
        <div class="mw-xs mx-auto text-center">
          <img class="img-fluid d-block mx-auto mb-8" src="basko-assets/images/features/smart.png" alt="">
          <span class="d-block fw-semibold mb-4">Fits Existing Brand</span>
          <p class="mb-8">We consider all the drivers of change gives you the blocks &amp; components you need to change to create.</p>
          <a class="btn btn-link fw-semibold" href="#">Grow Brand</a>
        </div>
      </div>
      <div class="col-12 col-md-12 col-lg-4">
        <div class="mw-xs mx-auto text-center">
          <img class="img-fluid d-block mx-auto mb-8" src="basko-assets/images/features/customize.png" alt="">
          <span class="d-block fw-semibold mb-4">Multi-layer Design</span>
          <p class="mb-8">We consider all the drivers of change gives you the blocks &amp; components you need to change to create.</p>

<section class="py-12 py-lg-24 bg-dark">
  <div class="container">
    <div class="position-relative px-8 px-md-11 py-10 mb-16 bg-white rounded-4 overflow-hidden">
      <img class="position-absolute top-0 start-0 w-100 h-100" src="basko-assets/images/gradient.png" alt="">
      <div class="position-relative row align-items-center">
        <div class="col-12 col-lg-7 mb-10 mb-lg-0">
          <h2 class="text-white mb-0">Grow your business fast with Basko Productivity Tool.</h2>
        </div>
        <div class="col-12 col-lg-5 text-lg-end"><a class="btn btn-dark" href="#">Try 14 Days Free Trial</a></div>
      </div>
    </div>
    <div class="row mb-n12">
      <div class="col-12 col-sm-6 col-lg-3 mb-12">
        <div>
          <span class="d-block fw-semibold text-white mb-7">Company</span>
          <ul class="list-unstyled mb-0">
            <li class="mb-4"><a class="d-inline-block text-white " href="#">About</a></li>
            <li class="mb-4"><a class="d-inline-block text-white " href="#">Features</a></li>
            <li class="mb-4"><a class="d-inline-block text-white " href="#">Works</a></li>
            <li><a class="d-inline-block text-white " href="#">Career</a></li>
          </ul>
        </div>
      </div>
      <div class="col-12 col-sm-6 col-lg-3 mb-12">