updated details gallery page

components/detail/Detail.js

@@ -45,10 +45,10 @@ const Detail = () => {
               </div>
             </div>
             <div className="row">
-              <div className="col-xl-5">
+              <div className="col-xl-6">
                 <DetailGallery activityById={activityById}></DetailGallery>
               </div>
-              <div className="col-xl-7 listing-wrapper">
+              <div className="col-xl-6 listing-wrapper">
                 <DetailInfo activityById={activityById}></DetailInfo>
               </div>
             </div>

components/home/Testimonial.js

@@ -4,7 +4,7 @@ import React, { useState } from "react";
 import { Swiper, SwiperSlide } from "swiper/react";
 
 import { Navigation, Autoplay } from "swiper/modules";
-import StarRatings from 'react-star-ratings';
+import StarRatings from "react-star-ratings";
 
 import { fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvariants.js";
 import { motion } from "framer-motion";
@@ -16,7 +16,7 @@ import "swiper/css/navigation";
 const Testimonial = ({ testimonial }) => {
   const [rating, setRating] = useState(0);
 
-  const handleRatingChange = (newRating) => {
+  const handleRatingChange = newRating => {
     setRating(newRating);
   };
   return (
@@ -56,7 +56,7 @@ const Testimonial = ({ testimonial }) => {
                                   starHoverColor="#ffe200" // Set the hover color to yellow
                                   changeRating={handleRatingChange}
                                   numberOfStars={5}
-                                name='rating'
+                                  name="rating"
                                   starDimension="16px" // Set star width and height
                                 />
                                 {/* <p>You rated this: {rating} stars</p> */}

styles/globals.css

@@ -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;
 }
@@ -376,7 +376,7 @@ header {
   font-size: 0.833vw;
 }
 
-.header-search>.form-control {
+.header-search > .form-control {
   font-size: 0.833vw;
 }
 
@@ -434,16 +434,16 @@ header {
   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;
 }
@@ -509,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;
@@ -517,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;
@@ -845,7 +845,7 @@ span.form-error,
   user-select: none;
 }
 
-.check-container input:checked~.checkmark:after {
+.check-container input:checked ~ .checkmark:after {
   display: block;
 }
 
@@ -873,7 +873,7 @@ span.form-error,
   width: 0;
 }
 
-.check-container input:checked~.checkmark {
+.check-container input:checked ~ .checkmark {
   background-color: #fff;
 }
 
@@ -1009,7 +1009,7 @@ span.form-error,
   justify-content: center;
 }
 
-.btn-edit>span:first-child {
+.btn-edit > span:first-child {
   margin-top: 0.2rem;
 }
 
@@ -1087,7 +1087,7 @@ span.form-error,
   color: #808080;
 }
 
-.card-booking-content>p:last-child {
+.card-booking-content > p:last-child {
   margin-bottom: 0;
 }
 
@@ -1130,7 +1130,7 @@ span.form-error,
   color: #808080;
 }
 
-.card-booking-content .description>span {
+.card-booking-content .description > span {
   color: #646464;
   text-decoration: underline;
 }
@@ -1140,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;
 }
@@ -1176,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));
@@ -1186,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));
@@ -1335,7 +1335,7 @@ span.form-error,
 }
 
 /* vendor dashboar */
-.bg-z-primary{
+.bg-z-primary {
   background-color: #242932;
 }
 
@@ -1367,7 +1367,7 @@ span.form-error,
   align-items: center;
 }
 
-.primary-sidebar ul li a>span {
+.primary-sidebar ul li a > span {
   flex: 0 0 auto;
 }
 
@@ -1376,7 +1376,6 @@ span.form-error,
   padding-top: 5px;
 }
 
-
 .sidebarContainer {
   display: flex;
 }
@@ -1421,7 +1420,7 @@ span.form-error,
   align-items: center;
 }
 
-.sidebar ul li a>span {
+.sidebar ul li a > span {
   flex: 0 0 auto;
 }
 
@@ -1575,12 +1574,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;
 }
 
@@ -1592,7 +1591,7 @@ span.form-error,
 }
 
 /* Show the indicator (dot/circle) when checked */
-.radioContainer input:checked~.checkmark:after {
+.radioContainer input:checked ~ .checkmark:after {
   display: block;
 }
 
@@ -2072,7 +2071,7 @@ span.form-error,
   margin-left: 4px;
 }
 
-.product-info .wishlist-share>div {
+.product-info .wishlist-share > div {
   margin-bottom: 1rem;
 }
 
@@ -2083,7 +2082,7 @@ span.form-error,
   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;
@@ -2119,7 +2118,7 @@ span.form-error,
   margin-bottom: 10px;
 }
 
