From 360304aa58cc305253c51f35c6e0940d627e6ab1 Mon Sep 17 00:00:00 2001
From: Roshan Shamas <146016164+Roshan12here@users.noreply.github.com>
Date: Thu, 27 Jun 2024 01:20:42 +0500
Subject: [PATCH 1/2] Update FAQSection.tsx

The Design and Layout of the FAQ section was pretty bad. Most of the Modern websites take a different approach in this section So I have made this section dynamic and a user can manually see the answer of the Questions

Signed-off-by: Roshan Shamas <146016164+Roshan12here@users.noreply.github.com>
---
 components/defaultLanding/FAQSection.tsx | 37 ++++++++++++++++++++----
 1 file changed, 32 insertions(+), 5 deletions(-)

diff --git a/components/defaultLanding/FAQSection.tsx b/components/defaultLanding/FAQSection.tsx
index ce0fc77b9..531577024 100644
--- a/components/defaultLanding/FAQSection.tsx
+++ b/components/defaultLanding/FAQSection.tsx
@@ -1,3 +1,6 @@
+"use client";
+
+import { useState } from 'react';
 import { useTranslation } from 'next-i18next';
 import { Card } from 'react-daisyui';
 
@@ -5,6 +8,12 @@ import faqs from './data/faq.json';
 
 const FAQSection = () => {
   const { t } = useTranslation('common');
+  const [openFAQ, setOpenFAQ] = useState(null);
+
+  const handleToggle = (index) => {
+    setOpenFAQ(openFAQ === index ? null : index);
+  };
+
   return (
     <section className="py-6">
       <div className="flex flex-col justify-center space-y-6">
@@ -16,13 +25,31 @@ const FAQSection = () => {
           industry.
         </p>
         <div className="flex items-center justify-center">
-          <div className="grid grid-cols-1 gap-2">
+          <div className="grid grid-cols-1 gap-2 w-full">
             {faqs.map((faq, index) => {
+              const isOpen = openFAQ === index;
               return (
-                <Card key={index} className="border-none">
-                  <Card.Body className="items-left dark:border-gray-200 border border-gray-300">
-                    <Card.Title tag="h2">Q. {faq.question}</Card.Title>
-                    <p>A. {faq.answer}</p>
+                <Card
+                  key={index}
+                  className="border-none w-4/5 mx-auto hover:bg-[#4f83f1] hover:text-white translate-x-1 duration-300 rounded-xl"
+                >
+                  <Card.Body className="dark:border-gray-200 border-[2px] border-gray-400 text-center items-center">
+                    <Card.Title
+                      tag="h2"
+                      className="cursor-pointer"
+                      onClick={() => handleToggle(index)}
+                    >
+                      Q. {faq.question}
+                    </Card.Title>
+                    <div
+                      className={`overflow-hidden transition-all duration-500 ${
+                        isOpen ? 'max-h-full' : 'max-h-0'
+                      }`}
+                    >
+                      <p className={`${isOpen ? 'block' : 'hidden'} mt-2`}>
+                        A. {faq.answer}
+                      </p>
+                    </div>
                   </Card.Body>
                 </Card>
               );

From cc9195834b2662ce955d35e3e72994f52365c6e2 Mon Sep 17 00:00:00 2001
From: Roshan Shamas <146016164+Roshan12here@users.noreply.github.com>
Date: Fri, 28 Jun 2024 20:48:17 +0500
Subject: [PATCH 2/2] Update FAQSection.tsx

Okay So I have removed the 'use client' and I used the Primary color

Signed-off-by: Roshan Shamas <146016164+Roshan12here@users.noreply.github.com>
---
 components/defaultLanding/FAQSection.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/components/defaultLanding/FAQSection.tsx b/components/defaultLanding/FAQSection.tsx
index 531577024..623d68a4c 100644
--- a/components/defaultLanding/FAQSection.tsx
+++ b/components/defaultLanding/FAQSection.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useState } from 'react';
 import { useTranslation } from 'next-i18next';
 import { Card } from 'react-daisyui';
@@ -31,7 +29,7 @@ const FAQSection = () => {
               return (
                 <Card
                   key={index}
-                  className="border-none w-4/5 mx-auto hover:bg-[#4f83f1] hover:text-white translate-x-1 duration-300 rounded-xl"
+                  className="border-none w-4/5 mx-auto hover:bg-[#2563eb] hover:text-white translate-x-1 duration-300 rounded-xl"
                 >
                   <Card.Body className="dark:border-gray-200 border-[2px] border-gray-400 text-center items-center">
                     <Card.Title