From 518e8ea5def51c0b13da04a2b682da411378407e Mon Sep 17 00:00:00 2001
From: Swadesh Behera <itswadesh@gmail.com>
Date: Thu, 3 Nov 2022 21:22:22 +0530
Subject: [PATCH] fix: nav

---
 package.json                                  |   2 -
 src/hooks.server.ts                           |   8 +-
 src/lib/Nav.svelte                            | 128 +++++++----------
 src/lib/ProductCard.svelte                    |  26 ++--
 src/lib/components/AnimatedCartItem.svelte    |  10 +-
 src/lib/components/Breadcrumb.svelte          |   2 +-
 src/lib/home/CategoriesMobile.svelte          |  10 +-
 src/lib/home/Hero.svelte                      | 110 +++++----------
 src/routes/(app)/+page.server.ts              |   4 +
 src/routes/(app)/+page.svelte                 |  36 +----
 src/routes/(app)/autosuggest/+page.server.ts  |   4 +-
 src/routes/(app)/cart/+page.svelte            |  40 ++++--
 src/routes/(app)/product/[slug]/+page.svelte  |  64 +++++----
 .../product/[slug]/_DeliveryOptions.svelte    | 130 ++++++++++++------
 static/product/non-veg.png                    | Bin 0 -> 622 bytes
 static/product/veg.png                        | Bin 0 -> 618 bytes
 tailwind.config.cjs                           |   9 +-
 17 files changed, 297 insertions(+), 286 deletions(-)
 create mode 100644 static/product/non-veg.png
 create mode 100644 static/product/veg.png

diff --git a/package.json b/package.json
index c968ac53..f4c755a0 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,6 @@
 		"cookie": "^0.5.0",
 		"cookie-universal": "^2.2.2",
 		"cssnano": "^5.1.13",
-		"daisyui": "^2.31.0",
 		"eslint": "^8.25.0",
 		"eslint-config-prettier": "^8.5.0",
 		"eslint-plugin-svelte3": "^4.0.0",
@@ -42,7 +41,6 @@
 		"svelte-check": "^2.9.2",
 		"svelte-confetti": "^1.2.0",
 		"svelte-preprocess": "^4.10.7",
-		"svelte-select": "^4.4.7",
 		"svelte-timeago": "0.1.2",
 		"svelte-toasts": "^1.1.2",
 		"tailwind-scrollbar": "2.1.0-preview.0",
diff --git a/src/hooks.server.ts b/src/hooks.server.ts
index 5b09702d..cf3b2a60 100644
--- a/src/hooks.server.ts
+++ b/src/hooks.server.ts
@@ -94,7 +94,9 @@ export const handle: Handle = async ({ event, resolve }) => {
 			closed: false,
 			closeMessage: '',
 			isFnb: false,
-			searchbarText
+			searchbarText,
+			weightUnit: 'g',
+			dimentionUnit: 'cm'
 		}
 		if (!cookieStore || cookieStore === 'undefined') {
 			const url = new URL(event.request.url)
@@ -125,7 +127,9 @@ export const handle: Handle = async ({ event, resolve }) => {
 				GOOGLE_CLIENT_ID: storeOne.GOOGLE_CLIENT_ID,
 				GOOGLE_ANALYTICS_ID: storeOne.GOOGLE_ANALYTICS_ID,
 				isFnb: storeOne.isFnb,
-				searchbarText: storeOne.searchbarText
+				searchbarText: storeOne.searchbarText,
+				weightUnit: storeOne.weightUnit,
+				dimentionUnit: storeOne.dimentionUnit
 			}
 			event.cookies.set('store', JSON.stringify(store), { path: '/' })
 		} else {
diff --git a/src/lib/Nav.svelte b/src/lib/Nav.svelte
index 0716aa6b..83b8e68c 100644
--- a/src/lib/Nav.svelte
+++ b/src/lib/Nav.svelte
@@ -5,33 +5,34 @@
 </style>
 
 <script lang="ts">
-import { getAPI, post } from '$lib/util/api'
+import { createEventDispatcher, getContext, onMount } from 'svelte'
+import { cubicOut } from 'svelte/easing'
 import { currency, toast } from '$lib/util'
+import { fade, fly, slide } from 'svelte/transition'
+import { getAPI, post } from '$lib/util/api'
 import { goto, invalidateAll } from '$app/navigation'
+import { logo } from './config'
 import { page } from '$app/stores'
-import { fade, fly, slide } from 'svelte/transition'
-import { cubicOut } from 'svelte/easing'
-import { createEventDispatcher, getContext, onMount } from 'svelte'
-import Select from 'svelte-select'
-// import 'svelte-select/tailwind.css'
+import { settings } from './store'
+import Autocomplete from '$lib/components/Autocomplete/Autocomplete.svelte'
+import Cookie from 'cookie-universal'
 import Item from '$lib/AutocompleteItem.svelte'
-import PrimaryButton from './ui/PrimaryButton.svelte'
 import LazyImg from './components/Image/LazyImg.svelte'
 import MegaMenu from './components/MegaMenu.svelte'
-import WhiteButton from './ui/WhiteButton.svelte'
 import menu from '$lib/config/menu'
-import { settings } from './store'
-// import { store.logo } from './config'
+import PrimaryButton from './ui/PrimaryButton.svelte'
+import WhiteButton from './ui/WhiteButton.svelte'
 
 const dispatch = createEventDispatcher()
+const cookies = Cookie()
+
+export let me, cart, data, showCartSidebar, openSidebar, store
 
-export let me, cart, showCartSidebar, openSidebar
-let selectTarget = null
 let q = ''
-let typingTimer
 let showDropdownAccount = false
 let loadingForDeleteItemFromCart = []
 let categories
+
 // if (cart) cart = JSON.parse(cart)
 
 // export const signOut = async () => {
@@ -93,37 +94,18 @@ function slideFade(node, params) {
 	}
 }
 
