strap about page custom query

yoga-app/src/components/about.us.component.tsx

@@ -1,6 +1,14 @@
 import YogaImageComponent from "@/components/yoga.image.component";
 
-const AboutUsComponent = () =>{
+export interface Props{
+    title: string;
+    header: string;
+    description: string;
+    content: string;
+    buttonText: string,
+    buttonUrl: string
+}
+const AboutUsComponent = ({title,header,description,content,buttonText,buttonUrl}: Props) =>{
     return (
         <section className="aboutus_section">
             <div className="container">
@@ -18,15 +26,15 @@ const AboutUsComponent = () =>{
                     </div>
                     <div className="col-lg-5 col-md-5 col-sm-12 col-xs-12" data-aos="fade-right">
                         <div className="aboutus_content">
-                            <h5>About us</h5>
-                            <h2>Take Your Yoga to the Next Level</h2>
-                            <p>Quis autem vel eum iure reprehenderit qui in eao voluptate velit esse quam nihil molestiae consequatur vel illum.</p>
+                            <h5>{title}</h5>
+                            <h2>{header}</h2>
+                            <p>{description}</p>
                             <div className="aboutus_line_wrapper">
-                                <h6>Modi tempora incidunt ut labore dolore magnam aliquam auerat volutaem.</h6>
+                                <h6>{content}</h6>
                                 <figure className="mb-0 purple_line"><YogaImageComponent src="/assets/images/aboutus_line.png" alt="" className="img-fluid" /></figure>
                             </div>
                             <div className="btn_wrapper">
-                                <a href="/about" className="text-decoration-none get_started_btn">Get Started</a>
+                                <a href={buttonUrl} className="text-decoration-none get_started_btn">{buttonText}</a>
                             </div>
                         </div>
                     </div>

yoga-app/src/components/nav.component.tsx

@@ -36,7 +36,7 @@ const Nav: FC<Props> = ({menuItems}:Props) => {
                         </button>
                         <div className="collapse navbar-collapse" id="navbarSupportedContent">
                             <ul className="navbar-nav">
-                                {menuItems.map( menuItem => <MenuItemComponent menuItem={menuItem} />)}
+                                {menuItems.map( (menuItem,index) => <MenuItemComponent key={"nav"+menuItem.href+"_"+index} menuItem={menuItem} />)}
                             </ul>
                         </div>
                     </nav>
@@ -71,7 +71,7 @@ const MenuItemComponent: FC<MenuItemProps>  = ({menuItem, dropdownItem}: MenuIte
             <div className="dropdown-menu drop-down-content">
                 <ul className="list-unstyled drop-down-pages">
                     {
-                        menuItem.children.map(item => <MenuItemComponent menuItem={item}  dropdownItem={true}/>)
+                        menuItem.children.map((item,index) => <MenuItemComponent key={"child_"+item.href+"_"+index} menuItem={item}  dropdownItem={true}/>)
                     }
                 </ul>
             </div>

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

@@ -1,16 +1,20 @@
 import YogaImageComponent from "@/components/yoga.image.component";
 
-const OurServiceComponent = () => {
+export interface Props{
+    title: string;
+    header: string;
+    description: string;
+}
+const OurServiceComponent = ({title,header,description}: Props) => {
     return (
         <section className="services_section">
             <div className="container">
                 <div className="row">
                     <div className="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                         <div className="services_content">
-                            <h5>Our Services</h5>
-                            <h2>Practice Whereever You Want Whenever You Need </h2>
-                            <p>Taciti fames lacinia orci finibus metus elit tempus faucibus urna nunc dui rhoncus
-                                aibendum vea porttitor volutrat felis massa feugiat</p>
+                            <h5>{title}</h5>
+                            <h2>{header} </h2>
+                            <p>{description}</p>
                         </div>
                     </div>
                 </div>

yoga-app/src/components/subHeader.component.tsx

@@ -1,8 +1,13 @@
 import YogaImageComponent from "@/components/yoga.image.component";
 import Nav from "@/components/nav.component";
 import {MAIN_MENU} from "@/util/const";
+import {HeaderB} from "@/types/generated-strapi-interfaces/components/yoga-site/HeaderB";
 
-const SubHeaderComponent = () =>{
+
+export interface Props extends HeaderB{
+}
+
+const SubHeaderComponent = ({header1,header2,description}: Props) =>{
     return (
         <div className="sub-banner-section">
              <Nav menuItems={MAIN_MENU} />
@@ -11,8 +16,8 @@ const SubHeaderComponent = () =>{
                     <div className="row">
                         <div className="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                             <div className="banner-section-content">
-                                <h1 data-aos="fade-up">About Us</h1>
-                                <p data-aos="fade-right">Duis aute irure dolor in reprehenderit in volurate velit cillum nulla pariatur nostrud exercitation.</p>
+                                <h1 data-aos="fade-up">{header1}</h1>
+                                <p data-aos="fade-right">{description}</p>
                                 <div className="btn_wrapper">
                                     <span className="sub_home_span">Home </span><i className="fa-solid fa-angles-right" aria-hidden="true"></i><span className="sub_span"> About</span>
                                 </div>