wishlist api binding complete

components/user/MyWhishList.js

 import Image from "next/image";
 import React, { Fragment } from "react";
 import { Button } from "react-bootstrap";
-import { renderImage } from "../../services/imageHandling";
-
-const MyWhishList = () => {
-    const whishListData = [
-        {
-            id: "0",
-            name: "City Climb",
-            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
-            price: "$200",
-            discount: "40% OFF",
-            availablity: "For 1 Night",
-            other: "Includes taxes & Fees",
-            rating: "8.8",
-            type: "Top Rated",
-            image: "/images/user/image1.png"
-        },
-        {
-            id: "1",
-            name: "City Climb",
-            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
-            price: "$200",
-            discount: "40% OFF",
-            availablity: "For 1 Night",
-            other: "Includes taxes & Fees",
-            rating: "8.8",
-            type: "Top Rated",
-            image: "/images/user/image2.png"
-        },
-        {
-            id: "2",
-            name: "City Climb",
-            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
-            price: "$200",
-            discount: "40% OFF",
-            availablity: "For 1 Night",
-            other: "Includes taxes & Fees",
-            rating: "8.8",
-            type: "Top Rated",
-            image: "/images/user/image3.png"
-        },
-        {
-            id: "3",
-            name: "City Climb",
-            description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
-            price: "$200",
-            discount: "40% OFF",
-            availablity: "For 1 Night",
-            other: "Includes taxes & Fees",
-            rating: "8.8",
-            type: "Top Rated",
-            image: "/images/user/image4.png"
-        }
-    ]
+import { cleanImage } from "../../services/imageHandling";
+import WishlistComponent from "../detail/WIshlistComponent";
+import { useRouter } from "next/router";
 
+const MyWhishList = ({ data }) => {
+    const router = useRouter();
     return (
         <Fragment>
             <div className="container pb-5">
@@ -63,44 +15,43 @@ const MyWhishList = () => {
                         <h2 className="px-2 px-lg-0">My Bookings</h2>
                         <div className="listing-items">
                             <div className="row">
-                                {whishListData?.length && whishListData.map((data, index) => (
+                                {data?.length && data.map((data, index) => (
                                     <div className="col-12 col-sm-12 col-lg-3 col-md-6 px-4 px-lg-3" key={`1${index}`}>
                                         <div className="item">
                                             <div className="browse-experiences-item">
                                                 <div className="img-wrapper">
                                                     <span className="image-container">
-                                                        <Image src={renderImage(data.image)} layout="fill" className="image img-fluid" />
+                                                        <Image src={cleanImage(data?.attributes?.experience?.data?.attributes?.image?.data?.attributes)} layout="fill" className="image img-fluid" />
                                                     </span>
                                                     <div className="top-rated">Top Rated</div>
                                                 </div>
                                                 <div className="info">
                                                     <div className="top-name">
-                                                        <div className="title">{data.name}</div>
+                                                        <div className="title">{data?.attributes?.experience?.data?.attributes?.name}</div>
                                                         <div className="rating-wishlist">
                                                             <div className="rating">
-                                                                <span className="number">{data.rating}</span>
+                                                                <span className="number">{data?.attributes?.experience?.data?.attributes?.rating}</span>
                                                                 <span className="image-container">
                                                                     <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" />
                                                                 </span>
                                                             </div>
-                                                            <span className="image-container">
-                                                                <Image src={renderImage("/images/user/heart.svg")} layout="fill" className="image" />
-                                                            </span>
+                                                            <WishlistComponent activityId={data?.attributes?.experience?.data?.id} userId={data?.attributes?.endUser?.data?.id} />
                                                         </div>
                                                     </div>
-                                                    <div className="discription">Lorem ipsum dolor sit amet, consectetur adipiscing elit, <a href="">Read More</a></div>
-                                                    {/* <p className="price">{data.price} <span>{data.discount}</span></p> */}
-
+                                                    <div className="discription"><p className="text-trunc-2">{data?.attributes?.experience?.data?.attributes?.description}</p></div>
                                                     <div className="price">
-                                                        ${data?.price} <span className="off">{data.discount}</span>
+                                                        ${data?.attributes?.experience?.data?.attributes?.pricePerPerson} <span className="off">{}% OFF</span>
                                                     </div>
                                                     <div className="detail">
-                                                        <div>{data.availablity}</div>
-                                                        <div>{data.other}</div>
+                                                        <div className="">For 1 Night</div>
+                                                        <div className="">Includes taxes & Fees</div>
                                                     </div>
                                                     <div className="explore-now">
                                                         <Button
                                                             variant="primary"
+                                                            onClick={() => {
+                                                                router.push(`/activities/${data?.attributes?.experience?.data?.id}`);
+                                                              }}
                                                         >
                                                             Explore Now
                                                         </Button>

pages/user/wishlist/index.js

 import React from "react";
 import Layout from "../../../components/layout/Layout";
 import MyWhishList from "../../../components/user/MyWhishList";
+import { useSelector } from "react-redux";
 
-export default function UserProfilePage () {
-
+export default function UserProfilePage() {
+    const { wishlists } = useSelector(state => state.wishlists)
     return (
         <Layout>
-            <MyWhishList />
+            <MyWhishList data={wishlists}/>
         </Layout>
     );
 };
\ No newline at end of file

redux/actions/activityAction.js

@@ -547,7 +547,7 @@ export const getWishlists =
             }
           }
         },
-        populate: ["endUser", "experience"]
+        populate: ["endUser", "experience", "experience.image"]
       };
 
       const queryString = qs.stringify(query, {

styles/globals.css

@@ -260,7 +260,7 @@ h6 {
 }
 
 /* cursor pointer */
-.cursor-pointer{
+.cursor-pointer {
   cursor: pointer;
 }
 
@@ -270,12 +270,12 @@ h6 {
   position: relative;
 }
 
-.image-container > span {
+.image-container>span {
   position: unset !important;
   /* display: inline-block !important; */
 }
 
-.image-container.d-inblock > span {
+.image-container.d-inblock>span {
   position: unset !important;
   display: inline-block !important;
 }
@@ -286,6 +286,7 @@ h6 {
   position: relative !important;
   height: unset !important;
 }
+
 header {
   position: relative;
   z-index: 99;
@@ -369,13 +370,16 @@ header {
 .header-search {
   position: relative;
 }
+
 .header-search .rbt .rbt-input-main {
   padding-right: 2.5rem;
   font-size: 0.833vw;
 }
-.header-search > .form-control {
+
+.header-search>.form-control {
   font-size: 0.833vw;
 }
+
 .header-search .search-icon {
   position: absolute;
   right: 0;
@@ -412,12 +416,14 @@ header {
   width: 100%;
   height: 100%;
 }
+
 .home-banner-bg::before {
   content: "";
   position: absolute;
   bottom: 0;
   background: rgb(0, 0, 0);
-  background: rgba(0, 0, 0, 0.2); /* Black see-through */
+  background: rgba(0, 0, 0, 0.2);
+  /* Black see-through */
   color: #f1f1f1;
   width: 100%;
   transition: 0.5s ease;
@@ -427,17 +433,21 @@ header {
   z-index: 1;
   border-radius: 0 0 8rem 8rem;
 }
-.home-banner-bg > span {
+
+.home-banner-bg>span {
   height: 100%;
   display: block;
 }
-.home-banner-bg > span > span {
+
+.home-banner-bg>span>span {
   height: 100% !important;
 }
-.home-banner-bg > span > span .image {
+
+.home-banner-bg>span>span .image {
   object-fit: cover !important;
   border-radius: 0 0 136px 136px;
 }
+
 .banner-bg {
   position: absolute;
   left: 0;
@@ -499,7 +509,7 @@ header {
   position: relative;
 }
 
-.owl-custom01.owl-carousel .owl-nav button.owl-prev > span {
+.owl-custom01.owl-carousel .owl-nav button.owl-prev>span {
   background: url(/images/icons/arrow-left.svg) no-repeat center;
   width: 14px;
   height: 22px;
@@ -507,7 +517,7 @@ header {
   display: block;
 }
 
-.owl-custom01.owl-carousel .owl-nav button.owl-next > span {
+.owl-custom01.owl-carousel .owl-nav button.owl-next>span {
   background: url(/images/icons/arrow-right.svg) no-repeat center;
   width: 14px;
   height: 22px;
@@ -549,9 +559,11 @@ header {
   border: 3px solid #fff;
   background: #2a2a2a;
 }
+
 .searchbar-h .rbt-menu.dropdown-menu.show {
   top: 1.7rem !important;
 }
+
 .searchbar-h {
   position: relative;
   width: 100%;
@@ -671,9 +683,11 @@ span.form-error,
 .form-container .input-group {
   margin-bottom: 28px;
 }
+
 .form-container .input-group .form-error {
   margin-top: 0.4rem;
 }
+
 .form-container label {
   color: #000;
   font-family: "Sofia Pro Light";
@@ -831,7 +845,7 @@ span.form-error,
   user-select: none;
 }
 
-.check-container input:checked ~ .checkmark:after {
+.check-container input:checked~.checkmark:after {
   display: block;
 }
 
@@ -859,7 +873,7 @@ span.form-error,
   width: 0;
 }
 
-.check-container input:checked ~ .checkmark {
+.check-container input:checked~.checkmark {
   background-color: #fff;
 }
 
@@ -994,12 +1008,15 @@ span.form-error,
   align-items: center;
   justify-content: center;
 }
-.btn-edit > span:first-child {
+
+.btn-edit>span:first-child {
   margin-top: 0.2rem;
 }
+
 .btn-edit .image-container .image {
   width: calc(16px + (20 - 16) * (100vw - 320px) / (1920 - 320)) !important;
 }
+
 .content-wraaper label {
   color: #646464;
   font-size: 18px;
@@ -1070,7 +1087,7 @@ span.form-error,
   color: #808080;
 }
 
-.card-booking-content > p:last-child {
+.card-booking-content>p:last-child {
   margin-bottom: 0;
 }
 
@@ -1113,7 +1130,7 @@ span.form-error,
   color: #808080;
 }
 
-.card-booking-content .description > span {
+.card-booking-content .description>span {
   color: #646464;
   text-decoration: underline;
 }
@@ -1123,7 +1140,7 @@ span.form-error,
   font-weight: 600;
 }
 
-.card-booking-content .price > span {
+.card-booking-content .price>span {
   font-size: 0.8rem;
   color: #808080;
 }
@@ -1159,7 +1176,7 @@ span.form-error,
   margin-bottom: 1rem;
 }
 
-.card-booking-content .details-div > p:first-child {
+.card-booking-content .details-div>p:first-child {
   font-family: "Sofia Pro Light";
   font-size: calc(14px + (14 - 14) * (100vw - 320px) / (1920 - 320));
   line-height: calc(20px + (20 - 20) * (100vw - 320px) / (1920 - 320));
@@ -1169,7 +1186,7 @@ span.form-error,
   margin-bottom: 0;
 }
 
-.card-booking-content .details-div > p:last-child {
+.card-booking-content .details-div>p:last-child {
   font-family: "Sofia Pro Light";
   font-size: 16px;
   font-size: calc(16px + (16 - 16) * (100vw - 320px) / (1920 - 320));
@@ -1206,6 +1223,7 @@ span.form-error,
   letter-spacing: 0em;
   margin-bottom: 20px;
 }
+
 .business-details::before {
   content: "";
   border-left: 6px solid #0070bd;
@@ -1360,9 +1378,11 @@ span.form-error,
   display: flex;
   align-items: center;
 }
-.sidebar ul li a > span {
+
+.sidebar ul li a>span {
   flex: 0 0 auto;
 }
+
 .sidebar ul li a span {
   padding-left: 1rem;
   padding-top: 5px;
@@ -1446,9 +1466,11 @@ span.form-error,
   color: #ffffff;
   border: none;
 }
+
 .btnAdd:disabled .image-container .image {
   width: 14px !important;
 }
+
 .btnAdd:hover,
 .btnAdd:focus,
 .btnAdd:active {
@@ -1511,12 +1533,12 @@ span.form-error,
 }
 
 /* On mouse-over, add a grey background color */
-.radioContainer:hover input ~ .checkmark {
+.radioContainer:hover input~.checkmark {
   background-color: #fff;
 }
 
 /* When the radio button is checked, add a blue background */
-.radioContainer input:checked ~ .checkmark {
+.radioContainer input:checked~.checkmark {
   color: #0070bd;
 }
 
@@ -1528,7 +1550,7 @@ span.form-error,
 }
 
 /* Show the indicator (dot/circle) when checked */
-.radioContainer input:checked ~ .checkmark:after {
+.radioContainer input:checked~.checkmark:after {
   display: block;
 }
 
@@ -1861,6 +1883,7 @@ span.form-error,
   text-align: center;
   cursor: pointer;
 }
+
 .let-discover-carousal a .image {
   padding: 0.2rem !important;
 }
@@ -1868,12 +1891,15 @@ span.form-error,
 .let-discover-carousal a .title {
   padding: 1rem;
 }
+
 .let-discover-carousal a.active {
   color: #000;
 }
+
 .let-discover-carousal a.active .title {
   text-decoration: underline;
 }
+
 .carousal-c {
   padding: 0 4rem;
 }
@@ -1929,6 +1955,7 @@ span.form-error,
   position: relative;
   color: #000;
 }
+
 .browse-experiences-item .img-wrapper .image-container .image {
   height: calc(220px + (220 - 220) * (100vw - 320px) / (1920 - 320)) !important;
   background-color: #adadad;
@@ -1964,46 +1991,57 @@ span.form-error,
   align-items: center;
   justify-content: center;
 }
+
 .info .rating-wishlist .rating .number {
   padding-top: 0.2rem;
 }
+
 .info .rating-wishlist .wishlist .image-container {
   width: 19px;
   height: 19px;
   display: block;
 }
+
 .rs {
   /* font-size: calc(32px + (55.008 - 32) * (100vw - 320px) / (1920 - 320)) */
 }
+
 .share-social-container {
   display: flex;
   align-items: center;
 }
+
 .anticon.anticon-copy {
   cursor: pointer;
 }
+
 .share-social-container .share-social-some-network {
   margin-right: 1rem;
 }
+
 .wishlist-share .wishlist {
   width: 29px;
   height: 29px;
 }
+
 .info .rating-wishlist .rating .image-container {
   width: 14px;
   /* margin-top: -4px; */
   margin-left: 4px;
 }
-.product-info .wishlist-share > div {
+
+.product-info .wishlist-share>div {
   margin-bottom: 1rem;
 }
+
 .browse-experiences-item .info .discription {
   font-size: 0.677vw;
   line-height: 0.8vw;
   color: #808080;
   margin-bottom: 10px;
 }
-.browse-experiences-item .info .discription > span {
+
+.browse-experiences-item .info .discription>span {
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
@@ -2038,9 +2076,11 @@ span.form-error,
   line-height: 11px;
   margin-bottom: 10px;
 }
-.browse-experiences-item .info .detail > div {
+
+.browse-experiences-item .info .detail>div {
   margin-bottom: 0.4rem;
 }
+
 .btn-outline-secondary {
   border: 1px solid #000;
   font-size: 16px;
@@ -2048,9 +2088,11 @@ span.form-error,
   padding-left: 1rem;
   padding-right: 1rem;
 }
+
 .btn-outline-secondary:hover {
   background: #0070bd;
 }
+
 .btn-center {
   text-align: center;
   padding: 2rem 0;
@@ -2063,12 +2105,14 @@ span.form-error,
   object-fit: cover;
   padding: 4rem;
 }
+
 .gift-an-experience-inner .img .image {
   display: block;
   animation: scale2 4s infinite;
   transition: all 0.6s ease-out;
   overflow: hidden;
 }
+
 .gift-an-experience-inner .content .title {
   font-size: 2.083vw;
   line-height: 2.083vw;
@@ -2088,6 +2132,7 @@ span.form-error,
   text-align: center;
   padding: 0 13vw;
 }
+
 .testimonial-item .image {
   padding: 0.2rem !important;
 }
@@ -2256,9 +2301,11 @@ footer hr {
   justify-content: space-between;
   cursor: pointer;
 }
+
 .box-01 .reset a:hover {
   color: #0070bd;
 }
+
 .box-01 .reset a .image-container {
   margin-left: 0.5rem;
 }
@@ -2303,6 +2350,7 @@ footer hr {
 .form-select {
   font-size: 0.833vw;
 }
+
 .data-filters-item label input {
   margin-right: 0.4rem;
   margin-top: -4px;
@@ -2517,15 +2565,19 @@ footer hr {
   align-items: center;
   padding: 0.5rem 0 2rem;
 }
+
 .product-reviews .review {
   margin-left: 1rem;
 }
+
 .guest-reviews-detail .star-ratings .star-container {
   padding: 0 0.1rem !important;
 }
+
 .guest-reviews-detail .star-ratings {
   margin-bottom: 1rem;
 }
+
 .product-info .product-reviews .star {
   display: flex;
   align-items: center;
@@ -2560,7 +2612,7 @@ footer hr {
   line-height: 2.083vw;
 }
 
-.product-info .price > span {
+.product-info .price>span {
   color: #808080;
   font-size: 14px;
 }
@@ -2571,16 +2623,18 @@ footer hr {
   margin-bottom: 0.5rem;
 }
 
-.product-info .location > span {
+.product-info .location>span {
   color: #808080;
   font-size: 16px;
 }
+
 .btn:hover {
   box-shadow: -1px 6px 10px 0 rgba(120, 60, 20, 0.2);
   transform: scale(1.05);
   /* background-color: transparent; */
   transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
 }
+
 .btn-row {
   padding: 2rem 0;
 }
@@ -2611,10 +2665,12 @@ footer hr {
 .image-gallery-content .image-gallery-slide .image-gallery-image {
   /* max-height: 100%; */
 }
+
 .image-gallery-content.image-gallery-thumbnails-bottom.fullscreen .image-gallery-thumbnail {
   width: 100px;
 }
-.breadcrumb-item + .breadcrumb-item::before {
+
+.breadcrumb-item+.breadcrumb-item::before {
   content: "";
   background: url(/images/icons/arrow-right-grey.svg) no-repeat;
   width: 24px;
@@ -2629,11 +2685,13 @@ footer hr {
 .btn {
   font-size: 0.833vw;
 }
-.btn-check:focus + .btn,
+
+.btn-check:focus+.btn,
 .btn:focus,
 button:focus:not(:focus-visible) {
   box-shadow: none;
 }
+
 .availability-wrappper {
   display: flex;
   align-items: center;
@@ -2648,7 +2706,7 @@ button:focus:not(:focus-visible) {
   margin: 0.5rem;
 }
 
-.availability-wrappper li > span {
+.availability-wrappper li>span {
   width: 30px;
   display: block;
   margin-right: 10px;
@@ -2719,9 +2777,11 @@ button:focus:not(:focus-visible) {
   margin-left: 0.5rem;
   cursor: pointer;
 }
+
 .guest-reviews-detail.modal .head {
   margin-bottom: 0;
 }
+
 .guest-reviews-detail {
   margin-right: 3rem;
 }
@@ -2734,7 +2794,7 @@ button:focus:not(:focus-visible) {
   margin-bottom: 2rem;
 }
 
-.guest-reviews-session > .container {
+.guest-reviews-session>.container {
   border-top: 1px solid #c9c9c9;
   padding-top: 3rem;
 }
@@ -2771,15 +2831,18 @@ button:focus:not(:focus-visible) {
   height: 3px;
   background-size: 90%;
 }
+
 .accordion-01 .title-accord {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 96%;
 }
+
 .logout-bk {
   display: none;
 }
+
 .accordion-01 .accordion-button {
   font-size: 1.042vw;
   line-height: 1.042vw;
@@ -2848,13 +2911,16 @@ button:focus:not(:focus-visible) {
   border: 1px solid #000;
   border-radius: 10px;
 }
+
 .testimonial-session .rating {
   margin-bottom: 0.5rem;
 }
+
 .testimonial-session .rating .star-ratings svg {
   width: 33px !important;
   height: 33px !important;
 }
+
 .sub-categories {
   display: flex;
   align-items: center;
@@ -2862,11 +2928,13 @@ button:focus:not(:focus-visible) {
   -ms-overflow-style: none;
   scrollbar-width: none;
 }
-.active > .page-link,
+
+.active>.page-link,
 .page-link.active {
   background-color: #0070bd;
   border-color: #0070bd;
 }
+
 .sub-categories a {
   cursor: pointer;
   display: flex;
@@ -2889,46 +2957,57 @@ input[type="number"]::-webkit-outer-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
+
 .sub-categories a .image-container {
   width: 20px;
   display: inline-block;
   margin-left: 0.5rem;
   margin-right: -0.8rem;
 }
+
 .graph {
   padding-top: 3rem;
 }
+
 .graph .graph-price {
   display: flex;
   align-items: center;
   justify-content: space-between;
   color: #808080;
 }
+
 :where(.css-dev-only-do-not-override-1kuana8).ant-tooltip .ant-tooltip-inner {
   padding: 5px 8px;
   color: #808080;
   background-color: transparent;
 }
+
 :where(.css-dev-only-do-not-override-1kuana8).ant-tooltip .ant-tooltip-arrow:before,
 :where(.css-dev-only-do-not-override-1kuana8).ant-tooltip .ant-tooltip-content {
   background: #fff;
 }
+
 :where(.css-dev-only-do-not-override-1kuana8).ant-tooltip .ant-tooltip-arrow::after {
   box-shadow: 1px 1px 6px #c1c1c1;
 }
+
 .graph :where(.css-dev-only-do-not-override-1kuana8).ant-slider:hover .ant-slider-track {
   background-color: #0070bd;
 }
+
 .graph :where(.css-dev-only-do-not-override-1kuana8).ant-slider .ant-slider-handle::after {
   background-color: #0070bd;
   box-shadow: 0 0 0 2px #0070bd;
 }
+
 .graph :where(.css-dev-only-do-not-override-1kuana8).ant-slider .ant-slider-rail {
   background-color: #a1a1a1;
 }
+
 .graph :where(.css-dev-only-do-not-override-1kuana8).ant-slider .ant-slider-track {
   background-color: #0070bd;
 }
+
 .box-01 .inner .price .sub-text {
   color: #d1d1d1;
 }
@@ -2939,16 +3018,21 @@ input[type="number"]::-webkit-outer-spin-button {
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent black background */
-  z-index: 999; /* Ensure the overlay appears above other content */
+  background-color: rgba(0, 0, 0, 0.8);
+  /* Semi-transparent black background */
+  z-index: 999;
+  /* Ensure the overlay appears above other content */
 }
+
 .let-discover-session.let-discover-listing-session .swiper-nav,
 .home_nav {
   width: 106%;
 }
+
 .mySwiper01 .swiper-button-prev:after {
   background: url(/images/icons/arrow-left-w.svg) no-repeat center;
 }
+
 .mySwiper01 .swiper-button-next:after {
   background: url(/images/icons/arrow-right-w.svg) no-repeat center;
 }
@@ -2981,7 +3065,7 @@ input[type="number"]::-webkit-outer-spin-button {
   background: transparent;
 }
 
-.swiper-nav button .image-container > span {
+.swiper-nav button .image-container>span {
   width: 14px !important;
 }
 
@@ -3011,16 +3095,20 @@ input[type="number"]::-webkit-outer-spin-button {
   margin-top: -20px;
   margin-bottom: 5rem;
 }
+
 .page-title-area .banner-bg .image-container {
   height: 100%;
   display: block;
 }
-.page-title-area .banner-bg .image-container > span {
+
+.page-title-area .banner-bg .image-container>span {
   height: 100% !important;
 }
+
 .page-title-area .banner-bg .image {
   object-fit: cover;
 }
+
 .page-title-one {
   background: url(/images/banner/about-us.png);
 }
@@ -3177,7 +3265,7 @@ input[type="number"]::-webkit-outer-spin-button {
 
 .swiper-pagination-fraction,
 .swiper-pagination-custom,
-.swiper-horizontal > .swiper-pagination-bullets,
+.swiper-horizontal>.swiper-pagination-bullets,
 .swiper-pagination-bullets.swiper-pagination-horizontal {
   bottom: -5px !important;
 }
@@ -3287,14 +3375,17 @@ input[type="number"]::-webkit-outer-spin-button {
   height: 220px;
   position: relative;
 }
+
 .blog-item .img-wrapper .image-container {
   height: 100%;
   display: block;
 }
-.blog-item .img-wrapper .image-container > span {
+
+.blog-item .img-wrapper .image-container>span {
   height: 100% !important;
 }
-.blog-item .img-wrapper .image-container > span > .image {
+
+.blog-item .img-wrapper .image-container>span>.image {
   object-fit: cover;
   border-radius: 25px 25px 0 0;
 }
@@ -3349,6 +3440,7 @@ input[type="number"]::-webkit-outer-spin-button {
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
 }
+
 .blog-item .info .read-more .btn {
   font-size: 0.677vw;
   line-height: 0.677vw;
@@ -3374,36 +3466,44 @@ input[type="number"]::-webkit-outer-spin-button {
   padding: 0;
   border-top: 0;
 }
+
 .blogs-filter .btn.btn-primary {
   padding-top: 0.475rem;
   padding-bottom: 0.475rem;
 }
+
 .blog-detail-inner-session .profile {
   display: flex;
   align-items: center;
 }
+
 .blog-detail-inner-session .profile .image-container {
   width: 56px;
   display: inline-block;
   margin-right: 0.5rem;
 }
+
 .blog-detail-inner-session .date {
   display: flex;
   align-items: center;
   justify-content: flex-end;
 }
+
 .blog-detail-inner-session .date .image-container {
   width: 29px;
   display: inline-block;
   margin-right: 0.5rem;
 }
+
 .blog-detail-inner-session .flag-list {
   padding: 2rem 0;
 }
+
 .blog-detail-inner-session .flag-list li {
   display: inline-block;
   margin-right: 1rem;
 }
+
 .blog-detail-inner-session .flag-list li a {
   background: #f7f5f1;
   border-radius: 5px;
@@ -3411,45 +3511,55 @@ input[type="number"]::-webkit-outer-spin-button {
   padding: 0.5rem 1rem;
   display: block;
 }
+
 .blog-detail-inner-session h2 {
   font-size: 1.667vw;
   line-height: 1.967vw;
   font-weight: 400;
   margin-bottom: 2rem;
 }
+
 .blog-detail-inner-session p {
   margin-bottom: 1.5rem;
 }
+
 .blog-detail-inner-session {
   padding-bottom: 3rem;
 }
+
 .s-page-session {
   margin: 5rem 0;
 }
+
 .s-page-session h2 {
   font-size: 32px;
   line-height: 40px;
   font-weight: 400;
   margin-bottom: 1rem;
 }
+
 .s-page-session p {
   margin-bottom: 1.5rem;
 }
+
 .s-page-session ul {
   list-style-type: disc;
   list-style-position: inside;
   margin-left: 2rem;
   margin-bottom: 2rem;
 }
+
 .gift-card-session {
   padding: 5rem 0;
 }
+
 .gift-card-lt {
   text-align: center;
   width: 100%;
   height: 260px;
   padding-right: 3rem;
 }
+
 .gift-card-lt .gift-box {
   height: 100%;
   background: #f7f5f1;
@@ -3459,21 +3569,26 @@ input[type="number"]::-webkit-outer-spin-button {
   border-radius: 13px;
   margin-bottom: 1rem;
 }
+
 .gift-card-rt {
   border-left: 2px solid #e9e9e9;
   padding-left: 3rem;
 }
+
 .gift-card-session .back-btn .image-container {
   width: 15px;
   display: inline-block;
 }
+
 .gift-card-amt ul li {
   display: inline-block;
   vertical-align: top;
 }
+
 .gift-card-amt ul li input[type="radio"] {
   display: none;
 }
+
 .gift-card-amt ul li a,
 .gift-card-amt ul li label {
   cursor: pointer;
@@ -3493,16 +3608,19 @@ input[type="number"]::-webkit-outer-spin-button {
   align-items: center;
   justify-content: center;
 }
-.gift-card-amt > ul {
+
+.gift-card-amt>ul {
   display: grid;
   grid-gap: 20px;
   grid-template-columns: repeat(auto-fill, minmax(calc(33.33% - 15px), 1fr));
 }
+
 .gift-card-amt ul li a,
-.gift-card-amt ul li label > span {
+.gift-card-amt ul li label>span {
   font-size: 14px;
 }
-.gift-card-amt ul li input[type="radio"]:checked + label {
+
+.gift-card-amt ul li input[type="radio"]:checked+label {
   background: #0070bd;
   color: #fff;
 }
@@ -3511,6 +3629,7 @@ input[type="number"]::-webkit-outer-spin-button {
 .gift-card-amt ul li label {
   padding: 1.5rem 2rem;
 }
+
 .tooltip-wrapper {
   position: relative;
 }
@@ -3532,37 +3651,44 @@ input[type="number"]::-webkit-outer-spin-button {
 .tooltip-btn {
   position: relative;
 }
+
 .tooltip-btn .image-container {
   width: 12px;
   display: inline-block;
 }
 
-.tooltip-btn:hover + .tooltips {
+.tooltip-btn:hover+.tooltips {
   display: block;
 }
 
 .tooltip-btn:hover {
   cursor: pointer;
 }
+
 .cl-gry {
   color: #808080 !important;
 }
+
 .gift-card-rt .back-btn {
   margin-bottom: 1rem;
 }
+
 .gift-card-rt .title {
   font-size: 1.667vw;
   margin-bottom: 0.5rem;
 }
+
 .gift-card-amt {
   margin: 1rem 0;
 }
+
 .gift-card-rt .form-01 .form-control {
   border: 1px solid #000;
   border-radius: 9px;
 }
-.gift-card-rt .form-01 .link-a {
-}
+
+.gift-card-rt .form-01 .link-a {}
+
 .gift-card-session .result-box {
   text-align: center;
   min-height: 390px;
@@ -3571,6 +3697,7 @@ input[type="number"]::-webkit-outer-spin-button {
   align-items: center;
   justify-content: center;
 }
+
 .gift-card-session .result-box p {
   font-size: 32px;
   line-height: 40px;
@@ -3583,6 +3710,7 @@ input:disabled {
   color: -internal-light-dark(rgb(84, 84, 84), rgb(170, 170, 170)) !important;
   border-color: rgba(118, 118, 118, 0.3) !important;
 }
+
 img {
   transition: all 0.6s ease-out;
 }
@@ -3591,6 +3719,7 @@ img:hover {
   transform: scale(1.02);
   transition: all 0.6s ease-out;
 }
+
 .navbar-expand-lg .navbar-nav .nav-link.gift-card .image {
   display: block;
   animation: scale1 4s infinite;
@@ -3598,6 +3727,7 @@ img:hover {
   overflow: hidden;
   padding: 0.1rem !important;
 }
+
 @keyframes scale1 {
   0% {
     transform: scale(0.9);
@@ -3625,6 +3755,7 @@ img:hover {
     transform: scale(1);
   }
 }
+
 .get-in-touch-session .rt-banner .image {
   display: block;
   animation: scale2 4s infinite;
@@ -3632,17 +3763,20 @@ img:hover {
   overflow: hidden;
   padding: 1.5rem !important;
 }
+
 .founder-session .f-img .image {
   display: block;
   animation: scale2 4s infinite;
   transition: all 0.6s ease-out;
   overflow: hidden;
 }
+
 .heading03 {
   font-size: 32px;
   line-height: 40px;
   font-weight: 400;
 }
+
 /* .form-container .upload-files{
   display: inline-block;
     width: 102px;
@@ -3667,6 +3801,7 @@ img:hover {
     padding-top: 2rem; */
   height: inherit;
 }
+
 /* ::-webkit-file-upload-button {
   display: none;
 }
@@ -3676,19 +3811,23 @@ img:hover {
 .form-container .upload-file .anticon.anticon-plus {
   position: absolute;
 }
+
 .search-icon.btn:hover {
   color: inherit;
   background-color: inherit;
   border-color: inherit;
   box-shadow: none;
 }
+
 .form-control:focus {
   box-shadow: none;
   border-color: #ced4da;
 }
+
 :where(.css-dev-only-do-not-override-1kuana8).ant-tooltip {
   z-index: 10;
 }
+
 .swiper-nav button {
   margin: 0 !important;
   padding: 0 !important;
@@ -3700,28 +3839,43 @@ img:hover {
 .page-link {
   box-shadow: 0px 2.57px 8.85px 0px #00000026;
 }
+
 .load-more {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   margin-bottom: 4rem;
 }
-.load-more .pagination .page-item {
-}
+
+.load-more .pagination .page-item {}
+
 .page-item:not(:first-child) .page-link {
   margin-left: 10px;
 }
+
 .page-link {
   display: block;
   font-size: 16px;
   border-radius: 5px;
 }
+
 .see-my-gift-cards-row {
   margin-bottom: 4rem;
 }
-.browse-experiences-carousal .swiper-slide{
+
+.browse-experiences-carousal .swiper-slide {
   padding: 1rem;
 }
+
+.text-trunc-2 {
+  display: -webkit-box;
+  max-width: 100%;
+  height: 35px; /* this height is tempary while content is getting larger than 2 lines then remove it*/
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
 @media (min-width: 992px) {
   .navbar-expand-lg .navbar-nav .nav-link {
     margin: 0 2rem;
@@ -3761,6 +3915,7 @@ img:hover {
     color: #000;
     font-weight: bold;
   }
+
   .navbar-expand-lg .navbar-nav .nav-link {
     margin: 0 2rem;
     font-size: 0.833vw;
@@ -3800,56 +3955,69 @@ img:hover {
     display: none !important;
   }
 }
+
 @media only screen and (max-width: 1440px) and (min-width: 1279px) {
   .availability-wrappper li {
     width: 31%;
   }
+
   .let-discover-session.let-discover-listing-session .swiper-nav,
   .home_nav {
     width: 108%;
   }
 }
+
 @media (max-width: 1023px) {
   .browse-experiences-item .img-wrapper .image-container .image {
     height: 120px !important;
   }
+
   .footer-link h3 {
     font-size: 1.85vw;
     line-height: 1.85vw;
-}
+  }
+
   .gift-card-amt ul li a,
   .gift-card-amt ul li label {
     padding: 1.5rem 2.8rem;
   }
+
   .gift-card-lt {
     width: 100%;
     height: 200px;
     padding-right: 0;
   }
+
   .swiper-nav,
   .home_nav {
     margin-left: -33px;
   }
+
   .top-btn {
     margin-bottom: 1rem;
     margin-top: 1rem;
   }
+
   .swiper-nav,
   .home_nav {
     margin-left: -25px;
   }
+
   p {
     font-size: 1.3vw;
     line-height: 1.5vw;
   }
+
   .testimonial-item .name {
     font-size: 1.85vw;
     line-height: 2vw;
     margin-top: 1rem;
   }
+
   body {
     font-size: 1.264vw !important;
   }
+
   .product-info .product-name {
     font-size: 20px;
     line-height: 30px;
@@ -3879,147 +4047,186 @@ img:hover {
     margin-right: 0;
   }
 }
+
 @media (max-width: 991px) {
-  .vendor-signup a{
+  .vendor-signup a {
     min-width: 140px;
   }
 }
+
 @media (max-width: 767px) {
   .browse-experiences-item .img-wrapper .image-container .image {
     height: 220px !important;
   }
+
   .subscribe label .btn {
     padding: 2.8vw;
-}
+  }
+
   footer .subscribe input {
     padding: 2.8vw;
-}
- .form-container.content-wraaper .bg-white.border-div .profile-img-s{
+  }
+
+  .form-container.content-wraaper .bg-white.border-div .profile-img-s {
     width: 12vw;
   }
+
   .gift-an-experience-session {
     margin-bottom: 2rem;
   }
+
   .content-wraaper label {
     margin-top: 1rem;
   }
+
   .border-div {
     padding: 1.5rem;
   }
+
   .gift-card-rt .title {
     font-size: 4.667vw;
   }
-  .gift-card-amt > ul {
+
+  .gift-card-amt>ul {
     grid-gap: 10px;
   }
+
   .gift-card-amt ul li a,
   .gift-card-amt ul li label {
     padding: 1rem;
   }
+
   .see-my-gift-cards-row {
     text-align: center;
     margin-bottom: 3rem;
   }
+
   .card-booking-img.bgGrey {
     padding: 4rem 4rem;
   }
+
   .rightContent h2 {
     font-size: 4.172vw;
     line-height: 4.172vw;
   }
+
   .sub-categories {
     margin-bottom: 1rem;
   }
+
   .header-search .rbt .rbt-input-main {
     font-size: 1rem;
   }
+
   .blog-detail-inner-session h2 {
     font-size: 4.867vw;
     line-height: 6.967vw;
     margin-bottom: 1rem;
   }
+
   .blog-item .top-rated {
     font-size: 2.8vw;
   }
+
   .blog-item .info .read-more .btn {
     font-size: 3vw;
     line-height: 3vw;
   }
+
   .blog-item .info .title {
     font-size: 1.2rem;
     line-height: 1.5rem;
   }
+
   p {
     font-size: 0.9rem;
     line-height: 1.5rem;
   }
+
   .product-info .location {
     font-size: 1.3rem;
     line-height: 1.5rem;
   }
+
   .browse-experiences-item .info .discription {
     font-size: 0.813rem;
     line-height: 1rem;
   }
+
   .browse-experiences-item .info .price {
     font-size: 1rem;
     line-height: 1.15rem;
   }
+
   body {
     font-size: 0.875rem !important;
   }
+
   .gift-card-amt ul li a,
-  .gift-card-amt ul li label > span {
+  .gift-card-amt ul li label>span {
     font-size: 12px;
   }
+
   .gift-card-amt ul li a,
   .gift-card-amt ul li label {
     font-size: 16px;
     height: 70px;
   }
+
   .s-page-session {
     margin: 3rem 0;
   }
+
   .accordion-01 .accordion-button {
     font-size: 16px;
     line-height: 20px;
     padding-top: 10px !important;
     padding-bottom: 10px !important;
   }
+
   .faqs-session {
     padding: 1rem 0 3rem;
   }
+
   .availability-wrappper li {
     margin: 0.5rem 0.5rem;
     font-size: 14px;
   }
+
   .availability-wrappper {
     margin-top: 0rem;
   }
+
   .image-container.btn-gift {
     width: 3vw;
   }
+
   .box-01 .head {
     font-size: 1rem;
     line-height: 1.2rem;
     padding: 1rem;
   }
+
   .sub-categories a {
     font-size: 12px;
     padding: 1rem;
     height: 2rem;
     margin-left: 0.5rem;
   }
+
   .navbar-toggler {
     border: 0;
   }
+
   .navbar-toggler .navbar-toggler-icon {
     background: url(/images/icons/close_icon.svg) no-repeat !important;
     background-size: 100% !important;
   }
+
   .navbar-toggler.collapsed .navbar-toggler-icon {
     background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.95' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
   }
+
   .top-rated {
     font-size: 12px;
     display: flex;
@@ -4028,51 +4235,64 @@ img:hover {
     justify-content: center;
     line-height: 15px;
   }
+
   .discover-swiper-button-prev arrow {
     left: 0;
   }
+
   .navbar-collapse form {
     margin-right: 0 !important;
   }
+
   .header-search {
     width: 100%;
   }
+
   .navbar-expand-lg .navbar-nav {
     padding-bottom: 1rem;
   }
+
   .navbar-expand-lg .navbar-nav .nav-link.gift-card .image-container {
     width: 18px;
     margin-left: 5px;
   }
+
   .header_wrap .navbar-expand-lg .navbar-nav .nav-link {
     display: flex;
     align-items: center;
   }
+
   .navbar-collapse {
     margin-top: 1rem;
   }
+
   .copyright {
     font-size: 14px;
   }
+
   .let-discover-session.let-discover-listing-session .swiper-nav,
   .home_nav {
     width: 100%;
   }
+
   .swiper-nav,
   .home_nav {
     left: 0;
     width: 100%;
     margin-left: 0;
   }
+
   .home-banner .swiper-button-prev,
   .home-banner .swiper-button-next {
     display: none;
   }
+
   .product-info .price {
     font-size: 3.883vw;
     line-height: 3.883vw;
     margin-bottom: 1rem;
   }
+
   .top-btn {
     margin-bottom: 1rem;
     margin-top: 1rem;
@@ -4080,39 +4300,50 @@ img:hover {
     align-items: center;
     justify-content: space-between;
   }
+
   .top-btn button {
     width: 100%;
   }
+
   .header-search .search-icon .image-container {
     width: 3.585vw;
   }
-  .header-search > .form-control {
+
+  .header-search>.form-control {
     font-size: 3vw;
     margin-bottom: 1rem;
   }
+
   .btn {
     font-size: 3vw;
   }
+
   .navbar-brand {
     width: 22.927vw;
   }
+
   .info .top-name .title {
     font-size: 4vw;
   }
+
   .home-banner .banner-txt .disc {
     font-size: 3vw;
     line-height: 4vw;
   }
-  .home-banner-bg > span > span .image {
+
+  .home-banner-bg>span>span .image {
     border-radius: 0 0 20px 20px;
   }
+
   .gift-card-rt .title,
   .gift-card-rt .cl-gry {
     padding-left: 1rem;
   }
+
   .gift-card-rt .back-btn {
     display: none;
   }
+
   .gift-card-amt ul {
     text-align: center;
   }
@@ -4124,12 +4355,15 @@ img:hover {
     border-top: 2px solid #e9e9e9;
     margin-top: 4rem;
   }
+
   .gift-card-lt {
     margin: 0 auto;
   }
+
   .d-table-cell {
     padding-top: 2rem;
   }
+
   .filter-dd {
     justify-content: space-between;
     padding: 0 0 2rem;
@@ -4193,10 +4427,12 @@ img:hover {
     height: 250px;
     margin-bottom: 2rem;
   }
+
   .our-mission .inner .title {
     font-size: 20px;
     line-height: 20px;
   }
+
   .page-title-one {
     background: url(/images/banner/about-us-m.png) no-repeat;
   }
@@ -4213,7 +4449,7 @@ img:hover {
     top: 40%;
   }
 
-  .swiper-nav button .image-container > span {
+  .swiper-nav button .image-container>span {
     width: 10px !important;
   }
 
@@ -4230,21 +4466,26 @@ img:hover {
   .form-select {
     font-size: 0.9rem;
   }
+
   .data-filters-item label {
     font-size: 0.8rem;
     line-height: 1rem;
   }
+
   .container-fluid {
     max-width: 100vw;
   }
+
   .home-banner-bg::before {
     border-radius: 0 0 1rem 1rem;
   }
+
   .let-discover-carousal a .title {
     padding: 1rem;
     font-size: 14px;
     line-height: 16px;
   }
+
   footer .subscribe input {
     width: 67%;
   }
@@ -4341,12 +4582,15 @@ img:hover {
     height: 55px;
     padding: 0.8rem;
   }
+
   .searchbar-h .rbt-menu.dropdown-menu.show {
     top: 0.8rem !important;
   }
-  .rbt-menu > .dropdown-item {
+
+  .rbt-menu>.dropdown-item {
     font-size: 13px;
   }
+
   .searchbar-h .search-icon {
     right: 8px;
     top: 12px;