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 103 additions and 21 deletions
components/home/BrowseExperiences.js
...@@ -74,12 +74,12 @@ const BrowseExperiences = ({allActivitiesData}) => { ...@@ -74,12 +74,12 @@ const BrowseExperiences = ({allActivitiesData}) => {
viewport={{ once: false, amount: 0.2 }} viewport={{ once: false, amount: 0.2 }}
> >
<div className="browse-experiences-item"> <div className="browse-experiences-item">
<div className="img-wrapper"> <a href="/detail" className="img-wrapper">
<span className="image-container"> <span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src={cleanImage(data.attributes?.image?.data?.attributes)} /> <Image layout="fill" alt="" className="image img-fluid" src={cleanImage(data.attributes?.image?.data?.attributes)} />
</span> </span>
<div className="top-rated">Top Rated</div> <div className="top-rated">Top Rated</div>
</div> </a>
<div className="info"> <div className="info">
<div className="top-name"> <div className="top-name">
<div className="title">{data?.attributes?.name}</div> <div className="title">{data?.attributes?.name}</div>
...@@ -98,7 +98,7 @@ const BrowseExperiences = ({allActivitiesData}) => { ...@@ -98,7 +98,7 @@ const BrowseExperiences = ({allActivitiesData}) => {
</div> </div>
</div> </div>
<div className="discription"> <div className="discription">
{data.discription} <a href="">Read More</a> <span>{data?.attributes?.description}</span> <a href="/detail">Read More</a>
</div> </div>
<div className="price"> <div className="price">
${data?.attributes?.pricePerPerson} <span className="off">{data?.attributes?.off}% OFF</span> ${data?.attributes?.pricePerPerson} <span className="off">{data?.attributes?.off}% OFF</span>
...@@ -108,7 +108,7 @@ const BrowseExperiences = ({allActivitiesData}) => { ...@@ -108,7 +108,7 @@ const BrowseExperiences = ({allActivitiesData}) => {
<div className="">Includes taxes & Fees</div> <div className="">Includes taxes & Fees</div>
</div> </div>
<div className="explore-now"> <div className="explore-now">
<Button href="/listing" variant="primary">Explore Now</Button> <Button href="/detail" variant="primary">Explore Now</Button>
</div> </div>
</div> </div>
</div> </div>
...@@ -119,12 +119,12 @@ const BrowseExperiences = ({allActivitiesData}) => { ...@@ -119,12 +119,12 @@ const BrowseExperiences = ({allActivitiesData}) => {
</Swiper> </Swiper>
<div className="swiper-nav"> <div className="swiper-nav">
<div className="navbutton d-flex justify-content-between "> <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"> <span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-left.svg" /> <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-left.svg" />
</span> </span>
</button> </button>
<button className="BrowseExperiences-left arrow"> <button className="BrowseExperiences-left arrow" id="BrowseExperiences-left" aria-label="BrowseExperiences-left">
<span className="image-container"> <span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-right.svg" /> <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-right.svg" />
</span> </span>
......
components/home/GiftAnExperience.js
...@@ -26,7 +26,7 @@ const GiftAnExperience = () => { ...@@ -26,7 +26,7 @@ const GiftAnExperience = () => {
<div className="col-md-6"> <div className="col-md-6">
<div className="img"> <div className="img">
<span className="image-container"> <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> </span>
</div> </div>
</div> </div>
......
components/home/Home.js
...@@ -12,9 +12,11 @@ const Home = () => { ...@@ -12,9 +12,11 @@ const Home = () => {
const { categories } = useSelector(state => state.categories); const { categories } = useSelector(state => state.categories);
const { testimonial } = useSelector(sate => sate.testimonial); const { testimonial } = useSelector(sate => sate.testimonial);
const { allActivitiesData } = useSelector(sate => sate.allActivitiesData); const { allActivitiesData } = useSelector(sate => sate.allActivitiesData);
console.log("categories", categories ) const { homeBanner } = useSelector(state => state.homeBanner);
console.log("testimonial", testimonial ) console.log("homeBanner", homeBanner);
console.log("allActivitiesData", allActivitiesData ) console.log("categories", categories);
console.log("testimonial", testimonial);
console.log("allActivitiesData", allActivitiesData);
const dispatch = useDispatch(); const dispatch = useDispatch();
useEffect(() => { useEffect(() => {
// dispatch(getHomePage()) // dispatch(getHomePage())
...@@ -22,13 +24,13 @@ const Home = () => { ...@@ -22,13 +24,13 @@ const Home = () => {
return ( return (
<Fragment> <Fragment>
<main> <main>
<Banner /> <Banner homeBanner={homeBanner} />
<SearchBar /> <SearchBar />
<LetDiscover categories={categories} /> <LetDiscover categories={categories} />
<BrowseExperiences allActivitiesData={allActivitiesData} /> <BrowseExperiences allActivitiesData={allActivitiesData} />
<GiftAnExperience /> <GiftAnExperience />
<Testimonial testimonial={testimonial} /> <Testimonial testimonial={testimonial} />
<SignUpToExperienceOurPlatform /> <SignUpToExperienceOurPlatform />
</main> </main>
</Fragment> </Fragment>
); );
......
components/home/Testimonial.js
...@@ -101,12 +101,12 @@ const Testimonial = ({ testimonial }) => { ...@@ -101,12 +101,12 @@ const Testimonial = ({ testimonial }) => {
</Swiper> </Swiper>
<div className="swiper-nav"> <div className="swiper-nav">
<div className="navbutton d-flex justify-content-between justify-content-md-between "> <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"> <span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-left.svg" /> <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-left.svg" />
</span> </span>
</button> </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"> <span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-right.svg" /> <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-right.svg" />
</span> </span>
......
components/user/MyWhishList.js
...@@ -94,7 +94,7 @@ const MyWhishList = () => { ...@@ -94,7 +94,7 @@ const MyWhishList = () => {
<p className="other">{data.other}</p> <p className="other">{data.other}</p>
</div> </div>
<div className="card-booking-footer pt-0"> <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 Explore Now
</Button> </Button>
</div> </div>
......
pages/index.js
...@@ -2,6 +2,7 @@ import Home from "../components/home/Home"; ...@@ -2,6 +2,7 @@ import Home from "../components/home/Home";
import Layout from "../components/layout/Layout"; import Layout from "../components/layout/Layout";
import { getActivitiesByVendor } from "../redux/actions/activityAction"; import { getActivitiesByVendor } from "../redux/actions/activityAction";
import { getAllCategories } from "../redux/actions/categoriesAction"; import { getAllCategories } from "../redux/actions/categoriesAction";
import { getHomeBanner } from "../redux/actions/homeBannerAction";
import { getTestimonial } from "../redux/actions/testimonialAction"; import { getTestimonial } from "../redux/actions/testimonialAction";
import { loadUser } from "../redux/actions/userActions"; import { loadUser } from "../redux/actions/userActions";
import { wrapper } from "../redux/store"; import { wrapper } from "../redux/store";
...@@ -29,6 +30,7 @@ export const getServerSideProps = wrapper.getServerSideProps(store => async ({ r ...@@ -29,6 +30,7 @@ export const getServerSideProps = wrapper.getServerSideProps(store => async ({ r
await store.dispatch(getAllCategories()) await store.dispatch(getAllCategories())
await store.dispatch(getTestimonial()) await store.dispatch(getTestimonial())
await store.dispatch(getActivitiesByVendor()) await store.dispatch(getActivitiesByVendor())
await store.dispatch(getHomeBanner())
return { return {
props: {}, 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 \ 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 \ No newline at end of file
redux/reducers/reducers.js
...@@ -9,6 +9,7 @@ import { createActivityReducer, getActivitiesReducer } from "./activitiesReducer ...@@ -9,6 +9,7 @@ import { createActivityReducer, getActivitiesReducer } from "./activitiesReducer
import { getAllCategoriesReducer, getAllSubCategoriesReducer } from "./categoryReducer"; import { getAllCategoriesReducer, getAllSubCategoriesReducer } from "./categoryReducer";
import { getAllTestimonialReducer } from "./testimonialReducer"; import { getAllTestimonialReducer } from "./testimonialReducer";
import { blogReducer, blogsReducer } from "./blogReducer"; import { blogReducer, blogsReducer } from "./blogReducer";
import { getAllHomeBannerReducer } from "./homeBannerReducer";
const reducers = combineReducers({ const reducers = combineReducers({
townships: townshipsReducer, townships: townshipsReducer,
...@@ -32,7 +33,8 @@ const reducers = combineReducers({ ...@@ -32,7 +33,8 @@ const reducers = combineReducers({
testimonial: getAllTestimonialReducer, testimonial: getAllTestimonialReducer,
allActivitiesData: getActivitiesReducer, allActivitiesData: getActivitiesReducer,
blogs: blogsReducer, blogs: blogsReducer,
blog: blogReducer blog: blogReducer,
homeBanner: getAllHomeBannerReducer,
}); });
export default reducers; 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!