[yoga-15] improve service list rendering

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

@@ -0,0 +1,40 @@
+import YogaImageComponent from "@/components/yoga.image.component";
+import {BlockWithImageComponentProps} from "@/components/block.with.image.component";
+import NextBlocksRenderer from "@/components/next.blocks.renderer";
+
+export default function BlockWithRightImage ({
+                                                title,header, block,button,  image: {
+        url,
+    } ,
+                                            }: BlockWithImageComponentProps){
+
+
+    return (
+        <section className="mission_section">
+            <div className="container">
+                <div className="mission_box">
+                    <div className="row">
+                        <div className="col-lg-6 col-md-6 col-sm-12 col-xs-12" data-aos="fade-up">
+                            <div className="mission_content">
+                                {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>}
+                                </div>
+                            </div>
+                        </div>
+                        <div className="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+                            <div className="mission_image">
+                                <figure className="mb-0"><YogaImageComponent src={url} alt="" className="img-fluid" /></figure>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <figure className="mission_right_shape right_shape mb-0">
+                    <YogaImageComponent src="./assets/images/our_mission_shape.png" alt="" className="img-fluid" />
+                </figure>
+            </div>
+        </section>
+    )
+}