Bulma Components

<section class="section has-background-dark">
  <div class="container">
    <div class="is-flex-desktop is-justify-content-center is-align-items-center">
      <div class="is-flex is-align-items-center">
        <div class="mr-4 is-inline-flex is-justify-content-center is-align-items-center has-text-weight-bold has-background-gradient-primary is-rounded has-text-dark" style="width: 30px; height: 30px;">1</div>
        <span class="has-text-white has-text-weight-bold">Shopping Cart</span>
      </div>
      <span class="is-block my-4-touch mx-8-touch mx-8-tablet mx-16-widescreen">
        <svg width="18" height="14" viewbox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path opacity="0.5" d="M10.6667 1.16669L16.5 7.00002M16.5 7.00002L10.6667 12.8334M16.5 7.00002L1.5 7.00002" stroke="#84878A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </span>
      <div class="is-flex is-align-items-center">
        <div class="has-text-white mr-4 is-inline-flex is-justify-content-center is-align-items-center has-text-weight-bold has-background-grey-dark is-rounded" style="width: 30px; height: 30px;">2</div>
        <span class="has-text-white has-text-weight-bold">Payment &amp; Delivery Options</span>
      </div>
      <span class="is-block my-4-touch mx-8-touch mx-8-tablet mx-16-widescreen">
        <svg width="18" height="14" viewbox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path opacity="0.5" d="M10.6667 1.16669L16.5 7.00002M16.5 7.00002L10.6667 12.8334M16.5 7.00002L1.5 7.00002" stroke="#84878A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </span>
      <div class="is-flex is-align-items-center">
        <div class="has-text-white mr-4 is-inline-flex is-justify-content-center is-align-items-center has-text-weight-bold has-background-grey-dark is-rounded" style="width: 30px; height: 30px;">3</div>
        <span class="has-text-white has-text-weight-bold">Order Received</span>

<section class="section has-background-dark">
  <div class="container">
    <h1 class="title is-size-2 has-text-white mb-16 has-text-centered">Shop by category</h1>
    <div class="mb-20 mx-n3 is-flex">
      <div class="px-3 is-flex-grow-1">
        <a class="is-block has-text-centered" href="#">
          <img class="mb-5 is-block image is-fullwidth" src="vendia-assets/images/category/category-item1.png" alt="" style="height: 160px; object-fit: cover;">
          <h6 class="has-text-white has-text-weight-bold">Trendy Fashion</h6>
        </a>
      </div>
      <div class="px-3 is-flex-grow-1">
        <a class="is-block has-text-centered" href="#">
          <img class="mb-5 is-block image is-fullwidth" src="vendia-assets/images/category/category-item5.png" alt="" style="height: 160px; object-fit: cover;">
          <h6 class="has-text-white has-text-weight-bold">Winter Collection</h6>
        </a>
      </div>
      <div class="px-3 is-block-tablet is-hidden-mobile is-flex-grow-1">
        <a class="is-block has-text-centered" href="#">
          <img class="mb-5 is-block image is-fullwidth" src="vendia-assets/images/category/category-item2.png" alt="" style="height: 160px; object-fit: cover;">
          <h6 class="has-text-white has-text-weight-bold">Beauty</h6>
        </a>
      </div>
      <div class="px-3 is-block-widescreen is-hidden-mobile is-flex-grow-1">
        <a class="is-block has-text-centered" href="#">

<section class="section has-background-dark">
  <div class="container">
    <div class="pb-20 columns is-multiline">
      <div class="column is-12-tablet is-6-widescreen mb-8 mb-0-widescreen">
        <div class="has-mw-md">
          <a class="mb-20 is-inline-block" href="#">
            <img class="image is-fullwidth" src="vendia-assets/logos/vendia.svg" alt="" style="height: 30px;">
          </a>
          <p class="has-text-grey-lighter is-size-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum aliquet accumsan porta lectus ridiculus in mattis.</p>
        </div>
      </div>
      <div class="column is-4-tablet is-2-widescreen">
        <div>
          <h6 class="is-inline-block has-text-primary-gradient mb-6">Company</h6>
          <ul class="mb-0">
            <li class="mb-4"><a class="has-text-white is-inline-block has-text-weight-medium" href="#">About</a></li>
            <li class="mb-4"><a class="has-text-white is-inline-block has-text-weight-medium" href="#">Support</a></li>
            <li class="mb-4"><a class="has-text-white is-inline-block has-text-weight-medium" href="#">Products</a></li>
            <li><a class="has-text-white is-inline-block has-text-weight-medium" href="#">Career</a></li>
          </ul>
        </div>
      </div>
      <div class="column is-4-tablet is-2-widescreen">
        <div>

