convert about types from component to collection-type

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

@@ -13,27 +13,28 @@ import SubHeaderComponent from "@/components/subHeader.component";
 import BootstrapComponent from "@/components/bootstrap.component";
 import webApi from "@/app/api/web-client/web-api";
 import aboutUsComponent from "@/components/about.us.component";
+import pricingComponent from "@/components/pricing.component";
 
 export default async function About() {
     const pageData = await webApi.getAboutPage();
 
-    const {header,ourServices, aboutUs} = pageData;
+    const {header,
+        ourServices,
+        aboutUs,
+        contactUs,
+        ourSpecialities,
+        prices
+    } = pageData;
+
 
     return (
         <>
             <SubHeaderComponent header1={header?.header1} header2={header?.header2} description={header?.description}/>
             <OurServicesComponent title={ourServices?.title!} header={ourServices?.header!} description={ourServices?.description!}  />
-            <AboutUsComponent
-                title={aboutUs.title!}
-                header={aboutUs.header!}
-                description={aboutUs.description!}
-                content={aboutUs.content!}
-                buttonText={aboutUs.buttonLabel!}
-                buttonUrl={aboutUs.buttonLink!}
-            />
-            <OurSpecialitiesComponent />
-            <ContactUsComponent />
-            <PricingComponent />
+            { aboutUs && <AboutUsComponent data={aboutUs}/>}
+            { ourSpecialities && <OurSpecialitiesComponent config={ourSpecialities} /> }
+            { contactUs && <ContactUsComponent  contactUs={contactUs}/>}
+            { prices && <PricingComponent config={prices} /> }
             <QuotesComponent />
             <BlogPostsComponent />
             <SubscribeComponent />

yoga-app/src/app/api/strapi/query/about.json

@@ -0,0 +1,89 @@
+{
+  "populate": {
+    "header": {
+      "fields": ["header1","description"]
+    },
+    "feedbacks": {
+      "fields": ["*"],
+      "populate": {
+        "feedbacks": {
+          "fields": ["*"],
+          "populate": {
+            "customerImage": {
+              "fields": ["name","mime","url"]
+            }
+          }
+        }
+      }
+    },
+    "ourServices": {
+      "fields": ["*"],
+      "populate": {
+        "services": {
+          "fields": ["*"],
+          "populate": {
+            "image": {
+              "fields": ["name","mime","url"]
+            }
+          }
+        }
+      }
+    },
+    "aboutUs": {
+      "fields": ["*"],
+      "populate": {
+        "image": {
+          "fields": ["name","mime","url"]
+        }
+      }
+    },
+    "contactUs": {
+      "fields": ["*"]
+    },
+    "prices": {
+      "fields": ["*"],
+      "populate": {
+        "prices": {
+          "fields": ["*"],
+          "populate": {
+            "icon": {
+              "fields": ["name","mime","url"]
+            },
+            "image": {
+              "fields": ["name","mime","url"]
+            }
+          }
+        }
+      }
+    },
+    "ourSpecialities": {
+      "fields": ["*"] ,
+      "populate": {
+        "left1": {
+          "fields": ["*"]
+        },
+        "left2": {
+          "fields": ["*"]
+        },
+        "left3": {
+          "fields": ["*"]
+        },
+        "left4": {
+          "fields": ["*"]
+        },
+        "right1": {
+          "fields": ["*"]
+        },
+        "right2": {
+          "fields": ["*"]
+        },
+        "right3": {
+          "fields": ["*"]
+        },
+        "right4": {
+          "fields": ["*"]
+        }
+      }
+    }
+  }
+}

yoga-app/src/app/api/strapi/strapi-api.ts

@@ -1,16 +1,22 @@
 import {About_Plain} from "@/types/generated-strapi-interfaces/api/about";
 import strapiClient from "@/app/api/strapi/strapi-client";
-import {Payload} from "@/types/generated-strapi-interfaces/common/Payload";
 import {StrapiQuery} from "@/app/api/strapi/strapi-query";
+import qs from "qs";
+import aboutQuery from "@/app/api/strapi/query/about.json";
 
 
 class StrapiApi{
     constructor( ) {
     }
 
+
+    public getImageUrl(imagePath: string){
+        return strapiClient.getImageUrl(imagePath);
+    }
     public async getAboutPage(): Promise<About_Plain>{
+        const query = qs.stringify(aboutQuery,{ arrayFormat: 'indices' , encode: false})
         const payload =  await strapiClient.httpGetJson<About_Plain>(
-            StrapiQuery.aboutUrl
+            "/api/about?"+ query
 
         );
         return payload?.data;

yoga-app/src/app/api/strapi/strapi-client.ts

@@ -7,6 +7,9 @@ class StrapiClient{
 
     constructor(private strapiUrl: string = "http://localhost:1337") {
     }
+    public getImageUrl(imagePath: string){
+        return this.strapiUrl + imagePath;
+    }
     public async  httpGet(path: string){
         return await httpClient.httpGet(this.strapiUrl + path);
     }