[ci-skip] New Prod yoga-app deployment version: 202509161943.65409a9

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 &

environment/dev/docker/app/scripts/version.txt

@@ -1 +1 @@
-202508270921.622f2a7
+202509160924.c47ec66

environment/dev/docker/cms/scripts/version.txt

@@ -1 +1 @@
-202508270750.cde2315
+202509161943.65409a9

environment/prod/docker-compose/yogastic/docker-compose.yaml

@@ -21,7 +21,7 @@ services:
     networks:
       - yogastic
   app:
-    image: docker.rschneider.hu/infra/yoga-app:202508270921.622f2a7
+    image: docker.rschneider.hu/infra/yoga-app:202509160924.c47ec66
     platform: linux/amd64
     ports:
       - '4025:3000'
@@ -47,7 +47,7 @@ services:
       - proxy_shared
       - yogastic
   cms:
-    image: docker.rschneider.hu/infra/yoga-cms:202508270750.cde2315
+    image: docker.rschneider.hu/infra/yoga-cms:202509161943.65409a9
     ports:
       - '4026:1337'
     environment:

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/api/strapi/query/service-list.json

@@ -6,6 +6,9 @@
       "populate": {
         "image": {
           "fields": ["name","mime","url" ]
+        },
+        "articleImage": {
+          "fields": ["name","mime","url" ]
         }
       }
     },

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/app/layout.tsx

