Merge pull request #409 from nishant0708/FAQ

Feat:Want to Add FAQ Section to The Website #405

src/App.js

@@ -21,6 +21,7 @@ import Announcement from "./components/Announcement";
 import ForgotPassword from "./pages/Forgotpassword.js";
 import ResetPassword from "./pages/ResetPassword.js";
 import ProgressBar from "./components/ProgressBar.js";
+import FAQs from "./components/Faq/Faq.js";
 
 const App = () => {
   return (
@@ -35,6 +36,7 @@ const App = () => {
         <Route path="/user/reset-password/:token" element={<ResetPassword />} />
         <Route element={<PrivateRoute />}>
           <Route path="/admin/dashboard" element={<AdminD></AdminD>} />
+          <Route path="/faq" element={<FAQs />} />
           <Route
             path="/admin/announcement"
             element={<Announcement></Announcement>}

src/components/Faq/FAQs.css

@@ -0,0 +1,155 @@
+
+@import url("https://fonts.googleapis.com/css?family=Hind:300,400&display=swap");
+
+.faqs-container {
+  padding: 2rem;
+  max-width: 100%;
+  margin: 0 auto;
+}
+
+.faqs-container * {
+  box-sizing: border-box;
+}
+
+.faqs-container h2 {
+  color:#167e32;
+  font-size: 40px;
+  text-align: center;
+  margin-bottom: 1.5rem;
+  font-family: "ABeeZee", sans-serif;
+}
+.accordion-title{
+  font-size: 22px;
+
+}
+
+.accordion{
+    margin-top: 70px;
+    margin-bottom: 30px;
+}
+
+.accordion .accordion-item {
+  margin-top: 10px;
+  padding: 0px 10px;
+  margin-bottom: 10px;
+  border-bottom: 1px solid #6cdc6e;
+}
+
+.accordion .accordion-item button[aria-expanded='true'] {
+  border-bottom: 1px solid #03d248;
+}
+
+.accordion button {
+  position: relative;
+  display: block;
+  text-align: left;
+  width: 100%;
+  padding: 1em 0;
+  color: #000000;
+  font-size: 1.15rem;
+  font-weight: 400;
+  border: none;
+  background: none;
+  outline: none;
+  transition: color 0.3s;
+}
+
+.accordion button:hover,
+.accordion button:focus {
+  cursor: pointer;
+  color: #15b552;
+}
+
+.accordion button {
+  padding: 1em 1.5em 1em 0;
+}
+
+.accordion button .icon {
+  display: inline-block;
+  position: absolute;
+  top: auto;
+  right: 0;
+  width: 22px;
+  height: 22px;
+  border: 1px solid;
+  border-radius: 22px;
+}
+
+.accordion button .icon::before {
+  display: block;
+  position: absolute;
+  content: "";
+  top: 9px;
+  left: 5px;
+  width: 10px;
+  height: 2px;
+  background: currentColor;
+}
+
+.accordion button .icon::after {
+  display: block;
+  position: absolute;
+  content: "";
+  top: 5px;
+  left: 9px;
+  width: 2px;
+  height: 10px;
+  background: currentColor;
+}
+
+.accordion button[aria-expanded='true'] {
+  color: #12dd63;
+}
+
+.accordion button[aria-expanded='true'] .icon::after {
+  width: 0;
+}
+
+.accordion .accordion-content {
+  opacity: 0;
+  max-height: 0;
+  overflow: hidden;
+  transition: opacity 200ms linear, max-height 200ms linear;
+}
+
+#dark .accordion .accordion-content {
+  color: white;
+}
+
+.accordion .accordion-content.active {
+  opacity: 0.8;
+  height: auto;
+  max-height: 400px;
+  text-align: left;
+padding: 20px;
+  transition: opacity 200ms linear, max-height 200ms linear;
+  overflow: auto;
+}
+
+.accordion .accordion-content p {
+  font-family: 'Hind',sans-serif;
+  font-size: 18px;
+  font-weight: 300;
+  margin: 1em 0;
+}
+
+.repo-link {
+    color: rgb(59, 59, 234);
+    text-decoration: underline;
+    cursor: pointer;
+  }
+@media (max-width:768px) {
+    .faqs-container h2{
+        font-size: 36px;
+    }
+    .accordion{
+        margin-top: 30px;
+    }
+    .accordion .accordion-content.active{
+        padding: 10px;
+    }
+}
+
+
+
+

src/components/Faq/Faq.js

@@ -0,0 +1,63 @@
+// FAQs.jsx
+import React, { useState } from 'react';
+import './FAQs.css';
+
+const FAQs = () => {
+  const [activeIndex, setActiveIndex] = useState(null);
+
+  const faqs = [
+    {
+      question:'How Can I Add Product To User Dasboard',
+      answer:`You can add a product to your dashboard either by scanning its QR code for automatic data entry on the 'Scan QR' page or by manually entering the product details on the 'Users' page. Both options are available.`,
+    },
+    {
+      question:'How can I get notified and adjust the notification duration?',
+      answer: "You can go to the 'Notified' option and select the notification duration, such as how often you need it (e.g., every 3 days or 5 days), and you will get notified accordingly.",
+    },
+    {
+        question:'How can I scan my product QR code?',
+        answer:"You can go to the 'Scan QR' page and scan your QR code, but remember your QR code should include the manufacturing date, expiry date, and product name.",
+      },
+    {
+      question:'Can I contribute to this page?',
+      answer: (
+        <>
+          Yes, of course! Here is the repository <a href="https://github.com/usha-madithati/esmart.github.io" className="repo-link" target="_blank" rel="noopener noreferrer"> link</a>.
+          <br/>But make sure to follow our contribution rules and regulations before making any contribution.
+        </>
+      ),
+    },
+  ];
+
+  const toggleAccordion = (index) => {
+    setActiveIndex(activeIndex === index ? null : index);
+  };
+
+  return (
+    <div id="faqs" className="faqs-container">
+      <h2>Frequently Asked Questions</h2>
+      <div className="accordion">
+        {faqs.map((faq, index) => (
+          <div key={index} className="accordion-item">
+            <button
+              onClick={() => toggleAccordion(index)}
+              aria-expanded={activeIndex === index ? 'true' : 'false'}
+            >
+                <div>
+              <span className="accordion-title">{faq.question}</span>
+              <span className="icon" aria-hidden="true"></span>
+              </div>
+            </button>
+            <div className={`accordion-content ${activeIndex === index ? 'active' : ''}`}>
+              <p>{faq.answer}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+
+    </div>
+
+  );
+};
+
+export default FAQs;

src/pages/Home.js

@@ -4,6 +4,7 @@ import { Link } from "react-router-dom";
 import Footer from "../components/Footer";
 import { useNavigate } from "react-router-dom";
 import { useLocation } from "react-router-dom";
+import FAQs from "../components/Faq/Faq";
 
 const Home = () => {
   const aboutUsRef = useRef(null);
@@ -140,7 +141,7 @@ const Home = () => {
               </div>
             </div>
           </section>
-
+       
           <section class="text-gray-600 body-font">
             <div class="container mx-auto flex px-5 md:flex-row flex-col items-center">
               <div class="lg:max-w-lg lg:w-full md:w-1/2 w-5/6 mb-10 md:mb-0">
@@ -182,7 +183,7 @@ const Home = () => {
               </div>
             </div>
           </section>
-
+        <FAQs/>
           <section className="mt-16 bg-green-500 text-white py-12 px-4 rounded-lg">
             <h2 className="text-3xl font-semibold text-center">
               Your Trusted Partner in Product Management