add faq page

yoga-app/src/api/strapi/query/faq.json

@@ -0,0 +1,66 @@
+{
+  "fields": ["*"],
+  "populate": {
+    "questionsAndAnswers": {
+      "fields": ["*"],
+      "populate": {
+        "questionsAndAnswers": {
+          "fields": ["*"]
+        }
+      }
+    },
+    "achievements": {
+      "fields": ["*"],
+      "populate": {
+        "achievements": {
+          "fields": ["*"],
+          "populate": {
+            "image": {
+              "fields": ["name","mime","url"]
+            }
+          }
+        }
+      }
+    },
+
+    "blogs": {
+      "fields": ["*"],
+      "populate": {
+        "button": {
+          "fields": ["*"]
+        },
+        "posts": {
+          "fields": ["name", "id", "header","documentId" ],
+          "populate": {
+            "tags": {
+              "fields": ["*" ]
+            },
+            "teaserImage": {
+              "fields": ["name","mime","url"]
+            }
+          }
+        }
+      }
+    },
+    "subscribe": {
+      "fields": ["*"]
+    },
+    "footer": {
+      "fields": ["*"],
+      "populate": {
+        "links": {
+          "fields": ["*"]
+        },
+        "contactUsEmail": {
+          "fields": ["*"]
+        },
+        "contactUsLocation": {
+          "fields": ["*"]
+        },
+        "contactUsPhoneNumber": {
+          "fields": ["*"]
+        }
+      }
+    }
+  }
+}

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

@@ -5,10 +5,12 @@ import aboutQuery from "@/api/strapi/query/about.json";
 import homeQuery from "@/api/strapi/query/home.json";
 import servicesQuery from "@/api/strapi/query/services.json";
 import pricesQuery from "@/api/strapi/query/prices.json";
+import faqQuery from "@/api/strapi/query/faq.json";
 import {YogaBlogPost_Plain} from "@/types/generated-strapi-interfaces/api/yoga-blog-post";
 import {Home_Plain} from "@/types/generated-strapi-interfaces/api/home";
 import {ServicesPage_Plain} from "@/types/generated-strapi-interfaces/api/services-page";
 import {PricesPage_Plain} from "@/types/generated-strapi-interfaces/api/prices-page";
