	<div class="pb-7">
		<div class="bg-white">
			<div class="container mx-auto flex justify-between max-w-sm px-3 sm:px-0 pt-3">
				<div class="flex flex-col pl-3">
					<span class="font-medium text-lg Montserrat">Hello</span>
					<span class="text-[10px] Montserrat">Selamat Datang!! </span>
				</div>
				<div>
					<div class="w-[3rem] h-[3rem] flex justify-center items-center rounded-full">
						<img src="<?= base_url() ?>assets/images/ic-sido-only.png" class="w-[1.5rem]">
					</div>
				</div>
			</div>
			<div class="container mx-auto max-w-sm px-3 sm:px-0 pt-3">
				<div class="w-full grid grid-cols-12 gap-x-2">
					<div class=" col-span-10 rounded-md flex justify-center py-1 relative border border-[#FF0000B2]">
						<input type="text" name="search-input" id="search-input" autocomplete="off" class="border-0 outline-none w-9/12 mx-auto text-sm">
						<div class="absolute top-[1px] left-2">
							<i class="fa-solid fa-magnifying-glass"></i>
						</div>
					</div>
					<div class="col-span-2 rounded-md border border-[#FF0000B2] flex justify-center items-center" onclick="window.location.href = '<?= base_url() ?>chat'">
						<img src="<?= base_url() ?>assets/images/ic-chat.svg">
					</div>
				</div>
				<div>
					<p class="font-medium text-sm mt-5 Montserrat">Penawaran Spesial</p>
					<div class="mt-2">
						<div class="swiper mySwiper w-full h-[8rem] rounded-md overflow-hidden">
						    <div class="swiper-wrapper" id="container_slider">
						     <div class="swiper-slide flex justify-center">
						      	<img src="<?= base_url() ?>assets/images/banner-placeholder.png" class="w-full">
						      </div>
						    </div>
						    <div class="swiper-pagination bottom-[20px]"></div>
						</div>
					</div>
				</div>
				<div class="mt-3">
					<div class="bg-[#C40C0C] rounded-xl flex justify-center items-center flex-col py-4">
						<div class=" bg-white rounded-full w-[4rem] h-[4rem] flex flex-col justify-center items-center">
							<img src="<?= base_url() ?>assets/images/ic-service.svg">
						</div>
						<span class="text-center text-[15px] text-white Inter">Jasa</span>
					</div>
				</div>
				<div class="mt-3">
					<div class="grid max-w-sm mx-auto grid-cols-12 gap-x-5 gap-y-4 px-4" id="container">
						<div class="loading-md col-span-12 flex justify-center py-2 mt-5">
							<div>
								<div class="loader"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
