strap about page custom query

api.http

@@ -8,6 +8,11 @@ Accept: application/json
 
 
 ### GET request with a header
-GET {{domain}}/api/about?locale=hu&populate=*
+GET {{domain}}/api/about?populate=deep
+Accept: application/json
+#Authorization: Bearer {{token}}
+
+### GET request with a header
+GET {{domain}}/api/about?populate[header][fields][0]=header1&populate[header][fields][1]=description&populate[ourServices][fields][0]=*&populate[aboutUs][fields][0]=*&populate[ourSpecialities][fields][0]=*&populate[ourSpecialities][populate][specialityLeft1][fields][0]=*&populate[ourSpecialities][populate][specialityLeft2][fields][0]=*&populate[ourSpecialities][populate][specialityLeft3][fields][0]=*&populate[ourSpecialities][populate][specialityLeft4][fields][0]=*&populate[ourSpecialities][populate][specialityRight1][fields][0]=*&populate[ourSpecialities][populate][specialityRight2][fields][0]=*&populate[ourSpecialities][populate][specialityRight3][fields][0]=*&populate[ourSpecialities][populate][specialityRight4][fields][0]=*
 Accept: application/json
 #Authorization: Bearer {{token}}

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

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

@@ -0,0 +1,20 @@
+
+
+class HttpClient{
+
+    public async  httpGet(url: string):Promise<Response>{
+        const response = await fetch(url,{
+            headers: {
+                'Content-type': 'application-json'
+            }
+        });
+        return response;
+
+    }
+
+}
+
+
+const client: HttpClient = new HttpClient();
+
+export default client;

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

