diff --git a/pingcap-jp/acf/acf-banner.php b/pingcap-jp/acf/acf-banner.php index 1652ec3..7ba0481 100644 --- 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 index 0c78e43..9c9070b 100644 --- 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 index a9dc050..fbeb65e 100644 --- a/pingcap-jp/bootstrap/shortcodes.php +++ b/pingcap-jp/bootstrap/shortcodes.php @@ -10,7 +10,8 @@ 'salesforce_id' => '', 'border' => '', 'calendly_id' => '', - 'calendly_url' => '' + 'calendly_url' => '', + 'dark' => '' ], $atts); return Component::render_to_string(Components\HubSpotForm::class, [ @@ -18,6 +19,7 @@ '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 index 7ff399a..a21656e 100644 --- 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 index b92345f..9f19387 100644 --- 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 index 63b7a57..2c60c04 100644 --- 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 index b526a2c..1769913 100644 --- 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 new file mode 100644 index 0000000..bd2dd04 --- /dev/null +++ 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 index bcf51cb..3808a71 100644 --- 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 index 76914f4..3acff9d 100644 --- 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 index 062f7df..d2007c0 100644 --- 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 index 6de1b8c..4999423 100644 --- 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 index a3c1ed5..89a886f 100644 --- 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, diff --git a/pingcap-jp/css/vendor/hubspot.scss b/pingcap-jp/css/vendor/hubspot.scss index f475ed4..aca56d0 100644 --- a/pingcap-jp/css/vendor/hubspot.scss +++ b/pingcap-jp/css/vendor/hubspot.scss @@ -77,13 +77,16 @@ padding: 0; } - ul li { - margin: 0 !important; - &::before { - display: none; - } - label > input { - margin-right: 0.6rem; + ul { + list-style: none; + li { + margin: 0 !important; + &::before { + display: none; + } + label > input { + margin-right: 0.6rem; + } } } @@ -92,7 +95,77 @@ } select.is-placeholder { - color: rgba(var(--color-rgb-gray-dark), 0.4);; + color: rgba(var(--color-rgb-gray-dark), 0.4); + } + + &.dark { + background: transparent; + padding: 0; + border: 0; + p { + color: #fff; + } + .form-columns-0 { + display: none; + } + input, + select, + textarea { + margin: 0; + background-color: transparent; + height: 6rem; + border-radius: unset; + color: #fff; + border-color: #5d6974; + &::placeholder { + color: #fff; + } + } + select { + background-image: var(--form-select-arrow-white-img); + } + input[type="checkbox"], + input[type="submit"] { + height: auto; + } + a { + color: #fff !important; + } + .hs-button { + letter-spacing: 0; + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0.8rem 1.4rem; + width: 15.8rem; + height: 4rem; + border: none; + font-size: 1.6rem; + line-height: 2.2rem; + font-weight: 500; + text-decoration: none; + background: #fff; + color: #000; + -webkit-appearance: none; + appearance: none; + outline: 0; + overflow: hidden; + cursor: pointer; + font-family: var(--font-moderat); + transition: all 0.2s ease-in-out; + + span { + position: relative; + z-index: 1; + color: #000; + } + + &:hover { + background: #dc150b; + color: #fff; + } + } } } diff --git a/pingcap-jp/fonts/iconfont/iconfont.ttf b/pingcap-jp/fonts/iconfont/iconfont.ttf index 43c1313..1e8996d 100644 Binary files a/pingcap-jp/fonts/iconfont/iconfont.ttf and b/pingcap-jp/fonts/iconfont/iconfont.ttf differ diff --git a/pingcap-jp/fonts/iconfont/iconfont.woff b/pingcap-jp/fonts/iconfont/iconfont.woff index 3faf507..9528830 100644 Binary files a/pingcap-jp/fonts/iconfont/iconfont.woff and b/pingcap-jp/fonts/iconfont/iconfont.woff differ diff --git a/pingcap-jp/fonts/iconfont/iconfont.woff2 b/pingcap-jp/fonts/iconfont/iconfont.woff2 index 10e6979..affead5 100644 Binary files a/pingcap-jp/fonts/iconfont/iconfont.woff2 and b/pingcap-jp/fonts/iconfont/iconfont.woff2 differ diff --git a/pingcap-jp/grav-blocks/cards/block.php b/pingcap-jp/grav-blocks/cards/block.php index 0896009..225ad2f 100644 --- a/pingcap-jp/grav-blocks/cards/block.php +++ b/pingcap-jp/grav-blocks/cards/block.php @@ -8,7 +8,7 @@ $block_title_desc = isset($block_title_desc) && is_string($block_title_desc) ? $block_title_desc : ACF::get_sub_field_string('block_title_desc'); $card_type = isset($card_type) && is_string($card_type) ? $card_type : ACF::get_sub_field_string('card_type'); -if (!in_array($card_type, ['', 'media', 'solution', 'integration', 'bg', 'tier'], true)) { +if (!in_array($card_type, ['', 'media', 'solution', 'integration', 'bg', 'workload', 'tier'], true)) { $card_type = ''; } @@ -32,6 +32,10 @@ $cards = ACF::get_sub_field_array('media_cards'); break; + case 'workload': + $cards = ACF::get_sub_field_array('workload_cards'); + break; + case 'tier': $cards = ACF::get_sub_field_array('tier_cards'); break; @@ -62,6 +66,11 @@ case 'tier': $block_classes[] = 'tier'; break; + + case 'workload': + $block_classes[] = 'workload'; + break; + default: $num_cols = count($cards) % 2 === 0 ? 2 : 3; @@ -141,6 +150,18 @@ break; + case 'workload': + $component_name = Components\Cards\CardWorkload::class; + + $render_params = [ + 'image' => Arrays::get_value_as_array($card, 'image'), + 'subtitle' => Arrays::get_value_as_string($card, 'subtitle'), + 'title' => Arrays::get_value_as_string($card, 'title'), + 'content' => Arrays::get_value_as_string($card, 'content'), + ]; + + break; + case 'media': $component_name = Components\Cards\CardMedia::class; $link = BlueprintBlocks::get_button_field_values('link', $card); diff --git a/pingcap-jp/grav-blocks/cards/block_fields.php b/pingcap-jp/grav-blocks/cards/block_fields.php index aab21f5..d513311 100644 --- a/pingcap-jp/grav-blocks/cards/block_fields.php +++ b/pingcap-jp/grav-blocks/cards/block_fields.php @@ -73,6 +73,7 @@ 'media' => 'Media', 'solution' => 'Solution', 'integration' => 'Integration', + 'workload' => 'Workload', 'bg' => 'Bg Color', 'tier' => 'Tier', ), @@ -355,7 +356,7 @@ 'max_size' => '', 'mime_types' => '', ), - array ( + array( 'key' => 'field_' . $block . '_card_integration_image_size', 'label' => 'Enable Image Full Size', 'name' => 'is_full', @@ -363,7 +364,7 @@ 'instructions' => '', 'required' => 0, 'conditional_logic' => 0, - 'wrapper' => array ( + 'wrapper' => array( 'width' => '', 'class' => '', 'id' => '', @@ -462,20 +463,20 @@ 'button_label' => 'Add Card', 'sub_fields' => array_merge( array( - array ( - 'key' => 'field_' . $acf_group . '_card_bg_color', + array( + 'key' => 'field_' . $block . '_card_bg_color', 'label' => 'Card Bg Color', 'name' => 'card_bg_color', 'type' => 'select', 'instructions' => '', 'required' => 0, 'conditional_logic' => 0, - 'wrapper' => array ( + 'wrapper' => array( 'width' => '', 'class' => '', 'id' => '', ), - 'choices' => array ( + 'choices' => array( 'red' => 'Red', 'violet' => 'Violet', 'blue' => 'Blue', @@ -743,6 +744,127 @@ ) ), + array( + 'key' => 'field_' . $block . '_workload_cards', + 'label' => 'Cards', + 'name' => 'workload_cards', + 'type' => 'repeater', + 'instructions' => '', + 'required' => 1, + 'conditional_logic' => array( + array( + array( + 'field' => 'field_' . $block . '_card_type', + 'operator' => '==', + 'value' => 'workload', + ), + ), + ), + 'wrapper' => array( + 'width' => '', + 'class' => '', + 'id' => '', + ), + 'collapsed' => '', + 'min' => 1, + 'max' => '', + 'layout' => 'block', // table | block | row + 'button_label' => 'Add Card', + 'sub_fields' => array_merge( + array( + array( + 'key' => 'field_' . $block . '_item_image', + 'label' => 'Icon Image', + 'name' => 'image', + 'instructions' => '', + 'type' => 'image', + 'required' => 1, + 'conditional_logic' => 0, + 'wrapper' => array( + 'width' => '', + 'class' => '', + 'id' => '', + ), + 'return_format' => 'array', // array | url | id + 'preview_size' => 'thumbnail', + 'library' => 'all', // all | uploadedTo + 'min_width' => '', + 'min_height' => '', + 'min_size' => '', + 'max_width' => '', + 'max_height' => '', + 'max_size' => '', + 'mime_types' => '', + ), + array( + 'key' => 'field_' . $block . '_item_subtitle', + 'label' => 'Subtitle', + 'name' => 'subtitle', + 'type' => 'text', + 'instructions' => '', + 'required' => 0, + 'conditional_logic' => 0, + 'wrapper' => array( + 'width' => '', + 'class' => '', + 'id' => '', + ), + 'default_value' => '', + 'placeholder' => '', + 'formatting' => 'none', // none | html + 'prepend' => '', + 'append' => '', + 'maxlength' => '', + 'readonly' => 0, + 'disabled' => 0, + ), + array( + 'key' => 'field_' . $block . '_item_title', + 'label' => 'Title', + 'name' => 'title', + 'type' => 'text', + 'instructions' => '', + 'required' => 0, + 'conditional_logic' => 0, + 'wrapper' => array( + 'width' => '', + 'class' => '', + 'id' => '', + ), + 'default_value' => '', + 'placeholder' => '', + 'formatting' => 'none', // none | html + 'prepend' => '', + 'append' => '', + 'maxlength' => '', + 'readonly' => 0, + 'disabled' => 0, + ), + array( + 'key' => 'field_' . $block . '_item_content', + 'label' => 'Content', + 'name' => 'content', + 'type' => 'textarea', + 'instructions' => '', + 'required' => 1, + 'conditional_logic' => 0, + 'wrapper' => array( + 'width' => '', + 'class' => '', + 'id' => '', + ), + 'default_value' => '', + 'placeholder' => '', + 'maxlength' => '', + 'rows' => 4, + 'new_lines' => "\n", // wpautop | br | '' + 'readonly' => 0, + 'disabled' => 0, + ), + ), + ) + ), + array( 'key' => 'field_' . $block . '_tier_cards', 'label' => 'Tier Cards', diff --git a/pingcap-jp/grav-blocks/case/block.php b/pingcap-jp/grav-blocks/case/block.php index a0868bc..9ac3918 100644 --- a/pingcap-jp/grav-blocks/case/block.php +++ b/pingcap-jp/grav-blocks/case/block.php @@ -5,29 +5,35 @@ use Blueprint\Images; $block_title = ACF::get_sub_field_string('block_title'); +$block_title_desc = ACF::get_sub_field_string('block_title_desc'); $cards = ACF::get_sub_field_array('case_cards'); ?>