<section class="section has-background-dark">
  <div class="container">
    <div class="has-mw-md mx-auto has-mw-none-widescreen">
      <div class="columns is-multiline">
        <div class="column is-12-tablet is-6-widescreen mb-10 mb-0-widescreen">
          <div class="has-mw-md mx-auto mx-0-desktop">
            <h4 class="title is-size-4 has-text-white mb-3">Customer Reviews</h4>
            <div class="mb-8 is-flex">
              <div class="is-flex is-align-items-center">
                <svg width="116" height="23" viewbox="0 0 116 23" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10.2387 4.44347C10.5774 3.40101 12.0522 3.40101 12.3909 4.44347L13.6012 8.16814C13.7526 8.63434 14.1871 8.94998 14.6773 8.94998H18.5936C19.6897 8.94998 20.1455 10.3526 19.2587 10.9969L16.0903 13.2989C15.6937 13.587 15.5278 14.0977 15.6793 14.5639L16.8895 18.2886C17.2282 19.331 16.0351 20.1979 15.1483 19.5536L11.9799 17.2517C11.5833 16.9635 11.0463 16.9635 10.6497 17.2517L7.48135 19.5536C6.59458 20.1979 5.40143 19.331 5.74015 18.2886L6.95037 14.5639C7.10185 14.0977 6.9359 13.587 6.53933 13.2989L3.37093 10.9969C2.48416 10.3526 2.9399 8.94998 4.03601 8.94998H7.95236C8.44256 8.94998 8.877 8.63434 9.02848 8.16814L10.2387 4.44347Z" fill="#EDFF7C"></path>
                  <path d="M33.5795 4.44347C33.9182 3.40101 35.393 3.40101 35.7318 4.44347L36.942 8.16814C37.0935 8.63434 37.5279 8.94998 38.0181 8.94998H41.9344C43.0306 8.94998 43.4863 10.3526 42.5995 10.9969L39.4311 13.2989C39.0346 13.587 38.8686 14.0977 39.0201 14.5639L40.2303 18.2886C40.569 19.331 39.3759 20.1979 38.4891 19.5536L35.3207 17.2517C34.9241 16.9635 34.3871 16.9635 33.9906 17.2517L30.8222 19.5536C29.9354 20.1979 28.7423 19.331 29.081 18.2886L30.2912 14.5639C30.4427 14.0977 30.2767 13.587 29.8801 13.2989L26.7118 10.9969C25.825 10.3526 26.2807 8.94998 27.3768 8.94998H31.2932C31.7834 8.94998 32.2178 8.63434 32.3693 8.16814L33.5795 4.44347Z" fill="#EDFF7C"></path>
                  <path d="M56.9213 4.44347C57.26 3.40101 58.7348 3.40101 59.0736 4.44347L60.2838 8.16814C60.4353 8.63434 60.8697 8.94998 61.3599 8.94998H65.2762C66.3724 8.94998 66.8281 10.3526 65.9413 10.9969L62.7729 13.2989C62.3764 13.587 62.2104 14.0977 62.3619 14.5639L63.5721 18.2886C63.9108 19.331 62.7177 20.1979 61.8309 19.5536L58.6625 17.2517C58.2659 16.9635 57.7289 16.9635 57.3324 17.2517L54.164 19.5536C53.2772 20.1979 52.084 19.331 52.4228 18.2886L53.633 14.5639C53.7845 14.0977 53.6185 13.587 53.2219 13.2989L50.0536 10.9969C49.1668 10.3526 49.6225 8.94998 50.7186 8.94998H54.635C55.1252 8.94998 55.5596 8.63434 55.7111 8.16814L56.9213 4.44347Z" fill="#EDFF7C"></path>
                  <path d="M80.2631 4.44347C80.6018 3.40101 82.0766 3.40101 82.4154 4.44347L83.6256 8.16814C83.7771 8.63434 84.2115 8.94998 84.7017 8.94998H88.618C89.7142 8.94998 90.1699 10.3526 89.2831 10.9969L86.1147 13.2989C85.7182 13.587 85.5522 14.0977 85.7037 14.5639L86.9139 18.2886C87.2526 19.331 86.0595 20.1979 85.1727 19.5536L82.0043 17.2517C81.6077 16.9635 81.0707 16.9635 80.6742 17.2517L77.5058 19.5536C76.619 20.1979 75.4258 19.331 75.7646 18.2886L76.9748 14.5639C77.1263 14.0977 76.9603 13.587 76.5637 13.2989L73.3953 10.9969C72.5086 10.3526 72.9643 8.94998 74.0604 8.94998H77.9768C78.467 8.94998 78.9014 8.63434 79.0529 8.16814L80.2631 4.44347Z" fill="#EDFF7C"></path>
                  <path d="M103.605 4.44347C103.944 3.40101 105.418 3.40101 105.757 4.44347L106.967 8.16814C107.119 8.63434 107.553 8.94998 108.043 8.94998H111.96C113.056 8.94998 113.512 10.3526 112.625 10.9969L109.457 13.2989C109.06 13.587 108.894 14.0977 109.045 14.5639L110.256 18.2886C110.594 19.331 109.401 20.1979 108.515 19.5536L105.346 17.2517C104.95 16.9635 104.413 16.9635 104.016 17.2517L100.848 19.5536C99.9608 20.1979 98.7676 19.331 99.1064 18.2886L100.317 14.5639C100.468 14.0977 100.302 13.587 99.9055 13.2989L96.7371 10.9969C95.8504 10.3526 96.3061 8.94998 97.4022 8.94998H101.319C101.809 8.94998 102.243 8.63434 102.395 8.16814L103.605 4.44347Z" fill="#EDFF7C"></path>
                </svg>
              </div>
              <span class="is-size-7 has-text-white ml-2 pt-1">Based on 1624 reviews</span>
            </div>
            <div class="mb-12">
              <div class="mb-4 columns is-mobile is-vcentered">
                <div class="column is-1">
                  <div class="is-flex is-align-items-center">
                    <span class="is-size-7 has-text-white mr-2 has-text-weight-bold">5</span>

<section class="section has-background-dark" x-data="{ nav: '' }" x-init="nav = $refs.nav1.textContent">
  <div class="container">
    <div class="mb-12 columns is-multiline is-align-items-end">
      <div class="column is-12-tablet is-6-desktop mb-6 mb-0-desktop">
        <h1 class="title is-size-4 has-text-white">Featured Collections</h1>
        <p class="subtitle">Most Selling and Trending Products in our shop</p>
      </div>
      <div class="column is-12-tablet is-6-desktop">
        <div class="-mb-2 is-flex-desktop is-justify-content-flex-end">
            <a x-ref="nav1" x-on:click.prevent="nav = $refs.nav1.textContent" class="mb-2 mr-8 is-inline-block has-text-weight-medium" :class="{ 'has-text-white': nav == $refs.nav1.textContent, 'has-text-grey-lighter': nav != $refs.nav1.textContent }" href="#">All</a>
            <a x-ref="nav2" x-on:click.prevent="nav = $refs.nav2.textContent" class="mb-2 mr-8 is-inline-block has-text-weight-medium" :class="{ 'has-text-white': nav == $refs.nav2.textContent, 'has-text-grey-lighter': nav != $refs.nav2.textContent }" href="#">Sofa</a>
            <a x-ref="nav3" x-on:click.prevent="nav = $refs.nav3.textContent" class="mb-2 mr-8 is-inline-block has-text-weight-medium" :class="{ 'has-text-white': nav == $refs.nav3.textContent, 'has-text-grey-lighter': nav != $refs.nav3.textContent }" href="#">Table</a>
            <a x-ref="nav4" x-on:click.prevent="nav = $refs.nav4.textContent" class="mb-2 mr-8 is-inline-block has-text-weight-medium" :class="{ 'has-text-white': nav == $refs.nav4.textContent, 'has-text-grey-lighter': nav != $refs.nav4.textContent }" href="#">Chair</a>
            <a x-ref="nav5" x-on:click.prevent="nav = $refs.nav5.textContent" class="mb-2 mr-8 is-inline-block has-text-weight-medium" :class="{ 'has-text-white': nav == $refs.nav5.textContent, 'has-text-grey-lighter': nav != $refs.nav5.textContent }" href="#">Tool</a>
            <a x-ref="nav6" x-on:click.prevent="nav = $refs.nav6.textContent" class="mb-2 is-inline-block has-text-weight-medium" :class="{ 'has-text-white': nav == $refs.nav6.textContent, 'has-text-grey-lighter': nav != $refs.nav6.textContent }" href="#">Strong Comforter</a>
        </div>
      </div>
    </div>
    <div class="-mb-8 columns is-multiline">
      <div class="column mb-8 is-hidden" :class="{ 'is-block': $refs.nav1.textContent == nav || $refs.nav2.textContent == nav }">
        <div class="is-block has-mw-sm mx-auto is-relative">
          <a class="is-absolute is-inline-block is-top-0 is-right-0 m-3" href="#" style="z-index: 1;">
            <svg width="26" height="26" viewbox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M13 9.25V13M13 13V16.75M13 13H16.75M13 13H9.25M24.25 13C24.25 19.2132 19.2132 24.25 13 24.25C6.7868 24.25 1.75 19.2132 1.75 13C1.75 6.7868 6.7868 1.75 13 1.75C19.2132 1.75 24.25 6.7868 24.25 13Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>

