Feat/industry (#43)

* feat: industry page * feat: form dark mode * feat: solution banner * feat: workload card * feat: icon font * style: update * fix
pingcap-inc · Nov 4, 2024 · 5119858 · 5119858
1 parent ef2ea5a
commit 5119858
Show file tree

Hide file tree

Showing 25 changed files with 540 additions and 93 deletions.
diff --git a/pingcap-jp/acf/acf-banner.php b/pingcap-jp/acf/acf-banner.php
@@ -139,13 +139,12 @@
 				),
 			),
 			'wrapper' => array(
-				'width' => '33',
+				'width' => '50',
 				'class' => '',
 				'id' => '',
 			),
 			'choices' => array(
 				'' => 'Normal',
-				'medium' => 'Medium',
 				'large' => 'Large',
 			),
 			'other_choice' => 0,
@@ -170,7 +169,7 @@
 				),
 			),
 			'wrapper' => array(
-				'width' => '67',
+				'width' => '50',
 				'class' => '',
 				'id' => '',
 			),
@@ -761,6 +760,15 @@
 				'group_no' => 1,
 			),
 		),
+		array(
+			array(
+				'param' => 'post_type', // post_type | post | page | page_template | post_category | taxonomy | options_page
+				'operator' => '==',
+				'value' => 'solution',      // if options_page then use: acf-options  | if page_template then use:  template-example.php
+				'order_no' => 0,
+				'group_no' => 1,
+			),
+		)
 	),
 	'menu_order' => 0,
 	'position' => 'acf_after_title',                // side | normal | acf_after_title

diff --git a/pingcap-jp/bootstrap/blocks.php b/pingcap-jp/bootstrap/blocks.php
@@ -35,7 +35,9 @@
 		PingCAP\Constants\CPT::CASE_STUDY,
 		PingCAP\Constants\CPT::COMMUNITY_ACTIVITY,
 		PingCAP\Constants\CPT::PRESS_RELEASE,
-		PingCAP\Constants\CPT::EBOOK_WHITEPAPER
+		PingCAP\Constants\CPT::EBOOK_WHITEPAPER,
+		PingCAP\Constants\CPT::VIDEO,
+		PingCAP\Constants\CPT::SOLUTION
 	];
 
 	// Specify which page templates the blocks editor should be visible on

diff --git a/pingcap-jp/bootstrap/shortcodes.php b/pingcap-jp/bootstrap/shortcodes.php
@@ -10,14 +10,16 @@
 		'salesforce_id' => '',
 		'border' => '',
 		'calendly_id' => '',
-		'calendly_url' => ''
+		'calendly_url' => '',
+		'dark' => ''
 	], $atts);
 
 	return Component::render_to_string(Components\HubSpotForm::class, [
 		'portal_id' => $params['portal_id'],
 		'form_id' => $params['form_id'],
 		'salesforce_id' => $params['salesforce_id'],
 		'border' => $params['border'],
+		'dark' => $params['dark'],
 		'calendly_id' => $params['calendly_id'],
 		'calendly_url' => $params['calendly_url']
 	]);

diff --git a/pingcap-jp/css/blocks/cards.scss b/pingcap-jp/css/blocks/cards.scss
@@ -6,6 +6,11 @@
 			}
 		}
 	}
