From cdb7fdd8523bec45daf4ee1c910b2c394ee1e1ed Mon Sep 17 00:00:00 2001
From: xuliwenwenwen <74528885+xuliwenwenwen@users.noreply.github.com>
Date: Mon, 25 Nov 2024 11:46:32 +0800
Subject: [PATCH] feat: operation page (#48)

---
 pingcap-jp/css/blocks/icon-grid.scss    |  17 ++
 pingcap-jp/css/master.scss              |   1 +
 pingcap-jp/css/scaffold/blocks.scss     |  16 +-
 pingcap-jp/css/templates/operation.scss | 249 ++++++++++++++++++++++++
 4 files changed, 277 insertions(+), 6 deletions(-)
 create mode 100644 pingcap-jp/css/templates/operation.scss

diff --git a/pingcap-jp/css/blocks/icon-grid.scss b/pingcap-jp/css/blocks/icon-grid.scss
index bc5b2cf..696f939 100644
--- a/pingcap-jp/css/blocks/icon-grid.scss
+++ b/pingcap-jp/css/blocks/icon-grid.scss
@@ -3,6 +3,14 @@
 		gap: 0;
 	}
 
+	&.block-bg-none {
+		.block-icon-grid__item.wysiwyg {
+			p {
+				color: #5d6974;
+			}
+		}
+	}
+
 	&__item {
 		h5 {
 			color: var(--color-blue-dark);
@@ -11,6 +19,12 @@
 			h3 {
 				margin-top: 0;
 			}
+			p {
+				font-size: 16px;
+				font-weight: 300;
+				line-height: 22px;
+				text-align: left;
+			}
 		}
 	}
 
@@ -39,6 +53,9 @@
 		&--center {
 			.block-icon-grid__item {
 				text-align: center;
+				p {
+					text-align: center;
+				}
 			}
 		}
 	}
diff --git a/pingcap-jp/css/master.scss b/pingcap-jp/css/master.scss
index 476c908..2c8aa2c 100644
--- a/pingcap-jp/css/master.scss
+++ b/pingcap-jp/css/master.scss
@@ -162,3 +162,4 @@ Templates
 @import "templates/product";
 @import "templates/ai";
 @import "templates/trust";
+@import "templates/operation";
\ No newline at end of file
diff --git a/pingcap-jp/css/scaffold/blocks.scss b/pingcap-jp/css/scaffold/blocks.scss
index 185c504..536bb00 100644
--- a/pingcap-jp/css/scaffold/blocks.scss
+++ b/pingcap-jp/css/scaffold/blocks.scss
@@ -204,7 +204,7 @@
 	&__title {
 		text-align: center;
 		@include media-min($medium) {
-			grid-column: 1/span 12;
+			grid-column: 1 / span 12;
 		}
 
 		&-container {
@@ -214,7 +214,7 @@
 			grid-template-columns: repeat(var(--num-cols), 1fr);
 			gap: 3.2rem;
 			padding-bottom: 5rem;
-			
+
 			@include media-min($medium) {
 				--num-cols: 12;
 				gap: var(--grid-column-gutter);
@@ -226,10 +226,10 @@
 			margin-top: -2.4rem;
 			color: var(--body-font-color);
 			@include media-min($medium) {
-				grid-column: 2/span 10;
+				grid-column: 2 / span 10;
 			}
 			@include media-min($large) {
-				grid-column: 3/span 8;
+				grid-column: 3 / span 8;
 			}
 		}
 	}
@@ -250,7 +250,7 @@
 		}
 	}
 	@include media-min(1200px) {
-		width: 60%;
+		width: 62%;
 	}
 	&.full {
 		width: 100%;
@@ -264,12 +264,16 @@
 		text-align: center;
 		margin-left: auto;
 		margin-right: auto;
+		width: 100%;
+		@include media-min(1200px) {
+			width: 80%;
+		}
 		.desc {
 			text-align: center;
 			margin-left: auto;
 			margin-right: auto;
 			@include media-min($medium) {
-				width: 70%;
+				width: 80%;
 			}
 		}
 	}
