From ad3d2a198dc0b7b52f5ba13e436f14b80a47dc33 Mon Sep 17 00:00:00 2001
From: ajeeshRS <ajeeshrs79@gmail.com>
Date: Tue, 17 Sep 2024 20:20:19 +0530
Subject: [PATCH] Updates faq-section

---
 src/app/faqs/page.tsx                 | 19 ------
 src/app/globals.css                   |  4 ++
 src/app/page.tsx                      |  2 +
 src/components/Faqs.tsx               | 89 ++++++++++++++++++++++++---
 src/components/FaqsGetintouchCard.tsx |  4 +-
 src/lib/constant/app.constant.ts      |  2 +-
 6 files changed, 88 insertions(+), 32 deletions(-)
 delete mode 100644 src/app/faqs/page.tsx

diff --git a/src/app/faqs/page.tsx b/src/app/faqs/page.tsx
deleted file mode 100644
index 5ff61030..00000000
--- a/src/app/faqs/page.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import Faqs from '@/components/Faqs';
-import FaqsGetintouchCard from '@/components/FaqsGetintouchCard';
-
-export default function Page() {
-  return (
-    <main className="w-full h-fit md:px-16 px-5 flex flex-col items-center mt-20">
-      <div className="w-full h-fit flex flex-col items-start">
-        <h1 className="font-bold md:text-4xl text-2xl">
-          Frequently Asked Questions
-        </h1>
-        <p className="md:text-sm text-xs py-2 font-semibold light:text-gray-700 dark:text-gray-200">
-          Quick answers to your questions you may have.
-        </p>
-      </div>
-      <Faqs />
-      <FaqsGetintouchCard />
-    </main>
-  );
-}
diff --git a/src/app/globals.css b/src/app/globals.css
index 301c0d12..1ed50e36 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -372,3 +372,7 @@
 .pac-logo.hdpi::after {
   content: none;
 }
+
+html {
+  scroll-behavior: smooth;
+}
\ No newline at end of file
diff --git a/src/app/page.tsx b/src/app/page.tsx
index d207eec6..aeb0c4e6 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,4 +1,5 @@
 import BackgroundSvg from '@/components/BackgroundSvg';
+import Faqs from '@/components/Faqs';
 import HalfCircleGradient from '@/components/HalfCircleGradient';
 import HeroSection from '@/components/hero-section';
 import { JobLanding } from '@/components/job-landing';
