product path

src/component/home/Products.jsx

@@ -2,7 +2,7 @@ import { useQuery } from '@tanstack/react-query'
 import React from 'react'
 import { productData } from '../../services/services'
 import queryKeys from '../../services/queryKeys'
-
+import productPath from "../../utils/productpath";
 export default function Products() {
 
     const {data, isFetching, isError, error} = useQuery({
@@ -37,7 +37,7 @@ export default function Products() {
                 <div className="row m-b-20">
                     {products && products.map((product, index) => (
                         <div key={product.uid+index} className="col-xxs-6 col-xl-4 col-xxl-6 mb-2 mb-xxl-0 ">
-                            <a href="/product/product_uid" >
+                            <a href={productPath(product?.uid)}  >
                                 <div className="d-flex align-items-center extraProductCard">
                                     <div className="icon-container img-icon m-r-20 bg-light-gray rounded">
                                         <i className="fa fa-cart-plus text-primary"></i>

src/component/product/ProductFactory.jsx

@@ -1,10 +1,16 @@
 import React from "react";
 import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
-import getImage from "../../utils/getImage";
+// import getImage from "../../utils/getImage";
 import ProductStart from "./ProductStart";
-
+import { useLocation } from 'react-router-dom';
 
 export default function ProductFactory(){
+    const location = useLocation();
+    const pathname = location.pathname;
+
+    // Split the pathname by '/' and get the last element
+    const lastPart = pathname.split('/').pop();
+    console.log(lastPart)
 
     return(
         <>

src/component/product/ProductStart.jsx

@@ -19,7 +19,7 @@ export default function ProductStart(){
                     <div className="card card-statistics mb-30">
                         {/*<img className="card-img-top" src={getImage('widget/01.jpg')} alt="Card image cap" />*/}
                         <div className="card-body">
-                            <h4 className="card-title">Information</h4>
+                            <h4 className="card-title">Subscription</h4>
                             <p className="card-text">Start with your goals in mind and then work possible.ith yand Goals. If the plan doesn’t support the vision then change it! </p>
                         </div>
                         <ul className="list-group list-group-flush">
@@ -31,7 +31,7 @@ export default function ProductStart(){
                             <a href="javascript:void(0)" className="card-link">Card link</a>
                             <a href="javascript:void(0)" className="card-link">Another link</a>
                         </div>
-                        <div>
+                        <div  className="subscribe-box">
                             <a href="javascript:void(0)" className="btn btn-primary mt-2">Start Product</a>
                         </div>
                     </div>

src/css/style.scss

@@ -88,6 +88,10 @@
   border-radius: 5px;
   margin: 2px;
 }
-
+.subscribe-box{
+  width: 100%;
+  padding: 10px;
+  text-align: center;
+}
 
 

src/utils/productpath.js

@@ -0,0 +1,9 @@
+let productPath = (product_uid) => {
+    if (!product_uid) {
+        return "/product/"; // require(`../assets/img/logo.png`);
+    } else {
+        return  "/product/"+ product_uid; // require(`../assets/img/${location}`);
+    }
+};
+
+export default productPath