-async function onSearch(filterText) {
-	try {
-		const res = await getAPI(
-			`es/autocomplete?q=${filterText}&store=${$page.data.store?.id}`,
-			$page.data.origin
-		)
-		const hits = res?.data?.hits?.hits
-		let data = []
-		if (hits) {
-			data = hits.map((h) => {
-				return { name: h._source.name, slug: h._source.slug, type: h._source.type }
-			})
-		}
-		return data || []
-	} catch (e) {
-		console.log('err....', e)
-	}
-}
-
-function enterPressedOnSearch() {
-	// console.log('enterPressedOnSearch.................')
-}
-
 async function onSearchSubmit({ detail }) {
-	// console.log('on search submit................')
-	let u = new URL('/search', $page.data.origin)
+	let newUrl
+
 	if (detail.type === 'category') {
-		u = new URL(`/${detail.slug}`, $page.data.origin)
+		const u = new URL(`/${detail.slug}`, $page.data.origin)
+		newUrl = u.toString()
+	} else {
+		const u = new URL('/search', $page.data.origin)
+		u.searchParams.set('q', detail?.name)
+		newUrl = u.toString() + '&sort=price'
 	}
-	u.searchParams.set('q', detail?.name)
-	let newUrl = u.toString() + '&sort=price'
+
 	goto(newUrl)
 	dispatch('search', detail)
 }
@@ -168,10 +150,8 @@ const removeItemFromCart = async ({ pid, qty, customizedImg, ix }: any) => {
 		// $page.data.cart = res
 
 		// await refreshCart()
-		// console.log('zzzzzzzzzzzzzzzzzzzzzzzzzzz', res)
 		await invalidateAll()
 	} catch (e) {
-		// console.log('zzzzzzzzzzzzzzzzzzzzzzzzzzz', e)
 	} finally {
 		loadingForDeleteItemFromCart[ix] = false
 	}
@@ -184,7 +164,7 @@ const getSelectionLabel = (option) => option.name
 
 <nav
 	class="minimum-width-rem fixed inset-x-0 top-0 h-14 sm:h-20 w-full flex items-center justify-center border-b bg-white px-3 shadow-md sm:px-10
-{showCartSidebar ? 'z-50 ' : 'z-40 delay-500'}">
+	{showCartSidebar ? 'z-50 ' : 'z-40 delay-500'}">
 	<div class="flex w-full items-center justify-between gap-4 lg:gap-8">
 		<div class="flex items-center gap-4">
 			<!-- Back button -->
@@ -210,8 +190,8 @@ const getSelectionLabel = (option) => option.name
 			{/if}
 			<!-- Logo -->
 			<a class="block flex-shrink-0" href="/" aria-label="Click to route home">
-				<LazyImg
-					src="{$page.data.store?.logo}"
+				<img
+					src="{logo}"
 					alt=" "
 					class="h-auto max-h-10 sm:max-h-16 w-32 object-contain object-center" />
 			</a>
@@ -225,39 +205,11 @@ const getSelectionLabel = (option) => option.name
 
 		<!-- Search box -->
 
-		<form
-			class="form-control relative z-50 hidden w-full min-w-min max-w-4xl flex-1 lg:block"
-			on:submit|preventDefault="{enterPressedOnSearch}"
-			bind:this="{selectTarget}">
-			<!-- <button
-				type="submit"
-				aria-label="Click here to search input data"
-				class="absolute inset-y-0 left-0 z-[60] hidden h-full w-10 flex-shrink-0 cursor-default items-center justify-center focus:outline-none sm:flex">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="h-5 w-5 text-gray-500"
-					viewBox="0 0 20 20"
-					fill="currentColor">
-					<path
-						fill-rule="evenodd"
-						d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
-						clip-rule="evenodd"></path>
-				</svg>
-			</button> -->
-			<Select
-				appendListTarget="{selectTarget}"
-				loadOptions="{onSearch}"
-				optionIdentifier="{optionIdentifier}"
-				getSelectionLabel="{getSelectionLabel}"
-				getOptionLabel="{getOptionLabel}"
-				Item="{Item}"
-				hideEmptyState
+		<div class="hidden w-full min-w-min max-w-4xl flex-1 lg:block">
+			<Autocomplete
 				placeholder="{$page?.data?.store?.searchbarText || 'Search...'}"
-				inputStyles="cursor: text"
-				on:select="{onSearchSubmit}" />
-
-			<!-- padding-left: 40px; -->
-		</form>
+				on:search="{onSearchSubmit}" />
+		</div>
 
 		<div class="flex items-center gap-4 lg:gap-8">
 			<!-- Search -->
@@ -366,10 +318,22 @@ const getSelectionLabel = (option) => option.name
 												</a>
 
 												<div class="flex flex-1 flex-col gap-1">