@@ -1,7 +1,20 @@
+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";
 
 
 class StrapiApi{
-    constructor() {
+    constructor( ) {
+    }
+
+    public async getAboutPage(): Promise<About_Plain>{
+        const payload =  await strapiClient.httpGetJson<About_Plain>(
+            StrapiQuery.aboutUrl
+
+        );
+        return payload?.data;
+
     }
 
     public getHomePage(){

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

@@ -0,0 +1,40 @@
+import httpClient from "@/app/api/http-client";
+import {Payload} from "@/types/generated-strapi-interfaces/common/Payload";
+
+const STRAPI_URL =  process.env.STRAPI_URL;
+
+class StrapiClient{
+
+    constructor(private strapiUrl: string = "http://localhost:1337") {
+    }
+    public async  httpGet(path: string){
+        return await httpClient.httpGet(this.strapiUrl + path);
+    }
+    public async httpGetJson<T>(url: string): Promise<Payload<T>>{
+        const response =  await this.httpGet(url);
+        return await response.json();
+    }
+
+    public async findContentType<T>(contentType: string,options?: FindContentOptions): Promise<Payload<T>>{
+        const searchParams = new URLSearchParams();
+        if ( options?.populateAll ){
+            searchParams.append("populate","*");
+        }
+        if (options?.localeAll){
+            searchParams.append("_locale","all");
+        }
+
+
+
+        const response =  await this.httpGet("/api/"+contentType+"?"+searchParams.toString());
+        return await response.json();
+    }
+}
+
+export interface FindContentOptions{
+    populateAll?: boolean;
+    localeAll?: boolean;
+}
+
+const client = new StrapiClient(STRAPI_URL);
+export default client;

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

@@ -0,0 +1,3 @@
+export const StrapiQuery = {
+    aboutUrl: "/api/about?populate[header][fields][0]=header1&populate[header][fields][1]=description&populate[ourServices][fields][0]=*&populate[aboutUs][fields][0]=*&populate[ourSpecialities][fields][0]=*&populate[ourSpecialities][populate][specialityLeft1][fields][0]=*&populate[ourSpecialities][populate][specialityLeft2][fields][0]=*&populate[ourSpecialities][populate][specialityLeft3][fields][0]=*&populate[ourSpecialities][populate][specialityLeft4][fields][0]=*&populate[ourSpecialities][populate][specialityRight1][fields][0]=*&populate[ourSpecialities][populate][specialityRight2][fields][0]=*&populate[ourSpecialities][populate][specialityRight3][fields][0]=*&populate[ourSpecialities][populate][specialityRight4][fields][0]=*"
+}

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

@@ -0,0 +1,20 @@
+
+import {About_Plain} from '@/types/generated-strapi-interfaces/api/about';
+import strapiApi from "@/app/api/strapi/strapi-api";
+
+
+class WebApi {
+
+    public getHomePage(){
+
+    }
+
+    public async getAboutPage(): Promise<About_Plain> {
+        return await strapiApi.getAboutPage();
+    }
+}
+
+
+const client = new WebApi();
+
+export default client;

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

@@ -1,15 +0,0 @@
-
-
-
-class WebClient {
-
-    public getHomePage(){
-
-    }
-
-}
-
-
-const client = new WebClient();
-
-export default client;

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>

yoga-app/src/types/generated-strapi-interfaces/api/about.ts

@@ -1,34 +1,55 @@
 // Interface automatically generated by schemas-to-ts
 
-import { Media } from '../components/shared/Media';
-import { Media_Plain } from '../components/shared/Media';
-import { AdminPanelRelationPropertyModification } from '../common/AdminPanelRelationPropertyModification';
+import { HeaderB } from '../components/yoga-site/HeaderB';
+import { OurServicesComponent } from '../components/yoga-site/OurServicesComponent';
+import { AboutUs } from '../components/yoga-site/AboutUs';
+import { OurSpecialitiesComponent } from '../components/yoga-site/OurSpecialitiesComponent';
+import { HeaderB_Plain } from '../components/yoga-site/HeaderB';
+import { OurServicesComponent_Plain } from '../components/yoga-site/OurServicesComponent';
+import { AboutUs_Plain } from '../components/yoga-site/AboutUs';
+import { OurSpecialitiesComponent_Plain } from '../components/yoga-site/OurSpecialitiesComponent';
+import { HeaderB_NoRelations } from '../components/yoga-site/HeaderB';
+import { OurServicesComponent_NoRelations } from '../components/yoga-site/OurServicesComponent';
+import { AboutUs_NoRelations } from '../components/yoga-site/AboutUs';
+import { OurSpecialitiesComponent_NoRelations } from '../components/yoga-site/OurSpecialitiesComponent';
 
 export interface About {
   id: number;
   attributes: {
-    createdAt: Date;    updatedAt: Date;    publishedAt?: Date;    title?: string;
-    description?: any;
-    image?: { data: Media };
+    createdAt: Date;    updatedAt: Date;    publishedAt?: Date;    header?: HeaderB;
+    ourServices: OurServicesComponent;
+    aboutUs: AboutUs;
+    ourSpecialities?: OurSpecialitiesComponent;
+    locale: string;
+    localizations?: { data: About[] };
   };
 }
 export interface About_Plain {
   id: number;
-  createdAt: Date;  updatedAt: Date;  publishedAt?: Date;  title?: string;
-  description?: any;
-  image?: Media_Plain;
+  createdAt: Date;  updatedAt: Date;  publishedAt?: Date;  header?: HeaderB_Plain;
+  ourServices: OurServicesComponent_Plain;
+  aboutUs: AboutUs_Plain;
+  ourSpecialities?: OurSpecialitiesComponent_Plain;
+  locale: string;
+  localizations?: About_Plain[];
 }
 
 export interface About_NoRelations {
   id: number;
-  createdAt: Date;  updatedAt: Date;  publishedAt?: Date;  title?: string;
-  description?: any;
-  image?: number;
+  createdAt: Date;  updatedAt: Date;  publishedAt?: Date;  header?: HeaderB_NoRelations;
+  ourServices: OurServicesComponent_NoRelations;
+  aboutUs: AboutUs_NoRelations;
+  ourSpecialities?: OurSpecialitiesComponent_NoRelations;
+  locale: string;
+  localizations?: About[];
 }
 
 export interface About_AdminPanelLifeCycle {
   id: number;
-  createdAt: Date;  updatedAt: Date;  publishedAt?: Date;  title?: string;
-  description?: any;
-  image?: AdminPanelRelationPropertyModification<Media_Plain>;
+  createdAt: Date;  updatedAt: Date;  publishedAt?: Date;  header?: HeaderB_Plain;
+  ourServices: OurServicesComponent_Plain;
+  aboutUs: AboutUs_Plain;
+  ourSpecialities?: OurSpecialitiesComponent_Plain;
+  locale: string;
+  localizations?: About[];
 }

yoga-app/src/types/generated-strapi-interfaces/components/shared/TitleDescription.ts

@@ -0,0 +1,16 @@
+// Interface automatically generated by schemas-to-ts
+
+export interface TitleDescription {
+  title?: string;
+  description?: string;
+}
+export interface TitleDescription_Plain {
+  title?: string;
+  description?: string;
+}
+
+export interface TitleDescription_NoRelations {
+  title?: string;
+  description?: string;
+}
+

yoga-app/src/types/generated-strapi-interfaces/components/yoga-site/AboutUs.ts

@@ -0,0 +1,28 @@
+// Interface automatically generated by schemas-to-ts
+
+export interface AboutUs {
+  title?: string;
+  header?: string;
+  description?: string;
+  content?: string;
+  buttonLabel?: string;
+  buttonLink?: string;
+}
+export interface AboutUs_Plain {
+  title?: string;
+  header?: string;
+  description?: string;
+  content?: string;
+  buttonLabel?: string;
+  buttonLink?: string;
+}
+
+export interface AboutUs_NoRelations {
+  title?: string;
+  header?: string;
+  description?: string;
+  content?: string;
+  buttonLabel?: string;
+  buttonLink?: string;
+}
+

yoga-app/src/types/generated-strapi-interfaces/components/yoga-site/HeaderB.ts

@@ -0,0 +1,19 @@
+// Interface automatically generated by schemas-to-ts
+
+export interface HeaderB {
+  header1?: string;
+  header2?: string;
+  description?: string;
+}
+export interface HeaderB_Plain {
+  header1?: string;
+  header2?: string;
+  description?: string;
+}
+
+export interface HeaderB_NoRelations {
+  header1?: string;
+  header2?: string;
+  description?: string;
+}
+

yoga-app/src/types/generated-strapi-interfaces/components/yoga-site/OurServicesComponent.ts

@@ -0,0 +1,19 @@
+// Interface automatically generated by schemas-to-ts
+
+export interface OurServicesComponent {
+  title?: string;
+  header?: string;
+  description?: string;
+}
+export interface OurServicesComponent_Plain {
+  title?: string;
+  header?: string;
+  description?: string;
+}
+
+export interface OurServicesComponent_NoRelations {
+  title?: string;
+  header?: string;
+  description?: string;
+}
+

yoga-app/src/types/generated-strapi-interfaces/components/yoga-site/OurSpecialitiesComponent.ts

@@ -0,0 +1,47 @@
+// Interface automatically generated by schemas-to-ts
+
+import { TitleDescription } from '../shared/TitleDescription';
+import { TitleDescription_Plain } from '../shared/TitleDescription';
+import { TitleDescription_NoRelations } from '../shared/TitleDescription';
+
+export interface OurSpecialitiesComponent {
+  title?: string;
+  header?: string;
+  description?: string;
+  specialityLeft1?: TitleDescription;
+  specialityLeft2?: TitleDescription;
+  specialityLeft3?: TitleDescription;
+  specialityLeft4?: TitleDescription;
+  specialityRight1?: TitleDescription;
+  specialityRight2?: TitleDescription;
+  specialityRight3?: TitleDescription;
+  specialityRight4?: TitleDescription;
+}
+export interface OurSpecialitiesComponent_Plain {
+  title?: string;
+  header?: string;
+  description?: string;
+  specialityLeft1?: TitleDescription_Plain;
+  specialityLeft2?: TitleDescription_Plain;
+  specialityLeft3?: TitleDescription_Plain;
+  specialityLeft4?: TitleDescription_Plain;
+  specialityRight1?: TitleDescription_Plain;
+  specialityRight2?: TitleDescription_Plain;
+  specialityRight3?: TitleDescription_Plain;
+  specialityRight4?: TitleDescription_Plain;
+}
+
+export interface OurSpecialitiesComponent_NoRelations {
+  title?: string;
+  header?: string;
+  description?: string;
+  specialityLeft1?: TitleDescription_NoRelations;
+  specialityLeft2?: TitleDescription_NoRelations;
+  specialityLeft3?: TitleDescription_NoRelations;
+  specialityLeft4?: TitleDescription_NoRelations;
+  specialityRight1?: TitleDescription_NoRelations;
+  specialityRight2?: TitleDescription_NoRelations;
+  specialityRight3?: TitleDescription_NoRelations;
+  specialityRight4?: TitleDescription_NoRelations;
+}
+

yoga-app/src/util/i18n.util.ts

@@ -0,0 +1,21 @@
+export interface LocalizedObject<T> {
+    locale: string;
+    localizations?: LocalizedObject<T>[];
+}
+
+export function getLocalizedObject<T>(localizedObject: LocalizedObject<T>, locale: string = "hu"): T {
+    const defaultObject = localizedObject;
+    if ( defaultObject.locale == locale ){
+        return defaultObject as T;
+    }
+    if (localizedObject && localizedObject.localizations) {
+        for (let i = 0; i < (localizedObject?.localizations?.length || 0); i++) {
+            const obj: LocalizedObject<T> = localizedObject.localizations[i];
+            if ( obj.locale == locale ){
+                return obj as T;
+            }
+        }
+    }
+    return defaultObject as T;
+
+}

yoga-cms/auto-gen-queries/about.json

@@ -0,0 +1,42 @@
+{
+  populate: {
+    header: {
+      fields: ['header1','description']
+    },
+    ourServices: {
+      fields: ['*']
+    },
+    aboutUs: {
+      fields: ['*']
+    },
+    ourSpecialities: {
+      fields: ['*'] ,
+      populate: {
+        specialityLeft1: {
+          fields: ['*'] ,
+        },
+        specialityLeft2: {
+          fields: ['*'] ,
+        },
+        specialityLeft3: {
+          fields: ['*'] ,
+        },
+        specialityLeft4: {
+          fields: ['*'] ,
+        },
+        specialityRight1: {
+          fields: ['*'] ,
+        },
+        specialityRight2: {
+          fields: ['*'] ,
+        },
+        specialityRight3: {
+          fields: ['*'] ,
+        },
+        specialityRight4: {
+          fields: ['*'] ,
+        },
+      }
+    }
+  },
+}

yoga-cms/auto-gen-queries/about.txt

@@ -0,0 +1 @@
+/api/about?populate[header][fields][0]=header1&populate[header][fields][1]=description&populate[ourServices][fields][0]=*&populate[aboutUs][fields][0]=*&populate[ourSpecialities][fields][0]=*&populate[ourSpecialities][populate][specialityLeft1][fields][0]=*&populate[ourSpecialities][populate][specialityLeft2][fields][0]=*&populate[ourSpecialities][populate][specialityLeft3][fields][0]=*&populate[ourSpecialities][populate][specialityLeft4][fields][0]=*&populate[ourSpecialities][populate][specialityRight1][fields][0]=*&populate[ourSpecialities][populate][specialityRight2][fields][0]=*&populate[ourSpecialities][populate][specialityRight3][fields][0]=*&populate[ourSpecialities][populate][specialityRight4][fields][0]=*

yoga-cms/config/plugins.ts

@@ -6,4 +6,9 @@ export default () => ({
             logLevel: 2
         }
     },
+    'strapi-plugin-populate-deep': {
+        config: {
+            defaultDepth: 3, // Default is 5
+        }
+    },
 });

yoga-cms/generated-strapi-interfaces/api/about.ts

@@ -1,34 +1,55 @@
 // Interface automatically generated by schemas-to-ts
 
-import { Media } from '../components/shared/Media';
-import { Media_Plain } from '../components/shared/Media';
-import { AdminPanelRelationPropertyModification } from '../common/AdminPanelRelationPropertyModification';
+import { HeaderB } from '../components/yoga-site/HeaderB';
+import { OurServicesComponent } from '../components/yoga-site/OurServicesComponent';
+import { AboutUs } from '../components/yoga-site/AboutUs';
+import { OurSpecialitiesComponent } from '../components/yoga-site/OurSpecialitiesComponent';
+import { HeaderB_Plain } from '../components/yoga-site/HeaderB';
+import { OurServicesComponent_Plain } from '../components/yoga-site/OurServicesComponent';
+import { AboutUs_Plain } from '../components/yoga-site/AboutUs';
+import { OurSpecialitiesComponent_Plain } from '../components/yoga-site/OurSpecialitiesComponent';
+import { HeaderB_NoRelations } from '../components/yoga-site/HeaderB';
+import { OurServicesComponent_NoRelations } from '../components/yoga-site/OurServicesComponent';
+import { AboutUs_NoRelations } from '../components/yoga-site/AboutUs';
+import { OurSpecialitiesComponent_NoRelations } from '../components/yoga-site/OurSpecialitiesComponent';
 
 export interface About {
   id: number;
   attributes: {
-    createdAt: Date;    updatedAt: Date;    publishedAt?: Date;    title?: string;
-    description?: any;
-    image?: { data: Media };
+    createdAt: Date;    updatedAt: Date;    publishedAt?: Date;    header?: HeaderB;
+    ourServices: OurServicesComponent;
+    aboutUs: AboutUs;
+    ourSpecialities?: OurSpecialitiesComponent;
+    locale: string;
+    localizations?: { data: About[] };
   };
 }
 export interface About_Plain {
   id: number;
-  createdAt: Date;  updatedAt: Date;  publishedAt?: Date;  title?: string;
-  description?: any;
-  image?: Media_Plain;
+  createdAt: Date;  updatedAt: Date;  publishedAt?: Date;  header?: HeaderB_Plain;
+  ourServices: OurServicesComponent_Plain;
+  aboutUs: AboutUs_Plain;
+  ourSpecialities?: OurSpecialitiesComponent_Plain;
+  locale: string;
+  localizations?: About_Plain[];
 }
 
 export interface About_NoRelations {
   id: number;
-  createdAt: Date;  updatedAt: Date;  publishedAt?: Date;  title?: string;
-  description?: any;
-  image?: number;
+  createdAt: Date;  updatedAt: Date;  publishedAt?: Date;  header?: HeaderB_NoRelations;
+  ourServices: OurServicesComponent_NoRelations;
+  aboutUs: AboutUs_NoRelations;
+  ourSpecialities?: OurSpecialitiesComponent_NoRelations;
+  locale: string;
+  localizations?: About[];
 }
 
 export interface About_AdminPanelLifeCycle {
   id: number;
-  createdAt: Date;  updatedAt: Date;  publishedAt?: Date;  title?: string;
-  description?: any;
-  image?: AdminPanelRelationPropertyModification<Media_Plain>;
+  createdAt: Date;  updatedAt: Date;  publishedAt?: Date;  header?: HeaderB_Plain;
+  ourServices: OurServicesComponent_Plain;
+  aboutUs: AboutUs_Plain;
+  ourSpecialities?: OurSpecialitiesComponent_Plain;
+  locale: string;
+  localizations?: About[];
 }

yoga-cms/generated-strapi-interfaces/components/shared/TitleDescription.ts

@@ -0,0 +1,16 @@
+// Interface automatically generated by schemas-to-ts
+
+export interface TitleDescription {
+  title?: string;
+  description?: string;
+}
+export interface TitleDescription_Plain {
+  title?: string;
+  description?: string;
+}
+
+export interface TitleDescription_NoRelations {
+  title?: string;
+  description?: string;
+}
+

yoga-cms/generated-strapi-interfaces/components/yoga-site/AboutUs.ts

@@ -0,0 +1,28 @@
+// Interface automatically generated by schemas-to-ts
+
+export interface AboutUs {
+  title?: string;
+  header?: string;
+  description?: string;
+  content?: string;
+  buttonLabel?: string;
+  buttonLink?: string;
+}
+export interface AboutUs_Plain {
+  title?: string;
+  header?: string;
+  description?: string;
+  content?: string;
+  buttonLabel?: string;
+  buttonLink?: string;
+}
+
+export interface AboutUs_NoRelations {
+  title?: string;
+  header?: string;
+  description?: string;
+  content?: string;
+  buttonLabel?: string;
+  buttonLink?: string;
+}
+

yoga-cms/generated-strapi-interfaces/components/yoga-site/HeaderB.ts

@@ -0,0 +1,19 @@
+// Interface automatically generated by schemas-to-ts
+
+export interface HeaderB {
+  header1?: string;
+  header2?: string;
+  description?: string;
+}
+export interface HeaderB_Plain {
+  header1?: string;
+  header2?: string;
+  description?: string;
+}
+
+export interface HeaderB_NoRelations {
+  header1?: string;
+  header2?: string;
+  description?: string;
+}
+

yoga-cms/generated-strapi-interfaces/components/yoga-site/OurServicesComponent.ts

@@ -0,0 +1,19 @@
+// Interface automatically generated by schemas-to-ts
+
+export interface OurServicesComponent {
+  title?: string;
+  header?: string;
+  description?: string;
+}
+export interface OurServicesComponent_Plain {
+  title?: string;
+  header?: string;
+  description?: string;
+}
+
+export interface OurServicesComponent_NoRelations {
+  title?: string;
+  header?: string;
+  description?: string;
+}
+

yoga-cms/generated-strapi-interfaces/components/yoga-site/OurSpecialitiesComponent.ts

@@ -0,0 +1,47 @@
+// Interface automatically generated by schemas-to-ts
+
+import { TitleDescription } from '../shared/TitleDescription';
+import { TitleDescription_Plain } from '../shared/TitleDescription';
+import { TitleDescription_NoRelations } from '../shared/TitleDescription';
+
+export interface OurSpecialitiesComponent {
+  title?: string;
+  header?: string;
+  description?: string;
+  specialityLeft1?: TitleDescription;
+  specialityLeft2?: TitleDescription;
+  specialityLeft3?: TitleDescription;
+  specialityLeft4?: TitleDescription;
+  specialityRight1?: TitleDescription;
+  specialityRight2?: TitleDescription;
+  specialityRight3?: TitleDescription;
+  specialityRight4?: TitleDescription;
+}
+export interface OurSpecialitiesComponent_Plain {
+  title?: string;
+  header?: string;
+  description?: string;
+  specialityLeft1?: TitleDescription_Plain;
+  specialityLeft2?: TitleDescription_Plain;
+  specialityLeft3?: TitleDescription_Plain;
+  specialityLeft4?: TitleDescription_Plain;
+  specialityRight1?: TitleDescription_Plain;
+  specialityRight2?: TitleDescription_Plain;
+  specialityRight3?: TitleDescription_Plain;
+  specialityRight4?: TitleDescription_Plain;
+}
+
+export interface OurSpecialitiesComponent_NoRelations {
+  title?: string;
+  header?: string;
+  description?: string;
+  specialityLeft1?: TitleDescription_NoRelations;
+  specialityLeft2?: TitleDescription_NoRelations;
+  specialityLeft3?: TitleDescription_NoRelations;
+  specialityLeft4?: TitleDescription_NoRelations;
+  specialityRight1?: TitleDescription_NoRelations;
+  specialityRight2?: TitleDescription_NoRelations;
+  specialityRight3?: TitleDescription_NoRelations;
+  specialityRight4?: TitleDescription_NoRelations;
+}
+

yoga-cms/src/api/about/content-types/about/schema.json

@@ -10,24 +10,53 @@
   "options": {
     "draftAndPublish": true
   },
-  "pluginOptions": {},
+  "pluginOptions": {
+    "i18n": {
+      "localized": true
+    }
+  },
   "attributes": {
-    "title": {
-      "type": "string"
+    "header": {
+      "type": "component",
+      "repeatable": false,
+      "component": "yoga-site.header-b",
+      "pluginOptions": {
+        "i18n": {
+          "localized": true
+        }
+      }
     },
-    "description": {
-      "type": "blocks"
+    "ourServices": {
+      "type": "component",
+      "repeatable": false,
+      "pluginOptions": {
+        "i18n": {
+          "localized": true
+        }
       },
-    "image": {
-      "type": "media",
-      "multiple": false,
-      "required": false,
-      "allowedTypes": [
-        "images",
-        "files",
-        "videos",
-        "audios"
-      ]
+      "component": "yoga-site.our-services-component",
+      "required": true
+    },
+    "aboutUs": {
+      "type": "component",
+      "repeatable": false,
+      "pluginOptions": {
+        "i18n": {
+          "localized": true
+        }
+      },
+      "component": "yoga-site.about-us",
+      "required": true
+    },
+    "ourSpecialities": {
+      "type": "component",
+      "repeatable": false,
+      "pluginOptions": {
+        "i18n": {
+          "localized": true
+        }
+      },
+      "component": "yoga-site.our-specialities-component"
     }
   }
 }

yoga-cms/src/components/shared/title-description.json

@@ -0,0 +1,15 @@
+{
+  "collectionName": "components_shared_title_descriptions",
+  "info": {
+    "displayName": "TitleDescription"
+  },
+  "options": {},
+  "attributes": {
+    "title": {
+      "type": "string"
+    },
+    "description": {
+      "type": "text"
+    }
+  }
+}

yoga-cms/src/components/yoga-site/about-us.json

@@ -0,0 +1,27 @@
+{
+  "collectionName": "components_yoga_site_aboutuses",
+  "info": {
+    "displayName": "aboutUs"
+  },
+  "options": {},
+  "attributes": {
+    "title": {
+      "type": "string"
+    },
+    "header": {
+      "type": "string"
+    },
+    "description": {
+      "type": "text"
+    },
+    "content": {
+      "type": "text"
+    },
+    "buttonLabel": {
+      "type": "string"
+    },
+    "buttonLink": {
+      "type": "string"
+    }
+  }
+}

yoga-cms/src/components/yoga-site/header-b.json

@@ -0,0 +1,19 @@
+{
+  "collectionName": "components_yoga_site_header_bs",
+  "info": {
+    "displayName": "HeaderB",
+    "description": ""
+  },
+  "options": {},
+  "attributes": {
+    "header1": {
+      "type": "string"
+    },
+    "header2": {
+      "type": "string"
+    },
+    "description": {
+      "type": "text"
+    }
+  }
+}

yoga-cms/src/components/yoga-site/our-services-component.json

@@ -0,0 +1,19 @@
+{
+  "collectionName": "components_yoga_site_our_services_components",
+  "info": {
+    "displayName": "OurServicesComponent",
+    "description": ""
+  },
+  "options": {},
+  "attributes": {
+    "title": {
+      "type": "string"
+    },
+    "header": {
+      "type": "string"
+    },
+    "description": {
+      "type": "text"
+    }
+  }
+}

yoga-cms/src/components/yoga-site/our-specialities-component.json

@@ -0,0 +1,59 @@
+{
+  "collectionName": "components_yoga_site_our_specialities_components",
+  "info": {
+    "displayName": "OurSpecialitiesComponent",
+    "description": ""
+  },
+  "options": {},
+  "attributes": {
+    "title": {
+      "type": "string"
+    },
+    "header": {
+      "type": "string"
+    },
+    "description": {
+      "type": "text"
+    },
+    "specialityLeft1": {
+      "type": "component",
+      "repeatable": false,
+      "component": "shared.title-description"
+    },
+    "specialityLeft2": {
+      "type": "component",
+      "repeatable": false,
+      "component": "shared.title-description"
+    },
+    "specialityLeft3": {
+      "type": "component",
+      "repeatable": false,
+      "component": "shared.title-description"
+    },
+    "specialityLeft4": {
+      "type": "component",
+      "repeatable": false,
+      "component": "shared.title-description"
+    },
+    "specialityRight1": {
+      "type": "component",
+      "repeatable": false,
+      "component": "shared.title-description"
+    },
+    "specialityRight2": {
+      "type": "component",
+      "repeatable": false,
+      "component": "shared.title-description"
+    },
+    "specialityRight3": {
+      "type": "component",
+      "repeatable": false,
+      "component": "shared.title-description"
+    },
+    "specialityRight4": {
+      "type": "component",
+      "repeatable": false,
+      "component": "shared.title-description"
+    }
+  }
+}

yoga-cms/types/generated/components.d.ts

@@ -73,6 +73,104 @@ export interface SharedSlider extends Struct.ComponentSchema {
   };
 }
 
+export interface SharedTitleDescription extends Struct.ComponentSchema {
+  collectionName: 'components_shared_title_descriptions';
+  info: {
+    displayName: 'TitleDescription';
+  };
+  attributes: {
+    description: Schema.Attribute.Text;
+    title: Schema.Attribute.String;
+  };
+}
+
+export interface YogaSiteAboutUs extends Struct.ComponentSchema {
+  collectionName: 'components_yoga_site_aboutuses';
+  info: {
+    displayName: 'aboutUs';
+  };
+  attributes: {
+    buttonLabel: Schema.Attribute.String;
+    buttonLink: Schema.Attribute.String;
+    content: Schema.Attribute.Text;
+    description: Schema.Attribute.Text;
+    header: Schema.Attribute.String;
+    title: Schema.Attribute.String;
+  };
+}
+
+export interface YogaSiteHeaderB extends Struct.ComponentSchema {
+  collectionName: 'components_yoga_site_header_bs';
+  info: {
+    description: '';
+    displayName: 'HeaderB';
+  };
+  attributes: {
+    description: Schema.Attribute.Text;
+    header1: Schema.Attribute.String;
+    header2: Schema.Attribute.String;
+  };
+}
+
+export interface YogaSiteOurServicesComponent extends Struct.ComponentSchema {
+  collectionName: 'components_yoga_site_our_services_components';
+  info: {
+    description: '';
+    displayName: 'OurServicesComponent';
+  };
+  attributes: {
+    description: Schema.Attribute.Text;
+    header: Schema.Attribute.String;
+    title: Schema.Attribute.String;
+  };
+}
+
+export interface YogaSiteOurSpecialitiesComponent
+  extends Struct.ComponentSchema {
+  collectionName: 'components_yoga_site_our_specialities_components';
+  info: {
+    description: '';
+    displayName: 'OurSpecialitiesComponent';
+  };
+  attributes: {
+    description: Schema.Attribute.Text;
+    header: Schema.Attribute.String;
+    specialityLeft1: Schema.Attribute.Component<
+      'shared.title-description',
+      false
+    >;
+    specialityLeft2: Schema.Attribute.Component<
+      'shared.title-description',
+      false
+    >;
+    specialityLeft3: Schema.Attribute.Component<
+      'shared.title-description',
+      false
+    >;
+    specialityLeft4: Schema.Attribute.Component<
+      'shared.title-description',
+      false
+    >;
+    specialityRight1: Schema.Attribute.Component<
+      'shared.title-description',
+      false
+    >;
+    specialityRight2: Schema.Attribute.Component<
+      'shared.title-description',
+      false
+    >;
+    specialityRight3: Schema.Attribute.Component<
+      'shared.title-description',
+      false
+    >;
+    specialityRight4: Schema.Attribute.Component<
+      'shared.title-description',
+      false
+    >;
+    title: Schema.Attribute.String;
+  };
+}
+
 declare module '@strapi/strapi' {
   export module Public {
     export interface ComponentSchemas {
@@ -82,6 +180,11 @@ declare module '@strapi/strapi' {
       'shared.rich-text': SharedRichText;
       'shared.seo': SharedSeo;
       'shared.slider': SharedSlider;
+      'shared.title-description': SharedTitleDescription;
+      'yoga-site.about-us': YogaSiteAboutUs;
+      'yoga-site.header-b': YogaSiteHeaderB;
+      'yoga-site.our-services-component': YogaSiteOurServicesComponent;
+      'yoga-site.our-specialities-component': YogaSiteOurSpecialitiesComponent;
     }
   }
 }

yoga-cms/types/generated/contentTypes.d.ts

@@ -380,17 +380,50 @@ export interface ApiAboutAbout extends Struct.SingleTypeSchema {
   options: {
     draftAndPublish: true;
   };
+  pluginOptions: {
+    i18n: {
+      localized: true;
+    };
+  };
   attributes: {
+    aboutUs: Schema.Attribute.Component<'yoga-site.about-us', false> &
+      Schema.Attribute.Required &
+      Schema.Attribute.SetPluginOptions<{
+        i18n: {
+          localized: true;
+        };
+      }>;
     createdAt: Schema.Attribute.DateTime;
     createdBy: Schema.Attribute.Relation<'oneToOne', 'admin::user'> &
       Schema.Attribute.Private;
-    description: Schema.Attribute.Blocks;
-    image: Schema.Attribute.Media<'images' | 'files' | 'videos' | 'audios'>;
-    locale: Schema.Attribute.String & Schema.Attribute.Private;
-    localizations: Schema.Attribute.Relation<'oneToMany', 'api::about.about'> &
-      Schema.Attribute.Private;
+    header: Schema.Attribute.Component<'yoga-site.header-b', false> &
+      Schema.Attribute.SetPluginOptions<{
+        i18n: {
+          localized: true;
+        };
+      }>;
+    locale: Schema.Attribute.String;
+    localizations: Schema.Attribute.Relation<'oneToMany', 'api::about.about'>;
+    ourServices: Schema.Attribute.Component<
+      'yoga-site.our-services-component',
+      false
+    > &
+      Schema.Attribute.Required &
+      Schema.Attribute.SetPluginOptions<{
+        i18n: {
+          localized: true;
+        };
+      }>;
+    ourSpecialities: Schema.Attribute.Component<
+      'yoga-site.our-specialities-component',
+      false
+    > &
+      Schema.Attribute.SetPluginOptions<{
+        i18n: {
+          localized: true;
+        };
+      }>;
     publishedAt: Schema.Attribute.DateTime;
-    title: Schema.Attribute.String;
     updatedAt: Schema.Attribute.DateTime;
     updatedBy: Schema.Attribute.Relation<'oneToOne', 'admin::user'> &
       Schema.Attribute.Private;