final fixes suggested by @mlodic

Author: abheektripathy

components/Footer.tsx

@@ -38,7 +38,7 @@ export default function Footer() {
                     className="text-body-color font-semibold hover:text-primary mb-2 inline-block text-md leading-loose"
                   >
                     Matteo Lodi{" "}
-                    <span className="ml-5 font-small text-sm opacity-90 font-SpaceGrotesk">
+                    <span className="ml-12 font-small text-sm opacity-90 font-SpaceGrotesk">
                       Author and Creator{" "}
                     </span>
                   </a>
@@ -49,7 +49,7 @@ export default function Footer() {
                     className="text-body-color font-semibold hover:text-primary mb-2 inline-block text-md leading-loose"
                   >
                     Eshaan Bansal{" "}
-                    <span className="ml-5 font-small text-sm opacity-90 font-SpaceGrotesk">
+                    <span className="ml-7 font-small text-sm opacity-90 font-SpaceGrotesk">
                       Principal Maintainer{" "}
                     </span>
                   </a>
@@ -60,7 +60,7 @@ export default function Footer() {
                     className="text-body-color font-semibold hover:text-primary mb-2 inline-block text-md leading-loose"
                   >
                     Simone Berni{" "}
-                    <span className="ml-5 font-small text-sm opacity-90 font-SpaceGrotesk">
+                    <span className="ml-10 font-small text-sm opacity-90 font-SpaceGrotesk">
                       Key Contributor and Backend Maintainer{" "}
                     </span>
                   </a>
@@ -71,7 +71,7 @@ export default function Footer() {
                     className="text-body-color font-semibold hover:text-primary mb-2 inline-block text-md leading-loose"
                   >
                     Daniele Rosetti{" "}
-                    <span className="ml-5 font-small text-sm opacity-90 font-SpaceGrotesk">
+                    <span className="ml-6 font-small text-sm opacity-90 font-SpaceGrotesk">
                       Key Contributor and Frontend Maintainer{" "}
                     </span>
                   </a>

components/Header.tsx

@@ -99,14 +99,14 @@ export function Header(props: Headerprops) {
             <Link
               href="#feature-section"
               onClick={handleScroll}
-              className="text-white font-SpaceGrotesk font-light text-center invisible md:visible"
+              className="text-white font-SpaceGrotesk font-light text-center invisible md:visible ml-3"
             >
               Features
             </Link>
             <Link
               href="#testimonials-section"
               onClick={handleScroll}
-              className="text-white font-SpaceGrotesk font-light text-center invisible md:visible"
+              className="text-white font-SpaceGrotesk font-light text-center invisible md:visible ml-3"
             >
               Testimonials
             </Link>

components/sections/FAQSection.tsx

@@ -1,20 +1,33 @@
+"use client"
+
+import { useState } from "react";
 import { FAQData } from "../../constants/faqdata";
 export default function FAQSection() {
+  const [isOpen, setIsOpen] = useState(new Array(FAQData.length).fill(false));
+
+  const toggleFAQ = (index: number) => {
+    const updatedIsOpen = [...isOpen];
+    updatedIsOpen[index] = !updatedIsOpen[index];
+    setIsOpen(updatedIsOpen);
+  };
+
   return (
     <div className="w-5/6 md:w-full max-w-screen-xs lg:max-w-screen-md xl:max-w-screen-lg mt-5 space-y-5">
       {FAQData.map((FAQ, index) => {
         return (
-          <button
-            key={index}
-            className="w-full border-b-2 border-gray-500 pb-6 text-left group focus:outline-none"
-          >
-            <div className="text-lg font-semibold text-white font-SpaceGrotesk opacity-90">
-              Q: {FAQ.question}
-            </div>
-            <div className="mt-3 hidden text-white group-focus:flex font-SpaceGrotesk font-light opacity-70">
-              <p>{FAQ.answer}</p>
-            </div>
-          </button>
+          <div key={index} className="w-full border-b-2 border-gray-500 pb-6">
+        <button
+          className="text-lg font-semibold text-white font-SpaceGrotesk opacity-90 text-left"
+          onClick={() => toggleFAQ(index)}
+        >
+          Q: {FAQ.question}
+        </button>
+        {isOpen[index] && (
+          <div className="mt-3 text-white font-SpaceGrotesk font-light opacity-70">
+            <p dangerouslySetInnerHTML={{ __html: FAQ.answer.replace(/<a/g, '<a style="color: #00ADEE;"'), }} />
+          </div>
+        )}
+      </div>
         );
       })}
     </div>

constants/faqdata.ts

@@ -4,15 +4,17 @@ export const FAQData = [
         answer:'That is super fast and straightforward: follow the guide <a href="https://intelowl.readthedocs.io/en/latest/Installation.html" target="_blank">here</a>'
     },
     {
-        question: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.   ",
-        answer:"Lorem ipsum dolor sit a Lorem ipsum dolor sit a Lorem ipsum dolor sit aLorem ipsum dolor sit a Lorem ipsum dolor sit a"
+        question: "I have several techinal doubts regarding that can't just be answered at Issues. Whom I should contact? ",
+        answer:'Join our <a href="https://gsoc-slack.honeynet.org/" target="_blank" >Slack community</a> where all our Development goes on.'
     },
     {
-        question: "Lorem ipsum dolor sit a",
-        answer:"Lorem ipsum dolor sit a Lorem ipsum dolor sit a Lorem ipsum dolor sit aLorem ipsum dolor sit a Lorem ipsum dolor sit a"
+        question: "I don't want to use docker deployment. Are there any other ways, I could achieve this?",
+        answer:' Yes! The <a href="https://github.com/intelowlproject/IntelOwl/discussions/108" target="_blank" >discussion</a> thread is open for this. Follow it for more Updates. We do have a proper tutorial to deploy IntelOwl on Google-Kubernetes-Engine <a href="https://mostwanted002.cf/post/intel-owl-gke/" target="_blank" >here</a>.'
     },
     {
-        question: "Lorem ipsum dolor sit a psum dolor si",
-        answer:"Lorem ipsum dolor sit a Lorem ipsum dolor sit a Lorem ipsum dolor sit aLorem ipsum dolor sit a Lorem ipsum dolor sit a"
+        question: "I have found one API which can be included in IntelOwl. What next?",
+        answer:'Great! Head over to <a href="https://github.com/intelowlproject/IntelOwl/issues" >GitHub Issues</a> and open a new one. Contribute to it if you wish, else just leave it there. Rest of things will be taken care of by us.'
     },
-]
+]
+
+