Skip to content

Jay Mehta / zango-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 87175bba by jaymehta
Options

merge

2 parents ab78a785 0be06a74
Inline Side-by-side
Showing 13 changed files with 221 additions and 139 deletions
components/home/BrowseExperiences.js
......@@ -22,7 +22,8 @@ const BrowseExperiences = () => {
price: "200",
offPrice: "40%",
days: "For 1 Night",
taxes: "Includes taxes & Fees"
taxes: "Includes taxes & Fees",
id: 1,
},
{
image: "/images/Browse-Experiences/02.png",
......@@ -32,7 +33,8 @@ const BrowseExperiences = () => {
price: "200",
offPrice: "40%",
days: "For 1 Night",
taxes: "Includes taxes & Fees"
taxes: "Includes taxes & Fees",
id: 2,
},
{
image: "/images/Browse-Experiences/03.png",
......@@ -42,7 +44,8 @@ const BrowseExperiences = () => {
price: "200",
offPrice: "40%",
days: "For 1 Night",
taxes: "Includes taxes & Fees"
taxes: "Includes taxes & Fees",
id: 3,
},
{
image: "/images/Browse-Experiences/04.png",
......@@ -52,7 +55,8 @@ const BrowseExperiences = () => {
price: "200",
offPrice: "40%",
days: "For 1 Night",
taxes: "Includes taxes & Fees"
taxes: "Includes taxes & Fees",
id: 4,
},
{
image: "/images/Browse-Experiences/01.png",
......@@ -62,7 +66,8 @@ const BrowseExperiences = () => {
price: "200",
offPrice: "40%",
days: "For 1 Night",
taxes: "Includes taxes & Fees"
taxes: "Includes taxes & Fees",
id: 5,
}
];
......@@ -116,7 +121,7 @@ const BrowseExperiences = () => {
{ListingData &&
ListingData.map(data => {
return (
<SwiperSlide>
<SwiperSlide key={data?.id}>
<motion.div
variants={zoomIn("left", 0.3)}
initial={"hidden"}
......
components/home/Home.js
import React, { Fragment } from "react";
import React, { Fragment, useEffect } from "react";
import Banner from "./Banner";
import SearchBar from "./SearchBar";
import LetDiscover from "./LetDiscover";
......@@ -6,18 +6,26 @@ import BrowseExperiences from "./BrowseExperiences";
import GiftAnExperience from "./GiftAnExperience";
import Testimonial from "./Testimonial";
import SignUpToExperienceOurPlatform from "./SignUpToExperienceOurPlatform";
import { useDispatch, useSelector } from "react-redux";
const Home = () => {
const { categories } = useSelector(state => state.categories);
const { testimonial } = useSelector(sate => sate.testimonial);
console.log("categories", categories )
console.log("testimonial", testimonial )
const dispatch = useDispatch();
useEffect(() => {
// dispatch(getHomePage())
}, [dispatch]);
return (
<Fragment>
<main>
<Banner />
<SearchBar />
<LetDiscover />
<LetDiscover categories={categories} />
<BrowseExperiences />
<GiftAnExperience />
<Testimonial />
<Testimonial testimonial={testimonial} />
<SignUpToExperienceOurPlatform />
</main>
</Fragment>
......
components/home/LetDiscover.js
......@@ -11,49 +11,8 @@ import { motion } from "framer-motion";
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";
const LetDiscover = () => {
const letDiscoverData = [
{
image: "/images/discover/01.png",
title: "All"
},
{
image: "/images/discover/02.png",
title: "Art & History"
},
{
image: "/images/discover/03.png",
title: "Experiential Dining "
},
{
image: "/images/discover/04.png",
title: "Family"
},
{
image: "/images/discover/05.png",
title: "Fitness"
},
{
image: "/images/discover/06.png",
title: "Performing Arts"
},
{
image: "/images/discover/01.png",
title: "Pop Ups"
},
{
image: "/images/discover/02.png",
title: "Tour"
},
{
image: "/images/discover/03.png",
title: "Classes"
},
{
image: "/images/discover/04.png",
title: "Wellness"
}
];
import { cleanImage } from "../../services/imageHandling.js";
const LetDiscover = ({ categories }) => {
return (
<>
<section className="let-discover-session">
......@@ -81,7 +40,7 @@ const LetDiscover = () => {
<div className="let-discover-carousal position-relative">
<Swiper
modules={[Autoplay, Navigation]}
slidesPerView={6}
slidesPerView={3}
// autoplay={{
// delay: 7000,
// disableOnInteraction: false,
......@@ -107,22 +66,27 @@ const LetDiscover = () => {
}}
className="mySwiper01 mySwiper02"
>
{letDiscoverData &&
letDiscoverData.map((data, index) => {
<SwiperSlide>
<motion.div variants={zoomIn("left", 0.3)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
<a href="">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/discover/03.png" />
</span>
<div className="title">ALL</div>
</a>
</motion.div>
</SwiperSlide>
{categories?.data &&
categories.data.map((data, index) => {
return (
<SwiperSlide>
<motion.div
variants={zoomIn("left", 0.3)}
initial={"hidden"}
whileInView={"show"}
viewport={{ once: false, amount: 0.2 }}
>
<a href="">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src={data.image} />
</span>
<div className="title">{data.title}</div>
</a>
<SwiperSlide key={data?.id}>
<motion.div variants={zoomIn("left", 0.3)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
<a href="" >
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src={cleanImage(data?.attributes?.image?.data?.attributes)} />
</span>
<div className="title">{data?.attributes?.name}</div>
</a>
</motion.div>
</SwiperSlide>
);
......
components/home/Testimonial.js
import Image from "next/image";
import React from "react";
import React, { useState } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Autoplay } from "swiper/modules";
import StarRatings from 'react-star-ratings';
import { fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvariants.js";
import { motion } from "framer-motion";
// Import Swiper styles
......@@ -11,18 +13,12 @@ import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";
const Testimonial = () => {
const testimonialData = [
{
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.”",
name: "Erika Payne, Los Angeles CA"
},
{
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.”",
name: "Erika Payne, Los Angeles CA"
},
];
const Testimonial = ({ testimonial }) => {
const [rating, setRating] = useState(0);
const handleRatingChange = (newRating) => {
setRating(newRating);
};
return (
<>
<section className="testimonial-session">
......@@ -30,7 +26,7 @@ const Testimonial = () => {
<div className="row">
<div className="col-12">
<div className="testimonial-carousal position-relative">
<Swiper
<Swiper
slidesPerView={1}
autoplay={{
delay: 9000,
......@@ -39,71 +35,72 @@ const Testimonial = () => {
autoHeight={true}
spaceBetween={10}
navigation={{ nextEl: ".testimonial-arrow-left", prevEl: ".testimonial-arrow-right" }}
modules={[Navigation, Autoplay]}
className="mySwiper01 mySwiper02"
>
{testimonialData &&
testimonialData.map(data => {
{testimonial?.data &&
testimonial?.data.map((data, index) => {
return (
<SwiperSlide>
<motion.div
variants={zoomIn("left", 0.3)}
initial={"hidden"}
whileInView={"show"}
viewport={{ once: false, amount: 0.2 }}
>
<div className="testimonial-item">
<div className="img">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/testimonial/01.png" />
</span>
</div>
<div className="rating">
<a href="">
<span className="image-container">
<Image layout="fill" className="image img-fluid" alt="" src="/images/icons/star.svg" />
</span>
</a>
<a href="">
<span className="image-container">
<Image layout="fill" className="image img-fluid" alt="" src="/images/icons/star.svg" />
</span>
</a>
<a href="">
<motion.div variants={zoomIn("left", 0.3)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
<div className="testimonial-item">
<div className="img">
<span className="image-container">
<Image layout="fill" className="image img-fluid" alt="" src="/images/icons/star.svg" />
<Image layout="fill" alt="" className="image img-fluid" src="/images/testimonial/01.png" />
</span>
</a>
<a href="">
<span className="image-container">
<Image layout="fill" className="image img-fluid" alt="" src="/images/icons/star.svg" />
</span>
</a>
<a href="">
<span className="image-container">
<Image layout="fill" className="image img-fluid" alt="" src="/images/icons/star.svg" />
</span>
</a>
{/* <a href="">
</div>
<div className="rating">
<StarRatings
rating={rating}
starRatedColor="yellow" // Set the rated color to yellow
starHoverColor="yellow" // Set the hover color to yellow
changeRating={handleRatingChange}
numberOfStars={5}
name='rating'
starDimension="16px" // Set star width and height
/>
{/* <p>You rated this: {rating} stars</p> */}
{/* <a href="">
<span className="image-container">
<Image layout="fill" className="image img-fluid" alt="" src="/images/icons/star.svg" />
</span>
</a>
<a href="">
<span className="image-container">
<Image layout="fill" className="image img-fluid" alt="" src="/images/icons/star.svg" />
</span>
</a>
<a href="">
<span className="image-container">
<Image layout="fill" className="image img-fluid" alt="" src="/images/icons/star.svg" />
</span>
</a>
<a href="">
<span className="image-container">
<Image layout="fill" className="image img-fluid" alt="" src="/images/icons/star.svg" />
</span>
</a>
<a href="">
<span className="image-container">
<Image layout="fill" className="image img-fluid" alt="" src="/images/icons/star.svg" />
</span>
</a> */}
{/* <a href="">
<span className='fa fa-star'>
<Image layout='fill' alt='' src="/images/icons/star.svg" />
</span>
</a> */}
</div>
<div className="disc">{data?.attributes?.description}</div>
<div className="name">{data?.attributes?.title}</div>
</div>
<div className="disc">
{data.disc}
</div>
<div className="name">{data.name}</div>
</div>
</motion.div>
</SwiperSlide>
</SwiperSlide>
);
})}
</Swiper>
<div className="swiper-nav">
<div className="navbutton d-flex justify-content-center justify-content-md-between ">
<div className="navbutton d-flex justify-content-between justify-content-md-between ">
<button className="testimonial-arrow-right arrow">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-left.svg" />
......@@ -116,7 +113,6 @@ const Testimonial = () => {
</button>
</div>
</div>
</div>
</div>
</div>
......
components/layout/Footer.js
......@@ -91,7 +91,10 @@ const Footer = () => {
<h3>HELP</h3>
<ul>
<li>
<a href="">Terms & Policy</a>
<a href="/terms-and-conditions">Terms & Policy</a>
</li>
<li>
<a href="/privacy-policy">Privacy Policy</a>
</li>
<li>
<a href="">Careers</a>
......
package.json
......@@ -36,9 +36,9 @@
"react-owl-carousel": "^2.3.3",
"react-phone-input-2": "^2.15.1",
"react-player": "^2.11.0",
"react-rating": "^2.0.5",
"react-redux": "^8.0.2",
"react-select": "^5.8.0",
"react-star-ratings": "^2.3.0",
"react-toastify": "^9.0.8",
"reactjs-otp-input": "^2.0.8",
"redux": "^4.2.0",
......
pages/index.js
import Home from "../components/home/Home";
import Layout from "../components/layout/Layout";
import { getAllCategories } from "../redux/actions/categoriesAction";
import { getTestimonial } from "../redux/actions/testimonialAction";
import { loadUser } from "../redux/actions/userActions";
import { wrapper } from "../redux/store";
......@@ -22,13 +24,21 @@ export default function IndexPage() {
/** For server side rendering */
export const getServerSideProps = wrapper.getServerSideProps(store => async ({ req, query }) => {
// Get the menu data.
// get the locations data.
// await store.dispatch(loadUser())
try {
await store.dispatch(getAllCategories())
await store.dispatch(getTestimonial())
return {
props: {},
// Next.js will attempt to re-generate the page:
// - Any requests to the page after the initial request and before 10 seconds are also cached and instantaneous.
// - After the 10-second window, the next request will still show the cached (stale) page
// - Next.js triggers a regeneration of the page in the background.
// - Once the page generates successfully, Next.js will invalidate the cache and show the updated page. If the background regeneration fails, the old page would still be unaltered.
// In seconds
// revalidate: Number(process.env.NEXT_PUBLIC_ISR_REVALIDATE_AFTER)
};
} catch (error) {
console.log("index.js", error);
}
});
redux/actions/categoriesAction.js
......@@ -10,18 +10,29 @@ import {
} from "../constants/categoryConstants";
export const getAllCategories = () => async dispatch => {
console.log("here >");
try {
console.log("here >>");
dispatch({
type: GET_CATEGORIES_REQUEST
});
const config = {
headers: {
"Content-Type": "application/json"
}
};
const query = {
populate: ["image"]
};
const response = await axios.get(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/categories`, config);
const queryString = qs.stringify(query, {
encodeValuesOnly: true
});
const response = await axios.get(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/categories?${queryString}`, config);
console.log("response > ", response);
dispatch({
type: GET_CATEGORIES_SUCCESS,
payload: response.data
......
redux/actions/testimonialAction.js 0 → 100644
import axios from "axios";
import qs from "qs";
import { GET_TESTIMONIAL_FAIL, GET_TESTIMONIAL_REQUEST, GET_TESTIMONIAL_SUCCESS } from "../constants/testimonialConstants";
export const getTestimonial = () => async dispatch => {
try {
dispatch({
type: GET_TESTIMONIAL_REQUEST
});
const config = {
headers: {
"Content-Type": "application/json"
}
};
const query = {
populate: ["image"]
};
const queryString = qs.stringify(query, {
encodeValuesOnly: true
});
const response = await axios.get(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/testimonials?${queryString}`, config);
console.log("response > ", response);
dispatch({
type: GET_TESTIMONIAL_SUCCESS,
payload: response.data
});
return response.data;
} catch (error) {
dispatch({
type: GET_TESTIMONIAL_FAIL,
payload: error.response.data
});
}
};
redux/constants/testimonialConstants.js 0 → 100644
export const GET_TESTIMONIAL_REQUEST = "GET_TESTIMONIAL_REQUEST"
export const GET_TESTIMONIAL_SUCCESS = "GET_TESTIMONIAL_SUCCESS"
export const GET_TESTIMONIAL_FAIL = "GET_TESTIMONIAL_FAIL"
export const CLEAR_ERRORS = "CLEAR_ERRORS";
\ No newline at end of file
redux/reducers/reducers.js
......@@ -7,6 +7,7 @@ import { displayEnquireNowReducer } from "./enquireNowModalReducer";
import { getVendorDetailsReducer, loggedInVendorReducer, updateVendorReducer } from "./vendorReducers";
import { createActivityReducer, getActivitiesReducer } from "./activitiesReducer";
import { getAllCategoriesReducer, getAllSubCategoriesReducer } from "./categoryReducer";
import { getAllTestimonialReducer } from "./testimonialReducer";
const reducers = combineReducers({
townships: townshipsReducer,
......@@ -27,6 +28,7 @@ const reducers = combineReducers({
activityData: createActivityReducer,
categories: getAllCategoriesReducer,
subCategories: getAllSubCategoriesReducer,
testimonial: getAllTestimonialReducer,
allActivitiesData: getActivitiesReducer,
});
......
redux/reducers/testimonialReducer.js 0 → 100644
import { GET_TESTIMONIAL_REQUEST, CLEAR_ERRORS, GET_TESTIMONIAL_SUCCESS, GET_TESTIMONIAL_FAIL } from "../constants/testimonialConstants";
export const getAllTestimonialReducer = (state = { loading: true, success: false, testimonial: null }, action) => {
switch (action.type) {
case GET_TESTIMONIAL_REQUEST:
return {
loading: true,
};
case GET_TESTIMONIAL_SUCCESS:
return {
loading: false,
testimonial: action.payload
};
case GET_TESTIMONIAL_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
styles/globals.css
......@@ -2727,6 +2727,13 @@ footer hr {
border: 1px solid #000;
border-radius: 10px;
}
.testimonial-session .rating{
margin-bottom: 0.5rem;
}
.testimonial-session .rating .star-ratings svg{
width: 33px !important;
height: 33px !important;
}
@media (min-width: 992px) {
.navbar-expand-lg .navbar-nav .nav-link {
margin: 0 2rem;
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!