+import {FaqPage_Plain} from "@/types/generated-strapi-interfaces/api/faq-page";
 
 
 class StrapiApi{
@@ -42,6 +44,10 @@ class StrapiApi{
         return this.getJson("/api/prices-page?",pricesQuery);
     }
 
+    public getFaqPage(): Promise<FaqPage_Plain>{
+        return this.getJson("/api/faq-page?",faqQuery);
+    }
+
 
     public getBlog(blogId: string): Promise<YogaBlogPost_Plain>{
         return this.getJson("/api/yoga-blog-posts/"+blogId,undefined);

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

@@ -9,19 +9,26 @@ import FeedbackComponent from "@/components/feedbackComponent";
 import BlogPostsComponent from "@/components/blog.posts.component";
 import FooterComponent from "@/components/footer.component";
 import SubscribeComponent from "@/components/subscribe.component";
+import strapiApi from "@/api/strapi/strapi-api";
+import SubHeaderComponent from "@/components/subHeader.component";
+import FaqComponent from "@/components/faq.component";
 
-export default function About() {
+export default async function About() {
+    const {
+        header,
+        description,
+        questionsAndAnswers,
+        blogs,
+        subscribe,
+        footer
+    } = await strapiApi.getFaqPage();
     return (
         <>
-            <OurServicesComponent />
-            <AboutUsComponent />
-            <OurSpecialitiesComponent />
-            <ContactUsComponent />
-            <PricingComponent />
-            <FeedbackComponent />
-            <BlogPostsComponent />
-            <SubscribeComponent />
-            <FooterComponent />
+            { <SubHeaderComponent header1={header} description={description} /> }
+            { questionsAndAnswers &&  <FaqComponent config={questionsAndAnswers} /> }
+            { blogs && <BlogPostsComponent config={blogs} /> }
+            { subscribe && <SubscribeComponent config={subscribe} /> }
+            { footer && <FooterComponent config={footer} /> }
             <AosComponent />
         </>
 

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

@@ -13,6 +13,7 @@ const pathToBreadCrumbs = (path: string) => {
         '/' : 'Kezdőlap',
         'about' : 'Rólam',
         'services' : 'Szolgáltatásaim',
+        'prices' : 'Áraim',
     }
     if ( mapping.hasOwnProperty(path)){
         return mapping[path];

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

@@ -0,0 +1,74 @@
+"use client"
+import {YogaFaqComponent_Plain} from "@/types/generated-strapi-interfaces/api/yoga-faq-component";
+import {useState} from "react";
+import FaqQaComponent from "@/components/faq.qa.component";
+import { MouseEvent } from 'react'
+
+
+export interface Props {
+    config: YogaFaqComponent_Plain
+}
+
+export default function FaqComponent({
+                                         config: {
+                                             title,
+                                             header,
+                                             description,
+                                             questionsAndAnswers
+                                         }
+                                     }: Props) {
+
+    const [selectedQAs, setSelectedQAs] = useState([] as number[]);
+
+    const onQAClick = (id: number) => {
+        if (selectedQAs.includes(id)) {
+            setSelectedQAs(prevState => {
+                return prevState.filter(value => value != id);
+            })
+        } else {
+            setSelectedQAs(prevState => {
+                return [...prevState, id]
+            })
+        }
+    }
+    return (
+        <section className="accordian-section">
+            <div className="container">
+                <div className="row">
+                    <div className="col-lg-12 col-md-12 col-sm-12 col-xs-12">
+                        <div className="accordian_content">
+                            <h5>{title}</h5>
+                            <h2>{header}</h2>
+                            <p>{description}</p>
+                        </div>
+                    </div>
+                </div>
+                <div className="row" data-aos="fade-right">
+                    <div className="col-lg-1 col-md-1 col-sm-1 d-lg-block d-none"></div>
+                    <div className="col-lg-10 col-md-12 col-sm-12 col-xs-12">
+                        <div className="accordian-section-inner position-relative">
+                            <div className="accordian-inner">
+                                <div id="accordion1">
+                                    {
+                                        questionsAndAnswers.map((qa, index) => {
+                                            return (
+                                                <FaqQaComponent
+                                                qa={qa}
+                                                id={index}
+                                                onClick={onQAClick}
+                                                isOpen={selectedQAs.includes(index)  }
+                                                />
+                                            );
+                                        })
+                                    }
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="col-lg-1 col-md-1 col-sm-1 d-lg-block d-none"></div>
+                </div>
+            </div>
+        </section>
+
+    )
+}

yoga-app/src/components/faq.qa.component.tsx

@@ -0,0 +1,50 @@
+import YogaImageComponent from "@/components/yoga.image.component";
+import {YogaFaqQa_Plain} from "@/types/generated-strapi-interfaces/api/yoga-faq-qa";
+import clsx from "clsx";
+
+import classes from "./faq.qa.module.scss";
+import {useEffect, useState} from "react";
+
+export interface Props{
+    id:  number,
+    qa: YogaFaqQa_Plain,
+    isOpen: boolean,
+    onClick: (id: number) => void
+}
+export default function FaqQaComponent({id,qa,isOpen,onClick}: Props){
+
+
+
+    return (
+        <div className="accordion-card">
+            <div className="card-header" id={"heading" + id}>
+                <a href="#" onClick={ (event) => {
+                    event.preventDefault();
+                    onClick(id)
+                }} className={clsx("btn", "btn-link", {"collapsed": !isOpen})}
+                   data-toggle="collapse" data-target={"#collapse" + id}
+                   aria-expanded="false" aria-controls={"collapse" + id}>
+                    <h6>{qa.question}</h6>
+                </a>
+            </div>
+            <div id={"collapse" + id} className={clsx(
+                {
+                    "collapse": true,
+                    "show": isOpen,
+                }
+                )} aria-labelledby={"heading" + id}>
+                <div className="card-body">
+                    <div className="faq_wrapper">
+                        <figure className="mb-0">
+                            <YogaImageComponent
+                                src="./assets/images/faq_bar_line.png" alt=""
+                                className="img-fluid"/>
+                        </figure>
+                        <p className="text-left mb-0 p-0">{qa.answer}</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    );
+}

yoga-app/src/components/faq.qa.module.scss

@@ -0,0 +1,4 @@
+
+.accordionBody{
+  //transition: all 1s;
+}

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

@@ -0,0 +1,58 @@
+// Interface automatically generated by schemas-to-ts
+
+import { YogaFaqComponent } from './yoga-faq-component';
+import { YogaAchivementsComponent } from './yoga-achivements-component';
+import { YogaBlogPostsComponent } from './yoga-blog-posts-component';
+import { YogaSubscribeNowComponent } from './yoga-subscribe-now-component';
+import { YogaFooter } from './yoga-footer';
+import { YogaFaqComponent_Plain } from './yoga-faq-component';
+import { YogaAchivementsComponent_Plain } from './yoga-achivements-component';
+import { YogaBlogPostsComponent_Plain } from './yoga-blog-posts-component';
+import { YogaSubscribeNowComponent_Plain } from './yoga-subscribe-now-component';
+import { YogaFooter_Plain } from './yoga-footer';
+import { AdminPanelRelationPropertyModification } from '../common/AdminPanelRelationPropertyModification';
+
+export interface FaqPage {
+  id: number;
+  attributes: {
+    createdAt: Date;    updatedAt: Date;    publishedAt?: Date;    header?: string;
+    description?: string;
+    questionsAndAnswers?: { data: YogaFaqComponent };
+    achievements?: { data: YogaAchivementsComponent };
+    blogs?: { data: YogaBlogPostsComponent };
+    subscribe?: { data: YogaSubscribeNowComponent };
+    footer?: { data: YogaFooter };
+  };
+}
+export interface FaqPage_Plain {
+  id: number;
+  createdAt: Date;  updatedAt: Date;  publishedAt?: Date;  header?: string;
+  description?: string;
+  questionsAndAnswers?: YogaFaqComponent_Plain;
+  achievements?: YogaAchivementsComponent_Plain;
+  blogs?: YogaBlogPostsComponent_Plain;
+  subscribe?: YogaSubscribeNowComponent_Plain;
+  footer?: YogaFooter_Plain;
+}
+
+export interface FaqPage_NoRelations {
+  id: number;
+  createdAt: Date;  updatedAt: Date;  publishedAt?: Date;  header?: string;
+  description?: string;
+  questionsAndAnswers?: number;
+  achievements?: number;
+  blogs?: number;
+  subscribe?: number;
+  footer?: number;
+}
+
+export interface FaqPage_AdminPanelLifeCycle {
+  id: number;
+  createdAt: Date;  updatedAt: Date;  publishedAt?: Date;  header?: string;
+  description?: string;
+  questionsAndAnswers?: AdminPanelRelationPropertyModification<YogaFaqComponent_Plain>;
+  achievements?: AdminPanelRelationPropertyModification<YogaAchivementsComponent_Plain>;
+  blogs?: AdminPanelRelationPropertyModification<YogaBlogPostsComponent_Plain>;
+  subscribe?: AdminPanelRelationPropertyModification<YogaSubscribeNowComponent_Plain>;
+  footer?: AdminPanelRelationPropertyModification<YogaFooter_Plain>;
+}

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

@@ -0,0 +1,38 @@
+// Interface automatically generated by schemas-to-ts
+
+import { YogaFaqQa } from './yoga-faq-qa';
+import { YogaFaqQa_Plain } from './yoga-faq-qa';
+import { AdminPanelRelationPropertyModification } from '../common/AdminPanelRelationPropertyModification';
+
+export interface YogaFaqComponent {
+  id: number;
+  attributes: {
+    createdAt: Date;    updatedAt: Date;    publishedAt?: Date;    title?: string;
+    header?: string;
+    description?: string;
+    questionsAndAnswers: { data: YogaFaqQa[] };
+  };
+}
+export interface YogaFaqComponent_Plain {
+  id: number;
+  createdAt: Date;  updatedAt: Date;  publishedAt?: Date;  title?: string;
+  header?: string;
+  description?: string;
+  questionsAndAnswers: YogaFaqQa_Plain[];
+}
+
+export interface YogaFaqComponent_NoRelations {
+  id: number;
+  createdAt: Date;  updatedAt: Date;  publishedAt?: Date;  title?: string;
+  header?: string;
+  description?: string;
+  questionsAndAnswers: number[];
+}
+
+export interface YogaFaqComponent_AdminPanelLifeCycle {
+  id: number;
+  createdAt: Date;  updatedAt: Date;  publishedAt?: Date;  title?: string;
+  header?: string;
+  description?: string;
+  questionsAndAnswers: AdminPanelRelationPropertyModification<YogaFaqQa_Plain>;
+}

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

@@ -0,0 +1,30 @@
+// Interface automatically generated by schemas-to-ts
+
+export interface YogaFaqQa {
+  id: number;
+  attributes: {
+    createdAt: Date;    updatedAt: Date;    publishedAt?: Date;    name?: string;
+    question?: string;
+    answer?: string;
+  };
+}
+export interface YogaFaqQa_Plain {
+  id: number;
+  createdAt: Date;  updatedAt: Date;  publishedAt?: Date;  name?: string;
+  question?: string;
+  answer?: string;
+}
+
+export interface YogaFaqQa_NoRelations {
+  id: number;
+  createdAt: Date;  updatedAt: Date;  publishedAt?: Date;  name?: string;
+  question?: string;
+  answer?: string;
+}
+
+export interface YogaFaqQa_AdminPanelLifeCycle {
+  id: number;
+  createdAt: Date;  updatedAt: Date;  publishedAt?: Date;  name?: string;
+  question?: string;
+  answer?: string;
+}