Change the design of subscription page.

src/pages/Home/SubscriptionPlans.jsx

@@ -9,6 +9,7 @@ const SubscriptionPlans = () => {
   const [frequency, setFrequency] = useState(1);
   const { data, isLoading, isError, error } = useSubscription(frequency);
   const [loading, setLoading] = useState(false);
+  const [isOpen, setIsOpen] = useState(true);
   console.log(data);
   const frequencyLabel = (freq) => {
     switch (freq) {
@@ -63,7 +64,7 @@ const SubscriptionPlans = () => {
             <p>{error.name}</p>
           </div>
         ) : (
-          data.map((plan) => (
+          data.map((plan, index) => (
             <div key={plan.id} className="col-xl-4 col-lg-6 col-md-6">
               <div className="card h-100 shadow-lg border-0 p-3 text-center p-10">
                 {/* Header */}
@@ -109,6 +110,7 @@ const SubscriptionPlans = () => {
                       .map(([key, mod]) => {
 
                         if (!mod || !mod.name) return null;
+                        const isFirst = index === 0;
 
                         return (
                           <div className="accordion-item mb-2" key={`${plan.id}-${mod.id}`}>
@@ -118,7 +120,7 @@ const SubscriptionPlans = () => {
                                 type="button"
                                 data-bs-toggle="collapse"
                                 data-bs-target={`#collapse-${plan.id}-${mod.id}`}
-                                aria-expanded="true"
+                                aria-expanded={`${isFirst ? "true" : "false"}`}
                                 aria-controls={`collapse-${plan.id}-${mod.id}`}
                               >
                                 <span className="fw-semibold d-flex align-items-center">
@@ -136,7 +138,7 @@ const SubscriptionPlans = () => {
 
                             <div
                               id={`collapse-${plan.id}-${mod.id}`}
-                              className="accordion-collapse collapse show"
+                              className={`accordion-collapse collapse ${isFirst ? "show" : ""}`}
                               aria-labelledby={`heading-${plan.id}-${mod.id}`}
                             >
                               <div className="accordion-body py-2">
@@ -164,8 +166,6 @@ const SubscriptionPlans = () => {
                       })}
                 </div>
 
-
-
                 {/* Button */}
                 <div className="mt-auto">
                   <Link
@@ -183,6 +183,7 @@ const SubscriptionPlans = () => {
                 </div>
               </div>
             </div>
+
           ))
         )}
       </div>