updated home page

components/home/BrowseExperiences.js

@@ -74,12 +74,12 @@ const BrowseExperiences = ({allActivitiesData}) => {
                             viewport={{ once: false, amount: 0.2 }}
                           >
                           <div className="browse-experiences-item">
-                            <div className="img-wrapper">
+                            <a href="/detail" className="img-wrapper">
                               <span className="image-container">
                                 <Image layout="fill" alt="" className="image img-fluid" src={cleanImage(data.attributes?.image?.data?.attributes)} />
                               </span>
                               <div className="top-rated">Top Rated</div>
-                            </div>
+                            </a>
                             <div className="info">
                               <div className="top-name">
                                 <div className="title">{data?.attributes?.name}</div>
@@ -98,7 +98,7 @@ const BrowseExperiences = ({allActivitiesData}) => {
                                 </div>
                               </div>
                               <div className="discription">
-                                {data.discription} <a href="">Read More</a>
+                                <span>{data?.attributes?.description}</span> <a href="/detail">Read More</a>
                               </div>
                               <div className="price">
                                 ${data?.attributes?.pricePerPerson} <span className="off">{data?.attributes?.off}% OFF</span>
@@ -108,7 +108,7 @@ const BrowseExperiences = ({allActivitiesData}) => {
                                 <div className="">Includes taxes & Fees</div>
                               </div>
                               <div className="explore-now">
-                                <Button href="/listing" variant="primary">Explore Now</Button>
+                                <Button href="/detail" variant="primary">Explore Now</Button>
                               </div>
                             </div>
                           </div>
@@ -119,12 +119,12 @@ const BrowseExperiences = ({allActivitiesData}) => {
                 </Swiper>
                 <div className="swiper-nav">
                   <div className="navbutton d-flex justify-content-between ">
-                    <button className="BrowseExperiences-right arrow">
+                    <button className="BrowseExperiences-right arrow" id="BrowseExperiences-right" aria-label="BrowseExperiences-right">
                       <span className="image-container">
                         <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-left.svg" />
                       </span>
                     </button>
-                    <button className="BrowseExperiences-left arrow">
+                    <button className="BrowseExperiences-left arrow" id="BrowseExperiences-left" aria-label="BrowseExperiences-left">
                       <span className="image-container">
                         <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-right.svg" />
                       </span>

components/home/GiftAnExperience.js

@@ -26,7 +26,7 @@ const GiftAnExperience = () => {
                   <div className="col-md-6">
                     <div className="img">
                       <span className="image-container">
-                        <Image layout="fill" alt="" className="image img-fluid" src="/images/gift-card.png" />
+                        <Image layout="fill" alt="" className="image img-fluid" src="/images/gift-card.webp" />
                       </span>
                     </div>
                   </div>

components/home/Home.js

@@ -12,9 +12,11 @@ const Home = () => {
   const { categories } = useSelector(state => state.categories);
   const { testimonial } = useSelector(sate => sate.testimonial);
   const { allActivitiesData } = useSelector(sate => sate.allActivitiesData);
-  console.log("categories", categories )
-  console.log("testimonial", testimonial )
-  console.log("allActivitiesData", allActivitiesData )
+  const { homeBanner } = useSelector(state => state.homeBanner);
+  console.log("homeBanner", homeBanner);
+  console.log("categories", categories);
+  console.log("testimonial", testimonial);
+  console.log("allActivitiesData", allActivitiesData);
   const dispatch = useDispatch();
   useEffect(() => {
     // dispatch(getHomePage())
@@ -22,13 +24,13 @@ const Home = () => {
   return (
     <Fragment>
       <main>
-          <Banner />
-          <SearchBar />
-          <LetDiscover categories={categories} />
-          <BrowseExperiences allActivitiesData={allActivitiesData} />
-          <GiftAnExperience />
-          <Testimonial testimonial={testimonial} />
-          <SignUpToExperienceOurPlatform />
+        <Banner homeBanner={homeBanner} />
+        <SearchBar />
+        <LetDiscover categories={categories} />
+        <BrowseExperiences allActivitiesData={allActivitiesData} />
+        <GiftAnExperience />
+        <Testimonial testimonial={testimonial} />
+        <SignUpToExperienceOurPlatform />
       </main>
     </Fragment>
   );

components/home/Testimonial.js

@@ -101,12 +101,12 @@ const Testimonial = ({ testimonial }) => {
                 </Swiper>
                 <div className="swiper-nav">
                   <div className="navbutton d-flex  justify-content-between justify-content-md-between ">
-                    <button className="testimonial-arrow-right arrow">
+                    <button className="testimonial-arrow-right arrow" id="testimonial-arrow-right" aria-label="testimonial-arrow-right">
                       <span className="image-container">
                         <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-left.svg" />
                       </span>
                     </button>
-                    <button className="testimonial-arrow-left arrow">
+                    <button className="testimonial-arrow-left arrow" id="testimonial-arrow-left" aria-label="testimonial-arrow-left">
                       <span className="image-container">
                         <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-right.svg" />
                       </span>

components/user/MyWhishList.js

@@ -94,7 +94,7 @@ const MyWhishList = () => {
                                             <p className="other">{data.other}</p>
                                         </div>
                                         <div className="card-booking-footer pt-0">
-                                            <Button type="button" className="btn btn-primary btn-explore">
+                                            <Button id="exploreNow" aria-label="Explore Now" type="button" className="btn btn-primary btn-explore">
                                                 Explore Now
                                             </Button>
                                         </div>

pages/index.js

@@ -2,6 +2,7 @@ import Home from "../components/home/Home";
 import Layout from "../components/layout/Layout";
 import { getActivitiesByVendor } from "../redux/actions/activityAction";
 import { getAllCategories } from "../redux/actions/categoriesAction";
+import { getHomeBanner } from "../redux/actions/homeBannerAction";
 import { getTestimonial } from "../redux/actions/testimonialAction";
 import { loadUser } from "../redux/actions/userActions";
 import { wrapper } from "../redux/store";
@@ -29,6 +30,7 @@ export const getServerSideProps = wrapper.getServerSideProps(store => async ({ r
     await store.dispatch(getAllCategories())
     await store.dispatch(getTestimonial())
     await store.dispatch(getActivitiesByVendor())
+    await store.dispatch(getHomeBanner())
 
   return {
     props: {},

redux/actions/homeBannerAction.js

+import axios from "axios";
+import qs from "qs";
+import { GET_HOMEBANNER_FAIL, GET_HOMEBANNER_REQUEST, GET_HOMEBANNER_SUCCESS } from "../constants/homeBannerConstants";
+
+export const getHomeBanner = () => async dispatch => {
+  try {
+    
+    dispatch({
+      type: GET_HOMEBANNER_REQUEST
+    });
+    const config = {
+      headers: {
+        "Content-Type": "application/json"
+      }
+    };
+
+    const query = {
+      populate: ["desktopBanner, mobileBanner"]
+    };
+
+    const queryString = qs.stringify(query, {
+      encodeValuesOnly: true
+    });
+
+    const response = await axios.get(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/home-banners?${queryString}`, config);
+    console.log("response > ", response);
+    dispatch({
+      type: GET_HOMEBANNER_SUCCESS,
+      payload: response.data
+    });
+
+    return response.data;
+  } catch (error) {
+    dispatch({
+      type: GET_HOMEBANNER_FAIL,
+      payload: error.response.data
+    });
+  }
+};

redux/constants/homeBannerConstants.js

+export const GET_HOMEBANNER_REQUEST = "GET_HOMEBANNER_REQUEST"
+export const GET_HOMEBANNER_SUCCESS = "GET_HOMEBANNER_SUCCESS"
+export const GET_HOMEBANNER_FAIL = "GET_HOMEBANNER_FAIL"
+
+
+export const CLEAR_ERRORS = "CLEAR_ERRORS";
\ No newline at end of file

redux/reducers/homeBannerReducer.js

+import { GET_HOMEBANNER_REQUEST, CLEAR_ERRORS, GET_HOMEBANNER_SUCCESS, GET_HOMEBANNER_FAIL } from "../constants/homeBannerConstants";
+
+export const getAllHomeBannerReducer = (state = { loading: true, success: false, homeBanner: null }, action) => {
+    switch (action.type) {
+      case GET_HOMEBANNER_REQUEST:
+        return {
+          loading: true,
+        };
+  
+      case GET_HOMEBANNER_SUCCESS:
+        return {
+          loading: false,
+          homeBanner: action.payload
+        };
+  
+      case GET_HOMEBANNER_FAIL:
+        return {
+          loading: false,
+          error: action.payload.error.message
+        };
+  
+      case CLEAR_ERRORS:
+        return {
+          ...state,
+          error: null
+        };
+  
+      default:
+        return state;
+    }
+  };
\ No newline at end of file

redux/reducers/reducers.js

@@ -9,6 +9,7 @@ import { createActivityReducer, getActivitiesReducer } from "./activitiesReducer
 import { getAllCategoriesReducer, getAllSubCategoriesReducer } from "./categoryReducer";
 import { getAllTestimonialReducer } from "./testimonialReducer";
 import { blogReducer, blogsReducer } from "./blogReducer";
+import { getAllHomeBannerReducer } from "./homeBannerReducer";
 
 const reducers = combineReducers({
   townships: townshipsReducer,
@@ -32,7 +33,8 @@ const reducers = combineReducers({
   testimonial: getAllTestimonialReducer,
   allActivitiesData: getActivitiesReducer,
   blogs: blogsReducer,
-  blog: blogReducer
+  blog: blogReducer,
+  homeBanner: getAllHomeBannerReducer,
 });
 
 export default reducers;