@@ -73,8 +73,8 @@ const generateIcons = ( ): IconDescriptor[] => {
 
 
 export const metadata: Metadata = {
-    title: "Yoga App",
-    description: "Yoga App",
+    title: "Reverseyoga",
+    description: "Reverseyoga - Yoga mindenkinek",
     icons: generateIcons(),
     manifest: "./assets/images/favicon/manifest.json",
     other: {

yoga-app/src/app/serviceList/page.tsx

@@ -5,6 +5,7 @@ import SubscribeComponent from "@/components/subscribe.component";
 import strapiApi from "@/api/strapi/strapi-api";
 import SubHeaderComponent from "@/components/subHeader.component";
 import SingleServiceComponent from "@/components/single.service.component";
+import {sortServicesByPriority} from "@/util/sorting";
 
 export default async function Services() {
     const {
@@ -15,14 +16,15 @@ export default async function Services() {
         common,
         services
     } = await strapiApi.getServiceListPage();
-    console.info("ServiceListPage", services.length, services.map);
+    const sortedServices = services ? [...services] : [];
+    sortedServices.sort( sortServicesByPriority )
     return (
         <>
             <SubHeaderComponent  header={{header1:header,description}} common={common}/>
             {
-                services && services.length > 0 && services.map( singleService => {
+                  sortedServices.map( (singleService,index) => {
                     return (
-                        <SingleServiceComponent key={singleService.id} config={singleService} />
+                        <SingleServiceComponent key={singleService.id} config={singleService} index={index}/>
                     )
                 })
             }

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

@@ -0,0 +1,35 @@
+import {ButtonConfig, ImageConfig} from "@/types/types";
+import {BlocksContent} from "@strapi/blocks-react-renderer";
+import BlockWithRightImage from "@/components/block.with.right.image.component";
+import BlockWithLeftImage from "@/components/block.with.left.image.component";
+
+
+export interface BlockWithImageComponentProps {
+    id?: string;
+    title?: string;
+    header?: string;
+    block: BlocksContent;
+    image: ImageConfig;
+    button?: ButtonConfig;
+}
+
+export default function BlockWithImageComponent({
+                                                    block,
+                                                    image,
+                                                    id,
+                                                    title,
+                                                    header,
+                                                    button
+                                                }: BlockWithImageComponentProps) {
+    return (
+        <>
+            {image?.position == 'Right' && <BlockWithRightImage
+                block={block} image={image} id={id} title={title}
+                header={header}
+                button={button}/>}
+            {image?.position == 'Left' && <BlockWithLeftImage block={block} image={image} id={id} title={title}
+                                                              header={header}
+                                                              button={button}/>}
+        </>
+    );
+}

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

@@ -0,0 +1,6 @@
+.leftImage {
+    /*border-top-left-radius: 200px;*/
+    /*border-bottom-right-radius: 200px;*/
+    /*margin: -150px 12px 12px 0;*/
+}
+

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

@@ -0,0 +1,50 @@
+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 (  {
+    id,title,header,  image: {
+        url,
+    },block,button
+} : BlockWithImageComponentProps){
+
+
+    return (
+        <section className={clsx("block_with_left_image_section","block_with_image","block_with_left_image",styles.blockWithLeftImage)} id={id}>
+            <div className="container">
+                <div className="block_with_left_image_box">
+                    <div className="row">
+                        { url && <div className="block_with_left_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",  styles.leftImage)}/>
+                            </figure>
+                        </div>
+                        }
+                        <div className="col-lg-12 col-md-12 col-sm-12 col-xs-12" data-aos="fade-up">
+                            <div className={ clsx("block_with_image_content","block_with_image_content","block_with_left_image_content",styles.blockLeftblock_with_imageContent)}>
+                                {url && <div className="block_with_left_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-left", styles.leftImage)}/></figure>
+                                </div>
+                                }
+                                {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>
+                </div>
+                <figure className="block_with_image_left_shape left_shape mb-0">
+                    <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

@@ -0,0 +1,4 @@
+.rightImage {
+
+}
+

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

@@ -0,0 +1,53 @@
+import YogaImageComponent from "@/components/yoga.image.component";
+import {BlockWithImageComponentProps} from "@/components/block.with.image.component";
+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({
+                                              id,  title, header, block, button, image: {
+        url,
+    },
+                                            }: BlockWithImageComponentProps) {
+
+
+    return (
+        <section className={clsx("block_with_right_image_section","block_with_image","block_with_right_image")} id={id}>
+            <div className="container">
+                <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("block_with_right_image_content","block-with-image-content","block-with-right-image-content")}>
+                                {
+                                    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)}/>
+                                        </figure>
+                                    </div>
+                                }
+                                {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>
+                        { 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="block_with_right_image_right_shape right_shape mb-0">
+                    <YogaImageComponent src="./assets/images/our_block_with_image_shape.png" alt="" className="img-fluid"/>
+                </figure>
+            </div>
+        </section>
+    )
+}

yoga-app/src/components/our.services.component.tsx

@@ -6,6 +6,7 @@ import "slick-carousel/slick/slick.css";
 import "slick-carousel/slick/slick-theme.css";
 import Slider ,{Settings} from "react-slick";
 import OurServiceItemComponent from "@/components/our.services.item.component";
+import {sortServicesByPriority} from "@/util/sorting";
 
 
 export interface Props{
@@ -67,6 +68,8 @@ const OurServiceComponent = ({config: {title,header,description,services}}: Prop
             }
         ]
     };
+    const sortedServices = services ? [...services] : [];
+    sortedServices.sort( sortServicesByPriority )
     return (
         <section className="services_section">
             <div className="container">
@@ -88,7 +91,7 @@ const OurServiceComponent = ({config: {title,header,description,services}}: Prop
                 {/*</div>*/}
 
                 <Slider {...settings}>
-                    {services.map(
+                    {sortedServices.map(
                         itemConfig =>
                             <OurServiceItemComponent config={itemConfig} key={itemConfig.id} />
                     )}

yoga-app/src/components/single.service.component.tsx

@@ -1,31 +1,29 @@
 import {YogaSingleService_Plain} from "@/types/generated-strapi-interfaces/api/yoga-single-service";
-import clsx from "clsx";
-import NextBlocksRenderer from "@/components/next.blocks.renderer";
-import {BlocksContent} from "@strapi/blocks-react-renderer";
 import React from "react";
+import BlockWithImageComponent from "@/components/block.with.image.component";
+import {ImagePosition, StrapiFile} from "@/types/types";
+import strapiApi from "@/api/strapi/strapi-api";
 
 
 export interface Props {
-    config: YogaSingleService_Plain
+    config: YogaSingleService_Plain,
+    index: number
 }
 
-const SingleService = ({config}: Props) => {
+const SingleService = ({config, index}: Props) => {
     if (!config || !config.article) {
         return null; // or some fallback UI
     }
 
+    const {article, articleImage, name, header} = config;
+    let imageUrl: string | undefined = undefined;
+    const strapiFile = articleImage as StrapiFile;
+    imageUrl = strapiApi.getImageUrl(strapiFile?.url);
+
     return (
-        <section id={config.name+""} className={clsx('mb-3')}>
-            <div className="container">
-                <div className={"row"}>
-                    <div className={"col-lg-12 col-md-12 col-sm-12 col-xs-12"}>
-                        <NextBlocksRenderer
-                            content={config.article as BlocksContent}
-                        />
-                    </div>
-                </div>
-            </div>
-        </section>
+        <BlockWithImageComponent id={name} block={article}
+                                 image={{position: index % 2 ? ImagePosition.Left : ImagePosition.Right, url: imageUrl}}
+                                 header={header}/>
     );
 }
 

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

@@ -0,0 +1 @@
+

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

@@ -0,0 +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;
+
+  padding: var(--y-padding);
+  position: relative;
+
+  &_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%);
+  }
+
+  &_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%;
+    }
+  }
+}

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

@@ -0,0 +1,221 @@
+/* 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;
+  --y-box-border-radius: 200px;
+  --y-btn-font-size: 22px;
+  --y-btn-padding: 24px 44px;
+
+  padding: 130px 0 45px;
+  position: relative;
+
+  &_image img {
+    max-width: 50%;
+    border-top-left-radius: var(--y-box-border-radius);
+    border-bottom-right-radius: var(--y-box-border-radius);
+    margin: calc(-1 * var(--y-block-with-right-image-top-spacing)) 0 12px 12px;
+  }
+
+  .block_with_image_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%);
+  }
+
+  &_content {
+    padding-top: var(--y-block-with-right-image-top-spacing);
+    padding-left: 96px;
+
+    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: 25px;
+    }
+
+    .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: 0;
+    }
+  }
+
+  &_right_shape {
+    position: absolute;
+    top: 210px;
+    right: 0;
+  }
+
+  @media screen and (max-width: 1440px) {
+    &_right_shape {
+      top: 15px;
+      img {
+        width: 90px;
+      }
+    }
+    &_image img {
+      margin-top: calc(-1 * var(--y-block-with-right-image-top-spacing));
+    }
+  }
+
+  @media screen and (max-width: 1199px) {
+    --y-block-with-right-image-top-spacing: 135px;
+    --y-btn-font-size: 20px;
+    --y-btn-padding: 22px 40px;
+    padding: 100px 0 50px;
+
+    &_content {
+      padding-left: 70px;
+      p, h2, h3, h4, h5, h6{
+        padding-right: 70px;
+      }
+      h5 {
+        margin-bottom: 8px;
+      }
+      h2 {
+        margin-bottom: 12px;
+      }
+      p {
+        margin-bottom: 28px;
+      }
+    }
+    &_right_shape {
+      display: none;
+    }
+    &_image img {
+      margin-top: calc(-1 * var(--y-block-with-right-image-top-spacing));
+    }
+  }
+
+  @media screen and (max-width: 991px) {
+    --y-block-with-right-image-top-spacing: 70px;
+    --y-box-border-radius: 140px;
+    --y-btn-font-size: 18px;
+    --y-btn-padding: 20px 35px;
+    padding: 70px 0 35px;
+
+    &_content {
+
+      p, h2, h3, h4, h5, h6{
+        padding-right: 45px;
+      }
+
+      padding-left: 45px;
+      h5 {
+        margin-bottom: 5px;
+      }
+      h2 {
+        margin-bottom: 10px;
+      }
+      p {
+        margin-bottom: 22px;
+      }
+    }
+    &_image img {
+      margin-top: calc(-1 * var(--y-block-with-right-image-top-spacing));
+    }
+  }
+
+  @media screen and (max-width: 767px) {
+    --y-block-with-right-image-top-spacing: 60px;
+    --y-box-border-radius: 185px;
+    --y-btn-font-size: 16px;
+    --y-btn-padding: 18px 32px;
+    padding: 60px 0 30px;
+
+    &_content {
+      padding-left: 0;
+      text-align: center;
+      margin-bottom: 30px;
+      h2,h3,h4,h5,h6 {
+        padding-right: 0;
+        margin-bottom: 8px;
+      }
+      p {
+        margin-bottom: 18px;
+        padding: 0 50px;
+      }
+    }
+    &_image img {
+      margin-top: 0;
+      margin-bottom: 0;
+      max-width: 100%;
+    }
+  }
+
+  @media screen and (max-width: 575px) {
+    --y-block-with-right-image-top-spacing: 50px;
+    --y-box-border-radius: 118px;
+    --y-btn-font-size: 14px;
+    --y-btn-padding: 16px 30px;
+
+    &_content {
+      h2,h3,h4,h5,h6{
+        padding-right: 0;
+      }
+      p {
+        margin-bottom: 15px;
+        padding: 0 10px;
+      }
+    }
+    &_image img {
+      margin-top: 0;
+      margin-bottom: 0;
+      max-width: 100%;
+    }
+  }
+}

yoga-app/src/styles/mediaqueries.scss

@@ -299,7 +299,7 @@
         width: 115px;
     }
     .aboutus_content {
-        padding-top: 130px;
+        padding-top: 0;
         padding-left: 10px;
     }
     .aboutus_content h5 {
@@ -1263,7 +1263,7 @@
         width: 110px;
     }
     .aboutus_content {
-        padding-top: 60px;
+        padding-top: 0;
         padding-left: 0;
     }
     .aboutus_content h2 {

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) {
+}
+
+```

yoga-app/src/styles/style.scss

@@ -501,7 +501,7 @@ p{
     left: -65px;
 }
 .aboutus_content{
-    padding-top: 145px;
+    padding-top: 0;
     padding-left: 16px;
 }
 .aboutus_content h5{

yoga-app/src/types/generated-strapi-interfaces/api/yoga-single-service.ts

@@ -14,6 +14,8 @@ export interface YogaSingleService {
     imageAlt?: string;
     name?: string;
     article?: any;
+    articleImage?: { data: Media };
+    priority?: number;
     locale: string;
     localizations?: { data: YogaSingleService[] };
   };
@@ -27,6 +29,8 @@ export interface YogaSingleService_Plain {
   imageAlt?: string;
   name?: string;
   article?: any;
+  articleImage?: Media_Plain;
+  priority?: number;
   locale: string;
   localizations?: YogaSingleService_Plain[];
 }
@@ -40,6 +44,8 @@ export interface YogaSingleService_NoRelations {
   imageAlt?: string;
   name?: string;
   article?: any;
+  articleImage?: number;
+  priority?: number;
   locale: string;
   localizations?: YogaSingleService[];
 }
@@ -53,6 +59,8 @@ export interface YogaSingleService_AdminPanelLifeCycle {
   imageAlt?: string;
   name?: string;
   article?: any;
+  articleImage?: AdminPanelRelationPropertyModification<Media_Plain>;
+  priority?: number;
   locale: string;
   localizations?: YogaSingleService[];
 }

yoga-app/src/types/types.ts

@@ -1,3 +1,4 @@
+
 export interface StrapiFile{
     "id": string,
     "documentId": string,
@@ -5,3 +6,23 @@ export interface StrapiFile{
     "mime": string,
     "url": string
 }
+
+export enum ImagePosition {
+    Left = 'Left',
+    Right = 'Right',}
+
+export interface ButtonConfig{
+    label?: string,
+    link?: string,
+    style?: 'Primary' | 'Secondary' | 'Outline' | 'Text',
+    size?: 'Small' | 'Medium' | 'Large',
+    openInNewTab?: boolean,
+}
+
+export interface ImageConfig{
+    position: ImagePosition,
+    url?: string,
+    alt?: string,
+    width?: number,
+    height?: number,
+}

yoga-app/src/util/sorting.ts

@@ -0,0 +1,7 @@
+import {YogaSingleService_Plain} from "@/types/generated-strapi-interfaces/api/yoga-single-service";
+
+export function sortServicesByPriority(a: YogaSingleService_Plain, b: YogaSingleService_Plain) {
+  const priorityA = a.priority ?? 0;
+  const priorityB = b.priority ?? 0;
+  return priorityB - priorityA;
+}

yoga-cms/generated-strapi-interfaces/api/yoga-single-service.ts

@@ -14,6 +14,8 @@ export interface YogaSingleService {
     imageAlt?: string;
     name?: string;
     article?: any;
+    articleImage?: { data: Media };
+    priority?: number;
     locale: string;
     localizations?: { data: YogaSingleService[] };
   };
@@ -27,6 +29,8 @@ export interface YogaSingleService_Plain {
   imageAlt?: string;
   name?: string;
   article?: any;
+  articleImage?: Media_Plain;
+  priority?: number;
   locale: string;
   localizations?: YogaSingleService_Plain[];
 }
@@ -40,6 +44,8 @@ export interface YogaSingleService_NoRelations {
   imageAlt?: string;
   name?: string;
   article?: any;
+  articleImage?: number;
+  priority?: number;
   locale: string;
   localizations?: YogaSingleService[];
 }
@@ -53,6 +59,8 @@ export interface YogaSingleService_AdminPanelLifeCycle {
   imageAlt?: string;
   name?: string;
   article?: any;
+  articleImage?: AdminPanelRelationPropertyModification<Media_Plain>;
+  priority?: number;
   locale: string;
   localizations?: YogaSingleService[];
 }

yoga-cms/src/api/yoga-single-service/content-types/yoga-single-service/schema.json

@@ -74,6 +74,18 @@
     },
     "article": {
       "type": "blocks"
+    },
+    "articleImage": {
+      "allowedTypes": [
+        "images",
+        "files"
+      ],
+      "type": "media",
+      "multiple": false
+    },
+    "priority": {
+      "type": "integer",
+      "default": 100
     }
   }
 }

yoga-cms/types/generated/contentTypes.d.ts

@@ -1840,6 +1840,7 @@ export interface ApiYogaSingleServiceYogaSingleService
   };
   attributes: {
     article: Schema.Attribute.Blocks;
+    articleImage: Schema.Attribute.Media<'images' | 'files'>;
     buttonLink: Schema.Attribute.String &
       Schema.Attribute.SetPluginOptions<{
         i18n: {
@@ -1884,6 +1885,7 @@ export interface ApiYogaSingleServiceYogaSingleService
           localized: true;
         };
       }>;
+    priority: Schema.Attribute.Integer & Schema.Attribute.DefaultTo<100>;
     publishedAt: Schema.Attribute.DateTime;
     updatedAt: Schema.Attribute.DateTime;
     updatedBy: Schema.Attribute.Relation<'oneToOne', 'admin::user'> &

yogastic/assets/css/mediaqueries.css

@@ -299,7 +299,7 @@
         width: 115px;
     }
     .aboutus_content {
-        padding-top: 130px;
+        padding-top: 0;
         padding-left: 10px;
     }
     .aboutus_content h5 {
@@ -1263,7 +1263,7 @@
         width: 110px;
     }
     .aboutus_content {
-        padding-top: 60px;
+        padding-top: 0;
         padding-left: 0;
     }
     .aboutus_content h2 {

yogastic/assets/css/style.css

@@ -501,7 +501,7 @@ p{
     left: -65px;
 }
 .aboutus_content{
-    padding-top: 145px;
+    padding-top: 0;
     padding-left: 16px;
 }
 .aboutus_content h5{
@@ -1483,7 +1483,7 @@ textarea {
     z-index: -1;
 }
 .aboutpage_aboutus_content{
-    padding-top: 110px;
+    padding-top: 0;
 }
 .aboutpage_aboutus_content h5{
     text-transform: uppercase;