style: pricing card (#114)

Author: xuliwenwenwen

pingcap-jp/css/templates/product.scss

@@ -24,13 +24,14 @@
 				display: flex;
 				align-items: center;
 				gap: 12px;
+				margin-bottom: 4px;
 			}
 			&-title {
 				font-size: 22px;
 				font-weight: 700;
 				line-height: 30px;
 				color: #fff;
-				margin-bottom: 4px;
+				margin-top: 0;
 			}
 			p {
 				font-size: 16px;
@@ -103,27 +104,6 @@
 		}
 	}
 
-	.capabilities {
-		.block-media-content__container {
-			h3 {
-				font-size: 24px;
-				line-height: 30px;
-				font-weight: 700;
-				color: #000;
-				@include media-min($medium) {
-					font-size: 5rem;
-					line-height: 66px;
-				}
-			}
-			p {
-				font-size: 22px;
-				font-weight: 300;
-				line-height: 28px;
-				color: #454b51;
-			}
-		}
-	}
-
 	.features {
 		.block-inner,
 		.features-inner {
@@ -184,7 +164,7 @@
 			background-color: #0f5353;
 		}
 		&__title-container {
-			h3 {
+			h2 {
 				font-size: 40px;
 				font-weight: 700;
 				line-height: 48px;
@@ -349,6 +329,7 @@
 				flex-direction: row;
 			}
 			border: 1px solid #f2f2f7;
+			margin-top: 0;
 		}
 		&__card {
 			color: #fff;
@@ -557,7 +538,7 @@
 				}
 			}
 
-			&:nth-of-type(1) {
+			&.cloud {
 				border: 1px solid #9e4ec4;
 				&::after {
 					content: "";
@@ -570,7 +551,7 @@
 					height: 117px;
 				}
 			}
-			&:nth-of-type(2) {
+			&.self-managed {
 				border: 1px solid #2c80ce;
 				&::after {
 					content: "";
@@ -607,6 +588,7 @@
 
 	.edition {
 		.card-text-content {
+			padding: 32px 16px;
 			.button {
 				margin-top: 60px;
 				margin-bottom: 16px;
@@ -619,6 +601,11 @@
 					width: 20px;
 				}
 			}
+			&__title {
+				display: flex;
+				gap: 12px;
+				font-size: 20px;
+			}
 			&:nth-of-type(1) {
 				.card-text-content__title {
 					color: #d454b4;
@@ -628,24 +615,28 @@
 				border-color: #fff;
 				.card-text-content__title {
 					color: #948de2;
-					display: flex;
-					gap: 12px;
-					.tag {
-						background: #000;
-						color: #fff;
-						border: 1px solid #28333e;
-						border-radius: 16px;
-						padding: 0 12px;
-						display: flex;
-						align-items: center;
-					}
 				}
 			}
 			&:nth-of-type(3) {
+				border-color: #2C80CE;
+				.card-text-content__title {
+					color: #509dea;
+				}
+			}
+			&:nth-of-type(4) {
 				.card-text-content__title {
 					color: #79d2d2;
 				}
 			}
+			.tag {
+				background: #000;
+				color: #fff;
+				border: 1px solid #28333e;
+				border-radius: 16px;
+				padding: 0 6px;
+				display: flex;
+				align-items: center;
+			}
 		}
 	}
 }

pingcap-jp/css/templates/tidb.scss

@@ -355,13 +355,12 @@
 			}
 		}
 		&.pricing {
-			@include media-min($large) {
-				--num-cols: 2;
-				gap: 8px;
-			}
-			@include media-min(1300px) {
-				--num-cols: 4;
-				gap: 8px;
+			&.two {
+				margin-top: 16px;
+				@include media-min($medium) {
+					margin-top: 16px;
+					--num-cols: 2;
+				}
 			}
 		}
 		&-item {
@@ -433,24 +432,46 @@
 				height: 100%;
 				justify-content: flex-start;
 				padding: 2.4rem 3rem 3rem;
+				border-color: #28333e;
 				& > div:first-child {
 					flex: 1;
 				}
-				h4 {
+				.tag {
+					background: #000;
+					color: #fff;
+					border: 1px solid #28333e;
+					border-radius: 16px;
+					padding: 0 10px;
+					display: flex;
+					align-items: center;
+					font-size: 12px;
+				}
+				h2 {
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					gap: 8px;
+					white-space: nowrap;
+					color: #fff;
 					margin-top: 1rem;
 					& + * {
 						margin-top: 0.4rem;
 					}
 					@include media-min($medium) {
 						font-size: 20px;
 					}
-				}
-				.tip {
-					display: flex;
-					gap: 4px;
-					align-items: center;
-					justify-content: center;
-					min-height: 25px;
+					&.pink {
+						color: #d454b4;
+					}
+					&.violet {
+						color: #948de2;
+					}
+					&.green {
+						color: #79d2d2;
+					}
+					&.blue {
+						color: #2c80ce;
+					}
 				}
 				ul {
 					& + * {
@@ -471,44 +492,11 @@
 						font-size: 18px;
 					}
 				}
-				&:nth-child(1) {
-					border-color: #28333e;
-					h4 {
-						color: #d454b4;
-					}
-				}
-				&:nth-child(2) {
+				&.border-color-white {
 					border-color: #fff;
-					h4 {
-						color: #948de2;
-						display: flex;
-						align-items: center;
-						justify-content: center;
-						gap: 8px;
-						white-space: nowrap;
-					}
-					.tag {
-						background: #000;
-						color: #fff;
-						border: 1px solid #28333e;
-						border-radius: 16px;
-						padding: 0 10px;
-						display: flex;
-						align-items: center;
-						font-size: 12px;
-					}
-				}
-				&:nth-child(3) {
-					border-color: #28333e;
-					h4 {
-						color: #79d2d2;
-					}
 				}
-				&.row {
-					border-color: #28333e!important;
-					h4 {
-						color: #fff;
-					}
+				&.border-color-blue {
+					border-color: #2c80ce;
 				}
 			}
 			&-bottom {