diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..e69de29
diff --git a/Js/alpine.js b/Js/alpine.js
new file mode 100644
index 0000000..7e91b04
--- /dev/null
+++ b/Js/alpine.js
@@ -0,0 +1,72 @@
+document.addEventListener('alpine:init', () => {
+    Alpine.data('manga', () => ({
+        items:[
+            {id:1, name:'lorem2', img:'manga1.jpg', price: 90000},
+            {id:2, name:'lorem2', img:'manga2.jpg', price: 90000},
+            {id:3, name:'lorem2', img:'manga3.jpg', price: 90000},
+            {id:4, name:'lorem2', img:'manga4.jpg', price: 90000},
+            {id:5, name:'lorem2', img:'manga5.jpg', price: 90000},
+            {id:6, name:'lorem2', img:'manga6.jpg', price: 90000},
+            {id:7, name:'lorem2', img:'manga7.jpg', price: 90000},
+            {id:8, name:'lorem2', img:'manga8.jpg', price: 90000},
+        ],
+    }));
+
+    Alpine.store('cart', {
+        items:[],
+        total: 0,
+        quantity: 0,
+        
+        add(newItem) {
+            const mangaItem=this.items.find((item)=> item.id === newItem.id);
+            if(!mangaItem){
+                this.items.push({...newItem, quantity:1,total:newItem.price});
+                this.quantity++;
+                this.total+=newItem.price;
+            }else{
+                this.items=this.items.map((item)=>{
+                   if(item.id !==newItem.id){
+                    return item;
+                   } 
+                   else{
+                    item.quantity++;
+                    item.total=item.price*item.quantity;
+                    this.quantity++;
+                    this.total+=item.price;
+                    return item;
+                   }
+                })
+            }
+            console.log(newItem);
+        },
+        remove(id){
+            const cartItem=this.items.find((item)=>item.id === id);
+            if(cartItem.quantity>1){
+                this.items=this.items.map((item)=>{
+                    if(item.id !== id){
+                        return item;
+                    } else {
+                        item.quantity--;
+                        item.total=item.price*item.quantity;
+                        this.quantity--;
+                        this.total-=item.price;
+                        return item;
+                    } 
+                })
+            }else if(cartItem.quantity === 1){
+                this.items=this.items.filter((item) =>item.id !== id);
+                this.quantity--;
+                this.total-=cartItem.price;
+            }
+        }
+    });
+});
+
+const rupiah = (number) => {
+    return new Intl.NumberFormat('id-ID', {
+        style : 'currency',
+        currency : 'IDR',
+        minimumFractionDigits:0,
+    }).format(number);
+};
+ 
\ No newline at end of file
diff --git a/Js/script.js b/Js/script.js
index 0da9882..7d5aa0f 100644
--- a/Js/script.js
+++ b/Js/script.js
@@ -1,7 +1,8 @@
 // Tombol ham
 const navbarNav = document.querySelector('.navbar-nav');
 // onclick
