From 7f43da97334573372b6e691f525c31bdeaeaf4f8 Mon Sep 17 00:00:00 2001
From: srilekha279 <158455553+srilekha279@users.noreply.github.com>
Date: Mon, 29 Jul 2024 19:35:09 +0000
Subject: [PATCH] enhanced faq section

---
 src/Components/FAQ/accordian.css         | 42 +++++++++++++++---------
 src/Components/FAQ/accordian.jsx         | 13 ++------
 src/Components/Footer/Components/faq.jsx |  2 +-
 3 files changed, 31 insertions(+), 26 deletions(-)

diff --git a/src/Components/FAQ/accordian.css b/src/Components/FAQ/accordian.css
index 5d0d114..e825aab 100644
--- a/src/Components/FAQ/accordian.css
+++ b/src/Components/FAQ/accordian.css
@@ -1,10 +1,12 @@
+/* accordian.css */
+
 h2 {
     text-align: center;
     font-weight: 600;
     display: flex;
     justify-content: center;
     margin-bottom: 15px;
-    
+    color: #212eA0; /* Added a color for the heading */
 }
 
 .question {
@@ -14,12 +16,11 @@ h2 {
     background-color: rgb(33,46,160);
     border: 2px solid whitesmoke;
     color: azure;
-    border-radius: 10px;
-    padding-top: 15px;
-    padding-right: 20px;
-    padding-bottom: 15px;
-    padding-left: 10px;
-} 
+    border-radius: 10px 10px 0 0; /* Rounded corners at the top */
+    padding: 15px 20px 15px 10px; /* Consolidated padding properties */
+    cursor: pointer; /* Added cursor pointer for better UX */
+    transition: background-color 0.3s ease-in-out; /* Smooth background color transition */
+}
 
 .accordian .question:hover {
     background-color: #000c7c;
@@ -35,27 +36,38 @@ h2 {
 
 h3 {
     padding: 10px;
+    margin: 0; /* Removed default margin */
+    font-size: 1.1em; /* Increased font size */
 }
 
 .item {
-    padding: 10px;
+    margin-bottom: 10px;
 }
 
 .content {
-    transition: max-height 1s ease-in-out;
+    transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
     justify-content: center;
     box-sizing: content-box;
-    /* padding: 20px; */
-    /* border: 3px solid black; */
-    border-radius: 10px;
-    /* margin: 10px; */
-    font-family: "Outfit", sans-serif;
     max-height: 0;
     overflow: hidden;
-    transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out, margin 0.5s ease-in-out, border 0.5s ease-in-out;
+    background-color: #1d1d35; /* Dark background color for answer section */
+    padding: 0 20px; /* Padding for content area */
+    border-left: 2px solid whitesmoke;
+    border-right: 2px solid whitesmoke;
+    border-bottom: 2px solid whitesmoke;
+    color: #fff; /* White text for dark mode */
+    border-radius: 0 0 10px 10px; /* Rounded corners at the bottom */
 }
+
 .content.show {
     max-height: 500px; /* Set a reasonable max-height to allow transition */
     padding-top: 20px;
     padding-bottom: 20px;
 }
+
+.no-data {
+    text-align: center;
+    padding: 20px;
+    color: #777;
+    font-size: 1.2em;
+}
diff --git a/src/Components/FAQ/accordian.jsx b/src/Components/FAQ/accordian.jsx
index 9abbbaf..1f11349 100644
--- a/src/Components/FAQ/accordian.jsx
+++ b/src/Components/FAQ/accordian.jsx
@@ -49,16 +49,9 @@ function Accordian() {
 
                 <div
                   ref={(el) => (refs.current[index] = el)}
-                  className="content"
+                  className={`content ${selected === dataItem.id ? "show" : ""}`}
                   style={{
-                    maxHeight:
-                      selected === dataItem.id
-                        ? // dataItem.id gives content height dynamycally and 100 added for extra space if needed
-                          `${heights[dataItem.id] + 100}px`
-                        : "0",
-                    padding: selected === dataItem.id ? "20px" : "",
-                    border: selected === dataItem.id ? "3px solid black" : "",
-                    margin: selected === dataItem.id ? "10px" : "",
+                    maxHeight: selected === dataItem.id ? `${heights[dataItem.id]}px` : "0",
                   }}
                 >
                   {dataItem.answer}
@@ -66,7 +59,7 @@ function Accordian() {
               </div>
             ))
           ) : (
-            <div> No data present </div>
+            <div className="no-data"> No data present </div>
           )}
         </div>
       </div>
diff --git a/src/Components/Footer/Components/faq.jsx b/src/Components/Footer/Components/faq.jsx
index 348b260..718d4e7 100644
--- a/src/Components/Footer/Components/faq.jsx
+++ b/src/Components/Footer/Components/faq.jsx
@@ -12,7 +12,7 @@ function Faq () {
 
     return (
         <>
-            <h2 className='faqh2'>FAQ's</h2>
+            <h2 className='faqh2'>FAQs</h2>
             <div id="faq">
                 <div className="faq">
                     {data && data.length > 0 ? (