diff --git a/yoga-app/src/components/block.with.left.image.component.tsx b/yoga-app/src/components/block.with.left.image.component.tsx
index 1c84ae3..e80ffd3 100644
--- a/yoga-app/src/components/block.with.left.image.component.tsx
+++ b/yoga-app/src/components/block.with.left.image.component.tsx
@@ -30,8 +30,8 @@ export default function BlockWithLeftImage ( {
}
-
{button &&
{button.label}}
diff --git a/yoga-app/src/styles/block-with-image.scss b/yoga-app/src/styles/block-with-image.scss
index 5b62df6..8b13789 100644
--- a/yoga-app/src/styles/block-with-image.scss
+++ b/yoga-app/src/styles/block-with-image.scss
@@ -1,11 +1 @@
-/**
-block with image components
-*/
-.block_with_image{
- --y-block-with-right-image-spacing-image: 96px;
-
- --y-block-with-image-spacing-main: 66px;
-
-}
-
diff --git a/yoga-app/src/styles/block-with-left-image.scss b/yoga-app/src/styles/block-with-left-image.scss
index 5f54bd8..0092c4f 100644
--- a/yoga-app/src/styles/block-with-left-image.scss
+++ b/yoga-app/src/styles/block-with-left-image.scss
@@ -1,224 +1,209 @@
+.block_with_left_image {
+ --y-padding: 45px 0 130px;
+ --y-box-border-radius: 200px;
+ --y-content-padding-top: 150px;
+ --y-btn-font-size: 22px;
+ --y-btn-padding: 24px 44px;
+ --y-image-margin-top: -150px;
+ --y-block-with-right-image-spacing-image: 96px;
+ --y-block-with-image-spacing-main: 66px;
-
-
-.block_with_left_image{
- padding: 45px 0 130px;
+ padding: var(--y-padding);
position: relative;
-}
-.block_with_left_image .block_with_left_image_box{
- width: 100%;
- background-color: var(--e-global-color-white);
- border-radius: 200px 0 200px 0;
- box-shadow: 1px 1px 50px rgb(0 0 0 / 7%);
-}
-.block_with_left_image_content{
- padding-top: 150px;
- padding-left: 40px;
-}
-.block_with_left_image_content h5{
- text-transform: uppercase;
- color: var(--e-global-color-secondary);
- letter-spacing: 3.1px;
- margin-bottom: 12px;
-}
-.block_with_left_image_content h2{
- margin-bottom: 16px;
- color: var(--e-global-color-primary);
-}
-.block_with_left_image_content p {
- margin-bottom: 32px;
- color: var(--e-global-color-text);
- padding-right: 60px;
-}
-.block_with_left_image_content .btn_wrapper .read_more_btn{
- font-size: 22px;
- line-height: 22px;
- font-weight: 500;
- padding: 24px 44px;
- text-align: center;
- color: var(--e-global-color-white);
- display: inline-block;
- background-color: var(--e-global-color-secondary);
- border-radius: 35px 0px 35px 0px;
- transition: all 0.3s ease-in-out;
- position: relative;
- overflow: hidden;
-}
-.block_with_left_image_content .btn_wrapper .read_more_btn:hover {
- color: var(--e-global-color-accent);
- background-color: var(--e-global-color-soft-orange);
- transform: translateY(-10px);
-}
-.block_with_left_image_content .btn_wrapper .read_more_btn:hover:before {
- left: 0%;
- right: auto;
- width: 100%;
-}
-.block_with_left_image_content .btn_wrapper .read_more_btn:before {
- display: block;
- position: absolute;
- top: 0px;
- right: 0px;
- height: 100%;
- width: 0px;
- z-index: -1;
- content: '';
- color: var(--e-global-color-accent);
- background-color: var(--e-global-color-soft-orange);
- transition: all 0.4s cubic-bezier(0.12, 0, 0.38, 1) 0s;
-}
-.block_with_left_image .block_with_image_left_shape {
- position: absolute;
- top: 140px;
- left: 0;
-}
-.block_with_left_image_content{
- p, h1,h2,h3,h4,h5{
- padding-right: var(--y-block-with-right-image-spacing-image);
- padding-left: var(--y-block-with-image-spacing-main);
- }
-}
-
-.block_with_left_image_image img{
- border-top-left-radius: 200px;
- border-bottom-right-radius: 200px;
- margin: -150px 12px 12px -40px;
- max-width: 50%;
-}
-
-
-
-
-
-@media screen and (max-width: 1440px){
- .block_with_left_image_section .block_with_image_left_shape {
- top: unset;
- bottom: 15px;
- }
- .block_with_left_image_section .block_with_image_left_shape img{
- width: 95px;
- }
-}
-@media screen and (max-width: 1199px){
- .block_with_left_image_section {
- padding: 50px 0 100px;
- }
- .block_with_left_image_content {
- padding-top: 80px;
- padding-left: 15px;
- }
- .block_with_left_image_content h5 {
- margin-bottom: 8px;
- }
- .block_with_left_image_content h2 {
- margin-bottom: 12px;
- }
- .block_with_left_image_content p {
- margin-bottom: 28px;
- padding-right: 40px;
- }
- .block_with_left_image_content .btn_wrapper .read_more_btn {
- font-size: 20px;
- line-height: 20px;
- padding: 22px 40px;
- }
- .block_with_left_image_section .vision_left_shape {
- display: none;
+ &_box {
+ width: 100%;
+ background-color: var(--e-global-color-white);
+ border-radius: var(--y-box-border-radius) 0 var(--y-box-border-radius) 0;
+ box-shadow: 1px 1px 50px rgb(0 0 0 / 7%);
}
- .block_with_left_image_image img{
- margin-top: -80px;
+ &_content {
+ padding-top: var(--y-content-padding-top);
+ padding-left: 40px;
+
+ h5 {
+ text-transform: uppercase;
+ color: var(--e-global-color-secondary);
+ letter-spacing: 3.1px;
+ margin-bottom: 12px;
+ }
+
+ h2 {
+ margin-bottom: 16px;
+ color: var(--e-global-color-primary);
+ }
+
+ p {
+ margin-bottom: 32px;
+ color: var(--e-global-color-text);
+ padding-right: 60px;
+ }
+
+ .btn_wrapper .read_more_btn {
+ font-size: var(--y-btn-font-size);
+ line-height: var(--y-btn-font-size);
+ font-weight: 500;
+ padding: var(--y-btn-padding);
+ text-align: center;
+ color: var(--e-global-color-white);
+ display: inline-block;
+ background-color: var(--e-global-color-secondary);
+ border-radius: 35px 0px 35px 0px;
+ transition: all 0.3s ease-in-out;
+ position: relative;
+ overflow: hidden;
+
+ &:hover {
+ color: var(--e-global-color-accent);
+ background-color: var(--e-global-color-soft-orange);
+ transform: translateY(-10px);
+
+ &::before {
+ left: 0%;
+ right: auto;
+ width: 100%;
+ }
+ }
+
+ &::before {
+ display: block;
+ position: absolute;
+ top: 0px;
+ right: 0px;
+ height: 100%;
+ width: 0px;
+ z-index: -1;
+ content: '';
+ color: var(--e-global-color-accent);
+ background-color: var(--e-global-color-soft-orange);
+ transition: all 0.4s cubic-bezier(0.12, 0, 0.38, 1) 0s;
+ }
+ }
+
+ p, h1, h2, h3, h4, h5 {
+ padding-right: var(--y-block-with-right-image-spacing-image);
+ padding-left: var(--y-block-with-image-spacing-main);
+ }
}
+ &_image img {
+ border-top-left-radius: var(--y-box-border-radius);
+ border-bottom-right-radius: var(--y-box-border-radius);
+ margin: var(--y-image-margin-top) 12px 12px -40px;
+ max-width: 50%;
+ }
+
+ &_left_shape {
+ position: absolute;
+ top: 140px;
+ left: 0;
+ }
+
+ @media screen and (max-width: 1440px) {
+ &_left_shape {
+ top: unset;
+ bottom: 15px;
+ img {
+ width: 95px;
+ }
+ }
+ }
+
+ @media screen and (max-width: 1199px) {
+ --y-padding: 50px 0 100px;
+ --y-content-padding-top: 80px;
+ --y-btn-font-size: 20px;
+ --y-btn-padding: 22px 40px;
+ --y-image-margin-top: -80px;
+
+ &_content {
+ padding-left: 15px;
+
+ p, h2, h3, h4, h5, h6{
+ padding-left: 55px;
+ padding-right: 70px;
+ }
+
+ h5 { margin-bottom: 8px; }
+ h2 { margin-bottom: 12px; }
+ p {
+ margin-bottom: 28px;
+ }
+ }
+ &_left_shape {
+ display: none;
+ }
+
+ .block_with_left_image_image img{
+ margin-left: -15px;
+ }
+ }
+
+ @media screen and (max-width: 991px) {
+ --y-padding: 35px 0 70px;
+ --y-box-border-radius: 120px;
+ --y-content-padding-top: 40px;
+ --y-btn-font-size: 18px;
+ --y-btn-padding: 20px 35px;
+ --y-image-margin-top: -40px;
+
+ &_content {
+ padding-left: 0;
+
+ p, h2, h3, h4, h5, h6{
+ padding-right: 45px;
+ padding-left: 45px;
+ }
+ h5 { margin-bottom: 5px; }
+ h2 { margin-bottom: 10px; }
+ p {
+ margin-bottom: 22px;
+ }
+ }
+ .block_with_left_image_image img{
+ margin-left: 0;
+ }
+ }
+
+ @media screen and (max-width: 767px) {
+ --y-padding: 30px 0 60px;
+ --y-box-border-radius: 185px;
+ --y-btn-font-size: 16px;
+ --y-btn-padding: 18px 32px;
+ --y-image-margin-top: 0;
+
+ &_image {
+ margin-bottom: 30px;
+ img {
+ max-width: 100%;
+ }
+ }
+
+ &_content {
+ padding-top: 0;
+ text-align: center;
+ padding-left: 0px;
+ margin-bottom: 30px;
+ h2 { margin-bottom: 8px; }
+ p {
+ margin-bottom: 18px;
+ padding: 0 50px;
+ }
+ }
+ }
+
+ @media screen and (max-width: 575px) {
+ --y-box-border-radius: 118px;
+ --y-btn-font-size: 14px;
+ --y-btn-padding: 16px 30px;
+
+ &_content p {
+ margin-bottom: 15px;
+ padding: 0 10px;
+ }
+ &_image img {
+ max-width: 100%;
+ }
+ }
}
-@media screen and (max-width: 991px){
- .block_with_left_image_section {
- padding: 35px 0 70px;
- }
- .block_with_left_image_section .vision_box {
- border-radius: 120px 0 120px 0;
- }
- .block_with_left_image_content {
- padding-top: 40px;
- padding-left: 0px;
- }
- .block_with_left_image_content h5 {
- margin-bottom: 5px;
- }
- .block_with_left_image_content h2 {
- margin-bottom: 10px;
- }
- .block_with_left_image_content p {
- margin-bottom: 22px;
- padding-right: 30px;
- }
- .block_with_left_image_content .btn_wrapper .read_more_btn {
- font-size: 18px;
- line-height: 18px;
- padding: 20px 35px;
- }
-
- .block_with_left_image_image img {
- margin-top: -40;
- margin-left: 0;
- }
-
-}
-
-@media screen and (max-width: 767px){
- .block_with_left_image_section {
- padding: 30px 0 60px;
- }
- .block_with_left_image_section .vision_box {
- border-radius: 185px 0 185px 0;
- }
- .block_with_left_image_section .vision_image{
- margin-bottom: 30px;
- }
- .block_with_left_image_content {
- padding-top: 0;
- text-align: center;
- padding-left: 0px;
- margin-bottom: 30px;
- }
- .block_with_left_image_content h2 {
- margin-bottom: 8px;
- }
- .block_with_left_image_content p {
- margin-bottom: 18px;
- padding: 0 50px;
- }
- .block_with_left_image_content .btn_wrapper .read_more_btn {
- font-size: 16px;
- line-height: 16px;
- padding: 18px 32px;
- }
-
- .block_with_left_image_image img{
- margin-top: 0;
- max-width: 100%;
- }
-
-}
-
-@media screen and (max-width: 575px) {
- .block_with_left_image_section .block_with_left_image_box {
- border-radius: 118px 0 118px 0;
- }
- .block_with_left_image_content p {
- margin-bottom: 15px;
- padding: 0 10px;
- }
- .block_with_left_image_content .btn_wrapper .read_more_btn {
- font-size: 14px;
- line-height: 14px;
- padding: 16px 30px;
- }
- .block_with_left_image_image img{
- margin-top: 0;
- max-width: 100%;
- //border-top-left-radius: 200px;
- //border-bottom-right-radius: 200px;
- }
-}
\ No newline at end of file