UI Components – Vendia Library

<section class="bg-black" x-data="{ mobileNavOpen: false }">
  <nav class="relative px-6 py-6">
    <div class="flex justify-between items-center">
      <a class="inline-block text-lg font-bold" href="#">
        <img class="h-6" src="vendia-assets/logos/vendia.svg" alt="" width="auto">
      </a>
      <div class="lg:hidden">
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center p-3 text-white hover:text-yellow-500">
          <svg class="block h-4 w-4" stroke="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <title>Mobile menu</title>
            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
          </svg>
        </button>
      </div>
      <ul class="hidden absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2 lg:flex lg:w-auto lg:space-x-12">
        <li><a class="inline-block text-sm font-bold text-transparent bg-clip-text bg-gradient-to-r from-yellow-500 via-green-300 to-blue-500" href="#">Home</a></li>
        <li><a class="inline-block text-sm font-bold text-transparent bg-clip-text bg-gradient-to-r from-white via-white to-white hover:from-yellow-500 hover:via-green-300 hover:to-blue-500" href="#">Shop</a></li>
        <li><a class="inline-block text-sm font-bold text-transparent bg-clip-text bg-gradient-to-r from-white via-white to-white hover:from-yellow-500 hover:via-green-300 hover:to-blue-500" href="#">Product</a></li>
        <li><a class="inline-block text-sm font-bold text-transparent bg-clip-text bg-gradient-to-r from-white via-white to-white hover:from-yellow-500 hover:via-green-300 hover:to-blue-500" href="#">Blog</a></li>
        <li><a class="inline-block text-sm font-bold text-transparent bg-clip-text bg-gradient-to-r from-white via-white to-white hover:from-yellow-500 hover:via-green-300 hover:to-blue-500" href="#">Support</a></li>
      </ul>
      <div class="hidden lg:block">
        <a class="inline-block text-white hover:text-blue-500" href="#">
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">

<section class="bg-black" x-data="{ mobileNavOpen: false }">
  <nav class="relative px-6 py-6">
    <div class="flex justify-between items-center">
      <a class="inline-block text-lg font-bold" href="#">
        <img class="h-6" src="vendia-assets/logos/vendia.svg" alt="" width="auto">
      </a>
      <div class="lg:hidden">
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center p-3 text-white hover:text-yellow-500">
          <svg class="block h-4 w-4" stroke="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <title>Mobile menu</title>
            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
          </svg>
        </button>
      </div>
      <ul class="hidden absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2 lg:flex lg:w-auto lg:space-x-12">
        <li><a class="inline-block text-sm text-yellow-500 font-medium" href="#">Home</a></li>
        <li><a class="inline-block text-sm text-gray-50 hover:text-yellow-500 font-medium" href="#">Shop</a></li>
        <li><a class="inline-block text-sm text-gray-50 hover:text-yellow-500 font-medium" href="#">Product</a></li>
        <li><a class="inline-block text-sm text-gray-50 hover:text-yellow-500 font-medium" href="#">Blog</a></li>
        <li><a class="inline-block text-sm text-gray-50 hover:text-yellow-500 font-medium" href="#">Support</a></li>
      </ul>
      <div class="hidden lg:block">
        <a class="inline-block text-white hover:text-yellow-500" href="#">
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">

