[yoga-12] serviceList page improvements - improve block with right image

dev.sh

@@ -1,5 +1,20 @@
 #!/usr/bin/env bash
 
-cd environment/dev/docker-compose/yogastic
+PROJECT_ROOT=$(readlink -f $(dirname $0))
+
+ENV_DIR=${PROJECT_ROOT}"/environment/dev/docker-compose/yogastic"
+CMS_DIR=${PROJECT_ROOT}"/yoga-cms"
+APP_DIR=${PROJECT_ROOT}"/yoga-app"
+
+echo "PROJECT_ROOT $PROJECT_ROOT"
+
+cd $ENV_DIR
 docker compose up -d
 
+cd $CMS_DIR
+fuser -k 1337/tcp
+npm run develop &
+
+cd $APP_DIR
+fuser -k 4081/tcp
+npm run dev &

package.json

@@ -8,7 +8,8 @@
     "build.docker.image.app": "cd environment/dev/docker/app/scripts && bash build.docker.build.sh ",
     "build.docker.image.cms": "cd environment/dev/docker/cms/scripts && bash build.docker.build.sh ",
     "push.docker.image.app": "cd environment/dev/docker/app/scripts && bash build.docker.push.sh ",
-    "push.docker.image.cms": "cd environment/dev/docker/cms/scripts && bash build.docker.push.sh "
+    "push.docker.image.cms": "cd environment/dev/docker/cms/scripts && bash build.docker.push.sh ",
+    "dev": "bash ./dev.sh"
   },
   "author": "",
   "license": "ISC",

yoga-app/src/app/globals.scss

@@ -12,6 +12,9 @@
 @import '../styles/custom-style';
 @import '../styles/special-classes';
 @import 'node_modules/aos/src/sass/aos.scss';
+@import '../styles/block-with-image';
+@import '../styles/block-with-left-image';
+@import '../styles/block-with-right-image';
 
 //<!-- Latest compiled and minified CSS -->
 //<link

yoga-app/src/components/block.with.left.image.component.module.css

@@ -1,17 +1,6 @@
 .leftImage {
-    border-top-left-radius: 200px;
+    /*border-top-left-radius: 200px;*/
-    border-bottom-right-radius: 200px;
+    /*border-bottom-right-radius: 200px;*/
-    margin: -150px 12px 12px 0;
+    /*margin: -150px 12px 12px 0;*/
 }
 
-.blockLeftVisionContent {
-    padding-left: 0;
-}
-
-.blockWithLeftImage{
-    p, h1,h2,h3,h4,h5{
-        padding-left: 96px;
-        padding-right: 96px;
-
-    }
-}

yoga-app/src/components/block.with.left.image.component.tsx

