updated

components/blog/BlogItem.js

@@ -10,46 +10,46 @@ export const BlogData = [
     title: "13 MOST Unique Places to Stay in Washington State",
     discription: "Undoubtedly, the most unique places to stay........",
     read: "10-15 Read",
-    flag:"Adventure"
+    flag: "Adventure"
   },
   {
     image: "/images/blogs/02.png",
     title: "13 MOST Unique Places to Stay in Washington State",
     discription: "Undoubtedly, the most unique places to stay........",
     read: "10-15 Read",
-    flag:"Adventure"
+    flag: "Adventure"
   },
   {
     image: "/images/blogs/03.png",
     title: "13 MOST Unique Places to Stay in Washington State",
     discription: "Undoubtedly, the most unique places to stay........",
     read: "10-15 Read",
-    flag:"Art & History"
+    flag: "Art & History"
   },
   {
     image: "/images/blogs/01.png",
     title: "13 MOST Unique Places to Stay in Washington State",
     discription: "Undoubtedly, the most unique places to stay........",
     read: "10-15 Read",
-    flag:"Adventure"
+    flag: "Adventure"
   },
   {
     image: "/images/blogs/02.png",
     title: "13 MOST Unique Places to Stay in Washington State",
     discription: "Undoubtedly, the most unique places to stay........",
     read: "10-15 Read",
-    flag:"Adventure"
+    flag: "Adventure"
   },
   {
     image: "/images/blogs/03.png",
     title: "13 MOST Unique Places to Stay in Washington State",
     discription: "Undoubtedly, the most unique places to stay........",
     read: "10-15 Read",
-    flag:"Art & History"
+    flag: "Art & History"
   }
 ];
 
-const BlogsItem = ({blogs}) => {
+const BlogsItem = ({ blogs }) => {
   const [showContent, setShowContent] = useState(false);
   const [isGridViewOpen, setIsGridViewOpen] = useState(false);
   const [isOpen, setIsOpen] = useState(false);

components/detail/Detail.js

@@ -33,7 +33,7 @@ const Detail = () => {
       <main>
         <section className="main-mt">
           <div className="container mt-3">
-            <div className="py-5">
+            <div className="py-4 py-lg-5 breadcrumb-wrap">
               <ConfigProvider
                 theme={{
                   components: {

components/detail/DetailInfo.js

@@ -143,15 +143,13 @@ const DetailInfo = ({ activityById }) => {
                                             router.push("/gift-card");
                                         }
                                     }}
-                                    variant="secondary"
+                                    variant="secondary me-3"
                                 >
                                     Gift Now
                                     <span className="image-container btn-gift">
                                         <Image layout="fill" className="image img-fluid" src="/images/icons/gift-card-icon.svg" />
                                     </span>
                                 </Button>
-                            </div>
-                            <div>
                                 <Button
                                     disabled={loading}
                                     // onClick={() => {
@@ -161,11 +159,12 @@ const DetailInfo = ({ activityById }) => {
                                     //         setenquiryModal(true);
                                     //     }
                                     // }}
-                                    variant="primary me-3"
+                                    variant="primary"
                                 >
                                     Book Now
                                 </Button>
                             </div>
+
                         </div>
                     </div>
                 )}

components/detail/DetailSchedule.js

@@ -36,7 +36,7 @@ const DetailSchedule = ({ activityById }) => {
     return array;
   };
   return (
-    <div className="row mb-5">
+    <div className="row mb-3 mb-lg-4">
       {activityById && (
         <div className="col-12">
           <ul className="availability-wrappper">

components/detail/SimilarExperiences.js

@@ -108,7 +108,7 @@ const SimilarExperiences = ({ allActivitiesData }) => {
                               <div className="browse-experiences-item">
                                 <div className="img-wrapper">
                                   <span className="image-container">
-                                    <Image layout="fill" alt="" className="image img-fluid" src={data.image} />
+                                    <Image layout="fill" alt="" className="image img-fluid" src={data.image} priority />
                                   </span>
                                   {/* <div className="top-rated">{data.topRated}</div> */}
                                 </div>

components/layout/Header.js

@@ -56,7 +56,7 @@ const Header = () => {
           </Navbar.Brand>
           <Navbar.Toggle aria-controls="navbarScroll" />
           <Navbar.Collapse id="navbarScroll">
-            <Nav className=" my-2 my-lg-0" style={{ maxHeight: "100px" }} navbarScroll>
+            <Nav className=" my-2 my-lg-0" navbarScroll>
               <ActiveLink href="/user/wishlist" activeClassName="active">
                 <a className="nav-link ">Wishlist</a>
               </ActiveLink>

styles/globals.css

@@ -31,7 +31,7 @@ acronym,
 address,
 big,
 cite,
-code,
+55 code,
 del,
 dfn,
 em,
@@ -1959,7 +1959,7 @@ span.form-error,
 }
 
 .similar-experiences-session {
-  padding: 2rem 0;
+  padding: 1rem 0;
 }
 
 .browse-experiences-item {
@@ -2082,7 +2082,7 @@ span.form-error,
   margin-bottom: 10px;
 }
 
-.browse-experiences-item .info .discription > span {
+.browse-experiences-item .info .discription {
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
@@ -2750,13 +2750,14 @@ button:focus:not(:focus-visible) {
   align-items: center;
   flex-wrap: wrap;
   margin-top: 2rem;
+  padding-left: 0;
 }
 
 .availability-wrappper li {
-  width: 32%;
+  width: 31%;
   display: flex;
   align-items: center;
-  margin: 0.5rem;
+  margin: 0.5rem 1rem 0.5rem 0.5rem;
 }
 
 .availability-wrappper li > span {
@@ -2805,7 +2806,7 @@ button:focus:not(:focus-visible) {
 }
 
 .guest-reviews-detail .head .name {
-  font-size: 24px;
+  font-size: calc(20px + (24 - 20) * (100vw - 320px) / (1920 - 320));
   line-height: 24px;
 }
 
@@ -2941,7 +2942,7 @@ button:focus:not(:focus-visible) {
 }
 
 .faqs-session {
-  padding: 5rem 0;
+  padding: 4rem 0;
 }
 
 .subscribe label .btn {
@@ -3899,6 +3900,7 @@ img:hover {
   align-items: center;
   justify-content: flex-end;
   margin-bottom: 4rem;
+  margin-top: 1.5rem;
 }
 
 .load-more .pagination .page-item {
@@ -3933,6 +3935,19 @@ img:hover {
 .listing-wrapper .product-info {
   padding-left: 2rem;
 }
+.breadcrumb-wrap .ant-breadcrumb ol li.ant-breadcrumb-separator {
+  margin: 0 0.8rem;
+}
+.breadcrumb-wrap .ant-breadcrumb ol li .ant-breadcrumb-link {
+  font-size: calc(14px + (14 - 14) * (100vw - 320px) / (1920 - 320));
+}
+.most-read-blogs-session,
+.blogs-session {
+  padding-bottom: 3rem;
+}
+footer .footer-link ul {
+  padding-left: 0;
+}
 @media (min-width: 992px) {
   .navbar-expand-lg .navbar-nav .nav-link {
     margin: 0 2rem;
@@ -4115,6 +4130,17 @@ img:hover {
 }
 
 @media (max-width: 767px) {
+  .product-info .btn-row .btn {
+    padding-left: 5vw;
+    padding-right: 5vw;
+  }
+  .load-more {
+    justify-content: center;
+  }
+  .btn-primary,
+  .vendor-signup a {
+    padding: 0.6rem 2rem;
+  }
   .browse-experiences-item .img-wrapper .image-container .image {
     height: 220px !important;
   }