redisign tokens paytment

2026-03-11 12:21:56 +07:00
parent fa60a79241
commit e8f4f9939f
4 changed files with 151 additions and 36 deletions
@@ -298,6 +298,97 @@
 				}
 			}
 		}
+
+
+		.token-package {
+			background: #f8fafc;
+			border: 2px solid #e2e8f0;
+			border-radius: 16px;
+			padding: 20px;
+			text-align: center;
+			cursor: pointer;
+			transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+			position: relative;
+			overflow: hidden;
+
+			&:hover {
+				transform: translateY(-4px) scale(1.02);
+				border-color: #6366f1;
+				box-shadow: 0 12px 30px rgba(99, 102, 241, 0.2);
+
+				&::before {
+					left: 100%;
+				}
+			}
+
+			&::before {
+				content: '';
+				position: absolute;
+				top: 0;
+				left: -100%;
+				width: 100%;
+				height: 100%;
+				background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.1), transparent);
+				transition: left 0.5s ease;
+			}
+
+			&.selected {
+				border-color: #10b981;
+				background: linear-gradient(135deg, #f0fdf4, #dcfce7);
+				transform: scale(1.05);
+			}
+
+			.token-package-amount {
+				font-size: 1.8rem;
+				font-weight: 700;
+				color: #1e293b;
+				margin-bottom: 6px;
+			}
+
+			.token-package-text {
+				font-size: 0.85rem;
+				color: #64748b;
+				margin-bottom: 8px;
+			}
+
+			.token-package-price {
+				font-size: 1.3rem;
+				font-weight: 600;
+				background: linear-gradient(135deg, #6366f1, #8b5cf6);
+				-webkit-text-fill-color: transparent;
+				background-clip: text;
+				margin-bottom: 8px;
+			}
+
+			.token-package-detail {
+				color: #64748b;
+				font-size: 0.8rem;
+				margin-top: 6px;
+			}
+		}
+
+		.plan-button {
+			width: 100%;
+			max-width: 280px;
+			padding: 12px 18px;
+			border: none;
+			border-radius: 12px;
+			font-size: 0.95rem;
+			font-weight: 600;
+			cursor: pointer;
+			transition: all 0.3s ease;
+			position: relative;
+			overflow: hidden;
+			display: block;
+			margin: 0 auto;
+		}
+
+		.selected-token-info {
+			margin-top: 8px;
+			color: #64748b;
+			font-size: 0.85rem;
+			text-align: center;
+		}
 	}

 	.secure-payments-wrapper {