diff --git a/pingcap-jp/css/templates/operation.scss b/pingcap-jp/css/templates/operation.scss
new file mode 100644
index 0000000..598bb22
--- /dev/null
+++ b/pingcap-jp/css/templates/operation.scss
@@ -0,0 +1,249 @@
+.tmpl-operation {
+	&__banner {
+		background-color: #000;
+		background-size: contain;
+
+		@include media-min($medium) {
+			background-size: cover;
+		}
+		@include media-min($large) {
+			.banner-default__text-content--center {
+				padding-top: 120px;
+				padding-bottom: 200px;
+				grid-column: 3 / span 8;
+			}
+
+			h1 {
+				font-size: 72px;
+				line-height: 86px;
+			}
+		}
+		p {
+			font-weight: 300;
+			text-align: center;
+			color: #a2adb9;
+			margin-left: auto;
+			margin-right: auto;
+			@include media-min($medium) {
+				width: 80%;
+			}
+			@include media-min($large) {
+				font-size: 26px;
+				line-height: 34px;
+				width: 63%;
+			}
+			+ p {
+				margin-top: 36px;
+			}
+		}
+	}
+	&__logo {
+		h2 {
+			font-size: clamp(30px, 3.25vw, 36px);
+		}
+		@include media-min($large) {
+			.block-logos__logo {
+				width: 74%;
+				margin: auto;
+			}
+			.block-logos__logo-grid {
+				grid-template-columns: repeat(5, 1fr);
+			}
+		}
+	}
+	&__icon-grid {
+		@include media-min($large) {
+			.block-icon-grid__item-container {
+				margin: auto;
+				width: 80%;
+			}
+		}
+		.block-icon-grid__item {
+			p {
+				color: #a2adb9;
+			}
+		}
+	}
+	&__feature {
+		.block-inner {
+			@include media-min($large) {
+				display: flex;
+				gap: 64px !important;
+			}
+			.block-section__title-container {
+				flex: 1;
+				display: block;
+				h2 {
+					font-size: 40px;
+					font-weight: 700;
+					line-height: 48px;
+					@include media-min($medium) {
+						font-size: 60px;
+						line-height: 74px;
+						text-align: left;
+					}
+				}
+			}
+			.block-section__title-desc {
+				font-size: 22px;
+				font-weight: 300;
+				line-height: 28px;
+				text-align: left;
+				color: #5d6974;
+				margin-top: 32px;
+			}
+			.block-icon-grid__item-container {
+				flex: 2;
+			}
+		}
+	}
+	&__compare {
+		.block-title {
+			@include media-min($large) {
+				display: flex;
+				gap: 64px;
+				.desc {
+					width: 100%;
+				}
+				> div,
+				h4 {
+					flex: 1;
+				}
+			}
+			h4 {
+				margin-top: 0;
+			}
+		}
+		.table {
+			overflow: hidden;
+			overflow-x: auto;
+			display: flex;
+			.row {
+				color: #fff;
+				flex: 1;
+				min-width: 140px;
+				div {
+					height: 64px;
+					display: flex;
+					align-items: center;
+					font-size: 16px;
+					font-weight: 500;
+					line-height: 22px;
+					text-align: center;
+					justify-content: center;
+					padding: 20px 5px;
+					background: #000;
+					&:nth-of-type(even) {
+						background: #07121a;
+					}
+					&:first-child {
+						height: 68px;
+					}
+				}
+				&:first-child {
+					flex: 1.8;
+					position: sticky;
+					left: 0;
+					z-index: 1;
+					div {
+						font-size: 20px;
+						font-weight: 500;
+						line-height: 22px;
+						text-align: left;
+						justify-content: flex-start;
+					}
+				}
+				&:last-child {
+					border-radius: 6px;
+					border: 2px solid transparent;
+					overflow: hidden;
+					position: relative;
+					div {
+						background: rgba(1, 84, 87);
+						&:nth-of-type(even) {
+							background: #004043;
+						}
+						&::after {
+							content: "";
+							position: absolute;
+							left: 0;
+							top: 0;
+							right: 0;
+							bottom: 2px;
+							border: 2px solid;
+							border-image: linear-gradient(180deg, #18ffc9 0%, #22a62a 100%) 1;
+						}
+					}
+				}
+				.line {
+					position: relative;
+					&:after {
+						content: "";
+						position: absolute;
+						width: 10px;
+						height: 1px;
+						background: #414b52;
+					}
+				}
+			}
+		}
+		.table-tip {
+			color: #a2adb9;
+			font-size: 16px;
+			font-weight: 300;
+			line-height: 22px;
+			text-align: right;
+			margin-top: 20px;
+			@include media-min($medium) {
+				display: none;
+			}
+		}
+	}
+	&__customers {
+		background: linear-gradient(358.26deg, #ffffff 3.54%, #dde2e6 100.25%);
+		.cards {
+			--num-cols: 1;
+
+			display: grid;
+			grid-template-columns: repeat(var(--num-cols), 1fr);
+			gap: var(--grid-column-gutter);
+
+			@include media-min($medium) {
+				--num-cols: 2;
+			}
+
+			@include media-min($large) {
+				--num-cols: 3;
+			}
+		}
+		.card {
+			display: flex;
+			flex-direction: column;
+			align-items: flex-start;
+			padding: 3rem 3.2rem 3.2rem;
+			text-decoration: none;
+			border: 1px solid var(--card-border-color);
+			border-radius: var(--card-border-radius);
+			transition: all var(--default-transition-params);
+			cursor: pointer;
+			&-content {
+				flex: 1;
+				margin-bottom: 30px;
+			}
+			img {
+				margin-bottom: 48px;
+				height: 43px;
+				width: auto;
+			}
+			p {
+				font-size: 16px;
+				font-weight: 300;
+				line-height: 24px;
+			}
+			&:hover {
+				box-shadow: var(--card-box-shadow);
+				transform: var(--card-transform);
+			}
+		}
+	}
+}