Added FAQ page

Signed-off-by: Hemashree M S <[email protected]>

src/Pages/Faq.jsx

@@ -0,0 +1,23 @@
+import React, { useState } from 'react';
+import '../styles/Faq.css';
+import { questions } from '../components/FAQ/Faqdata';
+import BackBtn from '../components/BackBtn/BackBtn';
+import Faqpage from './Faqpage';
+
+const Faq = () => {
+    const [data, setData] = useState(questions);
+  return (
+    <div className="py-8 mb-5 w-11/12 lg:w-[50vw] justify-start ml-auto mr-auto mt-10">
+        <BackBtn Page={"FAQ"} />
+        <div>
+            {
+                data.map((curr) => {
+                    return <Faqpage key={curr.id} {...curr}/>
+                })
+            }
+        </div>
+    </div>
+  )
+}
+
+export default Faq

src/Pages/Faqpage.jsx

@@ -0,0 +1,21 @@
+import React, { useState } from 'react'
+
+const Faqpage = ({question, answer}) => {
+    const [show, setShow] = useState(false);
+  return (
+    <div>
+        <div className='main-heading' onClick={() => setShow(!show)}>
+            <p>
+                {show ? "➖" : "➕"}
+            </p>
+            <h3>{question}</h3>
+        </div>
+        {
+            show &&
+            <p className='answers'>{answer}</p>
+        }
+    </div>
+  )
+}
+
+export default Faqpage

src/components/FAQ/Faqdata.js

@@ -0,0 +1,32 @@
+export const questions = [
+    {
+        id: 1,
+        question: "How does Nactocare ensure the quality and professionalism of the nurses it provides?",
+        answer: "Nactocare maintains a rigorous screening process for all nurses on our platform. We verify their credentials, certifications, and experience, ensuring that they meet our standards of professionalism and competence. Additionally, we collect feedback from clients to continuously evaluate and improve the quality of our services.",
+    },
+    {
+        id: 2,
+        question: "What types of services can I book a nurse for through Nactocare?",
+        answer: "Nactocare offers a wide range of home care services, including but not limited to post-surgery care, elder care, wound care, medication management, injections, and assistance with activities of daily living (ADLs) such as bathing, dressing, and meal preparation. Our nurses are trained to provide personalized care tailored to your specific needs.",
+    },
+    {
+        id: 3,
+        question: "How far in advance do I need to book a nurse through Nactocare?",
+        answer: "You can book a nurse through Nactocare as per your requirement, whether it's for immediate assistance or for a future date. We recommend booking in advance whenever possible to ensure availability, especially during peak times or for specialized care needs.",
+    },
+    {
+        id: 4,
+        question: "Can I request a specific nurse or specify preferences for the caregiver assigned to me?",
+        answer: "While we cannot guarantee the availability of specific nurses, we strive to accommodate your preferences whenever possible. You can provide details about your preferred caregiver or any specific requirements during the booking process, and we will do our best to match you with a nurse who meets your criteria.",
+    },
+    {
+        id: 5,
+        question: "How does billing and payment work with Nactocare?",
+        answer: "Nactocare offers transparent and hassle-free billing. You will receive a detailed invoice for the services rendered, including the nurse's hourly rate and any additional charges for supplies or specialized care. Payments can be made securely online through our platform using various payment methods, ensuring convenience and peace of mind.",
+    },
+    {
+        id: 6,
+        question: "What safety measures does Nactocare have in place to protect clients and nurses during the COVID-19 pandemic?",
+        answer: "Nactocare follows strict safety protocols in accordance with guidelines from health authorities to prevent the spread of COVID-19. Our nurses undergo regular health screenings and adhere to strict hygiene practices, including wearing personal protective equipment (PPE) and practicing proper hand hygiene.",
+    },
+]

src/components/Footer/Footer.jsx

@@ -55,6 +55,11 @@ function Footer() {
                       Contact Us
                     </a>
                   </li>
+                  <li className="mb-4">
+                    <a href="/faq" className="hover:underline">
+                      FAQ
+                    </a>
+                  </li>
                 </ul>
               </div>
               <div>

src/main.jsx

@@ -24,6 +24,7 @@ import TermsAndConditions from "./Pages/TermsAndConditions.jsx";
 import BrandCenter from "./Pages/BrandCenter.jsx";
 import ScrollToTopButton from "./ScrollToTopButton"; // Import ScrollToTopButton
 import Guidelines from "./Pages/Guidelines.jsx";
+import Faq from "./Pages/Faq.jsx";
 
 const router = createBrowserRouter(
   createRoutesFromElements(
@@ -39,9 +40,10 @@ const router = createBrowserRouter(
       <Route path="blog/:slug" element={<Blogs />} />
       <Route path="/book-nurse" element={<Booking />} />
       <Route path="privacypolicy" element={<PrivacyPolicy />} />
+      <Route path="guidelines" element={<Guidelines/>}/>
       <Route path="licensing" element={<Licensing />} />
       <Route path="termsandconditions" element={<TermsAndConditions />} />
-      <Route path="guidelines" element={<Guidelines/>}/>
+      <Route path="faq" element={<Faq/>}/>
     </Route>
   )
 );

src/styles/Faq.css

@@ -0,0 +1,39 @@
+
+
+  .main-heading {
+    display: flex;
+    margin-top: 30px;
+    padding: 20px;
+    background: #f1f4ff;
+    border-radius: 5px;
+    box-shadow: rgba(0, 0, 0, 0.16) 0 1px 4px;
+    cursor: pointer;
+  }
+
+  .main-heading h3 {
+    margin-left: 30px;
+    color: #303243;
+    word-spacing: 1px;
+    letter-spacing: 1px;
+    font-weight: 600;
+    font-size: 18px;
+  }
+  .main-heading p {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .answers {
+    padding: 30px 20px 40px 20px;
+    font-size: 16px;
+    font-weight: 500;
+    background: #dde4ff;
+    color: rgb(40, 37, 53);
+    border-radius: 0 0 5px 5px;
+  }
+
+  body.dark .answers {
+    color: rgb(40, 37, 53);
+  }