Adding additional fields in landing subscription cards.

src/pages/Home/SubscriptionPlans.jsx

@@ -9,7 +9,7 @@ const SubscriptionPlans = () => {
   const [frequency, setFrequency] = useState(1);
   const { data, isLoading, isError, error } = useSubscription(frequency);
   const [loading, setLoading] = useState(false);
-
+  console.log(data);
   const frequencyLabel = (freq) => {
     switch (freq) {
       case 0:
@@ -35,8 +35,7 @@ const SubscriptionPlans = () => {
               <button
                 key={idx}
                 type="button"
-                className={`btn btn-${
+                className={`btn btn-${frequency === idx ? "primary" : "outline-secondary"
-                  frequency === idx ? "primary" : "outline-secondary"
                   }`}
                 onClick={() => setFrequency(idx)}
               >
@@ -102,24 +101,76 @@ const SubscriptionPlans = () => {
                 <h6 className="fw-bold text-uppercase border-top pt-3 mb-3 text-center">
                   Features
                 </h6>
-                <ul className="list-unstyled text-start mb-4 ms-7 fs-6">
+
+                <div className="accordion" id={`planFeatures-${plan.id}`}>
                   {plan.features?.modules &&
-                    Object.values(plan.features.modules).map((mod) =>
+                    Object.entries(plan.features.modules).map(([key, mod]) => {
-                      mod && mod.name ? (
+                      if (!mod || !mod.name) return null;
-                        <li
+
-                          key={mod.id}
+                      return (
-                          className="d-flex align-items-center mb-2"
+                        <div className="accordion-item mb-2" key={mod.id}>
+                          <h2 className="accordion-header" id={`heading-${mod.id}`}>
+                            <button
+                              className="accordion-button collapsed py-2 d-flex justify-content-between align-items-center"
+                              type="button"
+                              data-bs-toggle="collapse"
+                              data-bs-target={`#collapse-${mod.id}-${plan.id}`}
+                              aria-expanded="false"
+                              aria-controls={`collapse-${mod.id}-${plan.id}`}
                             >
+                              <span className="fw-semibold d-flex align-items-center">
                                 {mod.enabled ? (
                                   <i className="fa-regular fa-circle-check text-success me-2"></i>
                                 ) : (
                                   <i className="fa-regular fa-circle-xmark text-danger me-2"></i>
                                 )}
                                 {mod.name}
+                              </span>
+
+                              {/* Down arrow */}
+                              <i
+                                className="bx bx-chevron-down ms-2 transition-arrow"
+                                style={{ fontSize: "16px", transition: "transform 0.3s" }}
+                              ></i>
+                            </button>
+                          </h2>
+
+                          <div
+                            id={`collapse-${mod.id}-${plan.id}`}
+                            className="accordion-collapse collapse"
+                            data-bs-parent={`#planFeatures-${plan.id}`}
+                          >
+                            <div className="accordion-body py-2">
+                              {mod.features && mod.features.length > 0 ? (
+                                <ul className="list-unstyled ms-2">
+                                  {mod.features.map((feat) => (
+                                    <li
+                                      key={feat.id}
+                                      className="d-flex align-items-start mb-1"
+                                    >
+                                      <i
+                                        className={`fa-regular ${mod.enabled ? "bx bxs-circle text-success" : "bx bxs-circle text-danger"
+                                          } me-2 mt-1`}
+                                        style={{ fontSize: "8px" }}
+                                      ></i>
+
+                                      <span>{feat.name}</span>
                                     </li>
-                      ) : null
+                                  ))}
-                    )}
                                 </ul>
+                              ) : (
+                                <p className="text-muted small mb-0">
+                                  No additional features
+                                </p>
+                              )}
+                            </div>
+                          </div>
+                        </div>
+                      );
+                    })}
+                </div>
+
+
 
                 {/* Button */}
                 <div className="mt-auto">