<section class="relative" x-data="{ mobileNavOpen: false }">
  <img class="absolute top-0 left-0 w-full h-full" src="vendia-assets/images/header/bg-color-gradient.png" alt="">
  <nav class="relative px-6 py-6 z-20">
    <div class="flex w-full items-center">
      <a class="inline-block text-lg font-bold mr-24" href="#">
        <img class="h-6" src="vendia-assets/logos/vendia.svg" alt="" width="auto">
      </a>
      <div class="ml-auto lg:hidden">
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center p-3 bg-white hover:bg-yellow-500">
          <svg class="block h-4 w-4" stroke="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <title>Mobile menu</title>
            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
          </svg>
        </button>
      </div>
      <ul class="hidden lg:flex lg:w-auto lg:space-x-12 mr-auto">
        <li><a class="inline-block text-sm font-bold text-transparent bg-clip-text bg-gradient-to-r from-white via-white to-white hover:from-yellow-500 hover:via-green-300 hover:to-blue-500" href="#">Home</a></li>
        <li><a class="inline-block text-sm font-bold text-transparent bg-clip-text bg-gradient-to-r from-white via-white to-white hover:from-yellow-500 hover:via-green-300 hover:to-blue-500" href="#">Shop</a></li>
        <li><a class="inline-block text-sm font-bold text-transparent bg-clip-text bg-gradient-to-r from-white via-white to-white hover:from-yellow-500 hover:via-green-300 hover:to-blue-500" href="#">Product</a></li>
        <li><a class="inline-block text-sm font-bold text-transparent bg-clip-text bg-gradient-to-r from-white via-white to-white hover:from-yellow-500 hover:via-green-300 hover:to-blue-500" href="#">Blog</a></li>
        <li><a class="inline-block text-sm font-bold text-transparent bg-clip-text bg-gradient-to-r from-white via-white to-white hover:from-yellow-500 hover:via-green-300 hover:to-blue-500" href="#">Support</a></li>
      </ul>
      <div class="hidden lg:block">
        <a class="inline-flex items-center justify-center rounded-full w-8 h-8 bg-white bg-gradient-to-br from-white via-white to-white hover:from-yellow-500 hover:via-green-300 hover:to-blue-500" href="#">

<section class="relative" x-data="{ mobileNavOpen: false }">
  <img class="absolute top-0 left-0 w-full h-full" src="vendia-assets/images/header/bg-color-gradient.png" alt="">
  <nav class="relative px-6 py-6 z-20">
    <div class="flex w-full items-center">
      <a class="inline-block text-lg font-bold mr-24" href="#">
        <img class="h-6" src="vendia-assets/logos/vendia.svg" alt="" width="auto">
      </a>
      <div class="ml-auto lg:hidden">
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center p-3 bg-white hover:bg-yellow-500">
          <svg class="block h-4 w-4" stroke="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <title>Mobile menu</title>
            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
          </svg>
        </button>
      </div>
      <ul class="hidden lg:flex lg:w-auto lg:space-x-12 mr-auto">
        <li><a class="inline-block text-sm text-gray-50 hover:text-yellow-500 font-medium" href="#">Home</a></li>
        <li><a class="inline-block text-sm text-gray-50 hover:text-yellow-500 font-medium" href="#">Shop</a></li>
        <li><a class="inline-block text-sm text-gray-50 hover:text-yellow-500 font-medium" href="#">Product</a></li>
        <li><a class="inline-block text-sm text-gray-50 hover:text-yellow-500 font-medium" href="#">Blog</a></li>
        <li><a class="inline-block text-sm text-gray-50 hover:text-yellow-500 font-medium" href="#">Support</a></li>
      </ul>
      <div class="hidden lg:block">
        <a class="inline-flex items-center justify-center rounded-full w-8 h-8 bg-white hover:bg-yellow-500" href="#">