-.browse-experiences-item .info .detail>div {
+.browse-experiences-item .info .detail > div {
   margin-bottom: 0.4rem;
 }
 
@@ -2654,7 +2653,7 @@ footer hr {
   line-height: 2.083vw;
 }
 
-.product-info .price>span {
+.product-info .price > span {
   color: #808080;
   font-size: 14px;
 }
@@ -2665,7 +2664,7 @@ footer hr {
   margin-bottom: 0.5rem;
 }
 
-.product-info .location>span {
+.product-info .location > span {
   color: #808080;
   font-size: 16px;
 }
@@ -2701,18 +2700,30 @@ footer hr {
 }
 
 .image-gallery-thumbnail {
-  width: 25%;
+  width: 23%;
 }
 
 .image-gallery-content .image-gallery-slide .image-gallery-image {
   /* max-height: 100%; */
+  border-radius: 8px;
+}
+.image-gallery-thumbnail .image-gallery-thumbnail-image,
+.image-gallery-slide.image-gallery-center {
+  border-radius: 8px;
+  overflow: hidden;
+}
+.image-gallery-thumbnails {
+  padding: 1rem 0;
+}
+.image-gallery-thumbnail + .image-gallery-thumbnail {
+  margin-left: 1rem;
+  border-radius: 12px;
 }
-
 .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;
@@ -2728,7 +2739,7 @@ footer hr {
   font-size: 0.833vw;
 }
 
-.btn-check:focus+.btn,
+.btn-check:focus + .btn,
 .btn:focus,
 button:focus:not(:focus-visible) {
   box-shadow: none;
@@ -2748,7 +2759,7 @@ button:focus:not(:focus-visible) {
   margin: 0.5rem;
 }
 
-.availability-wrappper li>span {
+.availability-wrappper li > span {
   width: 30px;
   display: block;
   margin-right: 10px;
@@ -2836,7 +2847,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;
 }
@@ -2971,7 +2982,7 @@ button:focus:not(:focus-visible) {
   scrollbar-width: none;
 }
 
-.active>.page-link,
+.active > .page-link,
 .page-link.active {
   background-color: #0070bd;
   border-color: #0070bd;
@@ -3107,7 +3118,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;
 }
 
@@ -3143,7 +3154,7 @@ input[type="number"]::-webkit-outer-spin-button {
   display: block;
 }
 
-.page-title-area .banner-bg .image-container>span {
+.page-title-area .banner-bg .image-container > span {
   height: 100% !important;
 }
 
@@ -3307,7 +3318,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;
 }
@@ -3423,11 +3434,11 @@ input[type="number"]::-webkit-outer-spin-button {
   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;
 }
@@ -3651,18 +3662,18 @@ input[type="number"]::-webkit-outer-spin-button {
   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;
 }
@@ -3699,7 +3710,7 @@ input[type="number"]::-webkit-outer-spin-button {
   display: inline-block;
 }
 
-.tooltip-btn:hover+.tooltips {
+.tooltip-btn:hover + .tooltips {
   display: block;
 }
 
@@ -3729,7 +3740,8 @@ input[type="number"]::-webkit-outer-spin-button {
   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;
@@ -3889,7 +3901,8 @@ img:hover {
   margin-bottom: 4rem;
 }
 
-.load-more .pagination .page-item {}
+.load-more .pagination .page-item {
+}
 
 .page-item:not(:first-child) .page-link {
   margin-left: 10px;
@@ -3917,7 +3930,9 @@ img:hover {
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
-
+.listing-wrapper .product-info {
+  padding-left: 2rem;
+}
 @media (min-width: 992px) {
   .navbar-expand-lg .navbar-nav .nav-link {
     margin: 0 2rem;
@@ -4010,6 +4025,9 @@ img:hover {
 }
 
 @media (max-width: 1023px) {
+  .listing-wrapper .product-info {
+    padding-left: 0;
+  }
   .browse-experiences-item .img-wrapper .image-container .image {
     height: 120px !important;
   }
@@ -4129,7 +4147,7 @@ img:hover {
     font-size: 4.667vw;
   }
 
-  .gift-card-amt>ul {
+  .gift-card-amt > ul {
     grid-gap: 10px;
   }
 
@@ -4205,7 +4223,7 @@ img:hover {
   }
 
   .gift-card-amt ul li a,
-  .gift-card-amt ul li label>span {
+  .gift-card-amt ul li label > span {
     font-size: 12px;
   }
 
@@ -4351,7 +4369,7 @@ img:hover {
     width: 3.585vw;
   }
 
-  .header-search>.form-control {
+  .header-search > .form-control {
     font-size: 3vw;
     margin-bottom: 1rem;
   }
@@ -4373,7 +4391,7 @@ img:hover {
     line-height: 4vw;
   }
 
-  .home-banner-bg>span>span .image {
+  .home-banner-bg > span > span .image {
     border-radius: 0 0 20px 20px;
   }
 
@@ -4491,7 +4509,7 @@ img:hover {
     top: 40%;
   }
 
-  .swiper-nav button .image-container>span {
+  .swiper-nav button .image-container > span {
     width: 10px !important;
   }
 
@@ -4629,7 +4647,7 @@ img:hover {
     top: 0.8rem !important;
   }
 
-  .rbt-menu>.dropdown-item {
+  .rbt-menu > .dropdown-item {
     font-size: 13px;
   }