From 1e553380e2013bea2b3ef1e41d19162ebda21186 Mon Sep 17 00:00:00 2001
From: Schneider Roland <roland.schneider@extern.a1.at>
Date: Wed, 10 Sep 2025 22:38:04 +0200
Subject: [PATCH] [yoga-15] improve service list rendering

---
 .../components/block.with.image.component.tsx |  2 +-
 ...block.with.left.image.component.module.css |  9 ++++++
 .../block.with.left.image.component.tsx       | 22 ++++++++------
 ...lock.with.right.image.component.module.css | 10 +++++--
 .../block.with.right.image.component.tsx      | 30 +++++++++++--------
 .../components/single.service.component.tsx   | 15 ++++++----
 yoga-app/src/types/types.ts                   |  2 +-
 yoga-app/src/util/sorting.ts                  |  2 +-
 8 files changed, 59 insertions(+), 33 deletions(-)
 create mode 100644 yoga-app/src/components/block.with.left.image.component.module.css

diff --git a/yoga-app/src/components/block.with.image.component.tsx b/yoga-app/src/components/block.with.image.component.tsx
index c371de6..1afeee9 100644
--- a/yoga-app/src/components/block.with.image.component.tsx
+++ b/yoga-app/src/components/block.with.image.component.tsx
@@ -5,7 +5,7 @@ import BlockWithLeftImage from "@/components/block.with.left.image.component";
 
 
 export interface BlockWithImageComponentProps {
-    id: number;
+    id?: string;
     title?: string;
     header?: string;
     block: BlocksContent;
diff --git a/yoga-app/src/components/block.with.left.image.component.module.css b/yoga-app/src/components/block.with.left.image.component.module.css
new file mode 100644
index 0000000..9c7e37a
--- /dev/null
+++ b/yoga-app/src/components/block.with.left.image.component.module.css
@@ -0,0 +1,9 @@
+.leftImage {
+    border-top-left-radius: 200px;
+    border-bottom-right-radius: 200px;
+    margin: -150px 12px 12px 0;
+}
+
+.blockLeftVisionContent {
+    padding-left: 0;
+}
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 cacf7c1..67bc551 100644
--- a/yoga-app/src/components/block.with.left.image.component.tsx
+++ b/yoga-app/src/components/block.with.left.image.component.tsx
@@ -1,27 +1,31 @@
 import YogaImageComponent from "@/components/yoga.image.component";
 import NextBlocksRenderer from "@/components/next.blocks.renderer";
 import {BlockWithImageComponentProps} from "@/components/block.with.image.component";
-
+import styles from './block.with.left.image.component.module.css';
+import clsx from "clsx";
 
 
 export default function BlockWithLeftImage (  {
-    title,header,image,block,button
+    id,title,header,  image: {
+        url,
+    },block,button
 } : BlockWithImageComponentProps){
 
 
-
     return (
-        <section className="vision_section">
+        <section className="vision_section" id={id}>
             <div className="container">
                 <div className="vision_box">
                     <div className="row">
                         <div className="col-lg-6 col-md-6 col-sm-12 col-xs-12">
-                            <div className="vision_image">
-                                <figure className="mb-0"><YogaImageComponent src={image.url} alt="" className="img-fluid" /></figure>
-                            </div>
+
                         </div>
-                        <div className="col-lg-6 col-md-6 col-sm-12 col-xs-12" data-aos="fade-up">
-                            <div className="vision_content">
+                        <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)}>
+                                {url && <div className="vision_image">
+                                    <figure className="mb-0"><YogaImageComponent src={url} alt="" className={clsx("img-fluid", "float-left", styles.leftImage)}/></figure>
+                                </div>
+                                }
                                 <h5>{title}</h5>
                                 <h2>{header}</h2>
                                 <NextBlocksRenderer content={  block } />
diff --git a/yoga-app/src/components/block.with.right.image.component.module.css b/yoga-app/src/components/block.with.right.image.component.module.css
index 64cd8e1..a06a57c 100644
--- a/yoga-app/src/components/block.with.right.image.component.module.css
+++ b/yoga-app/src/components/block.with.right.image.component.module.css
@@ -1,5 +1,9 @@
 .rightImage {
-    border-top-left-radius: 60px;
-    border-bottom-right-radius: 60px;
-    margin: -150px 0 12px 12px;
+    border-top-left-radius: 200px;
+    border-bottom-right-radius: 200px;
+        margin: -150px 0 12px 12px;
+}
+
+.blockRightMissionContent {
+    padding-right: 0;
 }
diff --git a/yoga-app/src/components/block.with.right.image.component.tsx b/yoga-app/src/components/block.with.right.image.component.tsx
index 3207de2..28091a8 100644
--- a/yoga-app/src/components/block.with.right.image.component.tsx
+++ b/yoga-app/src/components/block.with.right.image.component.tsx
@@ -4,35 +4,41 @@ import NextBlocksRenderer from "@/components/next.blocks.renderer";
 import styles from './block.with.right.image.component.module.css';
 import clsx from "clsx";
 
-export default function BlockWithRightImage ({
-                                                title,header, block,button,  image: {
+export default function BlockWithRightImage({
+                                              id,  title, header, block, button, image: {
         url,
-    } ,
-                                            }: BlockWithImageComponentProps){
+    },
+                                            }: BlockWithImageComponentProps) {
 
 
     return (
-        <section className="mission_section">
+        <section className="mission_section" id={id}>
             <div className="container">
                 <div className="mission_box">
                     <div className="row">
                         <div className="col-lg-12 col-md-12 col-sm-12 col-xs-12" data-aos="fade-up">
-                            <div className="mission_content">
-                                <div className="mission_image">
-                                    <figure className="mb-0"><YogaImageComponent src={url} alt="" className={clsx("img-fluid", "float-right", styles.rightImage)} /></figure>
-                                </div>
+                            <div className={ clsx("mission_content",styles.blockRightMissionContent)}>
+                                {
+                                    url && <div className="mission_image">
+                                        <figure className="mb-0">
+                                            <YogaImageComponent src={url} alt=""
+                                                                                     className={clsx("img-fluid", "float-right", styles.rightImage)}/>
+                                        </figure>
+                                    </div>
+                                }
                                 {title && <h5>{title}</h5>}
                                 {header && <h2>{header}</h2>}
-                                <NextBlocksRenderer content={  block } />
+                                <NextBlocksRenderer content={block}/>
                                 <div className="btn_wrapper">
-                                    {button && <a href={button.link} className="text-decoration-none read_more_btn">{button.label}</a>}
+                                    {button && <a href={button.link}
+                                                  className="text-decoration-none read_more_btn">{button.label}</a>}
                                 </div>
                             </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" />
+                    <YogaImageComponent src="./assets/images/our_mission_shape.png" alt="" className="img-fluid"/>
                 </figure>
             </div>
         </section>
diff --git a/yoga-app/src/components/single.service.component.tsx b/yoga-app/src/components/single.service.component.tsx
index 730e364..7938611 100644
--- a/yoga-app/src/components/single.service.component.tsx
+++ b/yoga-app/src/components/single.service.component.tsx
@@ -10,17 +10,20 @@ export interface Props {
     index: number
 }
 
-const SingleService = ({config,index}: Props) => {
-    if (!config || !config.article || !config.articleImage) {
+const SingleService = ({config, index}: Props) => {
+    if (!config || !config.article) {
         return null; // or some fallback UI
     }
 
-    const {article, articleImage, id, header } = config;
-        const strapiFile = articleImage as StrapiFile;
-      const  imageUrl = strapiApi.getImageUrl(strapiFile?.url);
+    const {article, articleImage, id, header} = config;
+    let imageUrl: string | undefined = undefined;
+    const strapiFile = articleImage as StrapiFile;
+    imageUrl = strapiApi.getImageUrl(strapiFile?.url);
 
     return (
-        <BlockWithImageComponent id={id} block={article} image={{ position: index %2 ? ImagePosition.Left : ImagePosition.Right, url:imageUrl}}  header={header} />
+        <BlockWithImageComponent id={id} block={article}
+                                 image={{position: index % 2 ? ImagePosition.Left : ImagePosition.Right, url: imageUrl}}
+                                 header={header}/>
     );
 }
 
diff --git a/yoga-app/src/types/types.ts b/yoga-app/src/types/types.ts
index 9db8b94..cfdf411 100644
--- a/yoga-app/src/types/types.ts
+++ b/yoga-app/src/types/types.ts
@@ -21,7 +21,7 @@ export interface ButtonConfig{
 
 export interface ImageConfig{
     position: ImagePosition,
-    url: string,
+    url?: string,
     alt?: string,
     width?: number,
     height?: number,
diff --git a/yoga-app/src/util/sorting.ts b/yoga-app/src/util/sorting.ts
index 34ef10c..debd1b2 100644
--- a/yoga-app/src/util/sorting.ts
+++ b/yoga-app/src/util/sorting.ts
@@ -3,5 +3,5 @@ import {YogaSingleService_Plain} from "@/types/generated-strapi-interfaces/api/y
 export function sortServicesByPriority(a: YogaSingleService_Plain, b: YogaSingleService_Plain) {
   const priorityA = a.priority ?? 0;
   const priorityB = b.priority ?? 0;
-  return priorityA - priorityB;
+  return priorityB - priorityA;
 }