From c47ec66dff9fea03786ba621a0f660a99fddd481 Mon Sep 17 00:00:00 2001
From: Roland Schneider <rschneider@ucs.at>
Date: Tue, 16 Sep 2025 09:24:26 +0200
Subject: [PATCH] [yoga-12] serviceList page improvements - improve css

---
 .../block.with.left.image.component.tsx       |   4 +-
 yoga-app/src/styles/block-with-image.scss     |  10 -
 .../src/styles/block-with-left-image.scss     | 417 +++++++++---------
 3 files changed, 203 insertions(+), 228 deletions(-)

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 (  {
                                     <figure className="mb-0"><YogaImageComponent src={url} alt="" className={clsx("img-fluid", "float-left", styles.leftImage)}/></figure>
                                 </div>
                                 }
-                                <h5>{title}</h5>
-                                <h2>{header}</h2>
+                                {title && <h5>{title}</h5> }
+                                {header && <h2>{header}</h2> }
                                 <NextBlocksRenderer content={  block } />
                                 <div className="btn_wrapper">
                                     {button && <a href={button.link} className="text-decoration-none read_more_btn">{button.label}</a>}
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