+	.workload {
+		.block-cards__container {
+			gap: 64px;
+		}
+	}
 
 	&__container {
 		--num-cols: 1;

diff --git a/pingcap-jp/css/blocks/case.scss b/pingcap-jp/css/blocks/case.scss
@@ -1,10 +1,33 @@
 .case {
 	&-container {
-		display: flex;
-		flex-direction: column;
+		display: grid;
 		gap: 6.4rem;
+		grid-template-columns: repeat(1, 1fr);
+		@include media-min($medium) {
+			gap: 64px 40px;
+			grid-template-columns: repeat(2, 1fr);
+		}
 		@include media-min(1200px) {
-			flex-direction: row;
+			grid-template-columns: repeat(4, 1fr);
+
+			&[data-num-cols="1"],
+			&[data-num-cols="2"],
+			&[data-num-cols="3"] {
+				.case-title {
+					grid-column: auto;
+				}
+			}
+			&[data-num-cols="5"] {
+				.case-framer:nth-of-type(2){
+					grid-column-start: 4;
+				}
+			}
+		}
+
+		.case-title {
+			@include media-min($medium) {
+				grid-column: span 2 / span 2;
+			}
 		}
 
 		h5 {
@@ -21,25 +44,19 @@
 		h4 {
 			color: #fff;
 		}
+
+		.desc {
+			font-size: 22px;
+			font-weight: 300;
+			line-height: 28px;
+			color: #ffffffa6;
+		}
 	}
 	&-card {
 		display: block;
 		text-decoration: none;
 		margin-top: 0;
-		min-width: 272px;
 		transition: all var(--default-transition-params);
-		&__container {
-			display: grid;
-			gap: 6.4rem;
-			grid-template-columns: repeat(1, 1fr);
-			@include media-min($medium) {
-				gap: 4rem;
-				grid-template-columns: repeat(2, 1fr);
-			}
-			@include media-min($large) {
-				grid-template-columns: repeat(3, 1fr);
-			}
-		}
 		&__title {
 			color: #fff;
 			font-size: 24px;
@@ -51,6 +68,7 @@
 		img {
 			height: 3rem;
 			width: auto;
+			margin-top: 8px;
 		}
 		p {
 			color: #a2adb9;

diff --git a/pingcap-jp/css/blocks/media-content.scss b/pingcap-jp/css/blocks/media-content.scss
@@ -80,7 +80,7 @@
 			}
 
 			&[data-image-size="medium"] {
-				--grid-areas: ". txt txt txt txt txt img img img img img img";
+				--grid-areas: ". txt txt txt txt txt txt img img img img img";
 			}
 
 			&[data-image-size="large"] {
@@ -134,6 +134,27 @@
 		padding-bottom: 4rem;
 		padding-left: 1.6rem;
 
+		h5 {
+			font-size: 40px;
+			font-weight: 700;
+			line-height: 48px;
+			color: var(--h5-color);
+			@include media-min($medium) {
+				font-size: 50px;
+				font-weight: 700;
+				line-height: 66px;
+				margin: 20px 0;
+			}
+		}
+
+		p {
+			color:  #454B51;
+		}
+
+		ul {
+			margin-top: 1.6rem;
+		}
+
 		@include media-min($medium) {
 			padding-left: 0;
 			padding-bottom: 0;

diff --git a/pingcap-jp/css/components/banners/banner-default.scss b/pingcap-jp/css/components/banners/banner-default.scss
@@ -206,22 +206,16 @@
     overflow: hidden;
     .banner-default__text-content {
       position: relative;
-      z-index: 1;
-      padding-top: 80px;
-      @include media-min($medium) {
-        grid-column: 1 / span 12;
-        padding: 80px 0 140px;
-        width: 60%;
-      }
-      @include media-min(1200px) {
-        width: 50%;
-        &.medium {
-          width: 60%;
-        }
-        &.large {
-          width: 66%;
-        }
-      }
+			z-index: 1;
+			padding-top: 80px;
+			@include media-min($medium) {
+				padding: 80px 0 140px;
+			}
+			@include media-min(1200px) {
+				&.large {
+					grid-column: 1 / span 8;
+				}
+			}
       h1 {
         font-size: 48px;
         font-weight: 700;

diff --git a/pingcap-jp/css/components/cards/card-workload.scss b/pingcap-jp/css/components/cards/card-workload.scss
@@ -0,0 +1,33 @@
+.card-workload {
+	display: flex;
+	text-decoration: none;
+	flex-direction: column;
+	@include media-min($large){
+		flex-direction: row;
+	}
+
+	&__image {
+		width: 150px;
+		height: 150px;
+		margin-right: 20px;
+		@include media-min($medium){
+			margin-right: 40px;
+		}
+	}
+
+	&__content {
+		h5 {
+			font-size: 25px;
+			font-weight: 500;
+			line-height: 31px;
+			color: #fff;
+		}
+		p {
+			font-size: 16px;
+			font-weight: 300;
+			line-height: 22px;
+			color: #a2adb9;
+            margin: 24px 0;
+		}
+	}
+}
diff --git a/pingcap-jp/css/components/header.scss b/pingcap-jp/css/components/header.scss
@@ -275,7 +275,7 @@ html.mobile-menu-cta-active {
 
 		&:nth-child(2) {
 			.menu-dropdown-columns {
-				transform: translatex(-25%);
+				transform: translatex(-34%);
 			}
 		}
 	}

diff --git a/pingcap-jp/css/components/menu-dropdowns/menu-dropdown.scss b/pingcap-jp/css/components/menu-dropdowns/menu-dropdown.scss
@@ -5,6 +5,15 @@
 		.menu-dropdown__item + .menu-dropdown__item {
 			border-left: 1px solid rgba(83, 85, 94, 0.5);
 		}
+
+		.menu-dropdown__feature + .menu-dropdown__links-column {
+			padding-left: 48px;
+		}
+
+		.menu-dropdown__links-column + .menu-dropdown__links-column {
+			padding-left: 48px;
+			margin-left: 48px;
+		}
 	}
 
 	&__inner-reserve {
@@ -22,8 +31,12 @@
 		}
 
 		.menu-dropdown__feature + .menu-dropdown__links-column {
-			padding-left: 0;
-			padding-right: 4.8rem;
+			padding-right: 48px;
+		}
+
+		.menu-dropdown__links-column + .menu-dropdown__links-column {
+			padding-right: 48px;
+			margin-right: 48px;
 		}
 	}
 
@@ -113,21 +126,12 @@
 				}
 			}
 		}
-		& + .menu-dropdown__links-column {
-			padding-left: 4.8rem;
-			padding-right: 0;
-		}
 	}
 
 	&__links-column {
 		display: flex;
 		flex-direction: column;
 		gap: 1.6rem;
-		padding-right: 4.8rem;
-
-		& + .menu-dropdown__links-column {
-			padding-left: 4.8rem;
-		}
 
 		a {
 			display: flex;

diff --git a/pingcap-jp/css/iconfont.scss b/pingcap-jp/css/iconfont.scss
@@ -1,8 +1,8 @@
 @font-face {
 	font-family: "iconfont"; /* Project id 4677496 */
-	src: local(""), url("#{$fonts-url-base}/fonts/iconfont/iconfont.woff?t=1725963639600") format("woff"),
-		url("#{$fonts-url-base}/fonts/iconfont/iconfont.woff2?t=1725963639600") format("woff2"),
-		url("#{$fonts-url-base}/fonts/iconfont/iconfont.ttf?t=1725963639600") format("truetype");
+	src: local(""), url("#{$fonts-url-base}/fonts/iconfont/iconfont.woff?t=1730186159719") format("woff"),
+		url("#{$fonts-url-base}/fonts/iconfont/iconfont.woff2?t=1730186159719") format("woff2"),
+		url("#{$fonts-url-base}/fonts/iconfont/iconfont.ttf?t=1730186159719") format("truetype");
 }
 
 [class^="icon-"],

diff --git a/pingcap-jp/css/master.scss b/pingcap-jp/css/master.scss
@@ -90,6 +90,7 @@ Components
 @import "components/cards/card-event";
 @import "components/cards/card-slides";
 @import "components/cards/card-bg";
+@import "components/cards/card-workload";
 
 @import "components/archive/load-more";
 @import "components/archive/navigation";

diff --git a/pingcap-jp/css/scaffold/typography.scss b/pingcap-jp/css/scaffold/typography.scss
@@ -210,7 +210,7 @@ h6 {
 .xxlarge,
 %xxlarge-text {
 	font-size: calc(var(--body-font-size) + 0.6rem) !important;
-	line-height: 1.5;
+	line-height: 30px;
 }
 
 .xlarge,