add service detail page

yoga-app/src/app/services/[slug]/page.module.css

@@ -0,0 +1,3 @@
+.article h1{
+    color: black;
+}

yoga-app/src/app/services/[slug]/page.tsx

@@ -1,39 +1,45 @@
 import React from "react";
 import strapiApi from "@/api/strapi/strapi-api";
 import {BlocksContent, BlocksRenderer} from "@strapi/blocks-react-renderer";
+import SubscribeComponent from "@/components/subscribe.component";
+import FooterComponent from "@/components/footer.component";
+import SubHeaderComponent from "@/components/subHeader.component";
+import AosComponent from "@/components/aos.component";
+import styles from './page.module.css'
+import NextBlocksRenderer from "@/components/next.blocks.renderer";
+
 export default async function ServiceArticlePage({params}: {
-    params: Promise<{ slug: string}>
-} ) {
+    params: Promise<{ slug: string }>
+}) {
     const {slug} = await params
-    const {footer= undefined, subscribeNow = undefined} = await strapiApi.getServicePage();
+    const {header, description, footer, subscribeNow} = await strapiApi.getServicePage();
     const servicesByName = await strapiApi.getService(slug);
-    // return (
-    //     <>
-    //         {header && description && <SubHeaderComponent header1={header} description={description} />}
-    //         { ourServices && <OurServicesComponent  config={ourServices}  /> }
-    //         { contactUs && <ContactUsComponent contactUs={contactUs} />}
-    //         { ourSpecialities && <OurSpecialitiesComponent config={ourSpecialities} /> }
-    //         { feedbacks && <FeedbackComponent config={feedbacks} /> }
-    //         { blogs && <BlogPostsComponent config={blogs} /> }
-    //         { subscribe && <SubscribeComponent config={subscribe} /> }
-    //         { footer &&  <FooterComponent config={footer} /> }
-    //         <AosComponent />
-    //     </>
-    // );
-    console.info("slug", slug);
-    console.info("servicesByName", servicesByName);
     const selectedService = servicesByName[0];
     const article = selectedService.article;
-    console.info("article", article);
+    console.info(article);
 
     selectedService.article
-            return (
-                <>
-                    <BlocksRenderer content={article as BlocksContent} />
-                    { subscribeNow && <SubscribeComponent config={subscribeNow} /> }
-                    { footer &&  <FooterComponent config={footer} /> }
-                </>
-            );
+    return (
+        <>
+            {selectedService && selectedService.header && selectedService.description &&
+                <SubHeaderComponent header1={selectedService.header} description={selectedService.description}/>}
+            <section className={styles.article}>
+                <div className="container">
+                    <div className={"row"}>
+                        <div className={"col-lg-12 col-md-12 col-sm-12 col-xs-12"}>
+                            <NextBlocksRenderer
+                                content={article as BlocksContent}
+                            />
+                        </div>
+                    </div>
+                </div>
+
+            </section>
+            {subscribeNow && <SubscribeComponent config={subscribeNow}/>}
+            {footer && <FooterComponent config={footer}/>}
+            <AosComponent/>
+        </>
+    );
 }
 
 export const dynamic = 'force-dynamic'