Skip to content

Jay Mehta / zango-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 9a12bc7f by Ravindra Kanojiya
Options

updated home page

1 parent 2b0440c0
Expand all
Inline Side-by-side
Showing 34 changed files with 114 additions and 147 deletions
components/home/Banner.js
......@@ -8,8 +8,9 @@ import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";
import Image from "next/image.js";
import { cleanImage } from "../../services/imageHandling.js";
const Banner = () => {
const Banner = ({ homeBanner }) => {
return (
<>
<section className="home-banner">
......@@ -20,7 +21,7 @@ const Banner = () => {
delay: 9000,
disableOnInteraction: false
}}
// autoplay={false}
spaceBetween={10}
navigation={true}
pagination={{
......@@ -43,96 +44,19 @@ const Banner = () => {
modules={[Pagination, Navigation, Autoplay]}
className="mySwiper01"
>
{
/*map through the array of images*/
homeBanner?.data &&
homeBanner?.data.map((data, index) => {
return (
<SwiperSlide>
<div className="slider-item slider-item-01">
<div className="home-banner-bg">
<span className="image-container hide-on-mobile">
<Image layout="fill" className="image img-fluid" alt="" src="/images/home-banner/01.webp" />
</span>
<span className="image-container hide-on-desktop">
<Image layout="fill" className="image img-fluid" alt="" src="/images/home-banner/01-m.webp" />
</span>
</div>
<div className="d-table">
<div className="d-table-cell">
<div className="container">
<motion.div variants={slideFromRight(0.4)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
<div className="row">
<div className="col-md-6">
<div className="slider-text">
<div className="banner-title">
<div className="banner-txt">
<h1>Lorem ipsum dolor sit amet</h1>
<div className="title">WELCOME TO THE WORLD OF TRAVEL</div>
<div className="disc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud.
</div>
</div>
</div>
<div className="common-btn">
<a className="btn btn-primary" href="/allergic-rhinitis">
Explore Now
</a>
</div>
</div>
</div>
</div>
</motion.div>
</div>
</div>
</div>
</div>
</SwiperSlide>
<SwiperSlide>
<div className="slider-item slider-item-02">
<div className="home-banner-bg">
<span className="image-container hide-on-mobile">
<Image layout="fill" className="image img-fluid" alt="" src="/images/home-banner/02.webp" />
</span>
<span className="image-container hide-on-desktop">
<Image layout="fill" className="image img-fluid" alt="" src="/images/home-banner/02.webp" />
</span>
</div>
<div className="d-table">
<div className="d-table-cell">
<div className="container">
<motion.div variants={slideFromRight(0.4)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
<div className="row">
<div className="col-md-6">
<div className="slider-text">
<div className="banner-title">
<div className="banner-txt">
<h1>Lorem ipsum dolor sit amet</h1>
<div className="title">WELCOME TO THE WORLD OF TRAVEL</div>
<div className="disc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud.
</div>
</div>
</div>
<div className="common-btn">
<a className="btn btn-primary" href="/allergic-rhinitis">
Explore Now
</a>
</div>
</div>
</div>
</div>
</motion.div>
</div>
</div>
</div>
</div>
</SwiperSlide>
<SwiperSlide>
<div className="slider-item slider-item-03">
<div className="home-banner-bg">
<span className="image-container hide-on-mobile">
<Image layout="fill" className="image img-fluid" alt="" src="/images/home-banner/03.webp" />
<Image layout="fill" className="image img-fluid" alt="" src={cleanImage(data?.attributes?.desktopBanner?.data?.attributes)} />
</span>
<span className="image-container hide-on-desktop">
<Image layout="fill" className="image img-fluid" alt="" src="/images/home-banner/03.webp" />
<Image layout="fill" className="image img-fluid" alt="" src={cleanImage(data?.attributes?.mobileBanner?.data?.attributes)} />
</span>
</div>
<div className="d-table">
......@@ -144,57 +68,15 @@ const Banner = () => {
<div className="slider-text">
<div className="banner-title">
<div className="banner-txt">
<h1>Lorem ipsum dolor sit amet</h1>
<div className="title">WELCOME TO THE WORLD OF TRAVEL</div>
<h1>{data?.attributes?.title}</h1>
<div className="title">{data?.attributes?.subTitle}</div>
<div className="disc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud.
{data?.attributes?.discription}
</div>
</div>
</div>
<div className="common-btn">
<a className="btn btn-primary" href="/allergic-rhinitis">
Explore Now
</a>
</div>
</div>
</div>
</div>
</motion.div>
</div>
</div>
</div>
</div>
</SwiperSlide>
<SwiperSlide>
<div className="slider-item slider-item-04">
<div className="home-banner-bg">
<span className="image-container hide-on-mobile">
<Image layout="fill" className="image img-fluid" alt="" src="/images/home-banner/04.webp" />
</span>
<span className="image-container hide-on-desktop">
<Image layout="fill" className="image img-fluid" alt="" src="/images/home-banner/04.webp" />
</span>
</div>
<div className="d-table">
<div className="d-table-cell">
<div className="container">
<motion.div variants={slideFromRight(0.4)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
<div className="row">
<div className="col-md-6">
<div className="slider-text">
<div className="banner-title">
<div className="banner-txt">
<h1>Lorem ipsum dolor sit amet</h1>
<div className="title">WELCOME TO THE WORLD OF TRAVEL</div>
<div className="disc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud.
</div>
</div>
</div>
<div className="common-btn">
<a className="btn btn-primary" href="/allergic-rhinitis">
<a className="btn btn-primary" href={data?.attributes?.exploreNowButton}>
Explore Now
</a>
</div>
......@@ -207,6 +89,9 @@ const Banner = () => {
</div>
</div>
</SwiperSlide>
);
})
}
</Swiper>
</div>
</section>
......
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,7 +24,7 @@ const Home = () => {
return (
<Fragment>
<main>
<Banner />
<Banner homeBanner={homeBanner} />
<SearchBar />
<LetDiscover categories={categories} />
<BrowseExperiences allActivitiesData={allActivitiesData} />
......
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: {},
......
public/images/discover/01.webp 0 → 100644
No preview for this file type
public/images/discover/02.webp 0 → 100644
No preview for this file type
public/images/discover/03.webp 0 → 100644
No preview for this file type
public/images/discover/04.webp 0 → 100644
No preview for this file type
public/images/discover/05.webp 0 → 100644
No preview for this file type
public/images/discover/06.webp 0 → 100644
No preview for this file type
public/images/gift-card.webp 0 → 100644
No preview for this file type
public/images/gift-experience-bg-m.webp 0 → 100644
No preview for this file type
public/images/gift-experience-bg.webp 0 → 100644
No preview for this file type
public/images/sign-up-exp-bg-m.webp 0 → 100644
No preview for this file type
public/images/sign-up-exp-bg.webp 0 → 100644
No preview for this file type
redux/actions/homeBannerAction.js 0 → 100644
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 0 → 100644
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 0 → 100644
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;
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!