-document.querySelector('#hambuger-menu').onclick = ( ) =>{navbarNav.classList.toggle('aktif');
+document.querySelector('#hambuger-menu').onclick = () => {
+  navbarNav.classList.toggle('aktif');
 };
 // deactive
 const hambuger = document.querySelector('#hambuger-menu');
@@ -9,15 +10,15 @@ const sb = document.querySelector('#search-button')
 const sp = document.querySelector('#shopping-cart')
 
 document.addEventListener('click', function (e) {
-    if(!hambuger.contains(e.target)&&!navbarNav.contains(e.target)){
-        navbarNav.classList.remove('aktif');
-    }
-    if(!sb.contains(e.target)&&!searchForm.contains(e.target)){
-       searchForm.classList.remove('aktif');
-    }
-    if(!sp.contains(e.target)&&!spForm.contains(e.target)){
-      spForm.classList.remove('aktif');
-    }
+  if (!hambuger.contains(e.target) && !navbarNav.contains(e.target)) {
+    navbarNav.classList.remove('aktif');
+  }
+  if (!sb.contains(e.target) && !searchForm.contains(e.target)) {
+    searchForm.classList.remove('aktif');
+  }
+  if (!sp.contains(e.target) && !spForm.contains(e.target)) {
+    spForm.classList.remove('aktif');
+  }
 });
 
 
@@ -31,6 +32,14 @@ document.getElementById('exit').addEventListener('click', () => {
   document.getElementById('user-login').classList.add('hide')
 })
 
+// document.getElementById('cta').addEventListener('click', () => {
+//   document.getElementById('modul-buy').classList.remove('hide')
+// })
+
+// document.getElementById('exit2').addEventListener('click', () => {
+//   document.getElementById('modul-buy').classList.add('hide')
+// })
+
 // LOGIN
 
 
@@ -66,50 +75,56 @@ let dots = document.querySelectorAll('.slider .dots li');
 
 let lengthItems = items.length - 1;
 let active = 0;
-next.onclick = function(){
-    active = active + 1 <= lengthItems ? active + 1 : 0;
-    reloadSlider();
+next.click = function () {
+  active = active + 1 <= lengthItems ? active + 1 : 0;
+  reloadSlider();
 }
-prev.onclick = function(){
-    active = active - 1 >= 0 ? active - 1 : lengthItems;
-    reloadSlider();
+prev.click = function () {
+  active = active - 1 >= 0 ? active - 1 : lengthItems;
+  reloadSlider();
 }
-let refreshInterval = setInterval(()=> {next.click()}, 5000);
-function reloadSlider(){
-    slider.style.left = -items[active].offsetLeft + 'px';
-    // 
-    let last_active_dot = document.querySelector('.slider .dots li.active');
-    last_active_dot.classList.remove('active');
-    dots[active].classList.add('active');
-
-    clearInterval(refreshInterval);
-    refreshInterval = setInterval(()=> {next.click()}, 5000);
-
-    
+let refreshInterval = setInterval(() => { next.click() }, 5000);
+function reloadSlider() {
+  slider.style.left = -items[active].offsetLeft + 'px';
+  // 
+  let last_active_dot = document.querySelector('.slider .dots li.active');
+  last_active_dot.classList.remove('active');
+  dots[active].classList.add('active');
+
+  clearInterval(refreshInterval);
+  refreshInterval = setInterval(() => { next.click() }, 5000);
+
+
 }
 
 dots.forEach((li, key) => {
-    li.addEventListener('click', ()=>{
-         active = key;
-         reloadSlider();
-    })
-})
-window.onresize = function(event) {
+  li.addEventListener('click', () => {
+    active = key;
     reloadSlider();
+  })
+})
+window.onresize = function (event) {
+  reloadSlider();
 };
 
 
 
 
 /*=============== SWIPER JS ===============*/
-var swiper = new Swiper(".slide-container", {
+let swiper = new Swiper(".slide-container", {
   slidesPerView: 4,
+  
   spaceBetween: 20,
   sliderPerGroup: 4,
   loop: true,
   centerSlide: "true",
   fade: "true",
-  grabCursor: "true",
+
+  autoplay: {
+    delay: 2500,
+    disableOnInteraction: false,
+  },
+
   pagination: {
     el: ".swiper-pagination",
     clickable: true,
@@ -135,3 +150,20 @@ var swiper = new Swiper(".slide-container", {
     },
   },
 });
+
+// let home = document.getElementById('home')
+// let navbar = document.querySelector('.navbar');
+
+// window.addEventListener('scroll', () => {
+//   let scrollTop = window.scrollY;
+//   console.log(scrollTop)
+
+//   if(scrollTop >= home.offsetTop) {
+//     console.log('udh di bawah banh')
+//     navbar.classList.add("hide");
+//   }
+//   if(scrollTop <= home.offsetTop) {
+//     console.log('ini di atas')
+//     navbar.classList.remove("hide");
+//   }
+// })
\ No newline at end of file
diff --git a/asset/Skadi.jpg b/asset/Skadi.jpg
deleted file mode 100644
index 35704f4..0000000
Binary files a/asset/Skadi.jpg and /dev/null differ
diff --git a/asset/menu.svg b/asset/menu.svg
deleted file mode 100644
index 4e68ac2..0000000
--- a/asset/menu.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
\ No newline at end of file
diff --git a/asset/search.svg b/asset/search.svg
deleted file mode 100644
index 55be0ff..0000000
--- a/asset/search.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
\ No newline at end of file
diff --git a/asset/shopping-cart.svg b/asset/shopping-cart.svg
deleted file mode 100644
index 1934ffb..0000000
--- a/asset/shopping-cart.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shopping-cart"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>
\ No newline at end of file
diff --git a/asset/staf.jpg b/asset/staf.jpg
deleted file mode 100644
index f680f2c..0000000
Binary files a/asset/staf.jpg and /dev/null differ
diff --git a/asset/trash.svg b/asset/trash.svg
deleted file mode 100644
index 080d02c..0000000
--- a/asset/trash.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>
\ No newline at end of file
diff --git a/asset/user.svg b/asset/user.svg
deleted file mode 100644
index 5d958ee..0000000
--- a/asset/user.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
index 9dc76c8..9157e42 100644
--- a/css/style.css
+++ b/css/style.css
@@ -90,13 +90,13 @@ body{
 
 
 /* icon */
-.navbar .navbar-extra img{
+.navbar .navbar-extra svg{
     color: #fff;
     margin: 0 0.5rem;
 }
 
-.navbar .navbar-extra img:hover{
-    color: var(--primary);
+.navbar .navbar-extra svg:hover{
+    stroke: var(--primary);
 }
 
 
@@ -139,6 +139,18 @@ body{
   color: #010101;
 }
 
+.quantity-notify{
+  color: var(--bg);
+  background-color:var(--primary);
+  padding: 0px 5px;
+  margin:0;
+  border-radius:5px;
+  display:inline-block;
+  margin-left:-1.5rem;
+  position:absolute;
+  font-size:0.9rem
+}
+
 .shopping-cart{
   position: absolute;
   top: 100%;
@@ -162,8 +174,7 @@ body{
 }
 
 .shopping-cart h3{
-  font-size: 1.6rem;
-  padding-bottom: 0.5;
+  font-size: 1.4rem;
 }
 
 .shopping-cart .item-price{
@@ -177,7 +188,7 @@ body{
 }
 
 .shopping-cart img{
-  height: 5rem;
+  height: 4rem;
   border-radius: 10%;
   border: #010101 1px solid;
 }
@@ -185,9 +196,21 @@ body{
 .navbar .shopping-cart.aktif{
   right: 0;
 }
-
+.shopping-cart .cart-item #add,
+.shopping-cart .cart-item #remove{
+  display: inline-block;
+  padding: 2px 5px;
+  cursor:pointer;
+  margin:0 8px;
+  background: var(--bg);
+  color:white;
+  font-weight:bold;
+  font-size:1.1rem;
+}
 
 /* LOGIN */
+
+
 .user-login{
   position: absolute;
   display: inline-block;
@@ -200,7 +223,7 @@ body{
   display: none;
 }
 
-.user-login span{
+.x{
   color: #000000;
   cursor: pointer;
   position: absolute;
@@ -212,19 +235,24 @@ body{
 .user-login .login{
   background-color: rgba(255, 255, 255, 0.3);
   width: 30rem;
-  height: 30rem;
   font-size: 15px;
   color: #010101;
-  border-radius: 5px;
+  backdrop-filter: blur(10px);
+  border-radius: 10px;
+}
+.show{
+  display:inline;
+}
+.hide{
+  display:none;
 }
-
 .user-login .login form{
-  padding-left: 3rem;
+  margin:0 auto;
   width: 300px;
 }
 
 .user-login .login form input{
-  width: 268px;
+  width: 300px;
   height: 25px;
   border-radius: 5px;
   margin-bottom: 8px;
@@ -240,10 +268,14 @@ body{
   opacity: 0.8;
 }
 
+.lupa{
+  display:flex;
+  padding-bottom: 10%;
+  justify-content:space-between;
+}
+
 .user-login .login a{
-  display: inline;
-  margin-left: 3rem;
-  color: #ffff;
+  color: #010101;
   cursor: pointer;
   font-size: 14px;
 }
@@ -354,7 +386,6 @@ body{
 }
 /* home */
 
-
 /* About */
 
 .about, .shop, .manga, footer{
@@ -429,6 +460,49 @@ body{
 .slider .dots li.active{
   width: 30px;
 }
+.seemore{
+  color:aliceblue;
+}
+.seemore:hover{
+  color:var(--primary)
+}
+.wak{
+  padding-top: 100%;
+  text-align:center;
+}
+.dasar{
+  background-color:rgb(30, 50, 72);
+  border-radius:8px;
+  width: 100%;
+}
+.dasar .ds1{
+  display:flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.dasar .ds1 .isi{
+  margin:2rem 10px;
+  width:10rem;
+}
+.dasar .ds1 .isi img {
+  height: auto;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  width: 100%;
+  border-radius: 4px;
+}
+.dasar .ds1 .isi h1:hover{
+  text-decoration-line:underline;
+  color:var(--primary);
+  cursor:pointer;
+}
+.dasar .ds1 .isi .stok{
+  background-color:red;
+  width:3rem;
+  height:1rem;
+}
+.dasar .ds1 .isi p{
+  color:#a3a3a3;
+}
 /* About */
 
 
@@ -450,8 +524,8 @@ body{
   padding: 60px 0;
 }
 .slide-container {
-  margin: 0 30px;
-  overflow: hidden;
+  margin: 0 100px;
+
 }
 .kartu {
   background: rgb(30, 50, 72);
@@ -506,7 +580,7 @@ body{
 /* Manga */
 .manga .row{
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(20rem, 3fr));
   gap: 1.5rem;
   justify-content: center;
   margin-top: 4rem;
@@ -517,7 +591,6 @@ body{
   border: 1px solid #666;
   border-radius: 6px;
   padding: 2rem;
-  margin: auto;
 }
 
 .manga .row .card .judul a{
@@ -527,10 +600,6 @@ body{
   opacity: 0.5;
 }
 
-.manga .row .card .gambar{
-  padding: 1rem 0;
-}
-
 .manga .row .card .gambar img{
   height: 25rem;
 }
@@ -583,7 +652,7 @@ li a:hover{
   width: 54px;
 }
 .contact__payment ul {
- width: 56px;
+  width: 56px;
 /* background-color: #fff; */
 display: inline;
 justify-content: center;
@@ -602,31 +671,56 @@ align-items: center;
 }
 
 /* .copyright span{
- padding-top: 2rem;
+  padding-top: 2rem;
 } */
 
 /* queries */
 
+.modul-buy{
+  background-color: #3c4a5f;
+  top: 90%;
+  left: 30%;
+  width: 40rem;
+  position: absolute;
+  display: flex;
+  border-radius:5px;
+  list-style-type: none;
+}
+
+.modul-detail{
+  margin: 3rem;
+}
+.modul-buy img{
+  height: auto;
+  width: 50%;
+  border-top-left-radius: 5px;
+  border-bottom-left-radius: 5px;
+}
 /* laptop */
 @media (max-width:1366px ){
     html {
         font-size: 75%;
-    }
+      }
     .card__container {
       max-width: 1120px;
     }
     
     .swiper-button-prev {
-      left: -1rem;
+      left: -1rem !important;
+      padding-top: 5rem !important;
     }
     .swiper-button-next {
-      right: -1rem;
+      right: -1rem !important;
+      margin-top: 0px !important;
     }
     footer .copyright span{
       float: none;
       display: flex;
     }
+    .modul-buy{
+      left:33%;
 
+    }
     
   }
   
@@ -637,9 +731,14 @@ align-items: center;
         font-size: 62.5%;
       }
       
+      
       #hambuger-menu {
         display: inline-block;
       }
+
+      .uset-login{
+        right: 27%;
+      }
       
     .navbar .navbar-nav {
         position: absolute;
@@ -707,6 +806,9 @@ align-items: center;
         width: 400px;
         height: 227px;
       }
+      .modul-buy{
+       left: 10%;
+      }
 
     }
     
@@ -720,6 +822,44 @@ align-items: center;
     .card__data {
       padding: 1rem;
     }
+  }
     
-    
+    @media (max-width:1090px ){
+      .slider {
+        width: 500px;
+        height: 283px;
+      }
+      .slider .list img{
+        height:auto;
+        width:500px;
+      }
+      .kartu .image-box{
+        height:200px
+      }
+      .dasar .ds1 .isi{
+        width:8rem
+      } 
+}
+@media (max-width:412px){
+  .slider {
+    width: 300px;
+        height: 170px;
+    }
+    .slider .list img {
+      width: 300px;
+      height: auto;
+  }
+  .user-login .login form input
+  {width:100%}
+  .user-login .login form {
+    width:200px
+  }
+  .user-login{
+    left:8rem;
+  }
+  }
+@media(max-height:790px){
+  .modul-buy{
+    top:25rem;
+  }
 }
\ No newline at end of file
diff --git a/css/swiper-bundle.min.css b/css/swiper-bundle.min.css
index 3c93fc4..65e4429 100644
--- a/css/swiper-bundle.min.css
+++ b/css/swiper-bundle.min.css
@@ -10,4 +10,4 @@
  * Released on: January 30, 2023
  */
 
- @font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, 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');font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box}.swiper-android .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-pointer-events{touch-action:pan-y}.swiper-pointer-events.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-3d,.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide,.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0,0,0,.15)}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-horizontal.swiper-css-mode>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-vertical.swiper-css-mode>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-centered>.swiper-wrapper::before{content:'';flex-shrink:0;order:9999}.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}.swiper-virtual .swiper-slide{-webkit-backface-visibility:hidden;transform:translateZ(0)}.swiper-virtual.swiper-css-mode .swiper-wrapper::after{content:'';position:absolute;left:0;top:0;pointer-events:none}.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after{height:1px;width:var(--swiper-virtual-size)}.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after{width:1px;height:var(--swiper-virtual-size)}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next.swiper-button-hidden,.swiper-button-prev.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled .swiper-button-next,.swiper-navigation-disabled .swiper-button-prev{display:none!important}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;font-variant:initial;line-height:1}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:10px;right:auto}.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:10px;left:auto}.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:'next'}.swiper-button-lock{display:none}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none!important}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));display:inline-block;border-radius:50%;background:var(--swiper-pagination-bullet-inactive-color,#000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{right:10px;top:50%;transform:translate3d(0px,-50%,0)}.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0;display:block}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-progressbar{background:rgba(0,0,0,.25);position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:4px;left:0;top:0}.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-vertical>.swiper-pagination-progressbar{width:4px;height:100%;left:0;top:0}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)}.swiper-scrollbar-disabled>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-disabled{display:none!important}.swiper-horizontal>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-horizontal{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-scrollbar.swiper-scrollbar-vertical,.swiper-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-slide-zoomed{cursor:move}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.swiper .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-grid>.swiper-wrapper{flex-wrap:wrap}.swiper-grid-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-fade.swiper-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-fade .swiper-slide-active,.swiper-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube{overflow:visible}.swiper-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-cube.swiper-rtl .swiper-slide{transform-origin:100% 0}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-next,.swiper-cube .swiper-slide-next+.swiper-slide,.swiper-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-cube .swiper-slide-shadow-bottom,.swiper-cube .swiper-slide-shadow-left,.swiper-cube .swiper-slide-shadow-right,.swiper-cube .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0}.swiper-cube .swiper-cube-shadow:before{content:'';background:#000;position:absolute;left:0;top:0;bottom:0;right:0;filter:blur(50px)}.swiper-flip{overflow:visible}.swiper-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-flip .swiper-slide-active,.swiper-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-flip .swiper-slide-shadow-bottom,.swiper-flip .swiper-slide-shadow-left,.swiper-flip .swiper-slide-shadow-right,.swiper-flip .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-creative .swiper-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}.swiper-cards{overflow:visible}.swiper-cards .swiper-slide{transform-origin:center bottom;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden}
\ No newline at end of file
+ @font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, 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');font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box}.swiper-android .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-pointer-events{touch-action:pan-y}.swiper-pointer-events.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-3d,.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide,.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0,0,0,.15)}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-horizontal.swiper-css-mode>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-vertical.swiper-css-mode>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-centered>.swiper-wrapper::before{content:'';flex-shrink:0;order:9999}.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}.swiper-virtual .swiper-slide{-webkit-backface-visibility:hidden;transform:translateZ(0)}.swiper-virtual.swiper-css-mode .swiper-wrapper::after{content:'';position:absolute;left:0;top:0;pointer-events:none}.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after{height:1px;width:var(--swiper-virtual-size)}.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after{width:1px;height:var(--swiper-virtual-size)}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next.swiper-button-hidden,.swiper-button-prev.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled .swiper-button-next,.swiper-navigation-disabled .swiper-button-prev{display:none!important}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;font-variant:initial;line-height:1}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:10px;right:auto}.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:10px;left:auto}.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:'next'}.swiper-button-lock{display:none}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none!important}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));display:inline-block;border-radius:50%;background:var(--swiper-pagination-bullet-inactive-color,#000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{right:10px;top:50%;transform:translate3d(0px,-50%,0)}.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0;display:block}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-progressbar{background:rgba(0,0,0,.25);position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:4px;left:0;top:0}.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-vertical>.swiper-pagination-progressbar{width:4px;height:100%;left:0;top:0}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)}.swiper-scrollbar-disabled>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-disabled{display:none!important}.swiper-horizontal>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-horizontal{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-scrollbar.swiper-scrollbar-vertical,.swiper-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-slide-zoomed{cursor:move}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.swiper .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-grid>.swiper-wrapper{flex-wrap:wrap}.swiper-grid-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-fade.swiper-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-fade .swiper-slide-active,.swiper-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube{overflow:visible}.swiper-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-cube.swiper-rtl .swiper-slide{transform-origin:100% 0}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-next,.swiper-cube .swiper-slide-next+.swiper-slide,.swiper-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-cube .swiper-slide-shadow-bottom,.swiper-cube .swiper-slide-shadow-left,.swiper-cube .swiper-slide-shadow-right,.swiper-cube .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0}.swiper-cube .swiper-cube-shadow:before{content:'';background:#000;position:absolute;left:0;top:0;bottom:0;right:0;filter:blur(50px)}.swiper-flip{overflow:visible}.swiper-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-flip .swiper-slide-active,.swiper-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-flip .swiper-slide-shadow-bottom,.swiper-flip .swiper-slide-shadow-left,.swiper-flip .swiper-slide-shadow-right,.swiper-flip .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-creative .swiper-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}.swiper-cards{overflow:visible}.swiper-cards .swiper-slide{transform-origin:center bottom;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden}
\ No newline at end of file
diff --git a/index.html b/index.html
index ac857dd..3b7b6e3 100644
--- a/index.html
+++ b/index.html
@@ -3,17 +3,12 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <!--=============== REMIXICONS ===============-->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/3.5.0/remixicon.css" crossorigin="">
     <!--=============== SWIPER CSS ===============-->
     <link rel="stylesheet" href="css/swiper-bundle.min.css">
-
     <!-- fonts -->
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,200&family=Poppins:ital,wght@0,300;0,400;0,700;1,100;1,300;1,400;1,700&family=Roboto+Slab:wght@300&display=swap" rel="stylesheet">
-    <!-- Feather -->
-    <script src="https://unpkg.com/feather-icons"></script>
     <!-- CSS -->
     <link rel="stylesheet" href="css/style.css">
     <title>Eden-Shop</title>
@@ -22,66 +17,95 @@
 </head>
 <body>
     <!-- Nav -->
-    <nav class="navbar">
+    <nav class="navbar" x-data='manga'>
         <img src="asset/Logo.png" alt="" class="logo">
         <a href="" class="navbar-logo"><span>Eden</span>Shop.</a>
 
         <div class="navbar-nav">
             <a href="#">Home</a>
             <a href="#about">Whats New?</a>
-            <a href="#af">Action Figure</a>
+            <a href="#af">Shop</a>
             <a href="#manga">Manga</a>
         </div>
 
         <div class="navbar-extra">
-            <a href="#"id="search-button"><img src="asset/search.svg" alt=""></a>
-            <a href="#"id="shopping-cart"><img src="asset/shopping-cart.svg" alt=""></a>
-            <a href="#"id="hambuger-menu"><img src="asset/menu.svg" alt=""></a>
-            <a href="#" id="user"><img src="asset/user.svg" alt="" ></a>
+            <a href="#"id="search-button">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+            </a>
+            <a href="#"id="shopping-cart">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shopping-cart"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>
+            <span class="quantity-notify" x-show="$store.cart.quantity" x-text="$store.cart.quantity"></span></a>
+            <a href="#" id="user"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg></a>
+            <a href="#"id="hambuger-menu"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg></a>
         </div>
 
 
         <div class="search-form">
          <input type="search" id="search-box" placeholder="Search">
-         <label for="search-box"><img src="asset/search.svg" alt=""></i></label>
+         <label for="search-box"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+         </i></label>
       </div>
       
     <div class="shopping-cart">
+      <template x-for="(item, index) in $store.cart.items" x-keys="index">
       <div class="cart-item">
-        <img src="asset/manga9.jpg" alt="">
+        <img :src="`asset/${item.img}`" :alt="item.name">
         <div class="item-detail">
-          <h4>Skip to Loafer</h4>
-          <div class="item-price"><p>IDR 99.900</div>
+          <h4 x-text="item.name"></h4>
+          <div class="item-price">
+            <span x-text="rupiah(item.price)"></span>&times;
+            <button id="remove" @click="$store.cart.remove(item.id)">&minus;</button>
+            <span x-text="item.quantity"></span>
+            <button id="add" @click="$store.cart.add(item)">&plus;</button>&equals;
+            <span x-text="rupiah(item.total)"></span>
+          </div>
         </div>
-        <img src="asset/trash.svg" alt="" class="del-item">
       </div>
+    </template>
+    <h1 class="wak" x-show="!$store.cart.items.length">Pesananmu Masih Kosong Nih</h1>
+    <h1 class="wak" x-show="$store.cart.items.length">Total : <span x-text="rupiah($store.cart.total)"></span></h1>
     </div>
 
-<!-- LOGIN -->
+    <!-- LOGIN -->
     <div class="user-login hide" id="user-login">
-      <span><img src="asset/x.svg" alt="" id="exit" ></span>
       <div class="login">
+        <span class="x"><img src="asset/x.svg" alt="" id="exit" ></span>
         <h1 style="text-align: center; padding:4rem 0rem;">Login</h1>
         <form action="" style="align-items: center;">
-          <label for="email">Email/Username</label><br>
+          <label for="email">Email/Username</labefl><br>
           <input type="text" id="email" name="email"><br>
           <label for="email">Password</label><br>
           <input type="password" id="Password" name="Password" ><br>
           <input type="button" value="Login" id="login-btn">
         </form>
+        <div class="lupa">
         <a href="">Forgot Password</a>
         <a href="">Create Account</a>
       </div>
+      </div>
     </div>
     <!-- LOGIN -->
-
+    
+    <!-- <article class="modul-buy hide">
+      <span class="x"><img src="asset/x.svg" alt="" id="exit2" ></span>
+      <img src="asset/Nian.jpg" alt="">
+      <div class="modul-detail">
+        <h1>Nian</h1>
+        <ul>
+          <li>Series : </li>
+          <li>Category :</li>
+          <li>Price</li>
+        </ul>
+        <a href="" class="cta"><span>Buy</span></a>
+      </div>
+    </article> -->
     </nav>
     <!-- nav end-->
 
 
 <!-- hero -->
 <section class="hero" id="home">
-    <main class="content">
+   <main class="content">
         <h1><Span>Eden</Span>-Shop</h1>
         <p>A Paradise Only for YOU!</p>
         <a href="#af" class="cta"><span>Buy Now</span></a>
@@ -93,7 +117,7 @@ <h1><Span>Eden</Span>-Shop</h1>
 
 <!-- about -->
 <section class="about" id="about">
-    <h2>New</h2>    
+    <h2>New Series</h2>    
     <div class="slider">
       <div class="list">
           <div class="item">
@@ -127,17 +151,16 @@ <h2>New</h2>
 </section>
 <!-- about end -->
 
-
-
-
 <!-- shop -->
 <section class="shop" id="af">
     <h2>Shop</h2>
     <!-- Scale Figure -->
     <div class="container swiper">
-      <h1 style="font-weight: bold; font-size:3rem; padding-left:2.5rem;">
-         Scaled Figure
-      </h1>
+      <div style=" padding-left:2.5rem; margin: 3rem 0rem; justify-content: space-between;
+    align-items: center; display:flex; ">
+  <h1 style="font-weight: bold; font-size:3rem;">Most Liked</h1>
+  <a href="" class="seemore">See More-></a>
+</div>
       <div class="slide-container">
         <div class="card-wrapper swiper-wrapper">
           <div class="kartu swiper-slide">
@@ -212,395 +235,73 @@ <h4 class="job">IDR 999.999,00</h4>
       <div class="swiper-button-prev swiper-navBtn"></div>
       <div class="swiper-pagination"></div>
     </div>
-    <!-- Nendroid -->
-    <div class="container swiper">
-      <h1 style="font-weight: bold; font-size:3rem; padding-left:2.5rem;">
-         Nendoroid
-      </h1>
-      <div class="slide-container">
-        <div class="card-wrapper swiper-wrapper">
-          <div class="kartu swiper-slide">
-            <div class="image-box">
-              <img src="asset/miku.jpg" alt="" />
-            </div>
-            <div class="profile-details">
-              <div class="name-job">
-                <a href="#" class="name">Nendroid Unyu Miku</a href="#">
-                <h4 class="job">IDR 999.999,00</h4>
-              </div>
-            </div>
-         </div>
-          <div class="kartu swiper-slide">
-            <div class="image-box">
-              <img src="asset/miku.jpg" alt="" />
-            </div>
-            <div class="profile-details">
-              <div class="name-job">
-                <a href="#" class="name">Nendroid Unyu Miku</a href="#">
-                <h4 class="job">IDR 999.999,00</h4>
-              </div>
-            </div>
-         </div>
-          <div class="kartu swiper-slide">
-            <div class="image-box">
-              <img src="asset/miku.jpg" alt="" />
-            </div>
-            <div class="profile-details">
-              <div class="name-job">
-                <a href="#" class="name">Nendroid Unyu Miku</a href="#">
-                <h4 class="job">IDR 999.999,00</h4>
-              </div>
-            </div>
-         </div>
-          <div class="kartu swiper-slide">
-            <div class="image-box">
-              <img src="asset/miku.jpg" alt="" />
-            </div>
-            <div class="profile-details">
-              <div class="name-job">
-                <a href="#" class="name">Nendroid Unyu Miku</a href="#">
-                <h4 class="job">IDR 999.999,00</h4>
-              </div>
-            </div>
-         </div>
-          <div class="kartu swiper-slide">
-            <div class="image-box">
-              <img src="asset/miku.jpg" alt="" />
-            </div>
-            <div class="profile-details">
-              <div class="name-job">
-                <a href="#" class="name">Nendroid Unyu Miku</a href="#">
-                <h4 class="job">IDR 999.999,00</h4>
-              </div>
-            </div>
-         </div>
-          <div class="kartu swiper-slide">
-            <div class="image-box">
-              <img src="asset/miku.jpg" alt="" />
-            </div>
-            <div class="profile-details">
-              <div class="name-job">
-                <a href="#" class="name">Nendroid Unyu Miku</a href="#">
-                <h4 class="job">IDR 999.999,00</h4>
-              </div>
-            </div>
-         </div>
-        </div>
-      </div>
-      <div class="swiper-button-next swiper-navBtn"></div>
-      <div class="swiper-button-prev swiper-navBtn"></div>
-      <div class="swiper-pagination"></div>
-    </div>
-    <!-- Modelkit -->
-    <div class="container swiper">
-       <h1 style="font-weight: bold; font-size:3rem; padding-left:2.5rem;">
-          Model Kit
-         </h1>
-         <div class="slide-container">
-        <div class="card-wrapper swiper-wrapper">
-          <div class="kartu swiper-slide">
-            <div class="image-box">
-               <img src="asset/gundam.jpg" alt="" />
-            </div>
-            <div class="profile-details">
-               <div class="name-job">
-                <a href="#" class="name">MG1/100 "Freedom Gundam Tengan Kujaku"</a href="#">
-                  <h4 class="job">IDR 999.999,00</h4>
-              </div>
-            </div>
-         </div>
-         <div class="kartu swiper-slide">
-            <div class="image-box">
-               <img src="asset/gundam.jpg" alt="" />
-            </div>
-            <div class="profile-details">
-               <div class="name-job">
-                <a href="#" class="name">MG1/100 "Freedom Gundam Tengan Kujaku"</a href="#">
-                <h4 class="job">IDR 999.999,00</h4>
-              </div>
-            </div>
-         </div>
-         <div class="kartu swiper-slide">
-            <div class="image-box">
-               <img src="asset/gundam.jpg" alt="" />
-            </div>
-            <div class="profile-details">
-               <div class="name-job">
-                <a href="#" class="name">MG1/100 "Freedom Gundam Tengan Kujaku"</a href="#">
-                  <h4 class="job">IDR 999.999,00</h4>
-              </div>
-            </div>
-         </div>
-         <div class="kartu swiper-slide">
-            <div class="image-box">
-               <img src="asset/gundam.jpg" alt="" />
-            </div>
-            <div class="profile-details">
-               <div class="name-job">
-                <a href="#" class="name">MG1/100 "Freedom Gundam Tengan Kujaku"</a href="#">
-                <h4 class="job">IDR 999.999,00</h4>
-              </div>
-            </div>
-         </div>
-          <div class="kartu swiper-slide">
-             <div class="image-box">
-              <img src="asset/gundam.jpg" alt="" />
-            </div>
-            <div class="profile-details">
-               <div class="name-job">
-                <a href="#" class="name">MG1/100 "Freedom Gundam Tengan Kujaku"</a href="#">
-                  <h4 class="job">IDR 999.999,00</h4>
-              </div>
-            </div>
-         </div>
-         <div class="kartu swiper-slide">
-            <div class="image-box">
-               <img src="asset/gundam.jpg" alt="" />
-            </div>
-            <div class="profile-details">
-               <div class="name-job">
-                <a href="#" class="name">MG1/100 "Freedom Gundam Tengan Kujaku"</a href="#">
-                  <h4 class="job">IDR 999.999,00</h4>
-              </div>
-            </div>
-         </div>
-         <div class="kartu swiper-slide">
-            <div class="image-box">
-               <img src="asset/gundam.jpg" alt="" />
-            </div>
-            <div class="profile-details">
-               <div class="name-job">
-                <a href="#" class="name">MG1/100 "Freedom Gundam Tengan Kujaku"</a href="#">
-                  <h4 class="job">IDR 999.999,00</h4>
-              </div>
-            </div>
-         </div>
-      </div>
-      </div>
-      <div class="swiper-button-next swiper-navBtn"></div>
-      <div class="swiper-button-prev swiper-navBtn"></div>
-      <div class="swiper-pagination"></div>
-   </div>
-   <!-- Merchand -->
-   <div class="container swiper">
-     <h1 style="font-weight: bold; font-size:3rem; padding-left:2.5rem;">
-       Merchand
-     </h1>
-     <div class="slide-container">
-       <div class="card-wrapper swiper-wrapper">
-         <div class="kartu swiper-slide">
-           <div class="image-box">
-             <img src="asset/staf.jpg" alt="" />
-           </div>
-           <div class="profile-details">
-             <div class="name-job">
-               <a href="#" class="name">Puella Magi Madoka Magica the Movie: Earphone Jack Accessories</a href="#">
-               <h4 class="job">IDR 999.999,00</h4>
-             </div>
-           </div>
-        </div>
-         <div class="kartu swiper-slide">
-           <div class="image-box">
-             <img src="asset/staf.jpg" alt="" />
-           </div>
-           <div class="profile-details">
-             <div class="name-job">
-               <a href="#" class="name">Puella Magi Madoka Magica the Movie: Earphone Jack Accessories</a href="#">
-               <h4 class="job">IDR 999.999,00</h4>
-             </div>
-           </div>
-        </div>
-         <div class="kartu swiper-slide">
-           <div class="image-box">
-             <img src="asset/staf.jpg" alt="" />
-           </div>
-           <div class="profile-details">
-             <div class="name-job">
-               <a href="#" class="name">Puella Magi Madoka Magica the Movie: Earphone Jack Accessories</a href="#">
-               <h4 class="job">IDR 999.999,00</h4>
-             </div>
-           </div>
-        </div>
-         <div class="kartu swiper-slide">
-           <div class="image-box">
-             <img src="asset/staf.jpg" alt="" />
-           </div>
-           <div class="profile-details">
-             <div class="name-job">
-               <a href="#" class="name">Puella Magi Madoka Magica the Movie: Earphone Jack Accessories</a href="#">
-               <h4 class="job">IDR 999.999,00</h4>
-             </div>
-           </div>
-        </div>
-         <div class="kartu swiper-slide">
-           <div class="image-box">
-             <img src="asset/staf.jpg" alt="" />
-           </div>
-           <div class="profile-details">
-             <div class="name-job">
-               <a href="#" class="name">Puella Magi Madoka Magica the Movie: Earphone Jack Accessories</a href="#">
-               <h4 class="job">IDR 999.999,00</h4>
-             </div>
-           </div>
-        </div>
-         <div class="kartu swiper-slide">
-           <div class="image-box">
-             <img src="asset/staf.jpg" alt="" />
-           </div>
-           <div class="profile-details">
-             <div class="name-job">
-               <a href="#" class="name">Puella Magi Madoka Magica the Movie: Earphone Jack Accessories</a href="#">
-               <h4 class="job">IDR 999.999,00</h4>
-             </div>
-           </div>
-        </div>
-         <div class="kartu swiper-slide">
-           <div class="image-box">
-             <img src="asset/staf.jpg" alt="" />
-           </div>
-           <div class="profile-details">
-             <div class="name-job">
-               <a href="#" class="name">Puella Magi Madoka Magica the Movie: Earphone Jack Accessories</a href="#">
-               <h4 class="job">IDR 999.999,00</h4>
-             </div>
-           </div>
-        </div>
-       </div>
-     </div>
-     <div class="swiper-button-next swiper-navBtn"></div>
-     <div class="swiper-button-prev swiper-navBtn"></div>
-     <div class="swiper-pagination"></div>
-   </div>
+
     
-</section>
-<!-- Shop -->
+<div style=" padding-left:2.5rem; margin: 3rem 0rem; justify-content: space-between;
+    align-items: center; display:flex; ">
+  <h1 style="font-weight: bold; font-size:3rem;">Pre-Order</h1>
+  <a href="" class="seemore">See More-></a>
+</div>
 
+<div class="dasar">
+  <div class="ds1">
+    <div class="isi">
+    <img src="./asset/miku.jpg" alt="">
+    <h1>Miku Dayo</h1>
+    <p>Rp. 900.000</p>
+  </div>
+  <div class="isi">
+    <img src="./asset/miku.jpg" alt="">
+    <h1>Miku Dayo</h1>
+    <p>Rp. 900.000</p>
+  </div>
+  <div class="isi">
+    <img src="./asset/miku.jpg" alt="">
+    <h1>Miku Dayo</h1>
+    <p>Rp. 900.000</p>
+  </div>
+  <div class="isi">
+    <img src="./asset/miku.jpg" alt="">
+    <h1>Miku Dayo</h1>
+    <p>Rp. 900.000</p>
+  </div>
+  <div class="isi">
+    <img src="./asset/miku.jpg" alt="">
+    <h1>Miku Dayo</h1>
+    <p>Rp. 900.000</p>
+  </div>
+  <div class="isi">
+    <img src="./asset/miku.jpg" alt="">
+    <h1>Miku Dayo</h1>
+    <p>Rp. 900.000</p>
+  </div>
+  </div> 
+</div>
 
+  </section>
+<!-- Shop -->
 
 
 <!--manga -->
-
-<section class="manga" id="manga">
-   <h2>Manga</h2>
+<section class="manga" id="manga" x-data="manga">
+   <h2>Newest Items</h2>
    
    <div class="row">
+    <template x-for="(item, index) in items" x-key="index">
       <div class="card">
          <div class="gambar">
-            <img src="asset/manga1.jpg" alt="">
-         </div>
-         <div class="judul">
-            <a href="#">Jujutsu Kaisen</a>
-         </div>
-         <div class="harga">IDK 99.900
-         </div>
-         <div>
-            <a href="#" class="cta"><span>Buy Now</span></a>
-         </div>
-      </div>
-      <div class="card">
-         <div class="gambar">
-            <img src="asset/manga2.jpg" alt="">
+            <img :src="`./asset/${item.img}`" :alt="item.name">
          </div>
-         <div class="judul">
-            <a href="#">Spotlight</a>
+         <div class="name">
+            <a x-text="item.name"></a>
          </div>
-         <div class="harga">IDK 99.900
+         <div class="price" x-text="rupiah(item.price)">
          </div>
          <div>
-            <a href="#" class="cta"><span>Buy Now</span></a>
-         </div>
-      </div>
-      <div class="card">
-         <div class="gambar">
-            <img src="asset/manga3.jpg" alt="">
-         </div>
-         <div class="judul">
-            <a href="#">Boku no Hero Academia</a>
-         </div>
-         <div class="harga">IDK 99.900
-         </div>
-         <div>
-            <a href="#" class="cta"><span>Buy Now</span></a>
-         </div>
-      </div>
-      <div class="card">
-         <div class="gambar">
-            <img src="asset/manga4.jpg" alt="">
-         </div>
-         <div class="judul">
-            <a href="#">Horimya</a>
-         </div>
-         <div class="harga">IDK 99.900
-         </div>
-         <div>
-            <a href="#" class="cta"><span>Buy Now</span></a>
-         </div>
-      </div>
-      <div class="card">
-         <div class="gambar">
-            <img src="asset/manga5.jpg" alt="">
-         </div>
-         <div class="judul">
-            <a href="#">Goodnight Punpun</a>
-         </div>
-         <div class="harga">IDK 99.900
-         </div>
-         <div>
-            <a href="#" class="cta"><span>Buy Now</span></a>
-         </div>
-      </div>
-      <div class="card">
-         <div class="gambar">
-            <img src="asset/manga6.jpg" alt="">
-         </div>
-         <div class="judul">
-            <a href="#">The Promised Neverland</a>
-         </div>
-         <div class="harga">IDK 99.900
-         </div>
-         <div>
-            <a href="#" class="cta"><span>Buy Now</span></a>
-         </div>
-      </div>
-      <div class="card">
-         <div class="gambar">
-            <img src="asset/manga7.jpg" alt="">
-         </div>
-         <div class="judul">
-            <a href="#">Sakamoto Days</a>
-         </div>
-         <div class="harga">IDK 99.900
-         </div>
-         <div>
-            <a href="#" class="cta"><span>Buy Now</span></a>
-         </div>
-      </div>
-      <div class="card">
-         <div class="gambar">
-            <img src="asset/manga8.jpg" alt="">
-         </div>
-         <div class="judul">
-            <a href="#">Chainsawman</a>
-         </div>
-         <div class="harga">IDK 99.900
-         </div>
-         <div>
-            <a href="#" class="cta"><span>Buy Now</span></a>
-         </div>
-      </div>
-      <div class="card">
-         <div class="gambar">
-            <img src="asset/manga9.jpg" alt="">
-         </div>
-         <div class="judul">
-            <a href="#">Skip to Loafer</a>
-         </div>
-         <div class="harga">IDK 99.900
-         </div>
-         <div>
-            <a href="#" class="cta"><span>Buy Now</span></a>
+            <a href="#" class="cta" @click.prevent="$store.cart.add(item)"><span>Buy Now</span></a>
          </div>
       </div>
+    </template>
    </div>
 </section>
 <!--manga -->
@@ -665,21 +366,20 @@ <h4>Interact with Eden</h4>
       </div>
       <div class="copyright">
       <span class="tagline" style="float: left;">Ayo cintai hobimu bareng Eden!</span>
-      <span class="copy" style="float: right;">© 2023 Andika Syarrell Irawan / PT. Jaya Makmur</span>
+      <span class="copy" style="float: right;">© 2023 0rca / PT. Jaya Makmur</span>
       </div>
 </footer>
 <!-- Footer -->
 
 
 
-<!-- Feather -->
-<script>
-        feather.replace();
-      </script>
-
       <!-- SwiperJs -->
       <script src="js/swiper-bundle.min.js"></script>
       
+      <!-- Alpine -->
+      <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>>
+      <script src="js/alpine.js"></script>
+
       <!-- js -->
       <script src="js/script.js"></script>