-													<a
-														href="/product/{item.slug}"
-														class="text-sm leading-4"
-														on:click="{() => (showCartSidebar = false)}">{item.name}</a>
+													<div class="flex gap-2 justify-between">
+														<a
+															href="/product/{item.slug}"
+															class="flex-1 text-sm leading-4"
+															on:click="{() => (showCartSidebar = false)}">{item.name}</a>
+
+														{#if $page?.data?.store?.isFnb && item.foodType}
+															<div>
+																{#if item.foodType === 'veg'}
+																	<img src="/product/veg.png" alt="veg" class="h-5 w-5" />
+																{:else if item.foodType === 'nonveg'}
+																	<img src="/product/non-veg.png" alt="non veg" class="h-5 w-5" />
+																{/if}
+															</div>
+														{/if}
+													</div>
 
 													<div class="flex flex-wrap items-center gap-1">
 														<span>
diff --git a/src/lib/ProductCard.svelte b/src/lib/ProductCard.svelte
index 8f7ee123..80d86bc6 100644
--- a/src/lib/ProductCard.svelte
+++ b/src/lib/ProductCard.svelte
@@ -108,7 +108,7 @@ async function toggleWishlist(id) {
 
 		<div class="h-auto w-full">
 			<LazyImg
-				src="{product.img}"
+				src="{product.imgCdn || product.img}"
 				alt="{product.name}"
 				width="192"
 				class="h-full w-full object-contain object-bottom text-xs" />
@@ -144,13 +144,21 @@ async function toggleWishlist(id) {
 				href="/product/{product.slug}"
 				aria-label="Click to view the product details"
 				data-sveltekit-prefetch>
-				<h2 class="text-sm line-clamp-2 group-hover:underline">
-					{#if product.name}
-						{product.name}
-					{:else}
-						_
+				<div class="flex gap-2 justify-between">
+					<h2 class="flex-1 text-sm line-clamp-2 group-hover:underline">
+						{product.name || '_'}
+					</h2>
+
+					{#if $page?.data?.store?.isFnb && product.foodType}
+						<div>
+							{#if product.foodType === 'veg'}
+								<img src="/product/veg.png" alt="veg" class="h-5 w-5" />
+							{:else if product.foodType === 'nonveg'}
+								<img src="/product/non-veg.png" alt="non veg" class="h-5 w-5" />
+							{/if}
+						</div>
 					{/if}
-				</h2>
+				</div>
 			</a>
 		</div>
 
@@ -159,7 +167,7 @@ async function toggleWishlist(id) {
 			aria-label="Click to view the product details"
 			data-sveltekit-prefetch>
 			<div class="mt-2.5 flex flex-wrap items-baseline justify-start leading-4 text-xs gap-1.5">
-				<span class="font-semibold sm:text-sm whitespace-nowrap">
+				<span class="font-bold text-sm sm:text-base whitespace-nowrap">
 					{product.formattedPrice}
 				</span>
 
@@ -234,7 +242,7 @@ async function toggleWishlist(id) {
 
 								<div class="h-auto w-full">
 									<LazyImg
-										src="{relatedProduct.img}"
+										src="{relatedProduct.imgCdn}"
 										alt="{relatedProduct.name}"
 										width="192"
 										class="h-full w-full object-contain object-bottom" />
diff --git a/src/lib/components/AnimatedCartItem.svelte b/src/lib/components/AnimatedCartItem.svelte
index fdbcfde8..47b7c851 100644
--- a/src/lib/components/AnimatedCartItem.svelte
+++ b/src/lib/components/AnimatedCartItem.svelte
@@ -10,9 +10,13 @@ export let img = ''
 	<span
 		in:fly="{{ y: -200, delay: 0, duration: 1500, easing: elasticInOut }}"
 		out:fade="{{ delay: 0, duration: 500 }}"
-		class="flex w-56 items-center justify-start rounded bg-gray-800 px-4 py-3 text-center text-sm text-white shadow">
-		<LazyImg src="{img}" alt="" width="32" height="32" class="mr-1 h-8 w-8 rounded object-cover" />
+		class="flex max-w-max items-center ounded bg-gray-800 px-4 py-3 text-center text-sm text-white rounded-md shadow-md">
+		<LazyImg
+			src="{img}"
+			alt=""
+			height="56"
+			class="h-14 w-auto rounded-md object-contain object-center" />
 
-		<div class="w-full">Added to bag</div>
+		<div class="flex-1 px-5">Added to Bag</div>
 	</span>
 </div>
diff --git a/src/lib/components/Breadcrumb.svelte b/src/lib/components/Breadcrumb.svelte
index 6ed2a442..6e958c15 100644
--- a/src/lib/components/Breadcrumb.svelte
+++ b/src/lib/components/Breadcrumb.svelte
@@ -39,7 +39,7 @@ export { clazz as class }
 	{#each categoryPool as d}
 		<li class="flex items-center">
 			<a
-				href="/{d.slug}&sort=-createdAt"
+				href="/{d.slug}?sort=-createdAt"
 				aria-label="Click to go inside this page"
 				class="first-letter:uppercase hover:text-primary-500 hover:underline">
 				{d.name}
diff --git a/src/lib/home/CategoriesMobile.svelte b/src/lib/home/CategoriesMobile.svelte
index d783cb78..92aad75a 100644
--- a/src/lib/home/CategoriesMobile.svelte
+++ b/src/lib/home/CategoriesMobile.svelte
@@ -24,7 +24,7 @@ let categoryColors = [
 
 <div class="{clazz} max-w-screen">
 	{#if loading}
-		<div class="overflow-x-auto p-3 py-5 scrollbar-none sm:px-10">
+		<div class="overflow-x-auto p-3 py-5 scrollbar-none sm:px-10 w-screen">
 			<div class="container mx-auto flex items-start justify-start gap-4">
 				{#each { length: 8 } as _}
 					<div class="flex flex-col items-center">
@@ -36,19 +36,19 @@ let categoryColors = [
 			</div>
 		</div>
 	{:else if categories && categories.length}
-		<div class="overflow-x-auto py-5 scrollbar-none sm:px-10">
+		<div class="overflow-x-auto py-5 scrollbar-none sm:px-10 w-screen">
 			<div class="flex items-center pl-3">
 				{#each categories as category}
-					{#if category.imgCdn}
+					{#if category.imgCdn || category.img}
 						<div class="pr-3">
 							<a
-								href="/{category.slug}"
+								href="/{category.link || category.slug}"
 								aria-label="Click to view related products of this category"
 								class="group flex w-16 flex-col items-center justify-center">
 								<div
 									class="mb-1 h-16 w-16 flex-shrink-0 overflow-hidden rounded-full shadow-md group-hover:border-primary-500 group-hover:shadow-xl sm:mb-4">
 									<LazyImg
-										src="{category.imgCdn}"
+										src="{category.imgCdn || category.img}"
 										alt="{category.name}"
 										width="64"
 										height="64"
diff --git a/src/lib/home/Hero.svelte b/src/lib/home/Hero.svelte
index 70a87164..792e2829 100644
--- a/src/lib/home/Hero.svelte
+++ b/src/lib/home/Hero.svelte
@@ -1,5 +1,6 @@
 <script>
 import LazyImg from '$lib/components/Image/LazyImg.svelte'
+import { onMount } from 'svelte'
 
 export let banners = []
 
@@ -10,6 +11,12 @@ $: sliderBanners = banners?.filter((b) => {
 $: sliderBannersMobile = banners?.filter((b) => {
 	return b.type === 'slider' && b.isMobile === true
 })
+
+let Carousel
+onMount(async () => {
+	const RTEmodule = await import('$lib/components/TwECarousel.svelte')
+	Carousel = RTEmodule.default
+})
 </script>
 
 <!-- <div class="w-full overflow-hidden">
@@ -24,85 +31,40 @@ $: sliderBannersMobile = banners?.filter((b) => {
 </div> -->
 
 {#if sliderBanners?.length > 0}
-	<div class="relative mx-auto hidden h-auto w-full overflow-hidden bg-white sm:block">
-		<div class="carousel">
-			{#each sliderBanners as b, bx}
-				<div id="{`slide${bx}`}" role="banner" class="carousel-item relative h-auto w-full">
-					{#if b.imgCdn}
-						<a href="{b.link}" sveltekit:prefetch class="h-auto w-full">
-							<LazyImg
-								src="{b.imgCdn}"
-								alt="{b.name}"
-								width="1500"
-								height="380"
-								class="h-auto w-full object-contain object-top" />
-						</a>
-					{/if}
-				</div>
-
-				<div class="absolute left-5 right-5 top-1/2 flex justify-between">
-					<!-- Previous slide button -->
-
-					{#if bx != 0}
-						<a
-							href="{`#slide${bx - 1}`}"
-							aria-label="Click for previous slide"
-							class="absolute left-5 z-10 -mt-3.5 hidden items-center justify-center rounded-full bg-white bg-opacity-50 p-2 text-gray-800 transition duration-300 hover:bg-opacity-70 sm:flex">
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								class="h-5 w-5"
-								fill="none"
-								viewBox="0 0 24 24"
-								stroke="currentColor"
-								stroke-width="2">
-								<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"></path>
-							</svg>
-						</a>
-					{/if}
-
-					<!-- Next slide button -->
-
-					{#if bx + 1 < sliderBanners?.length}
-						<a
-							href="{`#slide${bx + 1}`}"
-							aria-label="Click for next slide"
-							class="absolute right-5 z-10 -mt-3.5 hidden items-center justify-center rounded-full bg-white bg-opacity-50 p-2 text-gray-800 transition duration-300 hover:bg-opacity-70 sm:flex">
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								class="h-5 w-5"
-								fill="none"
-								viewBox="0 0 24 24"
-								stroke="currentColor"
-								stroke-width="2">
-								<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"></path>
-							</svg>
-						</a>
-					{/if}
-				</div>
+	<div class="relative mt-20 mx-auto hidden h-auto w-full overflow-hidden bg-white sm:block">
+		<svelte:component this="{Carousel}">
+			{#each sliderBanners as b, ix}
+				{#if b.imgCdn}
+					<a
+						href="{b.link}"
+						data-sveltekit-prefetch
+						class="h-auto carousel-item  relative float-left w-full {ix == 0 ? 'active' : ''}">
+						<img
+							src="{b.imgCdn}"
+							alt="{b.name}"
+							class="block h-auto w-full object-contain object-top" />
+					</a>
+				{/if}
 			{/each}
-		</div>
+		</svelte:component>
 	</div>
 {/if}
 
 {#if sliderBannersMobile?.length > 0}
 	<div class="mx-auto block h-auto w-full overflow-hidden bg-white sm:hidden">
-		{#if sliderBannersMobile?.length > 0}
-			<div class="carousel">
-				{#each sliderBannersMobile as b, bx}
-					<div id="{`slide${bx}`}" role="banner" class="carousel-item h-auto w-full">
-						{#if b.imgCdn}
-							<a href="{b.link}" class="h-auto w-full" data-sveltekit-prefetch>
-								<LazyImg
-									src="{b.imgCdn}"
-									alt="{b.alt || ''}"
-									width="360"
-									height="190"
-									class="h-auto w-full object-contain object-top" />
-							</a>
-						{/if}
-					</div>
-				{/each}
-			</div>
-		{/if}
+		<svelte:component this="{Carousel}">
+			{#each sliderBannersMobile as b, ix}
+				{#if b.imgCdn}
+					<a
+						href="{b.link}"
+						class="h-auto carousel-item  relative float-left w-full {ix == 0 ? 'active' : ''}">
+						<img
+							src="{b.imgCdn}"
+							alt="{b.name}"
+							class="block h-auto w-full object-contain object-top" />
+					</a>
+				{/if}
+			{/each}
+		</svelte:component>
 	</div>
 {/if}
diff --git a/src/routes/(app)/+page.server.ts b/src/routes/(app)/+page.server.ts
index d7497d4b..2c30f7a7 100644
--- a/src/routes/(app)/+page.server.ts
+++ b/src/routes/(app)/+page.server.ts
@@ -1,12 +1,16 @@
 import { DOMAIN, HTTP_ENDPOINT } from '$lib/config'
 import { gett } from '$lib/utils'
 import { error } from '@sveltejs/kit'
+
 export async function load({ params, query, locals, parent, cookies, request }) {
 	const { store } = locals
+
 	try {
 		const home = await gett(`home?store=${store?.id}`, request.headers.get('cookie'))
+		// const deals = await gett(`deals?store=${store?.id}`, request.headers.get('cookie'))
 		if (home) {
 			return { home: home }
+			// deals: deals
 		}
 	} catch (e) {
 		throw error(
diff --git a/src/routes/(app)/+page.svelte b/src/routes/(app)/+page.svelte
index cf47acb2..49c684fa 100644
--- a/src/routes/(app)/+page.svelte
+++ b/src/routes/(app)/+page.svelte
@@ -38,31 +38,9 @@ const seoProps = {
 	}
 }
 
-onMount(async () => {
-	// await getHome()
-})
-
 $: heroBanners = data.home?.banners?.data.filter((b) => {
 	return b.type === 'hero'
 })
-
-// let home
-// async function getHome() {
-// 	if (browser) {
-// 		try {
-// 			const localHome = localStorage.getItem('home')
-// 			if (!localHome) {
-// 				const res = await getAPI(`home?store=${$page.data?.store?.id}`)
-// 				home = res
-// 			} else {
-// 				home = JSON.parse(localHome)
-// 			}
-// 		} catch (e) {
-// 			toast(e, 'error')
-// 		} finally {
-// 		}
-// 	}
-// }
 </script>
 
 <SEO {...seoProps} />
@@ -88,7 +66,7 @@ $: heroBanners = data.home?.banners?.data.filter((b) => {
 		<!-- TOP CATEGORIES -->
 
 		{#if data.home?.categories?.data?.length > 0}
-			<div class="mb-5 sm:mb-10">
+			<div class="mb-5 sm:mb-10 hidden sm:block">
 				<h1
 					class="p-3 py-5 text-center font-serif text-xl font-medium tracking-wider sm:px-10 sm:text-2xl md:py-10 md:text-3xl xl:text-4xl uppercase">
 					TOP CATEGORIES
@@ -97,13 +75,13 @@ $: heroBanners = data.home?.banners?.data.filter((b) => {
 				<div class="max-w-screen overflow-x-auto scrollbar-none lg:hidden">
 					<div class="flex flex-row">
 						{#each data.home?.categories?.data as category}
-							{#if category?.img}
+							{#if category?.imgCdn || category?.img}
 								<a
-									href="{category.link}"
+									href="/{category.link || category.slug}"
 									aria-label="Click to get the category related products"
 									class="flex-shrink-0">
 									<LazyImg
-										src="{category.img}"
+										src="{category.imgCdn || category.img}"
 										alt=""
 										width="375"
 										class="w-[47vw] object-contain sm:w-60" />
@@ -115,13 +93,13 @@ $: heroBanners = data.home?.banners?.data.filter((b) => {
 
 				<div class="hidden grid-cols-7 lg:grid">
 					{#each data.home?.categories?.data as category}
-						{#if category?.img}
+						{#if category?.imgCdn || category?.img}
 							<a
-								href="{category.link}"
+								href="/{category.link || category.slug}"
 								aria-label="Click to get the category related products"
 								class="col-span-1">
 								<LazyImg
-									src="{category.img}"
+									src="{category.imgCdn || category.img}"
 									alt=""
 									width="375"
 									class="h-full w-full object-contain" />
diff --git a/src/routes/(app)/autosuggest/+page.server.ts b/src/routes/(app)/autosuggest/+page.server.ts
index 08c3de58..1fced6d4 100644
--- a/src/routes/(app)/autosuggest/+page.server.ts
+++ b/src/routes/(app)/autosuggest/+page.server.ts
@@ -2,13 +2,13 @@ import { getAPI } from '$lib/util/api'
 import { gett } from '$lib/utils'
 import { error } from '@sveltejs/kit'
 
-export async function load({ params, parent, cookies }) {
+export async function load({ params, parent, locals }) {
 	const { store } = await parent()
 	const { slug } = params
 	let categories = null
 
 	try {
-		categories = await gett(`categories?featured=true`)
+		categories = await gett(`categories?store=${locals.store.id}&featured=true`)
 
 		if (!categories) throw error(404, 'categories not found')
 		// cookies.set('cache-control', 'public, max-age=200')
diff --git a/src/routes/(app)/cart/+page.svelte b/src/routes/(app)/cart/+page.svelte
index 62aeb24a..d94aab3c 100644
--- a/src/routes/(app)/cart/+page.svelte
+++ b/src/routes/(app)/cart/+page.svelte
@@ -20,8 +20,6 @@ const cookies = Cookie()
 
 export let data
 
-// console.log('zzzzzzzzzzzzzzzzzz', data)
-
 // $: ({ loadingCart, cart = {} } = data)
 
 let seoProps = {
@@ -290,12 +288,24 @@ async function refreshCart() {
 												</a>
 
 												<div class="w-full flex-1">
-													<a
-														href="{`${item?.slug}`}"
-														aria-label="Click to route product details"
-														class="mb-2 cursor-pointer text-base font-medium text-gray-600 hover:underline sm:text-lg">
-														{item?.name}
-													</a>
+													<div class="flex mb-2 justify-between">
+														<a
+															href="/product/{item?.slug}"
+															aria-label="Click to route product details"
+															class="flex-1 cursor-pointer text-base font-medium text-gray-600 hover:underline sm:text-lg">
+															{item?.name}
+														</a>
+
+														{#if $page?.data?.store?.isFnb && item.foodType}
+															<div>
+																{#if item.foodType === 'veg'}
+																	<img src="/product/veg.png" alt="veg" class="h-5 w-5" />
+																{:else if item.foodType === 'nonveg'}
+																	<img src="/product/non-veg.png" alt="non veg" class="h-5 w-5" />
+																{/if}
+															</div>
+														{/if}
+													</div>
 
 													<div class="mb-2 flex flex-wrap items-center gap-2 text-sm sm:text-base">
 														<span class="text-lg font-bold sm:text-xl whitespace-nowrap">
@@ -350,15 +360,23 @@ async function refreshCart() {
 										</a>
 
 										<div class="w-full flex-1">
-											<div class="flex flex-wrap items-center justify-between">
+											<div class="flex mb-2 justify-between">
 												<a
 													href="/product/{item?.slug}"
 													aria-label="Click to route product details"
-													class="mb-2 cursor-pointer text-base font-medium text-gray-600 hover:underline sm:text-lg">
+													class="flex-1 cursor-pointer text-base font-medium text-gray-600 hover:underline sm:text-lg">
 													{item?.name}
 												</a>
 
-												<!-- <h2 class="text-base sm:text-lg whitespace-nowrap">Arrives in 4 days</h2> -->
+												{#if $page?.data?.store?.isFnb && item.foodType}
+													<div>
+														{#if item.foodType === 'veg'}
+															<img src="/product/veg.png" alt="veg" class="h-5 w-5" />
+														{:else if item.foodType === 'nonveg'}
+															<img src="/product/non-veg.png" alt="non veg" class="h-5 w-5" />
+														{/if}
+													</div>
+												{/if}
 											</div>
 
 											<!-- <h5 class="text-gray-600">{item.product?.vendor_name}</h5> -->
diff --git a/src/routes/(app)/product/[slug]/+page.svelte b/src/routes/(app)/product/[slug]/+page.svelte
index e950f4e5..f430bb33 100644
--- a/src/routes/(app)/product/[slug]/+page.svelte
+++ b/src/routes/(app)/product/[slug]/+page.svelte
@@ -97,7 +97,7 @@ let moreOptions = [
 let showReviewsCount = 1
 let isLastReview = false
 let shake = false
-let selectedOptions = {}
+let selectedOptions = []
 let showPhotosModal = false
 let loadingForWishlist = false
 let isWislisted = false
@@ -161,7 +161,7 @@ async function addToBag(p, customizedImg, customizedJson) {
 				pid: p._id,
 				vid: p._id,
 				qty: 1,
-				options: p.options,
+				options: selectedOptions,
 				customizedImg: customizedImg,
 				customizedData: customizedJson,
 				store: $page.data.store.id
@@ -263,7 +263,6 @@ function optionChanged(o) {
 	// console.log('oooooooooooooooooo', o)
 	// console.log('dddddddddddddd', o1)
 
-	this.selectedOptions = o1
 	//   if (!this.selectedOptions) this.selectedOptions = []
 	//   for (const i in o) {
 	//     this.selectedOptions.push({ option: i, values: [o[i]] })
@@ -275,8 +274,9 @@ function optionChanged(o) {
 	// dateChanged(o) {
 	//   if (!this.selectedOptions) this.selectedOptions = []
 	//   this.selectedOptions.push(o)
+	selectedOptions = o1
 
-	//   console.log('zzzzzzzzzzzzzzzzzzzzzzzzzzz', this.selectedOptions)
+	// console.log('zzzzzzzzzzzzzzzzzz', data.product.options)
 }
 
 async function toggleWishlist(id) {
@@ -351,8 +351,8 @@ function handleMobileCanvas() {
 				{#if !data.product?.isCustomized}
 					<div
 						class="flex w-full grid-cols-2 flex-row gap-2 overflow-x-scroll scrollbar-none md:grid">
-						{#if data?.product?.images?.length}
-							{#each data.product?.images as imgCdn}
+						{#if data?.product?.imagesCdn?.length}
+							{#each data.product?.imagesCdn as imgCdn}
 								<button
 									type="button"
 									class="w-full flex-shrink-0 cursor-zoom-in overflow-hidden rounded md:h-full md:w-full md:flex-shrink"
@@ -430,9 +430,21 @@ function handleMobileCanvas() {
 				<!-- Name -->
 
 				{#if data.product?.name}
-					<p class="mb-2 text-lg text-gray-500">
-						{data.product?.name}
-					</p>
+					<div class="mb-2 flex justify-between gap-2">
+						<h1 class="flex-1 text-lg text-gray-500">
+							{data.product?.name}
+						</h1>
+
+						{#if $page?.data?.store?.isFnb && data.product.foodType}
+							<div>
+								{#if data.product.foodType === 'veg'}
+									<img src="/product/veg.png" alt="veg" class="h-5 w-5" />
+								{:else if data.product.foodType === 'nonveg' || data.product.foodType === 'E'}
+									<img src="/product/non-veg.png" alt="non veg" class="h-5 w-5" />
+								{/if}
+							</div>
+						{/if}
+					</div>
 				{/if}
 
 				<!-- ratings -->
@@ -465,16 +477,16 @@ function handleMobileCanvas() {
 				<!-- prices -->
 
 				<div class="mb-2 flex flex-wrap items-center gap-4">
-					<span class="text-xl sm:text-2xl whitespace-nowrap"
+					<span class="whitespace-nowrap text-xl sm:text-2xl"
 						><b>{data.product?.formattedPrice}</b></span>
 
 					{#if data.product?.mrp > data.product?.price}
-						<span class="text-lg text-gray-500 sm:text-xl whitespace-nowrap">
+						<span class="whitespace-nowrap text-lg text-gray-500 sm:text-xl">
 							<strike>{data.product?.formattedMrp}</strike>
 						</span>
 
 						{#if Math.floor(((data.product?.mrp - data.product?.price) / data.product?.mrp) * 100) > 0}
-							<span class="text-lg font-semibold text-primary-500 sm:text-xl whitespace-nowrap">
+							<span class="whitespace-nowrap text-lg font-semibold text-primary-500 sm:text-xl">
 								({Math.floor(
 									((data.product?.mrp - data.product?.price) / data.product?.mrp) * 100
 								)}% off)
@@ -527,7 +539,7 @@ function handleMobileCanvas() {
 							</svg>
 						</h6>
 
-						<div class="flex flex-wrap gap-2">
+						<div class="flex flex-wrap gap-4">
 							<button
 								type="button"
 								class="overflow-hidden rounded border py-1 px-3 text-sm font-medium uppercase transition duration-500 focus:outline-none
@@ -560,7 +572,9 @@ function handleMobileCanvas() {
 				<!-- select options  -->
 
 				{#if data.product?.options?.length > 0}
-					<div class="sizeSelector mb-5 items-center gap-3 text-sm" class:shake-animation="{shake}">
+					<div
+						class="sizeSelector mb-5 flex flex-col gap-3 text-sm"
+						class:shake-animation="{shake}">
 						{#each data.product?.options as o}
 							<div class="flex flex-col items-start sm:flex-row">
 								<h6 class="mb-1 w-full flex-shrink-0 font-medium sm:mb-0 sm:w-52">
@@ -638,10 +652,10 @@ function handleMobileCanvas() {
 
 									<!-- color -->
 								{:else if o.inputType == 'color'}
-									<div class="flex flex-wrap">
+									<div class="flex flex-wrap gap-4">
 										{#each o.values as i}
 											<label
-												class="mr-2 flex h-12 w-12 cursor-pointer items-center justify-center rounded-full border-2 focus:outline-none focus:ring-0 focus:ring-offset-0 hover:font-bold first-letter:{selectedOptions[
+												class="flex h-12 w-12 cursor-pointer items-center justify-center rounded-full border-2 focus:outline-none focus:ring-0 focus:ring-offset-0 hover:font-bold first-letter:{selectedOptions[
 													o._id
 												] == i._id
 													? `border-primary-500 text-white`
@@ -662,12 +676,12 @@ function handleMobileCanvas() {
 
 									<!-- radio -->
 								{:else if o.inputType == 'radio'}
-									<div class="flex flex-wrap gap-2">
+									<div class="flex flex-wrap gap-4">
 										{#each o.values as v}
 											<Radio
 												value="{v._id}"
 												bind:modelValue="{selectedOptions[o._id]}"
-												on:change="{() => dispatch('optionChanged', selectedOptions)}">
+												on:change="{() => optionChanged(selectedOptions)}">
 												<span class="text-gray-500">{v.name}</span>
 											</Radio>
 										{/each}
@@ -675,10 +689,13 @@ function handleMobileCanvas() {
 
 									<!-- checkbox -->
 								{:else if o.inputType == 'checkbox'}
-									<div class="flex flex-wrap gap-2">
+									<div class="flex flex-wrap gap-4">
 										{#each o.values as v, i}
-											<Checkbox name="{v._id}" bind:selectedItems="{selectedOptions[o._id]}">
-												{v.name}
+											<Checkbox
+												value="{v._id}"
+												bind:modelValue="{selectedOptions[o._id]}"
+												on:change="{() => optionChanged(selectedOptions)}">
+												<span class="text-gray-500">{v.name}</span>
 											</Checkbox>
 										{/each}
 									</div>
@@ -864,9 +881,8 @@ function handleMobileCanvas() {
 				{/if}
 
 				<!-- Description -->
-
 				{#if data.product?.longDescription}
-					<div class="mb-5">
+					<div class="mb-5 prose">
 						<h6 class="mb-5 flex items-center gap-2 font-semibold uppercase">
 							<span> Description </span>
 
@@ -1137,7 +1153,7 @@ function handleMobileCanvas() {
 <!-- <Gallery bind:showPhotosModal product="{data.product}" /> -->
 
 {#if bounceItemFromTop}
-	<AnimatedCartItem img="{data.product?.img}" />
+	<AnimatedCartItem img="{customizedImg || data.product?.img}" />
 {/if}
 
 <!-- <UserForm showUserInputForm="{showUserInputForm}" /> -->
diff --git a/src/routes/(app)/product/[slug]/_DeliveryOptions.svelte b/src/routes/(app)/product/[slug]/_DeliveryOptions.svelte
index 7205b108..dbebcee6 100644
--- a/src/routes/(app)/product/[slug]/_DeliveryOptions.svelte
+++ b/src/routes/(app)/product/[slug]/_DeliveryOptions.svelte
@@ -5,18 +5,24 @@ import dayjs from 'dayjs'
 import { onMount } from 'svelte'
 import { page } from '$app/stores'
 import { applyAction, enhance } from '$app/forms'
+import { toast } from '$lib/util'
 
-export let product, data
+export let product
 
 let deliveryDetails = $page.data.zip || {}
-let pincode = deliveryDetails.pincode ?? ''
-let validPin = !!pincode
+let pincode = deliveryDetails.pincode ?? null
 let loading = false
+let changingPincode = false
+let disabled = false
 
-function handlePinCode() {
-	if (pincode.toString().length === 6) {
-		validPin = true
-	}
+if (pincode && pincode.toString().length === 6) {
+	disabled = true
+}
+
+function changePincode() {
+	pincode = null
+	disabled = false
+	changingPincode = true
 }
 
 // async function submit() {
@@ -32,6 +38,8 @@ function handlePinCode() {
 // }
 </script>
 
+<!-- {JSON.stringify(deliveryDetails)} -->
+
 <div class="mb-4">
 	<form
 		action="/server/verify-zip"
@@ -39,48 +47,90 @@ function handlePinCode() {
 		use:enhance="{() => {
 			return async ({ result }) => {
 				console.log('bounceItemFromTop', result)
+				if (!result['Pincode']) {
+					toast('Please enter valid pincode', 'error')
+					return (deliveryDetails = {})
+				}
 				deliveryDetails = result
 				await applyAction(result)
+				disabled = true
+				changingPincode = false
 			}
 		}}"
 		class="relative w-full max-w-sm overflow-hidden rounded-md border
-        {validPin ? 'border-primary-500' : 'border-gray-400'}">
+        {disabled ? 'border-gray-400' : 'border-primary-500'}">
 		<input
 			name="zip"
 			type="tel"
-			value="{pincode}"
+			bind:value="{pincode}"
 			maxlength="6"
-			placeholder="Please enter pincode"
-			class="w-full rounded-md bg-transparent py-3 px-4 pr-24 text-sm font-semibold focus:outline-none"
-			on:input="{handlePinCode}" />
-
-		<button
-			type="submit"
-			class="absolute inset-y-0 right-0 z-10 flex w-20 items-center justify-center text-right text-sm font-bold uppercase 
-            {validPin ? 'bg-primary-500 text-white' : 'bg-gray-100 text-gray-300'}">
-			{#if loading}
-				<div
-					class="absolute inset-0 flex cursor-not-allowed items-center justify-center bg-black bg-opacity-70">
-					<svg
-						class="mx-auto h-4 w-4 animate-spin text-white"
-						xmlns="http://www.w3.org/2000/svg"
-						fill="none"
-						viewBox="0 0 24 24">
-						<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"
-						></circle>
-						<path
-							class="opacity-75"
-							fill="currentColor"
-							d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-						></path>
-					</svg>
-				</div>
-			{/if}
+			placeholder="Enter pincode"
+			disabled="{disabled}"
+			class="w-full rounded-md bg-transparent py-3 px-4 pr-24 text-sm font-semibold placeholder:font-normal focus:outline-none" />
+
+		{#if changingPincode}
+			<button
+				type="submit"
+				class="absolute inset-y-0 right-0 z-10 flex w-20 text-primary-500 items-center justify-center text-right text-sm font-bold">
+				{#if loading}
+					<div
+						class="absolute inset-0 flex cursor-not-allowed items-center justify-center bg-black bg-opacity-70">
+						<svg
+							class="mx-auto h-4 w-4 animate-spin text-white"
+							xmlns="http://www.w3.org/2000/svg"
+							fill="none"
+							viewBox="0 0 24 24">
+							<circle
+								class="opacity-25"
+								cx="12"
+								cy="12"
+								r="10"
+								stroke="currentColor"
+								stroke-width="4"></circle>
+							<path
+								class="opacity-75"
+								fill="currentColor"
+								d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+							></path>
+						</svg>
+					</div>
+				{/if}
+
+				<span> Check </span>
+			</button>
+		{:else}
+			<button
+				type="button"
+				class="absolute inset-y-0 right-0 z-10 flex w-20 text-primary-500 items-center justify-center text-right text-sm font-bold"
+				on:click="{changePincode}">
+				{#if loading}
+					<div
+						class="absolute inset-0 flex cursor-not-allowed items-center justify-center bg-black bg-opacity-70">
+						<svg
+							class="mx-auto h-4 w-4 animate-spin text-white"
+							xmlns="http://www.w3.org/2000/svg"
+							fill="none"
+							viewBox="0 0 24 24">
+							<circle
+								class="opacity-25"
+								cx="12"
+								cy="12"
+								r="10"
+								stroke="currentColor"
+								stroke-width="4"></circle>
+							<path
+								class="opacity-75"
+								fill="currentColor"
+								d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+							></path>
+						</svg>
+					</div>
+				{/if}
 
-			<span> Check </span>
-		</button>
+				<span> Change </span>
+			</button>
+		{/if}
 	</form>
-
 	{#if loading}
 		<ul class="mt-4 flex flex-col gap-4">
 			{#each { length: 2 } as _}
@@ -89,7 +139,7 @@ function handlePinCode() {
 				</li>
 			{/each}
 		</ul>
-	{:else if deliveryDetails}
+	{:else if deliveryDetails['Pincode']}
 		<ul class="mt-4 flex flex-col gap-2">
 			<li class="flex items-center gap-4">
 				<div class="flex h-auto w-8 items-center justify-end overflow-hidden">
@@ -148,7 +198,7 @@ function handlePinCode() {
 				</li>
 			{/if}
 		</ul>
-	{:else}
+	{:else if !deliveryDetails['Pincode']}
 		<div class="mt-2">
 			<p class="text-xs text-gray-500">
 				Please enter PIN code to check delivery time & Pay on Delivery Availability
diff --git a/static/product/non-veg.png b/static/product/non-veg.png
new file mode 100644
index 0000000000000000000000000000000000000000..33f8282a0ef35561d82bc31f7b22f0e9922a9c02
GIT binary patch
literal 622
zcmV-!0+IcRP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0s~1zK~!i%?U&6;
z!$1(nb2M&h)uZ+uJZ&r@_$Yongj)2KRJ@63au7r;o^7wbfFF3*o%kOxw%JUZwMk)r
z@Q02w|8cg>$8O;9cs$J{jiaw731i6_*Q8EiEICsf9pe{(ur~Yx5Z1;_7jU=TUb&51
z2dP$<X{-iDpU@!D>Vk4qgK`lwS-^ca2ooKhn8DxKSEM9XuUYL*umHOi_92ubHKuXc
zNp<wZ^-?8q)W7M5>u6I5*CUi8G1Bm6kQc6<R6pLZgLY%#T7+`SjC9#d^UeR2S;V95
za^gCKa>|Tm_*1T_EFB%A?Fd|hP>#)b)m>VZ+^}+~H|mM@Ik*O)9GfwFR3h(8y0wS)
zIXI6{j?GBVbk4hzIz#&$oJT0fW;Fk7$a!~CL$uGqd4zIoM)M1NaNd=uC)(%WJVH4(
z<J>P`{x6|eopauuW_c5Dw)Q#iN{L?FMf)6_M<~Z;%wA;X<-;{qMLX1VqrHswIk*O)
zoHC=y^|+?0%=Y>SZAai5gmTJ^*%^Q~VyK&1T0PXVnIl|mr_0U+T#HbS)JOxELHb-T
zmigwdx572FDTM10%9+GSmw>75Wj7;yMaqtpadg<2Bjs=Cz)rhLdQTWVn<rIvsHe~L
zH_A2gQ2(F!1t6>qzW{`_QF#GP5yp};u1TH3SRRkZ(<p-A8^Mw}-RI)7EC2ui07*qo
IM6N<$f~xx;XaE2J

literal 0
HcmV?d00001

diff --git a/static/product/veg.png b/static/product/veg.png
new file mode 100644
index 0000000000000000000000000000000000000000..d475986264481fdac46ccaaf808a25f4f1760572
GIT binary patch
literal 618
zcmeAS@N?(olHy`uVBq!ia0vp^1|ZDA1|-9oezpTC#^NA%Cx&(BWL^R}Ea{HEjtmSN
z`?>!lvI6;>1s;*b3=DjSL74G){)!Z!hX0-}jv*P&Z>M|v9d_Vp+ub6&f#sZ|Q+hz(
zp~nI?EJEHbS3Hk8G8A%$9Ff}fmbIe8_QuQn&I@Ue%ocKH*u9+o>ehZ!KXu<_!W=A2
zZ&m!>rq6CkeL3^m63@iQs%K``d?XkWlUo=C%#Jy+ZxAml-JQ>OqFmhax6JZq%}3`e
zr{`H7H`NH=IDs)qT;JWcTFUyj+CHU=3i>g#=cs#cs1}rWvW<FtEp(G-ch!`tt#fJ@
z95lbMOkkz^3isqEM=y&>dcJ*Qr2MY2EO=s6OVz2Ko7-kSKlNYWt~~SovPo7Tku5)r
zSFT*8VR}5ny77v_mB+@HuEt-!v!QBc_`A+;mP^<c%FP$7pL$;`AT}^Ro&RmIha6C3
z;{VI4@w4abb^9$d$$iD~^d<9aG=Ba{Y0H@J{E6f1kDkD+`>OHNcc|ZbKEcMx*6#6q
z`3Lqn3#Ct9U*>x6$d@m7rq|RO?S?77+1w*<w_>GMowM(+lUzV8QXqG2G*%A^4mCL-
zc*{@0l;i6Z$>aLPWeTOmr)U0li+eW1DsK5pr;76|LEQoU*G_Ps;8R}_-o38o`=;G}
zX00B!PPUsRD!D({9yDM4qpM}s;cGIQ`wz31)vbQ=oaJTbwi7=B{O50euW|j9^WS_S
zHisJ$i3}~hft3y0I8I+OUh6se&?crvhXtV}R`FbHHj&qk${hoy4+c+HKbLh*2~7aW
Cfe`Wl

literal 0
HcmV?d00001

diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 759cbe3a..529aef6f 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -1,6 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-	content: ['./src/**/*.{html,js,svelte,ts}'],
+	content: ['./src/**/*.{html,js,svelte,ts}', './node_modules/tw-elements/dist/js/**/*.js'],
 	theme: {
 		extend: {
 			colors: {
@@ -61,5 +61,10 @@ module.exports = {
 			fontFamily: {}
 		}
 	},
-	plugins: [require('daisyui'), require('tailwind-scrollbar'), require('@tailwindcss/line-clamp')]
+	plugins: [
+		require('tw-elements/dist/plugin'),
+		require('tailwind-scrollbar'),
+		require('@tailwindcss/typography'),
+		require('@tailwindcss/line-clamp')
+	]
 }