feat: use toast instead of alert

app/components/ui-lib.module.scss

@@ -63,6 +63,7 @@
   background-color: var(--white);
   border-radius: 12px;
   width: 50vw;
+  animation: slide-in ease 0.3s;
 
   --modal-padding: 20px;
 
@@ -111,6 +112,43 @@
   }
 }
 
+.show {
+  opacity: 1;
+  transition: all ease 0.3s;
+  transform: translateY(0);
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  animation: slide-in ease 0.6s;
+  z-index: 99999;
+}
+
+.hide {
+  opacity: 0;
+  transition: all ease 0.3s;
+  transform: translateY(20px);
+}
+
+.toast-container {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100vw;
+  display: flex;
+  justify-content: center;
+
+  .toast-content {
+    font-size: 14px;
+    background-color: var(--white);
+    box-shadow: var(--card-shadow);
+    border: var(--border-in-light);
+    color: var(--black);
+    padding: 10px 30px;
+    border-radius: 50px;
+    margin-bottom: 20px;
+  }
+}
+
 @media only screen and (max-width: 600px) {
   .modal-container {
     width: 90vw;
@@ -119,4 +157,4 @@
       max-height: 50vh;
     }
   }
-}
+}