From 34c09440d384a1475f1715056a7d45d423123b40 Mon Sep 17 00:00:00 2001
From: "VICTOR\\anumu" <anumuduchukwuebuka@gmail.com>
Date: Mon, 16 Jan 2023 16:32:57 +0100
Subject: [PATCH] implemented pricing yearly plan and added FAQs component to
 all pages rendering it

---
 src/component/HomeMain/Pricing/Main.js | 110 +++----------------------
 src/component/Pages/Faq/Main.js        |  78 +++++++-----------
 src/component/Pricing/Main.js          |   6 +-
 3 files changed, 45 insertions(+), 149 deletions(-)

diff --git a/src/component/HomeMain/Pricing/Main.js b/src/component/HomeMain/Pricing/Main.js
index 171b3bf..d69562d 100644
--- a/src/component/HomeMain/Pricing/Main.js
+++ b/src/component/HomeMain/Pricing/Main.js
@@ -41,7 +41,7 @@ const Main = ({gredient , video}) => {
                             <span className={`tog_btn ${tog && "month_active"}`} onClick = {() => setTog(tog === true ? false : true)}></span>
                         </div>
                         <span className="years">Yearly</span>
-                        <span className="offer">50% off</span>
+                        {/* <span className="offer">50% off</span> */}
                     </div>
 
                     <div className={`pricing_pannel monthly_plan ${tog ? '' : 'active'}`}>
@@ -49,10 +49,9 @@ const Main = ({gredient , video}) => {
 
                         {prices.length > 0 &&
                                 prices.map((price, index) => {
-                                    if (index % 2 == 0) {
                                         return (
                                             <div key={index} className="col-md-4">
-                                                <div className="pricing_block">
+                                                <div className={`pricing_block ${index % 2 == 0? '' : 'highlited_block'}`}>
                                                     <div className="icon">
                                                     { video ? <img src="assets/images/standard-one.png" alt="image" /> : <img src={price.icon} alt="image" /> }
                                                     </div>
@@ -62,32 +61,12 @@ const Main = ({gredient , video}) => {
                                                     </div>
                                                     <span className="price">{price.price}</span>
                                                     <ul className="benifits">
-                                                        {price.features.map((feature, index)=> <p key={index}>{feature}</p>)}
+                                                        {price.features.map((feature, index)=> <li key={index}><p>{feature}</p></li>)}
                                                     </ul>
                                                     <Link to="/" className="btn white_btn">Start Now</Link>
                                                 </div>
                                             </div>
                                         );
-                                    } else {
-                                        return (
-                                            <div key={index} className="col-md-4">
-                                                <div className="pricing_block highlited_block">
-                                                    <div className="icon">
-                                                    { video ? <img src="assets/images/standard-one.png" alt="image" /> : <img src={price.icon} alt="image" /> }
-                                                    </div>
-                                                    <div className="pkg_name">
-                                                    <h3>{price.title}</h3>
-                                                    <span>{price.text}</span>
-                                                    </div>
-                                                    <span className="price">{price.price}</span>
-                                                    <ul className="benifits">
-                                                        {price.features.map((feature, index)=> <p key={index}>{feature}</p>)}
-                                                    </ul>
-                                                    <Link to="/" className="btn white_btn">Start Now</Link>
-                                                </div>
-                                            </div>
-                                        );
-                                    }
                                 })
                             }
 
@@ -130,10 +109,9 @@ const Main = ({gredient , video}) => {
 
                         {prices.length > 0 &&
                                 prices.map((price, index) => {
-                                    if (index % 2 == 0) {
                                         return (
                                             <div key={index} className="col-md-4">
-                                                <div className="pricing_block">
+                                                <div className={`pricing_block ${index % 2 == 0? '' : 'highlited_block'}`}>
                                                     <div className="icon">
                                                     { video ? <img src="assets/images/standard-one.png" alt="image" /> : <img src={price.icon} alt="image" /> }
                                                     </div>
@@ -141,34 +119,14 @@ const Main = ({gredient , video}) => {
                                                     <h3>{price.title}</h3>
                                                     <span>{price.text}</span>
                                                     </div>
-                                                    <span className="price">{price.price}</span>
+                                                    <span className="price">{price.price_anual}</span>
                                                     <ul className="benifits">
-                                                        {price.features.map((feature, index)=> <p key={index}>{feature}</p>)}
+                                                        {price.features.map((feature, index)=> <li key={index}><p>{feature}</p></li>)}
                                                     </ul>
                                                     <Link to="/" className="btn white_btn">Start Now</Link>
                                                 </div>
                                             </div>
                                         );
-                                    } else {
-                                        return (
-                                            <div key={index} className="col-md-4">
-                                                <div className="pricing_block highlited_block">
-                                                    <div className="icon">
-                                                    { video ? <img src="assets/images/standard-one.png" alt="image" /> : <img src={price.icon} alt="image" /> }
-                                                    </div>
-                                                    <div className="pkg_name">
-                                                    <h3>{price.title}</h3>
-                                                    <span>{price.text}</span>
-                                                    </div>
-                                                    <span className="price">{price.price}</span>
-                                                    <ul className="benifits">
-                                                        {price.features.map((feature, index)=> <p key={index}>{feature}</p>)}
-                                                    </ul>
-                                                    <Link to="/" className="btn white_btn">Start Now</Link>
-                                                </div>
-                                            </div>
-                                        );
-                                    }
                                 })
                             }
 
@@ -192,7 +150,7 @@ const Main = ({gredient , video}) => {
                             <span className={`tog_btn ${tog && "month_active"}`} onClick = {() => setTog(tog === true ? false : true)}></span>
                         </div>
                         <span className="years">Yearly</span>
-                        <span className="offer">50% off</span>
+                        {/* <span className="offer">50% off</span> */}
                     </div>
 
                     <div className={`pricing_pannel monthly_plan ${tog ? '' : 'active'}`}>
@@ -200,10 +158,9 @@ const Main = ({gredient , video}) => {
 
                             {prices.length > 0 &&
                                 prices.map((price, index) => {
-                                    if (index % 2 == 0) {
                                         return (
                                             <div key={index} className="col-md-4">
-                                                <div className="pricing_block">
+                                                <div className={`pricing_block ${index % 2 == 0? '' : 'highlited_block'}`}>
                                                     <div className="icon">
                                                     { video ? <img src="assets/images/standard-one.png" alt="image" /> : <img src={price.icon} alt="image" /> }
                                                     </div>
@@ -213,33 +170,13 @@ const Main = ({gredient , video}) => {
                                                     </div>
                                                     <span className="price">{price.price}</span>
                                                     <ul className="benifits">
-                                                        {price.features.map((feature, index)=> <p key={index}>{feature}</p>)}
+                                                        {price.features.map((feature, index)=> <li key={index}><p>{feature}</p></li>)}
                                                     </ul>
                                                     <Link to="/" className="btn white_btn">Start Now</Link>
                                                 </div>
                                             </div>
                                         );
-                                    } else {
-                                        return (
-                                            <div key={index} className="col-md-4">
-                                                <div className="pricing_block highlited_block">
-                                                    <div className="icon">
-                                                    { video ? <img src="assets/images/standard-one.png" alt="image" /> : <img src={price.icon} alt="image" /> }
-                                                    </div>
-                                                    <div className="pkg_name">
-                                                    <h3>{price.title}</h3>
-                                                    <span>{price.text}</span>
-                                                    </div>
-                                                    <span className="price">{price.price}</span>
-                                                    <ul className="benifits">
-                                                        {price.features.map((feature, index)=> <p key={index}>{feature}</p>)}
-                                                    </ul>
-                                                    <Link to="/" className="btn white_btn">Start Now</Link>
-                                                </div>
-                                            </div>
-                                        );
-                                    }
-                                })
+                                   })
                             }
 
                         </div>
@@ -250,10 +187,9 @@ const Main = ({gredient , video}) => {
 
                         {prices.length > 0 &&
                                 prices.map((price, index) => {
-                                    if (index % 2 == 0) {
                                         return (
                                             <div key={index} className="col-md-4">
-                                                <div className="pricing_block">
+                                                <div className={`pricing_block ${index % 2 == 0? '' : 'highlited_block'}`}>
                                                     <div className="icon">
                                                     { video ? <img src="assets/images/standard-one.png" alt="image" /> : <img src={price.icon} alt="image" /> }
                                                     </div>
@@ -261,34 +197,14 @@ const Main = ({gredient , video}) => {
                                                     <h3>{price.title}</h3>
                                                     <span>{price.text}</span>
                                                     </div>
-                                                    <span className="price">{price.price}</span>
+                                                    <span className="price">{price.price_anual}</span>
                                                     <ul className="benifits">
-                                                        {price.features.map((feature, index)=> <p key={index}>{feature}</p>)}
+                                                        {price.features.map((feature, index)=> <li key={index}><p>{feature}</p></li>)}
                                                     </ul>
                                                     <Link to="/" className="btn white_btn">Start Now</Link>
                                                 </div>
                                             </div>
                                         );
-                                    } else {
-                                        return (
-                                            <div key={index} className="col-md-4">
-                                                <div className="pricing_block highlited_block">
-                                                    <div className="icon">
-                                                    { video ? <img src="assets/images/standard-one.png" alt="image" /> : <img src={price.icon} alt="image" /> }
-                                                    </div>
-                                                    <div className="pkg_name">
-                                                    <h3>{price.title}</h3>
-                                                    <span>{price.text}</span>
-                                                    </div>
-                                                    <span className="price">{price.price}</span>
-                                                    <ul className="benifits">
-                                                        {price.features.map((feature, index)=> <p key={index}>{feature}</p>)}
-                                                    </ul>
-                                                    <Link to="/" className="btn white_btn">Start Now</Link>
-                                                </div>
-                                            </div>
-                                        );
-                                    }
                                 })
                             }
 
diff --git a/src/component/Pages/Faq/Main.js b/src/component/Pages/Faq/Main.js
index a98e1c8..cbf7bcd 100644
--- a/src/component/Pages/Faq/Main.js
+++ b/src/component/Pages/Faq/Main.js
@@ -4,24 +4,25 @@ import Bredcrumb from '../../Bredcrumb/Main'
 import BGImg from "../../../assets/images/bread_crumb_bg.png"
 import BGImg1 from "../../../assets/images/bread_crumb_bg_one.png"
 import BGImg2 from "../../../assets/images/bread_crumb_bg_two.png"
+import Faq from '../../HomeMain/Faq/Main'
 
 import SiteService from '../../../vendors/service/siteService'
 
 const Main = ({brdcum}) => {
 
-    const[activeFaq, setActiveFaq] = useState({btn0 : false})
+    // const[activeFaq, setActiveFaq] = useState({btn0 : false})
 
-    const [faqs, setFaqs] = useState([]); // initial state for FAQs before API call
+    // const [faqs, setFaqs] = useState([]); // initial state for FAQs before API call
 
-    let faqServices = new SiteService(); // instantiating the class
+    // let faqServices = new SiteService(); // instantiating the class
 
-    const allFaqData = () => {
-        return faqServices.faqData();
-    };
+    // const allFaqData = () => {
+    //     return faqServices.faqData();
+    // };
 
-    useEffect(() => {
-        allFaqData().then((data) => setFaqs(data.data));
-    }, []);
+    // useEffect(() => {
+    //     allFaqData().then((data) => setFaqs(data.data));
+    // }, []);
   return (
     <>
         {brdcum.b1 && 
@@ -64,12 +65,12 @@ const Main = ({brdcum}) => {
             bgimg={BGImg2}/>}
 
 
-        <section className="row_am faq_section">
+        {/* <section className="row_am faq_section">
             <div className="container">
                 <div className="faq_panel">
                     <div className="accordion" id="accordionExample">
 
-                        {/* <div className="card" data-aos="fade-up" >
+                        <div className="card" data-aos="fade-up" >
                             <div className="card-header" id="headingOne">
                                 <h2 className="mb-0">
                                 <button type="button" className={`btn btn-link ${activeFaq.a && "active"}`} onClick= {() => setActiveFaq(activeFaq.a ? {a : false} : {a : true})} data-toggle="collapse" data-target="#collapseOne">
@@ -84,9 +85,9 @@ const Main = ({brdcum}) => {
                                     leap into electronic typesetting, remaining essentially unchanged.</p>
                                 </div>
                             </div>
-                        </div> */}
+                        </div>
 
-                        {/* <div className="card" data-aos="fade-up" >
+                        <div className="card" data-aos="fade-up" >
                             <div className="card-header" id="headingTwo">
                                 <h2 className="mb-0">
                                 <button type="button" className={`btn btn-link collapsed ${activeFaq.b && "active"}`} onClick= {() => setActiveFaq(activeFaq.b ? {b : false} : {b : true})} data-toggle="collapse"
@@ -101,9 +102,9 @@ const Main = ({brdcum}) => {
                                     leap into electronic typesetting, remaining essentially unchanged.</p>
                                 </div>
                             </div>
-                        </div> */}
+                        </div>
 
-                        {/* <div className="card" data-aos="fade-up" >
+                        <div className="card" data-aos="fade-up" >
                             <div className="card-header" id="headingThree">
                                 <h2 className="mb-0">
                                 <button type="button" className={`btn btn-link collapsed ${activeFaq.c && "active"}`} onClick= {() => setActiveFaq(activeFaq.c ? {c : false} : {c : true})} data-toggle="collapse"
@@ -119,9 +120,9 @@ const Main = ({brdcum}) => {
                                     leap into electronic typesetting, remaining essentially unchanged.</p>
                                 </div>
                             </div>
-                        </div> */}
+                        </div>
 
-                        {/* <div className="card" data-aos="fade-up" >
+                        <div className="card" data-aos="fade-up" >
                             <div className="card-header" id="headingFour">
                                 <h2 className="mb-0">
                                 <button type="button" className={`btn btn-link collapsed ${activeFaq.d && "active"}`} onClick= {() => setActiveFaq(activeFaq.d ? {d : false} : {d : true})} data-toggle="collapse"
@@ -138,9 +139,9 @@ const Main = ({brdcum}) => {
                                     leap into electronic typesetting, remaining essentially unchanged.</p>
                                 </div>
                             </div>
-                        </div> */}
+                        </div>
 
-                        {/* <div className="card" data-aos="fade-up" >
+                        <div className="card" data-aos="fade-up" >
                             <div className="card-header" id="headingFive">
                                 <h2 className="mb-0">
                                 <button type="button" className={`btn btn-link collapsed ${activeFaq.e && "active"}`} onClick= {() => setActiveFaq(activeFaq.e ? {e : false} : {e : true})} data-toggle="collapse"
@@ -157,9 +158,9 @@ const Main = ({brdcum}) => {
                                     leap into electronic typesetting, remaining essentially unchanged.</p>
                                 </div>
                             </div>
-                        </div> */}
+                        </div>
 
-                        {/* <div className="card" data-aos="fade-up" >
+                        <div className="card" data-aos="fade-up" >
                             <div className="card-header" id="headingSix">
                                 <h2 className="mb-0">
                                 <button type="button" className={`btn btn-link collapsed ${activeFaq.f && "active"}`} onClick= {() => setActiveFaq(activeFaq.f ? {f : false} : {f : true})} data-toggle="collapse"
@@ -176,9 +177,9 @@ const Main = ({brdcum}) => {
                                     leap into electronic typesetting, remaining essentially unchanged.</p>
                                 </div>
                             </div>
-                        </div> */}
+                        </div>
 
-                        {/* <div className="card" data-aos="fade-up" >
+                        <div className="card" data-aos="fade-up" >
                             <div className="card-header" id="headingSeven">
                                 <h2 className="mb-0">
                                 <button type="button" className={`btn btn-link collapsed ${activeFaq.g && "active"}`} onClick= {() => setActiveFaq(activeFaq.g ? {g : false} : {g : true})} data-toggle="collapse"
@@ -195,37 +196,14 @@ const Main = ({brdcum}) => {
                                     leap into electronic typesetting, remaining essentially unchanged.</p>
                                 </div>
                             </div>
-                        </div> */}
-
-                    {/* displays loading ... while the page fetches the FAQs */}
-                    {faqs.length < 1 && <h3>Loading...</h3>}
-
-                    {faqs.length > 0 && faqs.map((faq, index) => {
-                        let id = `heading${index}`; //headingSeven
-                        let target = `collapse${index}`; //#collapseSeven
-
-                        return(
-                        <div key={index} className="card" data-aos="fade-up" >
-                            <div className="card-header" id={id}>
-                                <h2 className="mb-0">
-                                <button type="button" className={`btn btn-link collapsed ${activeFaq.b && "active"}`} data-toggle="collapse"
-                                    data-target={`#${target}`}>{activeFaq.b ? <i className="icon_faq icofont-minus"></i>  : <i className="icon_faq icofont-plus"></i>}{faq.title}
-                                </button>
-                                </h2>
-                            </div>
-
-                            <div id={target} className="collapse" aria-labelledby={id} data-parent="#accordionExample">
-                                <div className="card-body">
-                                    <p>{faq.text}</p>
-                                </div>
-                            </div>
                         </div>
-                        )
-                    })}
                     </div>
                 </div>
             </div>
-        </section>
+        </section> */}
+
+        <Faq />
+
         <section className="row_am free_app_section review_freeapp" id="getstarted">
             <div className="container">
                 <div className="free_app_inner aos-init" data-aos="fade-in" data-aos-duration="1500" data-aos-delay="100"> 
diff --git a/src/component/Pricing/Main.js b/src/component/Pricing/Main.js
index cb89c50..940ebfd 100644
--- a/src/component/Pricing/Main.js
+++ b/src/component/Pricing/Main.js
@@ -1,6 +1,7 @@
 import { Link } from 'react-router-dom'
 import React , {useState ,useEffect} from 'react'
 import Pricing from '../HomeMain/Pricing/Main'
+import Faq from '../HomeMain/Faq/Main'
 import Bredcrumb from '../Bredcrumb/Main'
 import BGImg from "../../assets/images/bread_crumb_bg.png"
 import BGImg1 from "../../assets/images/bread_crumb_bg_one.png"
@@ -53,7 +54,8 @@ const Main = ({brdcum}) => {
         bgimg={BGImg2}/>}
 
         <Pricing/>
-        <section className="row_am faq_section">
+        <Faq />
+        {/* <section className="row_am faq_section">
             <div className="container">
                 <div className="faq_panel">
                     <div className="accordion" id="accordionExample">
@@ -187,7 +189,7 @@ const Main = ({brdcum}) => {
             </div>
             </div>
         </div>
-        </section>
+        </section> */}
         <section className="row_am free_app_section review_freeapp" id="getstarted">
             <div className="container">
                 <div className="free_app_inner aos-init" data-aos="fade-in" data-aos-duration="1500" data-aos-delay="100">