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 />