@@ -13,16 +13,13 @@ export default function BlockWithLeftImage (  {
 
 
     return (
-        <section className={clsx("vision_section",styles.blockWithLeftImage)} id={id}>
+        <section className={clsx("block_with_left_image_section","block_with_image","block_with_left_image",styles.blockWithLeftImage)} id={id}>
             <div className="container">
-                <div className="vision_box">
+                <div className="block_with_image_box">
                     <div className="row">
-                        <div className="col-lg-6 col-md-6 col-sm-12 col-xs-12">
-
-                        </div>
                         <div className="col-lg-12 col-md-12 col-sm-12 col-xs-12" data-aos="fade-up">
-                            <div className={ clsx("vision_content",styles.blockLeftVisionContent)}>
+                            <div className={ clsx("block_with_image_content","block_with_image_content","block_with_left_image_content",styles.blockLeftblock_with_imageContent)}>
-                                {url && <div className="vision_image">
+                                {url && <div className="block_with_image_image">
                                     <figure className="mb-0"><YogaImageComponent src={url} alt="" className={clsx("img-fluid", "float-left", styles.leftImage)}/></figure>
                                 </div>
                                 }
@@ -36,8 +33,8 @@ export default function BlockWithLeftImage (  {
                         </div>
                     </div>
                 </div>
-                <figure className="vision_left_shape left_shape mb-0">
+                <figure className="block_with_image_left_shape left_shape mb-0">
-                    <YogaImageComponent src="./assets/images/our_vision_shape.png" alt="" className="img-fluid" />
+                    <YogaImageComponent src="./assets/images/our_block_with_image_shape.png" alt="" className="img-fluid" />
                 </figure>
             </div>
         </section>

yoga-app/src/components/block.with.right.image.component.module.css

@@ -1,16 +1,4 @@
 .rightImage {
-    border-top-left-radius: 200px;
+
-    border-bottom-right-radius: 200px;
-        margin: -150px 0 12px 12px;
 }
 
-.blockRightMissionContent {
-    padding-right: 0;
-}
-
-.blockWithRightImage{
-    p, h1,h2,h3,h4,h5{
-        padding-right: 96px;
-
-    }
-}

yoga-app/src/components/block.with.right.image.component.tsx

@@ -12,14 +12,14 @@ export default function BlockWithRightImage({
 
 
     return (
-        <section className={clsx("mission_section",styles.blockWithRightImage)} id={id}>
+        <section className={clsx("block_with_right_image_section","block_with_image","block_with_right_image")} id={id}>
             <div className="container">
-                <div className="mission_box">
+                <div className="block_with_image_box">
                     <div className="row">
                         <div className="col-lg-12 col-md-12 col-sm-12 col-xs-12" data-aos="fade-up">
-                            <div className={ clsx("mission_content",styles.blockRightMissionContent)}>
+                            <div className={ clsx("block_with_right_image_content","block-with-image-content","block-with-right-image-content")}>
                                 {
-                                    url && <div className="mission_image">
+                                    url && <div className="block_with_right_image_image d-lg-block d-md-block d-sm-none d-xs-none d-none">
                                         <figure className="mb-0">
                                             <YogaImageComponent src={url} alt=""
                                                                                      className={clsx("img-fluid", "float-right", styles.rightImage)}/>
@@ -35,10 +35,17 @@ export default function BlockWithRightImage({
                                 </div>
                             </div>
                         </div>
+                        { url && <div className="block_with_right_image_image d-lg-none d-md-none col-sm-12 col-xs-12">
+                                <figure className="mb-0">
+                                    <YogaImageComponent src={url} alt=""
+                                                        className={clsx("img-fluid", "float-right", styles.rightImage)}/>
+                                </figure>
+                        </div>
+                        }
                     </div>
                 </div>
-                <figure className="mission_right_shape right_shape mb-0">
+                <figure className="block_with_right_image_right_shape right_shape mb-0">
-                    <YogaImageComponent src="./assets/images/our_mission_shape.png" alt="" className="img-fluid"/>
+                    <YogaImageComponent src="./assets/images/our_block_with_image_shape.png" alt="" className="img-fluid"/>
                 </figure>
             </div>
         </section>

yoga-app/src/styles/block-with-image.scss

@@ -0,0 +1,11 @@
+
+/**
+block with image components
+*/
+.block_with_image{
+  --y-block-with-right-image-spacing-image: 96px;
+
+  --y-block-with-image-spacing-main: 66px;
+
+}
+

yoga-app/src/styles/block-with-left-image.scss

@@ -0,0 +1,196 @@
+
+
+
+.block_with_left_image{
+  padding: 45px 0 130px;
+  position: relative;
+}
+.block_with_left_image .block_with_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);
+  }
+}
+
+
+
+
+
+
+@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;
+  }
+}
+@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;
+  }
+}
+
+@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;
+  }
+
+}
+
+@media screen and (max-width: 575px) {
+  .block_with_left_image_section .block_with_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;
+  }
+}

yoga-app/src/styles/block-with-right-image.scss

@@ -0,0 +1,251 @@
+/* About Page Our block_with_image Section Style */
+
+.block_with_right_image {
+  --y-block-with-right-image-spacing-image: 96px;
+  --y-block-with-image-spacing-main: 66px;
+  --y-block-with-right-image-top-spacing: 150px;
+
+  padding: 130px 0 45px;
+  position: relative;
+
+}
+
+.block_with_right_image_image img{
+  max-width: 50%;
+  border-top-left-radius: 200px;
+  border-bottom-right-radius: 200px;
+  margin: calc(-1 * var(--y-block-with-right-image-top-spacing)) 0 12px 12px;
+}
+
+.block_with_right_image .block_with_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_right_image_content {
+  padding-top: var(--y-block-with-right-image-top-spacing);
+  padding-left: 96px;
+}
+
+.block_with_right_image_content h5 {
+  text-transform: uppercase;
+  color: var(--e-global-color-secondary);
+  letter-spacing: 3.1px;
+  margin-bottom: 12px;
+}
+
+.block_with_right_image_content h2 {
+  margin-bottom: 16px;
+  color: var(--e-global-color-primary);
+}
+
+.block_with_right_image_content p {
+  margin-bottom: 32px;
+  color: var(--e-global-color-text);
+  padding-right: 25px;
+}
+
+.block_with_right_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_right_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_right_image_content .btn_wrapper .read_more_btn:hover:before {
+  left: 0%;
+  right: auto;
+  width: 100%;
+}
+
+.block_with_right_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_right_image .block_with_right_image_right_shape {
+  position: absolute;
+  top: 210px;
+  right: 0;
+}
+
+.block_with_right_image_content {
+  p, h1, h2, h3, h4, h5 {
+    padding-right: var(--y-block-with-right-image-spacing-image);
+    padding-left: 0;
+  }
+}
+
+
+@media screen and (max-width: 1440px) {
+  .block_with_right_image_content {
+    padding-top: var(--y-block-with-right-image-top-spacing);
+  }
+
+  .block_with_right_image_section .block_with_right_image_right_shape {
+    top: 15px;
+  }
+  .block_with_right_image_section .block_with_right_image_right_shape img {
+    width: 90px;
+  }
+  .block_with_right_image_image img{
+    margin-top: calc(-1 * var(--y-block-with-right-image-top-spacing));
+  }
+}
+
+@media screen and (max-width: 1199px) {
+  .block_with_right_image_section {
+    --y-block-with-right-image-top-spacing: 135px;
+    padding: 100px 0 50px;
+  }
+
+  .block_with_right_image_content {
+    padding-top: var(--y-block-with-right-image-top-spacing);
+    padding-left: 70px;
+  }
+  .block_with_right_image_content h5 {
+    margin-bottom: 8px;
+  }
+  .block_with_right_image_content h2 {
+    margin-bottom: 12px;
+  }
+  .block_with_right_image_content p {
+    margin-bottom: 28px;
+    padding-right: 18px;
+  }
+  .block_with_right_image_content .btn_wrapper .read_more_btn {
+    font-size: 20px;
+    line-height: 20px;
+    padding: 22px 40px;
+  }
+  .block_with_right_image_section .block_with_right_image_right_shape {
+    display: none;
+  }
+
+  .block_with_right_image_image img{
+    margin-top: calc(-1 * var(--y-block-with-right-image-top-spacing));
+  }
+}
+
+@media screen and (max-width: 991px) {
+  .block_with_right_image_section {
+    --y-block-with-right-image-top-spacing: 70px;
+
+    padding: 70px 0 35px;
+  }
+  .block_with_right_image_section .block_with_image_box {
+    border-radius: 140px 0 140px 0;
+  }
+  .block_with_right_image_content {
+    padding-top: var(--y-block-with-right-image-top-spacing);
+
+    padding-left: 45px;
+  }
+  .block_with_right_image_content h5 {
+    margin-bottom: 5px;
+  }
+  .block_with_right_image_content h2 {
+    margin-bottom: 10px;
+  }
+  .block_with_right_image_content p {
+    margin-bottom: 22px;
+    padding-right: 0px;
+  }
+  .block_with_right_image_content .btn_wrapper .read_more_btn {
+    font-size: 18px;
+    line-height: 18px;
+    padding: 20px 35px;
+  }
+
+  .block_with_right_image_image img{
+    margin-top: calc(-1 * var(--y-block-with-right-image-top-spacing));
+  }
+
+}
+
+@media screen and (max-width: 767px) {
+  .block_with_right_image_section {
+    --y-block-with-right-image-top-spacing: 60px;
+    padding: 60px 0 30px;
+  }
+  .block_with_right_image_section .block_with_image_box {
+    border-radius: 185px 0 185px 0;
+  }
+  .block_with_right_image_content {
+    padding-top: var(--y-block-with-right-image-top-spacing);
+    padding-left: 0;
+    text-align: center;
+    margin-bottom: 30px;
+  }
+  .block_with_right_image_content h2 {
+    margin-bottom: 8px;
+  }
+  .block_with_right_image_content p {
+    margin-bottom: 18px;
+    padding: 0 50px;
+  }
+  .block_with_right_image_content .btn_wrapper .read_more_btn {
+    font-size: 16px;
+    line-height: 16px;
+    padding: 18px 32px;
+  }
+
+  .block_with_right_image_image img{
+    margin-top: 0;
+    max-width: 100%;
+  }
+}
+
+@media screen and (max-width: 575px) {
+
+  .block_with_right_image_section {
+    --y-block-with-right-image-top-spacing: 50px;
+  }
+
+  .block_with_right_image_section .block_with_image_box {
+    border-radius: 118px 0 118px 0;
+  }
+  .block_with_right_image_content {
+    padding-top: var(--y-block-with-right-image-top-spacing);
+  }
+  .block_with_right_image_content p {
+    margin-bottom: 15px;
+    padding: 0 10px;
+  }
+  .block_with_right_image_content .btn_wrapper .read_more_btn {
+    font-size: 14px;
+    line-height: 14px;
+    padding: 16px 30px;
+  }
+
+  .block_with_right_image_image img{
+    margin-top: 0;
+    max-width: 100%;
+  }
+
+}

yoga-app/src/styles/readme.md

@@ -0,0 +1,21 @@
+## MediaQueries brakepoints
+
+```css
+
+
+/* Media Queries  */
+
+@media screen and (max-width: 1440px){
+
+}
+@media screen and (max-width: 1199px){
+    
+}
+@media screen and (max-width: 991px){}
+
+@media screen and (max-width: 767px){}
+
+@media screen and (max-width: 575px) {
+}
+
+```