diff --git a/src/App.vue b/src/App.vue
index f0ad95a..aafe85c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,30 +4,26 @@
 </script>
 
 <template>
-	<div class="font-rubik font-ligh">
+	<div>
 		<RouterView />
 	</div>
 </template>
 <style>
 	@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400&family=Martian+Mono:wght@300&family=Open+Sans&family=Raleway&family=Roboto:wght@300;400&family=Rubik:wght@300;400&display=swap");
 
-	.font-inter {
-		font-family: "Inter", sans-serif;
+	@import url("https://fonts.googleapis.com/css2?family=Oxygen&family=Poppins&family=Raleway&display=swap");
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6 {
+		font-family: "Oxygen", sans-serif;
 	}
-	.font-martian-mono {
-		font-family: "Martian Mono", monospace;
+	body {
+		font-family: "Poppins", sans-serif;
 	}
-	.font-openSans {
-		font-family: "Open Sans", sans-serif;
-	}
-	.font-railway {
+	p {
 		font-family: "Raleway", sans-serif;
 	}
-	.font-roboto {
-		font-family: "Roboto", sans-serif;
-	}
-	.font-rubik {
-		font-family: "Rubik", sans-serif;
-	}
 </style>
-
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
deleted file mode 100644
index bc0eb36..0000000
--- a/src/components/NavBar.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<script setup>
-	import { ref } from "vue"
-
-	import ToggleButton from "primevue/togglebutton"
-	import { themesStore } from "../store/themesStore"
-	import { usePrimeVue } from "primevue/config"
-	const themes = themesStore
-	const PrimeVue = usePrimeVue()
-
-	const checked = ref(false)
-
-	let currentTheme = "lara-light-teal"
-	const toggleTheme = () => {
-		// What is next theme? (2nd parameter)
-		let nextTheme = ""
-		if (currentTheme === "lara-light-teal") nextTheme = "lara-dark-teal"
-		else if (currentTheme === "lara-dark-teal") nextTheme = "lara-light-teal"
-
-		// 1. Current theme name
-		// 2. Next theme name
-		// 3. id of <link>, what reference to where set theme css file --> fix, single id to <link>
-		PrimeVue.changeTheme(currentTheme, nextTheme, "theme-link", () => {
-			console.log("theme changed")
-		})
-		// So current theme now:
-		currentTheme = nextTheme
-	}
-</script>
-<template>
-	<div>
-		<ToggleButton @change="toggleTheme" v-model="checked" onLabel="Dark" offLabel="Light" class="w-16rem" />
-		<!-- <ToggleButton @change="themes.toggleTheme('lara-light-teal', 'lara-dark-teal', PrimeVue)" v-model="checked" onLabel="Dark" offLabel="Light" class="w-16rem" /> -->
-	</div>
-</template>
-
diff --git a/src/components/WishListIcon.vue b/src/components/WishListIcon.vue
index 078500a..b23f215 100644
--- a/src/components/WishListIcon.vue
+++ b/src/components/WishListIcon.vue
@@ -1,13 +1,16 @@
 <script setup>
 	import { defineProps } from "vue"
 	import { wishlist } from "../store/wishlistStore"
+	import { authStore } from "../store/authStore"
 	import { HeartIcon, ScaleIcon } from "@heroicons/vue/24/outline"
 
+	const auth = authStore
+
 	const porps = defineProps(["product"])
 </script>
 
 <template>
-	<button @click="wishlist.toggleWishlist(porps.product)" class="btn text-light p-1 border-0 rounded-0" :class="wishlist.wishlistStatus(product) ? 'bg-success' : 'bg-secondary'" style="height: 30px; width: 30px">
+	<button @click="wishlist.toggleWishlist(porps.product)" class="btn text-light p-1 border-0 rounded-0" :class="auth.isAuthenticated && wishlist.wishlistStatus(product) ? 'bg-success' : 'bg-secondary'" style="height: 30px; width: 30px">
 		<HeartIcon class="w-full h-full" />
 	</button>
 </template>
diff --git a/src/components/breadcrumb/Breadcrumb.vue b/src/components/breadcrumb/Breadcrumb.vue
index 0538477..e8c88d0 100644
--- a/src/components/breadcrumb/Breadcrumb.vue
+++ b/src/components/breadcrumb/Breadcrumb.vue
@@ -1,6 +1,6 @@
 <script setup>
 	import { defineProps } from "vue"
-	import { ChevronRightIcon } from "@heroicons/vue/24/outline"
+	import { ChevronRightIcon, HomeIcon } from "@heroicons/vue/20/solid"
 	import { useRoute } from "vue-router"
 	const route = useRoute()
 	const fullPath = route.meta.breadcrumb
@@ -29,11 +29,14 @@
 <template>
 	<div class="space-y-0.5">
 		<h1 class="text-xl font-medium capitalize" :class="labelClass">{{ pathTitle[0].text }}</h1>
-		<div class="flex items-center gap-x-1 text-xs">
-			<template v-for="(path, key, index) in fullPath">
-				<router-link :to="{ name: path['route'] }" class="capitalize font-medium" :class="path == $route.name ? activeClass : pathClass"> {{ path["text"] }}</router-link>
-				<ChevronRightIcon v-if="key !== fullPath.length - 1" class="h-3.5 w-auto" :class="iconClass" />
-			</template>
+		<div class="d-flex align-items-center gap-x-1 text-xs">
+			<div v-for="(path, key, index) in fullPath" class="shrink-0 d-flex align-items-center" :key="index">
+				<router-link :to="{ name: path['route'] }" class="capitalize font-medium h6 mb-0" :class="path == $route.name ? activeClass : pathClass">
+					<HomeIcon v-if="'home' == path['route']" class="h-4 w-auto" :class="iconClass" />
+					<template v-if="'home' != path['route']">{{ path["text"] }} </template>
+				</router-link>
+				<ChevronRightIcon v-if="key !== fullPath.length - 1" class="h-4 w-auto" :class="iconClass" />
+			</div>
 		</div>
 	</div>
 </template>
diff --git a/src/components/headers/AppTopbar.vue b/src/components/headers/AppTopbar.vue
deleted file mode 100644
index 8b2c4ca..0000000
--- a/src/components/headers/AppTopbar.vue
+++ /dev/null
@@ -1,172 +0,0 @@
-<script setup>
-	import { ref, reactive } from "vue"
-	import { menuConfigStore } from "../store/menuConfigStore"
-	import OverlayPanel from "primevue/overlaypanel"
-	import TieredMenu from "primevue/tieredmenu"
-	import Button from "primevue/button"
-
-	const menuConfig = menuConfigStore
-
-	const op = ref()
-	const toggle = (event) => {
-		op.value.toggle(event)
-	}
-
-	// Notification
-
-	const menu = ref()
-	const items = ref([
-		{
-			label: "5 Notification",
-			icon: "pi pi-fw pi-file",
-			style: "bg-blue-700",
-		},
-		{
-			label: "5 Notification",
-			icon: "pi pi-fw pi-file",
-		},
-		{
-			label: "5 Notification",
-			icon: "pi pi-fw pi-file",
-		},
-	])
-
-	const toggleMenu = (event) => {
-		menu.value.toggle(event)
-	}
-
-	const userMenu = ref()
-	const userMenuItems = ref([
-		{
-			label: "5 Notification",
-			icon: "pi pi-fw pi-file",
-			style: "bg-blue-700",
-		},
-		{
-			label: "5 Notification",
-			icon: "pi pi-fw pi-file",
-		},
-		{
-			label: "5 Notification",
-			icon: "pi pi-fw pi-file",
-		},
-	])
-
-	const userMenuToggle = (event) => {
-		userMenu.value.toggle(event)
-	}
-
-	// NavBar
-</script>
-<template>
-	<nav v-if="false == true" class="w-full px-6 py-3 fixed fixed-top z-50 flex items-center justify-between transition-all duration-700 bg-[#2d353c]">
-		<div class="flex items-center gap-x-4">
-			<button type="button" class="text-gray-200 hover:text-white focus:outline-none transition-all duration-300 outline-none focus:outline-o" @click="menuConfig.menuToggle">
-				<svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
-				</svg>
-			</button>
-			<input type="text" id="" name="" class="hidden sm:block text-white placeholder-gray-500 bg-transparent outline-none" value="" placeholder="Search projects.." />
-		</div>
-		<div class="flex items-center gap-x-2.5">
-			<!-- OverlayPanel -->
-			<Button type="button" icon="pi pi-image" label="Image" class="w-12" @click="toggle">Image</Button>
-			<button type="button" icon="pi pi-image" label="Image" @click="toggle($event)" />
-			<OverlayPanel ref="op" class="bg-rose-600 w-96 p-0">
-				<div class="divide-y divide-gray-300">
-					<h3 class="text-center py-3 text-sm text-indigo-900">4 New Messages</h3>
-					<div class="relative flex items-center gap-x-4 p-4">
-						<img class="h-11 rounded-full" src="images/demo/avatar-1.jpg" alt="avatar" />
-						<div class="space-y-2">
-							<h2 class="text-blue-900 text-sm">Michelle Bilodeau</h2>
-							<p class="text-xs text-gray-500">Nam pretium turpis et arcu. Duis arcu tortor</p>
-							<p class="text-xs text-gray-500">5m ago</p>
-						</div>
-						<a href="#" class="absolute h-full w-full"></a>
-					</div>
-					<div class="relative flex items-center gap-x-4 p-4">
-						<img class="h-11 rounded-full" src="images/demo/avatar-2.jpg" alt="avatar" />
-						<div class="space-y-2">
-							<h2 class="text-blue-900 text-sm">Kathie Burton</h2>
-							<p class="text-xs text-gray-500">Nam pretium turpis et arcu. Duis arcu tortor</p>
-							<p class="text-xs text-gray-500">30m ago</p>
-						</div>
-						<a href="#" class="absolute h-full w-full"></a>
-					</div>
-					<div class="relative flex items-center gap-x-4 p-4">
-						<img class="h-11 rounded-full" src="images/demo/avatar-3.jpg" alt="avatar" />
-						<div class="space-y-2">
-							<h2 class="text-blue-900 text-sm">Alexander Groves</h2>
-							<p class="text-xs text-gray-500">Nam pretium turpis et arcu. Duis arcu tortor</p>
-							<p class="text-xs text-gray-500">2h ago</p>
-						</div>
-						<a href="#" class="absolute h-full w-full"></a>
-					</div>
-					<div class="relative flex items-center gap-x-4 p-4">
-						<img class="h-11 rounded-full" src="images/demo/avatar-1.jpg" alt="avatar" />
-						<div class="space-y-2">
-							<h2 class="text-blue-900 text-sm">Disy Seger</h2>
-							<p class="text-xs text-gray-500">Nam pretium turpis et arcu. Duis arcu tortor</p>
-							<p class="text-xs text-gray-500">5h ago</p>
-						</div>
-						<a href="#" class="absolute h-full w-full"></a>
-					</div>
-					<div>
-						<button class="text-xs text-gray-600 mx-auto block py-2">Show all messages</button>
-					</div>
-				</div>
-			</OverlayPanel>
-
-			<!-- TieredMenu -->
-			<Button type="button" label="Toggle" @click="toggleMenu" aria-haspopup="true" aria-controls="overlay_tmenu">
-				<svg :class="notification == true ? 'text-white' : ''" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor">
-					<path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z" />
-				</svg>
-			</Button>
-			<TieredMenu ref="menu" id="overlay_tmenu" :model="items" popup class="w-80 inset-0 inset-y-auto mt-3" />
-
-			<!-- user TieredMenu -->
-			<Button type="button" icon="pi pi-image" label="Image" class="w-12" @click="toggle">Image</Button>
-			<button type="button" icon="pi pi-image" label="Image" @click="toggle" />
-			<OverlayPanel ref="op" class="p-0">
-				<div class="py-2">
-					<a href="settings-profile.php" class="flex items-center gap-x-3 pl-8 hover:bg-gray-100 py-1.5 transition-all duration-300">
-						<i class="fas fa-user text-gray-700"></i>
-						<h4 class="text-gray-600">View Profile</h4>
-					</a>
-					<a href="#" class="flex items-center gap-x-3 pl-8 hover:bg-gray-100 py-1.5 transition-all duration-300">
-						<i class="fas fa-comments text-gray-700"></i>
-						<h4 class="text-gray-600 text-">Contacts</h4>
-					</a>
-					<a href="#" class="flex items-center gap-x-3 pl-8 hover:bg-gray-100 py-1.5 transition-all duration-300">
-						<i class="fas fa-chart-pie text-gray-700"></i>
-						<h4 class="text-gray-600 text-">Analytics</h4>
-					</a>
-					<a href="#" class="flex items-center gap-x-3 pl-8 hover:bg-gray-100 py-1.5 transition-all duration-300">
-						<i class="fas fa-cogs text-gray-700"></i>
-						<h4 class="text-gray-600 text-">Settings</h4>
-					</a>
-				</div>
-				<div class="py-2">
-					<form method="post">
-						<button name="logout_submition" class="w-full flex items-center gap-x-3 pl-8 hover:bg-gray-100 py-1.5 transition-all duration-300">
-							<i class="fas fa-sign-out-alt text-gray-700"></i>
-							<h4 class="text-gray-600 text-">Sign out</h4>
-						</button>
-					</form>
-				</div>
-			</OverlayPanel>
-			<!-- user TieredMenu -->
-			<Button type="button" label="Toggle" @click="userMenuToggle" aria-haspopup="true" aria-controls="overlay_tmenu">
-				<svg :class="setting == true ? 'text-white' : ''" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor">
-					<path
-						fill-rule="evenodd"
-						d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z"
-						clip-rule="evenodd"
-					/>
-				</svg>
-			</Button>
-			<TieredMenu ref="userMenu" id="overlay_tmenu" :model="userMenuItems" popup class="mt-3" />
-		</div>
-	</nav>
-</template>
diff --git a/src/components/swiper/Swiper.vue b/src/components/swiper/Swiper.vue
index ee9eada..57ecb21 100644
--- a/src/components/swiper/Swiper.vue
+++ b/src/components/swiper/Swiper.vue
@@ -34,7 +34,7 @@
 		},
 		btnClass: {
 			type: String,
-			default: "",
+			default: "text-black bg-white",
 		},
 		stroke: {
 			type: [Number],
@@ -44,12 +44,12 @@
 		// Slide per view
 		slidesPerView: {
 			type: [String, Number],
-			default: 3,
+			default: 4,
 		},
 		// Space between
 		spaceBetween: {
 			type: [String, Number],
-			default: 20,
+			default: 10,
 		},
 		// loop
 		isLoop: {
@@ -83,11 +83,11 @@
 
 		isDynamicBullets: {
 			type: Boolean,
-			default: false,
+			default: true,
 		},
 		isClickable: {
 			type: Boolean,
-			default: false,
+			default: true,
 		},
 	})
 </script>
@@ -95,7 +95,7 @@
 <template>
 	<Swiper
 		:class="name"
-		class=""
+		class="border-0"
 		:autoplay="{
 			delay: duration,
 			disableOnInteraction: isDisableOnInteraction,
@@ -114,16 +114,15 @@
 		effect="fade"
 		:slides-per-view="slidesPerView"
 		:space-between="spaceBetween"
-		virtual
 	>
 		<!-- <SwiperController :slider="slider" /> -->
 		<slot name="controller">
-			<div class="absolute inset-0 z-10 flex items-center justify-between gap-1">
-				<button class="px-3 py-1 rounded text-black bg-white shrink-0 flex items-center justify-center" @click.stop="slider.slidePrev()">
-					<ChevronLeftIcon class="h-6 w-auto" :style="`stroke-width:${stroke} ;`" />
+			<div class="absolute inset-0 z-2 flex items-center justify-between gap-1" :class="btnGroupClass">
+				<button :class="btnClass" class="px-3 py-1 rounded shrink-0 flex items-center justify-center" @click.stop="slider.slidePrev()">
+					<ChevronLeftIcon class="w-auto" :style="`stroke-width:${stroke} ;`" style="height: 1.5rem" />
 				</button>
-				<button class="px-3 py-1 rounded text-black bg-white shrink-0 flex items-center justify-center" @click.stop="slider.slideNext()">
-					<ChevronRightIcon class="h-6 w-auto" :style="`stroke-width:${stroke} ;`" />
+				<button :class="btnClass" class="px-3 py-1 rounded shrink-0 flex items-center justify-center" @click.stop="slider.slideNext()">
+					<ChevronRightIcon class="w-auto" :style="`stroke-width:${stroke} ;`" style="height: 1.5rem" />
 				</button>
 			</div>
 		</slot>
diff --git a/src/components/views/Layout.vue b/src/components/views/Layout.vue
deleted file mode 100644
index 5b1b31c..0000000
--- a/src/components/views/Layout.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<script setup>
-	import "bootstrap"
-	import Breadcrumb from "../breadcrumb/Breadcrumb.vue"
-	import TopHeader from "./header/TopHeader.vue"
-	import Footer from "./footer/Footer.vue"
-</script>
-<template>
-	<div>
-		<header>
-			<TopHeader />
-		</header>
-
-		<!-- Default components loder under the slot -->
-		<main class="pt-28 h-max px-3 sm:px-6 py-6 lg:px-8">
-			<!-- <div class="h-full mx-auto px-3 sm:px-6 py-6 lg:px-8 space-y-5"> -->
-			<div class="mt-5">
-				<Breadcrumb v-if="$route.name != 'home'" class="container-lg" />
-				<slot> </slot>
-			</div>
-			<!-- </div> -->
-		</main>
-		<footer>
-			<Footer />
-		</footer>
-	</div>
-</template>
-<style>
-	@import "bootstrap/dist/css/bootstrap.min.css";
-	@import "../../assets/css/bootstrap-extensions.css";
-	@import "../../assets/css/global.css";
-	@import "../../assets/css/style.css";
-</style>
-
diff --git a/src/components/views/css/style.css b/src/components/views/css/style.css
deleted file mode 100644
index e69de29..0000000
diff --git a/src/components/views/details/SingleProduct.vue b/src/components/views/details/SingleProduct.vue
deleted file mode 100644
index c679dfc..0000000
--- a/src/components/views/details/SingleProduct.vue
+++ /dev/null
@@ -1,528 +0,0 @@
-<script setup>
-	import { ref, reactive, onBeforeMount, onMounted } from "vue"
-	import axios from "axios"
-
-	import Layout from "../Layout.vue"
-
-	import { useRoute } from "vue-router"
-	const route = useRoute()
-	const id = route.params.id
-
-	const product = reactive({
-		title: "",
-		description: "",
-		price: "",
-		images: "",
-		price: "",
-		thumbnail: "",
-		rating: "",
-		stock: "",
-		brand: "",
-		category: "",
-	})
-
-	// const product = reactive({})
-
-	const count = ref(0)
-
-	// onMounted(() => {
-	// 	axios
-	// 		.get(`http://127.0.0.1:8000/api/products/${id}`)
-	// 		.then((res) => {
-	// 			Object.assign(product, res.data)
-	// 		})
-	// 		.catch((error) => console.log(error))
-	// })
-	onBeforeMount(() => {
-		async function productList() {
-			const url = `https://dummyjson.com/products/${id}`
-			// const url = `https://dummyjson.com/products/2`
-			const res = await axios.get(url)
-			if (200 == res.status) {
-				Object.assign(product, res.data)
-			}
-		}
-		productList()
-	})
-	// import SwiperC from "../../swiper/SwiperC.vue"
-</script>
-<template>
-	<Layout>
-		<!-- product details -->
-		<section id="product-Details-Product">
-			<div class="container-lg">
-				<div class="row py-5">
-					<div class="col-md-6">
-						<div id="productDetailsImageSlider" class="carousel slide" data-bs-ride="carousel">
-							<div class="carousel-inner border">
-								<div v-for="(image, index) in product['images']" :key="index" class="carousel-item zoom-product cursor-zoom-in" :class="0 == index ? 'active' : ''">
-									<img :src="image" class="d-block w-100" alt="image" />
-								</div>
-							</div>
-							<div class="carousel-indicators position-static m-2">
-								<button v-for="(image, index) in product['images']" :key="index" type="button" data-bs-target="#productDetailsImageSlider" :data-bs-slide-to="index" class="w-auto border" :class="0 == index ? 'active' : ''" style="height: 50px">
-									<img :src="image" class="d-block h-100 w-100" alt="image" />
-								</button>
-							</div>
-						</div>
-					</div>
-					<div class="col-md-6">
-						<div class="small">
-							<i class="fas fa-star text-warning"></i>
-							<i class="fas fa-star text-warning"></i>
-							<i class="fas fa-star text-warning"></i>
-							<i class="fas fa-star text-warning"></i>
-							<i class="far fa-star text-warning"></i>
-							<span class="text-secondary">(3)</span>
-						</div>
-						<h3 class="text-capitalize fw-bold my-3">microsoft surface laptop 3-15" touch-Screen</h3>
-						<p class="text-capitalize fst-italic small">screen size: 8 inches<br />screen resolution: 1280 x 800 pixels</p>
-						<p class="h4 my-3">$750.00 - $950.00</p>
-						<nav>
-							<p class="text-uppercase small fw-bold mb-1">series cpu</p>
-							<ul class="nav gap-3">
-								<li class="nav-item"><a href="" class="nav-link text-dark py-1 px-2 bg-light">core i5</a></li>
-								<li class="nav-item"><a href="" class="nav-link text-dark py-1 px-2 bg-light">core i7</a></li>
-								<li class="nav-item"><a href="" class="nav-link text-dark py-1 px-2 bg-light">core i9</a></li>
-							</ul>
-						</nav>
-						<div class="py-4 border-bottom">
-							<div class="btn-toolbar gap-2 btn-sm">
-								<div class="btn-group w-100 w-sm-auto">
-									<button class="btn rounded-0 box-shadow-none btn-success">-</button>
-									<input type="text" class="form-controle form-control-sm border rounded-0 outline-0 text-center" value="1" style="max-width: 3rem" />
-									<button class="btn rounded-0 box-shadow-none btn-success">+</button>
-								</div>
-								<a href="/cart/cart.php" class="btn box-shadow-none btn-secondary rounded-0 fw-bold text-uppercase px-3 py-2 w-100 w-sm-auto"><small>+ add to cart</small></a>
-								<a href="/checkout/checkout.php" class="btn box-shadow-none border rounded-0 fw-bold text-uppercase px-3 py-2 hover-bg-danger w-100 w-sm-auto"><small>buy now</small></a>
-							</div>
-							<div class="text-capitalize mt-2 small">
-								<a href="#" class="small text-secondary text-decoration-none"><i class="fas fa-heart"> </i> wishlist</a>
-								<div class="vr mx-1 pt-2"></div>
-								<a href="#" class="small text-secondary text-decoration-none"><i class="fas fa-compress-alt"></i> compare</a>
-							</div>
-						</div>
-						<div class="my-3">
-							<p class="text-capitalize my-1">availability: <span class="text-success">in stock</span></p>
-							<p class="text-capitalize my-1">SKU: <span class="text-secondary">0001</span></p>
-							<p class="text-capitalize my-1">brands: <span class="text-secondary">brand 05, brand 06</span></p>
-						</div>
-						<nav>
-							<ul class="nav my-3 gap-2">
-								<li class="nav-item">
-									<a href="" class="py-1 nav-link bg-primary text-white"><i class="fab fa-facebook-f"></i> Facebook</a>
-								</li>
-								<li class="nav-item">
-									<a href="" class="py-1 nav-link bg-info text-white"><i class="fab fa-twitter"></i> Twitter</a>
-								</li>
-								<li class="nav-item">
-									<a href="" class="py-1 nav-link bg-danger text-white"><i class="fab fa-pinterest-square"></i> Pinterest</a>
-								</li>
-								<li class="nav-item">
-									<a href="" class="py-1 nav-link bg-success text-white"><i class="fab fa-linkedin-in"></i> Linkedin </a>
-								</li>
-							</ul>
-						</nav>
-					</div>
-				</div>
-			</div>
-		</section>
-		<!-- combo package offer -->
-		<section id=" product-details-combo">
-			<div class="container-lg mb-5">
-				<div class="border-2 border-danger p-4">
-					<h5 class="text-uppercase fw-bold">Frequently Bought Together</h5>
-					<div class="row align-items-center justify-content-between">
-						<div class="col-md-8 col-sm-12">
-							<div class="row align-items-center justify-content-center">
-								<div class="col">
-									<a href="#" class="h-100 w-100"><img class="img-fluid" src="/images/demo/electronic-lp7.jpg" alt="" /></a>
-								</div>
-								<div class="col-auto">+</div>
-								<div class="col">
-									<a href="#" class="h-100 w-100"><img class="img-fluid" src="/images/demo/electronic-60.jpg" alt="" /></a>
-								</div>
-								<div class="col-auto">+</div>
-								<div class="col">
-									<a href="#" class="h-100 w-100"><img class="img-fluid" src="/images/demo/electronic-64.jpg" alt="" /></a>
-								</div>
-							</div>
-						</div>
-						<div class="col-md-3 col-lg-2 d-none d-md-block">
-							<p class="text-capitalize mb-1">price for all</p>
-							<p class="h4 text-red-danger">$ 980.00</p>
-							<a href="#" class="btn text-white bg-red-danger border border-danger hover-border-red hover-text-red hover-bg-transparent btn rounded-0 text-uppercase box-shadow-none w-100" type="button"><small class="fw-bold">add all to cart</small></a>
-						</div>
-					</div>
-					<div class="text-muted small text-capitalize my-3">
-						<p class="mb-0">This Product: Microsoft Surface Laptop 3-15” Touch-Screen – Core i5 – $750.00</p>
-						<p class="mb-0">Desktop Webcam, HD 720p Widescreen – $200.00</p>
-						<p class="mb-0">Verbatim Optical Mouse USB Accessibility – $30.00</p>
-					</div>
-					<div class="d-block d-md-none text-center border-top">
-						<div class="d-flex justify-content-between py-3">
-							<p class="text-capitalize mb-0">price for all</p>
-							<p class="h4 text-red-danger mb-0">$ 980.00</p>
-						</div>
-						<a href="#" class="btn w-100 fw-bold text-white border border-danger bg-red-danger hover-border-red hover-text-red hover-bg-transparent btn rounded-0 text-uppercase box-shadow-none" type="button"><small>add all to cart</small></a>
-					</div>
-				</div>
-			</div>
-		</section>
-		<!-- product spacification -->
-		<section id=" productDetailsdetails">
-			<div class="container-lg">
-				<div class="row justify-content-center">
-					<div class="col-10">
-						<ul class="nav nav-pills mb-3 gap-1 small" id="pills-tab" role="tablist">
-							<li class="nav-item" role="presentation">
-								<button class="p-0 nav-link bg-transparent active text-uppercase text-secondary fw-bold" id="" data-bs-toggle="pill" data-bs-target="#description" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Description</button>
-							</li>
-							<li class="nav-item breadcrumb-hr" role="presentation">
-								<button class="p-0 nav-link bg-transparent text-uppercase text-secondary fw-bold" id="" data-bs-toggle="pill" data-bs-target="#additionalInformation" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">additional information</button>
-							</li>
-							<li class="nav-item breadcrumb-hr" role="presentation">
-								<button class="p-0 nav-link bg-transparent text-uppercase text-secondary fw-bold" id="" data-bs-toggle="pill" data-bs-target="#specification" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">specification</button>
-							</li>
-							<li class="nav-item breadcrumb-hr" role="presentation">
-								<button class="p-0 nav-link bg-transparent text-uppercase text-secondary fw-bold" id="" data-bs-toggle="pill" data-bs-target="#reviews" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">reviews</button>
-							</li>
-						</ul>
-						<div class="tab-content" id="pills-tabContent">
-							<div class="tab-pane fade show active small" id="description" role="tabpanel">
-								<p class="text-muted lh-lg">
-									A groundbreaking Retina display. Powerful dual-core and quad-core Intel processors. Fast flash storage. High-performance graphics. Great built-in apps. And now in the 13-inch model, a revolutionary new Force Touch trackpad and even longer battery life.1 Whatever you can imagine,
-									MacBook Pro with Retina display gives you the power to create.
-									<br />
-									<br />
-									The design of MacBook Pro packs a lot of power into not a lot of space. Because we believe that high performance shouldn’t come at the expense of portability. And despite being so compact, the new 13-inch and 15-inch MacBook Pro with Retina display models now deliver up to 10 hours
-									and nine hours of battery life, respectively — an hour more than the previous models.
-								</p>
-								<div class="mb-3">
-									<p class="fw-bold text-center">12.9” And 11” Liquid Retina Display With Promotion</p>
-									<img class="img-fluid d-block m-auto pb-3" src="/images/demo/product-detai-electronic.jpg" alt="image" />
-								</div>
-								<div class="row align-items-center">
-									<div class="col-lg-6 col-md-12 mb-3">
-										<div class="me-3 text-capialize">
-											<p class="text-uppercase fw-bold mb-2">technical details</p>
-											<ul class="list-group list-group-flush text-secondary text-capitalize">
-												<li class="list-group-item px-0 text-muted">opetating system: <span class="text-black">android 8.1 oreo</span></li>
-												<li class="list-group-item px-0 text-muted">item weight: <span class="text-black">2.07 pounds</span></li>
-												<li class="list-group-item px-0 text-muted">item dimensions lxWxH: <span class="text-black">9.5 x 6.69 x 0.39</span></li>
-												<li class="list-group-item px-0 text-muted">Rear Webcam Resolution: <span class="text-black">2 MP</span></li>
-												<li class="list-group-item px-0 text-muted">Processor Brand: <span class="text-black">MediaTek</span></li>
-												<li class="list-group-item px-0 text-muted">Processor Count: <span class="text-black">4 Computer</span></li>
-												<li class="list-group-item px-0 text-muted">Memory Type: <span class="text-black"> DDR3 SDRAM</span></li>
-												<li class="list-group-item px-0 text-muted">Flash Memory Size: <span class="text-black">16 GB</span></li>
-											</ul>
-										</div>
-									</div>
-									<div class="col-lg-6 col-md-12 mb-3">
-										<div class="me-3">
-											<p class="text-uppercase fw-bold mb-2">summary</p>
-											<ul class="list-group list-group-flush text-capitalize">
-												<li class="list-group-item px-0 text-muted">Standing screen display size: <span class="text-black">10.1</span></li>
-												<li class="list-group-item px-0 text-muted">Inches Screen Resolution: <span class="text-black"> 1280×800</span></li>
-												<li class="list-group-item px-0 text-muted">Max Screen Resolution: <span class="text-black">1280×800</span></li>
-												<li class="list-group-item px-0 text-muted">Memory Speed: <span class="text-black">1.3 GHz</span></li>
-												<li class="list-group-item px-0 text-muted">Graphics Coprocessor: <span class="text-black">ARM Mali-T720</span></li>
-												<li class="list-group-item px-0 text-muted">Wireless Type: <span class="text-black">802.11bgn</span></li>
-												<li class="list-group-item px-0 text-muted">Number of USB 2.0 Ports: <span class="text-black">1</span></li>
-												<li class="list-group-item px-0 text-muted">Average Battery Life (in hours): <span class="text-black">6 Hours</span></li>
-											</ul>
-										</div>
-									</div>
-								</div>
-							</div>
-							<div class="tab-pane fade show" id="additionalInformation" role="tabpanel">
-								<div class="d-flex gap-3 align-items-center">
-									<h6 class="fw-bold mb-0">Serice CPU</h6>
-									<p class="text-secondary mb-0">core i3 / core i5 / core i7 / core i9</p>
-								</div>
-							</div>
-							<div class="tab-pane fade text-secondary mb-4" id="specification" role="tabpanel">
-								<div class="row align-items-center">
-									<div class="col-lg-6 col-md-12 mb-3">
-										<div class="me-3 small">
-											<ul class="list-group list-group-flush text-capitalize">
-												<li class="list-group-item px-0 text-muted">Liquid Retina display</li>
-												<li class="list-group-item px-0 text-muted">11-inch (diagonal) LED-backlit Multi‑Touch display with IPS technology</li>
-												<li class="list-group-item px-0 text-muted">2388-by-1668-pixel resolution at 264 pixels per inch (ppi)</li>
-												<li class="list-group-item px-0 text-muted">ProMotion technology</li>
-												<li class="list-group-item px-0 text-muted">Wide color display (P3)</li>
-												<li class="list-group-item px-0 text-muted">True Tone display</li>
-												<li class="list-group-item px-0 text-muted">Fingerprint-resistant oleophobic coating</li>
-												<li class="list-group-item px-0 text-muted">Fully laminated display</li>
-												<li class="list-group-item px-0 text-muted">Antireflective coating</li>
-												<li class="list-group-item px-0 text-muted">1.8% reflectivity</li>
-												<li class="list-group-item px-0 text-muted">600 nits brightness</li>
-											</ul>
-										</div>
-									</div>
-									<div class="col-lg-6 col-md-12 mb-3">
-										<div class="me-2 small">
-											<ul class="list-group list-group-flush text-capitalize">
-												<li class="list-group-item px-0 text-muted">Wide: 12MP, ƒ/1.8 aperture</li>
-												<li class="list-group-item px-0 text-muted">Ultra Wide: 10MP, ƒ/2.4 aperture, and 125° field of view</li>
-												<li class="list-group-item px-0 text-muted">2x optical zoom out; digital zoom up to 5x</li>
-												<li class="list-group-item px-0 text-muted">Five‑element lens (Wide and Ultra Wide)</li>
-												<li class="list-group-item px-0 text-muted">Brighter True Tone flash</li>
-												<li class="list-group-item px-0 text-muted">Panorama (up to 63MP)</li>
-												<li class="list-group-item px-0 text-muted">Sapphire crystal lens cover</li>
-												<li class="list-group-item px-0 text-muted">Backside illumination sensor</li>
-												<li class="list-group-item px-0 text-muted">Hybrid IR filter</li>
-												<li class="list-group-item px-0 text-muted">Autofocus with Focus Pixels (Wide)</li>
-												<li class="list-group-item px-0 text-muted">Tap to focus with Focus Pixels (Wide)</li>
-											</ul>
-										</div>
-									</div>
-								</div>
-							</div>
-							<div class="tab-pane fade text-capitalize" id="reviews" role="tabpanel">
-								<p class="fw-bold">3 reviews for microsoft surface laptop 3-15" touch-Screen</p>
-								<div class="row">
-									<div class="col-12 col-md-4 p-0">
-										<div class="d-flex flex-column align-items-center small bg-light p-3">
-											<p class="text-uppercase fw-bold small mb-0">customer reviews</p>
-											<div class="d-inline-block py-3">
-												<div class="bg-red h-9 w-9 d-flex justify-content-center align-items-center text-center rounded-circle">
-													<h4 class="fw-bold text-white mb-0">4.35</h4>
-												</div>
-											</div>
-											<div class="small py-2">
-												<i class="fas fa-star text-warning"></i>
-												<i class="fas fa-star text-warning"></i>
-												<i class="fas fa-star text-warning"></i>
-												<i class="fas fa-star text-warning"></i>
-												<i class="far fa-star text-warning"></i>
-												<span class="text-secondary">(3)</span>
-											</div>
-											<p class="text-capitalize">based on 3 reviews</p>
-										</div>
-									</div>
-									<div class="col-12 col-md-8 border p-4">
-										<div class="d-flex align-items-center p-1">
-											<div class="small text-nowrap">
-												<i class="fas fa-star text-warning"></i>
-												<i class="fas fa-star text-warning"></i>
-												<i class="fas fa-star text-warning"></i>
-												<i class="fas fa-star text-warning"></i>
-												<i class="far fa-star text-warning"></i>
-												<span class="text-secondary">(4)</span>
-											</div>
-											<div class="ms-2 small progress bg-secondary rounded-pill w-100 h-100 h-2">
-												<div class="progress-bar rounded-pill bg-warning w-75 h-100"></div>
-											</div>
-										</div>
-										<div class="d-flex align-items-center p-1">
-											<div class="small text-nowrap">
-												<i class="fas fa-star text-warning"></i>
-												<i class="fas fa-star text-warning"></i>
-												<i class="fas fa-star text-warning"></i>
-												<i class="far fa-star text-warning"></i>
-												<i class="far fa-star text-warning"></i>
-												<span class="text-secondary">(3)</span>
-											</div>
-											<div class="ms-2 small progress bg-secondary rounded-pill w-100 h-100 h-2">
-												<div class="progress-bar rounded-pill bg-warning w-50 h-100"></div>
-											</div>
-										</div>
-										<div class="d-flex align-items-center p-1">
-											<div class="small text-nowrap">
-												<i class="fas fa-star text-warning"></i>
-												<i class="fas fa-star text-warning"></i>
-												<i class="far fa-star text-warning"></i>
-												<i class="far fa-star text-warning"></i>
-												<i class="far fa-star text-warning"></i>
-												<span class="text-secondary">(2)</span>
-											</div>
-											<div class="ms-2 small progress bg-secondary rounded-pill w-100 h-100 h-2">
-												<div class="progress-bar rounded-pill bg-warning w-25 h-100"></div>
-											</div>
-										</div>
-										<div class="d-flex align-items-center p-1">
-											<div class="small text-nowrap">
-												<i class="fas fa-star text-warning"></i>
-												<i class="fas fa-star text-warning"></i>
-												<i class="far fa-star text-warning"></i>
-												<i class="far fa-star text-warning"></i>
-												<i class="far fa-star text-warning"></i>
-												<span class="text-secondary">(2)</span>
-											</div>
-											<div class="ms-2 small progress bg-secondary rounded-pill w-100 h-100 h-2">
-												<div class="progress-bar rounded-pill bg-warning w-25 h-100"></div>
-											</div>
-										</div>
-										<div class="d-flex align-items-center p-1">
-											<div class="small text-nowrap">
-												<i class="far fa-star text-warning"></i>
-												<i class="far fa-star text-warning"></i>
-												<i class="far fa-star text-warning"></i>
-												<i class="far fa-star text-warning"></i>
-												<i class="far fa-star text-warning"></i>
-												<span class="text-secondary">(0)</span>
-											</div>
-											<div class="ms-2 small progress bg-secondary rounded-pill w-100 h-100 h-2">
-												<div class="progress-bar rounded-pill bg-warning w-0 h-100"></div>
-											</div>
-										</div>
-									</div>
-								</div>
-								<!-- buttons -->
-								<div class="gap-2 d-flex flex-column flex-sm-row justify-content-center text-uppercase py-4">
-									<button class="hover-btn-bg-black btn rounded-0 border-dark bg-transparent text-uppercase box-shadow-none fw-bold px-3" type="button"><i class="fas fa-camera"> </i> <small> with images (0)</small></button>
-									<button class="hover-btn-bg-black btn rounded-0 border-dark bg-transparent text-uppercase box-shadow-none fw-bold px-3" type="button"><i class="fas fa-award"> </i> <small> verified (0)</small></button>
-									<div class="dropdown">
-										<button class="hover-btn-bg-black btn rounded-0 border-dark bg-transparent text-uppercase dropdown-toggle box-shadow-none fw-bold px-3 w-100 w-sm-auto" type="button" id="reviews-rating" data-bs-toggle="dropdown"><small>all stars(11)</small></button>
-										<ul class="dropdown-menu bg-light border-0 rounded-0 w-100 min-width-auto" aria-labelledby="reviews-rating">
-											<a class="dropdown-item small" href="#">all stars(11)</a>
-											<a class="dropdown-item small" href="#">5 stars(4)</a>
-											<a class="dropdown-item small" href="#">4 stars(3)</a>
-											<a class="dropdown-item small" href="#">3 stars(2)</a>
-											<a class="dropdown-item small" href="#">2 stars(2)</a>
-											<a class="dropdown-item small" href="#">1 stars(0)</a>
-										</ul>
-									</div>
-								</div>
-								<!-- submit-reviews -->
-								<div id="reviews">
-									<div class="d-flex gap-3 align-items-center py-4 border-bottom w-auto">
-										<div class="d-block mb-auto">
-											<img class="rounded-circle" src="/images/demo/reviews-1.jpeg" alt="image" />
-										</div>
-										<div class="small">
-											<i class="fas fa-star text-warning"></i>
-											<i class="fas fa-star text-warning"></i>
-											<i class="fas fa-star text-warning"></i>
-											<i class="fas fa-star text-warning"></i>
-											<i class="fas fa-star text-warning"></i>
-											<p class="fw-bold d-inline-block mb-2">MD. Sharif Ullah<span class="text-secondary">- september 13, 2021</span></p>
-											<p class="text-muted mb-0">I ordered on Friday evening and on Monday at 12:30 the package was with me. I have never encountered such a fast order processing.</p>
-										</div>
-									</div>
-									<div class="d-flex gap-3 align-items-center py-4 border-bottom">
-										<div class="d-block mb-auto">
-											<img class="rounded-circle" src="/images/demo/reviews-1.jpeg" alt="image" />
-										</div>
-										<div class="small">
-											<i class="fas fa-star text-warning"></i>
-											<i class="fas fa-star text-warning"></i>
-											<i class="fas fa-star text-warning"></i>
-											<i class="fas fa-star text-warning"></i>
-											<i class="fas fa-star text-warning"></i>
-											<p class="fw-bold d-inline-block mb-2">M H Shagor<span class="text-secondary">- september 13, 2021</span></p>
-											<p class="text-muted mb-0">Everything is perfect. I would recommend</p>
-										</div>
-									</div>
-									<div class="d-flex gap-3 align-items-center py-4 border-bottom">
-										<div class="d-block mb-auto">
-											<img class="rounded-circle" src="/images/demo/reviews-1.jpeg" alt="image" />
-										</div>
-										<div class="small">
-											<i class="fas fa-star text-warning"></i>
-											<i class="fas fa-star text-warning"></i>
-											<i class="fas fa-star text-warning"></i>
-											<i class="fas fa-star text-warning"></i>
-											<i class="fas fa-star text-warning"></i>
-											<p class="fw-bold d-inline-block mb-2">Dewan<span class="text-secondary">- september 13, 2021</span></p>
-											<p class="text-muted mb-0">I ordered on Friday evening and on Monday at 12:30 the package was with me. I have never encountered such a fast order processing.</p>
-										</div>
-									</div>
-									<div class="d-flex gap-3 align-items-center py-4">
-										<div class="d-block mb-auto">
-											<img class="rounded-circle" src="/images/demo/reviews-1.jpeg" alt="image" />
-										</div>
-										<div class="small">
-											<i class="fas fa-star text-warning"></i>
-											<i class="fas fa-star text-warning"></i>
-											<i class="fas fa-star text-warning"></i>
-											<i class="fas fa-star text-warning"></i>
-											<i class="fas fa-star text-warning"></i>
-											<p class="fw-bold d-inline-block mb-2">Rahman <span class="text-secondary">- september 13, 2021</span></p>
-											<p class="text-muted mb-0">There was a small mistake in the order. In return, I got the correct order and I could keep the wrong one for myself.</p>
-										</div>
-									</div>
-									<!-- form --text -->
-									<div class="small pt-3">
-										<p class="fw-bold mb-2">Add a review</p>
-										<p class="text-muted">Your email address will not be published. Required fields are marked *</p>
-									</div>
-									<div class="text-nowrap">
-										<p class="d-inline-block text-bold text-muted">your rating *</p>
-										<small class="small">
-											<i class="fas fa-star"></i>
-											<i class="fas fa-star"></i>
-											<i class="fas fa-star"></i>
-											<i class="fas fa-star"></i>
-											<i class="fas fa-star"></i>
-										</small>
-									</div>
-									<!-- ==== submit-reviews-form === -->
-									<form class="row g-3">
-										<div class="col-12">
-											<label for="exampleFormControlTextarea1" class="form-label text-bold text-muted">your review</label>
-											<textarea class="form-control rounded-0 box-shadow-none" id="exampleFormControlTextarea1" rows="2" required></textarea>
-										</div>
-										<div class="col-12">
-											<label for="exampleFormControlTextarea1" class="form-label text-bold text-muted">Choose pictures (maxsize: 50 kB, max files: 2)</label>
-											<input type="file" class="form-control rounded-0 box-shadow-none" aria-label="file example" required />
-											<div class="invalid-feedback">Example invalid form file feedback</div>
-										</div>
-										<div class="col-md-6">
-											<label class="form-label text-bold text-muted">Name</label>
-											<input type="name" class="form-control rounded-0 box-shadow-none" required />
-										</div>
-										<div class="col-md-6">
-											<label class="form-label text-bold text-muted">Email</label>
-											<input type="email" class="form-control rounded-0 box-shadow-none" required />
-										</div>
-										<div class="col-12">
-											<button type="submit" class="hover-btn-bg-black btn rounded-0 border border-dark bg-transparent text-uppercase small box-shadow-none btn-sm px-4">submit</button>
-										</div>
-									</form>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</section>
-		<!-- recomanded product -->
-		<!-- <SwiperC> -->
-		<!-- <swiper-slide v-for="(slideContent, index) in 10" :key="index" :virtualIndex="index">
-				<div class="card rounded-0 group-hover p-3">
-					<div class="overflow-hidden position-relative">
-						<img class="w-100" src="/images/demo/electronic-lp4.jpg" />
-						<div class="card-img-overlay rounded-0 d-flex p-0 bg-opacity-0 justify-content-end align-items-end bg-dark hover-bg-opacity-10 transition-1000">
-							<div class="btn-group-vertical transform-rotateY-90 hover-transform-rotateY-0 transition-500">
-								<a class="btn btn-light p-0 border-0"><i class="p-2 fas fa-random bg-white border"></i></a>
-								<a class="btn btn-light p-0 border-0"><i class="p-2 far fa-heart bg-white border"></i></a>
-							</div>
-						</div>
-					</div>
-					<div class="card-body text-capitalize small px-0">
-						<p class="mb-0 text-truncate">
-							samsung electronics <br />
-							samsung galaxy s21 5G
-						</p>
-					</div>
-					<div class="card-footer border-0 bg-transparent h-6 overflow-hidden p-0">
-						<div class="hover-mt-n25 transition-500 small">
-							<p class="mt-2 text-red-danger"><del class="text-secondary small">$799.00</del> $599.00</p>
-							<div class="text-uppercase small cursor-p">
-								<a class="text-decoration-none text-dark fw-bold">add to cart</a>
-								<div class="vr mx-1"></div>
-								<a class="text-decoration-none text-dark fw-bold">quick view</a>
-							</div>
-						</div>
-					</div>
-				</div>
-			</swiper-slide> -->
-		<!-- </SwiperC> -->
-		<section class="py-4 px-3">
-			<h4 class="fw-bolder text-capitalize text-center py-2">you may also like</h4>
-			<div class="container-lg position-relative group-btn-hover overflow-hidden group-hover-btn-opacity border p-0" id="autoCarousel"></div>
-		</section>
-	</Layout>
-</template>
diff --git a/src/components/views/header/TopHeader.vue b/src/components/views/header/TopHeader.vue
deleted file mode 100644
index c285517..0000000
--- a/src/components/views/header/TopHeader.vue
+++ /dev/null
@@ -1,495 +0,0 @@
-<script setup>
-	import { ref } from "vue"
-	import { authStore } from "../../../store/authStore"
-	const auth = authStore
-	import { cartStore } from "../../../store/cartStore"
-	const cart = cartStore
-	import { wishlistStore } from "../../../store/wishlistStore"
-	const wishlist = wishlistStore
-
-	const userEmail = ref("kminchelle")
-	const userPassword = ref("0lelplR")
-	import "bootstrap/dist/css/bootstrap.min.css"
-	import "bootstrap"
-
-	// if (true) {
-	// 	var myModal = new bootstrap.Modal(document.getElementById("userLoginModal")).show()
-	// }
-
-	/*
-	<?php
-			<?php
-
-				if (isset($signup_data['signup_modalErrors'])) {
-					?>
-						var myModal = new bootstrap.Modal(document.getElementById("<?php echo($signup_data['signup_modalErrors']?? ''); ?>")).show();
-					<?php
-				}
-	 */
-</script>
-<template>
-	<!--header-section-->
-	<div class="fixed-top bg-light transition-700" id="affix">
-		<section id="homeAdHeader" class="d-none d-md-block container-fluid bg-no-repeat bg-position-center bg-size-cover" style="background-image: url('/images/demo/store-noted-1.jpg')">
-			<!-- ad section -->
-			<div class="container-lg py-3">
-				<p class="mb-0 h5 font-monospace text-center text-uppercase fw-semibold">
-					<b class="text-red-danger">SENIOR’S MEMBER</b> DISCOUNT DAYS! SAVE <b class="text-red-danger">25%</b>
-					EACH TUESDAY
-				</p>
-			</div>
-		</section>
-		<!-- ad section end -->
-		<section id="homeHeader" class="bg-light border-bottom shadow-sm">
-			<div class="container-lg">
-				<!-- header " logo, search-bar, language, usd, icons "  end-->
-				<div class="row align-items-center">
-					<div class="col-12 col-md-3 order-2 order-md-1 text-center text-md-start">
-						<svg class="img-fluid max-h-7 ps-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-							<path
-								d="M502.9 266v69.7c0 62.1-50.3 112.4-112.4 112.4-61.8 0-112.4-49.8-112.4-111.3v-70.2l34.3 16 51.1-15.2V338c0 14.7 12 26.5 26.7 26.5S417 352.7 417 338v-72h85.9zm-224.7-58.2l34.3 16 51.1-15.2V173c0-60.5-51.1-109-112.1-109-60.8 0-112.1 48.2-112.1 108.2v162.4c0 14.9-12 26.7-26.7 26.7S86 349.5 86 334.6V266H0v69.7C0 397.7 50.3 448 112.4 448c61.6 0 112.4-49.5 112.4-110.8V176.9c0-14.7 12-26.7 26.7-26.7s26.7 12 26.7 26.7v30.9z"
-							/>
-						</svg>
-						<!-- <img class="img-fluid max-h-7 ps-2" src="../../../assets/vue.svg" alt="logo" /> -->
-					</div>
-					<div class="col-12 col-md-9 order-1 order-md-2">
-						<div class="row g-0 justify-content-center align-items-center">
-							<!-- header " search-bar" -->
-							<div id="homeLinkButton" class="col-auto py-2 d-md-none">
-								<button class="btn box-shadow-none text-body bg-transparent border-0" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample">
-									<i class="fas fa-bars"></i>
-								</button>
-							</div>
-							<div class="col px-0">
-								<form action="" class="row g-0 border" id="category-search-box">
-									<div class="col-4 d-none d-lg-block border-end">
-										<select name="" id="" class="form-select placeholder-sm rounded-0 border-0">
-											<option>All Category</option>
-											<option value="">Accessories</option>
-											<option value="backup-charger">Backup Charger</option>
-											<option value="headphone">Headphone</option>
-											<option value="powre-socket">Powre Socket</option>
-											<option value="printer">Printer</option>
-											<option value="usb">USB</option>
-											<option value="webcam">Webcam</option>
-											<option value="wi-fi-router">Wi-Fi Router</option>
-											<option value="">Accessories</option>
-											<option value="backup-charger">Backup Charger</option>
-											<option value="headphone">Headphone</option>
-											<option value="powre-socket">Powre Socket</option>
-											<option value="printer">Printer</option>
-											<option value="usb">USB</option>
-											<option value="webcam">Webcam</option>
-											<option value="wi-fi-router">Wi-Fi Router</option>
-											<option value="">Accessories</option>
-											<option value="backup-charger">Backup Charger</option>
-											<option value="headphone">Headphone</option>
-											<option value="powre-socket">Powre Socket</option>
-											<option value="printer">Printer</option>
-											<option value="usb">USB</option>
-											<option value="webcam">Webcam</option>
-											<option value="wi-fi-router">Wi-Fi Router</option>
-											<option value="cameras-photos">Cameras & Photos</option>
-										</select>
-									</div>
-									<div class="col input-group">
-										<input type="text " class="form-control rounded-0 border-0 placeholder-sm" placeholder="Search for Product" />
-										<button class="input-group-text border-0 rounded-0 bg-white"><i class="fa fa-search"></i></button>
-									</div>
-								</form>
-							</div>
-							<!-- "User Access" start-->
-							<div id="main-nav-user" class="col-auto py-2 ms-auto">
-								<ul class="nav text-uppercase small align-items-center">
-									<li class="nav-item d-none d-md-block">
-										<a class="nav-link text-s" href=" # ">english</a>
-									</li>
-									<li class="nav-item d-none d-md-block">
-										<a class="nav-link" href="# ">usd</a>
-									</li>
-									<!-- user login / register -->
-									<li class="nav-item d-none d-md-block">
-										<div class="dropdown text-end" v-if="auth.isAuthenticated">
-											<button class="d-block link-body-emphasis text-decoration-none data-toggle" data-bs-toggle="dropdown">
-												<img class="block object-cover rounded-circle" :src="auth.user.image" alt="image" width="32" height="32" />
-											</button>
-											<ul class="dropdown-menu text-small" style="">
-												<li><router-link :to="{ name: 'dashboard' }" class="dropdown-item" href="#">Dashboard</router-link></li>
-												<li><a class="dropdown-item" href="#">Settings</a></li>
-												<li><a class="dropdown-item" href="#">Profile</a></li>
-												<li><hr class="dropdown-divider" /></li>
-												<li><a class="dropdown-item" type="button" @click="auth.logout">Log Out</a></li>
-											</ul>
-										</div>
-										<a v-if="!auth.isAuthenticated" class="nav-link" data-bs-toggle="modal" href="#userLoginModal" role="button">
-											<svg xmlns="http://www.w3.org/2000/svg" height="1.2em" viewBox="0 0 448 512">
-												<path
-													d="M304 128a80 80 0 1 0 -160 0 80 80 0 1 0 160 0zM96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM49.3 464H398.7c-8.9-63.3-63.3-112-129-112H178.3c-65.7 0-120.1 48.7-129 112zM0 482.3C0 383.8 79.8 304 178.3 304h91.4C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3z"
-												/>
-											</svg>
-										</a>
-									</li>
-									<li class="nav-item d-none d-md-block">
-										<button class="nav-link position-relative" data-bs-toggle="offcanvas" data-bs-target="#wishlistProduct">
-											<svg xmlns="http://www.w3.org/2000/svg" height="1.2em" viewBox="0 0 512 512">
-												<path
-													d="M225.8 468.2l-2.5-2.3L48.1 303.2C17.4 274.7 0 234.7 0 192.8v-3.3c0-70.4 50-130.8 119.2-144C158.6 37.9 198.9 47 231 69.6c9 6.4 17.4 13.8 25 22.3c4.2-4.8 8.7-9.2 13.5-13.3c3.7-3.2 7.5-6.2 11.5-9c0 0 0 0 0 0C313.1 47 353.4 37.9 392.8 45.4C462 58.6 512 119.1 512 189.5v3.3c0 41.9-17.4 81.9-48.1 110.4L288.7 465.9l-2.5 2.3c-8.2 7.6-19 11.9-30.2 11.9s-22-4.2-30.2-11.9zM239.1 145c-.4-.3-.7-.7-1-1.1l-17.8-20c0 0-.1-.1-.1-.1c0 0 0 0 0 0c-23.1-25.9-58-37.7-92-31.2C81.6 101.5 48 142.1 48 189.5v3.3c0 28.5 11.9 55.8 32.8 75.2L256 430.7 431.2 268c20.9-19.4 32.8-46.7 32.8-75.2v-3.3c0-47.3-33.6-88-80.1-96.9c-34-6.5-69 5.4-92 31.2c0 0 0 0-.1 .1s0 0-.1 .1l-17.8 20c-.3 .4-.7 .7-1 1.1c-4.5 4.5-10.6 7-16.9 7s-12.4-2.5-16.9-7z"
-												/>
-											</svg>
-											<span v-if="wishlist.totalItems" class="position-absolute ms-n2 mt-2 top-0 start-100 translate-middle badge rounded-pill bg-red-danger">{{ wishlist.totalItems }}</span>
-										</button>
-									</li>
-									<li class="nav-item">
-										<button class="nav-link position-relative" data-bs-toggle="offcanvas" data-bs-target="#cartProduct">
-											<svg xmlns="http://www.w3.org/2000/svg" height="1.2em" viewBox="0 0 640 512">
-												<path
-													d="M0 32C0 14.3 14.3 0 32 0H48c44.2 0 80 35.8 80 80V368c0 8.8 7.2 16 16 16H608c17.7 0 32 14.3 32 32s-14.3 32-32 32H541.3c1.8 5 2.7 10.4 2.7 16c0 26.5-21.5 48-48 48s-48-21.5-48-48c0-5.6 1-11 2.7-16H253.3c1.8 5 2.7 10.4 2.7 16c0 26.5-21.5 48-48 48s-48-21.5-48-48c0-5.6 1-11 2.7-16H144c-44.2 0-80-35.8-80-80V80c0-8.8-7.2-16-16-16H32C14.3 64 0 49.7 0 32zM432 96V56c0-4.4-3.6-8-8-8H344c-4.4 0-8 3.6-8 8V96h96zM288 96V56c0-30.9 25.1-56 56-56h80c30.9 0 56 25.1 56 56V96 320H288V96zM512 320V96h16c26.5 0 48 21.5 48 48V272c0 26.5-21.5 48-48 48H512zM240 96h16V320H240c-26.5 0-48-21.5-48-48V144c0-26.5 21.5-48 48-48z"
-												/>
-											</svg>
-											<span v-if="cart.totalItems" class="position-absolute ms-n2 mt-2 top-0 start-100 translate-middle badge rounded-pill bg-red-danger">{{ cart.totalItems }}</span>
-										</button>
-									</li>
-								</ul>
-							</div>
-							<!-- header " language, usd, icons " end -->
-						</div>
-					</div>
-				</div>
-			</div>
-		</section>
-		<!-- header " main-manu, nav-bar, information --start- " -->
-		<section id="homeNav" class="d-none d-md-block">
-			<!-- main-manu-icon and category    start       -->
-			<div class="container-lg">
-				<div class="row justify-content-center align-items-center">
-					<!-- nav-bar and pages-link start-->
-					<div class="col small">
-						<nav class="d-flex">
-							<button class="btn btn-light box-shadow-none p-0 border-0 bg-transparent me-2" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample">
-								<i class="fas fa-bars"></i>
-							</button>
-							<ul class="nav text-uppercase small">
-								<li class="nav-item"><router-link to="/" class="nav-link px-3 text-black">Homepages</router-link></li>
-								<li class="nav-item"><a href="# " class="nav-link px-3 text-black">Blog</a></li>
-								<li class="nav-item"><a href="#" class="nav-link px-3 text-black">Page</a></li>
-								<li class="nav-item"><router-link :to="{ name: 'shop' }" class="nav-link px-3 text-black">Shop</router-link></li>
-								<li class="nav-item"><a href="testing.html" class="nav-link px-3 text-black">About us</a></li>
-								<li class="nav-item"><a href="# " class="nav-link px-3 text-black">Contact us</a></li>
-								<li class="nav-item"><a href="# " class="nav-link px-3 fw-bold h6 mb-0 text-red-danger">hot deals!</a></li>
-							</ul>
-						</nav>
-					</div>
-					<!-- nav-bar and pages-link end-->
-					<!-- nav-bar and pages-link start-->
-					<div class="col-auto text-end p-0">
-						<nav class="small">
-							<ul class="nav text-uppercase small">
-								<li class="nav-item">
-									<a href="# " class="nav-link text-black py-3">Recently Viewed</a>
-								</li>
-								<li class="nav-item d-none d-lg-block text-black">
-									<a href="# " class="nav-link py-3"> <i class="fas fa-mobile-alt text-red-danger"></i> +8801909055573</a>
-								</li>
-							</ul>
-						</nav>
-					</div>
-				</div>
-				<!-- main-manu-icon and category    end       -->
-			</div>
-		</section>
-		<!-- header " main-manu, nav-bar, information --end " -->
-		<div class="offcanvas offcanvas-start text-start" tabindex="-1" id="offcanvasExample">
-			<div class="offcanvas-header pt-4 px-4">
-				<h5 class="offcanvas-title small fw-bolder" id="offcanvasExampleLabel">ALL DEPARTMENTS</h5>
-				<button type="button" class="btn-close text-reset box-shadow-none" data-bs-dismiss="offcanvas" aria-label="Close"></button>
-			</div>
-			<div class="offcanvas-body text-uppercase small py-1 scroll-sm px-4 scroll-sm">
-				<div class="accordion accordion-flush opacity-100 scroll-lg" id="accordionPanelsStayOpenExample">
-					<div class="accordion-item">
-						<div class="accordion-header h6 py-2">
-							<a href="#" class="text-decoration-none small text-black d-block">hot deals!</a>
-						</div>
-					</div>
-					<div class="accordion-item">
-						<div class="accordion-header h6 py-2">
-							<a href="" class="text-decoration-none small text-black d-block">top 100 offers</a>
-						</div>
-					</div>
-					<div class="accordion-item">
-						<div class="accordion-header accordion-button collapsed py-2 px-0" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree">
-							<h6 class="small mb-0">smartphone & tablet</h6>
-						</div>
-						<div id="collapseThree" class="accordion-collapse collapse transition-1000" aria-labelledby="panelsStayOpen-headingOne">
-							<div class="accordion-body">
-								<ul class="list-group text-muted list-group-transparent list-group-border-0 text-capitalize ps-0">
-									<a href="#" class="list-group-item list-group-item-action text-muted px-0">samsung</a>
-									<a href="#" class="list-group-item list-group-item-action text-muted px-0">xiaomi</a>
-									<a href="#" class="list-group-item list-group-item-action text-muted px-0">ipad</a>
-									<a href="#" class="list-group-item list-group-item-action text-muted px-0">realme</a>
-									<a href="#" class="list-group-item list-group-item-action text-muted px-0">vivo</a>
-									<a href="#" class="list-group-item list-group-item-action text-muted px-0">iphone</a>
-									<a href="#" class="list-group-item list-group-item-action text-muted px-0">oppo</a>
-									<a href="#" class="list-group-item list-group-item-action text-muted px-0">nokia</a>
-									<a href="#" class="list-group-item list-group-item-action text-muted px-0">symphony</a>
-									<a href="#" class="list-group-item list-group-item-action text-muted px-0">motorola</a>
-									<a href="#" class="list-group-item list-group-item-action text-muted px-0">onePlus</a>
-									<a href="#" class="list-group-item list-group-item-action text-muted px-0">google</a>
-									<a href="#" class="list-group-item list-group-item-action text-muted px-0">lenovo</a>
-									<a href="#" class="list-group-item list-group-item-action text-muted px-0">sony</a>
-									<a href="#" class="list-group-item list-group-item-action text-muted px-0">LG</a>
-								</ul>
-							</div>
-						</div>
-					</div>
-					<div class="accordion-item">
-						<div class="accordion-header accordion-button py-2 px-0" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour">
-							<h6 class="small mb-0">computer & laptop</h6>
-						</div>
-						<div id="collapseFour" class="accordion-collapse collapse transition-1000" aria-labelledby="panelsStayOpen-headingOne">
-							<div class="accordion-body text-capitalize">
-								<ul class="list-group text-muted list-group-transparent list-group-border-0 text-capitalize ps-0">
-									<a href="#" class="list-group-item list-group-item-action text-muted px-0">dell</a>
-									<a href="#" class="list-group-item list-group-item-action text-muted px-0">Acer</a>
-									<a href="#" class="list-group-item list-group-item-action text-muted px-0">apple</a>
-									<a href="#" class="list-group-item list-group-item-action text-muted px-0">hp</a>
-									<a href="#" class="list-group-item list-group-item-action text-muted px-0">google</a>
-									<a href="#" class="list-group-item list-group-item-action text-muted px-0">microsoft</a>
-									<a href="#" class="list-group-item list-group-item-action text-muted px-0">asus</a>
-									<a href="#" class="list-group-item list-group-item-action text-muted px-0">samsung</a>
-									<a href="#" class="list-group-item list-group-item-action text-muted px-0">lenovo</a>
-								</ul>
-							</div>
-						</div>
-					</div>
-					<div class="accordion-item">
-						<div class="accordion-header accordion-button py-2 px-0" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive">
-							<h6 class="small mb-0">tv & audio</h6>
-						</div>
-						<div id="collapseFive" class="accordion-collapse collapse transition-1000" aria-labelledby="panelsStayOpen-headingOne">
-							<div class="accordion-body">
-								<ul class="list-group text-muted list-group-transparent list-group-border-0 text-capitalize ps-0">
-									<a href="#" class="list-group-item list-group-item-action text-muted px-0">sony</a>
-									<a href="#" class="list-group-item list-group-item-action text-muted px-0">samsung</a>
-									<a href="#" class="list-group-item list-group-item-action text-muted px-0">LG</a>
-									<a href="#" class="list-group-item list-group-item-action text-muted px-0">Mi</a>
-									<a href="#" class="list-group-item list-group-item-action text-muted px-0">walton</a>
-									<a href="#" class="list-group-item list-group-item-action text-muted px-0">singer</a>
-									<a href="#" class="list-group-item list-group-item-action text-muted px-0">acer</a>
-									<a href="#" class="list-group-item list-group-item-action text-muted px-0">minister</a>
-								</ul>
-							</div>
-						</div>
-					</div>
-					<div class="accordion-item">
-						<div class="accordion-header accordion-button py-2 px-0" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSix">
-							<h6 class="small mb-0">games & accessories</h6>
-						</div>
-						<div id="collapseSix" class="accordion-collapse collapse transition-1000" aria-labelledby="panelsStayOpen-headingOne">
-							<div class="accordion-body">
-								<ul class="list-group text-muted list-group-transparent list-group-border-0 text-capitalize">
-									<a href="#" class="list-group-item list-group-item-action text-muted px-0">gaming chair</a>
-									<a href="#" class="list-group-item list-group-item-action text-muted px-0">gaming sofa</a>
-									<a href="#" class="list-group-item list-group-item-action text-muted px-0">keyboard</a>
-									<a href="#" class="list-group-item list-group-item-action text-muted px-0">mouse</a>
-									<a href="#" class="list-group-item list-group-item-action text-muted px-0">headphone</a>
-									<a href="#" class="list-group-item list-group-item-action text-muted px-0">mouse pad</a>
-									<a href="#" class="list-group-item list-group-item-action text-muted px-0">gamepad</a>
-									<a href="#" class="list-group-item list-group-item-action text-muted px-0">gaming console</a>
-									<a href="#" class="list-group-item list-group-item-action text-muted px-0">gaming desk</a>
-									<a href="#" class="list-group-item list-group-item-action text-muted px-0">games</a>
-								</ul>
-							</div>
-						</div>
-					</div>
-					<div class="accordion-item">
-						<div class="accordion-header accordion-button py-2 px-0" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSaven">
-							<h6 class="small mb-0">electronic & housewares</h6>
-						</div>
-						<div id="collapseSaven" class="accordion-collapse collapse transition-1000" aria-labelledby="panelsStayOpen-headingOne">
-							<div class="accordion-body">
-								<ul class="list-group text-muted list-group-transparent list-group-border-0 text-capitalize ps-0">
-									<a href="#" class="list-group-item list-group-item-action text-muted px-0">induction cooker</a>
-									<a href="#" class="list-group-item list-group-item-action text-muted px-0">electronic cooker</a>
-									<a href="#" class="list-group-item list-group-item-action text-muted px-0">diswasher</a>
-									<a href="#" class="list-group-item list-group-item-action text-muted px-0">humidifier</a>
-									<a href="#" class="list-group-item list-group-item-action text-muted px-0">air purifier</a>
-									<a href="#" class="list-group-item list-group-item-action text-muted px-0">sewing maching</a>
-									<a href="#" class="list-group-item list-group-item-action text-muted px-0">washing maching</a>
-									<a href="#" class="list-group-item list-group-item-action text-muted px-0">fruit maching</a>
-								</ul>
-							</div>
-						</div>
-					</div>
-					<div class="accordion-item">
-						<div class="accordion-header accordion-button py-2 px-0" type="button" data-bs-toggle="collapse" data-bs-target="#collapseEight">
-							<h6 class="small mb-0">cameras & photos</h6>
-						</div>
-						<div id="collapseEight" class="accordion-collapse collapse transition-1000" aria-labelledby="panelsStayOpen-headingOne">
-							<div class="accordion-body">
-								<ul class="list-group text-muted list-group-transparent list-group-border-0 text-capitalize ps-0">
-									<a href="#" class="list-group-item list-group-item-action text-muted px-0">iphone</a>
-									<a href="#" class="list-group-item list-group-item-action text-muted px-0">ipad</a>
-									<a href="#" class="list-group-item list-group-item-action text-muted px-0">samsung</a>
-									<a href="#" class="list-group-item list-group-item-action text-muted px-0">realme</a>
-									<a href="#" class="list-group-item list-group-item-action text-muted px-0">nokia</a>
-									<a href="#" class="list-group-item list-group-item-action text-muted px-0">ipad</a>
-									<a href="#" class="list-group-item list-group-item-action text-muted px-0">samsung</a>
-									<a href="#" class="list-group-item list-group-item-action text-muted px-0">vivo</a>
-								</ul>
-							</div>
-						</div>
-					</div>
-					<div class="accordion-item">
-						<div class="accordion-header accordion-button py-2 px-0" type="button" data-bs-toggle="collapse" data-bs-target="#collapseNine">
-							<h6 class="small mb-0">accessories</h6>
-						</div>
-						<div id="collapseNine" class="accordion-collapse collapse transition-1000" aria-labelledby="panelsStayOpen-headingOne">
-							<div class="accordion-body">
-								<ul class="list-group text-muted transition-1000 list-group-transparent list-group-border-0 text-capitalize ps-0">
-									<a href="#" class="list-group-item list-group-item-action text-muted px-0">iphone</a>
-									<a href="#" class="list-group-item list-group-item-action text-muted px-0">ipad</a>
-									<a href="#" class="list-group-item list-group-item-action text-muted px-0">samsung</a>
-									<a href="#" class="list-group-item list-group-item-action text-muted px-0">items</a>
-									<a href="#" class="list-group-item list-group-item-action text-muted px-0">items</a>
-									<a href="#" class="list-group-item list-group-item-action text-muted px-0">ipad</a>
-									<a href="#" class="list-group-item list-group-item-action text-muted px-0">samsung</a>
-									<a href="#" class="list-group-item list-group-item-action text-muted px-0">items</a>
-								</ul>
-							</div>
-						</div>
-					</div>
-					<!-- Accoridion item end-->
-				</div>
-			</div>
-		</div>
-	</div>
-
-	<!-- product wishlist offcancvas -->
-	<div class="offcanvas offcanvas-end" tabindex="-1" id="wishlistProduct" aria-labelledby="wishlistProductLabel">
-		<div class="offcanvas-header px-3 py-2 border-b">
-			<h5 class="offcanvas-title" id="wishlistProductLabel">Wishlist</h5>
-			<button type="button" data-bs-dismiss="offcanvas">X</button>
-		</div>
-		<div class="offcanvas-body d-flex flex-column w-100 py-2">
-			<div class="flex-grow-1">
-				<div v-for="(item, index) in wishlist.items" :key="index" class="w-100 m-auto relative row overflow-hidden border mb-1 group-hover" style="height: 80px">
-					<button @click="wishlist.removeItem(item.product.id)" class="absolute top-0 bottom-0 end-0 start-0 m-auto text-center bg-danger text-light invisible hover-visible rounded-circle h-6 w-6">X</button>
-					<div class="col-4 p-0">
-						<img :src="item.product.thumbnail ?? ''" class="h-100 w-100 object-fit-cover" alt="..." />
-					</div>
-					<div class="col-8 p-0 px-2">
-						<h5 class="card-title">{{ item.product.title }}</h5>
-						<p class="small flex just:ify-items-center justify-content-between"><strong>Price:</strong> $ {{ item.product.price }}</p>
-						<p class="small flex justify-items-center justify-content-between"><strong>InStock:</strong> {{ item.product.stock }}</p>
-					</div>
-				</div>
-				<h1 v-if="0 == Object.entries(wishlist.items).length" class="text-secondary text-center fw-700">No Wishlist Found</h1>
-			</div>
-		</div>
-		<div class="w-100 border-top px-3 py-2">
-			<div class="mb-2 w-100 shrink-0 d-flex justify-items-center justify-content-between">
-				<strong>Quantity</strong>
-				<strong>{{ wishlist.totalItems }}</strong>
-			</div>
-			<button @click="wishlist.emptyCart()" type="button" class="hover-text-white rounded-none block w-100 btn text-danger btn-danger">Empty Wishlist</button>
-		</div>
-	</div>
-	<!-- product cart offcancvas -->
-	<div class="offcanvas offcanvas-end" tabindex="-1" id="cartProduct" aria-labelledby="cartProductLabel">
-		<div class="offcanvas-header px-3 py-2 border-b">
-			<h5 class="offcanvas-title" id="cartProductLabel">Cart List</h5>
-			<button type="button" data-bs-dismiss="offcanvas">X</button>
-		</div>
-		<div class="offcanvas-body d-flex flex-column py-2">
-			<div class="flex-grow-1">
-				<div v-for="(item, index) in cart.items" :key="index" class="w-full mx-auto relative row overflow-hidden border mb-1 group-hover" style="height: 80px">
-					<button @click="cart.removeItem(item.product.id)" class="absolute top-0 bottom-0 end-0 start-0 m-auto text-center bg-danger text-light invisible hover-visible rounded-circle h-6 w-6">X</button>
-					<div class="col-4 p-0">
-						<img :src="item.product.thumbnail ?? ''" class="h-100 w-100 object-fit-cover" alt="..." />
-					</div>
-					<div class="col-7 p-0 px-2">
-						<h5 class="card-title">{{ item.product.title }}</h5>
-						<p class="small flex just:ify-items-center justify-content-between"><strong>Price:</strong> $ {{ item.product.price }}</p>
-						<p class="small flex justify-items-center justify-content-between"><strong>InStock:</strong> {{ item.product.stock }}</p>
-					</div>
-					<div class="col-1 p-0">
-						<div class="h-100 d-flex flex-column w-100 gap-0 border border-secondary">
-							<button @click="item.quantity++" class="p-0 h-5 btn rounded-0 box-shadow-none btn-success">+</button>
-							<input type="text" readonly class="p-0 h-6 block form-control-sm border-0 rounded-0 outline-0 text-center" v-model="item.quantity" />
-							<button @click="item.quantity--" class="p-0 h-5 btn rounded-0 box-shadow-none btn-danger">-</button>
-						</div>
-					</div>
-				</div>
-				<h1 v-if="0 == Object.entries(cart.items).length" class="text-secondary text-center fw-700">No Cart Found</h1>
-			</div>
-		</div>
-		<div class="w-100 border-top px-3 py-2">
-			<div class="w-100 shrink-0 d-flex justify-items-center justify-content-between">
-				<strong>Quantity</strong>
-				<strong>{{ cart.totalItems }}</strong>
-			</div>
-			<div class="mb-2 w-100 shrink-0 d-flex justify-items-center justify-content-between">
-				<strong>Total Pirce</strong>
-				<strong>$ {{ cart.totalPrice }}</strong>
-			</div>
-			<div class="w-full d-flex align-items-center justify-content-between gap-1">
-				<button @click="cart.saveCartInLocalStorage()" type="button" class="rounded-none block w-100 btn text-secondary btn-secondary hover-text-white" style="--bs-link-hover-color-rgb: 25, 135, 84">Update</button>
-				<button @click="cart.emptyCart()" type="button" class="hover-text-white rounded-none block w-100 btn text-danger btn-danger">Empty Cart</button>
-			</div>
-		</div>
-	</div>
-	<!-- user auth -->
-	<div class="modal fade" id="userLoginModal" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
-		<div class="modal-dialog modal-dialog-centered">
-			<div class="modal-content">
-				<div class="modal-header bg-success border-0 py-2 text-white">
-					<h4 class="modal-title ps-3 ms-auto" id="login_modal">Login</h4>
-					<a class="ms-auto text-decoration-none text-white" data-bs-dismiss="modal" type="button" aria-label="Close"><i class="fas fa-times d-block fs-4"></i>X</a>
-				</div>
-				<div class="modal-body">
-					<!-- login form-->
-					<form @submit.prevent="auth.authenticate(userEmail, userPassword)" class="row">
-						<div class="">
-							<label class="form-label">Email</label>
-							<input type="text" name="userEmail" v-model="userEmail" class="form-control box-shadow-none" placeholder="Email" />
-							<div class="text-danger fw-bold">{{ auth.message }}</div>
-						</div>
-						<div class="">
-							<label class="form-label">Password</label>
-							<input type="password" name="userPassword" autocomplete="" v-model="userPassword" class="form-control box-shadow-none" placeholder="Password" />
-							<div class="text-danger fw-bold"></div>
-						</div>
-						<div class="d-flex flex-column py-3 gap-3">
-							<button class="w-100 btn btn-primary py-1 box-shadow-none text-primary hover-bg-primary hover-text-light">Login</button>
-							<a class="w-100 text-secondary" data-bs-target="#userRegisterModal" data-bs-toggle="modal" type="button">Click here for reginster</a>
-						</div>
-					</form>
-				</div>
-			</div>
-		</div>
-	</div>
-	<div class="modal fade" id="userRegisterModal" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
-		<div class="modal-dialog modal-dialog-centered">
-			<div class="modal-content">
-				<div class="modal-header">
-					<h1 class="modal-title fs-5" id="exampleModalToggleLabel2">Modal 2</h1>
-					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-				</div>
-				<div class="modal-body">Hide this modal and show the first with the button below.</div>
-				<div class="modal-footer">
-					<button class="btn btn-primary" data-bs-target="#userLoginModal" data-bs-toggle="modal">Back to first</button>
-				</div>
-			</div>
-		</div>
-	</div>
-</template>
-<style scoped>
-	.hover-text-white:hover {
-		color: white !important;
-	}
-	.group-hover:hover .hover-visible,
-	.hover-visible:hover {
-		visibility: visible !important;
-		z-index: 50;
-	}
-</style>
diff --git a/src/components/views/home/Accessories.vue b/src/components/views/home/Accessories.vue
deleted file mode 100644
index 9fd916a..0000000
--- a/src/components/views/home/Accessories.vue
+++ /dev/null
@@ -1,266 +0,0 @@
-<script setup></script>
-
-<template>
-	<!--game and camera accessories blank-section-->
-
-	<section id="gameCameraAccessories">
-		<div class="container-lg">
-			<div class="py-2 my-1">
-				<h4 class="fw-bolder m-0">Games, Cameras, Accessories</h4>
-			</div>
-			<div class="row justify-content-center p-0 g-3 g-sm-0">
-				<div class="col-10 col-sm-6 col-md-6 col-lg-5 p-0 text-capitalize">
-					<div class="card rounded-0 group-hover cursor-pointer p-2 h-100">
-						<div class="overflow-hidden position-relative">
-							<img class="img-fluid" src="images/demo/electronic-gca1.jpg" />
-							<div class="card-img-overlay rounded-0 d-flex p-0 bg-opacity-0 justify-content-end align-items-end bg-dark hover-bg-opacity-10 transition-1000">
-								<div class="btn-group-vertical transform-rotateY-90 hover-transform-rotateY-0 transition-500">
-									<a class="btn btn-light p-0 border-0"><i class="p-2 fas fa-random bg-white border"></i></a>
-									<a class="btn btn-light p-0 border-0"><i class="p-2 far fa-heart bg-white border"></i></a>
-								</div>
-							</div>
-						</div>
-						<div class="card-body small px-0">
-							<p class="mb-2 text-white bg-red-danger p-2 w-50">488d: 19h : 59m : 45s</p>
-							<p class="m-0 text-secondary text-uppercase">sold:<span class="text-red-danger"> 25</span> / 50</p>
-							<div class="progress bg-grayred rounded-pill h-2">
-								<div class="progress-bar rounded-pill w-50 bg-red-danger"></div>
-							</div>
-							<h5 class="pt-2 m-0 text-truncate">miles morales ultimate launch edition</h5>
-							<div class="p-0 m-0 text-warning">
-								<i class="fas fa-star"></i>
-								<i class="fas fa-star"></i>
-								<i class="fas fa-star"></i>
-								<i class="fas fa-star"></i>
-								<i class="fas fa-star"></i>
-							</div>
-						</div>
-						<div class="card-footer border-0 bg-transparent h-6 overflow-hidden p-0">
-							<div class="hover-mt-n25 transition-500">
-								<p class="text-red-danger mt-1"><del class="text-secondary small">$599.00</del> $399.00</p>
-								<div class="text-uppercase small">
-									<a class="text-decoration-none text-dark fw-bold small">add to cart</a>
-									<div class="vr mx-1"></div>
-									<a class="text-decoration-none text-dark fw-bold small">quick view</a>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-				<div class="col-10 col-sm-6 d-md-none p-0 text-capitalize h-100">
-					<div class="card rounded-0 group-hover h-100 cursor-pointer p-2">
-						<div class="overflow-hidden position-relative">
-							<img class="img-fluid" src="images/demo/electronic-gca8.jpg" />
-							<div class="card-img-overlay rounded-0 d-flex p-0 bg-opacity-0 justify-content-end align-items-end bg-dark hover-bg-opacity-10 transition-1000">
-								<div class="btn-group-vertical transform-rotateY-90 hover-transform-rotateY-0 transition-500">
-									<a class="btn btn-light p-0 border-0"><i class="p-2 fas fa-random bg-white border"></i></a>
-									<a class="btn btn-light p-0 border-0"><i class="p-2 far fa-heart bg-white border"></i></a>
-								</div>
-							</div>
-						</div>
-						<div class="card-body small px-0">
-							<p class="mb-2 text-white bg-red-danger p-2 w-50">488d: 19h : 59m : 45s</p>
-							<p class="m-0 text-secondary text-uppercase">sold:<span class="text-red-danger"> 25</span> / 50</p>
-							<div class="progress bg-grayred rounded-pill h-2">
-								<div class="progress-bar rounded-pill w-50 bg-red-danger"></div>
-							</div>
-							<h5 class="pt-2 m-0 text-truncate">panasonic 4k digital camera, 18.1 megapixel</h5>
-							<div class="p-0 m-0 text-warning">
-								<i class="fas fa-star"></i>
-								<i class="fas fa-star"></i>
-								<i class="fas fa-star"></i>
-								<i class="fas fa-star"></i>
-								<i class="fas fa-star"></i>
-							</div>
-						</div>
-						<div class="card-footer border-0 bg-transparent h-6 overflow-hidden p-0">
-							<div class="hover-mt-n25 transition-500">
-								<p class="text-red-danger mt-1"><del class="text-secondary small">$599.00</del> $399.00</p>
-								<div class="text-uppercase small">
-									<a class="text-decoration-none text-dark fw-bold small">add to cart</a>
-									<div class="vr mx-1"></div>
-									<a class="text-decoration-none text-dark fw-bold small">quick view</a>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-				<div class="col-12 col-md-6 col-lg-7 p-0 text-capitalize">
-					<div class="row justify-content-center p-0 g-3 g-sm-0 m-0">
-						<div class="col-10 col-sm-4 col-md-6 col-lg-4 p-0">
-							<div class="card rounded-0 group-hover p-2 h-100">
-								<div class="overflow-hidden position-relative">
-									<img class="img-fluid" src="images/demo/electronic-gca2.jpg " />
-									<div class="card-img-overlay rounded-0 d-flex p-0 bg-opacity-0 justify-content-end align-items-end bg-dark hover-bg-opacity-10 transition-1000">
-										<div class="btn-group-vertical transform-rotateY-90 hover-transform-rotateY-0 transition-500">
-											<a class="btn btn-light p-0 border-0"><i class="p-2 fas fa-random bg-white border"></i></a>
-											<a class="btn btn-light p-0 border-0"><i class="p-2 far fa-heart bg-white border"></i></a>
-										</div>
-									</div>
-								</div>
-								<div class="card-body small px-0">
-									<p class="mb-0 text-truncate">
-										canon digital camera <br />
-										w/ 42x optical zoom
-									</p>
-								</div>
-								<div class="card-footer border-0 bg-transparent h-6 overflow-hidden p-0">
-									<div class="hover-mt-n25 transition-500 small">
-										<p class="mt-2">$56.00</p>
-										<div class="text-uppercase small cursor-pointer">
-											<a class="text-decoration-none text-dark fw-bold">add to cart</a>
-											<div class="vr mx-1"></div>
-											<a class="text-decoration-none text-dark fw-bold">quick view</a>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-						<div class="col-10 col-sm-4 col-md-6 col-lg-4 p-0">
-							<div class="card rounded-0 group-hover p-2 h-100">
-								<div class="overflow-hidden position-relative">
-									<img class="img-fluid" src="images/demo/electronic-gca3.jpg " />
-									<div class="card-img-overlay rounded-0 d-flex p-0 bg-opacity-0 justify-content-end align-items-end bg-dark hover-bg-opacity-10 transition-1000">
-										<div class="btn-group-vertical transform-rotateY-90 hover-transform-rotateY-0 transition-500">
-											<a class="btn btn-light p-0 border-0"><i class="p-2 fas fa-random bg-white border"></i></a>
-											<a class="btn btn-light p-0 border-0"><i class="p-2 far fa-heart bg-white border"></i></a>
-										</div>
-									</div>
-								</div>
-								<div class="card-body text-capitalize small px-0">
-									<p class="mb-0 text-truncate">
-										friendly zoom digital <br />
-										camera, 5X optical zoom
-									</p>
-								</div>
-								<div class="card-footer border-0 bg-transparent h-6 overflow-hidden p-0">
-									<div class="hover-mt-n25 transition-500 small">
-										<p class="mt-2">$180.00</p>
-										<div class="text-uppercase small cursor-pointer">
-											<a class="text-decoration-none text-dark fw-bold">add to cart</a>
-											<div class="vr mx-1"></div>
-											<a class="text-decoration-none text-dark fw-bold">quick view</a>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-						<div class="col-10 col-sm-4 col-md-6 col-lg-4 p-0">
-							<div class="card rounded-0 group-hover p-2 h-100">
-								<div class="overflow-hidden position-relative">
-									<img class="img-fluid" src="images/demo/electronic-gca4.jpg " />
-									<div class="card-img-overlay rounded-0 d-flex p-0 bg-opacity-0 justify-content-end align-items-end bg-dark hover-bg-opacity-10 transition-1000">
-										<div class="btn-group-vertical transform-rotateY-90 hover-transform-rotateY-0 transition-500">
-											<a class="btn btn-light p-0 border-0"><i class="p-2 fas fa-random bg-white border"></i></a>
-											<a class="btn btn-light p-0 border-0"><i class="p-2 far fa-heart bg-white border"></i></a>
-										</div>
-									</div>
-								</div>
-								<div class="card-body text-capitalize small px-0">
-									<p class="mb-0 text-truncate">
-										sony DSCHX8 heigh <br />
-										zoom point & shoot camera
-									</p>
-								</div>
-								<div class="card-footer border-0 bg-transparent h-6 overflow-hidden p-0">
-									<div class="hover-mt-n25 transition-500 small">
-										<p class="mt-2">$110.00</p>
-										<div class="text-uppercase small cursor-pointer">
-											<a class="text-decoration-none text-dark fw-bold">add to cart</a>
-											<div class="vr mx-1"></div>
-											<a class="text-decoration-none text-dark fw-bold">quick view</a>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-						<div class="col-10 col-sm-4 col-md-6 col-lg-4 p-0">
-							<div class="card rounded-0 group-hover p-2 h-100">
-								<div class="overflow-hidden position-relative">
-									<img class="img-fluid" src="images/demo/electronic-gca5.jpg " />
-									<div class="card-img-overlay rounded-0 d-flex p-0 bg-opacity-0 justify-content-end align-items-end bg-dark hover-bg-opacity-10 transition-1000">
-										<div class="btn-group-vertical transform-rotateY-90 hover-transform-rotateY-0 transition-500">
-											<a class="btn btn-light p-0 border-0"><i class="p-2 fas fa-random bg-white border"></i></a>
-											<a class="btn btn-light p-0 border-0"><i class="p-2 far fa-heart bg-white border"></i></a>
-										</div>
-									</div>
-								</div>
-								<div class="card-body text-capitalize small px-0">
-									<p class="mb-0 text-truncate">
-										outdoor security camera <br />
-										wireless, 1080p full HD
-									</p>
-								</div>
-								<div class="card-footer border-0 bg-transparent h-6 overflow-hidden p-0">
-									<div class="hover-mt-n25 transition-500 small">
-										<p class="mt-2">$599.00</p>
-										<div class="text-uppercase small cursor-pointer">
-											<a class="text-decoration-none text-dark fw-bold">add to cart</a>
-											<div class="vr mx-1"></div>
-											<a class="text-decoration-none text-dark fw-bold">quick view</a>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-						<div class="col-10 col-sm-4 d-md-none d-lg-block col-lg-4 p-0">
-							<div class="card rounded-0 group-hover p-2 h-100">
-								<div class="overflow-hidden position-relative">
-									<img class="img-fluid" src="images/demo/electronic-gca6.jpg " />
-									<div class="card-img-overlay rounded-0 d-flex p-0 bg-opacity-0 justify-content-end align-items-end bg-dark hover-bg-opacity-10 transition-1000">
-										<div class="btn-group-vertical transform-rotateY-90 hover-transform-rotateY-0 transition-500">
-											<a class="btn btn-light p-0 border-0"><i class="p-2 fas fa-random bg-white border"></i></a>
-											<a class="btn btn-light p-0 border-0"><i class="p-2 far fa-heart bg-white border"></i></a>
-										</div>
-									</div>
-								</div>
-								<div class="card-body text-capitalize small px-0">
-									<p class="mb-0 text-truncate">PlayStation 5 <br />DualSense wireless controller</p>
-								</div>
-								<div class="card-footer border-0 bg-transparent h-6 overflow-hidden p-0">
-									<div class="hover-mt-n25 transition-500 small">
-										<p class="mt-2">$599.00</p>
-										<div class="text-uppercase small cursor-pointer">
-											<a class="text-decoration-none text-dark fw-bold">add to cart</a>
-											<div class="vr mx-1"></div>
-											<a class="text-decoration-none text-dark fw-bold">quick view</a>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-						<div class="col-10 col-sm-4 d-md-none d-lg-block col-lg-4 p-0">
-							<div class="card rounded-0 group-hover p-2 h-100">
-								<div class="overflow-hidden position-relative">
-									<img class="img-fluid" src="images/demo/electronic-gca7.jpg " />
-									<div class="card-img-overlay rounded-0 d-flex p-0 bg-opacity-0 justify-content-end align-items-end bg-dark hover-bg-opacity-10 transition-1000">
-										<div class="btn-group-vertical transform-rotateY-90 hover-transform-rotateY-0 transition-500">
-											<a class="btn btn-light p-0 border-0"><i class="p-2 fas fa-random bg-white border"></i></a>
-											<a class="btn btn-light p-0 border-0"><i class="p-2 far fa-heart bg-white border"></i></a>
-										</div>
-									</div>
-								</div>
-								<div class="card-body text-capitalize small px-0">
-									<p class="mb-0 text-truncate">
-										canon EF 85mm <br />
-										f/1.8 USM medium telephoto lens
-									</p>
-								</div>
-								<div class="card-footer border-0 bg-transparent h-6 overflow-hidden p-0">
-									<div class="hover-mt-n25 transition-500 small">
-										<p class="mt-2">$599.00</p>
-										<div class="text-uppercase small cursor-pointer">
-											<a class="text-decoration-none text-dark fw-bold">add to cart</a>
-											<div class="vr mx-1"></div>
-											<a class="text-decoration-none text-dark fw-bold">quick view</a>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	</section>
-</template>
diff --git a/src/components/views/home/Appliances.vue b/src/components/views/home/Appliances.vue
deleted file mode 100644
index c09ec0b..0000000
--- a/src/components/views/home/Appliances.vue
+++ /dev/null
@@ -1,260 +0,0 @@
-<script setup></script>
-
-<template>
-	<!--home-appliances-section-->
-
-	<section id="homeHomeAppliances">
-		<div class="container-lg">
-			<div class="py-2 my-1">
-				<h4 class="fw-bolder m-0">Home Appliances</h4>
-			</div>
-			<div class="row justify-content-center p-0 g-3 g-sm-0 m-0">
-				<div class="col-10 col-sm-6 col-md-6 col-lg-5 p-0">
-					<div class="card rounded-0 group-hover h-100 cursor-pointer p-2">
-						<div class="overflow-hidden position-relative">
-							<img class="img-fluid" src="images/demo/categories-image-6.jpg " />
-							<div class="card-img-overlay rounded-0 d-flex p-0 bg-opacity-0 justify-content-end align-items-end bg-dark hover-bg-opacity-10 transition-1000">
-								<div class="btn-group-vertical transform-rotateY-90 hover-transform-rotateY-0 transition-500">
-									<a class="btn btn-light p-0 border-0"><i class="p-2 fas fa-random bg-white border"></i></a>
-									<a class="btn btn-light p-0 border-0"><i class="p-2 far fa-heart bg-white border"></i></a>
-								</div>
-							</div>
-						</div>
-						<div class="card-body small px-0">
-							<p class="mb-2 text-white bg-red-danger p-2 w-50">488d: 19h : 59m : 45s</p>
-							<p class="m-0 text-secondary text-uppercase">sold:<span class="text-red-danger"> 25</span> / 50</p>
-							<div class="progress bg-grayred rounded-pill h-2">
-								<div class="progress-bar rounded-pill w-50 bg-red-danger"></div>
-							</div>
-							<h5 class="pt-2 m-0 text-truncate">4k UHD smart TV width chromecast built-in</h5>
-							<div class="p-0 m-0 text-warning">
-								<i class="fas fa-star"></i>
-								<i class="fas fa-star"></i>
-								<i class="fas fa-star"></i>
-								<i class="fas fa-star"></i>
-								<i class="fas fa-star"></i>
-							</div>
-						</div>
-						<div class="card-footer border-0 bg-transparent h-6 overflow-hidden p-0">
-							<div class="hover-mt-n25 transition-500">
-								<p class="text-red-danger mt-1"><del class="text-secondary small">$599.00</del> $399.00</p>
-								<div class="text-uppercase small">
-									<a class="text-decoration-none text-dark fw-bold small">add to cart</a>
-									<div class="vr mx-1"></div>
-									<a class="text-decoration-none text-dark fw-bold small">quick view</a>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-				<div class="col-10 col-sm-6 d-md-none p-0">
-					<div class="card rounded-0 group-hover h-100 cursor-pointer p-2">
-						<div class="overflow-hidden position-relative">
-							<img class="img-fluid" src="images/demo/electronic-ha8.jpg" />
-							<div class="card-img-overlay rounded-0 d-flex p-0 bg-opacity-0 justify-content-end align-items-end bg-dark hover-bg-opacity-10 transition-1000">
-								<div class="btn-group-vertical transform-rotateY-90 hover-transform-rotateY-0 transition-500">
-									<a href="#" class="btn btn-light p-0 border-0"><i class="p-2 fas fa-random bg-white border"></i></a>
-									<a href="#" class="btn btn-light p-0 border-0"><i class="p-2 far fa-heart bg-white border"></i></a>
-								</div>
-							</div>
-						</div>
-						<div class="card-body small px-0">
-							<p class="mb-2 text-white bg-red-danger p-2 w-50">488d: 19h : 59m : 45s</p>
-							<p class="m-0 text-secondary text-uppercase">sold:<span class="text-red-danger"> 40</span> / 50</p>
-							<div class="progress bg-grayred rounded-pill h-2">
-								<div class="progress-bar rounded-pill w-75 bg-red-danger"></div>
-							</div>
-							<h5 class="pt-2 m-0 text-truncate">hamilton beach flexBrew trio coffee maker</h5>
-							<div class="p-0 m-0 text-warning">
-								<i class="fas fa-star"></i>
-								<i class="fas fa-star"></i>
-								<i class="fas fa-star"></i>
-								<i class="fas fa-star"></i>
-								<i class="fas fa-star"></i>
-							</div>
-						</div>
-						<div class="card-footer border-0 bg-transparent h-6 overflow-hidden p-0">
-							<div class="hover-mt-n25 transition-500">
-								<p class="text-red-danger mt-1"><del class="text-secondary small">$599.00</del> $399.00</p>
-								<div class="text-uppercase small">
-									<a class="text-decoration-none text-dark fw-bold small">add to cart</a>
-									<div class="vr mx-1"></div>
-									<a class="text-decoration-none text-dark fw-bold small">quick view</a>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-				<div class="col-12 col-md-6 col-lg-7 p-0">
-					<div class="row justify-content-center p-0 g-3 g-sm-0 m-0">
-						<div class="col-10 col-sm-4 col-md-6 col-lg-4 p-0">
-							<div class="card rounded-0 group-hover p-2 h-100">
-								<div class="overflow-hidden position-relative">
-									<img class="img-fluid" src="images/demo/electronic-ha2.jpg " />
-									<div class="card-img-overlay rounded-0 d-flex p-0 bg-opacity-0 justify-content-end align-items-end bg-dark hover-bg-opacity-10 transition-1000">
-										<div class="btn-group-vertical transform-rotateY-90 hover-transform-rotateY-0 transition-500">
-											<a class="btn btn-light p-0 border-0"><i class="p-2 fas fa-random bg-white border"></i></a>
-											<a class="btn btn-light p-0 border-0"><i class="p-2 far fa-heart bg-white border"></i></a>
-										</div>
-									</div>
-								</div>
-								<div class="card-body text-capitalize small px-0">
-									<p class="text-truncate mb-0">
-										top freezer apartment <br />
-										size refrigerator stainless
-									</p>
-								</div>
-								<div class="card-footer border-0 bg-transparent h-6 overflow-hidden p-0">
-									<div class="hover-mt-n25 transition-500 small">
-										<p class="mt-2">$599.00</p>
-										<div class="text-uppercase small cursor-pointer">
-											<a class="text-decoration-none text-dark fw-bold">add to cart</a>
-											<div class="vr mx-1"></div>
-											<a class="text-decoration-none text-dark fw-bold">quick view</a>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-						<div class="col-10 col-sm-4 col-md-6 col-lg-4 p-0">
-							<div class="card rounded-0 group-hover p-2 h-100">
-								<div class="overflow-hidden position-relative">
-									<img class="img-fluid" src="images/demo/electronic-ha3.jpg " />
-									<div class="card-img-overlay rounded-0 d-flex p-0 bg-opacity-0 justify-content-end align-items-end bg-dark hover-bg-opacity-10 transition-1000">
-										<div class="btn-group-vertical transform-rotateY-90 hover-transform-rotateY-0 transition-500">
-											<a class="btn btn-light p-0 border-0"><i class="p-2 fas fa-random bg-white border"></i></a>
-											<a class="btn btn-light p-0 border-0"><i class="p-2 far fa-heart bg-white border"></i></a>
-										</div>
-									</div>
-								</div>
-								<div class="card-body text-capitalize fw-semibold small px-0">
-									<p class="text-truncate mb-0">
-										sylvania 55" 4k <br />
-										UHD android smart television
-									</p>
-								</div>
-								<div class="card-footer border-0 bg-transparent h-6 overflow-hidden p-0">
-									<div class="hover-mt-n25 transition-500 small">
-										<p class="mt-2">$599.00</p>
-										<div class="text-uppercase small cursor-pointer">
-											<a class="text-decoration-none text-dark fw-bold">add to cart</a>
-											<div class="vr mx-1"></div>
-											<a class="text-decoration-none text-dark fw-bold">quick view</a>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-						<div class="col-10 col-sm-4 col-md-6 col-lg-4 p-0">
-							<div class="card rounded-0 group-hover p-2 h-100">
-								<div class="overflow-hidden position-relative">
-									<img class="img-fluid" src="images/demo/electronic-ha4.jpg " />
-									<div class="card-img-overlay rounded-0 d-flex p-0 bg-opacity-0 justify-content-end align-items-end bg-dark hover-bg-opacity-10 transition-1000">
-										<div class="btn-group-vertical transform-rotateY-90 hover-transform-rotateY-0 transition-500">
-											<a class="btn btn-light p-0 border-0"><i class="p-2 fas fa-random bg-white border"></i></a>
-											<a class="btn btn-light p-0 border-0"><i class="p-2 far fa-heart bg-white border"></i></a>
-										</div>
-									</div>
-								</div>
-								<div class="card-body text-capitalize fw-semibold small px-0">
-									<p class="text-truncate mb-0">portable washing <br />machine 11lbs capacity</p>
-								</div>
-								<div class="card-footer border-0 bg-transparent h-6 overflow-hidden p-0">
-									<div class="hover-mt-n25 transition-500 small">
-										<p class="mt-2">$599.00</p>
-										<div class="text-uppercase small cursor-pointer">
-											<a class="text-decoration-none text-dark fw-bold">add to cart</a>
-											<div class="vr mx-1"></div>
-											<a class="text-decoration-none text-dark fw-bold">quick view</a>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-						<div class="col-10 col-sm-4 col-md-6 col-lg-4 p-0">
-							<div class="card rounded-0 group-hover p-2 h-100">
-								<div class="overflow-hidden position-relative">
-									<img class="img-fluid" src="images/demo/electronic-ha5.jpg " />
-									<div class="card-img-overlay rounded-0 d-flex p-0 bg-opacity-0 justify-content-end align-items-end bg-dark hover-bg-opacity-10 transition-1000">
-										<div class="btn-group-vertical transform-rotateY-90 hover-transform-rotateY-0 transition-500">
-											<a class="btn btn-light p-0 border-0"><i class="p-2 fas fa-random bg-white border"></i></a>
-											<a class="btn btn-light p-0 border-0"><i class="p-2 far fa-heart bg-white border"></i></a>
-										</div>
-									</div>
-								</div>
-								<div class="card-body text-capitalize fw-semibold small px-0">
-									<p class="text-truncate mb-0">newAir portable <br />evaporative air cooler</p>
-								</div>
-								<div class="card-footer border-0 bg-transparent h-6 overflow-hidden p-0">
-									<div class="hover-mt-n25 transition-500 small">
-										<p class="mt-2">$599.00</p>
-										<div class="text-uppercase small cursor-pointer">
-											<a class="text-decoration-none text-dark fw-bold">add to cart</a>
-											<div class="vr mx-1"></div>
-											<a class="text-decoration-none text-dark fw-bold">quick view</a>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-						<div class="col-10 col-sm-4 d-md-none d-lg-block col-lg-4 p-0">
-							<div class="card rounded-0 group-hover p-2 h-100">
-								<div class="overflow-hidden position-relative">
-									<img class="img-fluid" src="images/demo/electronic-ha6.jpg " />
-									<div class="card-img-overlay rounded-0 d-flex p-0 bg-opacity-0 justify-content-end align-items-end bg-dark hover-bg-opacity-10 transition-1000">
-										<div class="btn-group-vertical transform-rotateY-90 hover-transform-rotateY-0 transition-500">
-											<a class="btn btn-light p-0 border-0"><i class="p-2 fas fa-random bg-white border"></i></a>
-											<a class="btn btn-light p-0 border-0"><i class="p-2 far fa-heart bg-white border"></i></a>
-										</div>
-									</div>
-								</div>
-								<div class="card-body text-capitalize fw-semibold small px-0">
-									<p class="text-truncate mb-0">
-										LG ductless air <br />
-										conditioning single-Zone
-									</p>
-								</div>
-								<div class="card-footer border-0 bg-transparent h-6 overflow-hidden p-0">
-									<div class="hover-mt-n25 transition-500 small">
-										<p class="mt-2">$599.00</p>
-										<div class="text-uppercase small cursor-pointer">
-											<a class="text-decoration-none text-dark fw-bold">add to cart</a>
-											<div class="vr mx-1"></div>
-											<a class="text-decoration-none text-dark fw-bold">quick view</a>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-						<div class="col-10 col-sm-4 d-md-none d-lg-block col-lg-4 p-0">
-							<div class="card rounded-0 group-hover p-2 h-100">
-								<div class="overflow-hidden position-relative">
-									<img class="img-fluid" src="images/demo/electronic-ha7.jpg " />
-									<div class="card-img-overlay rounded-0 d-flex p-0 bg-opacity-0 justify-content-end align-items-end bg-dark hover-bg-opacity-10 transition-1000">
-										<div class="btn-group-vertical transform-rotateY-90 hover-transform-rotateY-0 transition-500">
-											<a class="btn btn-light p-0 border-0"><i class="p-2 fas fa-random bg-white border"></i></a>
-											<a class="btn btn-light p-0 border-0"><i class="p-2 far fa-heart bg-white border"></i></a>
-										</div>
-									</div>
-								</div>
-								<div class="card-body text-capitalize fw-semibold small px-0">
-									<p class="text-truncate mb-0">TOSHIBA electric <br />rice cooker model 18NMFIAN</p>
-								</div>
-								<div class="card-footer border-0 bg-transparent h-6 overflow-hidden p-0">
-									<div class="hover-mt-n25 transition-500 small">
-										<p class="mt-2">$599.00</p>
-										<div class="text-uppercase small cursor-pointer">
-											<a class="text-decoration-none text-dark fw-bold">add to cart</a>
-											<div class="vr mx-1"></div>
-											<a class="text-decoration-none text-dark fw-bold">quick view</a>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	</section>
-</template>
diff --git a/src/components/views/home/Blog.vue b/src/components/views/home/Blog.vue
deleted file mode 100644
index 8ef716a..0000000
--- a/src/components/views/home/Blog.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<script setup></script>
-
-<template>
-	<!--popular-blog-posts-section-->
-
-	<section class="m-5"></section>
-	<section id="popularBlogPosts">
-		<div class="container-lg">
-			<div class="py-2 my-1 d-flex justify-content-between align-items-center">
-				<h4 class="fw-bolder m-0">Most Popular Blog Posts</h4>
-				<h6 class="m-0 small">
-					<a href="#" class="text-uppercase text-decoration-none text-secondary small">view more</a>
-				</h6>
-			</div>
-			<div class="row g-3 m-0">
-				<div class="col-sm-12 col-md-4 m-0">
-					<div class="card rounded-0 border-0 group-hover">
-						<div class="overflow-hidden position-relative">
-							<img class="img-fluid" src="images/demo/blog-2.jpg " />
-							<div class="card-img-overlay rounded-0 p-0 bg-dark bg-opacity-0 top-100 hover-bg-opacity-20 hover-top-0 transition-500"></div>
-						</div>
-						<div class="card-body small p-0 text-capitalize">
-							<h6 class="my-1">info here</h6>
-							<h6 class="fw-bolder">ultra-thin laptop rentals and rivalry</h6>
-							<p class="text-muted lh-lg">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aliquam alias maiores exercitationem?</p>
-							<button class="btn bg-white rounded-0 fw-bolder btn-sm p-0">
-								<a class="text-black text-decoration-none text-uppercase" href="#"
-									>read more
-									<i class="ps-1 fas fa-long-arrow-alt-right"></i>
-								</a>
-							</button>
-						</div>
-					</div>
-				</div>
-				<div class="d-none d-md-block col-md-4 m-0">
-					<div class="card rounded-0 border-0 group-hover">
-						<div class="overflow-hidden position-relative">
-							<img class="img-fluid" src="images/demo/blog-1.jpg " />
-							<div class="card-img-overlay rounded-0 p-0 bg-dark bg-opacity-0 top-100 hover-bg-opacity-20 hover-top-0 transition-500"></div>
-						</div>
-						<div class="card-body small text-capitalize p-0">
-							<h6 class="my-1">info here</h6>
-							<h6 class="fw-bolder">how to tag faces in the android gallery</h6>
-							<p class="text-muted lh-lg">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aliquam alias maiores exercitationem?</p>
-							<button class="btn bg-white rounded-0 fw-bolder btn-sm p-0">
-								<a class="text-black text-decoration-none text-uppercase" href="#"
-									>read more
-									<i class="ps-1 fas fa-long-arrow-alt-right"></i>
-								</a>
-							</button>
-						</div>
-					</div>
-				</div>
-				<div class="d-none d-md-block col-md-4 m-0">
-					<div class="card rounded-0 border-0 group-hover">
-						<div class="overflow-hidden position-relative">
-							<img class="img-fluid" src="images/demo/blog-3.jpg " />
-							<div class="card-img-overlay rounded-0 p-0 bg-dark bg-opacity-0 top-100 hover-bg-opacity-20 hover-top-0 transition-500"></div>
-						</div>
-						<div class="card-body small text-capitalize p-0">
-							<h6 class="my-1">info here</h6>
-							<h6 class="fw-bolder">the new sony solo cinematic dream</h6>
-							<p class="text-muted lh-lg">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aliquam alias maiores exercitationem?</p>
-							<button class="btn bg-white rounded-0 fw-bolder btn-sm p-0">
-								<a class="text-black text-decoration-none text-uppercase" href="#"
-									>read more
-									<i class="ps-1 fas fa-long-arrow-alt-right"></i>
-								</a>
-							</button>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	</section>
-	<section class="m-4"></section>
-</template>
diff --git a/src/components/views/home/MainSlider.vue b/src/components/views/home/MainSlider.vue
deleted file mode 100644
index 98f3f5b..0000000
--- a/src/components/views/home/MainSlider.vue
+++ /dev/null
@@ -1,110 +0,0 @@
-<script setup>
-	import Swiper from "../../swiper/Swiper.vue"
-</script>
-<template>
-	<!-- carousel-section-start -->
-	<section id="MainCarousel ">
-		<div class="container-lg">
-			<div class="row gx-lg-2 gap-3 gap-lg-0">
-				<div class="col-lg-8">
-					<div id="carouselExampleIndicators" class="carousel slide carousel-fade bg-no-repeat bg-size-cover bg-position-center" data-bs-ride="carousel" style="background-image: url('images/demo/bg-main-slide.jpg'); height: 445px; width: auto; overflow: hidden">
-						<div class="carousel-indicators">
-							<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
-							<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
-							<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
-						</div>
-						<div class="carousel-inner">
-							<div class="carousel-item active">
-								<div class="row">
-									<div class="col-9 col-md-5 text-white align-self-center text-center text-lg-start mt-5 ps-md-5 m-auto m-md-0">
-										<div class="text-capitalize">
-											<!-- <div class="mb-md-5 pb-md-5"> -->
-											<h3 class="h-md2">First slide label</h3>
-											<p class="text-capitalize mb-2">Some representative placeholder content for the first slide.</p>
-											<a class="btn btn-primary text-white btn-sm text-uppercase">shop now</a>
-										</div>
-									</div>
-									<div class="col-md-7 p-0">
-										<div class="mt-5 pt-md-3 mt-xl-0 pt-xl-0">
-											<img class="d-block img-fluid mt-5 pt-lg-5" src="images/demo/slide1-electronic-2.png" alt="image " />
-										</div>
-									</div>
-								</div>
-							</div>
-							<div class="carousel-item">
-								<div class="row">
-									<div class="col-9 col-md-5 text-white align-self-center text-center text-lg-start mt-5 ps-md-5 m-auto m-md-0">
-										<div class="text-capitalize">
-											<h3 class="h-md2">second slide label</h3>
-											<p class="mb-2">Some representative placeholder content for the first slide.</p>
-											<a class="btn btn-primary text-white btn-sm text-uppercase">shop now</a>
-										</div>
-									</div>
-									<div class="col-md-7 p-0">
-										<div class="mt-4 mx-auto" style="max-height: 500px !important; max-width: 300px !important">
-											<img class="d-block img-fluid" src="images/demo/slide2-electronic2.png" alt="image " />
-										</div>
-									</div>
-								</div>
-							</div>
-							<div class="carousel-item">
-								<div class="row">
-									<div class="col-9 col-md-5 text-white align-self-center text-center text-lg-start mt-5 ps-md-5 m-auto m-md-0">
-										<div class="mb-md-5 pb-md-5 text-capitalize">
-											<h3 class="h-md2">third slide label</h3>
-											<p class="mb-2">Some representative placeholder content for the first slide.</p>
-											<a class="btn btn-primary text-white btn-sm text-uppercase">shop now</a>
-										</div>
-									</div>
-									<div class="col-md-7 p-0">
-										<div class="mt-4 mt-md-5 pt-md-5 mx-auto m-auto" style="max-height: 500px !important; max-width: 300px !important">
-											<img class="d-block img-fluid" src="images/demo/slide3-electronic2.png" alt="image " />
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-				<div class="col-lg-4">
-					<div class="row gap-2 gap-sm-0 gap-lg-2">
-						<div class="col-sm-6 col-lg-12">
-							<div class="card rounded-0 border-0 position-relative overflow-hidden group-hover h-100">
-								<img class="img-fluid hover-scale-115 transition-500" src="images/demo/banner-1-electronic-1.jpg " alt="icon" />
-								<div class="card-img-overlay position-absolute text-start mt-4 ms-3">
-									<p class="text-uppercase text-red-danger mb-0 fw-bold">new arrivals</p>
-									<p class="text-uppercase text-black mb-3 h4 fw-bolder">
-										high bass <br class=" " />
-										headphone
-									</p>
-									<button class="btn btn-dark rounded-0 mb-4 fw-bolder btn-sm text-uppercase">
-										<a class="text-white text-decoration-none px-2 small" href=" "
-											>shop now
-											<i class="ps-1 fas fa-long-arrow-alt-right m-auto"></i>
-										</a>
-									</button>
-								</div>
-							</div>
-						</div>
-						<div class="col-sm-6 col-lg-12">
-							<div class="card rounded-0 border-0 position-relative overflow-hidden group-hover h-100">
-								<img class="img-fluid hover-scale-115 transition-500" src="images/demo/banner-5-electronic-1.jpg " alt="icon" />
-								<div class="card-img-overlay position-absolute text-start mt-4 ms-3">
-									<p class="text-uppercase text-red-danger mb-0 fw-bold">lg life good</p>
-									<p class="text-uppercase text-black mb-3 h4 fw-bolder">a perfect <br class=" " />wash</p>
-									<button class="btn btn-dark rounded-0 mb-4 fw-bolder btn-sm text-uppercase">
-										<a class="text-white text-decoration-none px-2 small" href=" "
-											>shop now
-											<i class="ps-1 fas fa-long-arrow-alt-right m-auto"></i>
-										</a>
-									</button>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	</section>
-	<!-- carousel-section-end -->
-</template>
diff --git a/src/components/views/home/SmartPhone.vue b/src/components/views/home/SmartPhone.vue
deleted file mode 100644
index c33b7cc..0000000
--- a/src/components/views/home/SmartPhone.vue
+++ /dev/null
@@ -1,283 +0,0 @@
-<script setup></script>
-
-<template>
-	<!--smartphone-Tablet -section-->
-
-	<section id="smartPhoneTablet ">
-		<div class="container-lg">
-			<div class="py-2 my-1">
-				<h4 class="fw-bolder m-0">Smartphone & Tablet</h4>
-			</div>
-			<div class="row m-0 justify-content-center p-0 g-3 g-sm-0">
-				<div class="col-10 col-sm-6 col-md-6 col-lg-5 p-0">
-					<div class="card rounded-0 p-2 group-hover h-100 cursor-pointer">
-						<div class="overflow-hidden position-relative">
-							<img class="img-fluid" src="images/demo/electronic-smpt-1.jpg " />
-							<div class="card-img-overlay rounded-0 d-flex p-0 bg-opacity-0 justify-content-end align-items-end bg-dark hover-bg-opacity-10 transition-1000">
-								<div class="btn-group-vertical transform-rotateY-90 hover-transform-rotateY-0 transition-500">
-									<a class="btn btn-light p-0 border-0"><i class="p-2 fas fa-random bg-white border"></i></a>
-									<a class="btn btn-light p-0 border-0"><i class="p-2 far fa-heart bg-white border"></i></a>
-								</div>
-							</div>
-						</div>
-						<div class="card-body small p-2">
-							<p class="mb-2 text-white bg-red-danger p-2 w-50">488d: 19h : 59m : 45s</p>
-							<p class="m-0 text-secondary text-uppercase">sold:<span class="text-red-danger"> 25</span> / 50</p>
-							<div class="progress bg-grayred rounded-pill h-2">
-								<div class="progress-bar rounded-pill w-50 bg-red-danger"></div>
-							</div>
-							<h5 class="pt-2 m-0 text-truncate">BLU G90 Pro - 6.5" HD+ Gaming Smartphone</h5>
-							<div class="p-0 m-0 text-warning">
-								<i class="fas fa-star"></i>
-								<i class="fas fa-star"></i>
-								<i class="fas fa-star"></i>
-								<i class="fas fa-star"></i>
-								<i class="fas fa-star"></i>
-							</div>
-						</div>
-						<div class="card-footer border-0 bg-transparent h-6 overflow-hidden py-0">
-							<div class="hover-mt-n25 transition-500">
-								<p class="text-red-danger mt-1"><del class="text-secondary small">$599.00</del> $399.00</p>
-								<div class="text-uppercase small">
-									<a class="text-decoration-none text-dark fw-bold small">add to cart</a>
-									<div class="vr mx-1"></div>
-									<a class="text-decoration-none text-dark fw-bold small">quick view</a>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-				<div class="col-10 col-sm-6 d-md-none p-0">
-					<div class="card rounded-0 p-2 group-hover h-100">
-						<div class="overflow-hidden position-relative">
-							<img class="w-100" src="images/demo/electronic-smpt-8.jpg " />
-							<div class="card-img-overlay rounded-0 d-flex p-0 bg-opacity-0 justify-content-end align-items-end bg-dark hover-bg-opacity-10 transition-1000">
-								<div class="btn-group-vertical transform-rotateY-90 hover-transform-rotateY-0 transition-500">
-									<a class="btn btn-light p-0 border-0"><i class="p-2 fas fa-random bg-white border"></i></a>
-									<a class="btn btn-light p-0 border-0"><i class="p-2 far fa-heart bg-white border"></i></a>
-								</div>
-							</div>
-						</div>
-						<div class="card-body small">
-							<p class="mb-2 text-white bg-red-danger p-2 w-50">488d: 19h : 59m : 45s</p>
-							<p class="m-0 text-secondary text-uppercase">sold:<span class="text-red-danger"> 25</span> /</p>
-							<div class="progress bg-grayred rounded-pill h-2">
-								<div class="progress-bar rounded-pill w-50 bg-red-danger"></div>
-							</div>
-							<p class="pt-2 m-0 text-truncate">BLU G90 Pro - 6.5" HD+ Gaming Smartphone</p>
-							<div class="p-0 m-0 text-warning">
-								<i class="fas fa-star"></i>
-								<i class="fas fa-star"></i>
-								<i class="fas fa-star"></i>
-								<i class="fas fa-star"></i>
-								<i class="fas fa-star"></i>
-							</div>
-							<div class="card-footer border-0 bg-transparent h-6 overflow-hidden py-0">
-								<div class="hover-mt-n25 transition-500">
-									<p class="text-red-danger mt-16"><del class="text-secondary small">$599.00</del> $399.00</p>
-									<div class="text-uppercase small cursor-pointer">
-										<a class="text-decoration-none text-dark fw-bold small">add to cart</a>
-										<div class="vr ,mx-1"></div>
-										<a class="text-decoration-none text-dark fw-bold small">quick view</a>
-									</div>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-				<div class="col-sm-12 col-md-6 col-lg-7 p-0">
-					<div class="row justify-content-center m-0 g-3 g-sm-0">
-						<div class="col-10 col-sm-4 col-md-6 col-lg-4 p-0">
-							<div class="card rounded-0 group-hover p-2 h-100">
-								<div class="overflow-hidden position-relative">
-									<img class="w-100" src="images/demo/electronic-smpt-2.jpg " />
-									<div class="card-img-overlay rounded-0 d-flex p-0 bg-opacity-0 justify-content-end align-items-end bg-dark hover-bg-opacity-10 transition-1000">
-										<div class="btn-group-vertical transform-rotateY-90 hover-transform-rotateY-0 transition-500">
-											<a class="btn btn-light p-0 border-0"><i class="p-2 fas fa-random bg-white border"></i></a>
-											<a class="btn btn-light p-0 border-0"><i class="p-2 far fa-heart bg-white border"></i></a>
-										</div>
-									</div>
-								</div>
-								<div class="card-body text-capitalize small mt-2 p-0">
-									<p class="mb-1">new unlocked 128 GB of Storage Smartphone someting else</p>
-									<div class="small py-1">
-										<i class="fas fa-star text-warning"></i>
-										<i class="fas fa-star text-warning"></i>
-										<i class="fas fa-star text-warning"></i>
-										<i class="fas fa-star text-warning"></i>
-										<i class="far fa-star text-warning"></i>
-										<span class="text-secondary">(12)</span>
-									</div>
-								</div>
-								<div class="card-footer border-0 bg-transparent h-6 overflow-hidden p-0">
-									<div class="hover-mt-n25 transition-500 small">
-										<p class="mt-2">$599.00</p>
-										<div class="text-uppercase small cursor-pointer">
-											<a href="cart/cart.php" class="text-decoration-none text-dark fw-bold">add to cart</a>
-											<div class="vr mx-1"></div>
-											<a href="product-details/product-details.php" class="text-decoration-none text-dark fw-bold">quick view</a>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-						<div class="col-10 col-sm-4 col-md-6 col-lg-4 p-0">
-							<div class="card rounded-0 group-hover p-2 h-100">
-								<div class="overflow-hidden position-relative">
-									<img class="w-100" src="images/demo/electronic-smpt-3.jpg " />
-									<div class="card-img-overlay rounded-0 d-flex p-0 bg-opacity-0 justify-content-end align-items-end bg-dark hover-bg-opacity-10 transition-1000">
-										<div class="btn-group-vertical transform-rotateY-90 hover-transform-rotateY-0 transition-500">
-											<a class="btn btn-light p-0 border-0"><i class="p-2 fas fa-random bg-white border"></i></a>
-											<a class="btn btn-light p-0 border-0"><i class="p-2 far fa-heart bg-white border"></i></a>
-										</div>
-									</div>
-								</div>
-								<div class="card-body text-capitalize small mt-2 p-0">
-									<p class="mb-0">samsung electronics samsung galaxy s21 5G</p>
-									<div class="small py-1">
-										<i class="fas fa-star text-warning"></i>
-										<i class="fas fa-star text-warning"></i>
-										<i class="fas fa-star text-warning"></i>
-										<i class="fas fa-star text-warning"></i>
-										<i class="far fa-star text-warning"></i>
-										<span class="text-secondary">(32)</span>
-									</div>
-								</div>
-								<div class="card-footer border-0 bg-transparent h-6 overflow-hidden p-0">
-									<div class="hover-mt-n25 transition-500 small">
-										<p class="mt-2 text-red-danger"><del class="text-secondary small">$799.00</del> $599.00</p>
-										<div class="text-uppercase small cursor-pointer">
-											<a class="text-decoration-none text-dark fw-bold">add to cart</a>
-											<div class="vr mx-1"></div>
-											<a class="text-decoration-none text-dark fw-bold">quick view</a>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-						<div class="col-10 col-sm-4 col-md-6 col-lg-4 p-0">
-							<div class="card rounded-0 group-hover p-2 h-100">
-								<div class="overflow-hidden position-relative">
-									<img class="w-100 p-2" src="images/demo/electronic-smpt-4.jpg " />
-									<div class="card-img-overlay rounded-0 d-flex p-0 bg-opacity-0 justify-content-end align-items-end bg-dark hover-bg-opacity-10 transition-1000">
-										<div class="btn-group-vertical transform-rotateY-90 hover-transform-rotateY-0 transition-500">
-											<a class="btn btn-light p-0 border-0"><i class="p-2 fas fa-random bg-white border"></i></a>
-											<a class="btn btn-light p-0 border-0"><i class="p-2 far fa-heart bg-white border"></i></a>
-										</div>
-									</div>
-								</div>
-								<div class="card-body text-capitalize small mt-2 p-0">
-									<p class="mb-0">blackview a8 android 10 smartphone 6.21 in</p>
-									<div class="small py-1 mt-auto">
-										<i class="fas fa-star text-warning"></i>
-										<i class="fas fa-star text-warning"></i>
-										<i class="fas fa-star text-warning"></i>
-										<i class="fas fa-star text-warning"></i>
-										<i class="far fa-star text-warning"></i>
-										<span class="text-secondary">(14)</span>
-									</div>
-								</div>
-								<div class="card-footer border-0 bg-transparent h-6 overflow-hidden p-0">
-									<div class="hover-mt-n25 transition-500 small">
-										<p class="mt-2"><del class="text-secondary small">$599.00</del> - $799.00</p>
-										<div class="text-uppercase small cursor-pointer">
-											<a class="text-decoration-none text-dark fw-bold">add to cart</a>
-											<div class="vr mx-1"></div>
-											<a class="text-decoration-none text-dark fw-bold">quick view</a>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-						<div class="col-10 col-sm-4 col-md-6 col-lg-4 p-0">
-							<div class="card rounded-0 group-hover p-2 h-100">
-								<div class="overflow-hidden position-relative">
-									<img class="w-100" src="images/demo/electronic-smpt-5.jpg " />
-									<div class="card-img-overlay rounded-0 d-flex p-0 bg-opacity-0 justify-content-end align-items-end bg-dark hover-bg-opacity-10 transition-1000">
-										<div class="btn-group-vertical transform-rotateY-90 hover-transform-rotateY-0 transition-500">
-											<a class="btn btn-light p-0 border-0"><i class="p-2 fas fa-random bg-white border"></i></a>
-											<a class="btn btn-light p-0 border-0"><i class="p-2 far fa-heart bg-white border"></i></a>
-										</div>
-									</div>
-								</div>
-								<div class="card-body text-capitalize small mt-2 p-0">
-									<p class="mb-0">note 9 128GB factory unlocked tablet</p>
-								</div>
-								<div class="card-footer border-0 bg-transparent h-6 overflow-hidden p-0">
-									<div class="hover-mt-n25 transition-500 small">
-										<p class="mt-2">$699.00 - $899.00</p>
-										<div class="text-uppercase small cursor-pointer">
-											<a class="text-decoration-none text-dark fw-bold">add to cart</a>
-											<div class="vr mx-1"></div>
-											<a class="text-decoration-none text-dark fw-bold">quick view</a>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-						<div class="col-10 col-sm-4 col-lg-4 d-md-none d-lg-block p-0">
-							<div class="card rounded-0 group-hover p-2 h-100">
-								<div class="overflow-hidden position-relative">
-									<img class="w-100" src="images/demo/electronic-smpt-6.jpg " />
-									<div class="card-img-overlay rounded-0 d-flex p-0 bg-opacity-0 justify-content-end align-items-end bg-dark hover-bg-opacity-10 transition-1000">
-										<div class="btn-group-vertical transform-rotateY-90 hover-transform-rotateY-0 transition-500">
-											<a class="btn btn-light p-0 border-0"><i class="p-2 fas fa-random bg-white border"></i></a>
-											<a class="btn btn-light p-0 border-0"><i class="p-2 far fa-heart bg-white border"></i></a>
-										</div>
-									</div>
-								</div>
-								<div class="card-body text-capitalize small mt-2 p-0">
-									<p class="mb-0">lightweight android tablet 32GB storage</p>
-								</div>
-								<div class="card-footer border-0 bg-transparent h-6 overflow-hidden p-0">
-									<div class="hover-mt-n25 transition-500 small">
-										<p class="mt-2">$699.00</p>
-										<div class="text-uppercase small cursor-pointer">
-											<a class="text-decoration-none text-dark fw-bold">add to cart</a>
-											<div class="vr mx-1"></div>
-											<a class="text-decoration-none text-dark fw-bold">quick view</a>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-						<div class="col-10 col-sm-4 col-lg-4 d-md-none d-lg-block p-0">
-							<div class="card rounded-0 group-hover p-2 h-100">
-								<div class="overflow-hidden position-relative">
-									<img class="w-100" src="images/demo/electronic-smpt-7.jpg " />
-									<div class="card-img-overlay rounded-0 d-flex p-0 bg-opacity-0 justify-content-end align-items-end bg-dark hover-bg-opacity-10 transition-1000">
-										<div class="btn-group-vertical transform-rotateY-90 hover-transform-rotateY-0 transition-500">
-											<a class="btn btn-light p-0 border-0"><i class="p-2 fas fa-random bg-white border"></i></a>
-											<a class="btn btn-light p-0 border-0"><i class="p-2 far fa-heart bg-white border"></i></a>
-										</div>
-									</div>
-								</div>
-								<div class="card-body text-capitalize small mt-2 p-0">
-									<p class="mb-0">apple iMac with retina 5K, 27-inch display</p>
-									<div class="small py-1">
-										<i class="fas fa-star text-warning"></i>
-										<i class="fas fa-star text-warning"></i>
-										<i class="fas fa-star text-warning"></i>
-										<i class="fas fa-star text-warning"></i>
-										<i class="far fa-star text-warning"></i>
-										<span class="text-secondary">(9)</span>
-									</div>
-								</div>
-								<div class="card-footer border-0 bg-transparent h-6 overflow-hidden p-0">
-									<div class="hover-mt-n25 transition-500 small">
-										<p class="mt-2">$499.00 - $699.00</p>
-										<div class="text-uppercase small cursor-pointer">
-											<a class="text-decoration-none text-dark fw-bold">add to cart</a>
-											<div class="vr mx-1"></div>
-											<a class="text-decoration-none text-dark fw-bold">quick view</a>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	</section>
-</template>
diff --git a/src/components/views/home/Support.vue b/src/components/views/home/Support.vue
deleted file mode 100644
index f857654..0000000
--- a/src/components/views/home/Support.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<script setup></script>
-<template>
-	<div id="home-support " class="my-3">
-		<!--support-section-->
-		<div class="container">
-			<div class="row">
-				<div class="col-6 col-lg-3 py-4">
-					<div class="d-flex flex-column flex-sm-row align-items-center text-ms-center">
-						<img class="d-block p-2 p-sm-0 me-2" src="images/demo/feature-1.png" alt="image" />
-						<div class="">
-							<p class="mb-0 fw-bold">Delivery in 24H</p>
-							<p class="mb-0 text-secondary small">Free shipping over $100</p>
-						</div>
-					</div>
-				</div>
-				<div class="col-6 col-lg-3 py-4">
-					<div class="d-flex flex-column flex-sm-row align-items-center text-ms-center">
-						<img class="d-block p-2 p-sm-0 me-2" src="images/demo/feature-2.png" alt="image" />
-						<div class="">
-							<p class="mb-0 fw-bold">24 hours return</p>
-							<p class="mb-0 text-secondary small">Free shipping over $100</p>
-						</div>
-					</div>
-				</div>
-				<div class="col-6 col-lg-3 py-4">
-					<div class="d-flex flex-column flex-sm-row align-items-center text-ms-center">
-						<img class="d-block p-2 p-sm-0 me-2" src="images/demo/feature-3.png" alt="image" />
-						<div class="">
-							<p class="mb-0 fw-bold">quality guarantee</p>
-							<p class="mb-0 text-secondary small">Quality check by our team</p>
-						</div>
-					</div>
-				</div>
-				<div class="col-6 col-lg-3 py-4">
-					<div class="d-flex flex-column flex-sm-row align-items-center text-ms-center">
-						<img class="d-block p-2 p-sm-0 me-2" src="images/demo/feature-4.png" alt="image" />
-						<div class="">
-							<p class="mb-0 fw-bold">support 24/7</p>
-							<p class="mb-0 text-secondary small">Shop with an expert</p>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-</template>
diff --git a/src/components/views/shop/Shop.vue b/src/components/views/shop/Shop.vue
deleted file mode 100644
index 266ed88..0000000
--- a/src/components/views/shop/Shop.vue
+++ /dev/null
@@ -1,508 +0,0 @@
-<script setup>
-	import { ref, reactive, onBeforeMount } from "vue"
-	import axios from "axios"
-	import Layout from "../Layout.vue"
-	import { cartStore } from "../../../store/cartStore"
-	import { wishlistStore } from "../../../store/wishlistStore"
-	import { HeartIcon, ScaleIcon, StarIcon } from "@heroicons/vue/24/outline"
-	import { slug } from "../../../utilities/slug"
-	import { useRouter } from "vue-router"
-
-	const router = useRouter()
-	const cart = cartStore
-	const wishlist = wishlistStore
-
-	const products = ref([])
-	// const products = reactive([])
-
-	onBeforeMount(() => {
-		axios
-			// .get("https://dummyjson.com/products?limit=30")
-			.get("http://127.0.0.1:8000/api/products")
-			.then((res) => {
-				products.value = res.data
-				// products.value = res.data.products
-			})
-			.catch((error) => console.log(error))
-	})
-	// onBeforeMount(() => {
-	// 	async function productList() {
-	// 		const url = "https://dummyjson.com/products?limit=30"
-	// 		const res = await axios.get(url)
-	// 		if (200 == res.status) {
-	// 			res.data.products.forEach((product) => {
-	// 				products.push({
-	// 					id: product.id,
-	// 					title: product.title,
-	// 					description: product.description,
-	// 					price: product.price,
-	// 					thumbnail: product.thumbnail,
-	// 					rating: product.rating,
-	// 					stock: product.stock,
-	// 					brand: product.brand,
-	// 					category: product.category,
-	// 				})
-	// 			})
-	// 		}
-	// 	}
-	// 	productList()
-	// })
-	const skipCount = ref(0)
-	async function lodeMore() {
-		skipCount.value += 30
-		const url = `https://dummyjson.com/products?limit=30&skip=${skipCount.value}&select=id,title,description,price,thumbnail,rating,stock,brand,category`
-		const res = await axios.get(url)
-		if (200 == res.status) {
-			res.data.products.forEach((product) => {
-				products.push(product)
-			})
-		}
-	}
-
-	async function singelProducView(id) {
-		console.log(id)
-		await router.push({ name: "singleProduct", params: { id } })
-	}
-</script>
-
-<template>
-	<Layout>
-		<!-- === product-item body ===  -->
-		<section id="shopBody">
-			<div class="container-lg mb-5">
-				<div class="row">
-					<!-- side-categories-area -->
-					<div class="col-md-3">
-						<div class="offcanvas offcanvas-end position-lg-static transform-translate-x-lg-0 visibility-lg-visible border-md-0" style="visibility: hidden" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
-							<div class="offcanvas-body">
-								<div class="row justify-content-center">
-									<div class="col-12 mb-5 pe-2">
-										<div class="d-flex justify-content-between align-items-center mb-3">
-											<p class="text-uppercase fw-bold mb-0 small">shop by categories</p>
-											<button type="button" class="btn-close text-reset box-shadow-none d-lg-none btn-sm p-0" data-bs-dismiss="offcanvas" aria-label="Close"></button>
-										</div>
-										<div class="accordion cursor-p" id="accordionPanelsStayOpenExample">
-											<!--====== Accordion-Item collapse button ======-->
-											<div class="accordion-item border-0 text-capitalize px-0">
-												<div class="accordion-header d-flex justify-content-between box-shadow-none collapsed py-2 px-0" type="button" data-bs-toggle="collapse" data-bs-target="#shoplist1">
-													<!-- <input class="form-check-input  box-shadow-none rounded-0 m-0 " type="checkbox" value=""  checked> -->
-													<a href="#" class="text-decoration-none text-body"><i class="fas fa-bars me-2"></i><span class="ps-1 text-secondary">All Shop</span></a>
-													<div>
-														<span class="accordion-toggle-open">+</span>
-														<span class="accordion-toggle-close">-</span>
-													</div>
-												</div>
-												<div id="shoplist1" class="accordion-collapse collapse transition-1000" aria-labelledby="panelsStayOpen-headingOne">
-													<div class="accordion-body ps-2 p-0 small">
-														<!--====== Accordion-Item computer & laptop ======-->
-														<div class="accordion-item border-0 text-capitalize px-0">
-															<div class="accordion-header d-flex justify-content-between box-shadow-none collapsed py-2 px-0" type="button" data-bs-toggle="collapse" data-bs-target="#shoplist3">
-																<a href="#" class="text-decoration-none">
-																	<input class="form-check-input box-shadow-none rounded-0" type="checkbox" value="" />
-																	<span class="ps-1 text-secondary">computer & laptop</span>
-																</a>
-																<div>
-																	<span class="accordion-toggle-open">+</span>
-																	<span class="accordion-toggle-close">-</span>
-																</div>
-															</div>
-															<div id="shoplist3" class="accordion-collapse collapse transition-800 timing-function-ease-out" aria-labelledby="panelsStayOpen-headingOne">
-																<div class="accordion-body p-0">
-																	<ul class="list-group list-group-transparent list-group-border-0 ps-3">
-																		<a href="#" class="list-group-item list-group-item-action text-muted py-1">backup charger</a>
-																		<a href="#" class="list-group-item list-group-item-action text-muted py-1">headphone</a>
-																		<a href="#" class="list-group-item list-group-item-action text-muted py-1">power socket</a>
-																		<a href="#" class="list-group-item list-group-item-action text-muted py-1">printer</a>
-																		<a href="#" class="list-group-item list-group-item-action text-muted py-1">USB</a>
-																		<a href="#" class="list-group-item list-group-item-action text-muted py-1">wedcam</a>
-																		<a href="#" class="list-group-item list-group-item-action text-muted py-1">wi-Fi router</a>
-																	</ul>
-																</div>
-															</div>
-														</div>
-														<!--====== Accordion-Item eletronic & housewares ======-->
-														<div class="accordion-item border-0 text-capitalize px-0">
-															<div class="accordion-header d-flex justify-content-between box-shadow-none collapsed py-2 px-0" type="button" data-bs-toggle="collapse" data-bs-target="#shoplist4">
-																<a href="#" class="text-decoration-none">
-																	<input class="form-check-input box-shadow-none rounded-0" type="checkbox" value="" />
-																	<span class="ps-1 text-secondary">eletronic & houseware</span>
-																</a>
-																<div>
-																	<span class="accordion-toggle-open">+</span>
-																	<span class="accordion-toggle-close">-</span>
-																</div>
-															</div>
-															<div id="shoplist4" class="accordion-collapse collapse transition-800 timing-function-ease-out" aria-labelledby="panelsStayOpen-headingOne">
-																<div class="accordion-body p-0">
-																	<ul class="list-group list-group-transparent list-group-border-0 ps-4">
-																		<a href="#" class="list-group-item list-group-item-action text-muted py-1">backup charger</a>
-																		<a href="#" class="list-group-item list-group-item-action text-muted py-1">headphone</a>
-																		<a href="#" class="list-group-item list-group-item-action text-muted py-1">power socket</a>
-																		<a href="#" class="list-group-item list-group-item-action text-muted py-1">printer</a>
-																		<a href="#" class="list-group-item list-group-item-action text-muted py-1">USB</a>
-																		<a href="#" class="list-group-item list-group-item-action text-muted py-1">wedcam</a>
-																		<a href="#" class="list-group-item list-group-item-action text-muted py-1">wi-Fi router</a>
-																	</ul>
-																</div>
-															</div>
-														</div>
-														<!--====== Accordion-Item games & accessories ======-->
-														<div class="accordion-item border-0 text-capitalize px-0">
-															<div class="accordion-header d-flex justify-content-between box-shadow-none collapsed py-2 px-0" type="button" data-bs-toggle="collapse" data-bs-target="#shoplist5">
-																<a href="#" class="text-decoration-none">
-																	<input class="form-check-input box-shadow-none rounded-0" type="checkbox" value="" />
-																	<span class="ps-1 text-secondary">games & accessories</span>
-																</a>
-																<div>
-																	<span class="accordion-toggle-open">+</span>
-																	<span class="accordion-toggle-close">-</span>
-																</div>
-															</div>
-															<div id="shoplist5" class="accordion-collapse collapse transition-800 timing-function-ease-out" aria-labelledby="panelsStayOpen-headingOne">
-																<div class="accordion-body p-0">
-																	<ul class="list-group list-group-transparent list-group-border-0 ps-4">
-																		<a href="#" class="list-group-item list-group-item-action text-muted py-1">backup charger</a>
-																		<a href="#" class="list-group-item list-group-item-action text-muted py-1">headphone</a>
-																		<a href="#" class="list-group-item list-group-item-action text-muted py-1">power socket</a>
-																		<a href="#" class="list-group-item list-group-item-action text-muted py-1">printer</a>
-																		<a href="#" class="list-group-item list-group-item-action text-muted py-1">USB</a>
-																		<a href="#" class="list-group-item list-group-item-action text-muted py-1">wedcam</a>
-																		<a href="#" class="list-group-item list-group-item-action text-muted py-1">wi-Fi router</a>
-																	</ul>
-																</div>
-															</div>
-														</div>
-														<!--====== Accordion-Item smartphone & tablet ======-->
-														<div class="accordion-item border-0 text-capitalize px-0">
-															<div class="accordion-header d-flex justify-content-between box-shadow-none collapsed py-2 px-0" type="button" data-bs-toggle="collapse" data-bs-target="#shoplist6">
-																<a href="#" class="text-decoration-none">
-																	<input class="form-check-input box-shadow-none rounded-0" type="checkbox" value="" />
-																	<span class="ps-1 text-secondary">smartphone & tablet</span>
-																</a>
-																<div>
-																	<span class="accordion-toggle-open">+</span>
-																	<span class="accordion-toggle-close">-</span>
-																</div>
-															</div>
-															<div id="shoplist6" class="accordion-collapse collapse transition-800 timing-function-ease-out" aria-labelledby="panelsStayOpen-headingOne">
-																<div class="accordion-body p-0">
-																	<ul class="list-group list-group-transparent list-group-border-0 ps-4">
-																		<a href="#" class="list-group-item list-group-item-action text-muted py-1">backup charger</a>
-																		<a href="#" class="list-group-item list-group-item-action text-muted py-1">headphone</a>
-																		<a href="#" class="list-group-item list-group-item-action text-muted py-1">power socket</a>
-																		<a href="#" class="list-group-item list-group-item-action text-muted py-1">printer</a>
-																		<a href="#" class="list-group-item list-group-item-action text-muted py-1">USB</a>
-																		<a href="#" class="list-group-item list-group-item-action text-muted py-1">wedcam</a>
-																		<a href="#" class="list-group-item list-group-item-action text-muted py-1">wi-Fi router</a>
-																	</ul>
-																</div>
-															</div>
-														</div>
-														<!--====== Accordion-Item TV & audio ======-->
-														<div class="accordion-item border-0 text-capitalize px-0">
-															<div class="accordion-header d-flex justify-content-between box-shadow-none collapsed py-2 px-0" type="button" data-bs-toggle="collapse" data-bs-target="#shoplist7">
-																<a href="#" class="text-decoration-none">
-																	<input class="form-check-input box-shadow-none rounded-0" type="checkbox" value="" />
-																	<span class="ps-1 text-secondary">TV & audio</span>
-																</a>
-																<div>
-																	<span class="accordion-toggle-open">+</span>
-																	<span class="accordion-toggle-close">-</span>
-																</div>
-															</div>
-															<div id="shoplist7" class="accordion-collapse collapse transition-800 timing-function-ease-out" aria-labelledby="panelsStayOpen-headingOne">
-																<div class="accordion-body p-0">
-																	<ul class="list-group list-group-transparent list-group-border-0 ps-4">
-																		<a href="#" class="list-group-item list-group-item-action text-muted py-1">backup charger</a>
-																		<a href="#" class="list-group-item list-group-item-action text-muted py-1">headphone</a>
-																		<a href="#" class="list-group-item list-group-item-action text-muted py-1">power socket</a>
-																		<a href="#" class="list-group-item list-group-item-action text-muted py-1">printer</a>
-																		<a href="#" class="list-group-item list-group-item-action text-muted py-1">USB</a>
-																		<a href="#" class="list-group-item list-group-item-action text-muted py-1">wedcam</a>
-																		<a href="#" class="list-group-item list-group-item-action text-muted py-1">wi-Fi router</a>
-																	</ul>
-																</div>
-															</div>
-														</div>
-														<!--====== Accordion-Item uncategorized ======-->
-														<div class="accordion-item border-0 text-capitalize px-0">
-															<div class="accordion-header d-flex justify-content-between box-shadow-none collapsed py-2 px-0" type="button" data-bs-toggle="collapse" data-bs-target="#shoplist8">
-																<a href="#" class="text-decoration-none">
-																	<input class="form-check-input box-shadow-none rounded-0" type="checkbox" value="" />
-																	<span class="ps-1 text-secondary">uncategorized</span>
-																</a>
-																<div>
-																	<span class="accordion-toggle-open">+</span>
-																	<span class="accordion-toggle-close">-</span>
-																</div>
-															</div>
-															<div id="shoplist8" class="accordion-collapse collapse transition-800 timing-function-ease-out" aria-labelledby="panelsStayOpen-headingOne">
-																<div class="accordion-body p-0">
-																	<ul class="list-group list-group-transparent list-group-border-0 ps-4">
-																		<a href="#" class="list-group-item list-group-item-action text-muted py-1">backup charger</a>
-																		<a href="#" class="list-group-item list-group-item-action text-muted py-1">headphone</a>
-																		<a href="#" class="list-group-item list-group-item-action text-muted py-1">power socket</a>
-																		<a href="#" class="list-group-item list-group-item-action text-muted py-1">printer</a>
-																		<a href="#" class="list-group-item list-group-item-action text-muted py-1">USB</a>
-																		<a href="#" class="list-group-item list-group-item-action text-muted py-1">wedcam</a>
-																		<a href="#" class="list-group-item list-group-item-action text-muted py-1">wi-Fi router</a>
-																	</ul>
-																</div>
-															</div>
-														</div>
-													</div>
-												</div>
-											</div>
-											<!--====== Accordion-Item Cametas-&-Photos ======-->
-											<div class="accordion-item border-0 text-capitalize px-0">
-												<div class="accordion-header d-flex justify-content-between ccordion-button box-shadow-none collapsed py-2 px-0" type="button" data-bs-toggle="collapse" data-bs-target="#shoplist2">
-													<a href="#" class="text-decoration-none">
-														<input class="form-check-input box-shadow-none rounded-0" type="checkbox" value="" />
-														<span class="ps-1 text-secondary">cameras & photos</span>
-													</a>
-													<div>
-														<span class="accordion-toggle-open">+</span>
-														<span class="accordion-toggle-close">-</span>
-													</div>
-												</div>
-												<div id="shoplist2" class="accordion-collapse collapse transition-800 timing-function-ease-out" aria-labelledby="panelsStayOpen-headingOne">
-													<div class="accordion-body p-0">
-														<ul class="list-group list-group-transparent list-group-border-0 ps-4">
-															<a href="#" class="list-group-item list-group-item-action text-muted py-1">backup charger</a>
-															<a href="#" class="list-group-item list-group-item-action text-muted py-1">headphone</a>
-															<a href="#" class="list-group-item list-group-item-action text-muted py-1">power socket</a>
-															<a href="#" class="list-group-item list-group-item-action text-muted py-1">printer</a>
-															<a href="#" class="list-group-item list-group-item-action text-muted py-1">USB</a>
-															<a href="#" class="list-group-item list-group-item-action text-muted py-1">wedcam</a>
-															<a href="#" class="list-group-item list-group-item-action text-muted py-1">wi-Fi router</a>
-														</ul>
-													</div>
-												</div>
-											</div>
-										</div>
-									</div>
-									<!--====== Accordion-End ======-->
-									<!--== section products-on-sale ==-->
-									<div class="col-12 d-lg-none mb-4 pe-4">
-										<div class="form-check small">
-											<input class="form-check-input box-shadow-none rounded-0" type="checkbox" value="" />
-											<label class="form-check-label text-uppercase fw-bold small" for="flexCheckDefault">show only products on sale</label>
-										</div>
-									</div>
-									<!--== section sort-list ==-->
-									<div class="col-12 d-md-none mb-5 pe-4">
-										<select class="form-select box-shadow-none rounded-0 border-0 bg-light text-capitalize" aria-label="Default select example">
-											<option selected>sort by latest</option>
-											<option value="1">sort by popularity</option>
-											<option value="2">sort by average rating</option>
-											<option value="3">sort by price: low to high</option>
-											<option value="4">sort by price: high to low</option>
-										</select>
-									</div>
-									<!--== section price ==-->
-									<div class="col-12 mb-5 pe-4">
-										<label for="customRange1" class="form-label text-uppercase fw-bold mt-1 mb-1">price</label>
-										<input type="range" class="form-range" id="customRange1" />
-									</div>
-									<!--== section colors ==-->
-									<div class="col-12 mb-5 pe-4">
-										<p class="text-uppercase fw-bold mt-1 mb-2">colors</p>
-										<div class="row g-2">
-											<div class="col-auto"><a href="#" class="rounded-2 border d-inline-block h-6 w-6 bg-white d-block"></a></div>
-											<div class="col-auto"><a href="#" class="rounded-2 border d-inline-block h-6 w-6 bg-light d-block"></a></div>
-											<div class="col-auto"><a href="#" class="rounded-2 border d-inline-block h-6 w-6 bg-secondary d-block"></a></div>
-											<div class="col-auto"><a href="#" class="rounded-2 border d-inline-block h-6 w-6 bg-black d-block"></a></div>
-											<div class="col-auto"><a href="#" class="rounded-2 border d-inline-block h-6 w-6 bg-primary d-block"></a></div>
-											<div class="col-auto"><a href="#" class="rounded-2 border d-inline-block h-6 w-6 bg-success d-block"></a></div>
-											<div class="col-auto"><a href="#" class="rounded-2 border d-inline-block h-6 w-6 bg-danger d-block"></a></div>
-											<div class="col-auto"><a href="#" class="rounded-2 border d-inline-block h-6 w-6 bg-warning d-block"></a></div>
-										</div>
-									</div>
-									<!--== section cpu ==-->
-									<div class="col-12 mb-5 pe-4">
-										<p class="text-uppercase fw-bold mt-1 mb-2">cpu</p>
-										<div class="row g-2 text-center small">
-											<div class="col-auto"><a href="#" class="d-block text-muted text-decoration-none px-2 py-2 bg-light">Rayzen</a></div>
-											<div class="col-auto"><a href="#" class="d-block text-muted text-decoration-none px-2 py-2 bg-light">Xeon</a></div>
-											<div class="col-auto"><a href="#" class="d-block text-muted text-decoration-none px-2 py-2 bg-light">Althion</a></div>
-											<div class="col-auto"><a href="#" class="d-block text-muted text-decoration-none px-2 py-2 bg-light">Core i3</a></div>
-											<div class="col-auto"><a href="#" class="d-block text-muted text-decoration-none px-2 py-2 bg-light">Core i5</a></div>
-											<div class="col-auto"><a href="#" class="d-block text-muted text-decoration-none px-2 py-2 bg-light">Core i7</a></div>
-											<div class="col-auto"><a href="#" class="d-block text-muted text-decoration-none px-2 py-2 bg-light">Core i9</a></div>
-											<div class="col-auto"><a href="#" class="d-block text-muted text-decoration-none px-2 py-2 bg-light">Core i10</a></div>
-										</div>
-									</div>
-									<!--== section storage ==-->
-									<div class="col-12 mb-5 pe-4">
-										<p class="text-uppercase fw-bold mt-1 mb-2">storage</p>
-										<div class="row g-2 text-center text-capitalize small">
-											<div class="col-4"><a href="#" class="d-block text-muted text-decoration-none px-2 py-2 bg-light">16GB</a></div>
-											<div class="col-4"><a href="#" class="d-block text-muted text-decoration-none px-2 py-2 bg-light">32GB</a></div>
-											<div class="col-4"><a href="#" class="d-block text-muted text-decoration-none px-2 py-2 bg-light">64GB</a></div>
-											<div class="col-4"><a href="#" class="d-block text-muted text-decoration-none px-2 py-2 bg-light">128GB</a></div>
-											<div class="col-4"><a href="#" class="d-block text-muted text-decoration-none px-2 py-2 bg-light">256GB</a></div>
-											<div class="col-4"><a href="#" class="d-block text-muted text-decoration-none px-2 py-2 bg-light">512BG</a></div>
-											<div class="col-4"><a href="#" class="d-block text-muted text-decoration-none px-2 py-2 bg-light">1TB</a></div>
-											<div class="col-4"><a href="#" class="d-block text-muted text-decoration-none px-2 py-2 bg-light">2TB</a></div>
-										</div>
-									</div>
-									<!--== section brands ==-->
-									<div class="col-12 mb-5 pe-4">
-										<p class="text-uppercase fw-bold mt-1 mb-2">brands</p>
-										<ul class="list-group list-group-border-0 text-capitalize box-shadow-none rounded-0">
-											<a href="#" class="list-group-item text-muted px-0 py-1" v-for="(item, index) in 10" :key="index"><input class="box-shadow-none rounded-0 form-check-input me-2" type="checkbox" value="" />brand {{ index + 1 }}</a>
-										</ul>
-									</div>
-									<!--== section avarage-rating ==-->
-									<div class="col-12 mb-5 pe-4">
-										<p class="text-uppercase fw-bold mt-1 mb-2">avarage rating</p>
-										<div class="small py-1">
-											<i class="fas fa-star text-warning"></i>
-											<i class="fas fa-star text-warning"></i>
-											<i class="fas fa-star text-warning"></i>
-											<i class="fas fa-star text-warning"></i>
-											<i class="fas fa-star text-warning"></i>
-											<span class="text-secondary">(24)</span>
-										</div>
-										<div class="small py-1">
-											<i class="fas fa-star text-warning"></i>
-											<i class="fas fa-star text-warning"></i>
-											<i class="fas fa-star text-warning"></i>
-											<i class="fas fa-star text-warning"></i>
-											<i class="far fa-star text-warning"></i>
-											<span class="text-secondary">(10)</span>
-										</div>
-										<div class="small py-1">
-											<i class="fas fa-star text-warning"></i>
-											<i class="fas fa-star text-warning"></i>
-											<i class="fas fa-star text-warning"></i>
-											<i class="far fa-star text-warning"></i>
-											<i class="far fa-star text-warning"></i>
-											<span class="text-secondary">(4)</span>
-										</div>
-										<div class="small py-1">
-											<i class="fas fa-star text-warning"></i>
-											<i class="fas fa-star text-warning"></i>
-											<i class="far fa-star text-warning"></i>
-											<i class="far fa-star text-warning"></i>
-											<i class="far fa-star text-warning"></i>
-											<span class="text-secondary">(2)</span>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-					</div>
-					<!--===== Product-Items-area =====-->
-					<div class="col-12 col-lg-9 px-3">
-						<div class="row justify-content-between align-items-center mt-2 mb-1 small">
-							<div class="col-auto d-lg-none ps-0">
-								<button class="btn box-shadow-none text-info transition-800 hover-bg-danger bg-transparent border-0" data-bs-toggle="offcanvas" data-bs-target="#offcanvas">
-									<i class="fas fa-sliders-h"></i>
-								</button>
-							</div>
-							<div class="col-auto form-check d-none d-lg-block">
-								<input class="form-check-input box-shadow-none rounded-0" type="checkbox" value="" id="flexCheckDefault" />
-								<label class="form-check-label text-uppercase fw-bold small" for="flexCheckDefault">show only products on sale </label>
-							</div>
-							<div class="col-auto d-none d-md-block">
-								<select class="form-select box-shadow-none rounded-0 border-0 bg-light" aria-label="Default select example">
-									<option selected>sort by latest</option>
-									<option value="1">sort by popularity</option>
-									<option value="2">sort by average rating</option>
-									<option value="3">sort by price: low to high</option>
-									<option value="4">sort by price: high to low</option>
-								</select>
-							</div>
-						</div>
-						<div class="row justify-content-center gap-2 gap-sm-0 pb-4">
-							<div class="col-8 col-sm-4 col-md-3 p-0" v-for="(product, index) in products" :key="index">
-								<div class="card rounded-0 group-hover p-2 h-100">
-									<div class="overflow-hidden position-relative">
-										<div class="overflow-hidden text-center w-100" style="height: 100px">
-											<img class="h-100 w-100 object-fit-contain" :src="product['image']" />
-											<!-- <img class="h-100 w-100 object-fit-contain" :src="product['thumbnail']" /> -->
-										</div>
-										<div class="card-img-overlay rounded-0 d-flex p-0 bg-opacity-0 justify-content-end align-items-end bg-dark hover-bg-opacity-10 transition-1000">
-											<div class="position-absolute top- bottom-0 end-0 btn-group-vertical transform-rotateY-90 hover-transform-rotateY-0 transition-500" style="z-index: 100">
-												<button class="btn text-light p-1 border-0 rounded-0 bg-secondary" style="height: 30px; width: 30px">
-													<ScaleIcon class="w-full h-full" />
-												</button>
-												<button @click="wishlist.addItem(product)" class="btn text-light p-1 border-0 rounded-0" :class="wishlist.items[product['id']]?.wishlist ? 'bg-success' : 'bg-secondary'" style="height: 30px; width: 30px">
-													<HeartIcon class="w-full h-full" />
-												</button>
-											</div>
-										</div>
-									</div>
-									<div class="card-body text-capitalize small px-0">
-										<p class="mb-1">{{ product["id"] }}</p>
-										<p class="mb-1">{{ product["title"] }}</p>
-										<p class="my-2 small truncate">{{ product["description"] }}</p>
-										<strong class="mt-2">$ {{ product["price"] }}</strong>
-										<div class="d-flex jusitify-items-center gap-1 small py-1">
-											<StarIcon class="w-4 h-4 text-warning" />
-											<StarIcon class="w-4 h-4 text-warning" />
-											<StarIcon class="w-4 h-4 text-warning" />
-											<StarIcon class="w-4 h-4 text-warning" />
-											<StarIcon class="w-4 h-4 text-warning" />
-											<span class="text-secondary">({{ product["rating"] }})</span>
-										</div>
-									</div>
-									<div class="card-footer border-0 bg-transparent h-6 overflow-hidden p-0">
-										<div class="hover-mt-n transition-500 small">
-											<div class="d-flex align-items-center text-uppercase small cursor-pointer">
-												<button @click="cart.addItem(product)" class="text-decoration-none text-dark fw-bold">add to cart</button>
-												<div class="mx-auto"></div>
-												<!-- <router-link :to="{ name: 'singleProduct' }">quick view</router-link> -->
-												<router-link :to="'/shop/singleProduct/' + product['id']" class="text-decoration-none text-dark fw-bold">quick view</router-link>
-											</div>
-										</div>
-									</div>
-								</div>
-								<!-- Modal -->
-								<div class="modal fade" id="product-modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
-									<!-- ====== including php (productCategory-modal.php) ====== -->
-								</div>
-							</div>
-						</div>
-						<div class="text-center">
-							<p class="mb-2">You're viewed 20 of 79 products</p>
-							<button v-if="products.length > 0" @click="lodeMore()" class="fw-bold text-white bg-dark hover-border-red hover-text-red hover-bg-transparent btn rounded-0 text-uppercase box-shadow-none" type="button"><small>load more...</small></button>
-						</div>
-					</div>
-				</div>
-			</div>
-		</section>
-		<RouterView />
-	</Layout>
-</template>
-<style scoped>
-	.truncate {
-		overflow: hidden;
-		text-overflow: ellipsis;
-		display: -webkit-box;
-		-webkit-line-clamp: 3; /* number of lines to show */
-		line-clamp: 2;
-		-webkit-box-orient: vertical;
-		text-wrap: wrap;
-	}
-	.group-hover:hover .hover-mt-n15,
-	.hover-mt-n15:hover {
-		margin-top: -1.5rem;
-	}
-	.accordion-toggle-open {
-		display: none;
-	}
-
-	.collapsed .accordion-toggle-open {
-		display: block;
-	}
-
-	.collapsed .accordion-toggle-close {
-		display: none;
-	}
-
-	.accordion-toggle-close {
-		display: block;
-	}
-</style>
diff --git a/src/components/layouts/Layouts.vue b/src/layouts/AppDashboardLayout.vue
similarity index 73%
rename from src/components/layouts/Layouts.vue
rename to src/layouts/AppDashboardLayout.vue
index 565c6c1..f20f535 100644
--- a/src/components/layouts/Layouts.vue
+++ b/src/layouts/AppDashboardLayout.vue
@@ -1,21 +1,21 @@
 <script setup>
-	import { menuConfigStore } from "../../store/menuConfigStore"
-	import AppBackTopbar from "../headers/AppBackTopbar.vue"
-	import AppSidebar from "../sidebers/AppSidebar.vue"
-	import BreadcrumbOld from "../breadcrumb/BreadcrumbOld.vue"
+	import { menuConfigStore } from "../store/menuConfigStore"
+	import AppDashboardNavbar from "./AppDashboardNavbar.vue"
+	import AppDashboardSidebar from "./AppDashboardSidebar.vue"
+	import BreadcrumbOld from "../components/breadcrumb/BreadcrumbOld.vue"
 
 	const menuConfig = menuConfigStore
 </script>
 <template>
 	<div id="" class="flex flex-col bg-[#161a1d] text-white h-screen">
 		<div class="grow fixed w-full z-[1000]">
-			<AppBackTopbar />
+			<AppDashboardNavbar />
 		</div>
 		<div class="grow transition-all duration-700 relative" :class="menuConfig.activeMenu == true ? 'w-full' : 'ml-64'">
 			<!-- Sidebar Page Content -->
 			<nav class="transition-all duration-700" id="mainsidebar">
 				<div class="bg-[#262d33] fixed inset-0 pt-[50px] z-[999] flex flex-col w-64 h-full transition-all duration-700 shadow" :class="menuConfig.activeMenu == true ? '-ml-64 lg:-ml-64' : 'ml-0'">
-					<AppSidebar />
+					<AppDashboardSidebar />
 				</div>
 			</nav>
 			<!-- Default components loder under the slot -->
@@ -33,3 +33,7 @@
 		</div>
 	</div>
 </template>
+
+<style scoped>
+	@import url("../assets/css/scroll.css");
+</style>
diff --git a/src/components/headers/AppBackTopbar.vue b/src/layouts/AppDashboardNavbar.vue
similarity index 96%
rename from src/components/headers/AppBackTopbar.vue
rename to src/layouts/AppDashboardNavbar.vue
index b891477..832b552 100644
--- a/src/components/headers/AppBackTopbar.vue
+++ b/src/layouts/AppDashboardNavbar.vue
@@ -1,14 +1,14 @@
 <script setup>
 	import { ref } from "vue"
-	import { authStore } from "../../store/authStore"
+	import { authStore } from "../store/authStore"
 	const auth = authStore
 
 	import { AdjustmentsHorizontalIcon, AdjustmentsVerticalIcon, BellAlertIcon, Cog8ToothIcon, MagnifyingGlassIcon, UserIcon } from "@heroicons/vue/24/outline"
-	import { menuConfigStore } from "../../store/menuConfigStore"
+	import { menuConfigStore } from "../store/menuConfigStore"
 
 	const menuConfig = menuConfigStore
 
-	import MenuDropdown from "../dropdown/MenuDropdown.vue"
+	import MenuDropdown from "../components/dropdown/MenuDropdown.vue"
 </script>
 <template>
 	<div class="mx-auto px-3 sm:px-6 bg-[#262d33] w-full h-[50px] flex items-center justify-betwee shadow" @click.stop="manuToogelClose">
@@ -126,7 +126,6 @@
 </template>
 
 <style scoped>
-	@import url("../../assets/css/scroll.css");
 	.slide-fade-enter-from {
 		transition: all 0.6s ease-out;
 		transform: translateY(0px);
diff --git a/src/components/sidebers/AppSidebar.vue b/src/layouts/AppDashboardSidebar.vue
similarity index 92%
rename from src/components/sidebers/AppSidebar.vue
rename to src/layouts/AppDashboardSidebar.vue
index c1f9b4c..eb02423 100644
--- a/src/components/sidebers/AppSidebar.vue
+++ b/src/layouts/AppDashboardSidebar.vue
@@ -1,7 +1,6 @@
 <script setup>
-	import { RouterLink } from "vue-router"
-	import Accordion from "../accordion/Accordion.vue"
-	import AccordionToggle from "../accordion/AccordionToggle.vue"
+	import Accordion from "../components/accordion/Accordion.vue"
+	import AccordionToggle from "../components/accordion/AccordionToggle.vue"
 </script>
 <template>
 	<div class="w-full mx-auto px-3 sm:pl-5 text-white space-y-1 overflow-y-auto">
@@ -43,5 +42,5 @@
 </template>
 
 <style scoped>
-	@import url("../../assets/css/scroll.css");
+	/* @import url("~/assets/css/scroll.css"); */
 </style>
diff --git a/src/components/views/footer/Footer.vue b/src/layouts/AppPublicFooter.vue
similarity index 100%
rename from src/components/views/footer/Footer.vue
rename to src/layouts/AppPublicFooter.vue
diff --git a/src/views/public/Layout.vue b/src/layouts/AppPublicLayout.vue
similarity index 62%
rename from src/views/public/Layout.vue
rename to src/layouts/AppPublicLayout.vue
index 767a591..36cb293 100644
--- a/src/views/public/Layout.vue
+++ b/src/layouts/AppPublicLayout.vue
@@ -1,13 +1,13 @@
 <script setup>
-	import "bootstrap"
-	import Breadcrumb from "../../components/breadcrumb/Breadcrumb.vue"
-	import TopHeader from "./header/TopHeader.vue"
-	import Footer from "./footer/Footer.vue"
+	import Breadcrumb from "../components/breadcrumb/Breadcrumb.vue"
+	import AppPublicNavbar from "./AppPublicNavbar.vue"
+	import AppPublicFooter from "./AppPublicFooter.vue"
+	import "bootstrap/dist/js/bootstrap.bundle"
 </script>
 <template>
 	<div>
 		<header>
-			<TopHeader />
+			<AppPublicNavbar />
 		</header>
 
 		<!-- Default components loder under the slot -->
@@ -20,8 +20,7 @@
 			<!-- </div> -->
 		</main>
 		<footer>
-			<Footer />
+			<AppPublicFooter />
 		</footer>
 	</div>
 </template>
-
diff --git a/src/views/public/header/TopHeader.vue b/src/layouts/AppPublicNavbar.vue
similarity index 98%
rename from src/views/public/header/TopHeader.vue
rename to src/layouts/AppPublicNavbar.vue
index b32dfd4..89ee817 100644
--- a/src/views/public/header/TopHeader.vue
+++ b/src/layouts/AppPublicNavbar.vue
@@ -1,14 +1,13 @@
 <script setup>
 	import { onBeforeMount, onMounted, ref, watch } from "vue"
-	import { authStore } from "../../../store/authStore"
+	import { authStore } from "../store/authStore"
+	import { cartStore } from "../store/cartStore"
+	import { wishlist } from "../store/wishlistStore"
 	const auth = authStore
-	import { cartStore } from "../../../store/cartStore"
 	const cart = cartStore
-	import { wishlist } from "../../../store/wishlistStore"
 
 	const userEmail = ref("john@doe.com")
 	const userPassword = ref("12345")
-	
 </script>
 <template>
 	<!--header-section-->
@@ -91,6 +90,7 @@
 										<a class="nav-link" href="# ">usd</a>
 									</li>
 									<!-- user login / register -->
+
 									<li class="nav-item d-none d-md-block">
 										<div class="dropdown text-end" v-if="auth.isAuthenticated">
 											<button class="d-block link-body-emphasis text-decoration-none data-toggle" data-bs-toggle="dropdown">
@@ -119,7 +119,7 @@
 													d="M225.8 468.2l-2.5-2.3L48.1 303.2C17.4 274.7 0 234.7 0 192.8v-3.3c0-70.4 50-130.8 119.2-144C158.6 37.9 198.9 47 231 69.6c9 6.4 17.4 13.8 25 22.3c4.2-4.8 8.7-9.2 13.5-13.3c3.7-3.2 7.5-6.2 11.5-9c0 0 0 0 0 0C313.1 47 353.4 37.9 392.8 45.4C462 58.6 512 119.1 512 189.5v3.3c0 41.9-17.4 81.9-48.1 110.4L288.7 465.9l-2.5 2.3c-8.2 7.6-19 11.9-30.2 11.9s-22-4.2-30.2-11.9zM239.1 145c-.4-.3-.7-.7-1-1.1l-17.8-20c0 0-.1-.1-.1-.1c0 0 0 0 0 0c-23.1-25.9-58-37.7-92-31.2C81.6 101.5 48 142.1 48 189.5v3.3c0 28.5 11.9 55.8 32.8 75.2L256 430.7 431.2 268c20.9-19.4 32.8-46.7 32.8-75.2v-3.3c0-47.3-33.6-88-80.1-96.9c-34-6.5-69 5.4-92 31.2c0 0 0 0-.1 .1s0 0-.1 .1l-17.8 20c-.3 .4-.7 .7-1 1.1c-4.5 4.5-10.6 7-16.9 7s-12.4-2.5-16.9-7z"
 												/>
 											</svg>
-											<span v-show="wishlist.items.length > 0" class="position-absolute ms-3 mt-2 top-0 translate-middle badge rounded-pill bg-danger">{{ wishlist.items.length }}</span>
+											<span v-if="auth.isAuthenticated && wishlist.items.length > 0" class="position-absolute ms-3 mt-2 top-0 translate-middle badge rounded-pill bg-danger">{{ wishlist.items.length }}</span>
 										</button>
 									</li>
 									<li class="nav-item">
diff --git a/src/components/views/Home.vue b/src/pages/Home.vue
similarity index 87%
rename from src/components/views/Home.vue
rename to src/pages/Home.vue
index 554861e..9178adb 100644
--- a/src/components/views/Home.vue
+++ b/src/pages/Home.vue
@@ -1,5 +1,5 @@
 <script setup>
-	import Layout from "./Layout.vue"
+	import AppPublicLayout from "../layouts/AppPublicLayout.vue"
 	import MainSlider from "./home/MainSlider.vue"
 	import Support from "./home/Support.vue"
 	import ProductCategory from "./home/ProductCategory.vue"
@@ -13,7 +13,7 @@
 	import Brand from "./home/Brand.vue"
 </script>
 <template>
-	<Layout>
+	<AppPublicLayout>
 		<MainSlider />
 		<Support />
 		<ProductCategory />
@@ -25,5 +25,5 @@
 		<Accessories />
 		<Blog />
 		<Brand />
-	</Layout>
+	</AppPublicLayout>
 </template>
diff --git a/src/views/NotFound.vue b/src/pages/NotFound.vue
similarity index 100%
rename from src/views/NotFound.vue
rename to src/pages/NotFound.vue
diff --git a/src/views/Welocme.vue b/src/pages/Welocme.vue
similarity index 100%
rename from src/views/Welocme.vue
rename to src/pages/Welocme.vue
diff --git a/src/views/auth/Login-Tailwind.vue b/src/pages/auth/Login-Tailwind.vue
similarity index 100%
rename from src/views/auth/Login-Tailwind.vue
rename to src/pages/auth/Login-Tailwind.vue
diff --git a/src/views/auth/Login.vue b/src/pages/auth/Login.vue
similarity index 92%
rename from src/views/auth/Login.vue
rename to src/pages/auth/Login.vue
index 0bf6dc6..922a66c 100644
--- a/src/views/auth/Login.vue
+++ b/src/pages/auth/Login.vue
@@ -1,6 +1,6 @@
 <script setup>
 	import { ref } from "vue"
-	import Layout from "../public/Layout.vue"
+	import AppPublicLayout from "../../layouts/AppPublicLayout.vue"
 	import { authStore } from "../../store/authStore"
 	const auth = authStore
 
@@ -9,7 +9,7 @@
 </script>
 
 <template>
-	<Layout>
+	<AppPublicLayout>
 		<div class="w-50 m-auto d-flex flex-col align-items-center justify-content-center py-4">
 			<!-- login form-->
 			<form @submit.prevent="auth.authenticate(userEmail, userPassword)" class="row m-auto">
@@ -27,7 +27,7 @@
 				</div>
 			</form>
 		</div>
-	</Layout>
+	</AppPublicLayout>
 </template>
 
 <style scoped></style>
diff --git a/src/views/auth/Profile.vue b/src/pages/auth/Profile.vue
similarity index 96%
rename from src/views/auth/Profile.vue
rename to src/pages/auth/Profile.vue
index b44f616..5c3b3bb 100644
--- a/src/views/auth/Profile.vue
+++ b/src/pages/auth/Profile.vue
@@ -1,9 +1,9 @@
 <script setup>
 	import { reactive } from "vue"
-	import Layouts from "../../components/layouts/Layouts.vue"
+	import AppDashboardLayout from "../../layouts/AppDashboardLayout.vue"
 </script>
 <template>
-	<Layouts>
+	<AppDashboardLayout>
 		<form method="post" enctype="multipart/form-data" class="mb-36">
 			<div class="relative h-64 rounded bg-[url(`../../assets/images/user-cover.jpg`)]">
 				<div class="h-40 w-40 absolute inset-0 block mt-auto -mb-16 mx-auto group">
@@ -48,5 +48,5 @@
 				<button name="profileUpdate" class="bg-blue-700 text-white w-full py-2 rounded-lg hover:bg-blue-600 transition-all duration-300">Update</button>
 			</div>
 		</form>
-	</Layouts>
+	</AppDashboardLayout>
 </template>
diff --git a/src/views/auth/register.vue b/src/pages/auth/register.vue
similarity index 95%
rename from src/views/auth/register.vue
rename to src/pages/auth/register.vue
index d6d5b13..6a353c8 100644
--- a/src/views/auth/register.vue
+++ b/src/pages/auth/register.vue
@@ -1,6 +1,6 @@
 <script setup>
 	import { ref } from "vue"
-	import Layout from "../public/Layout.vue"
+	import AppPublicLayout from "../../layouts/AppPublicLayout.vue"
 	import { authStore } from "../../store/authStore"
 	const auth = authStore
 
@@ -9,7 +9,7 @@
 	const userPassword = ref("")
 </script>
 <template>
-	<Layout>
+	<AppPublicLayout>
 		<div class="row w-50 m-auto d-flex flex-col align-items-center justify-content-center py-4">
 			<h2 class="fw-bold mb-5">Sign up now</h2>
 			<form @submit.prevent="auth.userRegister(userName, userEmail, userPassword)">
@@ -56,5 +56,5 @@
 				</div>
 			</form>
 		</div>
-	</Layout>
+	</AppPublicLayout>
 </template>
diff --git a/src/views/public/cart/Cart.vue b/src/pages/cart/Cart.vue
similarity index 98%
rename from src/views/public/cart/Cart.vue
rename to src/pages/cart/Cart.vue
index cf143eb..113013f 100644
--- a/src/views/public/cart/Cart.vue
+++ b/src/pages/cart/Cart.vue
@@ -1,14 +1,14 @@
 <script setup>
 	import { ref, reactive } from "vue"
-	import Layout from "../Layout.vue"
-	import { cartStore } from "../../../store/cartStore"
+	import AppPublicLayout from "../../layouts/AppPublicLayout.vue"
+	import { cartStore } from "../../store/cartStore"
 	const cart = cartStore
 
 	import { HeartIcon, StarIcon } from "@heroicons/vue/24/solid"
 </script>
 
 <template>
-	<Layout>
+	<AppPublicLayout>
 		<!-- start lavel -->
 		<section class="py-3">
 			<div class="container-lg px-4">
@@ -172,7 +172,7 @@
 			</div>
 		</section>
 		<!-- end table -->
-	</Layout>
+	</AppPublicLayout>
 </template>
 
 <style scoped>
diff --git a/src/views/public/checkout/Checkout.vue b/src/pages/checkout/Checkout.vue
similarity index 98%
rename from src/views/public/checkout/Checkout.vue
rename to src/pages/checkout/Checkout.vue
index f7a182c..f9d0d9c 100644
--- a/src/views/public/checkout/Checkout.vue
+++ b/src/pages/checkout/Checkout.vue
@@ -2,14 +2,14 @@
 	import { ref, reactive } from "vue"
 	import axios from "axios"
 
-	import Layout from "../Layout.vue"
-	import { cartStore } from "../../../store/cartStore"
+	import AppPublicLayout from "../../layouts/AppPublicLayout.vue"
+	import { cartStore } from "../../store/cartStore"
 
 	import { HeartIcon, StarIcon } from "@heroicons/vue/24/solid"
 </script>
 
 <template>
-	<Layout>
+	<AppPublicLayout>
 		<section id="shoppign-bag" class="py-3">
 			<div class="container-lg px-4">
 				<div class="row">
@@ -272,7 +272,7 @@
 				</div>
 			</div>
 		</section>
-	</Layout>
+	</AppPublicLayout>
 </template>
 
 <style scoped></style>
diff --git a/src/views/dashboard/Dashboard.vue b/src/pages/dashboard/Dashboard.vue
similarity index 94%
rename from src/views/dashboard/Dashboard.vue
rename to src/pages/dashboard/Dashboard.vue
index 4f9bd4b..d1b5251 100644
--- a/src/views/dashboard/Dashboard.vue
+++ b/src/pages/dashboard/Dashboard.vue
@@ -1,6 +1,6 @@
 <script setup>
 	import { reactive } from "vue"
-	import Layouts from "../../components/layouts/Layouts.vue"
+	import AppDashboardLayout from "../../layouts/AppDashboardLayout.vue"
 
 	import { authStore } from "../../store/authStore"
 	const auth = authStore
@@ -24,7 +24,7 @@
 	]
 </script>
 <template>
-	<Layouts>
+	<AppDashboardLayout>
 		<div class="border border-blue-100 shadow rounded-md p-4 max-w-sm w-full mx-auto opacity-40">
 			<div class="animate-pulse flex space-x-4">
 				<div class="rounded-full bg-slate-200 h-10 w-10"></div>
@@ -41,5 +41,5 @@
 			</div>
 		</div>
 		<EasyDataTable :headers="headers" :items="items" />
-	</Layouts>
+	</AppDashboardLayout>
 </template>
diff --git a/src/views/dashboard/components/Chart.vue b/src/pages/dashboard/components/Chart.vue
similarity index 82%
rename from src/views/dashboard/components/Chart.vue
rename to src/pages/dashboard/components/Chart.vue
index ad04cff..61f501b 100644
--- a/src/views/dashboard/components/Chart.vue
+++ b/src/pages/dashboard/components/Chart.vue
@@ -1,13 +1,13 @@
 <script setup>
 	import { ref, reactive, computed } from "vue"
-	import Layouts from "../../../components/layouts/Layouts.vue"
+	import AppDashboardLayout from "../../../layouts/AppDashboardLayout.vue"
 	import Bar from "../../../components/charts/Bar.vue"
 	import Line from "../../../components/charts/Line.vue"
 	import Pie from "../../../components/charts/Pie.vue"
 	import Doughnut from "../../../components/charts/Doughnut.vue"
 </script>
 <template>
-	<Layouts>
+	<AppDashboardLayout>
 		<div class="grid grid-cols-2 gap-x-8 gap-y-8">
 			<div class="relativ">
 				<Bar />
@@ -22,5 +22,5 @@
 				<Doughnut />
 			</div>
 		</div>
-	</Layouts>
+	</AppDashboardLayout>
 </template>
diff --git a/src/views/dashboard/components/CircleProgress.vue b/src/pages/dashboard/components/CircleProgress.vue
similarity index 93%
rename from src/views/dashboard/components/CircleProgress.vue
rename to src/pages/dashboard/components/CircleProgress.vue
index 7ef352b..db0ca19 100644
--- a/src/views/dashboard/components/CircleProgress.vue
+++ b/src/pages/dashboard/components/CircleProgress.vue
@@ -1,12 +1,12 @@
 <script setup>
-	import Layouts from "../../../components/layouts/Layouts.vue"
+	import AppDashboardLayout from "../../../layouts/AppDashboardLayout.vue"
 	//import CircleProgress from "../../../components/progress/CircleProgress.vue"
 
 	import "vue3-circle-progress/dist/circle-progress.css"
 	import CircleProgress from "vue3-circle-progress"
 </script>
 <template>
-	<Layouts>
+	<AppDashboardLayout>
 		<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-8">
 			<!-- <CircleProgress /> -->
 
@@ -55,5 +55,5 @@
 				/>
 			</div>
 		</div>
-	</Layouts>
+	</AppDashboardLayout>
 </template>
diff --git a/src/views/dashboard/components/DataTable.vue b/src/pages/dashboard/components/DataTable.vue
similarity index 93%
rename from src/views/dashboard/components/DataTable.vue
rename to src/pages/dashboard/components/DataTable.vue
index 5b20aeb..39becc4 100644
--- a/src/views/dashboard/components/DataTable.vue
+++ b/src/pages/dashboard/components/DataTable.vue
@@ -1,7 +1,7 @@
 <script setup>
 	import { ref, reactive, computed, onMounted } from "vue"
 
-	import Layouts from "../../../components/layouts/Layouts.vue"
+	import AppDashboardLayout from "../../../layouts/AppDashboardLayout.vue"
 
 	// dataTable
 	import Vue3EasyDataTable from "vue3-easy-data-table"
@@ -38,7 +38,7 @@
 	}
 </script>
 <template>
-	<Layouts>
+	<AppDashboardLayout>
 		<span>search field:</span>
 		<select v-model="searchField" class="bg-slate-900">
 			<option>player</option>
@@ -52,5 +52,5 @@
 		<!-- <a href="https://google.com">nothing here</a> -->
 		<!-- 
 		<option v-for="item in rowsPerPageOptions" :key="item" :selected="item === rowsPerPageActiveOption" :value="item">{{ item }} rows per page {{ item }}</option> -->
-	</Layouts>
+	</AppDashboardLayout>
 </template>
diff --git a/src/views/dashboard/product/Brand.vue b/src/pages/dashboard/product/Brand.vue
similarity index 79%
rename from src/views/dashboard/product/Brand.vue
rename to src/pages/dashboard/product/Brand.vue
index 1c98b7e..be5dfa1 100644
--- a/src/views/dashboard/product/Brand.vue
+++ b/src/pages/dashboard/product/Brand.vue
@@ -1,13 +1,13 @@
 <script setup>
 	import { reactive } from "vue"
-	import Layouts from "../../../components/layouts/Layouts.vue"
+	import AppDashboardLayout from "../../../layouts/AppDashboardLayout.vue"
 	import { authStore } from "../../../store/authStore"
 	import Swiper from "../../../components/swiper/Swiper.vue"
 	import { SwiperSlide } from "swiper/vue"
 	const auth = authStore
 </script>
 <template>
-	<Layouts>
+	<AppDashboardLayout>
 		<div>
 			<Swiper name="mySwiper" duration="200">
 				<SwiperSlide v-for="(slideContent, index) in 10" :key="index" :virtualIndex="index">
@@ -15,5 +15,5 @@
 				</SwiperSlide>
 			</Swiper>
 		</div>
-	</Layouts>
+	</AppDashboardLayout>
 </template>
diff --git a/src/views/dashboard/product/Unit.vue b/src/pages/dashboard/product/Unit.vue
similarity index 64%
rename from src/views/dashboard/product/Unit.vue
rename to src/pages/dashboard/product/Unit.vue
index 759440b..e134de8 100644
--- a/src/views/dashboard/product/Unit.vue
+++ b/src/pages/dashboard/product/Unit.vue
@@ -1,11 +1,11 @@
 <script setup>
 	import { reactive } from "vue"
-	import Layouts from "../../../components/layouts/Layouts.vue"
+	import AppDashboardLayout from "../../../layouts/AppDashboardLayout.vue"
 	import { authStore } from "../../../store/authStore"
 	const auth = authStore
 </script>
 <template>
-	<Layouts>
+	<AppDashboardLayout>
 		{{ apis.productList("https://dummyjson.com/products") }}
-	</Layouts>
+	</AppDashboardLayout>
 </template>
diff --git a/src/views/dashboard/product/product.vue b/src/pages/dashboard/product/product.vue
similarity index 95%
rename from src/views/dashboard/product/product.vue
rename to src/pages/dashboard/product/product.vue
index 51dbf89..067fe05 100644
--- a/src/views/dashboard/product/product.vue
+++ b/src/pages/dashboard/product/product.vue
@@ -1,6 +1,6 @@
 <script setup>
 	import { reactive, ref } from "vue"
-	import Layouts from "../../../components/layouts/Layouts.vue"
+	import AppDashboardLayout from "../../../layouts/AppDashboardLayout.vue"
 
 	import { authStore } from "../../../store/authStore"
 	const auth = authStore
@@ -43,7 +43,7 @@
 	let str = "RahmanRRobin"
 </script>
 <template>
-	<Layouts>
+	<AppDashboardLayout>
 		<div class="space-y-1">
 			<button type="button" @click="dialog.openModal('product')" class="flex items-center justify-center p-0.5 w-7 h-7 rounded bg-green-600">
 				<PlusSmallIcon />
@@ -70,5 +70,5 @@
 			<!-- replace(/([a-z])([A-Z])/g, "$1 $2") -->
 			{{ str.replace(/([a-z])([A-Z])/g, "$1 $2") }}
 		</div>
-	</Layouts>
+	</AppDashboardLayout>
 </template>
diff --git a/src/pages/home/Accessories.vue b/src/pages/home/Accessories.vue
new file mode 100644
index 0000000..d9c7ee0
--- /dev/null
+++ b/src/pages/home/Accessories.vue
@@ -0,0 +1,79 @@
+<script setup>
+	import { ref, reactive, onBeforeMount } from "vue"
+	import axios from "axios"
+	import { ScaleIcon, StarIcon } from "@heroicons/vue/20/solid"
+
+	import WishListIcon from "../../components/WishListIcon.vue"
+
+	// #store
+	import { cartStore } from "../../store/cartStore"
+
+	const cart = cartStore
+	const products = ref([])
+
+	// #functions
+	onBeforeMount(() => {
+		axios
+			.get("https://dummyjson.com/products?category=smartphones")
+			// .get("http://127.0.0.1:8000/api/products")
+			.then((res) => {
+				// products.value = res.data
+				products.value = res.data.products
+			})
+			.catch((error) => console.log(error))
+	})
+</script>
+
+<template>
+	<!--smartphone-Tablet -section-->
+
+	<section id="smartPhoneTablet ">
+		<div class="container-lg">
+			<div class="py-2 my-1">
+				<h4 class="h4 fw-bolder m-0">Groceries</h4>
+			</div>
+			<div class="row m-0 p-0 g-3 g-sm-0">
+				<template v-for="(product, index) in products" :key="index">
+					<div v-if="'groceries' == product.category" class="col-10 col-sm-4 col-md-3 p-0">
+						<div class="card rounded-0 group-hover p-2 h-100">
+							<div class="overflow-hidden position-relative w-100" style="height: 130px">
+								<img class="w-100 h-100 object-fit-contain" :src="product.thumbnail ?? ' images/demo/electronic-smpt-2.jpg'" />
+								<div class="card-img-overlay rounded-0 d-flex p-0 bg-opacity-0 justify-content-end align-items-end bg-dark hover-bg-opacity-10 duration-300">
+									<div class="z-3 btn-group-vertical transform-rotateY-90 hover-transform-rotateY-0 duration-500">
+										<wish-list-icon :product="product" />
+										<a class="btn btn-light p-0 border-0">
+											<ScaleIcon class="p-1 text-secondary bg-white border" style="height: 30px; width: 30px" />
+										</a>
+									</div>
+									<router-link :to="'/shop/singleProduct/' + product['id']" class="stretched-link z-2"></router-link>
+								</div>
+							</div>
+							<div class="card-body text-capitalize small px-0">
+								<p class="mb-1">{{ product["title"] }}</p>
+								<p class="my-2 small truncat">{{ product["description"] }}</p>
+								<div class="d-flex jusitify-items-center gap-1 small py-1">
+									<StarIcon class="w-4 h-4" v-for="(rate, index) in 5" :key="index" :class="product['rating'] > index ? 'text-warning' : 'text-secondary'" />
+									<span class="text-secondary">({{ product["rating"] }})</span>
+								</div>
+							</div>
+							<div class="card-footer border-0 bg-transparent h-6 overflow-hidden p-0">
+								<div class="hover-mt-n25 duration-500 small">
+									<h6 class="mb-4 pt-1 fw-semibold d-flex align-items-center gap-x-2">
+										<del class="text-danger">${{ product["price"] }}</del>
+										<span class="shrink-0 d-flex align-items-center gap-1">
+											${{ (product["price"] - product["price"] * (product["discountPercentage"] / 100)).toFixed(2) }} <small>({{ product["discountPercentage"] }}%)</small>
+										</span>
+									</h6>
+									<div class="d-flex gap-1 align-items-center text-uppercase small cursor-pointer text-white">
+										<button @click="cart.addItem(product)" class="text-uppercase w-100 text-center px-2 py-1 text-decoration-none bg-primary rounded">Add to cart</button>
+										<button class="w-100 text-center px-2 py-1 text-decoration-none bg-success rounded">Quick view</button>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</template>
+			</div>
+		</div>
+	</section>
+</template>
diff --git a/src/pages/home/Appliances.vue b/src/pages/home/Appliances.vue
new file mode 100644
index 0000000..de8f55e
--- /dev/null
+++ b/src/pages/home/Appliances.vue
@@ -0,0 +1,79 @@
+<script setup>
+	import { ref, reactive, onBeforeMount } from "vue"
+	import axios from "axios"
+	import { ScaleIcon, StarIcon } from "@heroicons/vue/20/solid"
+
+	import WishListIcon from "../../components/WishListIcon.vue"
+
+	// #store
+	import { cartStore } from "../../store/cartStore"
+
+	const cart = cartStore
+	const products = ref([])
+
+	// #functions
+	onBeforeMount(() => {
+		axios
+			.get("https://dummyjson.com/products?category=smartphones")
+			// .get("http://127.0.0.1:8000/api/products")
+			.then((res) => {
+				// products.value = res.data
+				products.value = res.data.products
+			})
+			.catch((error) => console.log(error))
+	})
+</script>
+
+<template>
+	<!--smartphone-Tablet -section-->
+
+	<section id="smartPhoneTablet ">
+		<div class="container-lg">
+			<div class="py-2 my-1">
+				<h4 class="h4 fw-bolder m-0">Appliances</h4>
+			</div>
+			<div class="row m-0 p-0 g-3 g-sm-0">
+				<template v-for="(product, index) in products" :key="index">
+					<div v-if="'home-decoration' == product.category" class="col-10 col-sm-4 col-md-3 p-0">
+						<div class="card rounded-0 group-hover p-2 h-100">
+							<div class="overflow-hidden position-relative w-100" style="height: 130px">
+								<img class="w-100 h-100 object-fit-contain" :src="product.thumbnail ?? ' images/demo/electronic-smpt-2.jpg'" />
+								<div class="card-img-overlay rounded-0 d-flex p-0 bg-opacity-0 justify-content-end align-items-end bg-dark hover-bg-opacity-10 duration-300">
+									<div class="z-3 btn-group-vertical transform-rotateY-90 hover-transform-rotateY-0 duration-500">
+										<wish-list-icon :product="product" />
+										<a class="btn btn-light p-0 border-0">
+											<ScaleIcon class="p-1 text-secondary bg-white border" style="height: 30px; width: 30px" />
+										</a>
+									</div>
+									<router-link :to="'/shop/singleProduct/' + product['id']" class="stretched-link z-2"></router-link>
+								</div>
+							</div>
+							<div class="card-body text-capitalize small px-0">
+								<p class="mb-1">{{ product["title"] }}</p>
+								<p class="my-2 small truncat">{{ product["description"] }}</p>
+								<div class="d-flex jusitify-items-center gap-1 small py-1">
+									<StarIcon class="w-4 h-4" v-for="(rate, index) in 5" :key="index" :class="product['rating'] > index ? 'text-warning' : 'text-secondary'" />
+									<span class="text-secondary">({{ product["rating"] }})</span>
+								</div>
+							</div>
+							<div class="card-footer border-0 bg-transparent h-6 overflow-hidden p-0">
+								<div class="hover-mt-n25 duration-500 small">
+									<h6 class="mb-4 pt-1 fw-semibold d-flex align-items-center gap-x-2">
+										<del class="text-danger">${{ product["price"] }}</del>
+										<span class="shrink-0 d-flex align-items-center gap-1">
+											${{ (product["price"] - product["price"] * (product["discountPercentage"] / 100)).toFixed(2) }} <small>({{ product["discountPercentage"] }}%)</small>
+										</span>
+									</h6>
+									<div class="d-flex gap-1 align-items-center text-uppercase small cursor-pointer text-white">
+										<button @click="cart.addItem(product)" class="text-uppercase w-100 text-center px-2 py-1 text-decoration-none bg-primary rounded">Add to cart</button>
+										<button class="w-100 text-center px-2 py-1 text-decoration-none bg-success rounded">Quick view</button>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</template>
+			</div>
+		</div>
+	</section>
+</template>
diff --git a/src/components/views/home/Baner2.vue b/src/pages/home/Baner2.vue
similarity index 100%
rename from src/components/views/home/Baner2.vue
rename to src/pages/home/Baner2.vue
diff --git a/src/components/views/home/BigBaner.vue b/src/pages/home/BigBaner.vue
similarity index 100%
rename from src/components/views/home/BigBaner.vue
rename to src/pages/home/BigBaner.vue
diff --git a/src/components/views/home/BigBaner2.vue b/src/pages/home/BigBaner2.vue
similarity index 100%
rename from src/components/views/home/BigBaner2.vue
rename to src/pages/home/BigBaner2.vue
diff --git a/src/pages/home/Blog.vue b/src/pages/home/Blog.vue
new file mode 100644
index 0000000..0733f38
--- /dev/null
+++ b/src/pages/home/Blog.vue
@@ -0,0 +1,61 @@
+<script setup>
+	import { ref, reactive, computed, onBeforeMount, onMounted, watch } from "vue"
+	// #plugins/ package
+	import axios from "axios"
+	import { HeartIcon, ScaleIcon, StarIcon } from "@heroicons/vue/20/solid"
+	import { SwiperSlide } from "swiper/vue"
+
+	// #store
+	// #components
+	import Swiper from "../../components/swiper/Swiper.vue"
+
+	// #variables
+	const blogPost = reactive({})
+
+	// #functions
+	onMounted(async () => {
+		const url = `https://dummyjson.com/posts`
+		const response = await axios.get(url)
+		if (200 == response.status) {
+			Object.assign(blogPost, response.data.posts)
+		}
+	})
+</script>
+
+<template>
+	<!--popular-blog-posts-section-->
+
+	<section class="m-5"></section>
+	<section id="popularBlogPosts">
+		<div class="container-lg">
+			<div class="py-2 my-1 d-flex justify-content-between align-items-center">
+				<h4 class="fw-bolder m-0">Most Popular Blog Posts</h4>
+				<h6 class="m-0 small">
+					<a href="#" class="text-uppercase text-decoration-none text-secondary small">view more</a>
+				</h6>
+			</div>
+			<Swiper name="blogPost" duration="3000" class="z-2 h-100" btnClass="text-white bg-secondary">
+				<SwiperSlide v-for="(blog, index) in blogPost" :key="index" class="h-100">
+					<div class="card rounded-0 border-0 group-hover">
+						<div class="overflow-hidden position-relative">
+							<img class="img-fluid" src="images/demo/blog-2.jpg " />
+							<div class="card-img-overlay rounded-0 p-0 bg-dark bg-opacity-0 top-100 hover-bg-opacity-20 hover-top-0 transition-500"></div>
+						</div>
+						<div class="card-body small p-0 text-capitalize">
+							<h6 class="my-1">info here</h6>
+							<h6 class="fw-bolder">{{ blog["title"] }}</h6>
+							<p class="text-muted lh-lg truncate">{{ blog["body"] }}</p>
+							<button class="btn bg-white rounded-0 fw-bolder btn-sm p-0">
+								<a class="text-black text-decoration-none text-uppercase" href="#"
+									>read more
+									<i class="ps-1 fas fa-long-arrow-alt-right"></i>
+								</a>
+							</button>
+						</div>
+					</div>
+				</SwiperSlide>
+			</Swiper>
+		</div>
+	</section>
+	<section class="m-4"></section>
+</template>
diff --git a/src/components/views/home/Brand.vue b/src/pages/home/Brand.vue
similarity index 100%
rename from src/components/views/home/Brand.vue
rename to src/pages/home/Brand.vue
diff --git a/src/views/public/home/MainSlider.vue b/src/pages/home/MainSlider.vue
similarity index 100%
rename from src/views/public/home/MainSlider.vue
rename to src/pages/home/MainSlider.vue
diff --git a/src/components/views/home/ProductCategory.vue b/src/pages/home/ProductCategory.vue
similarity index 100%
rename from src/components/views/home/ProductCategory.vue
rename to src/pages/home/ProductCategory.vue
diff --git a/src/pages/home/SmartPhone.vue b/src/pages/home/SmartPhone.vue
new file mode 100644
index 0000000..0aecba1
--- /dev/null
+++ b/src/pages/home/SmartPhone.vue
@@ -0,0 +1,79 @@
+<script setup>
+	import { ref, reactive, onBeforeMount } from "vue"
+	import axios from "axios"
+	import { ScaleIcon, StarIcon } from "@heroicons/vue/20/solid"
+
+	import WishListIcon from "../../components/WishListIcon.vue"
+
+	// #store
+	import { cartStore } from "../../store/cartStore"
+
+	const cart = cartStore
+	const products = ref([])
+
+	// #functions
+	onBeforeMount(() => {
+		axios
+			.get("https://dummyjson.com/products?category=smartphones")
+			// .get("http://127.0.0.1:8000/api/products")
+			.then((res) => {
+				// products.value = res.data
+				products.value = res.data.products
+			})
+			.catch((error) => console.log(error))
+	})
+</script>
+
+<template>
+	<!--smartphone-Tablet -section-->
+
+	<section id="smartPhoneTablet ">
+		<div class="container-lg">
+			<div class="py-2 my-1">
+				<h4 class="fw-bolder m-0">Smartphone & Tablet</h4>
+			</div>
+			<div class="row m-0 p-0 g-3 g-sm-0">
+				<template v-for="(product, index) in products" :key="index">
+					<div v-if="'smartphones' == product.category" class="col-10 col-sm-4 col-md-3 p-0">
+						<div class="card rounded-0 group-hover p-2 h-100">
+							<div class="overflow-hidden position-relative w-100" style="height: 130px">
+								<img class="w-100 h-100 object-fit-contain" :src="product.thumbnail ?? ' images/demo/electronic-smpt-2.jpg'" />
+								<div class="card-img-overlay rounded-0 d-flex p-0 bg-opacity-0 justify-content-end align-items-end bg-dark hover-bg-opacity-10 duration-300">
+									<div class="z-3 btn-group-vertical transform-rotateY-90 hover-transform-rotateY-0 duration-500">
+										<wish-list-icon :product="product" />
+										<a class="btn btn-light p-0 border-0">
+											<ScaleIcon class="p-1 text-secondary bg-white border" style="height: 30px; width: 30px" />
+										</a>
+									</div>
+									<router-link :to="'/shop/singleProduct/' + product['id']" class="stretched-link z-2"></router-link>
+								</div>
+							</div>
+							<div class="card-body text-capitalize small px-0">
+								<p class="mb-1">{{ product["title"] }}</p>
+								<p class="my-2 small truncat">{{ product["description"] }}</p>
+								<div class="d-flex jusitify-items-center gap-1 small py-1">
+									<StarIcon class="w-4 h-4" v-for="(rate, index) in 5" :key="index" :class="product['rating'] > index ? 'text-warning' : 'text-secondary'" />
+									<span class="text-secondary">({{ product["rating"] }})</span>
+								</div>
+							</div>
+							<div class="card-footer border-0 bg-transparent h-6 overflow-hidden p-0">
+								<div class="hover-mt-n25 duration-500 small">
+									<h6 class="mb-4 pt-1 fw-semibold d-flex align-items-center gap-x-2">
+										<del class="text-danger">${{ product["price"] }}</del>
+										<span class="shrink-0 d-flex align-items-center gap-1">
+											${{ (product["price"] - product["price"] * (product["discountPercentage"] / 100)).toFixed(2) }} <small>({{ product["discountPercentage"] }}%)</small>
+										</span>
+									</h6>
+									<div class="d-flex gap-1 align-items-center text-uppercase small cursor-pointer text-white">
+										<button @click="cart.addItem(product)" class="text-uppercase w-100 text-center px-2 py-1 text-decoration-none bg-primary rounded">Add to cart</button>
+										<button class="w-100 text-center px-2 py-1 text-decoration-none bg-success rounded">Quick view</button>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</template>
+			</div>
+		</div>
+	</section>
+</template>
diff --git a/src/views/public/home/Support.vue b/src/pages/home/Support.vue
similarity index 100%
rename from src/views/public/home/Support.vue
rename to src/pages/home/Support.vue
diff --git a/src/views/public/order/OrderList.vue b/src/pages/order/OrderList.vue
similarity index 96%
rename from src/views/public/order/OrderList.vue
rename to src/pages/order/OrderList.vue
index 59f8006..1d2673c 100644
--- a/src/views/public/order/OrderList.vue
+++ b/src/pages/order/OrderList.vue
@@ -1,8 +1,8 @@
 <script setup>
 	import { ref, reactive, onBeforeMount } from "vue"
-	import Layout from "../Layout.vue"
-	import { cartStore } from "../../../store/cartStore"
-	import { order } from "../../../store/productOrderStore"
+	import AppPublicLayout from "../../layouts/AppPublicLayout.vue"
+	import { cartStore } from "../../store/cartStore"
+	import { order } from "../../store/productOrderStore"
 	const carts = cartStore
 
 	onBeforeMount(() => {
@@ -13,7 +13,7 @@
 </script>
 
 <template>
-	<Layout>
+	<AppPublicLayout>
 		<!-- order status bar -->
 		<section id="shoppign-bag" class="py-3">
 			<div class="container-lg px-4">
@@ -163,7 +163,7 @@
 				</div>
 			</div>
 		</section>
-	</Layout>
+	</AppPublicLayout>
 </template>
 
 <style scoped></style>
diff --git a/src/views/public/shop/Shop.vue b/src/pages/shop/Shop.vue
similarity index 98%
rename from src/views/public/shop/Shop.vue
rename to src/pages/shop/Shop.vue
index 570d13b..593d610 100644
--- a/src/views/public/shop/Shop.vue
+++ b/src/pages/shop/Shop.vue
@@ -1,18 +1,25 @@
 <script setup>
 	import { ref, reactive, onBeforeMount } from "vue"
+	// #plugins/ package
 	import axios from "axios"
-	import Layout from "../Layout.vue"
-	import { cartStore } from "../../../store/cartStore"
-	import { wishlist } from "../../../store/wishlistStore"
-	import WishListIcon from "../../../components/WishListIcon.vue"
 	import { ScaleIcon } from "@heroicons/vue/24/outline"
 	import { StarIcon } from "@heroicons/vue/24/solid"
 	import { useRouter } from "vue-router"
 
+	// #store
+	import { cartStore } from "../../store/cartStore"
+	import { wishlist } from "../../store/wishlistStore"
+
+	// #components
+	import AppPublicLayout from "../../layouts/AppPublicLayout.vue"
+	import WishListIcon from "../../components/WishListIcon.vue"
+
+	// #variables
 	const cart = cartStore
 	const products = ref([])
 	// const products = reactive([])
 
+	// #functions
 	onBeforeMount(() => {
 		axios
 			.get("https://dummyjson.com/products?limit=30")
@@ -59,8 +66,7 @@
 </script>
 
 <template>
-	<Layout>
-		{{ wishlist.items }}
+	<AppPublicLayout>
 		<!-- === product-item body ===  -->
 		<section id="shopBody">
 			<div class="container-lg mb-5">
@@ -463,7 +469,7 @@
 				</div>
 			</div>
 		</section>
-	</Layout>
+	</AppPublicLayout>
 </template>
 <style scoped>
 	.truncate {
@@ -473,7 +479,7 @@
 		-webkit-line-clamp: 3; /* number of lines to show */
 		line-clamp: 2;
 		-webkit-box-orient: vertical;
-		text-wrap: wrap;
+		--webkit-text-wrap: wrap;
 	}
 	.group-hover:hover .hover-mt-n15,
 	.hover-mt-n15:hover {
diff --git a/src/views/public/shop/SingleProduct.vue b/src/pages/shop/SingleProduct.vue
similarity index 88%
rename from src/views/public/shop/SingleProduct.vue
rename to src/pages/shop/SingleProduct.vue
index edf3ae2..ced3dfa 100644
--- a/src/views/public/shop/SingleProduct.vue
+++ b/src/pages/shop/SingleProduct.vue
@@ -1,18 +1,24 @@
 <script setup>
-	import { ref, reactive, computed, onBeforeMount } from "vue"
+	import { ref, reactive, computed, onBeforeMount, onMounted, watch } from "vue"
+	// #plugins/ package
 	import axios from "axios"
+	import { HeartIcon, ScaleIcon, StarIcon } from "@heroicons/vue/20/solid"
+	import { useRoute } from "vue-router"
+	import { SwiperSlide } from "swiper/vue"
 
-	import Layout from "../Layout.vue"
-	import { wishlist } from "../../../store/wishlistStore"
-	import { cartStore } from "../../../store/cartStore"
+	// #store
+	import { wishlist } from "../../store/wishlistStore"
+	import { cartStore } from "../../store/cartStore"
 
-	import { HeartIcon, StarIcon } from "@heroicons/vue/24/solid"
-	import WishListIcon from "../../../components/WishListIcon.vue"
+	// #components
+	import AppPublicLayout from "../../layouts/AppPublicLayout.vue"
+	import WishListIcon from "../../components/WishListIcon.vue"
+	import Swiper from "../../components/swiper/Swiper.vue"
 
-	import { useRoute } from "vue-router"
+	// #variables
+	const cart = cartStore
 	const route = useRoute()
 	const id = route.params.id
-	const cart = cartStore
 
 	const productData = reactive({
 		id: "",
@@ -26,7 +32,9 @@
 		brand: "",
 		category: "",
 	})
+	const recomandedProducts = ref([])
 
+	// #functions
 	onBeforeMount(async () => {
 		const url = `https://dummyjson.com/products/${id}`
 		const res = await axios.get(url)
@@ -49,13 +57,24 @@
 		}
 		cart.saveCartInLocalStorage()
 	}
-
-	// temp
+	watch(
+		() => productData["category"],
+		async () => {
+			await axios
+				.get(`https://dummyjson.com/products/category/${productData["category"]}`)
+				// .get("http://127.0.0.1:8000/api/products")
+				.then((res) => {
+					// products.value = res.data
+					recomandedProducts.value = res.data.products
+				})
+				.catch((error) => console.log(error))
+		}
+	)
 
 	const baseUrl = window.location.origin
 </script>
 <template>
-	<Layout>
+	<AppPublicLayout>
 		<!-- productData details -->
 		<section id="productData-Details-ProductData">
 			<div class="container-lg">
@@ -524,7 +543,48 @@
 		<!-- </SwiperC> -->
 		<section class="py-4 px-3">
 			<h4 class="fw-bolder text-capitalize text-center py-2">you may also like</h4>
-			<div class="container-lg position-relative group-btn-hover overflow-hidden group-hover-btn-opacity border p-0" id="autoCarousel"></div>
+			<div class="container-lg">
+				<Swiper name="mySwiper" duration="3000" class="z-2 h-100" btnClass="text-white bg-secondary">
+					<SwiperSlide v-for="(product, index) in recomandedProducts" :key="index" class="h-100">
+						<div class="z-3 card rounded-0 group-hover p-2 h-100">
+							<div class="overflow-hidden position-relative w-100" style="height: 130px">
+								<img class="w-100 h-100 object-fit-contain" :src="product.thumbnail ?? ' images/demo/electronic-smpt-2.jpg'" />
+								<div class="card-img-overlay rounded-0 d-flex p-0 bg-opacity-0 justify-content-end align-items-end bg-dark hover-bg-opacity-10 duration-300">
+									<div class="z-3 btn-group-vertical transform-rotateY-90 hover-transform-rotateY-0 duration-500">
+										<wish-list-icon :product="product" />
+										<a class="btn btn-light p-0 border-0">
+											<ScaleIcon class="p-1 text-secondary bg-white border" style="height: 30px; width: 30px" />
+										</a>
+									</div>
+									<router-link :to="'/shop/singleProduct/' + product['id']" class="stretched-link z-2"></router-link>
+								</div>
+							</div>
+							<div class="card-body text-capitalize small px-0">
+								<p class="mb-1">{{ product["title"] }}</p>
+								<p class="my-2 small truncat">{{ product["description"] }}</p>
+								<div class="d-flex jusitify-items-center gap-1 small py-1">
+									<StarIcon class="w-4 h-4" v-for="(rate, index) in 5" :key="index" :class="product['rating'] > index ? 'text-warning' : 'text-secondary'" />
+									<span class="text-secondary">({{ product["rating"] }})</span>
+								</div>
+							</div>
+							<div class="card-footer border-0 bg-transparent h-6 overflow-hidden p-0">
+								<div class="hover-mt-n25 duration-500 small">
+									<h6 class="mb-4 pt-1 fw-semibold d-flex align-items-center gap-x-2">
+										<del class="text-danger">${{ product["price"] }}</del>
+										<span class="shrink-0 d-flex align-items-center gap-1">
+											${{ (product["price"] - product["price"] * (product["discountPercentage"] / 100)).toFixed(2) }} <small>({{ product["discountPercentage"] }}%)</small>
+										</span>
+									</h6>
+									<div class="d-flex gap-1 align-items-center text-uppercase small cursor-pointer text-white">
+										<button @click="cart.addItem(product)" class="text-uppercase w-100 text-center px-2 py-1 text-decoration-none bg-primary rounded">Add to cart</button>
+										<button class="w-100 text-center px-2 py-1 text-decoration-none bg-success rounded">Quick view</button>
+									</div>
+								</div>
+							</div>
+						</div>
+					</SwiperSlide>
+				</Swiper>
+			</div>
 		</section>
-	</Layout>
+	</AppPublicLayout>
 </template>
diff --git a/src/router/router.js b/src/router/router.js
index 083f33e..6cc51b8 100644
--- a/src/router/router.js
+++ b/src/router/router.js
@@ -2,32 +2,32 @@ import { createRouter, createWebHistory } from "vue-router";
 
 import { authStore } from '../store/authStore'
 
-import NotFound from '../views/NotFound.vue'
-// import Welcome from '../views/Welocme.vue'
-import Home from '../views/public/Home.vue'
-import Shop from '../views/public/shop/Shop.vue'
-import SingleProduct from '../views/public/shop/SingleProduct.vue'
-import Cart from '../views/public/cart/Cart.vue'
-import Checkout from '../views/public/checkout/Checkout.vue'
-import OrderList from '../views/public/order/OrderList.vue'
+import NotFound from '../pages/NotFound.vue'
+// import Welcome from '../pages/Welocme.vue'
+import Home from '../pages/Home.vue'
+import Shop from '../pages/shop/Shop.vue'
+import SingleProduct from '../pages/shop/SingleProduct.vue'
+import Cart from '../pages/cart/Cart.vue'
+import Checkout from '../pages/checkout/Checkout.vue'
+import OrderList from '../pages/order/OrderList.vue'
 
 
 
 
-import Login from '../views/auth/Login.vue'
-import Register from '../views/auth/register.vue'
-import Profile from '../views/auth/Profile.vue'
+import Login from '../pages/auth/Login.vue'
+import Register from '../pages/auth/register.vue'
+import Profile from '../pages/auth/Profile.vue'
 
-import Dashboard from '../views/dashboard/Dashboard.vue'
+import Dashboard from '../pages/dashboard/Dashboard.vue'
 
-import Chart from '../views/dashboard/components/Chart.vue'
-import CircleProgress from '../views/dashboard/components/CircleProgress.vue'
-import DataTable from '../views/dashboard/components/DataTable.vue'
+import Chart from '../pages/dashboard/components/Chart.vue'
+import CircleProgress from '../pages/dashboard/components/CircleProgress.vue'
+import DataTable from '../pages/dashboard/components/DataTable.vue'
 
 
-import Product from '../views/dashboard/product/product.vue'
-import Brand from '../views/dashboard/product/Brand.vue'
-import Unit from '../views/dashboard/product/Unit.vue'
+import Product from '../pages/dashboard/product/product.vue'
+import Brand from '../pages/dashboard/product/Brand.vue'
+import Unit from '../pages/dashboard/product/Unit.vue'
 import { onMounted } from "vue";
 
 const baseURL = window.location.origin;
@@ -291,9 +291,6 @@ router.beforeEach((to, from, next) => {
     } else {
         next()
     }
-    // if (transition.to.path === '/*') {
-    //     window.location.href = '/404.html'
-    // }
 })
 
 
diff --git a/src/store/authStore.js b/src/store/authStore.js
index 0773d57..494d3f2 100644
--- a/src/store/authStore.js
+++ b/src/store/authStore.js
@@ -6,6 +6,7 @@ import { cartStore } from './cartStore'
 import { wishlist } from './wishlistStore'
 import { useToast } from "vue-toastification"
 
+
 const toast = useToast()
 const cart = cartStore
 const authStore = reactive({
@@ -54,16 +55,14 @@ const authStore = reactive({
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify({
-                // username: name,
-                // password: password,
-                email: name, password
+                username: name,
+                password: password,
                 // expiresInMins: 60, // optional // user : kminchelle, pas: 0lelplR
             })
         }).then(res => res.json())
             .then((res) => {
-                console.log(res);
                 if (!res.error) {
-                    //Object.assign(res, { role: ['user', 'admin', 'editor'] }) // push static role
+                    Object.assign(res, { role: ['user', 'admin', 'editor'] }) // push static role
 
                     localStorage.setItem('user', JSON.stringify(res))
                     authStore.isAuthenticated = true
@@ -71,16 +70,14 @@ const authStore = reactive({
                     authStore.user = res
                     // dialog.closeModal()
                     toast.success(`Log in SUccessfull`)
-                    router.push('/')
+                    // router.push('/')
+                    router.back()
                 } else {
                     toast.error(`${res.message}`)
                     authStore.status = res.error
                 }
                 console.log(res);
             })
-        // //     .error(error){
-        // //     toast.error(`Something want wrong`)
-        // // }
     },
     userRegister(Name, Email, Password) {
         fetch('http://127.0.0.1:8000/api/users', {
@@ -128,17 +125,16 @@ const authStore = reactive({
         authStore.isAuthenticated = false
         authStore.user = null
         localStorage.setItem('user', null)
-        // router.push('/login')
-        // router.push('/')
         // ==== cart items clean ====
         cart.items = {}
         // cart.totalPrice = 0
-        cart.saveCartInLocalStorage()
+        //cart.saveCartInLocalStorage()
 
         // ==== cart items clean ====
         wishlist.clearItems()
-        // wishlist.saveCartInLocalStorage()
-
+        if (router.currentRoute.value.meta.requiresAuth) {
+            router.push('/login')
+        }
     },
     getUserToken() {
         return !authStore.user?.token ? null : authStore.user.token
diff --git a/src/store/cartStore.js b/src/store/cartStore.js
index 296a345..9259bb7 100644
--- a/src/store/cartStore.js
+++ b/src/store/cartStore.js
@@ -2,6 +2,8 @@ import { reactive, computed } from "vue";
 import { authStore } from './authStore'
 import { order } from "./productOrderStore";
 import { useToast } from "vue-toastification"
+import router from '../router/router'
+
 const toast = useToast()
 // const auth = authStore
 
@@ -20,6 +22,11 @@ const cartStore = reactive({
             router.push('/login')
             return
         }
+        if (0 == Object.keys(this.items).length) {
+            toast.info(`Add products`)
+            console.log(router.currentRoute.value.meta.requiresAuth);
+            return true
+        }
         const payload = {
             coupon: this.couponCode
         }
@@ -131,7 +138,11 @@ const cartStore = reactive({
     },
     // checkOut product
     checkOut() {
-        console.log('from checkout');
+        if (0 == Object.keys(this.items).length) {
+            toast.info(`Add products`)
+            router.push(router.currentRoute.value.name)
+            return true
+        }
         order.placeOrder(this.totalPrice, this.items)
     }
 })
diff --git a/src/views/dashboard/Home.vue b/src/views/dashboard/Home.vue
deleted file mode 100644
index e9dda59..0000000
--- a/src/views/dashboard/Home.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<script setup>
-	import { reactive } from "vue"
-	import Layouts from "../../components/layouts/Layouts.vue"
-	import { authStore } from "../../store/authStore"
-	const auth = authStore
-</script>
-<template>
-	<Layouts>
-		<h1>this is Porduct</h1>
-	</Layouts>
-</template>
-
diff --git a/src/views/public/Home.vue b/src/views/public/Home.vue
deleted file mode 100644
index e0dd80a..0000000
--- a/src/views/public/Home.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<script setup>
-	import Layout from "./Layout.vue"
-	import MainSlider from "./home/MainSlider.vue"
-	import Support from "./home/Support.vue"
-	import ProductCategory from "./home/ProductCategory.vue"
-	import Baner2 from "./home/Baner2.vue"
-	import SmartPhone from "./home/SmartPhone.vue"
-	import BigBaner from "./home/BigBaner.vue"
-	import BigBaner2 from "./home/BigBaner2.vue"
-	import Accessories from "./home/Accessories.vue"
-	import Appliances from "./home/Appliances.vue"
-	import Blog from "./home/Blog.vue"
-	import Brand from "./home/Brand.vue"
-</script>
-<template>
-	<Layout>
-		<MainSlider />
-		// <Support /> // <ProductCategory /> // <Baner2 /> // <SmartPhone /> // <BigBaner /> // <Appliances /> // <BigBaner2 /> // <Accessories /> // <Blog /> // <Brand />
-	</Layout>
-</template>
diff --git a/src/views/public/NavBar.vue b/src/views/public/NavBar.vue
deleted file mode 100644
index bc0eb36..0000000
--- a/src/views/public/NavBar.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<script setup>
-	import { ref } from "vue"
-
-	import ToggleButton from "primevue/togglebutton"
-	import { themesStore } from "../store/themesStore"
-	import { usePrimeVue } from "primevue/config"
-	const themes = themesStore
-	const PrimeVue = usePrimeVue()
-
-	const checked = ref(false)
-
-	let currentTheme = "lara-light-teal"
-	const toggleTheme = () => {
-		// What is next theme? (2nd parameter)
-		let nextTheme = ""
-		if (currentTheme === "lara-light-teal") nextTheme = "lara-dark-teal"
-		else if (currentTheme === "lara-dark-teal") nextTheme = "lara-light-teal"
-
-		// 1. Current theme name
-		// 2. Next theme name
-		// 3. id of <link>, what reference to where set theme css file --> fix, single id to <link>
-		PrimeVue.changeTheme(currentTheme, nextTheme, "theme-link", () => {
-			console.log("theme changed")
-		})
-		// So current theme now:
-		currentTheme = nextTheme
-	}
-</script>
-<template>
-	<div>
-		<ToggleButton @change="toggleTheme" v-model="checked" onLabel="Dark" offLabel="Light" class="w-16rem" />
-		<!-- <ToggleButton @change="themes.toggleTheme('lara-light-teal', 'lara-dark-teal', PrimeVue)" v-model="checked" onLabel="Dark" offLabel="Light" class="w-16rem" /> -->
-	</div>
-</template>
-
diff --git a/src/views/public/footer/Footer.vue b/src/views/public/footer/Footer.vue
deleted file mode 100644
index dd2bfb2..0000000
--- a/src/views/public/footer/Footer.vue
+++ /dev/null
@@ -1,176 +0,0 @@
-<script setup></script>
-
-<template>
-	<!--footer-section-->
-
-	<div id="footer-section " class="pt-5 bg-dark bland-darken bg-size-cover bg-no-repeat bg-position-center" style="background-image: url('images/demo/bg-footer2.png')">
-		<!-- ====== contact-form ====== -->
-		<div id="footer-part-1" class="py-5">
-			<div class="container-lg">
-				<form class="row justify-content-center text-uppercase text-center">
-					<div class="col-11 col-md-7">
-						<h5 class="fw-bolder text-white">sign up to newsletter</h5>
-						<p class="text-secondary small">*receive early discount offers, updates and new products info.</p>
-						<div class="input-group">
-							<input type="text " class="form-control box-shadow-none rounded-0 border-0 placeholder-sm" placeholder="Your email here" />
-							<button class="input-group-text rounded-0 border-0 bg-white box-shadow-none">
-								<i class="fa fa-paper-plane" aria-hidden="true"></i>
-							</button>
-						</div>
-					</div>
-					<nav class="">
-						<ul class="nav justify-content-center">
-							<li class="nav-item">
-								<!-- <a class="nav-link px-0 px-md-1 py-2" href="#"><img class="w-auto h-6" src="images/demo/facebook.png" /></a> -->
-							</li>
-							<li class="nav-item">
-								<!-- <a class="nav-link px-0 px-md-1 py-2" href="#"><img class="w-auto h-6" src="images/demo/twitter.png" /></a> -->
-							</li>
-							<li class="nav-item">
-								<!-- <a class="nav-link px-0 px-md-1 py-2" href="#"><img class="w-auto h-6" src="images/demo/youtube.png" /></a> -->
-							</li>
-							<li class="nav-item">
-								<!-- <a class="nav-link px-0 px-md-1 py-2" href="#"><img class="w-auto h-6" src="images/demo/pinterest.png" /></a> -->
-							</li>
-							<li class="nav-item">
-								<!-- <a class="nav-link px-0 px-md-1 py-2" href="#"><img class="w-auto h-6" src="images/demo/linkedin.png" /></a> -->
-							</li>
-							<li class="nav-item">
-								<!-- <a class="nav-link px-0 px-md-1 py-2" href="#"><img class="w-auto h-6" src="images/demo/skype.png" /></a> -->
-							</li>
-							<li class="nav-item">
-								<!-- <a class="nav-link px-0 px-md-1 py-2" href="#"><img class="w-auto h-6" src="images/demo/whatsapp.png" /></a> -->
-							</li>
-						</ul>
-					</nav>
-				</form>
-			</div>
-		</div>
-		<!-- ======end contact-form ====== -->
-		<!-- ====== footer-product-links ====== -->
-		<section id="footer-part-2" class="my-5">
-			<div class="container-lg">
-				<div class="row my-3 p-3">
-					<!-- ====== start footer-product-links ====== -->
-					<div class="col-md-6 col-lg-3 p-0">
-						<p class="text-uppercase fw-bolder text-white">find it fast</p>
-						<ul class="list-group text-muted bg-transparent border-0 text-capitalize theme-footer-link ps-0">
-							<a class="list-group-item list-group-item-action" href="#">smartphone & tablet</a>
-							<a class="list-group-item list-group-item-action" href="#">computer & laptop</a>
-							<a class="list-group-item list-group-item-action" href="#">tv & audio</a>
-							<a class="list-group-item list-group-item-action" href="#">games & accessories</a>
-							<a class="list-group-item list-group-item-action" href="#">cameras & photos</a>
-							<a class="list-group-item list-group-item-action" href="#">electronic & houseware</a>
-						</ul>
-					</div>
-					<div class="col-md-6 col-lg-3 p-0">
-						<p class="text-uppercase fw-bolder text-white">polices</p>
-						<ul class="list-group text-muted bg-transparent border-0 text-capitalize theme-footer-link ps-0">
-							<a class="list-group-item list-group-item-action" href="#">smartphone & tablet</a>
-							<a class="list-group-item list-group-item-action" href="#">computer & laptop</a>
-							<a class="list-group-item list-group-item-action" href="#">tv & audio</a>
-							<a class="list-group-item list-group-item-action" href="#">games & accessories</a>
-							<a class="list-group-item list-group-item-action" href="#">cameras & photos</a>
-							<a class="list-group-item list-group-item-action" href="#">electronic & houseware</a>
-						</ul>
-					</div>
-					<div class="col-md-6 col-lg-3 p-0">
-						<p class="text-uppercase fw-bolder text-white">information</p>
-						<ul class="list-group text-muted bg-transparent border-0 text-capitalize theme-footer-link ps-0">
-							<a class="list-group-item list-group-item-action" href="#">smartphone & tablet</a>
-							<a class="list-group-item list-group-item-action" href="#">computer & laptop</a>
-							<a class="list-group-item list-group-item-action" href="#">tv & audio</a>
-							<a class="list-group-item list-group-item-action" href="#">games & accessories</a>
-							<a class="list-group-item list-group-item-action" href="#">cameras & photos</a>
-							<a class="list-group-item list-group-item-action" href="#">electronic & houseware</a>
-						</ul>
-					</div>
-					<!-- ====== start footer-contact-info ====== -->
-					<div class="col-md-6 col-lg-3 p-0">
-						<p class="text-uppercase fw-bolder text-white">contact info</p>
-						<ul class="list-group list-group-transparent list-group-border-0 text-capitalize theme-footer-link cursor-p">
-							<li class="ist-group list-group-transparent list-group-border-0 text-capitalize theme-footer-link cursor-p">
-								<a class="list-group-item d-flex" href="#">
-									<div class="d-inline-block text-red-danger"><i class="fas fa-mobile-alt pe-1 pt-1"></i></div>
-									<div class="d-inline-block ps-1">
-										line 1: (+880) 1xxxxxxxxx <br />
-										line 2: (+880) 1xxxxxxxxx
-									</div>
-								</a>
-							</li>
-							<li class="list-group list-group-transparent list-group-border-0 text-capitalize theme-footer-link cursor-p text-wrap">
-								<a class="list-group-item d-flex" href="#">
-									<div class="d-inline-block text-red-danger"><i class="fas fa-envelope pe-1 pt-1"></i></div>
-									<div class="d-inline-block ps-1">gostoresaupport@gmail.com</div>
-								</a>
-							</li>
-							<li class="list-group list-group-transparent list-group-border-0 text-capitalize theme-footer-link cursor-p">
-								<a class="list-group-item d-flex" href="#">
-									<div class="d-inline-block text-red-danger"><i class="fas fa-map-marked-alt pe-1 pt-1"></i></div>
-									<div class="d-inline-block ps-1">your name road, your city, united of kingdom</div>
-								</a>
-							</li>
-							<li class="list-group list-group-transparent list-group-border-0 text-capitalize theme-footer-link cursor-p">
-								<a class="list-group-item d-flex" href="#">
-									<div class="d-inline-block text-red-danger"><i class="fas fa-calendar-alt pe-1 pt-1"></i></div>
-									<div class="d-inline-block ps-1">monday-saturday 9:00pm - 5:00pm sunday : closed</div>
-								</a>
-							</li>
-						</ul>
-					</div>
-					<!-- ====== end footer-contact-info ====== -->
-				</div>
-			</div>
-		</section>
-		<!-- ====== start footer-payment-info ====== -->
-		<section id="footer-part-3">
-			<div class="container-lg">
-				<div class="row align-items-center justify-content-sm-between border-top border-secondary p-0 mx-2">
-					<div class="col-sm-auto text-capitalize order-2 order-md-1 small p-0 py-2">
-						<p class="text-white mb-0 text-center text-md-start">&copy; <b class="text-red-danger">damo</b> -all rights reservd</p>
-					</div>
-					<div class="col-sm-auto order-1 order-md-2 p-0">
-						<ul class="nav justify-content-center justify-content-sm-end align-items-center">
-							<li class="nav-item">
-								<a class="nav-link py-2 px-1" href="# ">
-									<!-- <img class="h-7 w-auto" src="images/demo/ebay.png " /> -->
-								</a>
-							</li>
-							<li class="nav-item">
-								<a class="nav-link py-2 px-1" href="# ">
-									<!-- <img class="h-7 w-auto" src="images/demo/Visa.png " /> -->
-								</a>
-							</li>
-							<li class="nav-item">
-								<a class="nav-link py-2 px-1" href="# ">
-									<!-- <img class="h-7 w-auto" src="images/demo/paypal.png" /> -->
-								</a>
-							</li>
-							<li class="nav-item">
-								<a class="nav-link py-2 px-1" href="# ">
-									<!-- <img class="h-7 w-auto" src="images/demo/payoneer.png" /> -->
-								</a>
-							</li>
-							<li class="nav-item">
-								<a class="nav-link py-2 px-1" href="# ">
-									<!-- <img class="h-7 w-auto" src="images/demo/discover.png" /> -->
-								</a>
-							</li>
-							<li class="nav-item">
-								<a class="nav-link py-2 px-1" href="# ">
-									<!-- <img class="h-7 w-auto" src="images/demo/skrill.png " /> -->
-								</a>
-							</li>
-							<li class="nav-item">
-								<a class="nav-link py-2 px-1" href="# ">
-									<!-- <img class="h-7 w-auto" src="images/demo/amazon.png " /> -->
-								</a>
-							</li>
-						</ul>
-					</div>
-				</div>
-			</div>
-		</section>
-		<!-- ====== end footer-payment-info ====== -->
-	</div>
-</template>
diff --git a/src/views/public/home/Accessories.vue b/src/views/public/home/Accessories.vue
deleted file mode 100644
index 9fd916a..0000000
--- a/src/views/public/home/Accessories.vue
+++ /dev/null
@@ -1,266 +0,0 @@
-<script setup></script>
-
-<template>
-	<!--game and camera accessories blank-section-->
-
-	<section id="gameCameraAccessories">
-		<div class="container-lg">
-			<div class="py-2 my-1">
-				<h4 class="fw-bolder m-0">Games, Cameras, Accessories</h4>
-			</div>
-			<div class="row justify-content-center p-0 g-3 g-sm-0">
-				<div class="col-10 col-sm-6 col-md-6 col-lg-5 p-0 text-capitalize">
-					<div class="card rounded-0 group-hover cursor-pointer p-2 h-100">
-						<div class="overflow-hidden position-relative">
-							<img class="img-fluid" src="images/demo/electronic-gca1.jpg" />
-							<div class="card-img-overlay rounded-0 d-flex p-0 bg-opacity-0 justify-content-end align-items-end bg-dark hover-bg-opacity-10 transition-1000">
-								<div class="btn-group-vertical transform-rotateY-90 hover-transform-rotateY-0 transition-500">
-									<a class="btn btn-light p-0 border-0"><i class="p-2 fas fa-random bg-white border"></i></a>
-									<a class="btn btn-light p-0 border-0"><i class="p-2 far fa-heart bg-white border"></i></a>
-								</div>
-							</div>
-						</div>
-						<div class="card-body small px-0">
-							<p class="mb-2 text-white bg-red-danger p-2 w-50">488d: 19h : 59m : 45s</p>
-							<p class="m-0 text-secondary text-uppercase">sold:<span class="text-red-danger"> 25</span> / 50</p>
-							<div class="progress bg-grayred rounded-pill h-2">
-								<div class="progress-bar rounded-pill w-50 bg-red-danger"></div>
-							</div>
-							<h5 class="pt-2 m-0 text-truncate">miles morales ultimate launch edition</h5>
-							<div class="p-0 m-0 text-warning">
-								<i class="fas fa-star"></i>
-								<i class="fas fa-star"></i>
-								<i class="fas fa-star"></i>
-								<i class="fas fa-star"></i>
-								<i class="fas fa-star"></i>
-							</div>
-						</div>
-						<div class="card-footer border-0 bg-transparent h-6 overflow-hidden p-0">
-							<div class="hover-mt-n25 transition-500">
-								<p class="text-red-danger mt-1"><del class="text-secondary small">$599.00</del> $399.00</p>
-								<div class="text-uppercase small">
-									<a class="text-decoration-none text-dark fw-bold small">add to cart</a>
-									<div class="vr mx-1"></div>
-									<a class="text-decoration-none text-dark fw-bold small">quick view</a>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-				<div class="col-10 col-sm-6 d-md-none p-0 text-capitalize h-100">
-					<div class="card rounded-0 group-hover h-100 cursor-pointer p-2">
-						<div class="overflow-hidden position-relative">
-							<img class="img-fluid" src="images/demo/electronic-gca8.jpg" />
-							<div class="card-img-overlay rounded-0 d-flex p-0 bg-opacity-0 justify-content-end align-items-end bg-dark hover-bg-opacity-10 transition-1000">
-								<div class="btn-group-vertical transform-rotateY-90 hover-transform-rotateY-0 transition-500">
-									<a class="btn btn-light p-0 border-0"><i class="p-2 fas fa-random bg-white border"></i></a>
-									<a class="btn btn-light p-0 border-0"><i class="p-2 far fa-heart bg-white border"></i></a>
-								</div>
-							</div>
-						</div>
-						<div class="card-body small px-0">
-							<p class="mb-2 text-white bg-red-danger p-2 w-50">488d: 19h : 59m : 45s</p>
-							<p class="m-0 text-secondary text-uppercase">sold:<span class="text-red-danger"> 25</span> / 50</p>
-							<div class="progress bg-grayred rounded-pill h-2">
-								<div class="progress-bar rounded-pill w-50 bg-red-danger"></div>
-							</div>
-							<h5 class="pt-2 m-0 text-truncate">panasonic 4k digital camera, 18.1 megapixel</h5>
-							<div class="p-0 m-0 text-warning">
-								<i class="fas fa-star"></i>
-								<i class="fas fa-star"></i>
-								<i class="fas fa-star"></i>
-								<i class="fas fa-star"></i>
-								<i class="fas fa-star"></i>
-							</div>
-						</div>
-						<div class="card-footer border-0 bg-transparent h-6 overflow-hidden p-0">
-							<div class="hover-mt-n25 transition-500">
-								<p class="text-red-danger mt-1"><del class="text-secondary small">$599.00</del> $399.00</p>
-								<div class="text-uppercase small">
-									<a class="text-decoration-none text-dark fw-bold small">add to cart</a>
-									<div class="vr mx-1"></div>
-									<a class="text-decoration-none text-dark fw-bold small">quick view</a>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-				<div class="col-12 col-md-6 col-lg-7 p-0 text-capitalize">
-					<div class="row justify-content-center p-0 g-3 g-sm-0 m-0">
-						<div class="col-10 col-sm-4 col-md-6 col-lg-4 p-0">
-							<div class="card rounded-0 group-hover p-2 h-100">
-								<div class="overflow-hidden position-relative">
-									<img class="img-fluid" src="images/demo/electronic-gca2.jpg " />
-									<div class="card-img-overlay rounded-0 d-flex p-0 bg-opacity-0 justify-content-end align-items-end bg-dark hover-bg-opacity-10 transition-1000">
-										<div class="btn-group-vertical transform-rotateY-90 hover-transform-rotateY-0 transition-500">
-											<a class="btn btn-light p-0 border-0"><i class="p-2 fas fa-random bg-white border"></i></a>
-											<a class="btn btn-light p-0 border-0"><i class="p-2 far fa-heart bg-white border"></i></a>
-										</div>
-									</div>
-								</div>
-								<div class="card-body small px-0">
-									<p class="mb-0 text-truncate">
-										canon digital camera <br />
-										w/ 42x optical zoom
-									</p>
-								</div>
-								<div class="card-footer border-0 bg-transparent h-6 overflow-hidden p-0">
-									<div class="hover-mt-n25 transition-500 small">
-										<p class="mt-2">$56.00</p>
-										<div class="text-uppercase small cursor-pointer">
-											<a class="text-decoration-none text-dark fw-bold">add to cart</a>
-											<div class="vr mx-1"></div>
-											<a class="text-decoration-none text-dark fw-bold">quick view</a>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-						<div class="col-10 col-sm-4 col-md-6 col-lg-4 p-0">
-							<div class="card rounded-0 group-hover p-2 h-100">
-								<div class="overflow-hidden position-relative">
-									<img class="img-fluid" src="images/demo/electronic-gca3.jpg " />
-									<div class="card-img-overlay rounded-0 d-flex p-0 bg-opacity-0 justify-content-end align-items-end bg-dark hover-bg-opacity-10 transition-1000">
-										<div class="btn-group-vertical transform-rotateY-90 hover-transform-rotateY-0 transition-500">
-											<a class="btn btn-light p-0 border-0"><i class="p-2 fas fa-random bg-white border"></i></a>
-											<a class="btn btn-light p-0 border-0"><i class="p-2 far fa-heart bg-white border"></i></a>
-										</div>
-									</div>
-								</div>
-								<div class="card-body text-capitalize small px-0">
-									<p class="mb-0 text-truncate">
-										friendly zoom digital <br />
-										camera, 5X optical zoom
-									</p>
-								</div>
-								<div class="card-footer border-0 bg-transparent h-6 overflow-hidden p-0">
-									<div class="hover-mt-n25 transition-500 small">
-										<p class="mt-2">$180.00</p>
-										<div class="text-uppercase small cursor-pointer">
-											<a class="text-decoration-none text-dark fw-bold">add to cart</a>
-											<div class="vr mx-1"></div>
-											<a class="text-decoration-none text-dark fw-bold">quick view</a>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-						<div class="col-10 col-sm-4 col-md-6 col-lg-4 p-0">
-							<div class="card rounded-0 group-hover p-2 h-100">
-								<div class="overflow-hidden position-relative">
-									<img class="img-fluid" src="images/demo/electronic-gca4.jpg " />
-									<div class="card-img-overlay rounded-0 d-flex p-0 bg-opacity-0 justify-content-end align-items-end bg-dark hover-bg-opacity-10 transition-1000">
-										<div class="btn-group-vertical transform-rotateY-90 hover-transform-rotateY-0 transition-500">
-											<a class="btn btn-light p-0 border-0"><i class="p-2 fas fa-random bg-white border"></i></a>
-											<a class="btn btn-light p-0 border-0"><i class="p-2 far fa-heart bg-white border"></i></a>
-										</div>
-									</div>
-								</div>
-								<div class="card-body text-capitalize small px-0">
-									<p class="mb-0 text-truncate">
-										sony DSCHX8 heigh <br />
-										zoom point & shoot camera
-									</p>
-								</div>
-								<div class="card-footer border-0 bg-transparent h-6 overflow-hidden p-0">
-									<div class="hover-mt-n25 transition-500 small">
-										<p class="mt-2">$110.00</p>
-										<div class="text-uppercase small cursor-pointer">
-											<a class="text-decoration-none text-dark fw-bold">add to cart</a>
-											<div class="vr mx-1"></div>
-											<a class="text-decoration-none text-dark fw-bold">quick view</a>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-						<div class="col-10 col-sm-4 col-md-6 col-lg-4 p-0">
-							<div class="card rounded-0 group-hover p-2 h-100">
-								<div class="overflow-hidden position-relative">
-									<img class="img-fluid" src="images/demo/electronic-gca5.jpg " />
-									<div class="card-img-overlay rounded-0 d-flex p-0 bg-opacity-0 justify-content-end align-items-end bg-dark hover-bg-opacity-10 transition-1000">
-										<div class="btn-group-vertical transform-rotateY-90 hover-transform-rotateY-0 transition-500">
-											<a class="btn btn-light p-0 border-0"><i class="p-2 fas fa-random bg-white border"></i></a>
-											<a class="btn btn-light p-0 border-0"><i class="p-2 far fa-heart bg-white border"></i></a>
-										</div>
-									</div>
-								</div>
-								<div class="card-body text-capitalize small px-0">
-									<p class="mb-0 text-truncate">
-										outdoor security camera <br />
-										wireless, 1080p full HD
-									</p>
-								</div>
-								<div class="card-footer border-0 bg-transparent h-6 overflow-hidden p-0">
-									<div class="hover-mt-n25 transition-500 small">
-										<p class="mt-2">$599.00</p>
-										<div class="text-uppercase small cursor-pointer">
-											<a class="text-decoration-none text-dark fw-bold">add to cart</a>
-											<div class="vr mx-1"></div>
-											<a class="text-decoration-none text-dark fw-bold">quick view</a>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-						<div class="col-10 col-sm-4 d-md-none d-lg-block col-lg-4 p-0">
-							<div class="card rounded-0 group-hover p-2 h-100">
-								<div class="overflow-hidden position-relative">
-									<img class="img-fluid" src="images/demo/electronic-gca6.jpg " />
-									<div class="card-img-overlay rounded-0 d-flex p-0 bg-opacity-0 justify-content-end align-items-end bg-dark hover-bg-opacity-10 transition-1000">
-										<div class="btn-group-vertical transform-rotateY-90 hover-transform-rotateY-0 transition-500">
-											<a class="btn btn-light p-0 border-0"><i class="p-2 fas fa-random bg-white border"></i></a>
-											<a class="btn btn-light p-0 border-0"><i class="p-2 far fa-heart bg-white border"></i></a>
-										</div>
-									</div>
-								</div>
-								<div class="card-body text-capitalize small px-0">
-									<p class="mb-0 text-truncate">PlayStation 5 <br />DualSense wireless controller</p>
-								</div>
-								<div class="card-footer border-0 bg-transparent h-6 overflow-hidden p-0">
-									<div class="hover-mt-n25 transition-500 small">
-										<p class="mt-2">$599.00</p>
-										<div class="text-uppercase small cursor-pointer">
-											<a class="text-decoration-none text-dark fw-bold">add to cart</a>
-											<div class="vr mx-1"></div>
-											<a class="text-decoration-none text-dark fw-bold">quick view</a>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-						<div class="col-10 col-sm-4 d-md-none d-lg-block col-lg-4 p-0">
-							<div class="card rounded-0 group-hover p-2 h-100">
-								<div class="overflow-hidden position-relative">
-									<img class="img-fluid" src="images/demo/electronic-gca7.jpg " />
-									<div class="card-img-overlay rounded-0 d-flex p-0 bg-opacity-0 justify-content-end align-items-end bg-dark hover-bg-opacity-10 transition-1000">
-										<div class="btn-group-vertical transform-rotateY-90 hover-transform-rotateY-0 transition-500">
-											<a class="btn btn-light p-0 border-0"><i class="p-2 fas fa-random bg-white border"></i></a>
-											<a class="btn btn-light p-0 border-0"><i class="p-2 far fa-heart bg-white border"></i></a>
-										</div>
-									</div>
-								</div>
-								<div class="card-body text-capitalize small px-0">
-									<p class="mb-0 text-truncate">
-										canon EF 85mm <br />
-										f/1.8 USM medium telephoto lens
-									</p>
-								</div>
-								<div class="card-footer border-0 bg-transparent h-6 overflow-hidden p-0">
-									<div class="hover-mt-n25 transition-500 small">
-										<p class="mt-2">$599.00</p>
-										<div class="text-uppercase small cursor-pointer">
-											<a class="text-decoration-none text-dark fw-bold">add to cart</a>
-											<div class="vr mx-1"></div>
-											<a class="text-decoration-none text-dark fw-bold">quick view</a>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	</section>
-</template>
diff --git a/src/views/public/home/Appliances.vue b/src/views/public/home/Appliances.vue
deleted file mode 100644
index c09ec0b..0000000
--- a/src/views/public/home/Appliances.vue
+++ /dev/null
@@ -1,260 +0,0 @@
-<script setup></script>
-
-<template>
-	<!--home-appliances-section-->
-
-	<section id="homeHomeAppliances">
-		<div class="container-lg">
-			<div class="py-2 my-1">
-				<h4 class="fw-bolder m-0">Home Appliances</h4>
-			</div>
-			<div class="row justify-content-center p-0 g-3 g-sm-0 m-0">
-				<div class="col-10 col-sm-6 col-md-6 col-lg-5 p-0">
-					<div class="card rounded-0 group-hover h-100 cursor-pointer p-2">
-						<div class="overflow-hidden position-relative">
-							<img class="img-fluid" src="images/demo/categories-image-6.jpg " />
-							<div class="card-img-overlay rounded-0 d-flex p-0 bg-opacity-0 justify-content-end align-items-end bg-dark hover-bg-opacity-10 transition-1000">
-								<div class="btn-group-vertical transform-rotateY-90 hover-transform-rotateY-0 transition-500">
-									<a class="btn btn-light p-0 border-0"><i class="p-2 fas fa-random bg-white border"></i></a>
-									<a class="btn btn-light p-0 border-0"><i class="p-2 far fa-heart bg-white border"></i></a>
-								</div>
-							</div>
-						</div>
-						<div class="card-body small px-0">
-							<p class="mb-2 text-white bg-red-danger p-2 w-50">488d: 19h : 59m : 45s</p>
-							<p class="m-0 text-secondary text-uppercase">sold:<span class="text-red-danger"> 25</span> / 50</p>
-							<div class="progress bg-grayred rounded-pill h-2">
-								<div class="progress-bar rounded-pill w-50 bg-red-danger"></div>
-							</div>
-							<h5 class="pt-2 m-0 text-truncate">4k UHD smart TV width chromecast built-in</h5>
-							<div class="p-0 m-0 text-warning">
-								<i class="fas fa-star"></i>
-								<i class="fas fa-star"></i>
-								<i class="fas fa-star"></i>
-								<i class="fas fa-star"></i>
-								<i class="fas fa-star"></i>
-							</div>
-						</div>
-						<div class="card-footer border-0 bg-transparent h-6 overflow-hidden p-0">
-							<div class="hover-mt-n25 transition-500">
-								<p class="text-red-danger mt-1"><del class="text-secondary small">$599.00</del> $399.00</p>
-								<div class="text-uppercase small">
-									<a class="text-decoration-none text-dark fw-bold small">add to cart</a>
-									<div class="vr mx-1"></div>
-									<a class="text-decoration-none text-dark fw-bold small">quick view</a>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-				<div class="col-10 col-sm-6 d-md-none p-0">
-					<div class="card rounded-0 group-hover h-100 cursor-pointer p-2">
-						<div class="overflow-hidden position-relative">
-							<img class="img-fluid" src="images/demo/electronic-ha8.jpg" />
-							<div class="card-img-overlay rounded-0 d-flex p-0 bg-opacity-0 justify-content-end align-items-end bg-dark hover-bg-opacity-10 transition-1000">
-								<div class="btn-group-vertical transform-rotateY-90 hover-transform-rotateY-0 transition-500">
-									<a href="#" class="btn btn-light p-0 border-0"><i class="p-2 fas fa-random bg-white border"></i></a>
-									<a href="#" class="btn btn-light p-0 border-0"><i class="p-2 far fa-heart bg-white border"></i></a>
-								</div>
-							</div>
-						</div>
-						<div class="card-body small px-0">
-							<p class="mb-2 text-white bg-red-danger p-2 w-50">488d: 19h : 59m : 45s</p>
-							<p class="m-0 text-secondary text-uppercase">sold:<span class="text-red-danger"> 40</span> / 50</p>
-							<div class="progress bg-grayred rounded-pill h-2">
-								<div class="progress-bar rounded-pill w-75 bg-red-danger"></div>
-							</div>
-							<h5 class="pt-2 m-0 text-truncate">hamilton beach flexBrew trio coffee maker</h5>
-							<div class="p-0 m-0 text-warning">
-								<i class="fas fa-star"></i>
-								<i class="fas fa-star"></i>
-								<i class="fas fa-star"></i>
-								<i class="fas fa-star"></i>
-								<i class="fas fa-star"></i>
-							</div>
-						</div>
-						<div class="card-footer border-0 bg-transparent h-6 overflow-hidden p-0">
-							<div class="hover-mt-n25 transition-500">
-								<p class="text-red-danger mt-1"><del class="text-secondary small">$599.00</del> $399.00</p>
-								<div class="text-uppercase small">
-									<a class="text-decoration-none text-dark fw-bold small">add to cart</a>
-									<div class="vr mx-1"></div>
-									<a class="text-decoration-none text-dark fw-bold small">quick view</a>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-				<div class="col-12 col-md-6 col-lg-7 p-0">
-					<div class="row justify-content-center p-0 g-3 g-sm-0 m-0">
-						<div class="col-10 col-sm-4 col-md-6 col-lg-4 p-0">
-							<div class="card rounded-0 group-hover p-2 h-100">
-								<div class="overflow-hidden position-relative">
-									<img class="img-fluid" src="images/demo/electronic-ha2.jpg " />
-									<div class="card-img-overlay rounded-0 d-flex p-0 bg-opacity-0 justify-content-end align-items-end bg-dark hover-bg-opacity-10 transition-1000">
-										<div class="btn-group-vertical transform-rotateY-90 hover-transform-rotateY-0 transition-500">
-											<a class="btn btn-light p-0 border-0"><i class="p-2 fas fa-random bg-white border"></i></a>
-											<a class="btn btn-light p-0 border-0"><i class="p-2 far fa-heart bg-white border"></i></a>
-										</div>
-									</div>
-								</div>
-								<div class="card-body text-capitalize small px-0">
-									<p class="text-truncate mb-0">
-										top freezer apartment <br />
-										size refrigerator stainless
-									</p>
-								</div>
-								<div class="card-footer border-0 bg-transparent h-6 overflow-hidden p-0">
-									<div class="hover-mt-n25 transition-500 small">
-										<p class="mt-2">$599.00</p>
-										<div class="text-uppercase small cursor-pointer">
-											<a class="text-decoration-none text-dark fw-bold">add to cart</a>
-											<div class="vr mx-1"></div>
-											<a class="text-decoration-none text-dark fw-bold">quick view</a>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-						<div class="col-10 col-sm-4 col-md-6 col-lg-4 p-0">
-							<div class="card rounded-0 group-hover p-2 h-100">
-								<div class="overflow-hidden position-relative">
-									<img class="img-fluid" src="images/demo/electronic-ha3.jpg " />
-									<div class="card-img-overlay rounded-0 d-flex p-0 bg-opacity-0 justify-content-end align-items-end bg-dark hover-bg-opacity-10 transition-1000">
-										<div class="btn-group-vertical transform-rotateY-90 hover-transform-rotateY-0 transition-500">
-											<a class="btn btn-light p-0 border-0"><i class="p-2 fas fa-random bg-white border"></i></a>
-											<a class="btn btn-light p-0 border-0"><i class="p-2 far fa-heart bg-white border"></i></a>
-										</div>
-									</div>
-								</div>
-								<div class="card-body text-capitalize fw-semibold small px-0">
-									<p class="text-truncate mb-0">
-										sylvania 55" 4k <br />
-										UHD android smart television
-									</p>
-								</div>
-								<div class="card-footer border-0 bg-transparent h-6 overflow-hidden p-0">
-									<div class="hover-mt-n25 transition-500 small">
-										<p class="mt-2">$599.00</p>
-										<div class="text-uppercase small cursor-pointer">
-											<a class="text-decoration-none text-dark fw-bold">add to cart</a>
-											<div class="vr mx-1"></div>
-											<a class="text-decoration-none text-dark fw-bold">quick view</a>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-						<div class="col-10 col-sm-4 col-md-6 col-lg-4 p-0">
-							<div class="card rounded-0 group-hover p-2 h-100">
-								<div class="overflow-hidden position-relative">
-									<img class="img-fluid" src="images/demo/electronic-ha4.jpg " />
-									<div class="card-img-overlay rounded-0 d-flex p-0 bg-opacity-0 justify-content-end align-items-end bg-dark hover-bg-opacity-10 transition-1000">
-										<div class="btn-group-vertical transform-rotateY-90 hover-transform-rotateY-0 transition-500">
-											<a class="btn btn-light p-0 border-0"><i class="p-2 fas fa-random bg-white border"></i></a>
-											<a class="btn btn-light p-0 border-0"><i class="p-2 far fa-heart bg-white border"></i></a>
-										</div>
-									</div>
-								</div>
-								<div class="card-body text-capitalize fw-semibold small px-0">
-									<p class="text-truncate mb-0">portable washing <br />machine 11lbs capacity</p>
-								</div>
-								<div class="card-footer border-0 bg-transparent h-6 overflow-hidden p-0">
-									<div class="hover-mt-n25 transition-500 small">
-										<p class="mt-2">$599.00</p>
-										<div class="text-uppercase small cursor-pointer">
-											<a class="text-decoration-none text-dark fw-bold">add to cart</a>
-											<div class="vr mx-1"></div>
-											<a class="text-decoration-none text-dark fw-bold">quick view</a>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-						<div class="col-10 col-sm-4 col-md-6 col-lg-4 p-0">
-							<div class="card rounded-0 group-hover p-2 h-100">
-								<div class="overflow-hidden position-relative">
-									<img class="img-fluid" src="images/demo/electronic-ha5.jpg " />
-									<div class="card-img-overlay rounded-0 d-flex p-0 bg-opacity-0 justify-content-end align-items-end bg-dark hover-bg-opacity-10 transition-1000">
-										<div class="btn-group-vertical transform-rotateY-90 hover-transform-rotateY-0 transition-500">
-											<a class="btn btn-light p-0 border-0"><i class="p-2 fas fa-random bg-white border"></i></a>
-											<a class="btn btn-light p-0 border-0"><i class="p-2 far fa-heart bg-white border"></i></a>
-										</div>
-									</div>
-								</div>
-								<div class="card-body text-capitalize fw-semibold small px-0">
-									<p class="text-truncate mb-0">newAir portable <br />evaporative air cooler</p>
-								</div>
-								<div class="card-footer border-0 bg-transparent h-6 overflow-hidden p-0">
-									<div class="hover-mt-n25 transition-500 small">
-										<p class="mt-2">$599.00</p>
-										<div class="text-uppercase small cursor-pointer">
-											<a class="text-decoration-none text-dark fw-bold">add to cart</a>
-											<div class="vr mx-1"></div>
-											<a class="text-decoration-none text-dark fw-bold">quick view</a>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-						<div class="col-10 col-sm-4 d-md-none d-lg-block col-lg-4 p-0">
-							<div class="card rounded-0 group-hover p-2 h-100">
-								<div class="overflow-hidden position-relative">
-									<img class="img-fluid" src="images/demo/electronic-ha6.jpg " />
-									<div class="card-img-overlay rounded-0 d-flex p-0 bg-opacity-0 justify-content-end align-items-end bg-dark hover-bg-opacity-10 transition-1000">
-										<div class="btn-group-vertical transform-rotateY-90 hover-transform-rotateY-0 transition-500">
-											<a class="btn btn-light p-0 border-0"><i class="p-2 fas fa-random bg-white border"></i></a>
-											<a class="btn btn-light p-0 border-0"><i class="p-2 far fa-heart bg-white border"></i></a>
-										</div>
-									</div>
-								</div>
-								<div class="card-body text-capitalize fw-semibold small px-0">
-									<p class="text-truncate mb-0">
-										LG ductless air <br />
-										conditioning single-Zone
-									</p>
-								</div>
-								<div class="card-footer border-0 bg-transparent h-6 overflow-hidden p-0">
-									<div class="hover-mt-n25 transition-500 small">
-										<p class="mt-2">$599.00</p>
-										<div class="text-uppercase small cursor-pointer">
-											<a class="text-decoration-none text-dark fw-bold">add to cart</a>
-											<div class="vr mx-1"></div>
-											<a class="text-decoration-none text-dark fw-bold">quick view</a>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-						<div class="col-10 col-sm-4 d-md-none d-lg-block col-lg-4 p-0">
-							<div class="card rounded-0 group-hover p-2 h-100">
-								<div class="overflow-hidden position-relative">
-									<img class="img-fluid" src="images/demo/electronic-ha7.jpg " />
-									<div class="card-img-overlay rounded-0 d-flex p-0 bg-opacity-0 justify-content-end align-items-end bg-dark hover-bg-opacity-10 transition-1000">
-										<div class="btn-group-vertical transform-rotateY-90 hover-transform-rotateY-0 transition-500">
-											<a class="btn btn-light p-0 border-0"><i class="p-2 fas fa-random bg-white border"></i></a>
-											<a class="btn btn-light p-0 border-0"><i class="p-2 far fa-heart bg-white border"></i></a>
-										</div>
-									</div>
-								</div>
-								<div class="card-body text-capitalize fw-semibold small px-0">
-									<p class="text-truncate mb-0">TOSHIBA electric <br />rice cooker model 18NMFIAN</p>
-								</div>
-								<div class="card-footer border-0 bg-transparent h-6 overflow-hidden p-0">
-									<div class="hover-mt-n25 transition-500 small">
-										<p class="mt-2">$599.00</p>
-										<div class="text-uppercase small cursor-pointer">
-											<a class="text-decoration-none text-dark fw-bold">add to cart</a>
-											<div class="vr mx-1"></div>
-											<a class="text-decoration-none text-dark fw-bold">quick view</a>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	</section>
-</template>
diff --git a/src/views/public/home/Baner2.vue b/src/views/public/home/Baner2.vue
deleted file mode 100644
index 9f3f6fe..0000000
--- a/src/views/public/home/Baner2.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<script setup></script>
-
-<template>
-	<!--add-section2-->
-
-	<section class="my-5"></section>
-	<section id="ad-section-2 ">
-		<!-- ad section -->
-		<div class="container-lg m-auto">
-			<div class="py-3 bg-no-repeat bg-size-cover bg-position-center" style="background-image: url(images/demo/store-noted-2.jpg)">
-				<p class="h5 m-auto text-center text-uppercase fw-semibold"><b class="text-red-danger">10% off </b>when paying by <b class="text-red-danger"> debit card</b></p>
-			</div>
-		</div>
-	</section>
-	<section class="my-3 py-1"></section>
-</template>
diff --git a/src/views/public/home/BigBaner.vue b/src/views/public/home/BigBaner.vue
deleted file mode 100644
index ca94ea2..0000000
--- a/src/views/public/home/BigBaner.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<script setup></script>
-
-<template>
-	<!--first-banner -section-->
-
-	<section class="my-5"></section>
-	<section id="first-banner">
-		<div class="container-lg">
-			<div class="row justify-content-center p-0 g-2 g-sm-3 m-0">
-				<div class="col-10 col-md-6">
-					<div class="card bg-dark rounded-0 overflow-hidden border-0 group-hover">
-						<a href="#" class="stretched-link"></a>
-						<img class="img-fluid hover-scale-115 transition-300 card-img" src="images/demo/banner-1-electronic-2.jpg" alt="banner-icon" />
-						<div class="card-img-overlay text-uppercase text-white ms-md-4 mt-md-4">
-							<h6 class="small my-1 text-red-danger">new arrivals</h6>
-							<h4 class="mb-0 text-black">galaxy tab</h4>
-							<h4 class="text-black">64gb / 4gb ram</h4>
-							<button class="btn d-none d-lg-block bg-black rounded-0 fw-bolder my-3 btn-sm py-0 px-2">
-								<a class="text-white text-decoration-none text-uppercase fs-8" href="#">shop now<i class="ps-1 fas fa-long-arrow-alt-right"></i></a>
-							</button>
-						</div>
-					</div>
-				</div>
-				<div class="col-10 col-md-6">
-					<div class="card bg-dark rounded-0 overflow-hidden border-0 group-hover">
-						<a href="#" class="stretched-link"></a>
-						<img class="img-fluid hover-scale-115 transition-300 card-img" src="images/demo/banner-2-electronic-1.jpg" alt="banner-icon" />
-						<div class="card-img-overlay text-uppercase text-white ms-md-4 mt-md-4">
-							<h6 class="small my-1 text-red-danger">the best laptop</h6>
-							<h4 class="mb-0">sony vaio</h4>
-							<h4 class="">chip core i9</h4>
-							<button class="btn d-none d-lg-block bg-white rounded-0 fw-bolder my-3 btn-sm py-0 px-2">
-								<a class="text-black text-decoration-none text-uppercase fs-8" href="#">shop now<i class="ps-1 fas fa-long-arrow-alt-right"></i></a>
-							</button>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	</section>
-	<section class="my-5"></section>
-</template>
diff --git a/src/views/public/home/BigBaner2.vue b/src/views/public/home/BigBaner2.vue
deleted file mode 100644
index 830dcb5..0000000
--- a/src/views/public/home/BigBaner2.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<script setup></script>
-
-<template>
-	<!--second-banner-section-->
-
-	<section class="my-5"></section>
-	<section id="secondBanner">
-		<div class="container-lg">
-			<div class="row justify-content-center p-0 g-2 g-sm-3 m-0">
-				<div class="col-10 col-md-6">
-					<div class="card bg-dark rounded-0 overflow-hidden border-0 group-hover">
-						<a href="#" class="stretched-link"></a>
-						<img class="card-img img-fluid hover-scale-115 transition-300" src="images/demo/banner-2-electronic-2.jpg" alt="banner-icon" />
-						<div class="card-img-overlay text-uppercase text-white ms-md-4 mt-md-4">
-							<h6 class="small my-1 text-red-danger">new arrivals</h6>
-							<h4 class="mb-0 text-dark">dji mavic pro</h4>
-							<h4 class="text-dark">16gb microsd</h4>
-							<button class="btn d-none d-lg-block bg-white rounded-0 fw-bolder my-3 btn-sm py-0 px-2">
-								<a class="text-black text-decoration-none text-uppercase fs-8" href="#">shop now<i class="ps-1 fas fa-long-arrow-alt-right"></i></a>
-							</button>
-						</div>
-					</div>
-				</div>
-				<div class="col-10 col-md-6">
-					<div class="card bg-dark rounded-0 overflow-hidden border-0 group-hover">
-						<a href="#" class="stretched-link"></a>
-						<img class="card-img img-fluid hover-scale-115 transition-300" src="images/demo/banner-3-electronic-2.jpg" alt="banner-icon" />
-						<div class="card-img-overlay text-uppercase text-white ms-md-4 mt-md-4">
-							<h6 class="small my-1">on the weekend</h6>
-							<h4 class="mb-0">on sale now</h4>
-							<h4 class="">black friday</h4>
-							<button class="btn d-none d-lg-block bg-dark rounded-0 fw-bolder my-3 btn-sm py-0 px-2">
-								<a class="text-white text-decoration-none text-uppercase fs-8" href="#">shop now<i class="ps-1 fas fa-long-arrow-alt-right"></i></a>
-							</button>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	</section>
-	<section class="my-5 my-2"></section>
-</template>
diff --git a/src/views/public/home/Blog.vue b/src/views/public/home/Blog.vue
deleted file mode 100644
index 8ef716a..0000000
--- a/src/views/public/home/Blog.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<script setup></script>
-
-<template>
-	<!--popular-blog-posts-section-->
-
-	<section class="m-5"></section>
-	<section id="popularBlogPosts">
-		<div class="container-lg">
-			<div class="py-2 my-1 d-flex justify-content-between align-items-center">
-				<h4 class="fw-bolder m-0">Most Popular Blog Posts</h4>
-				<h6 class="m-0 small">
-					<a href="#" class="text-uppercase text-decoration-none text-secondary small">view more</a>
-				</h6>
-			</div>
-			<div class="row g-3 m-0">
-				<div class="col-sm-12 col-md-4 m-0">
-					<div class="card rounded-0 border-0 group-hover">
-						<div class="overflow-hidden position-relative">
-							<img class="img-fluid" src="images/demo/blog-2.jpg " />
-							<div class="card-img-overlay rounded-0 p-0 bg-dark bg-opacity-0 top-100 hover-bg-opacity-20 hover-top-0 transition-500"></div>
-						</div>
-						<div class="card-body small p-0 text-capitalize">
-							<h6 class="my-1">info here</h6>
-							<h6 class="fw-bolder">ultra-thin laptop rentals and rivalry</h6>
-							<p class="text-muted lh-lg">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aliquam alias maiores exercitationem?</p>
-							<button class="btn bg-white rounded-0 fw-bolder btn-sm p-0">
-								<a class="text-black text-decoration-none text-uppercase" href="#"
-									>read more
-									<i class="ps-1 fas fa-long-arrow-alt-right"></i>
-								</a>
-							</button>
-						</div>
-					</div>
-				</div>
-				<div class="d-none d-md-block col-md-4 m-0">
-					<div class="card rounded-0 border-0 group-hover">
-						<div class="overflow-hidden position-relative">
-							<img class="img-fluid" src="images/demo/blog-1.jpg " />
-							<div class="card-img-overlay rounded-0 p-0 bg-dark bg-opacity-0 top-100 hover-bg-opacity-20 hover-top-0 transition-500"></div>
-						</div>
-						<div class="card-body small text-capitalize p-0">
-							<h6 class="my-1">info here</h6>
-							<h6 class="fw-bolder">how to tag faces in the android gallery</h6>
-							<p class="text-muted lh-lg">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aliquam alias maiores exercitationem?</p>
-							<button class="btn bg-white rounded-0 fw-bolder btn-sm p-0">
-								<a class="text-black text-decoration-none text-uppercase" href="#"
-									>read more
-									<i class="ps-1 fas fa-long-arrow-alt-right"></i>
-								</a>
-							</button>
-						</div>
-					</div>
-				</div>
-				<div class="d-none d-md-block col-md-4 m-0">
-					<div class="card rounded-0 border-0 group-hover">
-						<div class="overflow-hidden position-relative">
-							<img class="img-fluid" src="images/demo/blog-3.jpg " />
-							<div class="card-img-overlay rounded-0 p-0 bg-dark bg-opacity-0 top-100 hover-bg-opacity-20 hover-top-0 transition-500"></div>
-						</div>
-						<div class="card-body small text-capitalize p-0">
-							<h6 class="my-1">info here</h6>
-							<h6 class="fw-bolder">the new sony solo cinematic dream</h6>
-							<p class="text-muted lh-lg">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aliquam alias maiores exercitationem?</p>
-							<button class="btn bg-white rounded-0 fw-bolder btn-sm p-0">
-								<a class="text-black text-decoration-none text-uppercase" href="#"
-									>read more
-									<i class="ps-1 fas fa-long-arrow-alt-right"></i>
-								</a>
-							</button>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	</section>
-	<section class="m-4"></section>
-</template>
diff --git a/src/views/public/home/Brand.vue b/src/views/public/home/Brand.vue
deleted file mode 100644
index 5208622..0000000
--- a/src/views/public/home/Brand.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<script setup></script>
-<template>
-	<!--brand-icons-section-->
-
-	<section class="my-5 py-1 border-bottom shadow-sm container-fluid"></section>
-	<section id="s">
-		<div class="container-lg">
-			<div class="row g-1 p-2 align-items-center text-center">
-				<div class="col-2"><img class="img-fluid" src="images/demo/brand-1.jpg" alt="brand-icon" /></div>
-				<div class="col-2"><img class="img-fluid" src="images/demo/brand-2.jpg" alt="brand-icon" /></div>
-				<div class="col-2"><img class="img-fluid" src="images/demo/brand-3.jpg" alt="brand-icon" /></div>
-				<div class="col-2"><img class="img-fluid" src="images/demo/brand-4.jpg" alt="brand-icon" /></div>
-				<div class="col-2"><img class="img-fluid" src="images/demo/brand-5.jpg" alt="brand-icon" /></div>
-				<div class="col-2"><img class="img-fluid" src="images/demo/brand-6.jpg" alt="brand-icon" /></div>
-				<div class="col-2"><img class="img-fluid" src="images/demo/brand-7.jpg" alt="brand-icon" /></div>
-				<div class="col-2"><img class="img-fluid" src="images/demo/brand-8.jpg" alt="brand-icon" /></div>
-				<div class="col-2"><img class="img-fluid" src="images/demo/brand-9.jpg" alt="brand-icon" /></div>
-				<div class="col-2"><img class="img-fluid" src="images/demo/brand-10.jpg" alt="brand-icon" /></div>
-				<div class="col-2"><img class="img-fluid" src="images/demo/brand-11.jpg" alt="brand-icon" /></div>
-				<div class="col-2"><img class="img-fluid" src="images/demo/brand-12.jpg" alt="brand-icon" /></div>
-			</div>
-		</div>
-	</section>
-	<section class="m-4"></section>
-</template>
diff --git a/src/views/public/home/ProductCategory.vue b/src/views/public/home/ProductCategory.vue
deleted file mode 100644
index 47ead6b..0000000
--- a/src/views/public/home/ProductCategory.vue
+++ /dev/null
@@ -1,110 +0,0 @@
-<script setup></script>
-<template>
-	<!--product-category-list-section-->
-
-	<div id="homeProductCategory" class="my-2">
-		<div class="container-lg">
-			<div class="row">
-				<div class="col-6 col-lg-3 py-4 border group-hover">
-					<div class="card border-0">
-						<div class="d-flex flex-column margin-b-n25 flex-sm-row align-items-center justify-content-between">
-							<div class="order-2 order-sm-1 hover-mt-n1 transition-ease-600">
-								<p class="mb-0 fw-bold text-uppercase">iphone</p>
-								<p class="mb-0 text-secondary small">12 Products</p>
-							</div>
-							<img class="h-10 order-1 order-sm-2 hover-mt-n1 transition-ease-600" src="images/demo/categories-image-1.jpg" />
-						</div>
-						<a href="#" class="btn btn-primary btn-sm box-shadow-none w-100 text-capitalize fw-bold text-white z-index-10 hover-mt-25 hover-mb-n3 opacity-0 hover-opacity-100 transition-ease-700">go now >></a>
-					</div>
-				</div>
-				<div class="col-6 col-lg-3 py-4 border group-hover">
-					<div class="card border-0">
-						<div class="d-flex flex-column margin-b-n25 flex-sm-row align-items-center justify-content-between">
-							<div class="order-2 order-sm-1 hover-mt-n1 transition-ease-600">
-								<p class="mb-0 fw-bold text-uppercase">
-									cameras & <br />
-									photos
-								</p>
-								<p class="mb-0 text-secondary small">10 Products</p>
-							</div>
-							<img class="h-10 order-1 order-sm-2 hover-mt-n1 transition-ease-600" src="images/demo/categories-image-2.jpg" />
-						</div>
-						<a href="#" class="btn btn-primary btn-sm box-shadow-none w-100 text-capitalize fw-bold text-white z-index-10 hover-mt-25 hover-mb-n3 opacity-0 hover-opacity-100 transition-ease-700">go now >></a>
-					</div>
-				</div>
-				<div class="col-6 col-lg-3 py-4 border group-hover">
-					<div class="card border-0">
-						<div class="d-flex flex-column margin-b-n25 flex-sm-row align-items-center justify-content-between">
-							<div class="order-2 order-sm-1 hover-mt-n1 transition-ease-600">
-								<p class="mb-0 fw-bold text-uppercase">game controller</p>
-								<p class="mb-0 text-secondary small">13 Products</p>
-							</div>
-							<img class="h-10 order-1 order-sm-2 hover-mt-n1 transition-ease-600" src="images/demo/categories-image-3.jpg" />
-						</div>
-						<a href="#" class="btn btn-primary btn-sm box-shadow-none w-100 text-capitalize fw-bold text-white z-index-10 hover-mt-25 hover-mb-n3 opacity-0 hover-opacity-100 transition-ease-700">go now >></a>
-					</div>
-				</div>
-				<div class="col-6 col-lg-3 py-4 border group-hover">
-					<div class="card border-0">
-						<div class="d-flex flex-column margin-b-n25 flex-sm-row align-items-center justify-content-between">
-							<div class="order-2 order-sm-1 hover-mt-n1 transition-ease-600">
-								<p class="mb-0 fw-bold text-uppercase">washing machine</p>
-								<p class="mb-0 text-secondary small">10 Products</p>
-							</div>
-							<img class="h-10 order-1 order-sm-2 hover-mt-n1 transition-ease-600" src="images/demo/categories-image-4.jpg" />
-						</div>
-						<a href="#" class="btn btn-primary btn-sm box-shadow-none w-100 text-capitalize fw-bold text-white z-index-10 hover-mt-25 hover-mb-n3 opacity-0 hover-opacity-100 transition-ease-700">go now >></a>
-					</div>
-				</div>
-				<div class="col-6 col-lg-3 py-4 border group-hover">
-					<div class="card border-0">
-						<div class="d-flex flex-column margin-b-n25 flex-sm-row align-items-center justify-content-between">
-							<div class="order-2 order-sm-1 hover-mt-n1 transition-ease-600">
-								<p class="mb-0 fw-bold text-uppercase">ipad</p>
-								<p class="mb-0 text-secondary small">10 Products</p>
-							</div>
-							<img class="h-10 order-1 order-sm-2 hover-mt-n1 transition-ease-600" src="images/demo/categories-image-5.jpg" />
-						</div>
-						<a href="#" class="btn btn-primary btn-sm box-shadow-none w-100 text-capitalize fw-bold text-white z-index-10 hover-mt-25 hover-mb-n3 opacity-0 hover-opacity-100 transition-ease-700">go now >></a>
-					</div>
-				</div>
-				<div class="col-6 col-lg-3 py-4 border group-hover">
-					<div class="card border-0">
-						<div class="d-flex flex-column margin-b-n25 flex-sm-row align-items-center justify-content-between">
-							<div class="order-2 order-sm-1 hover-mt-n1 transition-ease-600">
-								<p class="mb-0 fw-bold text-uppercase">tv & audio</p>
-								<p class="mb-0 text-secondary small">13 Products</p>
-							</div>
-							<img class="h-10 order-1 order-sm-2 hover-mt-n1 transition-ease-600" src="images/demo/categories-image-6.jpg" />
-						</div>
-						<a href="#" class="btn btn-primary btn-sm box-shadow-none w-100 text-capitalize fw-bold text-white z-index-10 hover-mt-25 hover-mb-n3 opacity-0 hover-opacity-100 transition-ease-700">go now >></a>
-					</div>
-				</div>
-				<div class="col-6 col-lg-3 py-4 border group-hover">
-					<div class="card border-0">
-						<div class="d-flex flex-column margin-b-n25 flex-sm-row align-items-center justify-content-between">
-							<div class="order-2 order-sm-1 hover-mt-n1 transition-ease-600">
-								<p class="mb-0 fw-bold text-uppercase">computer & <br />laptop</p>
-								<p class="mb-0 text-secondary small">25 Products</p>
-							</div>
-							<img class="h-10 order-1 order-sm-2 hover-mt-n1 transition-ease-600" src="images/demo/categories-image-7.jpg" />
-						</div>
-						<a href="#" class="btn btn-primary btn-sm box-shadow-none w-100 text-capitalize fw-bold text-white z-index-10 hover-mt-25 hover-mb-n3 opacity-0 hover-opacity-100 transition-ease-700">go now >></a>
-					</div>
-				</div>
-				<div class="col-6 col-lg-3 py-4 border group-hover">
-					<div class="card border-0">
-						<div class="d-flex flex-column margin-b-n25 flex-sm-row align-items-center justify-content-between">
-							<div class="order-2 order-sm-1 hover-mt-n1 transition-ease-600">
-								<p class="mb-0 fw-bold text-uppercase">accessories</p>
-								<p class="mb-0 text-secondary small">13 Products</p>
-							</div>
-							<img class="h-10 order-1 order-sm-2 hover-mt-n1 transition-ease-600" src="images/demo/categories-image-8.jpg" />
-						</div>
-						<a href="#" class="btn btn-primary btn-sm box-shadow-none w-100 text-capitalize fw-bold text-white z-index-10 hover-mt-25 hover-mb-n3 opacity-0 hover-opacity-100 transition-ease-700">go now >></a>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-</template>
diff --git a/src/views/public/home/SmartPhone.vue b/src/views/public/home/SmartPhone.vue
deleted file mode 100644
index c33b7cc..0000000
--- a/src/views/public/home/SmartPhone.vue
+++ /dev/null
@@ -1,283 +0,0 @@
-<script setup></script>
-
-<template>
-	<!--smartphone-Tablet -section-->
-
-	<section id="smartPhoneTablet ">
-		<div class="container-lg">
-			<div class="py-2 my-1">
-				<h4 class="fw-bolder m-0">Smartphone & Tablet</h4>
-			</div>
-			<div class="row m-0 justify-content-center p-0 g-3 g-sm-0">
-				<div class="col-10 col-sm-6 col-md-6 col-lg-5 p-0">
-					<div class="card rounded-0 p-2 group-hover h-100 cursor-pointer">
-						<div class="overflow-hidden position-relative">
-							<img class="img-fluid" src="images/demo/electronic-smpt-1.jpg " />
-							<div class="card-img-overlay rounded-0 d-flex p-0 bg-opacity-0 justify-content-end align-items-end bg-dark hover-bg-opacity-10 transition-1000">
-								<div class="btn-group-vertical transform-rotateY-90 hover-transform-rotateY-0 transition-500">
-									<a class="btn btn-light p-0 border-0"><i class="p-2 fas fa-random bg-white border"></i></a>
-									<a class="btn btn-light p-0 border-0"><i class="p-2 far fa-heart bg-white border"></i></a>
-								</div>
-							</div>
-						</div>
-						<div class="card-body small p-2">
-							<p class="mb-2 text-white bg-red-danger p-2 w-50">488d: 19h : 59m : 45s</p>
-							<p class="m-0 text-secondary text-uppercase">sold:<span class="text-red-danger"> 25</span> / 50</p>
-							<div class="progress bg-grayred rounded-pill h-2">
-								<div class="progress-bar rounded-pill w-50 bg-red-danger"></div>
-							</div>
-							<h5 class="pt-2 m-0 text-truncate">BLU G90 Pro - 6.5" HD+ Gaming Smartphone</h5>
-							<div class="p-0 m-0 text-warning">
-								<i class="fas fa-star"></i>
-								<i class="fas fa-star"></i>
-								<i class="fas fa-star"></i>
-								<i class="fas fa-star"></i>
-								<i class="fas fa-star"></i>
-							</div>
-						</div>
-						<div class="card-footer border-0 bg-transparent h-6 overflow-hidden py-0">
-							<div class="hover-mt-n25 transition-500">
-								<p class="text-red-danger mt-1"><del class="text-secondary small">$599.00</del> $399.00</p>
-								<div class="text-uppercase small">
-									<a class="text-decoration-none text-dark fw-bold small">add to cart</a>
-									<div class="vr mx-1"></div>
-									<a class="text-decoration-none text-dark fw-bold small">quick view</a>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-				<div class="col-10 col-sm-6 d-md-none p-0">
-					<div class="card rounded-0 p-2 group-hover h-100">
-						<div class="overflow-hidden position-relative">
-							<img class="w-100" src="images/demo/electronic-smpt-8.jpg " />
-							<div class="card-img-overlay rounded-0 d-flex p-0 bg-opacity-0 justify-content-end align-items-end bg-dark hover-bg-opacity-10 transition-1000">
-								<div class="btn-group-vertical transform-rotateY-90 hover-transform-rotateY-0 transition-500">
-									<a class="btn btn-light p-0 border-0"><i class="p-2 fas fa-random bg-white border"></i></a>
-									<a class="btn btn-light p-0 border-0"><i class="p-2 far fa-heart bg-white border"></i></a>
-								</div>
-							</div>
-						</div>
-						<div class="card-body small">
-							<p class="mb-2 text-white bg-red-danger p-2 w-50">488d: 19h : 59m : 45s</p>
-							<p class="m-0 text-secondary text-uppercase">sold:<span class="text-red-danger"> 25</span> /</p>
-							<div class="progress bg-grayred rounded-pill h-2">
-								<div class="progress-bar rounded-pill w-50 bg-red-danger"></div>
-							</div>
-							<p class="pt-2 m-0 text-truncate">BLU G90 Pro - 6.5" HD+ Gaming Smartphone</p>
-							<div class="p-0 m-0 text-warning">
-								<i class="fas fa-star"></i>
-								<i class="fas fa-star"></i>
-								<i class="fas fa-star"></i>
-								<i class="fas fa-star"></i>
-								<i class="fas fa-star"></i>
-							</div>
-							<div class="card-footer border-0 bg-transparent h-6 overflow-hidden py-0">
-								<div class="hover-mt-n25 transition-500">
-									<p class="text-red-danger mt-16"><del class="text-secondary small">$599.00</del> $399.00</p>
-									<div class="text-uppercase small cursor-pointer">
-										<a class="text-decoration-none text-dark fw-bold small">add to cart</a>
-										<div class="vr ,mx-1"></div>
-										<a class="text-decoration-none text-dark fw-bold small">quick view</a>
-									</div>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-				<div class="col-sm-12 col-md-6 col-lg-7 p-0">
-					<div class="row justify-content-center m-0 g-3 g-sm-0">
-						<div class="col-10 col-sm-4 col-md-6 col-lg-4 p-0">
-							<div class="card rounded-0 group-hover p-2 h-100">
-								<div class="overflow-hidden position-relative">
-									<img class="w-100" src="images/demo/electronic-smpt-2.jpg " />
-									<div class="card-img-overlay rounded-0 d-flex p-0 bg-opacity-0 justify-content-end align-items-end bg-dark hover-bg-opacity-10 transition-1000">
-										<div class="btn-group-vertical transform-rotateY-90 hover-transform-rotateY-0 transition-500">
-											<a class="btn btn-light p-0 border-0"><i class="p-2 fas fa-random bg-white border"></i></a>
-											<a class="btn btn-light p-0 border-0"><i class="p-2 far fa-heart bg-white border"></i></a>
-										</div>
-									</div>
-								</div>
-								<div class="card-body text-capitalize small mt-2 p-0">
-									<p class="mb-1">new unlocked 128 GB of Storage Smartphone someting else</p>
-									<div class="small py-1">
-										<i class="fas fa-star text-warning"></i>
-										<i class="fas fa-star text-warning"></i>
-										<i class="fas fa-star text-warning"></i>
-										<i class="fas fa-star text-warning"></i>
-										<i class="far fa-star text-warning"></i>
-										<span class="text-secondary">(12)</span>
-									</div>
-								</div>
-								<div class="card-footer border-0 bg-transparent h-6 overflow-hidden p-0">
-									<div class="hover-mt-n25 transition-500 small">
-										<p class="mt-2">$599.00</p>
-										<div class="text-uppercase small cursor-pointer">
-											<a href="cart/cart.php" class="text-decoration-none text-dark fw-bold">add to cart</a>
-											<div class="vr mx-1"></div>
-											<a href="product-details/product-details.php" class="text-decoration-none text-dark fw-bold">quick view</a>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-						<div class="col-10 col-sm-4 col-md-6 col-lg-4 p-0">
-							<div class="card rounded-0 group-hover p-2 h-100">
-								<div class="overflow-hidden position-relative">
-									<img class="w-100" src="images/demo/electronic-smpt-3.jpg " />
-									<div class="card-img-overlay rounded-0 d-flex p-0 bg-opacity-0 justify-content-end align-items-end bg-dark hover-bg-opacity-10 transition-1000">
-										<div class="btn-group-vertical transform-rotateY-90 hover-transform-rotateY-0 transition-500">
-											<a class="btn btn-light p-0 border-0"><i class="p-2 fas fa-random bg-white border"></i></a>
-											<a class="btn btn-light p-0 border-0"><i class="p-2 far fa-heart bg-white border"></i></a>
-										</div>
-									</div>
-								</div>
-								<div class="card-body text-capitalize small mt-2 p-0">
-									<p class="mb-0">samsung electronics samsung galaxy s21 5G</p>
-									<div class="small py-1">
-										<i class="fas fa-star text-warning"></i>
-										<i class="fas fa-star text-warning"></i>
-										<i class="fas fa-star text-warning"></i>
-										<i class="fas fa-star text-warning"></i>
-										<i class="far fa-star text-warning"></i>
-										<span class="text-secondary">(32)</span>
-									</div>
-								</div>
-								<div class="card-footer border-0 bg-transparent h-6 overflow-hidden p-0">
-									<div class="hover-mt-n25 transition-500 small">
-										<p class="mt-2 text-red-danger"><del class="text-secondary small">$799.00</del> $599.00</p>
-										<div class="text-uppercase small cursor-pointer">
-											<a class="text-decoration-none text-dark fw-bold">add to cart</a>
-											<div class="vr mx-1"></div>
-											<a class="text-decoration-none text-dark fw-bold">quick view</a>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-						<div class="col-10 col-sm-4 col-md-6 col-lg-4 p-0">
-							<div class="card rounded-0 group-hover p-2 h-100">
-								<div class="overflow-hidden position-relative">
-									<img class="w-100 p-2" src="images/demo/electronic-smpt-4.jpg " />
-									<div class="card-img-overlay rounded-0 d-flex p-0 bg-opacity-0 justify-content-end align-items-end bg-dark hover-bg-opacity-10 transition-1000">
-										<div class="btn-group-vertical transform-rotateY-90 hover-transform-rotateY-0 transition-500">
-											<a class="btn btn-light p-0 border-0"><i class="p-2 fas fa-random bg-white border"></i></a>
-											<a class="btn btn-light p-0 border-0"><i class="p-2 far fa-heart bg-white border"></i></a>
-										</div>
-									</div>
-								</div>
-								<div class="card-body text-capitalize small mt-2 p-0">
-									<p class="mb-0">blackview a8 android 10 smartphone 6.21 in</p>
-									<div class="small py-1 mt-auto">
-										<i class="fas fa-star text-warning"></i>
-										<i class="fas fa-star text-warning"></i>
-										<i class="fas fa-star text-warning"></i>
-										<i class="fas fa-star text-warning"></i>
-										<i class="far fa-star text-warning"></i>
-										<span class="text-secondary">(14)</span>
-									</div>
-								</div>
-								<div class="card-footer border-0 bg-transparent h-6 overflow-hidden p-0">
-									<div class="hover-mt-n25 transition-500 small">
-										<p class="mt-2"><del class="text-secondary small">$599.00</del> - $799.00</p>
-										<div class="text-uppercase small cursor-pointer">
-											<a class="text-decoration-none text-dark fw-bold">add to cart</a>
-											<div class="vr mx-1"></div>
-											<a class="text-decoration-none text-dark fw-bold">quick view</a>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-						<div class="col-10 col-sm-4 col-md-6 col-lg-4 p-0">
-							<div class="card rounded-0 group-hover p-2 h-100">
-								<div class="overflow-hidden position-relative">
-									<img class="w-100" src="images/demo/electronic-smpt-5.jpg " />
-									<div class="card-img-overlay rounded-0 d-flex p-0 bg-opacity-0 justify-content-end align-items-end bg-dark hover-bg-opacity-10 transition-1000">
-										<div class="btn-group-vertical transform-rotateY-90 hover-transform-rotateY-0 transition-500">
-											<a class="btn btn-light p-0 border-0"><i class="p-2 fas fa-random bg-white border"></i></a>
-											<a class="btn btn-light p-0 border-0"><i class="p-2 far fa-heart bg-white border"></i></a>
-										</div>
-									</div>
-								</div>
-								<div class="card-body text-capitalize small mt-2 p-0">
-									<p class="mb-0">note 9 128GB factory unlocked tablet</p>
-								</div>
-								<div class="card-footer border-0 bg-transparent h-6 overflow-hidden p-0">
-									<div class="hover-mt-n25 transition-500 small">
-										<p class="mt-2">$699.00 - $899.00</p>
-										<div class="text-uppercase small cursor-pointer">
-											<a class="text-decoration-none text-dark fw-bold">add to cart</a>
-											<div class="vr mx-1"></div>
-											<a class="text-decoration-none text-dark fw-bold">quick view</a>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-						<div class="col-10 col-sm-4 col-lg-4 d-md-none d-lg-block p-0">
-							<div class="card rounded-0 group-hover p-2 h-100">
-								<div class="overflow-hidden position-relative">
-									<img class="w-100" src="images/demo/electronic-smpt-6.jpg " />
-									<div class="card-img-overlay rounded-0 d-flex p-0 bg-opacity-0 justify-content-end align-items-end bg-dark hover-bg-opacity-10 transition-1000">
-										<div class="btn-group-vertical transform-rotateY-90 hover-transform-rotateY-0 transition-500">
-											<a class="btn btn-light p-0 border-0"><i class="p-2 fas fa-random bg-white border"></i></a>
-											<a class="btn btn-light p-0 border-0"><i class="p-2 far fa-heart bg-white border"></i></a>
-										</div>
-									</div>
-								</div>
-								<div class="card-body text-capitalize small mt-2 p-0">
-									<p class="mb-0">lightweight android tablet 32GB storage</p>
-								</div>
-								<div class="card-footer border-0 bg-transparent h-6 overflow-hidden p-0">
-									<div class="hover-mt-n25 transition-500 small">
-										<p class="mt-2">$699.00</p>
-										<div class="text-uppercase small cursor-pointer">
-											<a class="text-decoration-none text-dark fw-bold">add to cart</a>
-											<div class="vr mx-1"></div>
-											<a class="text-decoration-none text-dark fw-bold">quick view</a>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-						<div class="col-10 col-sm-4 col-lg-4 d-md-none d-lg-block p-0">
-							<div class="card rounded-0 group-hover p-2 h-100">
-								<div class="overflow-hidden position-relative">
-									<img class="w-100" src="images/demo/electronic-smpt-7.jpg " />
-									<div class="card-img-overlay rounded-0 d-flex p-0 bg-opacity-0 justify-content-end align-items-end bg-dark hover-bg-opacity-10 transition-1000">
-										<div class="btn-group-vertical transform-rotateY-90 hover-transform-rotateY-0 transition-500">
-											<a class="btn btn-light p-0 border-0"><i class="p-2 fas fa-random bg-white border"></i></a>
-											<a class="btn btn-light p-0 border-0"><i class="p-2 far fa-heart bg-white border"></i></a>
-										</div>
-									</div>
-								</div>
-								<div class="card-body text-capitalize small mt-2 p-0">
-									<p class="mb-0">apple iMac with retina 5K, 27-inch display</p>
-									<div class="small py-1">
-										<i class="fas fa-star text-warning"></i>
-										<i class="fas fa-star text-warning"></i>
-										<i class="fas fa-star text-warning"></i>
-										<i class="fas fa-star text-warning"></i>
-										<i class="far fa-star text-warning"></i>
-										<span class="text-secondary">(9)</span>
-									</div>
-								</div>
-								<div class="card-footer border-0 bg-transparent h-6 overflow-hidden p-0">
-									<div class="hover-mt-n25 transition-500 small">
-										<p class="mt-2">$499.00 - $699.00</p>
-										<div class="text-uppercase small cursor-pointer">
-											<a class="text-decoration-none text-dark fw-bold">add to cart</a>
-											<div class="vr mx-1"></div>
-											<a class="text-decoration-none text-dark fw-bold">quick view</a>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	</section>
-</template>