strap about page custom query

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

@@ -11,13 +11,26 @@ import FooterComponent from "@/components/footer.component";
 import SubscribeComponent from "@/components/subscribe.component";
 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";
+
+export default async function About() {
+    const pageData = await webApi.getAboutPage();
+
+    const {header,ourServices, aboutUs} = pageData;
 
-export default function About() {
     return (
         <>
-            <SubHeaderComponent />
-            <OurServicesComponent />
-            <AboutUsComponent />
+            <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 />