diff --git a/src/reusecore/Blockquote/Blockquote-image/blockquote-image.style.js b/src/reusecore/Blockquote/Blockquote-image/blockquote-image.style.js index 7f1186623ccbd1..4c9ad528d15cb3 100644 --- a/src/reusecore/Blockquote/Blockquote-image/blockquote-image.style.js +++ b/src/reusecore/Blockquote/Blockquote-image/blockquote-image.style.js @@ -1,67 +1,81 @@ import styled from "styled-components"; const CustomersWrapper = styled.div` - - -blockquote { + blockquote { padding: 0; margin: 0; -} + } -.type-one-text, -.type-two-quote-text { - color: ${props => props.theme.greyEEEEEEToBlack}; + .type-one-text, + .type-two-quote-text { + color: ${(props) => props.theme.greyEEEEEEToBlack}; transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); -} + } -section.bq-section { + section.bq-section { padding: 30px; margin-bottom: 60px; -} + } + + .type-one-wrapper { + height: 100%; + display: flex; + flex-direction: column; + } -.type-one-wrapper.type-one-wrapper-boxed { + .bq-quote { + height: 100%; + } + + .type-one-wrapper.type-one-wrapper-boxed { max-width: 576px; margin: 0 auto; -} + } -.type-one-wrapper.type-one-wrapper-fullwidth { + .type-one-wrapper.type-one-wrapper-fullwidth { max-width: 100%; -} -.links{ - .type-one-quote-base, .type-two-quote-base { - color: ${props => props.theme.tertiaryColor}; - transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + } + .links { + .type-one-quote-base, + .type-two-quote-base { + color: ${(props) => props.theme.tertiaryColor}; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); } -} -/* ========== Type One ========== */ + } + /* ========== Type One ========== */ -.type-one-quote { + .type-one-quote { position: relative; display: flex; flex-direction: row; min-height: 250px; - box-shadow: 2px 2px 25px ${props => props.theme.whiteOneToGreyCECECE}; + box-shadow: 2px 2px 25px ${(props) => props.theme.whiteOneToGreyCECECE}; border-radius: 10px; transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); -} + } -.type-one-quote .type-one-quote-pattern { + .type-one-quote .type-one-quote-pattern { flex-basis: 80px; - background: linear-gradient(180deg,rgba(71,126,150,1) 0%,rgba(0,179,159,1) 35%,rgba(60,73,79,1) 100%); + background: linear-gradient( + 180deg, + rgba(71, 126, 150, 1) 0%, + rgba(0, 179, 159, 1) 35%, + rgba(60, 73, 79, 1) 100% + ); border-radius: 10px 0 0 10px; -} + } -.type-one-quote .type-one-quote-base { + .type-one-quote .type-one-quote-base { flex-basis: calc(100% - 80px); - background-color: ${props => props.theme.grey212121ToWhite}; + background-color: ${(props) => props.theme.grey212121ToWhite}; padding: 40px 30px 50px 80px; font-size: 11pt; line-height: 1.62em; border-radius: 0 10px 10px 0; transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); -} + } -.type-one-quote .type-one-quote-qmark { + .type-one-quote .type-one-quote-qmark { position: absolute; top: 50px; left: 105px; @@ -72,92 +86,96 @@ section.bq-section { -ms-user-select: none; -webkit-user-select: none; user-select: none; -} + } -.type-one-quote .type-one-quote-userpic { + .type-one-quote .type-one-quote-userpic { position: absolute; top: 80px; left: 45px; width: 90px; height: 90px; - img{ - border-radius: 50%; + img { + border-radius: 50%; } -} + } -.type-one-quote .type-one-quote-meta { + .type-one-quote .type-one-quote-meta { margin-top: 30px; padding-top: 10px; - border-top: 2px dotted ${props => props.theme.greyEEEEEEToBlack}; + border-top: 2px dotted ${(props) => props.theme.greyEEEEEEToBlack}; transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); -} + } -.type-one-quote .type-one-quote-meta .type-one-author, -.type-one-quote .type-one-quote-meta .type-one-source { - color: ${props => props.theme.greyEEEEEEToBlack}; - transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); -} + .type-one-quote .type-one-quote-meta .type-one-author, + .type-one-quote .type-one-quote-meta .type-one-source { + color: ${(props) => props.theme.greyEEEEEEToBlack}; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + } -.type-one-quote .type-one-quote-meta .type-one-author { + .type-one-quote .type-one-quote-meta .type-one-author { font-style: normal; text-transform: uppercase; letter-spacing: 0.03em; font-size: 10pt; font-weight: bold; -} + } -.type-one-quote .type-one-quote-meta .type-one-author cite { + .type-one-quote .type-one-quote-meta .type-one-author cite { font-style: normal; -} + } -.type-one-quote .type-one-quote-meta .type-one-source { + .type-one-quote .type-one-quote-meta .type-one-source { font-size: 9pt; -} - -@media screen and (max-width: 768px) { + } + @media screen and (max-width: 768px) { .type-one-quote .type-one-quote-pattern { - flex-basis: 20px; + flex-basis: 20px; } .type-one-quote .type-one-quote-base { - flex-basis: calc(100% - 20px); - padding: 100px 30px 50px 30px; + flex-basis: calc(100% - 20px); + padding: 100px 30px 50px 30px; } .type-one-quote .type-one-quote-userpic { - width: 50px; - height: 50px; - left: 40px; - top: 20px; + width: 50px; + height: 50px; + left: 40px; + top: 20px; } .type-one-quote .type-one-quote-qmark { - left: 100px; - top: 45px; + left: 100px; + top: 45px; } -} -/* ========== Type Two ========== */ + } + /* ========== Type Two ========== */ -.type-two-quote { + .type-two-quote { position: relative; - box-shadow: 2px 2px 25px ${props => props.theme.whiteOneToGreyCECECE}; + box-shadow: 2px 2px 25px ${(props) => props.theme.whiteOneToGreyCECECE}; border-radius: 10px; transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); -} + } -.type-two-quote .type-two-quote-pattern { + .type-two-quote .type-two-quote-pattern { display: flex; flex-direction: row; flex-wrap: nowrap; height: 80px; align-items: center; justify-content: flex-start; - background: linear-gradient(250deg,rgba(71,126,150,1) 0%,rgba(0,179,159,1) 35%,rgba(60,73,79,1) 100%); + background: linear-gradient( + 250deg, + rgba(71, 126, 150, 1) 0%, + rgba(0, 179, 159, 1) 35%, + rgba(60, 73, 79, 1) 100% + ); border-radius: 10px 10px 0 0; -} + } -.type-two-quote .type-two-quote-pattern .type-two-quote-qmark { + .type-two-quote .type-two-quote-pattern .type-two-quote-qmark { flex-basis: 100px; font-family: Garamond, Georgia, "Times New Roman", serif; font-size: 60pt; @@ -169,110 +187,114 @@ section.bq-section { -ms-user-select: none; -webkit-user-select: none; user-select: none; -} + } -.type-two-quote .type-two-quote-userpic { + .type-two-quote .type-two-quote-userpic { position: absolute; top: 45px; left: calc(50% - 35px); width: 90px; height: 90px; - img{ - border-radius: 50%; + img { + border-radius: 50%; } -} + } -.type-two-quote .type-two-quote-base { + .type-two-quote .type-two-quote-base { flex-basis: calc(100% - 80px); - background-color: ${props => props.theme.grey212121ToWhite}; - padding: 60px 30px 50px 100px; + background-color: ${(props) => props.theme.grey212121ToWhite}; + padding: 60px 30px 40px 30px; font-size: 11pt; line-height: 1.62em; border-radius: 0 0 10px 10px; transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); -} + } -.type-two-quote .type-two-quote-meta { + .type-two-quote .type-two-quote-meta { margin-top: 30px; padding-top: 10px; - border-top: 2px dotted ${props => props.theme.greyEEEEEEToBlack}; + border-top: 2px dotted ${(props) => props.theme.greyEEEEEEToBlack}; text-align: center; transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); -} + } -.type-two-quote .type-two-quote-meta .type-two-quote-author, -.type-two-quote .type-two-quote-meta .type-two-quote-source { - color: ${props => props.theme.greyEEEEEEToBlack}; + .type-two-quote .type-two-quote-meta .type-two-quote-author, + .type-two-quote .type-two-quote-meta .type-two-quote-source { + color: ${(props) => props.theme.greyEEEEEEToBlack}; transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); -} + } -.type-two-quote .type-two-quote-meta .type-two-quote-author { + .type-two-quote .type-two-quote-meta .type-two-quote-author { font-style: normal; text-transform: uppercase; letter-spacing: 0.03em; font-size: 10pt; font-weight: bold; -} + } -.type-two-quote .type-two-quote-meta .type-two-quote-author cite { + .type-two-quote .type-two-quote-meta .type-two-quote-author cite { font-style: normal; -} + } -.type-two-quote .type-two-quote-meta .type-two-quote-source { + .type-two-quote .type-two-quote-meta .type-two-quote-source { font-size: 9pt; -} - -@media screen and (max-width: 768px) { + } + @media screen and (max-width: 768px) { .type-two-quote .type-two-quote-base { - padding-left: 30px; + padding-left: 30px; } -} - + } -/* ========== Type Three ========== */ + /* ========== Type Three ========== */ -.type-three-quote { + .type-three-quote { position: relative; min-height: 250px; border-radius: 10px; - box-shadow: 2px 2px 25px ${props => props.theme.whiteFourToGreyCECECE}; + overflow: hidden; + box-shadow: 2px 2px 25px ${(props) => props.theme.whiteFourToGreyCECECE}; transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); -} - -.type-three-quote .type-three-quote-base { - background: linear-gradient(250deg,rgba(71,126,150,1) 0%,rgba(0,179,159,1) 35%,rgba(60,73,79,1) 100%); + } + + .type-three-quote .type-three-quote-base { + background: linear-gradient( + 250deg, + rgba(71, 126, 150, 1) 0%, + rgba(0, 179, 159, 1) 35%, + rgba(60, 73, 79, 1) 100% + ); color: #ffffff; font-weight: bold; padding: 60px; border-radius: 10px; -} + } -.type-three-quote .type-three-quote-meta { + .type-three-quote .type-three-quote-meta { display: flex; flex-direction: row; margin-top: 30px; padding-top: 20px; border-top: 2px dotted #ffffff; -} + } -.type-three-quote .type-three-quote-meta .type-three-quote-author { + .type-three-quote .type-three-quote-meta .type-three-quote-author { font-style: normal; text-transform: uppercase; letter-spacing: 0.03em; font-size: 10pt; font-weight: bold; -} + } -.type-three-quote .type-three-quote-meta .type-three-quote-author cite { + .type-three-quote .type-three-quote-meta .type-three-quote-author cite { font-style: normal; -} + } -.type-three-quote .type-three-quote-meta .type-three-quote-source { + .type-three-quote .type-three-quote-meta .type-three-quote-source { font-size: 10pt; -} + } -.type-three-quote .type-three-quote-qmark { + .type-three-quote .type-three-quote-qmark { position: absolute; top: 140px; right: 5px; @@ -283,36 +305,33 @@ section.bq-section { -ms-user-select: none; -webkit-user-select: none; user-select: none; -} + } -.type-three-quote .type-three-quote-userpic { + .type-three-quote .type-three-quote-userpic { width: 90px; height: 90px; - img{ - border-radius: 50%; + img { + border-radius: 50%; } margin-right: 20px; -} - -@media screen and (max-width: 768px) { + } + @media screen and (max-width: 768px) { .type-three-quote .type-three-quote-base { - padding-left: 40px; - padding-right: 40px; + padding-left: 40px; + padding-right: 40px; } .type-three-quote .type-three-quote-meta { - flex-direction: column; - text-align: center; + flex-direction: column; + text-align: center; } .type-three-quote .type-three-quote-meta .type-three-quote-userpic { - margin: 0 auto; - margin-bottom: 10px; + margin: 0 auto; + margin-bottom: 10px; } - -} - + } `; export default CustomersWrapper; diff --git a/src/sections/Pricing/review-slider.js b/src/sections/Pricing/review-slider.js index dffc07b323018f..168fefe3135dbb 100644 --- a/src/sections/Pricing/review-slider.js +++ b/src/sections/Pricing/review-slider.js @@ -74,17 +74,35 @@ const ReviewsWrapper = styled.div` visibility: visible; opacity: 1; } + .slick-track { + display: flex !important; + align-items: stretch; + } + + .slick-slide { + height: auto !important; + display: flex !important; + } - /* Prevent extreme shrinking on mobile */ .slick-slide > div { - min-width: 0; + width: 100%; + display: flex; + flex: 1; } - .slider .type-one-wrapper { + + .slick-slide .type-one-wrapper { width: 100%; - max-width: none; + height: 100%; + display: flex; + flex-direction: column; margin: 0 0.5rem; } + .slick-slide .type-one-wrapper-boxed { + width: 100%; + height: 100%; + } + @media (max-width: 768px) { .type-one-wrapper.type-one-wrapper-boxed { max-width: none;