Skip to content

Jay Mehta / zango-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit ae91847a by jaymehta
Options

conflict

2 parents a3148dbd 9a12bc7f
Inline Side-by-side
Showing 68 changed files with 720 additions and 461 deletions
components/blog-details/BlogDetails.js
...@@ -2,12 +2,14 @@ import React from 'react' ...@@ -2,12 +2,14 @@ import React from 'react'
import PageBanner from './PageBanner' import PageBanner from './PageBanner'
import BlogsDetailInner from './BlogsDetailInner' import BlogsDetailInner from './BlogsDetailInner'
import MostReadBlogs from './MostReadBlogs' import MostReadBlogs from './MostReadBlogs'
import { useDispatch, useSelector } from "react-redux";
const BlogDetails = () => { const BlogDetails = () => {
const { blog } = useSelector(state => state.blog);
console.log("blog >>>>>", blog)
return ( return (
<> <>
<PageBanner /> <PageBanner blog={blog} />
<BlogsDetailInner /> <BlogsDetailInner blog={blog}/>
<MostReadBlogs /> <MostReadBlogs />
</> </>
) )
......
components/blog-details/BlogsDetailInner.js
import Image from 'next/image' import Image from "next/image";
import React from 'react' import React from "react";
import { cleanImage } from "../../services/imageHandling";
const BlogsDetailInner = () => { const BlogsDetailInner = ({ blog }) => {
let mainBlog;
if (blog && blog.length > 0) {
mainBlog = blog[0];
}
console.log("mainBlog", blog)
return ( return (
<section className='blog-detail-inner-session'> <section className="blog-detail-inner-session">
<div className='container'> <div className="container">
<div className='row align-items-center mb-3'> <div className="row align-items-center mb-3">
<div className='col-md-6'> <div className="col-md-6">
<div className='profile'> <div className="profile">
<span className='image-container'> <span className="image-container">
<Image layout='fill' alt='' className='image img-fluid' src="/images/blog-pic.png" /> <Image layout="fill" alt="" className="image img-fluid" src={cleanImage(mainBlog?.attributes?.profilePic?.data?.attributes)} />
</span> </span>
<div className='name'>By John Smith</div> <div className="name">{mainBlog?.attributes?.name}</div>
</div> </div>
</div> </div>
<div className='col-md-6'> <div className="col-md-6">
<div className='date'> <div className="date">
<span className='image-container'> <span className="image-container">
<Image layout='fill' alt='' className='image img-fluid' src="/images/icons/calendar.svg" /> <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/calendar.svg" />
</span> </span>
<div className=''>27th Jan 2024</div> <div className="">{mainBlog?.attributes?.date}</div>
</div> </div>
</div> </div>
</div> </div>
<div className='row'> <div className="row">
<div className='col-12'> <div className="col-12">
<ul className='flag-list'> <ul className="flag-list">
<li> <li>
<a href="">Adventure</a> <a href="">{mainBlog?.attributes?.categories}</a>
</li> </li>
<li> <li>
<a href="">Fun</a> <a href="">Fun</a>
...@@ -38,20 +44,17 @@ const BlogsDetailInner = () => { ...@@ -38,20 +44,17 @@ const BlogsDetailInner = () => {
</ul> </ul>
</div> </div>
</div> </div>
<div className='row'> <div className="row">
<div className='col-12'> <div className="col-12">
<h2>13 MOST Unique Places to Stay in Washington State</h2> <h2>{mainBlog?.attributes?.title}</h2>
<p>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 exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </p> <div dangerouslySetInnerHTML={{__html: mainBlog?.attributes?.description}}></div>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur</p>
<p>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 exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur</p>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
) );
} };
export default BlogsDetailInner export default BlogsDetailInner;
components/blog-details/MostReadBlogs.js
...@@ -10,7 +10,7 @@ import { Navigation, Autoplay } from "swiper/modules"; ...@@ -10,7 +10,7 @@ import { Navigation, Autoplay } from "swiper/modules";
import "swiper/css"; import "swiper/css";
import "swiper/css/pagination"; import "swiper/css/pagination";
import "swiper/css/navigation"; import "swiper/css/navigation";
import { BlogData } from "../blogs/BlogsItem.js"; import { BlogData } from "../blog/BlogItem.js";
import Image from "next/image.js"; import Image from "next/image.js";
const MostReadBlogs = () => { const MostReadBlogs = () => {
return ( return (
......
components/blog-details/PageBanner.js
...@@ -2,13 +2,19 @@ import Image from "next/image"; ...@@ -2,13 +2,19 @@ import Image from "next/image";
import React from "react"; import React from "react";
import { fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvariants.js"; import { fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvariants.js";
import { motion } from "framer-motion"; import { motion } from "framer-motion";
const PageBanner = () => { import { cleanImage } from "../../services/imageHandling.js";
const PageBanner = ({blog}) => {
let mainBlog;
if (blog && blog.length > 0) {
mainBlog = blog[0];
}
console.log("123", mainBlog)
return ( return (
<> <>
<div className="page-title-area"> <div className="page-title-area">
<div className="banner-bg"> <div className="banner-bg">
<span className="image-container hide-on-mobile"> <span className="image-container hide-on-mobile">
<Image layout="fill" className="image img-fluid" alt="" src="/images/blogs/01.png" /> <Image layout="fill" className="image img-fluid" alt="" src={cleanImage(mainBlog?.attributes?.image?.data?.attributes)} />
</span> </span>
<span className="image-container hide-on-desktop"> <span className="image-container hide-on-desktop">
<Image layout="fill" className="image img-fluid" alt="" src="/images/blogs/01.png" /> <Image layout="fill" className="image img-fluid" alt="" src="/images/blogs/01.png" />
......
components/blogs/Blogs.js → components/blog/Blog.js
import React from "react"; import React from "react";
import { fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvariants.js"; import BlogsItem from "./BlogItem.js";
import { motion } from "framer-motion";
import BlogsItem from "./BlogsItem.js";
import PageBanner from "./PageBanner.js"; import PageBanner from "./PageBanner.js";
const Blogs = () => { import { useDispatch, useSelector } from "react-redux";
const Blog = () => {
const { blogs } = useSelector(state => state.blogs);
console.log("blogs", blogs)
return ( return (
<> <>
<PageBanner /> <PageBanner />
<BlogsItem /> <BlogsItem blogs={blogs} />
</> </>
); );
}; };
export default Blogs; export default Blog;
components/blogs/BlogsItem.js → components/blog/BlogItem.js
...@@ -3,6 +3,7 @@ import { fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvaria ...@@ -3,6 +3,7 @@ import { fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvaria
import { motion } from "framer-motion"; import { motion } from "framer-motion";
import Image from "next/image.js"; import Image from "next/image.js";
import { Accordion, Button, Form } from "react-bootstrap"; import { Accordion, Button, Form } from "react-bootstrap";
import { cleanImage } from "../../services/imageHandling.js";
export const BlogData = [ export const BlogData = [
{ {
image: "/images/blogs/01.png", image: "/images/blogs/01.png",
...@@ -48,7 +49,7 @@ export const BlogData = [ ...@@ -48,7 +49,7 @@ export const BlogData = [
} }
]; ];
const BlogsItem = () => { const BlogsItem = ({blogs}) => {
const [showContent, setShowContent] = useState(false); const [showContent, setShowContent] = useState(false);
const [isGridViewOpen, setIsGridViewOpen] = useState(false); const [isGridViewOpen, setIsGridViewOpen] = useState(false);
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
...@@ -298,28 +299,28 @@ const BlogsItem = () => { ...@@ -298,28 +299,28 @@ const BlogsItem = () => {
<div className="row"> <div className="row">
<div className="col-12"> <div className="col-12">
<div className="row"> <div className="row">
{BlogData && {blogs &&
BlogData.map(data => { blogs.map(data => {
return ( return (
<div className="col-md-4"> <div className="col-md-4">
<div className="blog-item"> <div className="blog-item">
<div className="img-wrapper"> <div className="img-wrapper">
<span className="image-container"> <span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src={data.image} /> <Image layout="fill" alt="" className="image img-fluid" src={cleanImage(data?.attributes?.image?.data?.attributes)} />
</span> </span>
<div className="top-rated">{data.flag}</div> <div className="top-rated">{data?.attributes?.categories}</div>
</div> </div>
<div className="info"> <div className="info">
<div className="read-row"> <div className="read-row">
<span className="image-container"> <span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/clock.svg" /> <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/clock.svg" />
</span> </span>
<div className="">{data.read}</div> <div className="">{data?.attributes?.read} Read</div>
</div> </div>
<div className="title">{data.title}</div> <div className="title">{data?.attributes?.title}</div>
<div className="discription">{data.discription}</div> <div className="discription" dangerouslySetInnerHTML={{ __html: data?.attributes?.description }}></div>
<div className="read-more"> <div className="read-more">
<Button href="/blog-details" variant="primary"> <Button href={`/blog/${data.attributes.slug}`} variant="primary">
Read More Read More
</Button> </Button>
</div> </div>
......
components/home/Banner.js
...@@ -8,8 +8,9 @@ import "swiper/css"; ...@@ -8,8 +8,9 @@ import "swiper/css";
import "swiper/css/pagination"; import "swiper/css/pagination";
import "swiper/css/navigation"; import "swiper/css/navigation";
import Image from "next/image.js"; import Image from "next/image.js";
import { cleanImage } from "../../services/imageHandling.js";
const Banner = () => { const Banner = ({ homeBanner }) => {
return ( return (
<> <>
<section className="home-banner"> <section className="home-banner">
...@@ -20,7 +21,7 @@ const Banner = () => { ...@@ -20,7 +21,7 @@ const Banner = () => {
delay: 9000, delay: 9000,
disableOnInteraction: false disableOnInteraction: false
}} }}
// autoplay={false}
spaceBetween={10} spaceBetween={10}
navigation={true} navigation={true}
pagination={{ pagination={{
...@@ -43,96 +44,19 @@ const Banner = () => { ...@@ -43,96 +44,19 @@ const Banner = () => {
modules={[Pagination, Navigation, Autoplay]} modules={[Pagination, Navigation, Autoplay]}
className="mySwiper01" className="mySwiper01"
> >
{
/*map through the array of images*/
homeBanner?.data &&
homeBanner?.data.map((data, index) => {
return (
<SwiperSlide> <SwiperSlide>
<div className="slider-item slider-item-01"> <div className="slider-item slider-item-01">
<div className="home-banner-bg"> <div className="home-banner-bg">
<span className="image-container hide-on-mobile"> <span className="image-container hide-on-mobile">
<Image layout="fill" className="image img-fluid" alt="" src="/images/home-banner/01.jpg" /> <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/01-m.jpg" />
</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.jpg" />
</span>
<span className="image-container hide-on-desktop">
<Image layout="fill" className="image img-fluid" alt="" src="/images/home-banner/02.jpg" />
</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.jpg" />
</span> </span>
<span className="image-container hide-on-desktop"> <span className="image-container hide-on-desktop">
<Image layout="fill" className="image img-fluid" alt="" src="/images/home-banner/03.jpg" /> <Image layout="fill" className="image img-fluid" alt="" src={cleanImage(data?.attributes?.mobileBanner?.data?.attributes)} />
</span> </span>
</div> </div>
<div className="d-table"> <div className="d-table">
...@@ -144,57 +68,15 @@ const Banner = () => { ...@@ -144,57 +68,15 @@ const Banner = () => {
<div className="slider-text"> <div className="slider-text">
<div className="banner-title"> <div className="banner-title">
<div className="banner-txt"> <div className="banner-txt">
<h1>Lorem ipsum dolor sit amet</h1> <h1>{data?.attributes?.title}</h1>
<div className="title">WELCOME TO THE WORLD OF TRAVEL</div> <div className="title">{data?.attributes?.subTitle}</div>
<div className="disc"> <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 {data?.attributes?.discription}
minim veniam, quis nostrud.
</div> </div>
</div> </div>
</div> </div>
<div className="common-btn"> <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>
</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.jpg" />
</span>
<span className="image-container hide-on-desktop">
<Image layout="fill" className="image img-fluid" alt="" src="/images/home-banner/04.jpg" />
</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 Explore Now
</a> </a>
</div> </div>
...@@ -207,6 +89,9 @@ const Banner = () => { ...@@ -207,6 +89,9 @@ const Banner = () => {
</div> </div>
</div> </div>
</SwiperSlide> </SwiperSlide>
);
})
}
</Swiper> </Swiper>
</div> </div>
</section> </section>
......
components/home/BrowseExperiences.js
...@@ -11,65 +11,10 @@ import { motion } from "framer-motion"; ...@@ -11,65 +11,10 @@ import { motion } from "framer-motion";
import "swiper/css"; import "swiper/css";
import "swiper/css/pagination"; import "swiper/css/pagination";
import "swiper/css/navigation"; import "swiper/css/navigation";
const BrowseExperiences = () => { import { cleanImage } from "../../services/imageHandling.js";
const BrowseExperiences = ({allActivitiesData}) => {
const ListingData = [
{
image: "/images/Browse-Experiences/01.png",
topRated: "Top Rated",
title: "City Climb",
discription: "Lorem ipsum dolor sit amet, consectetur adipiscing elit,",
price: "200",
offPrice: "40%",
days: "For 1 Night",
taxes: "Includes taxes & Fees",
id: 1,
},
{
image: "/images/Browse-Experiences/02.png",
topRated: "Top Rated",
title: "City Climb",
discription: "Lorem ipsum dolor sit amet, consectetur adipiscing elit,",
price: "200",
offPrice: "40%",
days: "For 1 Night",
taxes: "Includes taxes & Fees",
id: 2,
},
{
image: "/images/Browse-Experiences/03.png",
topRated: "Top Rated",
title: "City Climb",
discription: "Lorem ipsum dolor sit amet, consectetur adipiscing elit,",
price: "200",
offPrice: "40%",
days: "For 1 Night",
taxes: "Includes taxes & Fees",
id: 3,
},
{
image: "/images/Browse-Experiences/04.png",
topRated: "Top Rated",
title: "City Climb",
discription: "Lorem ipsum dolor sit amet, consectetur adipiscing elit,",
price: "200",
offPrice: "40%",
days: "For 1 Night",
taxes: "Includes taxes & Fees",
id: 4,
},
{
image: "/images/Browse-Experiences/01.png",
topRated: "Top Rated",
title: "City Climb",
discription: "Lorem ipsum dolor sit amet, consectetur adipiscing elit,",
price: "200",
offPrice: "40%",
days: "For 1 Night",
taxes: "Includes taxes & Fees",
id: 5,
}
];
return ( return (
<> <>
...@@ -118,8 +63,8 @@ const BrowseExperiences = () => { ...@@ -118,8 +63,8 @@ const BrowseExperiences = () => {
modules={[Navigation, Autoplay]} modules={[Navigation, Autoplay]}
className="mySwiper01 mySwiper02" className="mySwiper01 mySwiper02"
> >
{ListingData && {allActivitiesData.data &&
ListingData.map(data => { allActivitiesData.data.map(data => {
return ( return (
<SwiperSlide key={data?.id}> <SwiperSlide key={data?.id}>
<motion.div <motion.div
...@@ -129,18 +74,18 @@ const BrowseExperiences = () => { ...@@ -129,18 +74,18 @@ const BrowseExperiences = () => {
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={data.image} /> <Image layout="fill" alt="" className="image img-fluid" src={cleanImage(data.attributes?.image?.data?.attributes)} />
</span> </span>
<div className="top-rated">{data.topRated}</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.title}</div> <div className="title">{data?.attributes?.name}</div>
<div className="rating-wishlist"> <div className="rating-wishlist">
<div className="rating"> <div className="rating">
8.8 {data?.attributes?.rating}
<span className="image-container"> <span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" /> <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" />
</span> </span>
...@@ -153,17 +98,17 @@ const BrowseExperiences = () => { ...@@ -153,17 +98,17 @@ const BrowseExperiences = () => {
</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.price} <span className="off">{data.offPrice} OFF</span> ${data?.attributes?.pricePerPerson} <span className="off">{data?.attributes?.off}% OFF</span>
</div> </div>
<div className="detail"> <div className="detail">
<div className="">{data.days}</div> <div className="">For 1 Night</div>
<div className="">{data.taxes}</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>
...@@ -174,12 +119,12 @@ const BrowseExperiences = () => { ...@@ -174,12 +119,12 @@ const BrowseExperiences = () => {
</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
...@@ -11,8 +11,12 @@ import { useDispatch, useSelector } from "react-redux"; ...@@ -11,8 +11,12 @@ import { useDispatch, useSelector } from "react-redux";
const Home = () => { 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);
console.log("categories", categories ) const { allActivitiesData } = useSelector(sate => sate.allActivitiesData);
console.log("testimonial", testimonial ) 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(); const dispatch = useDispatch();
useEffect(() => { useEffect(() => {
// dispatch(getHomePage()) // dispatch(getHomePage())
...@@ -20,10 +24,10 @@ const Home = () => { ...@@ -20,10 +24,10 @@ const Home = () => {
return ( return (
<Fragment> <Fragment>
<main> <main>
<Banner /> <Banner homeBanner={homeBanner} />
<SearchBar /> <SearchBar />
<LetDiscover categories={categories} /> <LetDiscover categories={categories} />
<BrowseExperiences /> <BrowseExperiences allActivitiesData={allActivitiesData} />
<GiftAnExperience /> <GiftAnExperience />
<Testimonial testimonial={testimonial} /> <Testimonial testimonial={testimonial} />
<SignUpToExperienceOurPlatform /> <SignUpToExperienceOurPlatform />
......
components/home/LetDiscover.js
...@@ -30,7 +30,7 @@ const LetDiscover = ({ categories }) => { ...@@ -30,7 +30,7 @@ const LetDiscover = ({ categories }) => {
</div> </div>
</motion.div> </motion.div>
<div className="view-all-btn"> <div className="view-all-btn">
<Button variant="primary">View All</Button> <Button href="/listing" variant="primary">View All</Button>
</div> </div>
</div> </div>
</div> </div>
......
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/layout/Layout.js
...@@ -7,7 +7,7 @@ import "react-toastify/dist/ReactToastify.css"; ...@@ -7,7 +7,7 @@ import "react-toastify/dist/ReactToastify.css";
import { loadUser } from "../../redux/actions/userActions"; import { loadUser } from "../../redux/actions/userActions";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
const Layout = ({ children, title = "Zango", description = "" }) => { const Layout = ({ children, title = "Zango", description = "Zango" }) => {
const dispatch = useDispatch(); const dispatch = useDispatch();
useEffect(() => { useEffect(() => {
dispatch(loadUser()); dispatch(loadUser());
......
components/listing/LetDiscover.js
import Image from "next/image"; import Image from "next/image";
import React from "react"; import React, { useState } from "react";
import {fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvariants.js"; import { fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvariants.js";
import { Button } from "react-bootstrap"; import { Button } from "react-bootstrap";
import { Swiper, SwiperSlide } from "swiper/react"; import { Swiper, SwiperSlide } from "swiper/react";
...@@ -12,6 +12,16 @@ import "swiper/css"; ...@@ -12,6 +12,16 @@ import "swiper/css";
import "swiper/css/pagination"; import "swiper/css/pagination";
import "swiper/css/navigation"; import "swiper/css/navigation";
const LetDiscover = () => { const LetDiscover = () => {
const [activeIndex, setActiveIndex] = useState(null);
const handleTitleClick = (index) => {
// Check if the clicked index is already active
if (activeIndex === index) {
return; // Do nothing if it's already active
}
// Toggle the active index if it's different from the clicked index
setActiveIndex(index);
};
const letDiscoverData = [ const letDiscoverData = [
{ {
image: "/images/discover/01.png", image: "/images/discover/01.png",
...@@ -54,6 +64,39 @@ const LetDiscover = () => { ...@@ -54,6 +64,39 @@ const LetDiscover = () => {
title: "Wellness" title: "Wellness"
} }
]; ];
const [showCloseIcon, setShowCloseIcon] = useState({});
const handleToggleCloseIcon = index => {
setShowCloseIcon(prevShowCloseIcon => ({
...prevShowCloseIcon,
[index]: !prevShowCloseIcon[index]
}));
};
const subCategoriesData = [
{
name: "Boat"
},
{
name: "Games"
},
{
name: "Helicopter"
},
{
name: "Ice-skating"
},
{
name: "Jet-skiing"
},
{
name: "Kayaking"
},
{
name: "Park"
},
{
name: "Rooftop"
}
];
return ( return (
<> <>
<section className="let-discover-session let-discover-listing-session"> <section className="let-discover-session let-discover-listing-session">
...@@ -70,7 +113,6 @@ const LetDiscover = () => { ...@@ -70,7 +113,6 @@ const LetDiscover = () => {
<h2>Discover</h2> <h2>Discover</h2>
</div> </div>
</motion.div> </motion.div>
</div> </div>
</div> </div>
</div> </div>
...@@ -104,15 +146,12 @@ const LetDiscover = () => { ...@@ -104,15 +146,12 @@ const LetDiscover = () => {
> >
{letDiscoverData && {letDiscoverData &&
letDiscoverData.map((data, index) => { letDiscoverData.map((data, index) => {
const isActive = activeIndex === index;
return ( return (
<SwiperSlide> <SwiperSlide>
<motion.div <motion.div variants={zoomIn("left", 0.3)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
variants={zoomIn("left", 0.3)} <a className={isActive ? "active" : ""}
initial={"hidden"} onClick={() => handleTitleClick(index)}>
whileInView={"show"}
viewport={{ once: false, amount: 0.2 }}
>
<a href="">
<span className="image-container"> <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} />
</span> </span>
...@@ -140,6 +179,23 @@ const LetDiscover = () => { ...@@ -140,6 +179,23 @@ const LetDiscover = () => {
</div> </div>
</div> </div>
</div> </div>
<div className="row">
<div className="col-12">
<div className="sub-categories">
{subCategoriesData &&
subCategoriesData.map((data, index) => (
<a key={index} onClick={() => handleToggleCloseIcon(index)}>
<span>{data.name}</span>
{showCloseIcon[index] && (
<span className="image-container">
<Image layout="fill" alt="image" className="image" src="/images/icons/close-button.svg" />
</span>
)}
</a>
))}
</div>
</div>
</div>
</div> </div>
</section> </section>
</> </>
......
components/listing/Listing.js
...@@ -2,13 +2,17 @@ import React, { Fragment } from "react"; ...@@ -2,13 +2,17 @@ import React, { Fragment } from "react";
import ListingInner from "./ListingInner"; import ListingInner from "./ListingInner";
import SignUpToExperienceOurPlatform from "../home/SignUpToExperienceOurPlatform"; import SignUpToExperienceOurPlatform from "../home/SignUpToExperienceOurPlatform";
import LetDiscover from "./LetDiscover"; import LetDiscover from "./LetDiscover";
import { useSelector } from "react-redux";
const Listing = () => { const Listing = () => {
const { allActivitiesData } = useSelector(sate => sate.allActivitiesData);
console.log("allActivitiesData >>>> 123", allActivitiesData)
return ( return (
<Fragment> <Fragment>
<main> <main>
<LetDiscover /> <LetDiscover />
<ListingInner /> <ListingInner allActivitiesData={allActivitiesData} />
<SignUpToExperienceOurPlatform /> <SignUpToExperienceOurPlatform />
</main> </main>
</Fragment> </Fragment>
......
components/listing/ListingFilter.js
import Image from "next/image"; import Image from "next/image";
import React, { useState } from "react"; import React, { useState } from "react";
import { Accordion, Form } from "react-bootstrap"; import { Accordion, Form } from "react-bootstrap";
// import upArrow from "./assets/up-arrow.png"; import { Slider } from "antd";
// import downArrow from "./assets/down-arrow.png"; import { DatePicker, Space } from "antd";
import upArrow from "../../public/images/icons/up-s.svg";
// import downArrow from "../images/icons/down-s.svg";
import downArrow from "../../public/images/icons/down-s.svg";
const ListingFilter = () => { const ListingFilter = () => {
const [showContent, setShowContent] = useState(false); const [showContent, setShowContent] = useState(false);
...@@ -14,7 +10,9 @@ const ListingFilter = () => { ...@@ -14,7 +10,9 @@ const ListingFilter = () => {
const toggleContent = () => { const toggleContent = () => {
setShowContent(!showContent); setShowContent(!showContent);
}; };
const onChange = (date, dateString) => {
console.log(date, dateString);
};
return ( return (
<> <>
<div className="listing-filter"> <div className="listing-filter">
...@@ -36,9 +34,26 @@ const ListingFilter = () => { ...@@ -36,9 +34,26 @@ const ListingFilter = () => {
<div className="head">Your Budget</div> <div className="head">Your Budget</div>
</div> </div>
<div className="inner"> <div className="inner">
<div className="price">$200 - $5000+</div> <div className="price">
$200 - $5000+ <span className="sub-text">Average price is $5000</span>
</div>
<div className="graph"> <div className="graph">
<img className="img-fluid w-100" src="/images/buget.svg" /> <Slider
range={{
draggableTrack: true
}}
defaultValue={[200, 5000]}
min={200}
max={5000}
tooltip={{
open: true
}}
/>
<div className="graph-price">
<div className="min">$200</div>
<div className="min">$5000</div>
</div>
{/* <img className="img-fluid w-100" src="/images/buget.svg" /> */}
</div> </div>
</div> </div>
</div> </div>
...@@ -253,7 +268,7 @@ const ListingFilter = () => { ...@@ -253,7 +268,7 @@ const ListingFilter = () => {
</div> </div>
</div> </div>
</div> </div>
<div className="box-01"> {/* <div className="box-01">
<div className="p-all"> <div className="p-all">
<div className="head">Rating:</div> <div className="head">Rating:</div>
</div> </div>
...@@ -274,8 +289,8 @@ const ListingFilter = () => { ...@@ -274,8 +289,8 @@ const ListingFilter = () => {
</label> </label>
</div> </div>
</div> </div>
</div> </div> */}
<div className="box-01"> {/* <div className="box-01">
<div className="p-all"> <div className="p-all">
<div className="head">Months:</div> <div className="head">Months:</div>
</div> </div>
...@@ -289,8 +304,8 @@ const ListingFilter = () => { ...@@ -289,8 +304,8 @@ const ListingFilter = () => {
</Form.Select> </Form.Select>
</div> </div>
</div> </div>
</div> </div> */}
<div className="box-01"> {/* <div className="box-01">
<div className="p-all"> <div className="p-all">
<div className="head">Days</div> <div className="head">Days</div>
</div> </div>
...@@ -311,6 +326,27 @@ const ListingFilter = () => { ...@@ -311,6 +326,27 @@ const ListingFilter = () => {
</label> </label>
</div> </div>
</div> </div>
</div> */}
<div className="box-01">
<div className="p-all">
<div className="head">Date</div>
</div>
<div className="inner">
<div className="row">
<div className="col-6">
<div>From</div>
<Space direction="vertical">
<DatePicker onChange={onChange} />
</Space>
</div>
<div className="col-6">
<div>To</div>
<Space direction="vertical">
<DatePicker onChange={onChange} />
</Space>
</div>
</div>
</div>
</div> </div>
<div className="box-01"> <div className="box-01">
<div className="p-all"> <div className="p-all">
......
components/listing/ListingInner.js
...@@ -3,7 +3,8 @@ import ListingFilter from "./ListingFilter"; ...@@ -3,7 +3,8 @@ import ListingFilter from "./ListingFilter";
import ListingItems from "./ListingItems"; import ListingItems from "./ListingItems";
import Image from "next/image"; import Image from "next/image";
const ListingInner = () => { const ListingInner = ({allActivitiesData}) => {
console.log("allActivitiesData >>>>>", allActivitiesData)
const [isFilterViewOpen, setIsFilterViewOpen] = useState(false); const [isFilterViewOpen, setIsFilterViewOpen] = useState(false);
const [isGridViewOpen, setIsGridViewOpen] = useState(false); const [isGridViewOpen, setIsGridViewOpen] = useState(false);
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
...@@ -36,10 +37,13 @@ const ListingInner = () => { ...@@ -36,10 +37,13 @@ const ListingInner = () => {
}; };
}, []); }, []);
return ( return (
<> <>
<section className="listing-inner-session"> <section className="listing-inner-session">
<div className="container-fluid"> <div className="container-fluid">
<div className="row"> <div className="row">
<div className="col-12"> <div className="col-12">
<div className="filter-dd"> <div className="filter-dd">
...@@ -133,11 +137,10 @@ const ListingInner = () => { ...@@ -133,11 +137,10 @@ const ListingInner = () => {
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div className="row "> <div className="row ">
{ (isFilterViewOpen || size > 768) && ( {(isFilterViewOpen || size > 768) && (
<> <>
<div className={`col-md-3 first-block-content ${isFilterViewOpen ? "show" : ""}`}> <div className={`col-md-3 first-block-content ${isFilterViewOpen ? "show" : ""}`}>
<ListingFilter /> <ListingFilter />
...@@ -146,7 +149,7 @@ const ListingInner = () => { ...@@ -146,7 +149,7 @@ const ListingInner = () => {
)} )}
<div className="col-md-9"> <div className="col-md-9">
<ListingItems /> <ListingItems allActivitiesData={allActivitiesData} />
</div> </div>
</div> </div>
</div> </div>
......
components/listing/ListingItems.js
import Image from "next/image"; import Image from "next/image";
import React from "react"; import React from "react";
import { Button } from "react-bootstrap"; import { Button } from "react-bootstrap";
import { cleanImage } from "../../services/imageHandling";
const ListingItems = () => { const ListingItems = ({allActivitiesData}) => {
const ListingData = [ console.log("allActivitiesData",allActivitiesData )
{
image: "/images/Browse-Experiences/01.png",
topRated: "Top Rated",
title: "City Climb",
discription: "Lorem ipsum dolor sit amet, consectetur adipiscing elit,",
price: "200",
offPrice: "40%",
days: "For 1 Night",
taxes: "Includes taxes & Fees"
},
{
image: "/images/Browse-Experiences/02.png",
topRated: "Top Rated",
title: "City Climb",
discription: "Lorem ipsum dolor sit amet, consectetur adipiscing elit,",
price: "200",
offPrice: "40%",
days: "For 1 Night",
taxes: "Includes taxes & Fees"
},
{
image: "/images/Browse-Experiences/03.png",
topRated: "Top Rated",
title: "City Climb",
discription: "Lorem ipsum dolor sit amet, consectetur adipiscing elit,",
price: "200",
offPrice: "40%",
days: "For 1 Night",
taxes: "Includes taxes & Fees"
},
{
image: "/images/Browse-Experiences/04.png",
topRated: "Top Rated",
title: "City Climb",
discription: "Lorem ipsum dolor sit amet, consectetur adipiscing elit,",
price: "200",
offPrice: "40%",
days: "For 1 Night",
taxes: "Includes taxes & Fees"
},
{
image: "/images/Browse-Experiences/01.png",
topRated: "Top Rated",
title: "City Climb",
discription: "Lorem ipsum dolor sit amet, consectetur adipiscing elit,",
price: "200",
offPrice: "40%",
days: "For 1 Night",
taxes: "Includes taxes & Fees"
}
];
return ( return (
<> <>
<div className="listing-items"> <div className="listing-items">
<div className="row"> <div className="row">
{ListingData && {allActivitiesData.data &&
ListingData.map(data => { allActivitiesData.data.map(data => {
return ( return (
<div className="col-md-3"> <div className="col-md-3">
<div className="item"> <div className="item">
<div className="browse-experiences-item"> <div className="browse-experiences-item">
<div className="img-wrapper"> <div className="img-wrapper">
<span className="image-container"> <span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src={data.image} /> <Image layout="fill" alt="" className="image img-fluid" src={cleanImage(data.attributes?.image?.data?.attributes)} />
</span> </span>
<div className="top-rated">{data.topRated}</div> <div className="top-rated">Top Rated</div>
</div> </div>
<div className="info"> <div className="info">
<div className="top-name"> <div className="top-name">
<div className="title">{data.title}</div> <div className="title">{data?.attributes?.name}</div>
<div className="rating-wishlist"> <div className="rating-wishlist">
<div className="rating"> <div className="rating">
8.8 {data?.attributes?.rating}
<span className="image-container"> <span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" /> <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" />
</span> </span>
...@@ -92,14 +42,14 @@ const ListingItems = () => { ...@@ -92,14 +42,14 @@ const ListingItems = () => {
{data.discription} <a href="">Read More</a> {data.discription} <a href="">Read More</a>
</div> </div>
<div className="price"> <div className="price">
${data.price} <span className="off">{data.offPrice} OFF</span> ${data?.attributes?.pricePerPerson} <span className="off">{data?.attributes?.off}% OFF</span>
</div> </div>
<div className="detail"> <div className="detail">
<div className="">{data.days}</div> <div className="">For 1 Night</div>
<div className="">{data.taxes}</div> <div className="">Includes taxes & Fees</div>
</div> </div>
<div className="explore-now"> <div className="explore-now">
<Button href="/detail" variant="primary">Explore Now</Button> <Button href="/listing" variant="primary">Explore Now</Button>
</div> </div>
</div> </div>
</div> </div>
......
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/blog-details.js deleted 100644 → 0
import AboutUs from "../components/about-us/AboutUs";
import BlogDetails from "../components/blog-details/BlogDetails";
import Blogs from "../components/blogs/Blogs";
import Home from "../components/home/Home";
import Layout from "../components/layout/Layout";
import { loadUser } from "../redux/actions/userActions";
import { wrapper } from "../redux/store";
export default function BlogDetailsPage() {
return (
<Layout>
<BlogDetails />
</Layout>
);
}
/** 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())
return {
props: {},
};
});
pages/blog.js
import AboutUs from "../components/about-us/AboutUs"; import AboutUs from "../components/about-us/AboutUs";
import Blogs from "../components/blogs/Blogs"; import Blog from "../components/blog/Blog";
import Home from "../components/home/Home"; import Home from "../components/home/Home";
import Layout from "../components/layout/Layout"; import Layout from "../components/layout/Layout";
import { getBlogData, getBlogsData } from "../redux/actions/blogAction";
import { loadUser } from "../redux/actions/userActions"; import { loadUser } from "../redux/actions/userActions";
import { wrapper } from "../redux/store"; import { wrapper } from "../redux/store";
...@@ -9,20 +10,28 @@ export default function BlogsPage() { ...@@ -9,20 +10,28 @@ export default function BlogsPage() {
return ( return (
<Layout> <Layout>
<Blogs /> <Blog />
</Layout> </Layout>
); );
} }
/** For server side rendering */ /** For server side rendering */
export const getServerSideProps = wrapper.getServerSideProps(store => async ({ req, query }) => { export const getServerSideProps = wrapper.getServerSideProps(store => async ({ req, query }) => {
// Get the menu data. try {
// get the locations data. await store.dispatch(getBlogsData())
// await store.dispatch(loadUser())
return { return {
props: {}, 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);
}
}); });
pages/blog/[slug].js 0 → 100644
import BlogDetails from "../../components/blog-details/BlogDetails";
import Layout from "../../components/layout/Layout";
import { getBlogData } from "../../redux/actions/blogAction";
import { wrapper } from "../../redux/store";
export default function BlogDetailsPage() {
return (
<Layout>
<BlogDetails />
</Layout>
);
}
/** For server side rendering */
export const getServerSideProps = wrapper.getServerSideProps(store => async ({ req, query }) => {
try {
console.log("query", query);
await store.dispatch(getBlogData(query.slug))
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);
}
});
pages/index.js
import Home from "../components/home/Home"; 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 { 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";
...@@ -27,6 +29,8 @@ export const getServerSideProps = wrapper.getServerSideProps(store => async ({ r ...@@ -27,6 +29,8 @@ export const getServerSideProps = wrapper.getServerSideProps(store => async ({ r
try { try {
await store.dispatch(getAllCategories()) await store.dispatch(getAllCategories())
await store.dispatch(getTestimonial()) await store.dispatch(getTestimonial())
await store.dispatch(getActivitiesByVendor())
await store.dispatch(getHomeBanner())
return { return {
props: {}, props: {},
......
pages/listing.js
import Home from "../components/home/Home";
import Layout from "../components/layout/Layout"; import Layout from "../components/layout/Layout";
import Listing from "../components/listing/Listing"; import Listing from "../components/listing/Listing";
import { getActivitiesByVendor } from "../redux/actions/activityAction";
import { wrapper } from "../redux/store"; import { wrapper } from "../redux/store";
export default function ListingPage() { export default function ListingPage() {
...@@ -22,13 +22,20 @@ export default function ListingPage() { ...@@ -22,13 +22,20 @@ export default function ListingPage() {
/** For server side rendering */ /** For server side rendering */
export const getStaticProps = wrapper.getStaticProps(store => async ({ req, query }) => { export const getStaticProps = wrapper.getStaticProps(store => async ({ req, query }) => {
// Get the menu data. try {
await store.dispatch(getActivitiesByVendor())
// get the locations data.
return { return {
props: {}, 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);
}
}); });
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/home-banner/01-m.webp 0 → 100644
No preview for this file type
public/images/home-banner/01.webp 0 → 100644
No preview for this file type
public/images/home-banner/02.webp 0 → 100644
No preview for this file type
public/images/home-banner/03.webp 0 → 100644
No preview for this file type
public/images/home-banner/04.webp 0 → 100644
No preview for this file type
public/images/icons/close-button.svg 0 → 100644
<svg width="23" height="23" xmlns="http://www.w3.org/2000/svg"><g transform="rotate(45 19.63172804 8.13172796)" fill="none" fill-rule="evenodd"><circle fill="#1E1D24" transform="rotate(45 16.263456 16.263456)" cx="16.263456" cy="16.263456" r="11.5"/><path stroke="#FCFCFF" stroke-width="2" stroke-linecap="round" d="M16.263456 11.663456v9.2M20.863456 16.263456h-9.2"/></g></svg>
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/activityAction.js
...@@ -102,7 +102,7 @@ export const getActivitiesByVendor = () => async dispatch => { ...@@ -102,7 +102,7 @@ export const getActivitiesByVendor = () => async dispatch => {
const query = { const query = {
filters: {}, filters: {},
populate: ["subCategory", "subCategory.category", "masterPincode", "vendor"] populate: ["masterMonths", "subCategory", "subCategory.category", "timeSlots", "masterPincode", "vendor", "image"]
}; };
const queryString = qs.stringify(query, { const queryString = qs.stringify(query, {
......
redux/actions/blogAction.js 0 → 100644
import axios from "axios";
import qs from "qs";
import { FETCH_BLOGS_FAIL, FETCH_BLOGS_REQUEST, FETCH_BLOGS_SUCCESS, FETCH_BLOG_FAIL, FETCH_BLOG_REQUEST, FETCH_BLOG_SUCCESS } from "../constants/blogConstants";
export const getBlogsData =
() =>
async dispatch => {
try {
console.log("HI >>>>>")
dispatch({
type: FETCH_BLOGS_REQUEST
});
const config = {
headers: {
"Content-Type": "application/json"
}
};
const query = {
// pagination: {
// pageSize: 12,
// page: currentPage
// },
filters: {
category: {
name: {}
}
},
populate: ["image"],
sort: ["updatedAt:desc"]
// pagination: {}
// pageSize: -1,
};
const queryString = qs.stringify(query, {
encodeValuesOnly: true
});
const response = await axios.get(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/blogs/?${queryString}`);
dispatch({
// type: published ? PUBLISHED_ROOMS_SUCCESS : ADMIN_ROOMS_SUCCESS,
type: FETCH_BLOGS_SUCCESS,
payload: response.data
});
} catch (error) {
dispatch({
// type: published ? PUBLISHED_ROOMS_FAIL : ADMIN_ROOMS_FAIL,
type: FETCH_BLOGS_FAIL,
payload: error.response.data
});
}
};
export const getBlogData = slug => async dispatch => {
try {
dispatch({
type: FETCH_BLOG_REQUEST
});
const query = {
filters: {},
populate: ["image","profilePic"],
pagination: {}
};
// if (country) {
// query.filters["country"] = { $eq: country };
// }
query.filters["slug"] = { $eq: slug };
// if (category) {
// }
const queryString = qs.stringify(query, {
encodeValuesOnly: true
});
const response = await axios.get(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/blogs/?${queryString}`);
dispatch({
// type: published ? PUBLISHED_ROOMS_SUCCESS : ADMIN_ROOMS_SUCCESS,
type: FETCH_BLOG_SUCCESS,
payload: response.data
});
} catch (error) {
dispatch({
// type: published ? PUBLISHED_ROOMS_FAIL : ADMIN_ROOMS_FAIL,
type: FETCH_BLOG_FAIL,
payload: error.response.data
});
}
};
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/blogConstants.js 0 → 100644
export const FETCH_BLOGS_REQUEST = "FETCH_BLOGS_REQUEST";
export const FETCH_BLOGS_SUCCESS = "FETCH_BLOGS_SUCCESS";
export const FETCH_BLOGS_FAIL = "FETCH_BLOGS_FAIL";
export const FETCH_BLOG_REQUEST = "FETCH_BLOG_REQUEST";
export const FETCH_BLOG_SUCCESS = "FETCH_BLOG_SUCCESS";
export const FETCH_BLOG_FAIL = "FETCH_BLOG_FAIL";
export const CLEAR_ERRORS = "CLEAR_ERRORS";
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/blogReducer.js 0 → 100644
import { FETCH_BLOGS_FAIL, FETCH_BLOGS_REQUEST, FETCH_BLOGS_SUCCESS, FETCH_BLOG_FAIL, FETCH_BLOG_REQUEST, FETCH_BLOG_SUCCESS, CLEAR_ERRORS } from "../constants/blogConstants";
export const blogsReducer = (state = { blogs: {} }, action) => {
switch (action.type) {
case FETCH_BLOGS_REQUEST:
return {
loading: true
};
case FETCH_BLOGS_SUCCESS:
return {
blogs: action.payload.data,
// totalCount: action.payload.meta.pagination.total,
// resultsPerPage: action.payload.meta.pagination.pageSize
};
case FETCH_BLOGS_FAIL:
return {
error: action.payload.error.message
};
case CLEAR_ERRORS:
return {
...state,
error: null
};
default:
return state;
}
};
export const blogReducer = (state = { blog: {} }, action) => {
switch (action.type) {
case FETCH_BLOG_REQUEST:
return {
loading: true
};
case FETCH_BLOG_SUCCESS:
return {
blog: action.payload.data
};
case FETCH_BLOG_FAIL:
return {
error: action.payload.error.message
};
case CLEAR_ERRORS:
return {
...state,
error: null
};
default:
return state;
}
};
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
...@@ -8,6 +8,8 @@ import { getVendorDetailsReducer, loggedInVendorReducer, updateVendorReducer } f ...@@ -8,6 +8,8 @@ import { getVendorDetailsReducer, loggedInVendorReducer, updateVendorReducer } f
import { createActivityReducer, getActivitiesReducer, getActivityByIdReducer, updateActivityByIdReducer } from "./activitiesReducer"; import { createActivityReducer, getActivitiesReducer, getActivityByIdReducer, updateActivityByIdReducer } 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 { getAllHomeBannerReducer } from "./homeBannerReducer";
const reducers = combineReducers({ const reducers = combineReducers({
townships: townshipsReducer, townships: townshipsReducer,
...@@ -32,6 +34,9 @@ const reducers = combineReducers({ ...@@ -32,6 +34,9 @@ const reducers = combineReducers({
allActivitiesData: getActivitiesReducer, allActivitiesData: getActivitiesReducer,
activityById: getActivityByIdReducer, activityById: getActivityByIdReducer,
updatedActivity: updateActivityByIdReducer, updatedActivity: updateActivityByIdReducer,
blogs: blogsReducer,
blog: blogReducer,
homeBanner: getAllHomeBannerReducer,
}); });
export default reducers; export default reducers;
styles/globals.css
...@@ -265,12 +265,12 @@ h6 { ...@@ -265,12 +265,12 @@ h6 {
position: relative; position: relative;
} }
.image-container>span { .image-container > span {
position: unset !important; position: unset !important;
/* display: inline-block !important; */ /* display: inline-block !important; */
} }
.image-container.d-inblock>span { .image-container.d-inblock > span {
position: unset !important; position: unset !important;
display: inline-block !important; display: inline-block !important;
} }
...@@ -474,7 +474,7 @@ header { ...@@ -474,7 +474,7 @@ header {
position: relative; position: relative;
} }
.owl-custom01.owl-carousel .owl-nav button.owl-prev>span { .owl-custom01.owl-carousel .owl-nav button.owl-prev > span {
background: url(/images/icons/arrow-left.svg) no-repeat center; background: url(/images/icons/arrow-left.svg) no-repeat center;
width: 14px; width: 14px;
height: 22px; height: 22px;
...@@ -482,7 +482,7 @@ header { ...@@ -482,7 +482,7 @@ header {
display: block; display: block;
} }
.owl-custom01.owl-carousel .owl-nav button.owl-next>span { .owl-custom01.owl-carousel .owl-nav button.owl-next > span {
background: url(/images/icons/arrow-right.svg) no-repeat center; background: url(/images/icons/arrow-right.svg) no-repeat center;
width: 14px; width: 14px;
height: 22px; height: 22px;
...@@ -613,12 +613,12 @@ span.form-error, ...@@ -613,12 +613,12 @@ span.form-error,
position: relative; position: relative;
} }
.image-container>span { .image-container > span {
position: unset !important; position: unset !important;
/* display: inline-block !important; */ /* display: inline-block !important; */
} }
.image-container.d-inblock>span { .image-container.d-inblock > span {
position: unset !important; position: unset !important;
display: inline-block !important; display: inline-block !important;
} }
...@@ -825,7 +825,7 @@ span.form-error, ...@@ -825,7 +825,7 @@ span.form-error,
user-select: none; user-select: none;
} }
.check-container input:checked~.checkmark:after { .check-container input:checked ~ .checkmark:after {
display: block; display: block;
} }
...@@ -853,7 +853,7 @@ span.form-error, ...@@ -853,7 +853,7 @@ span.form-error,
width: 0; width: 0;
} }
.check-container input:checked~.checkmark { .check-container input:checked ~ .checkmark {
background-color: #fff; background-color: #fff;
} }
...@@ -1055,7 +1055,7 @@ span.form-error, ...@@ -1055,7 +1055,7 @@ span.form-error,
color: #808080; color: #808080;
} }
.card-booking-content>p:last-child { .card-booking-content > p:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
...@@ -1098,7 +1098,7 @@ span.form-error, ...@@ -1098,7 +1098,7 @@ span.form-error,
color: #808080; color: #808080;
} }
.card-booking-content .description>span { .card-booking-content .description > span {
color: #646464; color: #646464;
text-decoration: underline; text-decoration: underline;
} }
...@@ -1108,7 +1108,7 @@ span.form-error, ...@@ -1108,7 +1108,7 @@ span.form-error,
font-weight: 600; font-weight: 600;
} }
.card-booking-content .price>span { .card-booking-content .price > span {
font-size: 0.8rem; font-size: 0.8rem;
color: #808080; color: #808080;
} }
...@@ -1144,7 +1144,7 @@ span.form-error, ...@@ -1144,7 +1144,7 @@ span.form-error,
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.card-booking-content .details-div>p:first-child { .card-booking-content .details-div > p:first-child {
font-family: "Sofia Pro Light"; font-family: "Sofia Pro Light";
font-size: 14px; font-size: 14px;
line-height: 20px; line-height: 20px;
...@@ -1154,7 +1154,7 @@ span.form-error, ...@@ -1154,7 +1154,7 @@ span.form-error,
margin-bottom: 0; margin-bottom: 0;
} }
.card-booking-content .details-div>p:last-child { .card-booking-content .details-div > p:last-child {
font-family: "Sofia Pro Light"; font-family: "Sofia Pro Light";
font-size: 16px; font-size: 16px;
line-height: 20px; line-height: 20px;
...@@ -1703,16 +1703,16 @@ span.form-error, ...@@ -1703,16 +1703,16 @@ span.form-error,
.statusDiv.completed, .statusDiv.completed,
.statusDiv.booked, .statusDiv.booked,
.statusDiv.active { .statusDiv.active {
background-color: #F1FFEB; background-color: #f1ffeb;
border: 1px solid #5ED028; border: 1px solid #5ed028;
color: #5ED028; color: #5ed028;
} }
.statusDiv.cancelled, .statusDiv.cancelled,
.statusDiv.inactive { .statusDiv.inactive {
background-color: #FFF3F2; background-color: #fff3f2;
border: 1px solid #C6211B; border: 1px solid #c6211b;
color: #C6211B; color: #c6211b;
} }
.actions { .actions {
...@@ -1730,7 +1730,7 @@ span.form-error, ...@@ -1730,7 +1730,7 @@ span.form-error,
right: 0; right: 0;
background-color: #fff; background-color: #fff;
border-radius: 4px; border-radius: 4px;
box-shadow: 0px 4px 4px 0px #B4B4B440; box-shadow: 0px 4px 4px 0px #b4b4b440;
z-index: 999; z-index: 999;
padding: 10px; padding: 10px;
} }
...@@ -1745,7 +1745,7 @@ span.form-error, ...@@ -1745,7 +1745,7 @@ span.form-error,
font-family: "Poppins Regular"; font-family: "Poppins Regular";
font-size: 14px; font-size: 14px;
line-height: 21px; line-height: 21px;
color: #1C1C1E; color: #1c1c1e;
padding: 5px 10px; padding: 5px 10px;
cursor: pointer; cursor: pointer;
} }
...@@ -1775,13 +1775,13 @@ span.form-error, ...@@ -1775,13 +1775,13 @@ span.form-error,
} }
.btnAdd.btnReject { .btnAdd.btnReject {
background-color: #ECECEC !important; background-color: #ececec !important;
color: #161616 !important; color: #161616 !important;
} }
.btnAdd.btnReject:focus, .btnAdd.btnReject:focus,
.btnAdd.btnReject:hover { .btnAdd.btnReject:hover {
border-color: #ECECEC !important; border-color: #ececec !important;
} }
.vendorDetails h4 { .vendorDetails h4 {
...@@ -1808,17 +1808,17 @@ span.form-error, ...@@ -1808,17 +1808,17 @@ span.form-error,
} }
.vendorDetails p.pview { .vendorDetails p.pview {
color: #0070BD; color: #0070bd;
text-decoration: underline; text-decoration: underline;
} }
.vendorDetails .borderLeft { .vendorDetails .borderLeft {
border-left: 1px solid #C6C6C6; border-left: 1px solid #c6c6c6;
padding-left: 3rem; padding-left: 3rem;
} }
.vendorDetails .borderRight { .vendorDetails .borderRight {
border-right: 1px solid #C6C6C6; border-right: 1px solid #c6c6c6;
} }
.mphead { .mphead {
...@@ -1832,17 +1832,23 @@ span.form-error, ...@@ -1832,17 +1832,23 @@ span.form-error,
/*--------------------------*/ /*--------------------------*/
.let-discover-carousal a { .let-discover-carousal a {
color: #000; color: #808080;
text-align: center; text-align: center;
cursor: pointer;
} }
.let-discover-carousal a .image{ .let-discover-carousal a .image {
padding: 0.2rem !important; padding: 0.2rem !important;
} }
.let-discover-carousal a .title { .let-discover-carousal a .title {
padding: 1rem; padding: 1rem;
} }
.let-discover-carousal a.active {
color: #000;
}
.let-discover-carousal a.active .title {
text-decoration: underline;
}
.carousal-c { .carousal-c {
padding: 0 4rem; padding: 0 4rem;
} }
...@@ -1896,6 +1902,7 @@ span.form-error, ...@@ -1896,6 +1902,7 @@ span.form-error,
.browse-experiences-item .img-wrapper { .browse-experiences-item .img-wrapper {
position: relative; position: relative;
color: #000;
} }
.top-rated { .top-rated {
...@@ -1909,7 +1916,8 @@ span.form-error, ...@@ -1909,7 +1916,8 @@ span.form-error,
} }
.info .top-name .title { .info .top-name .title {
font-size: 20px; font-size: 17px;
line-height: 20px;
} }
.info .rating-wishlist .rating { .info .rating-wishlist .rating {
...@@ -1938,10 +1946,20 @@ span.form-error, ...@@ -1938,10 +1946,20 @@ span.form-error,
color: #808080; color: #808080;
margin-bottom: 10px; margin-bottom: 10px;
} }
.browse-experiences-item .info .discription>span {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.browse-experiences-item .info .discription a { .browse-experiences-item .info .discription a {
color: #808080; color: #808080;
text-decoration: underline !important; text-decoration: underline !important;
text-align: right;
display: block;
padding-top: 4px;
} }
.browse-experiences-item .info .price { .browse-experiences-item .info .price {
...@@ -1970,23 +1988,25 @@ span.form-error, ...@@ -1970,23 +1988,25 @@ span.form-error,
padding-left: 1rem; padding-left: 1rem;
padding-right: 1rem; padding-right: 1rem;
} }
.btn-outline-secondary:hover{
background: #0070BD;
}
.btn-center { .btn-center {
text-align: center; text-align: center;
padding: 2rem 0; padding: 2rem 0;
} }
.gift-an-experience-inner { .gift-an-experience-inner {
background: url(/images/gift-experience-bg.png) no-repeat; background: url(/images/gift-experience-bg.webp) no-repeat;
margin: 5rem 0 0; margin: 5rem 0 0;
background-size: 100%; background-size: 100%;
object-fit: cover; object-fit: cover;
padding: 4rem; padding: 4rem;
} }
.gift-an-experience-inner .img .image{ .gift-an-experience-inner .img .image {
display: block; display: block;
animation: scale2 4s infinite; animation: scale2 4s infinite;
transition: all .6s ease-out; transition: all 0.6s ease-out;
overflow: hidden; overflow: hidden;
} }
.gift-an-experience-inner .content .title { .gift-an-experience-inner .content .title {
...@@ -2008,7 +2028,7 @@ span.form-error, ...@@ -2008,7 +2028,7 @@ span.form-error,
text-align: center; text-align: center;
padding: 0 15rem; padding: 0 15rem;
} }
.testimonial-item .image{ .testimonial-item .image {
padding: 0.2rem !important; padding: 0.2rem !important;
} }
...@@ -2041,7 +2061,7 @@ span.form-error, ...@@ -2041,7 +2061,7 @@ span.form-error,
} }
.signUp-to-experience-our-platform-session { .signUp-to-experience-our-platform-session {
background: url(../public/images/sign-up-exp-bg.png) no-repeat; background: url(../public/images/sign-up-exp-bg.webp) no-repeat;
background-size: 100%; background-size: 100%;
object-fit: cover; object-fit: cover;
padding: 4rem; padding: 4rem;
...@@ -2191,7 +2211,8 @@ footer hr { ...@@ -2191,7 +2211,8 @@ footer hr {
/* padding: 1rem; */ /* padding: 1rem; */
} }
.accordion-filter {} .accordion-filter {
}
.accordion-filter .accordion-button:not(.collapsed) { .accordion-filter .accordion-button:not(.collapsed) {
background: transparent; background: transparent;
...@@ -2457,7 +2478,7 @@ footer hr { ...@@ -2457,7 +2478,7 @@ footer hr {
line-height: 2.5rem; line-height: 2.5rem;
} }
.product-info .price>span { .product-info .price > span {
color: #808080; color: #808080;
font-size: 14px; font-size: 14px;
} }
...@@ -2468,16 +2489,15 @@ footer hr { ...@@ -2468,16 +2489,15 @@ footer hr {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
.product-info .location>span { .product-info .location > span {
color: #808080; color: #808080;
font-size: 16px; font-size: 16px;
} }
.btn:hover { .btn:hover {
box-shadow: -1px 6px 10px 0 rgba(120, 60, 20, .2); box-shadow: -1px 6px 10px 0 rgba(120, 60, 20, 0.2);
transform: scale(1.05); transform: scale(1.05);
/* background-color: transparent; */ /* background-color: transparent; */
transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1); transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
} }
.btn-row { .btn-row {
padding: 2rem 0; padding: 2rem 0;
...@@ -2509,7 +2529,7 @@ footer hr { ...@@ -2509,7 +2529,7 @@ footer hr {
max-height: 100%; max-height: 100%;
} }
.breadcrumb-item+.breadcrumb-item::before { .breadcrumb-item + .breadcrumb-item::before {
content: ""; content: "";
background: url(/images/icons/arrow-right-grey.svg) no-repeat; background: url(/images/icons/arrow-right-grey.svg) no-repeat;
width: 24px; width: 24px;
...@@ -2539,7 +2559,7 @@ footer hr { ...@@ -2539,7 +2559,7 @@ footer hr {
margin: 0.5rem; margin: 0.5rem;
} }
.availability-wrappper li>span { .availability-wrappper li > span {
width: 30px; width: 30px;
display: block; display: block;
margin-right: 10px; margin-right: 10px;
...@@ -2620,7 +2640,7 @@ footer hr { ...@@ -2620,7 +2640,7 @@ footer hr {
margin-bottom: 2rem; margin-bottom: 2rem;
} }
.guest-reviews-session>.container { .guest-reviews-session > .container {
border-top: 1px solid #c9c9c9; border-top: 1px solid #c9c9c9;
padding-top: 3rem; padding-top: 3rem;
} }
...@@ -2727,19 +2747,83 @@ footer hr { ...@@ -2727,19 +2747,83 @@ footer hr {
border: 1px solid #000; border: 1px solid #000;
border-radius: 10px; border-radius: 10px;
} }
.testimonial-session .rating{ .testimonial-session .rating {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
.testimonial-session .rating .star-ratings svg{ .testimonial-session .rating .star-ratings svg {
width: 33px !important; width: 33px !important;
height: 33px !important; height: 33px !important;
} }
.sub-categories {
display: flex;
align-items: center;
}
.sub-categories a {
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
margin-left: 1rem;
border: 1px solid #000;
border-radius: 2rem;
height: 2.5rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 0.15s;
}
<<<<<<< HEAD
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none; -webkit-appearance: none;
margin: 0; margin: 0;
=======
.sub-categories a .image-container {
width: 20px;
display: inline-block;
margin-left: 0.5rem;
margin-right: -0.8rem;
}
.graph {
padding-top: 3rem;
}
.graph .graph-price {
display: flex;
align-items: center;
justify-content: space-between;
color: #808080;
}
:where(.css-dev-only-do-not-override-1kuana8).ant-tooltip .ant-tooltip-inner {
padding: 5px 8px;
color: #808080;
background-color: transparent;
}
:where(.css-dev-only-do-not-override-1kuana8).ant-tooltip .ant-tooltip-arrow:before {
background: transparent;
}
:where(.css-dev-only-do-not-override-1kuana8).ant-tooltip .ant-tooltip-arrow::after {
box-shadow: 1px 1px 6px #c1c1c1;
}
.graph :where(.css-dev-only-do-not-override-1kuana8).ant-slider:hover .ant-slider-track {
background-color: #0070bd;
}
.graph :where(.css-dev-only-do-not-override-1kuana8).ant-slider .ant-slider-handle::after {
background-color: #0070bd;
box-shadow: 0 0 0 2px #0070bd;
}
.graph :where(.css-dev-only-do-not-override-1kuana8).ant-slider .ant-slider-rail {
background-color: #a1a1a1;
}
.graph :where(.css-dev-only-do-not-override-1kuana8).ant-slider .ant-slider-track {
background-color: #0070bd;
}
.box-01 .inner .price .sub-text {
color: #d1d1d1;
>>>>>>> 9a12bc7f80c3810cfd1a432e3c371269d7df08e1
} }
@media (min-width: 992px) { @media (min-width: 992px) {
...@@ -2810,7 +2894,7 @@ input[type="number"]::-webkit-outer-spin-button { ...@@ -2810,7 +2894,7 @@ input[type="number"]::-webkit-outer-spin-button {
background: transparent; background: transparent;
} }
.swiper-nav button .image-container>span { .swiper-nav button .image-container > span {
width: 14px !important; width: 14px !important;
} }
...@@ -2840,7 +2924,16 @@ input[type="number"]::-webkit-outer-spin-button { ...@@ -2840,7 +2924,16 @@ input[type="number"]::-webkit-outer-spin-button {
margin-top: -20px; margin-top: -20px;
margin-bottom: 5rem; margin-bottom: 5rem;
} }
.page-title-area .banner-bg .image-container {
height: 100%;
display: block;
}
.page-title-area .banner-bg .image-container > span {
height: 100% !important;
}
.page-title-area .banner-bg .image {
object-fit: cover;
}
.page-title-one { .page-title-one {
background: url(/images/banner/about-us.png); background: url(/images/banner/about-us.png);
} }
...@@ -2997,7 +3090,7 @@ input[type="number"]::-webkit-outer-spin-button { ...@@ -2997,7 +3090,7 @@ input[type="number"]::-webkit-outer-spin-button {
.swiper-pagination-fraction, .swiper-pagination-fraction,
.swiper-pagination-custom, .swiper-pagination-custom,
.swiper-horizontal>.swiper-pagination-bullets, .swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal { .swiper-pagination-bullets.swiper-pagination-horizontal {
bottom: -5px !important; bottom: -5px !important;
} }
...@@ -3352,7 +3445,7 @@ input[type="number"]::-webkit-outer-spin-button { ...@@ -3352,7 +3445,7 @@ input[type="number"]::-webkit-outer-spin-button {
display: inline-block; display: inline-block;
} }
.tooltip-btn:hover+.tooltips { .tooltip-btn:hover + .tooltips {
display: block; display: block;
} }
...@@ -3399,17 +3492,17 @@ input:disabled { ...@@ -3399,17 +3492,17 @@ input:disabled {
border-color: rgba(118, 118, 118, 0.3) !important; border-color: rgba(118, 118, 118, 0.3) !important;
} }
img { img {
transition: all .6s ease-out; transition: all 0.6s ease-out;
} }
img:hover { img:hover {
transform: scale(1.02); transform: scale(1.02);
transition: all .6s ease-out; transition: all 0.6s ease-out;
} }
.navbar-expand-lg .navbar-nav .nav-link.gift-card .image{ .navbar-expand-lg .navbar-nav .nav-link.gift-card .image {
display: block; display: block;
animation: scale1 4s infinite; animation: scale1 4s infinite;
transition: all .6s ease-out; transition: all 0.6s ease-out;
overflow: hidden; overflow: hidden;
padding: 0.1rem !important; padding: 0.1rem !important;
} }
...@@ -3440,17 +3533,17 @@ img:hover { ...@@ -3440,17 +3533,17 @@ img:hover {
transform: scale(1); transform: scale(1);
} }
} }
.get-in-touch-session .rt-banner .image{ .get-in-touch-session .rt-banner .image {
display: block; display: block;
animation: scale2 4s infinite; animation: scale2 4s infinite;
transition: all .6s ease-out; transition: all 0.6s ease-out;
overflow: hidden; overflow: hidden;
padding: 1.5rem !important; padding: 1.5rem !important;
} }
.founder-session .f-img .image{ .founder-session .f-img .image {
display: block; display: block;
animation: scale2 4s infinite; animation: scale2 4s infinite;
transition: all .6s ease-out; transition: all 0.6s ease-out;
overflow: hidden; overflow: hidden;
} }
...@@ -3632,7 +3725,7 @@ img:hover { ...@@ -3632,7 +3725,7 @@ img:hover {
top: 40%; top: 40%;
} }
.swiper-nav button .image-container>span { .swiper-nav button .image-container > span {
width: 10px !important; width: 10px !important;
} }
...@@ -3669,7 +3762,7 @@ img:hover { ...@@ -3669,7 +3762,7 @@ img:hover {
} }
.signUp-to-experience-our-platform-session { .signUp-to-experience-our-platform-session {
background: url(../public/images/sign-up-exp-bg-m.png) no-repeat; background: url(../public/images/sign-up-exp-bg-m.webp) no-repeat;
background-size: 100%; background-size: 100%;
object-fit: cover; object-fit: cover;
padding: 1rem; padding: 1rem;
...@@ -3697,7 +3790,7 @@ img:hover { ...@@ -3697,7 +3790,7 @@ img:hover {
.gift-an-experience-inner { .gift-an-experience-inner {
padding: 1rem; padding: 1rem;
border-radius: 27px; border-radius: 27px;
background: #f6f6f6 url(/images/gift-experience-bg-m.png) no-repeat center bottom; background: #f6f6f6 url(/images/gift-experience-bg-m.webp) no-repeat center bottom;
} }
.carousal-c .owl-custom01.owl-carousel .owl-nav button.owl-next { .carousal-c .owl-custom01.owl-carousel .owl-nav button.owl-next {
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!