@@ -19,6 +20,7 @@ const HomePage = async ({
       <div>
         <JobLanding searchParams={searchParams} />
       </div>
+      <Faqs />
       <HalfCircleGradient position="bottom" />
     </div>
   );
diff --git a/src/components/Faqs.tsx b/src/components/Faqs.tsx
index f6d6f6fa..6d83850a 100644
--- a/src/components/Faqs.tsx
+++ b/src/components/Faqs.tsx
@@ -1,18 +1,87 @@
+'use client';
 import { faqData } from '@/lib/constant/faqs.constants';
+import { ChevronDown } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+import FaqsGetintouchCard from './FaqsGetintouchCard';
 
 export default function Faqs() {
+  const [expandedIndex, setExpandedIndex] = useState<number | null>(null);
+
+  const expandRef = useRef<(HTMLDivElement | null)[]>([]);
+
+  const toggleExpand = (index: number | null) => {
+    setExpandedIndex(index === expandedIndex ? null : index);
+  };
+
+  const handleClickOutside = (event: MouseEvent) => {
+    if (
+      expandedIndex !== null &&
+      expandRef.current[expandedIndex] &&
+      !expandRef.current[expandedIndex].contains(event.target as Node)
+    ) {
+      setExpandedIndex(null);
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [expandedIndex]);
+
   return (
-    <div className="w-full h-fit py-10">
-      <div className="w-fit grid grid-cols-1 md:grid-cols-2 gap-6">
-        {faqData.map((faq, i) => (
-          <div key={i} className="md:mx-5 mx-2 my-2 rounded-xl border p-4">
-            <p className="font-semibold text-base">{`Q. ${faq.question}`}</p>
-            <p className="light:text-gray-700 dark:text-gray-200 text-[15px] pl-5">
-              {faq.answer}
-            </p>
-          </div>
-        ))}
+    <div
+      id="faq"
+      className="w-full h-fit md:px-16 px-5 flex flex-col items-center pt-10"
+    >
+      <div className="w-full h-fit flex flex-col items-center">
+        <h1 className="font-bold md:text-4xl text-3xl">FAQs</h1>
+        <p className="md:text-sm text-xs py-2 font-semibold light:text-gray-700 dark:text-gray-200">
+          Quick answers to any questions you may have.{' '}
+        </p>
+      </div>
+
+      <div className="w-full h-fit py-10 flex justify-center items-center">
+        <div className="text-white md:w-4/6 w-full flex flex-col items-center border rounded-xl bg-white dark:bg-transparent">
+          {faqData.map((faq, i) => (
+            <div
+              key={i}
+              ref={(el) => {
+                expandRef.current[i] = el;
+              }}
+              className={`w-full flex h-fit flex-col items-start md:p-6 p-4 ${i !== faqData.length - 1 && 'border-b'}`}
+            >
+              <div
+                className="flex w-full h-full justify-between items-center cursor-pointer"
+                onClick={() => toggleExpand(i)}
+              >
+                <div className="w-full flex h-full items-center justify-between">
+                  <p className="md:px-5 px-2 md:text-xl text-lg dark:text-white text-[#0e0e0e] font-medium">
+                    {faq.question}
+                  </p>
+                  <button className="p-3">
+                    <ChevronDown
+                      className={`w-6 h-6 dark:text-white text-[#0e0e0e] transition-all duration-300 ease-in-out ${expandedIndex === i && 'rotate-180'}`}
+                    />
+                  </button>
+                </div>
+              </div>
+
+              <p
+                className={`${
+                  expandedIndex === i
+                    ? 'opacity-100 md:text-base text-sm translate-y-0 transition-all duration-500 ease-in-out mt-3 md:pl-10 pl-4 dark:text-white text-[#0e0e0e] leading-7'
+                    : 'opacity-0 translate-y-[-20px] max-h-0 leading-7  md:text-base text-sm md:pl-10 pl-4'
+                }`}
+              >
+                {faq.answer}
+              </p>
+            </div>
+          ))}
+        </div>
       </div>
+      <FaqsGetintouchCard />
     </div>
   );
 }
diff --git a/src/components/FaqsGetintouchCard.tsx b/src/components/FaqsGetintouchCard.tsx
index 07eaa9f3..fbe1937c 100644
--- a/src/components/FaqsGetintouchCard.tsx
+++ b/src/components/FaqsGetintouchCard.tsx
@@ -2,9 +2,9 @@ import { Button } from './ui/button';
 
 export default function FaqsGetintouchCard() {
   return (
-    <div className="rounded-xl border md:w-5/6 w-full h-fit p-3 my-2 flex items-center justify-between">
+    <div className="bg-white border dark:bg-transparent rounded-xl md:w-4/6 w-full h-fit p-4 my-1 flex items-center justify-between">
       <p className="font-semibold md:text-base text-xs">
-        Can&apos;t find what you are looking ?
+        Can&apos;t find what you&apos;re looking for?
       </p>
       <Button className="md:text-base text-xs">Get in touch</Button>
     </div>
diff --git a/src/lib/constant/app.constant.ts b/src/lib/constant/app.constant.ts
index 300c8ea2..9de956c7 100644
--- a/src/lib/constant/app.constant.ts
+++ b/src/lib/constant/app.constant.ts
@@ -14,7 +14,7 @@ export const navbar = [
   { id: 3, label: 'Internship', path: '/' },
   { id: 4, label: 'Testimonials', path: '/' },
 
-  { id: 5, label: 'FAQs', path: '/faqs' },
+  { id: 5, label: 'FAQs', path: '#faq' },
 
   { id: 6, label: 'Post a Job', path: APP_PATHS.POST_JOB },