.

package.json

@@ -14,17 +14,19 @@
     "chartjs": "^0.3.24",
     "cors": "^2.8.5",
     "faker": "^6.6.6",
+    "flutterwave-react-v3": "^1.3.0",
     "formik": "^2.2.9",
+    "react": "^18.2.0",
     "react-chartjs-2": "^4.1.0",
     "react-countup": "^6.2.0",
-    "react-router-dom": "^6.0.2",
-    "react-slick": "^0.29.0",
-    "react-toastify": "^9.0.1",
-    "flutterwave-react-v3": "^1.3.0",
-    "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-qr-code": "^2.0.11",
     "react-redux": "^8.0.5",
+    "react-router-dom": "^6.0.2",
     "react-scripts": "5.0.1",
+    "react-slick": "^0.29.0",
+    "react-to-print": "^2.14.12",
+    "react-toastify": "^9.0.1",
     "redux": "^4.2.0",
     "slick-carousel": "^1.8.1",
     "web-vitals": "^1.0.1",
@@ -54,4 +56,4 @@
       "last 1 safari version"
     ]
   }
-}
+}

src/components/Cards/HomeBannerOffersCard.jsx

@@ -3,24 +3,31 @@ import { Link } from "react-router-dom";
 import localImgLoad from "../../lib/localImgLoad";
 
 export default function HomeBannerOffersCard(props) {
-    console.log("HomeBannerOffersCard->",props.itemData)
+    console.log("HomeBannerOffersCard-> ##->",props)
+    const link_result = "/" + props.itemData.link_path;
     return (
         <Link
-            to="/my-collection/collection-item"
+            to={link_result}
             className="item w-full block group banner-630-340"
         >
             <div className="flex flex-col justify-between h-full">
                 <div className="content flex justify-between items-center mb-5">
-                    <div>
-                        <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">
+                    <div className="siderCardHeader">
+                        <h1 className="text-2xl font-bold text-dark-gray dark:text-white tracking-wide">
                             <>{props.itemData.title}</>
                         </h1>
                     </div>
                     {/*<SelectBox datas={filterDatas} action={dataSetHandler} />*/}
                 </div>
                 <div className="h-[233px]">
-                    {props.itemData.description}
+                    <div className="siderCardDescription">
+                       {props.itemData.description}
+                    </div>
+                    <div className="siderCardButton">
+                        [BUTTON HERE]
+                    </div>
                 </div>
+
             </div>
         </Link>
     );

src/components/FamilyAcc/FamilyManageTabs.jsx

@@ -4,12 +4,14 @@ import React, {
   useMemo,
   useRef,
   useState,
+  forwardRef,
 } from "react";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import profile from "../../assets/images/profile-info-profile.png";
-import qrSample from "../../assets/images/qr-sample.png";
 import usersService from "../../services/UsersService";
 import FamilyTasks from "./FamilyTasks";
+import QRCode from "react-qr-code";
+import { useReactToPrint } from "react-to-print";
 
 export default function FamilyManageTabs({
   className,
@@ -78,6 +80,12 @@ export default function FamilyManageTabs({
     familyManageHandler();
   }, [tab]);
 
+  const accountRef = useRef();
+  // to handle printing
+  const useHandlePrint = useReactToPrint({
+    content: () => accountRef.current,
+  });
+
   return (
     <div
       className={`update-table w-full bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow min-h-[520px] max-h-[600px] ${
@@ -138,7 +146,11 @@ export default function FamilyManageTabs({
                               />
                             )}
                             {name === "Account" && (
-                              <Account familyDetails={familyDetails} />
+                              <Account
+                                familyDetails={familyDetails}
+                                myRef={accountRef}
+                                handlePrint={useHandlePrint}
+                              />
                             )}
                             {name === "Profile" && <Profile />}
                           </>
@@ -217,37 +229,12 @@ function ProfileInfo({
   );
 }
 
-function Account({ familyDetails }) {
-  const handlePrint = () => {
-    const printableContent = `
-      <html>
-        <head>
-          <style>
-            /* Add your desired styles here */
-          </style>
-        </head>
-        <body>
-        <div class"update-table w-full lg:min-h-[450px] h-full p-8 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow"></div>
-          <h1>Family member details</h1>
-          <p>Username: ${familyDetails?.username}</p>
-          <p>Password: ${familyDetails?.pin}</p>
-          <img src="${qrSample}" alt="QR Code" />
-        </body>
-      </html>
-    `;
-
-    const printWindow = window.open('', '', 'width=800,height=700');
-    printWindow.document.open();
-    printWindow.document.write(printableContent);
-    printWindow.document.close();
-
-    printWindow.onload = () => {
-      printWindow.print();
-    };
-  };
-
+const Account = forwardRef(({ familyDetails, myRef, handlePrint }) => {
   return (
-    <div className="w-full lg:min-h-[500px] h-full flex flex-col items-center justify-center">
+    <div
+      className="w-full lg:min-h-[500px] h-full flex flex-col items-center justify-center"
+      ref={myRef}
+    >
       <div className="update-table w-full lg:min-h-[450px] h-full p-8 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow ">
         <div className="flex items-center justify-around h-[380px]">
           <div className="flex flex-col">
@@ -271,22 +258,26 @@ function Account({ familyDetails }) {
             <p className="text-xl tracking-wide mb-[15px] text-center font-bold text-dark-gray dark:text-white">
               Scan the code from mobile app
             </p>
-            <img
-              src={qrSample}
-              alt="qr-sample"
-              className="h-[200px] w-[200px]"
+            <QRCode
+              size={256}
+              style={{ height: "auto", maxWidth: "100%", width: "100%" }}
+              value={`https://www.google.com`}
+              viewBox={`0 0 256 256`}
             />
           </div>
         </div>
         <div className="h-[50px] w-full flex justify-center items-center">
-          <button className="btn-shine w-[116px] h-[46px] text-white rounded-full text-base bg-pink flex justify-center items-center" onClick={handlePrint}>
+          <button
+            className="btn-shine w-[116px] h-[46px] text-white rounded-full text-base bg-pink flex justify-center items-center"
+            onClick={handlePrint}
+          >
             Print
           </button>
         </div>
       </div>
     </div>
   );
-}
+});
 
 function Profile() {
   return <>Profile</>;

src/components/Home/HomeSliders.jsx

@@ -19,9 +19,9 @@ export default function HomeSliders(props) {
                         <div className="item w-full h-full bg-white dark:bg-dark-white   rounded-2xl overflow-hidden">
                             <img src={slider2} alt="slider" className="w-full h-full" />
                         </div>
-                        <div className="item w-full h-full bg-white dark:bg-dark-white   rounded-2xl overflow-hidden">
-                            <img src={slider3} alt="slider" className="w-full h-full" />
-                        </div>
+                        {/*<div className="item w-full h-full bg-white dark:bg-dark-white   rounded-2xl overflow-hidden">*/}
+                        {/*    <img src={slider3} alt="slider" className="w-full h-full" />*/}
+                        {/*</div>*/}
                         {props.bannerList.map((item, index) => (
                             <div className="item w-full h-full bg-white dark:bg-dark-white   rounded-2xl overflow-hidden">
                                 <HomeBannerOffersCard

src/index.css

@@ -9,7 +9,18 @@
   font-family: "Product Sans";
   src: url("./assets/fonts/Product Sans Bold.ttf");
 }
-
+.siderCardHeader{
+  margin: 40px 40px 10px 40px;
+}
+.siderCardDescription{
+  margin: 30px;
+  font-size: 24px;
+}
+.siderCardButton{
+  margin-top: 10px;
+  width: 100%;
+  text-align: center;
+}
 .offer-slide-item{
   background: rgb(2,0,36);
   background: radial-gradient(circle, rgba(2,0,36,1) 0%, rgba(3,51,2,0.782125350140056) 0%, rgba(0,212,255,0.07904411764705888) 0%, rgba(153,182,201,1) 99%);