<section class="section has-background-dark" x-data="{ active: 1 }">
  <div class="container">
    <div class="columns is-multiline">
      <div class="column is-4-desktop">
        <div class="has-mw-xs px-12 pt-9 pb-40 has-background-dark">
          <button class="button is-dark p-0 has-text-grey-lighter mb-20 is-inline-flex is-align-items-center">
            <svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M1.5 10.5L10.5 1.5M1.5 1.5L10.5 10.5" stroke="#84878A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
            <span class="ml-2">Close Filter</span>
          </button>
          <div class="mb-10 pb-10" style="border-bottom: 1px solid rgba(33, 33, 36, 1);">
            <h6 class="has-text-weight-bold has-text-white mb-5">Price</h6>
            <input type="range" style="width: 100%;">
            <div class="is-flex is-justify-content-space-between is-align-items-center">
              <span class="has-text-weight-medium">$0</span>
              <span class="has-text-weight-medium">$200</span>
            </div>
          </div>
          <div class="mb-10 pb-10" style="border-bottom: 1px solid rgba(33, 33, 36, 1);">
            <h6 class="has-text-weight-bold has-text-white mb-8">Category</h6>
            <ul class="mb-0">
              <li class="mb-4"><a class="has-text-grey-lighter is-inline-block has-text-weight-medium" href="#">New Releases</a></li>
              <li class="mb-4"><a class="has-text-primary is-inline-block has-text-weight-medium" href="#">Pet Toys</a></li>

