Fixed position of overlapped circle

components/sections/footer.js

@@ -76,7 +76,7 @@ export default function Footer() {
               </svg>
             </div>
             <div className="text-[#FFFFFF] md:text-center sm:text-left">
-              © 2022 <span className="text-[#01EC64]">SaveMyForm</span>. All Rights Reserved.
+              © 2023 <span className="text-[#01EC64]">SaveMyForm</span>. All Rights Reserved.
             </div>
             <div className="flex justify-between space-x-3">
               <svg

components/utils/API/index.js

@@ -4,7 +4,7 @@ import { getLS, removeLS } from '../LocalStorage/index';
 const API_URL =
   process.env.NEXT_PUBLIC_ENVIORNMENT === 'prod'
     ? 'https://api.savemyform.tk'
-    : 'http://localhost:8080';
+    : 'https://dev-api.savemyform.tk';
 
 const getAccessToken = () => {
   return getLS('secret');

pages/faq/index.js

@@ -3,65 +3,70 @@ import faqs from "./faqs.json";
 import { Collapse, Text } from "@nextui-org/react";
 import { AppbarContext } from "../../components/context";
 import { useContext, useEffect } from "react";
+import Footer from "../../components/sections/footer";
 export default function FAQ() {
-  const { setActive } = useContext(AppbarContext);
-  // setActive({ home: false, dashboard: false, documentation: false, faq: true });
-  useEffect(() => {
-    //editing navbar
-    setActive({
-      home: false,
-      dashboard: false,
-      documentation: false,
-      faq: true,
-    });
-  }, []);
-  if (process.browser) {
-    let check = true;
-    let a = document.getElementsByClassName("faq_header");
-    let b = document.getElementsByClassName("faq_details");
-    for (let i = 0; i < a.length; i++) {
-      a[i].addEventListener("click", () => {
-        if (check) {
-          b[i].style.paddingBottom = "20px";
-          b[i].style.maxHeight = "200px";
-          a[i].style.setProperty("--angle", "45deg");
-        } else {
-          b[i].style.paddingBottom = "0px";
-          b[i].style.maxHeight = "0px";
-          a[i].style.setProperty("--angle", "0deg");
+    const { setActive } = useContext(AppbarContext);
+    // setActive({ home: false, dashboard: false, documentation: false, faq: true });
+    useEffect(() => {
+        //editing navbar
+        setActive({
+            home: false,
+            dashboard: false,
+            documentation: false,
+            faq: true,
+        });
+    }, []);
+    if (process.browser) {
+        let check = true;
+        let a = document.getElementsByClassName("faq_header");
+        let b = document.getElementsByClassName("faq_details");
+        for (let i = 0; i < a.length; i++) {
+            a[i].addEventListener("click", () => {
+                if (check) {
+                    b[i].style.paddingBottom = "20px";
+                    b[i].style.maxHeight = "200px";
+                    a[i].style.setProperty("--angle", "45deg");
+                } else {
+                    b[i].style.paddingBottom = "0px";
+                    b[i].style.maxHeight = "0px";
+                    a[i].style.setProperty("--angle", "0deg");
+                }
+                check = !check;
+            });
         }
-        check = !check;
-      });
     }
-  }
-  //   console.log(faqs);
-  return (
-    <>
-      <div className="flex justify-center">
-        <Collapse
-          className="mt-8 mb-2 font-bold text-xl w-full max-w-2xl text-[#00694B] rounded-lg shadow-[0_2px_2px_rgba(0,0,0,0.25)] px-4"
-          title="What is SaveMyForm?"
+    //   console.log(faqs);
+    return ( <
         >
-          <Text className="font-normal">
-            For frontend-only applications if the developer wants to collect
-            form submissions from his/her users, he/she requires to create a
-            complete backend application for it. It Solves the problem by
-            providing the developers a url which they can use for form
-            submissions by sending a POST request to the url.
-          </Text>
-        </Collapse>
-      </div>
+        <
+        div className = "flex justify-center" >
+        <
+        Collapse className = "mt-8 mb-2 font-bold text-xl w-full max-w-2xl text-[#00694B] rounded-lg shadow-[0_2px_2px_rgba(0,0,0,0.25)] px-4"
+        title = "What is SaveMyForm?" >
+        <
+        Text className = "font-normal" >
+        For frontend - only applications
+        if the developer wants to collect form submissions from his / her users, he / she requires to create a complete backend application
+        for it.It Solves the problem by providing the developers a url which they can use
+        for form submissions by sending a POST request to the url. <
+        /Text> <
+        /Collapse> <
+        /div>
 
-      {faqs.map((faq) => (
-        <div className="flex justify-center my-2">
-          <Collapse
-            className="font-bold text-xl w-full max-w-2xl text-[#00694B] rounded-lg shadow-[0_2px_2px_rgba(0,0,0,0.25)] px-4"
-            title={faq.Question}
-          >
-            <Text className="font-normal">{faq.Answer}</Text>
-          </Collapse>
-        </div>
-      ))}
-    </>
-  );
-}
+        {
+            faqs.map((faq) => ( <
+                div className = "flex justify-center my-2" >
+                <
+                Collapse className = "font-bold text-xl w-full max-w-2xl text-[#00694B] rounded-lg shadow-[0_2px_2px_rgba(0,0,0,0.25)] px-4"
+                title = { faq.Question } >
+                <
+                Text className = "font-normal" > { faq.Answer } < /Text> <
+                /Collapse> <
+                /div>
+            ))
+        } <
+        Footer / >
+        <
+        />
+    );
+}