<section class="bg-black" x-data="{ mobileNavOpen: false }">
  <nav class="relative px-5 lg:px-16 py-10">
    <div class="flex flex-wrap justify-between items-center">
      <a class="inline-block py-2 text-lg font-bold" href="#">
        <img class="h-7" src="vendia-assets/logos/vendia.svg" alt="" width="auto">
      </a>
      <div class="py-2">
        <a class="inline-flex items-center font-bold text-transparent bg-clip-text bg-gradient-to-r from-yellow-500 via-green-300 to-blue-500 hover:via-yellow-300" href="#">
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M1 2.33333C1 1.59695 1.59695 1 2.33333 1H4.51949C4.80645 1 5.06121 1.18362 5.15195 1.45585L6.15049 4.45147C6.25541 4.76622 6.11292 5.11021 5.81618 5.25858L4.31134 6.011C5.04617 7.64081 6.35919 8.95383 7.989 9.68866L8.74142 8.18382C8.88979 7.88708 9.23378 7.74459 9.54853 7.84951L12.5442 8.84805C12.8164 8.93879 13 9.19355 13 9.48051V11.6667C13 12.403 12.403 13 11.6667 13H11C5.47715 13 1 8.52285 1 3V2.33333Z" stroke="url(#paint0_linear_2747_915)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <defs><linearGradient id="paint0_linear_2747_915" x1="1" y1="1" x2="15.4853" y2="7.01973" 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"></stop></stop></stop></stop></stop></linearGradient></defs>
          </svg>
          <span class="ml-3">Call us: +1-395-493-395</span>
        </a>
      </div>
    </div>
  </nav>
  <div class="py-12 px-5 lg:px-16 border-t border-b border-blueGray-800 overflow-hidden">
    <div class="flex -mx-4 xl:-mx-8 animate-photo">
      <div class="flex-shrink-0 w-80 sm:w-2/3 md:w-1/3 xl:w-auto px-4 xl:px-8">
        <div class="group block w-full xl:w-88 relative">
          <div class="xs:hidden group-hover:block absolute bottom-0 left-0 w-full pb-6 px-8">
            <a class="block py-5 px-4 bg-gradient-to-r from-yellow-500 via-green-300 to-blue-500 hover:via-yellow-300 transition duration-200" href="#">
              <div class="flex flex-wrap items-center -mb-4">

<section class="bg-black" x-data="{ mobileNavOpen: false }">
  <nav class="relative px-5 lg:px-16 py-10">
    <div class="flex flex-wrap justify-between items-center">
      <a class="inline-block py-2 text-lg font-bold" href="#">
        <img class="h-7" src="vendia-assets/logos/vendia.svg" alt="" width="auto">
      </a>
      <div class="py-2">
        <a class="inline-flex items-center text-yellow-500 hover:text-white font-medium" href="#">
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M1 2.33333C1 1.59695 1.59695 1 2.33333 1H4.51949C4.80645 1 5.06121 1.18362 5.15195 1.45585L6.15049 4.45147C6.25541 4.76622 6.11292 5.11021 5.81618 5.25858L4.31134 6.011C5.04617 7.64081 6.35919 8.95383 7.989 9.68866L8.74142 8.18382C8.88979 7.88708 9.23378 7.74459 9.54853 7.84951L12.5442 8.84805C12.8164 8.93879 13 9.19355 13 9.48051V11.6667C13 12.403 12.403 13 11.6667 13H11C5.47715 13 1 8.52285 1 3V2.33333Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
          <span class="ml-3">Call us: +1-395-493-395</span>
        </a>
      </div>
    </div>
  </nav>
  <div class="py-12 px-5 lg:px-16 border-t border-b border-blueGray-800 overflow-hidden">
    <div class="flex -mx-4 xl:-mx-8 animate-photo">
      <div class="flex-shrink-0 w-80 sm:w-2/3 md:w-1/3 xl:w-auto px-4 xl:px-8">
        <div class="group block w-full xl:w-88 relative">
          <div class="hidden group-hover:block absolute bottom-0 left-0 w-full pb-6 px-8">
            <a class="block py-5 px-4 bg-yellow-500 hover:bg-white transition duration-200" href="#">
              <div class="flex flex-wrap items-center -mb-4">
                <div class="flex mb-4 items-center">

<section x-data="{ mobileNavOpen: false, nav: '' }" x-init="nav = $refs.nav1.textContent" class="pb-12 md:pb-24 lg:pb-32 bg-black">
  <nav class="relative px-6 lg:px-16 py-9">
    <div class="flex items-center">
      <a class="inline-block text-lg font-bold" href="#">
        <img class="h-6" src="vendia-assets/logos/vendia.svg" alt="" width="auto">
      </a>
      <div class="lg:hidden ml-auto">
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center p-3 text-white hover:text-yellow-500">
          <svg class="block h-4 w-4" stroke="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <title>Mobile menu</title>
            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
          </svg>
        </button>
      </div>
      <ul class="hidden lg:flex lg:w-auto lg:space-x-12 ml-16 mr-auto">
        <li><a class="inline-block text-sm font-bold text-transparent bg-clip-text bg-gradient-to-r from-white via-white to-white hover:from-yellow-500 hover:via-green-300 hover:to-blue-500" href="#">Women</a></li>
        <li><a class="inline-block text-sm font-bold text-transparent bg-clip-text bg-gradient-to-r from-white via-white to-white hover:from-yellow-500 hover:via-green-300 hover:to-blue-500" href="#">Men</a></li>
        <li><a class="inline-block text-sm font-bold text-transparent bg-clip-text bg-gradient-to-r from-white via-white to-white hover:from-yellow-500 hover:via-green-300 hover:to-blue-500" href="#">Kids</a></li>
        <li class="group relative">
          <a class="inline-flex items-center text-sm font-bold text-transparent bg-clip-text bg-gradient-to-r from-white via-white to-white hover:from-yellow-500 hover:via-green-300 hover:to-blue-500" href="#">
            <span class="mr-3">Browse</span>
            <span class="text-white group-hover:text-blue-500">
              <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="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>

<section x-data="{ mobileNavOpen: false, nav: '' }" x-init="nav = $refs.nav1.textContent" class="pb-12 md:pb-24 lg:pb-32 bg-black">
  <nav class="relative px-6 lg:px-16 py-9">
    <div class="flex items-center">
      <a class="inline-block text-lg font-bold" href="#">
        <img class="h-6" src="vendia-assets/logos/vendia.svg" alt="" width="auto">
      </a>
      <div class="lg:hidden ml-auto">
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center p-3 text-white hover:text-yellow-500">
          <svg class="block h-4 w-4" stroke="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <title>Mobile menu</title>
            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
          </svg>
        </button>
      </div>
      <ul class="hidden lg:flex lg:w-auto lg:space-x-12 ml-16 mr-auto">
        <li><a class="inline-block text-sm text-gray-50 hover:text-yellow-500 font-medium" href="#">Women</a></li>
        <li><a class="inline-block text-sm text-gray-50 hover:text-yellow-500 font-medium" href="#">Men</a></li>
        <li><a class="inline-block text-sm text-gray-50 hover:text-yellow-500 font-medium" href="#">Kids</a></li>
        <li class="group relative">
          <a class="inline-flex items-center text-sm text-gray-50 hover:text-yellow-500 font-medium" href="#">
            <span class="mr-3">Browse</span>
            <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>

<section class="bg-blueGray-800" x-data="{ mobileNavOpen: false }">
  <nav class="relative px-6 py-6 bg-black">
    <div class="flex items-center">
      <ul class="hidden lg:flex lg:w-auto lg:space-x-12">
        <li><a class="inline-block text-sm font-bold text-transparent bg-clip-text bg-gradient-to-r from-white via-white to-white hover:from-yellow-500 hover:via-green-300 hover:to-blue-500" href="#">House</a></li>
        <li><a class="inline-block text-sm font-bold text-transparent bg-clip-text bg-gradient-to-r from-white via-white to-white hover:from-yellow-500 hover:via-green-300 hover:to-blue-500" href="#">Office</a></li>
        <li><a class="inline-block text-sm font-bold text-transparent bg-clip-text bg-gradient-to-r from-white via-white to-white hover:from-yellow-500 hover:via-green-300 hover:to-blue-500" href="#">Brand</a></li>
        <li><a class="inline-block text-sm font-bold text-transparent bg-clip-text bg-gradient-to-r from-white via-white to-white hover:from-yellow-500 hover:via-green-300 hover:to-blue-500" href="#">Stores</a></li>
      </ul>
      <a class="absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2 inline-block text-lg font-bold" href="#">
        <img class="h-5" src="vendia-assets/logos/vendia.svg" alt="" width="auto">
      </a>
      <div class="lg:hidden">
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center p-3 text-white hover:text-yellow-500">
          <svg class="block h-4 w-4" stroke="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <title>Mobile menu</title>
            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
          </svg>
        </button>
      </div>
      <div class="hidden lg:flex items-center ml-auto">
        <a class="inline-block mr-8 font-bold text-transparent bg-clip-text bg-gradient-to-r from-white via-white to-white hover:from-yellow-500 hover:via-green-300 hover:to-blue-500" href="#">Help</a>
        <a class="group inline-flex items-center text-sm font-bold" href="#">
          <span class="text-gray-400 group-hover:text-blue-500">

<section class="bg-blueGray-800" x-data="{ mobileNavOpen: false }">
  <nav class="relative px-6 py-6 bg-black">
    <div class="flex items-center">
      <ul class="hidden lg:flex lg:w-auto lg:space-x-12">
        <li><a class="inline-block text-sm text-gray-50 hover:text-yellow-500 font-medium" href="#">House</a></li>
        <li><a class="inline-block text-sm text-gray-50 hover:text-yellow-500 font-medium" href="#">Office</a></li>
        <li><a class="inline-block text-sm text-gray-50 hover:text-yellow-500 font-medium" href="#">Brand</a></li>
        <li><a class="inline-block text-sm text-gray-50 hover:text-yellow-500 font-medium" href="#">Stores</a></li>
      </ul>
      <a class="absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2 inline-block text-lg font-bold" href="#">
        <img class="h-5" src="vendia-assets/logos/vendia.svg" alt="" width="auto">
      </a>
      <div class="lg:hidden">
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center p-3 text-white hover:text-yellow-500">
          <svg class="block h-4 w-4" stroke="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <title>Mobile menu</title>
            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
          </svg>
        </button>
      </div>
      <div class="hidden lg:flex items-center ml-auto">
        <a class="inline-block mr-8 font-medium text-white hover:text-yellow-500" href="#">Help</a>
        <a class="group inline-flex items-center text-sm font-bold" href="#">
          <span class="text-gray-400 group-hover:text-yellow-500">

<section x-data="{ cart: true }" :class="{ 'hidden': !cart }" class="relative z-50">
  <div class="absolute top-0 left-0 w-full sm:py-12 md:py-24">
    <div class="max-w-lg pt-6 pb-8 px-8 mx-auto bg-blueGray-900">
      <div class="flex mb-10 items-center justify-between">
        <h6 class="font-bold text-xl text-white mb-0">Shopping Cart</h6>
        <button x-on:click="cart = false" class="inline-block text-gray-400 hover:text-gray-200">
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M1 11L11 1M1 1L11 11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </button>
      </div>
      <div x-data="{ item: true }" :class="{ 'hidden': !item }" class="flex flex-wrap -mx-2 pb-6 border-b border-blueGray-800">
        <div class="w-1/4 px-2">
          <img class="block h-full" src="vendia-assets/images/cart-popup/item1.png" alt="">
        </div>
        <div class="w-2/4 px-2">
          <div class="flex flex-col h-full">
            <h6 class="font-bold text-white mb-1">Zip Tote Basket</h6>
            <span class="block pb-4 mb-auto font-medium text-gray-400">White and black</span>
            <select class="w-14 text-sm pl-2 text-white bg-blueGray-900 outline-none" name="" id="">
              <option value="">1</option>
              <option value="">2</option>
              <option value="">3</option>
            </select>

<section class="py-12 md:py-24 lg:py-32 bg-black">
  <div class="container mx-auto px-4">
    <h3 class="font-heading text-3xl font-bold text-white mb-8">Recent reviews</h3>
    <div class="flex flex-wrap -mx-4 -mb-12 py-10 border-t border-gray-900">
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-12">
        <div>
          <h6 class="text-white font-bold">Risako M</h6>
          <span class="text-sm text-gray-400">May 16, 2021</span>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-12">
        <div class="flex items-center md:justify-end lg:justify-start">
          <div class="flex 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="ml-3 text-white font-bold">5</span>
        </div>
      </div>

<section x-data="{ active: 1, inc: 5, min: 5, max: 25 }" class="py-20 bg-black">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-4/12 xl:w-3/12 px-4">
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-1 gap-6 md:gap-2 lg:gap-6 px-4 lg:pt-28 pb-20 lg:pb-9">
          <div>
            <span class="inline-block font-bold text-transparent bg-clip-text bg-gradient-to-r from-yellow-500 via-green-300 to-blue-500 mb-5">Average Rating</span>
            <div class="flex mb-2 items-center">
              <input class="mr-3" type="checkbox">
              <img src="vendia-assets/images/search/star-light-5.svg" alt="">
            </div>
            <div class="flex mb-2 items-center">
              <input class="mr-3" type="checkbox" checked="">
              <img src="vendia-assets/images/search/star-light-4.svg" alt="">
            </div>
            <div class="flex mb-2 items-center">
              <input class="mr-3" type="checkbox">
              <img src="vendia-assets/images/search/star-light-3.svg" alt="">
            </div>
            <div class="flex mb-2 items-center">
              <input class="mr-3" type="checkbox">
              <img src="vendia-assets/images/search/star-light-2.svg" alt="">
            </div>
            <div class="flex items-center">

<section class="py-12 md:py-24 lg:py-32 bg-black">
  <div class="container mx-auto px-4">
    <div class="max-w-xl mx-auto text-center">
      <h3 class="font-heading text-4xl sm:text-5xl font-bold text-white mb-5">Grab 30% Off Today</h3>
      <p class="text-gray-400 mb-10">Lorem ipsum dolor sit amet, consectetur adipiscing a elit. Nullam to the dictum aliquet accumsan porta lectus ridiculus in these mattis. Netus sodales in volutpat.</p>
      <div class="flex flex-col sm:flex-row flex-wrap sm:items-center sm:justify-center"><a class="inline-block px-7 py-4 mb-3 sm:mb-0 sm:mr-4 text-center font-bold bg-yellow-500 hover:bg-yellow-600 transition duration-200" href="#">Shop &amp; Save Now</a><a class="inline-block px-7 py-4 text-center text-white font-bold bg-gray-900 hover:bg-gray-800 transition duration-200" href="#">Explore All</a></div>
    </div>
  </div>
</section>

<section x-data="{ active: 1 }" class="py-12 bg-black">
  <div class="container mx-auto px-4">
    <nav>
      <ul class="flex items-center justify-center">
        <li class="mr-5"><a x-ref="page1" x-on:click.prevent="active = $refs.page1.textContent" :class="{'text-black bg-gradient-to-br from-yellow-500 via-green-300 to-blue-500': $refs.page1.textContent == active, 'text-white hover:text-black hover:bg-yellow-300': $refs.page1.textContent != active }" class="inline-flex items-center h-6 px-2 text-sm text-black bg-gradient-to-br from-yellow-500 via-green-300 to-blue-500 font-bold" href="#">1</a></li>
        <li class="mr-5"><a x-ref="page2" x-on:click.prevent="active = $refs.page2.textContent" :class="{'text-black bg-gradient-to-br from-yellow-500 via-green-300 to-blue-500': $refs.page2.textContent == active, 'text-white': $refs.page2.textContent != active }" class="inline-flex items-center h-6 px-2 text-sm text-white hover:text-black font-bold hover:bg-yellow-300" href="#">2</a></li>
        <li class="mr-5"><a x-ref="page3" x-on:click.prevent="active = $refs.page3.textContent" :class="{'text-black bg-gradient-to-br from-yellow-500 via-green-300 to-blue-500': $refs.page3.textContent == active, 'text-white': $refs.page3.textContent != active }" class="inline-flex items-center h-6 px-2 text-sm text-white hover:text-black font-bold hover:bg-yellow-300" href="#">3</a></li>
        <li class="mr-5"><a x-ref="page4" x-on:click.prevent="active = $refs.page4.textContent" :class="{'text-black bg-gradient-to-br from-yellow-500 via-green-300 to-blue-500': $refs.page4.textContent == active, 'text-white': $refs.page4.textContent != active }" class="inline-flex items-center h-6 px-2 text-sm text-white hover:text-black font-bold hover:bg-yellow-300" href="#">4</a></li>
        <li><a x-ref="page5" x-on:click.prevent="active = $refs.page5.textContent" :class="{'text-black bg-gradient-to-br from-yellow-500 via-green-300 to-blue-500': $refs.page5.textContent == active, 'text-white': $refs.page5.textContent != active }" class="inline-flex items-center h-6 px-2 text-sm text-white hover:text-black font-bold hover:bg-yellow-300" href="#">5</a></li>
      </ul>
    </nav>
  </div>
</section>

<section>
  <div class="py-4 bg-gradient-to-r from-yellow-500 via-green-300 to-blue-500">
    <div class="container mx-auto px-4">
      <div class="flex items-center justify-center">
        <p class="mr-5 font-medium">This announcement bar can be used to inform visitors of something important.</p>
        <a class="inline-block py-1 px-2 text-sm text-white hover:text-black bg-black hover:bg-white rounded-full transition duration-200" href="#">Dismiss</a>
      </div>
    </div>
  </div>
</section>

<section x-data="{ active: 1, inc: 5, min: 5, max: 25 }" class="py-20 bg-black">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-4/12 xl:w-3/12 px-4">
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-1 gap-6 md:gap-2 lg:gap-6 px-4 lg:pt-28 pb-20 lg:pb-9">
          <div>
            <h6 class="font-bold text-white mb-5">Average Rating</h6>
            <div class="flex mb-2 items-center">
              <input class="mr-3" type="checkbox">
              <img src="vendia-assets/images/search/stars5.svg" alt="">
            </div>
            <div class="flex mb-2 items-center">
              <input class="mr-3" type="checkbox" checked="">
              <img src="vendia-assets/images/search/stars4.svg" alt="">
            </div>
            <div class="flex mb-2 items-center">
              <input class="mr-3" type="checkbox">
              <img src="vendia-assets/images/search/stars3.svg" alt="">
            </div>
            <div class="flex mb-2 items-center">
              <input class="mr-3" type="checkbox">
              <img src="vendia-assets/images/search/stars2.svg" alt="">
            </div>
            <div class="flex items-center">

<section class="py-12 md:py-24 lg:pb-32 bg-black" x-data="{ deliveryMethod: '' }" x-init="deliveryMethod = $refs.standard.textContent">
  <div class="container mx-auto px-4">
    <div class="max-w-md lg:max-w-lg xl:max-w-none mx-auto">
      <h3 class="font-heading text-4xl text-white font-bold mb-12">Checkout</h3>
      <div class="flex flex-wrap -mx-4">
        <div class="w-full xl:w-1/2 px-4 mb-8 xl:mb-0">
          <div class="max-w-2xl">
            <form action="">
              <div class="mb-10 pb-12 border-b border-blueGray-800">
                <h6 class="font-bold text-white mb-6">Contact Information</h6>
                <div class="pb-12 mb-8 border-b border-blueGray-800">
                  <label class="block mb-2 text-gray-400 text-sm font-medium" for="">Email Address</label>
                  <input class="h-10 w-full px-4 py-2 text-sm text-gray-400 border border-blueGray-800 bg-transparent outline-none" type="email">
                </div>
                <h6 class="font-bold text-white mb-6">Contact Information</h6>
                <div class="flex flex-wrap -mx-2 mb-6">
                  <div class="w-full md:w-1/2 px-2 mb-6 md:mb-0">
                    <label class="block mb-2 text-gray-400 text-sm font-medium" for="">First Name</label>
                    <input class="h-10 w-full px-4 py-2 text-sm text-gray-400 border border-blueGray-800 bg-transparent outline-none" type="text">
                  </div>
                  <div class="w-full md:w-1/2 px-2">
                    <label class="block mb-2 text-gray-400 text-sm font-medium" for="">Last Name</label>
                    <input class="h-10 w-full px-4 py-2 text-sm text-gray-400 border border-blueGray-800 bg-transparent outline-none" type="text">
                  </div>

<section class="py-12 md:py-24 lg:pb-32 bg-black" x-data="{ deliveryMethod: '' }" x-init="deliveryMethod = $refs.standard.textContent">
  <div class="container mx-auto px-4">
    <div class="max-w-md lg:max-w-lg xl:max-w-none mx-auto">
      <h3 class="font-heading text-4xl text-white font-bold mb-12">Checkout</h3>
      <div class="flex flex-wrap -mx-4">
        <div class="w-full xl:w-1/2 px-4 mb-8 xl:mb-0">
          <div class="max-w-2xl">
            <form action="">
              <div class="mb-10 pb-12 border-b border-blueGray-800">
                <h6 class="font-bold text-white mb-6">Contact Information</h6>
                <div class="pb-12 mb-8 border-b border-blueGray-800">
                  <label class="block mb-2 text-gray-400 text-sm font-medium" for="">Email Address</label>
                  <input class="h-10 w-full px-4 py-2 text-sm text-gray-400 border border-blueGray-800 bg-transparent outline-none" type="email">
                </div>
                <h6 class="font-bold text-white mb-6">Contact Information</h6>
                <div class="flex flex-wrap -mx-2 mb-6">
                  <div class="w-full md:w-1/2 px-2 mb-6 md:mb-0">
                    <label class="block mb-2 text-gray-400 text-sm font-medium" for="">First Name</label>
                    <input class="h-10 w-full px-4 py-2 text-sm text-gray-400 border border-blueGray-800 bg-transparent outline-none" type="text">
                  </div>
                  <div class="w-full md:w-1/2 px-2">
                    <label class="block mb-2 text-gray-400 text-sm font-medium" for="">Last Name</label>
                    <input class="h-10 w-full px-4 py-2 text-sm text-gray-400 border border-blueGray-800 bg-transparent outline-none" type="text">
                  </div>

<section class="py-12 md:py-24 lg:py-32 bg-black">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -mx-4 mb-20">
      <div class="w-full lg:w-1/3 px-4 mb-8 lg:mb-0">
        <div class="max-w-md mx-auto h-full flex flex-col px-10 pt-8 pb-12 bg-blueGray-900">
          <h4 class="text-4xl text-white font-bold mb-3">
            <span class="block">100% Quality</span>
            <span>checked</span>
          </h4>
          <span class="font-medium text-gray-400">Reliable</span>
          <div class="mt-auto pt-8 flex justify-end">
            <div class="inline-flex w-32 lg:w-40 h-32 lg:h-40 items-center justify-center bg-yellow-500 rounded-full">
              <svg width="56" height="64" viewBox="0 0 56 64" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M53.6668 15.9583L28.0002 3.125L2.3335 15.9583M53.6668 15.9583L28.0002 28.7917M53.6668 15.9583V48.0417L28.0002 60.875M28.0002 28.7917L2.3335 15.9583M28.0002 28.7917V60.875M2.3335 15.9583V48.0417L28.0002 60.875" stroke="black" stroke-width="4.5" stroke-linejoin="round"></path>
              </svg>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/3 px-4 mb-8 lg:mb-0">
        <div class="max-w-md mx-auto h-full flex flex-col px-10 pt-8 pb-12 bg-blueGray-900">
          <h4 class="text-4xl text-white font-bold mb-3">
            <span class="block">Get Instant</span>
            <span>support all day.</span>