<section class="section has-background-dark">
  <div class="container">
    <div class="columns is-multiline">
      <div class="column is-12-tablet is-4-desktop mb-6-touch">
        <div class="has-mw-sm mx-auto has-text-centered">
          <svg width="44" height="44" viewbox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M1.91635 0.666865L2.87468 0.666748H2.87487L3.50362 0.666763L3.54926 0.666764C4.24841 0.666763 4.84252 0.666763 5.33385 0.704383C5.85144 0.744014 6.34733 0.830216 6.83124 1.05137C7.57272 1.39026 8.20108 1.93525 8.6414 2.62136C8.92876 3.06913 9.08422 3.54786 9.19663 4.05464C9.30334 4.53567 9.38734 5.12375 9.48619 5.8158L9.4862 5.81591L9.48621 5.81597L9.49267 5.86116L10.6673 14.0834H18.2656L20.72 6.72031L20.7831 6.53032L20.7831 6.5303C21.1125 5.53845 21.3811 4.72989 21.9019 4.1071C22.3583 3.56131 22.9444 3.13883 23.6066 2.87842C24.3621 2.58127 25.2141 2.58221 26.2592 2.58336L26.4594 2.58351L34.8735 2.58344L35.0737 2.58329C36.1189 2.58212 36.9709 2.58117 37.7264 2.87832C38.3885 3.13873 38.9747 3.56121 39.4311 4.10701C39.952 4.72981 40.2205 5.5384 40.5499 6.53027L40.6131 6.72026L42.3968 12.0715L42.4261 12.1594L42.4262 12.1596C42.7547 13.145 42.9587 13.7569 43.076 14.3914C43.1799 14.9541 43.2314 15.5253 43.2298 16.0975C43.228 16.7428 43.1367 17.3813 42.9898 18.4096L42.9766 18.5015L42.2723 23.4321L42.2655 23.4796C42.1321 24.4135 42.022 25.1839 41.8832 25.8095C41.7387 26.461 41.5452 27.0464 41.199 27.5858C40.6551 28.4333 39.8788 29.1066 38.9629 29.5252C38.38 29.7916 37.7731 29.9004 37.1077 29.9513C36.4687 30.0002 35.6904 30.0002 34.7469 30.0002H34.6991H17.0505H17.0028H17.0027H17.0027C16.0593 30.0002 15.281 30.0002 14.642 29.9513C13.9766 29.9004 13.3697 29.7916 12.7868 29.5252C11.8708 29.1066 11.0946 28.4333 10.5506 27.5858C10.2045 27.0464 10.0109 26.461 9.86643 25.8095C9.72765 25.1839 9.6176 24.4135 9.4842 23.4796L9.48418 23.4794L9.48417 23.4794L9.47741 23.4321L7.01779 6.21472C6.91072 5.46522 6.83948 4.97256 6.75596 4.59605C6.67583 4.23481 6.60275 4.07344 6.53741 3.97162C6.3561 3.6891 6.09736 3.46469 5.79204 3.32515C5.68201 3.27487 5.51192 3.22534 5.14299 3.19709C4.75845 3.16764 4.26066 3.16678 3.50356 3.16676L2.87499 3.16675H2.87481L1.91666 3.16686C1.2263 3.16695 0.666588 2.60737 0.666504 1.91702C0.66642 1.22666 1.226 0.666949 1.91635 0.666865ZM19.1376 16.5834C19.157 16.5839 19.1764 16.5839 19.1957 16.5834H40.7053C40.6737 16.9358 40.6096 17.3927 40.5017 18.1479L39.7974 23.0785C39.6555 24.0716 39.5582 24.7469 39.4426 25.2681C39.3303 25.774 39.2192 26.0421 39.095 26.2355C38.8101 26.6795 38.4035 27.0321 37.9237 27.2514C37.7147 27.3469 37.4336 27.4191 36.9169 27.4586C36.3846 27.4993 35.7023 27.5002 34.6991 27.5002H17.0505C16.0474 27.5002 15.3651 27.4993 14.8328 27.4586C14.3161 27.4191 14.035 27.3469 13.826 27.2514C13.3462 27.0321 12.9396 26.6795 12.6546 26.2355C12.5305 26.0421 12.4193 25.774 12.3071 25.2681C12.1915 24.7469 12.0942 24.0716 11.9523 23.0785L11.0244 16.5834H19.1376ZM40.423 14.0834H20.9008L23.0917 7.51089C23.5188 6.22949 23.6437 5.92134 23.8197 5.71087C24.0076 5.48613 24.249 5.31218 24.5216 5.20495C24.7769 5.10453 25.1087 5.08352 26.4594 5.08351L34.8735 5.08344C36.2242 5.08343 36.5561 5.10444 36.8114 5.20486C37.084 5.31208 37.3254 5.48604 37.5133 5.71079C37.6894 5.92126 37.8142 6.22941 38.2414 7.51083L40.0251 12.8621C40.2051 13.4022 40.3314 13.7831 40.423 14.0834ZM14.6665 38.3334C14.6665 36.9067 15.8231 35.7501 17.2498 35.7501C18.6766 35.7501 19.8332 36.9067 19.8332 38.3334C19.8332 39.7602 18.6766 40.9167 17.2498 40.9167C15.8231 40.9167 14.6665 39.7602 14.6665 38.3334ZM17.2498 33.2501C14.4424 33.2501 12.1665 35.526 12.1665 38.3334C12.1665 41.1409 14.4424 43.4167 17.2498 43.4167C20.0573 43.4167 22.3332 41.1409 22.3332 38.3334C22.3332 35.526 20.0573 33.2501 17.2498 33.2501ZM33.8332 38.3334C33.8332 36.9067 34.9898 35.7501 36.4165 35.7501C37.8432 35.7501 38.9998 36.9067 38.9998 38.3334C38.9998 39.7602 37.8432 40.9167 36.4165 40.9167C34.9898 40.9167 33.8332 39.7602 33.8332 38.3334ZM36.4165 33.2501C33.6091 33.2501 31.3332 35.526 31.3332 38.3334C31.3332 41.1409 33.6091 43.4167 36.4165 43.4167C39.224 43.4167 41.4998 41.1409 41.4998 38.3334C41.4998 35.526 39.224 33.2501 36.4165 33.2501Z" fill="url(#paint0_linear_3069_83)"></path>
            <defs><lineargradient id="paint0_linear_3069_83" x1="0.666504" y1="0.666748" x2="52.1109" y2="21.9525" gradientunits="userSpaceOnUse"><stop stop-color="#FBFF25"><stop offset="0.21875" stop-color="#E7E542"><stop offset="0.453125" stop-color="#AAEA5E"><stop offset="0.697917" stop-color="#51D9C6"><stop offset="1" stop-color="#4AA8FF"></lineargradient></defs>
          </svg>
          <h4 class="title is-size-4 has-text-white mt-8">Flexible</h4>
          <p class="subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing a elit. Nullam to dictum aliquet accumsan porta lectus ridiculus in these mattisn netus sodale.</p>
        </div>
      </div>
      <div class="column is-12-tablet is-4-desktop mb-6-touch">
        <div class="has-mw-sm mx-auto has-text-centered">
          <svg width="42" height="42" viewbox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M27.5281 6.33325C28.1175 3.06368 30.9775 0.583252 34.4168 0.583252C38.2828 0.583251 41.4168 3.71726 41.4168 7.58325C41.4168 11.4492 38.2828 14.5833 34.4168 14.5833C30.9775 14.5833 28.1175 12.1028 27.5281 8.83325L15.2502 8.83326C12.0885 8.83326 9.46097 11.1198 8.93098 14.1295C12.1522 14.7576 14.5835 17.5949 14.5835 20.9999C14.5835 24.405 12.1522 27.2422 8.93098 27.8703C9.46097 30.88 12.0885 33.1666 15.2502 33.1666L27.5281 33.1666C28.1175 29.897 30.9775 27.4166 34.4168 27.4166C38.2828 27.4166 41.4168 30.5506 41.4168 34.4166C41.4168 38.2826 38.2828 41.4166 34.4168 41.4166C30.9775 41.4166 28.1175 38.9362 27.5281 35.6666L15.2502 35.6666C10.7159 35.6666 6.97203 32.2821 6.40718 27.9015C3.10126 27.3421 0.583497 24.465 0.583496 20.9999C0.583496 17.5348 3.10126 14.6577 6.40718 14.0983C6.97203 9.71777 10.7158 6.33326 15.2502 6.33326L27.5281 6.33325ZM29.9168 34.4146C29.9168 34.4153 29.9168 34.4159 29.9168 34.4166C29.9168 36.9019 31.9315 38.9166 34.4168 38.9166C36.9021 38.9166 38.9168 36.9019 38.9168 34.4166C38.9168 31.9313 36.9021 29.9166 34.4168 29.9166C31.9322 29.9166 29.9179 31.9302 29.9168 34.4146ZM12.0835 20.9999C12.0835 23.4852 10.0688 25.4999 7.5835 25.4999C5.09822 25.4999 3.0835 23.4852 3.0835 20.9999C3.0835 18.5146 5.09821 16.4999 7.5835 16.4999C10.0688 16.4999 12.0835 18.5146 12.0835 20.9999ZM29.9168 7.58325C29.9168 10.0685 31.9315 12.0833 34.4168 12.0833C36.9021 12.0833 38.9168 10.0685 38.9168 7.58325C38.9168 5.09797 36.9021 3.08325 34.4168 3.08325C31.9315 3.08325 29.9168 5.09797 29.9168 7.58325Z" fill="url(#paint0_linear_3069_750)"></path>
            <defs><lineargradient id="paint0_linear_3069_750" x1="0.583496" y1="0.583252" x2="49.8736" y2="21.067" gradientunits="userSpaceOnUse"><stop stop-color="#FBFF25"><stop offset="0.21875" stop-color="#E7E542"><stop offset="0.453125" stop-color="#AAEA5E"><stop offset="0.697917" stop-color="#51D9C6"><stop offset="1" stop-color="#4AA8FF"></lineargradient></defs>
          </svg>
          <h4 class="title is-size-4 has-text-white mt-8">Integrated</h4>
          <p class="subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing a elit. Nullam to dictum aliquet accumsan porta lectus ridiculus in these mattisn netus sodale.</p>
        </div>
      </div>
      <div class="column is-12-tablet is-4-desktop">

<section class="section px-0 has-background-dark" x-data="{ activeSlide: 1, slideCount: 3 }">
  <div class="container px-5 mb-16">
    <div class="columns is-multiline is-align-items-end">
      <div class="column is-6-desktop is-8-widescreen">
        <h1 class="title is-size-2 has-text-white">Latest Collections</h1>
      </div>
      <div class="column is-6-desktop is-4-widescreen">
        <div class="buttons is-right">
          <a x-on:click.prevent="activeSlide = activeSlide > 1 ? activeSlide - 1 : slideCount" class="button is-light has-background-dark is-rounded" href="#" style="border: 1px solid rgba(132, 135, 138, 0.20); width: 84px; height: 37px;">
            <svg width="10" height="9" viewbox="0 0 10 9" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M7.06245 8.2123L1.28774 8.2123M1.28774 8.2123L1.28774 2.4376M1.28774 8.2123L8.71236 0.787683" stroke="#84878A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
          <a x-on:click.prevent="activeSlide = activeSlide < slideCount ? activeSlide + 1 : 1" class="button is-primary is-rounded" href="#" style="width: 84px; height: 37px;">
            <svg width="10" height="9" viewbox="0 0 10 9" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M2.93766 0.787683L8.71236 0.787683M8.71236 0.787683L8.71236 6.56239M8.71236 0.787683L1.28774 8.2123" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
        </div>
      </div>
    </div>
  </div>
  <div class="px-5 has-mw-sm has-mw-none-tablet mx-auto is-clipped">
    <div :style="'transform: translateX(-' + (activeSlide - 1) * 100.5 + '%); transition: transform 0.5s ease-in-out;'">

<section class="section has-background-dark">
  <div class="container">
    <div class="has-mw-md mx-auto has-mw-none-widescreen">
      <div class="columns is-multiline">
        <div class="column is-12-tablet is-6-widescreen mb-10 mb-0-widescreen">
          <div class="has-mw-md mx-auto mx-0-desktop">
            <h4 class="title is-size-4 has-text-white mb-3">Customer Reviews</h4>
            <div class="mb-8 is-flex">
              <div class="is-flex is-align-items-center">
                <svg width="116" height="23" viewbox="0 0 116 23" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10.2387 4.44347C10.5774 3.40101 12.0522 3.40101 12.3909 4.44347L13.6012 8.16814C13.7526 8.63434 14.1871 8.94998 14.6773 8.94998H18.5936C19.6897 8.94998 20.1455 10.3526 19.2587 10.9969L16.0903 13.2989C15.6937 13.587 15.5278 14.0977 15.6793 14.5639L16.8895 18.2886C17.2282 19.331 16.0351 20.1979 15.1483 19.5536L11.9799 17.2517C11.5833 16.9635 11.0463 16.9635 10.6497 17.2517L7.48135 19.5536C6.59458 20.1979 5.40143 19.331 5.74015 18.2886L6.95037 14.5639C7.10185 14.0977 6.9359 13.587 6.53933 13.2989L3.37093 10.9969C2.48416 10.3526 2.9399 8.94998 4.03601 8.94998H7.95236C8.44256 8.94998 8.877 8.63434 9.02848 8.16814L10.2387 4.44347Z" fill="#FFBB29"></path>
                  <path d="M33.5795 4.44347C33.9182 3.40101 35.393 3.40101 35.7318 4.44347L36.942 8.16814C37.0935 8.63434 37.5279 8.94998 38.0181 8.94998H41.9344C43.0306 8.94998 43.4863 10.3526 42.5995 10.9969L39.4311 13.2989C39.0346 13.587 38.8686 14.0977 39.0201 14.5639L40.2303 18.2886C40.569 19.331 39.3759 20.1979 38.4891 19.5536L35.3207 17.2517C34.9241 16.9635 34.3871 16.9635 33.9906 17.2517L30.8222 19.5536C29.9354 20.1979 28.7423 19.331 29.081 18.2886L30.2912 14.5639C30.4427 14.0977 30.2767 13.587 29.8801 13.2989L26.7118 10.9969C25.825 10.3526 26.2807 8.94998 27.3768 8.94998H31.2932C31.7834 8.94998 32.2178 8.63434 32.3693 8.16814L33.5795 4.44347Z" fill="#FFBB29"></path>
                  <path d="M56.9213 4.44347C57.26 3.40101 58.7348 3.40101 59.0736 4.44347L60.2838 8.16814C60.4353 8.63434 60.8697 8.94998 61.3599 8.94998H65.2762C66.3724 8.94998 66.8281 10.3526 65.9413 10.9969L62.7729 13.2989C62.3764 13.587 62.2104 14.0977 62.3619 14.5639L63.5721 18.2886C63.9108 19.331 62.7177 20.1979 61.8309 19.5536L58.6625 17.2517C58.2659 16.9635 57.7289 16.9635 57.3324 17.2517L54.164 19.5536C53.2772 20.1979 52.084 19.331 52.4228 18.2886L53.633 14.5639C53.7845 14.0977 53.6185 13.587 53.2219 13.2989L50.0536 10.9969C49.1668 10.3526 49.6225 8.94998 50.7186 8.94998H54.635C55.1252 8.94998 55.5596 8.63434 55.7111 8.16814L56.9213 4.44347Z" fill="#FFBB29"></path>
                  <path d="M80.2631 4.44347C80.6018 3.40101 82.0766 3.40101 82.4154 4.44347L83.6256 8.16814C83.7771 8.63434 84.2115 8.94998 84.7017 8.94998H88.618C89.7142 8.94998 90.1699 10.3526 89.2831 10.9969L86.1147 13.2989C85.7182 13.587 85.5522 14.0977 85.7037 14.5639L86.9139 18.2886C87.2526 19.331 86.0595 20.1979 85.1727 19.5536L82.0043 17.2517C81.6077 16.9635 81.0707 16.9635 80.6742 17.2517L77.5058 19.5536C76.619 20.1979 75.4258 19.331 75.7646 18.2886L76.9748 14.5639C77.1263 14.0977 76.9603 13.587 76.5637 13.2989L73.3953 10.9969C72.5086 10.3526 72.9643 8.94998 74.0604 8.94998H77.9768C78.467 8.94998 78.9014 8.63434 79.0529 8.16814L80.2631 4.44347Z" fill="#FFBB29"></path>
                  <path d="M103.605 4.44347C103.944 3.40101 105.418 3.40101 105.757 4.44347L106.967 8.16814C107.119 8.63434 107.553 8.94998 108.043 8.94998H111.96C113.056 8.94998 113.512 10.3526 112.625 10.9969L109.457 13.2989C109.06 13.587 108.894 14.0977 109.045 14.5639L110.256 18.2886C110.594 19.331 109.401 20.1979 108.515 19.5536L105.346 17.2517C104.95 16.9635 104.413 16.9635 104.016 17.2517L100.848 19.5536C99.9608 20.1979 98.7676 19.331 99.1064 18.2886L100.317 14.5639C100.468 14.0977 100.302 13.587 99.9055 13.2989L96.7371 10.9969C95.8504 10.3526 96.3061 8.94998 97.4022 8.94998H101.319C101.809 8.94998 102.243 8.63434 102.395 8.16814L103.605 4.44347Z" fill="#FFBB29"></path>
                </svg>
              </div>
              <span class="is-size-7 has-text-white ml-2 pt-1">Based on 1624 reviews</span>
            </div>
            <div class="mb-12">
              <div class="mb-4 columns is-mobile is-vcentered">
                <div class="column is-1">
                  <div class="is-flex is-align-items-center">
                    <span class="is-size-7 has-text-white mr-2 has-text-weight-bold">5</span>

<section class="section has-background-dark">
  <div class="container">
    <div class="has-mw-sm-mobile has-mw-lg-tablet has-mw-5xl-widescreen mx-auto">
      <div class="pb-12" style="border-bottom: 1px solid rgba(132, 135, 138, 0.15)">
        <h3 class="title is-size-2 is-size-3-mobile has-text-white">Shopping Cart</h3>
      </div>
      <div x-data="{ item: true }" :class="{ 'is-hidden': !item }" class="py-10" style="border-bottom: 1px solid rgba(132, 135, 138, 0.15)">
        <div class="columns is-multiline">
          <div class="column is-4-desktop is-2-widescreen">
            <img class="is-block image is-fullwidth" src="vendia-assets/images/cart/cart-item2.png" alt="" style="height: 146px; max-width: 146px;">
          </div>
          <div class="column is-8-desktop is-10-widescreen">
            <div class="is-flex is-flex-direction-column" style=" height: 100%">
              <div class="is-flex-tablet is-align-items-start">
                <div class="has-mw-sm is-flex is-align-items-start" style="width: 100%;">
                  <div class="mr-12 mr-32-desktop is-flex-shrink-0">
                    <span class="has-text-white mb-1 is-block has-text-weight-medium">Bag Tumbler</span>
                    <span class="has-text-grey-lighter has-text-weight-bold">White</span>
                  </div>
                  <div class="ml-auto">
                    <div class="select mb-4">
                      <select name="">
                        <option value="1">1</option>
                        <option value="2">2</option>

<section class="section has-background-dark">
  <div class="container">
    <div class="has-mw-md has-mw-none-tablet mx-auto">
      <div class="mb-16">
        <h4 class="title is-size-2 has-text-white">Your Orders</h4>
        <p class="has-text-grey-lighter mb-0">Check the status of recent orders, manage return orders, and discover similar products.</p>
      </div>
      <div class="mb-20">
        <div class="pb-10 columns is-multiline is-vcentered" style="border-bottom: 1px solid rgba(33, 33, 36, 1);">
          <div class="column is-6-tablet">
            <div class="is-flex-tablet is-align-items-center">
              <h5 class="is-size-4 has-text-weight-bold has-text-white mr-6 has-text-weight-bold">Order #4376</h5>
              <span class="has-text-grey-lighter has-text-weight-medium">Delivered on January 22, 2021</span>
            </div>
          </div>
          <div class="column is-6-tablet">
            <div class="is-flex is-justify-content-flex-end is-align-items-center">
              <a class="is-inline-block is-size-6 has-text-primary has-text-weight-bold" href="#">Manage Order</a>
              <div class="mx-6 has-background-grey-dark" style="height: 16px; width: 1px;"></div>
              <a class="is-inline-block is-size-6 has-text-primary has-text-weight-bold" href="#">View Invoice</a>
            </div>
          </div>
        </div>
        <div class="py-8" style="border-bottom: 1px solid rgba(33, 33, 36, 1);">

<section class="section has-background-dark" x-data="{ active: 1 }">
  <div class="container">
    <div class="columns is-multiline">
      <div class="column is-4-desktop">
        <div class="has-mw-xs px-12 pt-9 pb-40 has-background-dark">
          <button class="button is-dark p-0 has-text-grey-lighter mb-20 is-inline-flex is-align-items-center">
            <svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M1.5 10.5L10.5 1.5M1.5 1.5L10.5 10.5" stroke="#84878A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
            <span class="ml-2">Close Filter</span>
          </button>
          <div class="mb-10 pb-10" style="border-bottom: 1px solid rgba(33, 33, 36, 1);">
            <h6 class="has-text-weight-bold has-text-white mb-5">Price</h6>
            <input type="range" style="width: 100%;">
            <div class="is-flex is-justify-content-space-between is-align-items-center">
              <span class="has-text-primary-gradient">$0</span>
              <span class="has-text-primary-gradient">$200</span>
            </div>
          </div>
          <div class="mb-10 pb-10" style="border-bottom: 1px solid rgba(33, 33, 36, 1);">
            <h6 class="has-text-weight-bold has-text-white mb-8">Category</h6>
            <ul class="mb-0">
              <li class="mb-4"><a class="has-text-grey-lighter is-inline-block has-text-weight-medium" href="#">New Releases</a></li>
              <li class="mb-4"><a class="is-inline-block has-text-primary-gradient" href="#">Pet Toys</a></li>

<section class="section has-background-dark">
  <div class="container">
    <div class="has-mw-none-tablet has-mw-lg mx-auto">
      <div class="columns is-multiline">
        <div class="column is-6-desktop mb-8 mb-0-desktop">
          <div class="has-mw-lg mx-auto">
            <form action="">
              <div class="field mb-10 pb-12">
                <h6 class="has-text-weight-bold has-text-white mb-6">Contact Information</h6>
                <label class="label is-size-6">Email Address</label>
                <div class="control mb-6">
                  <input class="input" type="email">
                </div>
                <h6 class="has-text-weight-bold has-text-white mb-6">Payment details</h6>
                <label class="label is-size-6">Name on card</label>
                <div class="control mb-6">
                  <input class="input" type="text">
                </div>
                <label class="label is-size-6">Card number</label>
                <div class="control mb-6">
                  <input class="input" type="text">
                </div>
                <div class="field mb-12">
                  <div class="field-body">

<section class="section has-background-dark">
  <div class="container">
    <div class="has-mw-none-tablet has-mw-lg mx-auto">
      <div class="columns is-multiline">
        <div class="column is-6-desktop mb-8 mb-0-desktop">
          <div class="has-mw-lg mx-auto">
            <form action="">
              <div class="field mb-10 pb-12" style="border-bottom: 1px solid rgba(132, 135, 138, 0.15);">
                <h6 class="has-text-weight-bold has-text-white mb-6">Contact Information</h6>
                <label class="label is-size-6">Email Address</label>
                <div class="control mb-6">
                  <input class="input" type="email">
                </div>
                <h6 class="has-text-weight-bold has-text-white mb-6">Payment details</h6>
                <label class="label is-size-6">Name on card</label>
                <div class="control mb-6">
                  <input class="input" type="text">
                </div>
                <label class="label is-size-6">Card number</label>
                <div class="control mb-6">
                  <input class="input" type="text">
                </div>
                <div class="field mb-12">
                  <div class="field-body">

<section class="section has-background-dark">
  <div class="container">
    <div class="columns is-multiline">
      <div class="column is-12-tablet is-4-desktop mb-6-touch">
        <div class="has-mw-sm mx-auto has-text-centered">
          <svg width="44" height="44" viewbox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M1.91635 0.666865L2.87468 0.666748H2.87487L3.50362 0.666763L3.54926 0.666764C4.24841 0.666763 4.84252 0.666763 5.33385 0.704383C5.85144 0.744014 6.34733 0.830216 6.83124 1.05137C7.57272 1.39026 8.20108 1.93525 8.6414 2.62136C8.92876 3.06913 9.08422 3.54786 9.19663 4.05464C9.30334 4.53567 9.38734 5.12375 9.48619 5.8158L9.4862 5.81591L9.48621 5.81597L9.49267 5.86116L10.6673 14.0834H18.2656L20.72 6.72031L20.7831 6.53032L20.7831 6.5303C21.1125 5.53845 21.3811 4.72989 21.9019 4.1071C22.3583 3.56131 22.9444 3.13883 23.6066 2.87842C24.3621 2.58127 25.2141 2.58221 26.2592 2.58336L26.4594 2.58351L34.8735 2.58344L35.0737 2.58329C36.1189 2.58212 36.9709 2.58117 37.7264 2.87832C38.3885 3.13873 38.9747 3.56121 39.4311 4.10701C39.952 4.72981 40.2205 5.5384 40.5499 6.53027L40.6131 6.72026L42.3968 12.0715L42.4261 12.1594L42.4262 12.1596C42.7547 13.145 42.9587 13.7569 43.076 14.3914C43.1799 14.9541 43.2314 15.5253 43.2298 16.0975C43.228 16.7428 43.1367 17.3813 42.9898 18.4096L42.9766 18.5015L42.2723 23.4321L42.2655 23.4796C42.1321 24.4135 42.022 25.1839 41.8832 25.8095C41.7387 26.461 41.5452 27.0464 41.199 27.5858C40.6551 28.4333 39.8788 29.1066 38.9629 29.5252C38.38 29.7916 37.7731 29.9004 37.1077 29.9513C36.4687 30.0002 35.6904 30.0002 34.7469 30.0002H34.6991H17.0505H17.0028H17.0027H17.0027C16.0593 30.0002 15.281 30.0002 14.642 29.9513C13.9766 29.9004 13.3697 29.7916 12.7868 29.5252C11.8708 29.1066 11.0946 28.4333 10.5506 27.5858C10.2045 27.0464 10.0109 26.461 9.86643 25.8095C9.72765 25.1839 9.6176 24.4135 9.4842 23.4796L9.48418 23.4794L9.48417 23.4794L9.47741 23.4321L7.01779 6.21472C6.91072 5.46522 6.83948 4.97256 6.75596 4.59605C6.67583 4.23481 6.60275 4.07344 6.53741 3.97162C6.3561 3.6891 6.09736 3.46469 5.79204 3.32515C5.68201 3.27487 5.51192 3.22534 5.14299 3.19709C4.75845 3.16764 4.26066 3.16678 3.50356 3.16676L2.87499 3.16675H2.87481L1.91666 3.16686C1.2263 3.16695 0.666588 2.60737 0.666504 1.91702C0.66642 1.22666 1.226 0.666949 1.91635 0.666865ZM19.1376 16.5834C19.157 16.5839 19.1764 16.5839 19.1957 16.5834H40.7053C40.6737 16.9358 40.6096 17.3927 40.5017 18.1479L39.7974 23.0785C39.6555 24.0716 39.5582 24.7469 39.4426 25.2681C39.3303 25.774 39.2192 26.0421 39.095 26.2355C38.8101 26.6795 38.4035 27.0321 37.9237 27.2514C37.7147 27.3469 37.4336 27.4191 36.9169 27.4586C36.3846 27.4993 35.7023 27.5002 34.6991 27.5002H17.0505C16.0474 27.5002 15.3651 27.4993 14.8328 27.4586C14.3161 27.4191 14.035 27.3469 13.826 27.2514C13.3462 27.0321 12.9396 26.6795 12.6546 26.2355C12.5305 26.0421 12.4193 25.774 12.3071 25.2681C12.1915 24.7469 12.0942 24.0716 11.9523 23.0785L11.0244 16.5834H19.1376ZM40.423 14.0834H20.9008L23.0917 7.51089C23.5188 6.22949 23.6437 5.92134 23.8197 5.71087C24.0076 5.48613 24.249 5.31218 24.5216 5.20495C24.7769 5.10453 25.1087 5.08352 26.4594 5.08351L34.8735 5.08344C36.2242 5.08343 36.5561 5.10444 36.8114 5.20486C37.084 5.31208 37.3254 5.48604 37.5133 5.71079C37.6894 5.92126 37.8142 6.22941 38.2414 7.51083L40.0251 12.8621C40.2051 13.4022 40.3314 13.7831 40.423 14.0834ZM14.6665 38.3334C14.6665 36.9067 15.8231 35.7501 17.2498 35.7501C18.6766 35.7501 19.8332 36.9067 19.8332 38.3334C19.8332 39.7602 18.6766 40.9167 17.2498 40.9167C15.8231 40.9167 14.6665 39.7602 14.6665 38.3334ZM17.2498 33.2501C14.4424 33.2501 12.1665 35.526 12.1665 38.3334C12.1665 41.1409 14.4424 43.4167 17.2498 43.4167C20.0573 43.4167 22.3332 41.1409 22.3332 38.3334C22.3332 35.526 20.0573 33.2501 17.2498 33.2501ZM33.8332 38.3334C33.8332 36.9067 34.9898 35.7501 36.4165 35.7501C37.8432 35.7501 38.9998 36.9067 38.9998 38.3334C38.9998 39.7602 37.8432 40.9167 36.4165 40.9167C34.9898 40.9167 33.8332 39.7602 33.8332 38.3334ZM36.4165 33.2501C33.6091 33.2501 31.3332 35.526 31.3332 38.3334C31.3332 41.1409 33.6091 43.4167 36.4165 43.4167C39.224 43.4167 41.4998 41.1409 41.4998 38.3334C41.4998 35.526 39.224 33.2501 36.4165 33.2501Z" fill="#F2FF5A"></path>
          </svg>
          <h4 class="title is-size-4 has-text-white mt-8">Flexible</h4>
          <p class="subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing a elit. Nullam to dictum aliquet accumsan porta lectus ridiculus in these mattisn netus sodale.</p>
        </div>
      </div>
      <div class="column is-12-tablet is-4-desktop mb-6-touch">
        <div class="has-mw-sm mx-auto has-text-centered">
          <svg width="42" height="42" viewbox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M27.5281 6.33325C28.1175 3.06368 30.9775 0.583252 34.4168 0.583252C38.2828 0.583251 41.4168 3.71726 41.4168 7.58325C41.4168 11.4492 38.2828 14.5833 34.4168 14.5833C30.9775 14.5833 28.1175 12.1028 27.5281 8.83325L15.2502 8.83326C12.0885 8.83326 9.46097 11.1198 8.93098 14.1295C12.1522 14.7576 14.5835 17.5949 14.5835 20.9999C14.5835 24.405 12.1522 27.2422 8.93098 27.8703C9.46097 30.88 12.0885 33.1666 15.2502 33.1666L27.5281 33.1666C28.1175 29.897 30.9775 27.4166 34.4168 27.4166C38.2828 27.4166 41.4168 30.5506 41.4168 34.4166C41.4168 38.2826 38.2828 41.4166 34.4168 41.4166C30.9775 41.4166 28.1175 38.9362 27.5281 35.6666L15.2502 35.6666C10.7159 35.6666 6.97203 32.2821 6.40718 27.9015C3.10126 27.3421 0.583497 24.465 0.583496 20.9999C0.583496 17.5348 3.10126 14.6577 6.40718 14.0983C6.97203 9.71777 10.7158 6.33326 15.2502 6.33326L27.5281 6.33325ZM29.9168 34.4146C29.9168 34.4153 29.9168 34.4159 29.9168 34.4166C29.9168 36.9019 31.9315 38.9166 34.4168 38.9166C36.9021 38.9166 38.9168 36.9019 38.9168 34.4166C38.9168 31.9313 36.9021 29.9166 34.4168 29.9166C31.9322 29.9166 29.9179 31.9302 29.9168 34.4146ZM29.9168 7.58325C29.9168 10.0685 31.9315 12.0833 34.4168 12.0833C36.9021 12.0833 38.9168 10.0685 38.9168 7.58325C38.9168 5.09797 36.9021 3.08325 34.4168 3.08325C31.9315 3.08325 29.9168 5.09797 29.9168 7.58325ZM7.5835 16.4999C5.09821 16.4999 3.0835 18.5146 3.0835 20.9999C3.0835 23.4852 5.09822 25.4999 7.5835 25.4999C10.0688 25.4999 12.0835 23.4852 12.0835 20.9999C12.0835 18.5146 10.0688 16.4999 7.5835 16.4999Z" fill="#F2FF5A"></path>
          </svg>
          <h4 class="title is-size-4 has-text-white mt-8">Integrated</h4>
          <p class="subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing a elit. Nullam to dictum aliquet accumsan porta lectus ridiculus in these mattisn netus sodale.</p>
        </div>
      </div>
      <div class="column is-12-tablet is-4-desktop">
        <div class="has-mw-sm mx-auto has-text-centered">
          <svg width="42" height="42" viewbox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">

<section class="is-clipped has-background-white" x-data="{ dropdown: false, mobileNavOpen: false }">
  <nav class="navbar has-background-grey-dark">
    <div class="navbar-brand">
      <a class="navbar-item mr-16" href="#">
        <img class="image" src="vendia-assets/logos/vendia.svg" alt="">
      </a>
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="button navbar-menu-open navbar-burger is-ghost has-text-white p-0 mr-6">
        <svg viewbox="0 0 100 45" width="26" height="20" fill="currentColor"><rect width="100" height="6"></rect><rect y="18" width="100" height="6"></rect><rect y="38" width="100" height="6"></rect></svg>
      </button>
    </div>
    <div class="navbar-menu">
      <div class="navbar-start">
        <div class="navbar-item" x-on:mouseover="dropdown = true" x-on:mouseleave="dropdown = false">
          <div class="is-clickable dropdown">
            <div class="dropdown-trigger has-text-primary is-inline-flex">
              <span class="has-text-primary-gradient">Why Vendia?</span>
              <span :class="{ 'is-rotate-180': dropdown, 'is-rotate-0': !dropdown }" class="ml-3">
                <svg width="12" height="7" viewbox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10.6666 1L5.99998 5.66667L1.33331 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </span>
            </div>
            <div :class="{ 'is-block dropdown-menu': dropdown, 'is-hidden': !dropdown }" class="has-background-grey-darker" style="border-top: none;">
              <div class="dropdown-content pt-10 has-background-dark" style="min-width: max-content;">

<section class="section has-background-dark" x-data="{ quantity: 1 }">
  <div class="container">
    <div class="has-mw-md-mobile has-mw-4xl-desktop mx-auto">
      <div class="columns is-multiline">
        <div class="column is-6">
          <div>
            <img class="mb-5 is-block image is-fullwidth is-covered" src="vendia-assets/images/product-details/item-bag-gray-big.png" alt="" style="max-height: 400px; height: 100%">
            <div class="is-flex">
              <a class="mr-5 is-inline-block" href="#">
                <img class="is-block image is-fullwidth" src="vendia-assets/images/product-details/item-bag-gray1.png" alt="">
              </a>
              <a class="mr-5 is-inline-block" href="#">
                <img class="is-block image is-fullwidth" src="vendia-assets/images/product-details/item-bag-gray2.png" alt="">
              </a>
              <a class="is-inline-block" href="#">
                <img class="is-block image is-fullwidth" src="vendia-assets/images/product-details/item-bag-gray3.png" alt="">
              </a>
            </div>
          </div>
        </div>
        <div class="column is-6">
          <div class="pl-12-widescreen">
            <div class="mb-2 is-flex">
              <button class="button is-ghost p-0 mr-1">

<section class="section px-0 has-background-dark" x-data="{ activeSlide: 1, slideCount: 3 }">
  <div class="container px-5 mb-16">
    <div class="columns is-multiline is-align-items-end">
      <div class="column is-6-desktop is-8-widescreen">
        <h1 class="title is-size-2 has-text-white">Latest Collections</h1>
      </div>
      <div class="column is-6-desktop is-4-widescreen">
        <div class="buttons is-right">
          <a x-on:click.prevent="activeSlide = activeSlide > 1 ? activeSlide - 1 : slideCount" class="button is-light has-background-dark is-rounded" href="#" style="border: 1px solid rgba(132, 135, 138, 0.20); width: 84px; height: 37px;">
            <svg width="10" height="9" viewbox="0 0 10 9" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M7.06245 8.2123L1.28774 8.2123M1.28774 8.2123L1.28774 2.4376M1.28774 8.2123L8.71236 0.787683" stroke="#84878A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
          <a x-on:click.prevent="activeSlide = activeSlide < slideCount ? activeSlide + 1 : 1" class="button is-borderless has-background-gradient-primary is-rounded" href="#" style="width: 84px; height: 37px;">
            <svg width="10" height="9" viewbox="0 0 10 9" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M2.93766 0.787683L8.71236 0.787683M8.71236 0.787683L8.71236 6.56239M8.71236 0.787683L1.28774 8.2123" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
        </div>
      </div>
    </div>
  </div>
  <div class="px-5 has-mw-sm has-mw-none-tablet mx-auto is-clipped">
    <div :style="'transform: translateX(-' + (activeSlide - 1) * 100.5 + '%); transition: transform 0.5s ease-in-out;'">

<section class="section has-background-dark">
  <div class="container">
    <div class="has-mw-sm-mobile has-mw-lg-tablet has-mw-5xl-widescreen mx-auto">
      <div class="pb-12" style="border-bottom: 1px solid rgba(132, 135, 138, 0.15)">
        <h3 class="title is-size-2 is-size-3-mobile has-text-white">Shopping Cart</h3>
      </div>
      <div x-data="{ item: true }" :class="{ 'is-hidden': !item }" class="py-10" style="border-bottom: 1px solid rgba(132, 135, 138, 0.15)">
        <div class="columns is-multiline">
          <div class="column is-4-desktop is-2-widescreen">
            <img class="is-block image is-fullwidth" src="vendia-assets/images/cart/cart-item2.png" alt="" style="height: 146px; max-width: 146px;">
          </div>
          <div class="column is-8-desktop is-10-widescreen">
            <div class="is-flex is-flex-direction-column" style=" height: 100%">
              <div class="is-flex-tablet is-align-items-start">
                <div class="has-mw-sm is-flex is-align-items-start" style="width: 100%;">
                  <div class="mr-12 mr-32-desktop is-flex-shrink-0">
                    <span class="has-text-white mb-1 is-block has-text-weight-medium">Bag Tumbler</span>
                    <span class="has-text-grey-lighter has-text-weight-bold">White</span>
                  </div>
                  <div class="ml-auto">
                    <div class="select mb-4">
                      <select name="">
                        <option value="1">1</option>
                        <option value="2">2</option>

<section class="section has-background-dark" x-data="{ nav: '' }" x-init="nav = $refs.nav1.textContent">
  <div class="container">
    <div class="mb-12 columns is-multiline is-align-items-end">
      <div class="column is-12-tablet is-6-desktop mb-6 mb-0-desktop">
        <h1 class="title is-size-4 has-text-white">Featured Collections</h1>
        <p class="subtitle">Most Selling and Trending Products in our shop</p>
      </div>
      <div class="column is-12-tablet is-6-desktop">
        <div class="-mb-2 is-flex-desktop is-justify-content-flex-end">
            <a x-ref="nav1" x-on:click.prevent="nav = $refs.nav1.textContent" class="mb-2 mr-8 is-inline-block" :class="{ 'has-text-primary-gradient': nav == $refs.nav1.textContent, 'has-text-grey-lighter': nav != $refs.nav1.textContent }" href="#">All</a>
            <a x-ref="nav2" x-on:click.prevent="nav = $refs.nav2.textContent" class="mb-2 mr-8 is-inline-block has-text-weight-medium" :class="{ 'has-text-primary-gradient': nav == $refs.nav2.textContent, 'has-text-grey-lighter': nav != $refs.nav2.textContent }" href="#">Sofa</a>
            <a x-ref="nav3" x-on:click.prevent="nav = $refs.nav3.textContent" class="mb-2 mr-8 is-inline-block has-text-weight-medium" :class="{ 'has-text-primary-gradient': nav == $refs.nav3.textContent, 'has-text-grey-lighter': nav != $refs.nav3.textContent }" href="#">Table</a>
            <a x-ref="nav4" x-on:click.prevent="nav = $refs.nav4.textContent" class="mb-2 mr-8 is-inline-block has-text-weight-medium" :class="{ 'has-text-primary-gradient': nav == $refs.nav4.textContent, 'has-text-grey-lighter': nav != $refs.nav4.textContent }" href="#">Chair</a>
            <a x-ref="nav5" x-on:click.prevent="nav = $refs.nav5.textContent" class="mb-2 mr-8 is-inline-block has-text-weight-medium" :class="{ 'has-text-primary-gradient': nav == $refs.nav5.textContent, 'has-text-grey-lighter': nav != $refs.nav5.textContent }" href="#">Tool</a>
            <a x-ref="nav6" x-on:click.prevent="nav = $refs.nav6.textContent" class="mb-2 is-inline-block has-text-weight-medium" :class="{ 'has-text-primary-gradient': nav == $refs.nav6.textContent, 'has-text-grey-lighter': nav != $refs.nav6.textContent }" href="#">Strong Comforter</a>
        </div>
      </div>
    </div>
    <div class="-mb-8 columns is-multiline">
      <div class="column mb-8 is-hidden" :class="{ 'is-block': $refs.nav1.textContent == nav || $refs.nav2.textContent == nav }">
        <div class="is-block has-mw-sm mx-auto is-relative">
          <a class="is-absolute is-inline-block is-top-0 is-right-0 m-3" href="#" style="z-index: 1;">
            <svg width="26" height="26" viewbox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M13 9.25V13M13 13V16.75M13 13H16.75M13 13H9.25M24.25 13C24.25 19.2132 19.2132 24.25 13 24.25C6.7868 24.25 1.75 19.2132 1.75 13C1.75 6.7868 6.7868 1.75 13 1.75C19.2132 1.75 24.25 6.7868 24.25 13Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>