Skip to content

Jay Mehta / zango-frontend

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

updated home page

1 parent 2b0440c0
Inline Side-by-side
Showing 34 changed files with 203 additions and 226 deletions
components/home/Banner.js
......@@ -8,8 +8,9 @@ import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";
import Image from "next/image.js";
import { cleanImage } from "../../services/imageHandling.js";
const Banner = () => {
const Banner = ({ homeBanner }) => {
return (
<>
<section className="home-banner">
......@@ -20,7 +21,7 @@ const Banner = () => {
delay: 9000,
disableOnInteraction: false
}}
// autoplay={false}
spaceBetween={10}
navigation={true}
pagination={{
......@@ -43,96 +44,19 @@ const Banner = () => {
modules={[Pagination, Navigation, Autoplay]}
className="mySwiper01"
>
{
/*map through the array of images*/
homeBanner?.data &&
homeBanner?.data.map((data, index) => {
return (
<SwiperSlide>
<div className="slider-item slider-item-01">
<div className="home-banner-bg">
<span className="image-container hide-on-mobile">
<Image layout="fill" className="image img-fluid" alt="" src="/images/home-banner/01.webp" />
</span>
<span className="image-container hide-on-desktop">
<Image layout="fill" className="image img-fluid" alt="" src="/images/home-banner/01-m.webp" />
</span>
</div>
<div className="d-table">
<div className="d-table-cell">
<div className="container">
<motion.div variants={slideFromRight(0.4)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
<div className="row">
<div className="col-md-6">
<div className="slider-text">
<div className="banner-title">
<div className="banner-txt">
<h1>Lorem ipsum dolor sit amet</h1>
<div className="title">WELCOME TO THE WORLD OF TRAVEL</div>
<div className="disc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud.
</div>
</div>
</div>
<div className="common-btn">
<a className="btn btn-primary" href="/allergic-rhinitis">
Explore Now
</a>
</div>
</div>
</div>
</div>
</motion.div>
</div>
</div>
</div>
</div>
</SwiperSlide>
<SwiperSlide>
<div className="slider-item slider-item-02">
<div className="home-banner-bg">
<span className="image-container hide-on-mobile">
<Image layout="fill" className="image img-fluid" alt="" src="/images/home-banner/02.webp" />
</span>
<span className="image-container hide-on-desktop">
<Image layout="fill" className="image img-fluid" alt="" src="/images/home-banner/02.webp" />
</span>
</div>
<div className="d-table">
<div className="d-table-cell">
<div className="container">
<motion.div variants={slideFromRight(0.4)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
<div className="row">
<div className="col-md-6">
<div className="slider-text">
<div className="banner-title">
<div className="banner-txt">
<h1>Lorem ipsum dolor sit amet</h1>
<div className="title">WELCOME TO THE WORLD OF TRAVEL</div>
<div className="disc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud.
</div>
</div>
</div>
<div className="common-btn">
<a className="btn btn-primary" href="/allergic-rhinitis">
Explore Now
</a>
</div>
</div>
</div>
</div>
</motion.div>
</div>
</div>
</div>
</div>
</SwiperSlide>
<SwiperSlide>
<div className="slider-item slider-item-03">
<div className="home-banner-bg">
<span className="image-container hide-on-mobile">
<Image layout="fill" className="image img-fluid" alt="" src="/images/home-banner/03.webp" />
<Image layout="fill" className="image img-fluid" alt="" src={cleanImage(data?.attributes?.desktopBanner?.data?.attributes)} />
</span>
<span className="image-container hide-on-desktop">
<Image layout="fill" className="image img-fluid" alt="" src="/images/home-banner/03.webp" />
<Image layout="fill" className="image img-fluid" alt="" src={cleanImage(data?.attributes?.mobileBanner?.data?.attributes)} />
</span>
</div>
<div className="d-table">
......@@ -144,57 +68,15 @@ const Banner = () => {
<div className="slider-text">
<div className="banner-title">
<div className="banner-txt">
<h1>Lorem ipsum dolor sit amet</h1>
<div className="title">WELCOME TO THE WORLD OF TRAVEL</div>
<h1>{data?.attributes?.title}</h1>
<div className="title">{data?.attributes?.subTitle}</div>
<div className="disc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud.
{data?.attributes?.discription}
</div>
</div>
</div>
<div className="common-btn">
<a className="btn btn-primary" href="/allergic-rhinitis">
Explore Now
</a>
</div>
</div>
</div>
</div>
</motion.div>
</div>
</div>
</div>
</div>
</SwiperSlide>
<SwiperSlide>
<div className="slider-item slider-item-04">
<div className="home-banner-bg">
<span className="image-container hide-on-mobile">
<Image layout="fill" className="image img-fluid" alt="" src="/images/home-banner/04.webp" />
</span>
<span className="image-container hide-on-desktop">
<Image layout="fill" className="image img-fluid" alt="" src="/images/home-banner/04.webp" />
</span>
</div>
<div className="d-table">
<div className="d-table-cell">
<div className="container">
<motion.div variants={slideFromRight(0.4)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
<div className="row">
<div className="col-md-6">
<div className="slider-text">
<div className="banner-title">
<div className="banner-txt">
<h1>Lorem ipsum dolor sit amet</h1>
<div className="title">WELCOME TO THE WORLD OF TRAVEL</div>
<div className="disc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud.
</div>
</div>
</div>
<div className="common-btn">
<a className="btn btn-primary" href="/allergic-rhinitis">
<a className="btn btn-primary" href={data?.attributes?.exploreNowButton}>
Explore Now
</a>
</div>
......@@ -207,6 +89,9 @@ const Banner = () => {
</div>
</div>
</SwiperSlide>
);
})
}
</Swiper>
</div>
</section>
......
components/home/BrowseExperiences.js
......@@ -74,12 +74,12 @@ const BrowseExperiences = ({allActivitiesData}) => {
viewport={{ once: false, amount: 0.2 }}
>
<div className="browse-experiences-item">
<div className="img-wrapper">
<a href="/detail" className="img-wrapper">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src={cleanImage(data.attributes?.image?.data?.attributes)} />
</span>
<div className="top-rated">Top Rated</div>
</div>
</a>
<div className="info">
<div className="top-name">
<div className="title">{data?.attributes?.name}</div>
......@@ -98,7 +98,7 @@ const BrowseExperiences = ({allActivitiesData}) => {
</div>
</div>
<div className="discription">
{data.discription} <a href="">Read More</a>
<span>{data?.attributes?.description}</span> <a href="/detail">Read More</a>
</div>
<div className="price">
${data?.attributes?.pricePerPerson} <span className="off">{data?.attributes?.off}% OFF</span>
......@@ -108,7 +108,7 @@ const BrowseExperiences = ({allActivitiesData}) => {
<div className="">Includes taxes & Fees</div>
</div>
<div className="explore-now">
<Button href="/listing" variant="primary">Explore Now</Button>
<Button href="/detail" variant="primary">Explore Now</Button>
</div>
</div>
</div>
......@@ -119,12 +119,12 @@ const BrowseExperiences = ({allActivitiesData}) => {
</Swiper>
<div className="swiper-nav">
<div className="navbutton d-flex justify-content-between ">
<button className="BrowseExperiences-right arrow">
<button className="BrowseExperiences-right arrow" id="BrowseExperiences-right" aria-label="BrowseExperiences-right">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-left.svg" />
</span>
</button>
<button className="BrowseExperiences-left arrow">
<button className="BrowseExperiences-left arrow" id="BrowseExperiences-left" aria-label="BrowseExperiences-left">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-right.svg" />
</span>
......
components/home/GiftAnExperience.js
......@@ -26,7 +26,7 @@ const GiftAnExperience = () => {
<div className="col-md-6">
<div className="img">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/gift-card.png" />
<Image layout="fill" alt="" className="image img-fluid" src="/images/gift-card.webp" />
</span>
</div>
</div>
......
components/home/Home.js
......@@ -12,9 +12,11 @@ const Home = () => {
const { categories } = useSelector(state => state.categories);
const { testimonial } = useSelector(sate => sate.testimonial);
const { allActivitiesData } = useSelector(sate => sate.allActivitiesData);
console.log("categories", categories )
console.log("testimonial", testimonial )
console.log("allActivitiesData", allActivitiesData )
const { homeBanner } = useSelector(state => state.homeBanner);
console.log("homeBanner", homeBanner);
console.log("categories", categories);
console.log("testimonial", testimonial);
console.log("allActivitiesData", allActivitiesData);
const dispatch = useDispatch();
useEffect(() => {
// dispatch(getHomePage())
......@@ -22,7 +24,7 @@ const Home = () => {
return (
<Fragment>
<main>
<Banner />
<Banner homeBanner={homeBanner} />
<SearchBar />
<LetDiscover categories={categories} />
<BrowseExperiences allActivitiesData={allActivitiesData} />
......
components/home/Testimonial.js
......@@ -101,12 +101,12 @@ const Testimonial = ({ testimonial }) => {
</Swiper>
<div className="swiper-nav">
<div className="navbutton d-flex justify-content-between justify-content-md-between ">
<button className="testimonial-arrow-right arrow">
<button className="testimonial-arrow-right arrow" id="testimonial-arrow-right" aria-label="testimonial-arrow-right">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-left.svg" />
</span>
</button>
<button className="testimonial-arrow-left arrow">
<button className="testimonial-arrow-left arrow" id="testimonial-arrow-left" aria-label="testimonial-arrow-left">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-right.svg" />
</span>
......
components/user/MyWhishList.js
......@@ -94,7 +94,7 @@ const MyWhishList = () => {
<p className="other">{data.other}</p>
</div>
<div className="card-booking-footer pt-0">
<Button type="button" className="btn btn-primary btn-explore">
<Button id="exploreNow" aria-label="Explore Now" type="button" className="btn btn-primary btn-explore">
Explore Now
</Button>
</div>
......
pages/index.js
......@@ -2,6 +2,7 @@ import Home from "../components/home/Home";
import Layout from "../components/layout/Layout";
import { getActivitiesByVendor } from "../redux/actions/activityAction";
import { getAllCategories } from "../redux/actions/categoriesAction";
import { getHomeBanner } from "../redux/actions/homeBannerAction";
import { getTestimonial } from "../redux/actions/testimonialAction";
import { loadUser } from "../redux/actions/userActions";
import { wrapper } from "../redux/store";
......@@ -29,6 +30,7 @@ export const getServerSideProps = wrapper.getServerSideProps(store => async ({ r
await store.dispatch(getAllCategories())
await store.dispatch(getTestimonial())
await store.dispatch(getActivitiesByVendor())
await store.dispatch(getHomeBanner())
return {
props: {},
......
public/images/discover/01.webp 0 → 100644
No preview for this file type
public/images/discover/02.webp 0 → 100644
No preview for this file type
public/images/discover/03.webp 0 → 100644
No preview for this file type
public/images/discover/04.webp 0 → 100644
No preview for this file type
public/images/discover/05.webp 0 → 100644
No preview for this file type
public/images/discover/06.webp 0 → 100644
No preview for this file type
public/images/gift-card.webp 0 → 100644
No preview for this file type
public/images/gift-experience-bg-m.webp 0 → 100644
No preview for this file type
public/images/gift-experience-bg.webp 0 → 100644
No preview for this file type
public/images/sign-up-exp-bg-m.webp 0 → 100644
No preview for this file type
public/images/sign-up-exp-bg.webp 0 → 100644
No preview for this file type
redux/actions/homeBannerAction.js 0 → 100644
import axios from "axios";
import qs from "qs";
import { GET_HOMEBANNER_FAIL, GET_HOMEBANNER_REQUEST, GET_HOMEBANNER_SUCCESS } from "../constants/homeBannerConstants";
export const getHomeBanner = () => async dispatch => {
try {
dispatch({
type: GET_HOMEBANNER_REQUEST
});
const config = {
headers: {
"Content-Type": "application/json"
}
};
const query = {
populate: ["desktopBanner, mobileBanner"]
};
const queryString = qs.stringify(query, {
encodeValuesOnly: true
});
const response = await axios.get(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/home-banners?${queryString}`, config);
console.log("response > ", response);
dispatch({
type: GET_HOMEBANNER_SUCCESS,
payload: response.data
});
return response.data;
} catch (error) {
dispatch({
type: GET_HOMEBANNER_FAIL,
payload: error.response.data
});
}
};
redux/constants/homeBannerConstants.js 0 → 100644
export const GET_HOMEBANNER_REQUEST = "GET_HOMEBANNER_REQUEST"
export const GET_HOMEBANNER_SUCCESS = "GET_HOMEBANNER_SUCCESS"
export const GET_HOMEBANNER_FAIL = "GET_HOMEBANNER_FAIL"
export const CLEAR_ERRORS = "CLEAR_ERRORS";
\ No newline at end of file
redux/reducers/homeBannerReducer.js 0 → 100644
import { GET_HOMEBANNER_REQUEST, CLEAR_ERRORS, GET_HOMEBANNER_SUCCESS, GET_HOMEBANNER_FAIL } from "../constants/homeBannerConstants";
export const getAllHomeBannerReducer = (state = { loading: true, success: false, homeBanner: null }, action) => {
switch (action.type) {
case GET_HOMEBANNER_REQUEST:
return {
loading: true,
};
case GET_HOMEBANNER_SUCCESS:
return {
loading: false,
homeBanner: action.payload
};
case GET_HOMEBANNER_FAIL:
return {
loading: false,
error: action.payload.error.message
};
case CLEAR_ERRORS:
return {
...state,
error: null
};
default:
return state;
}
};
\ No newline at end of file
redux/reducers/reducers.js
......@@ -9,6 +9,7 @@ import { createActivityReducer, getActivitiesReducer } from "./activitiesReducer
import { getAllCategoriesReducer, getAllSubCategoriesReducer } from "./categoryReducer";
import { getAllTestimonialReducer } from "./testimonialReducer";
import { blogReducer, blogsReducer } from "./blogReducer";
import { getAllHomeBannerReducer } from "./homeBannerReducer";
const reducers = combineReducers({
townships: townshipsReducer,
......@@ -32,7 +33,8 @@ const reducers = combineReducers({
testimonial: getAllTestimonialReducer,
allActivitiesData: getActivitiesReducer,
blogs: blogsReducer,
blog: blogReducer
blog: blogReducer,
homeBanner: getAllHomeBannerReducer,
});
export default reducers;
styles/globals.css
......@@ -265,12 +265,12 @@ h6 {
position: relative;
}
.image-container>span {
.image-container > span {
position: unset !important;
/* display: inline-block !important; */
}
.image-container.d-inblock>span {
.image-container.d-inblock > span {
position: unset !important;
display: inline-block !important;
}
......@@ -474,7 +474,7 @@ header {
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;
width: 14px;
height: 22px;
......@@ -482,7 +482,7 @@ header {
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;
width: 14px;
height: 22px;
......@@ -613,12 +613,12 @@ span.form-error,
position: relative;
}
.image-container>span {
.image-container > span {
position: unset !important;
/* display: inline-block !important; */
}
.image-container.d-inblock>span {
.image-container.d-inblock > span {
position: unset !important;
display: inline-block !important;
}
......@@ -825,7 +825,7 @@ span.form-error,
user-select: none;
}
.check-container input:checked~.checkmark:after {
.check-container input:checked ~ .checkmark:after {
display: block;
}
......@@ -853,7 +853,7 @@ span.form-error,
width: 0;
}
.check-container input:checked~.checkmark {
.check-container input:checked ~ .checkmark {
background-color: #fff;
}
......@@ -1055,7 +1055,7 @@ span.form-error,
color: #808080;
}
.card-booking-content>p:last-child {
.card-booking-content > p:last-child {
margin-bottom: 0;
}
......@@ -1098,7 +1098,7 @@ span.form-error,
color: #808080;
}
.card-booking-content .description>span {
.card-booking-content .description > span {
color: #646464;
text-decoration: underline;
}
......@@ -1108,7 +1108,7 @@ span.form-error,
font-weight: 600;
}
.card-booking-content .price>span {
.card-booking-content .price > span {
font-size: 0.8rem;
color: #808080;
}
......@@ -1144,7 +1144,7 @@ span.form-error,
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-size: 14px;
line-height: 20px;
......@@ -1154,7 +1154,7 @@ span.form-error,
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-size: 16px;
line-height: 20px;
......@@ -1703,16 +1703,16 @@ span.form-error,
.statusDiv.completed,
.statusDiv.booked,
.statusDiv.active {
background-color: #F1FFEB;
border: 1px solid #5ED028;
color: #5ED028;
background-color: #f1ffeb;
border: 1px solid #5ed028;
color: #5ed028;
}
.statusDiv.cancelled,
.statusDiv.inactive {
background-color: #FFF3F2;
border: 1px solid #C6211B;
color: #C6211B;
background-color: #fff3f2;
border: 1px solid #c6211b;
color: #c6211b;
}
.actions {
......@@ -1730,7 +1730,7 @@ span.form-error,
right: 0;
background-color: #fff;
border-radius: 4px;
box-shadow: 0px 4px 4px 0px #B4B4B440;
box-shadow: 0px 4px 4px 0px #b4b4b440;
z-index: 999;
padding: 10px;
}
......@@ -1745,7 +1745,7 @@ span.form-error,
font-family: "Poppins Regular";
font-size: 14px;
line-height: 21px;
color: #1C1C1E;
color: #1c1c1e;
padding: 5px 10px;
cursor: pointer;
}
......@@ -1775,13 +1775,13 @@ span.form-error,
}
.btnAdd.btnReject {
background-color: #ECECEC !important;
background-color: #ececec !important;
color: #161616 !important;
}
.btnAdd.btnReject:focus,
.btnAdd.btnReject:hover {
border-color: #ECECEC !important;
border-color: #ececec !important;
}
.vendorDetails h4 {
......@@ -1808,17 +1808,17 @@ span.form-error,
}
.vendorDetails p.pview {
color: #0070BD;
color: #0070bd;
text-decoration: underline;
}
.vendorDetails .borderLeft {
border-left: 1px solid #C6C6C6;
border-left: 1px solid #c6c6c6;
padding-left: 3rem;
}
.vendorDetails .borderRight {
border-right: 1px solid #C6C6C6;
border-right: 1px solid #c6c6c6;
}
.mphead {
......@@ -1836,17 +1836,17 @@ span.form-error,
text-align: center;
cursor: pointer;
}
.let-discover-carousal a .image{
.let-discover-carousal a .image {
padding: 0.2rem !important;
}
.let-discover-carousal a .title {
padding: 1rem;
}
.let-discover-carousal a.active{
.let-discover-carousal a.active {
color: #000;
}
.let-discover-carousal a.active .title{
.let-discover-carousal a.active .title {
text-decoration: underline;
}
.carousal-c {
......@@ -1902,6 +1902,7 @@ span.form-error,
.browse-experiences-item .img-wrapper {
position: relative;
color: #000;
}
.top-rated {
......@@ -1945,10 +1946,20 @@ span.form-error,
color: #808080;
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 {
color: #808080;
text-decoration: underline !important;
text-align: right;
display: block;
padding-top: 4px;
}
.browse-experiences-item .info .price {
......@@ -1977,23 +1988,25 @@ span.form-error,
padding-left: 1rem;
padding-right: 1rem;
}
.btn-outline-secondary:hover{
background: #0070BD;
}
.btn-center {
text-align: center;
padding: 2rem 0;
}
.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;
background-size: 100%;
object-fit: cover;
padding: 4rem;
}
.gift-an-experience-inner .img .image{
.gift-an-experience-inner .img .image {
display: block;
animation: scale2 4s infinite;
transition: all .6s ease-out;
transition: all 0.6s ease-out;
overflow: hidden;
}
.gift-an-experience-inner .content .title {
......@@ -2015,7 +2028,7 @@ span.form-error,
text-align: center;
padding: 0 15rem;
}
.testimonial-item .image{
.testimonial-item .image {
padding: 0.2rem !important;
}
......@@ -2048,7 +2061,7 @@ span.form-error,
}
.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%;
object-fit: cover;
padding: 4rem;
......@@ -2198,7 +2211,8 @@ footer hr {
/* padding: 1rem; */
}
.accordion-filter {}
.accordion-filter {
}
.accordion-filter .accordion-button:not(.collapsed) {
background: transparent;
......@@ -2464,7 +2478,7 @@ footer hr {
line-height: 2.5rem;
}
.product-info .price>span {
.product-info .price > span {
color: #808080;
font-size: 14px;
}
......@@ -2475,16 +2489,15 @@ footer hr {
margin-bottom: 0.5rem;
}
.product-info .location>span {
.product-info .location > span {
color: #808080;
font-size: 16px;
}
.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);
/* background-color: transparent; */
transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-row {
padding: 2rem 0;
......@@ -2516,7 +2529,7 @@ footer hr {
max-height: 100%;
}
.breadcrumb-item+.breadcrumb-item::before {
.breadcrumb-item + .breadcrumb-item::before {
content: "";
background: url(/images/icons/arrow-right-grey.svg) no-repeat;
width: 24px;
......@@ -2546,7 +2559,7 @@ footer hr {
margin: 0.5rem;
}
.availability-wrappper li>span {
.availability-wrappper li > span {
width: 30px;
display: block;
margin-right: 10px;
......@@ -2627,7 +2640,7 @@ footer hr {
margin-bottom: 2rem;
}
.guest-reviews-session>.container {
.guest-reviews-session > .container {
border-top: 1px solid #c9c9c9;
padding-top: 3rem;
}
......@@ -2734,18 +2747,18 @@ footer hr {
border: 1px solid #000;
border-radius: 10px;
}
.testimonial-session .rating{
.testimonial-session .rating {
margin-bottom: 0.5rem;
}
.testimonial-session .rating .star-ratings svg{
.testimonial-session .rating .star-ratings svg {
width: 33px !important;
height: 33px !important;
}
.sub-categories{
.sub-categories {
display: flex;
align-items: center;
}
.sub-categories a{
.sub-categories a {
cursor: pointer;
display: flex;
align-items: center;
......@@ -2758,19 +2771,19 @@ footer hr {
padding-right: 1.5rem;
transition-property: all;
transition-timing-function: cubic-bezier(.4,0,.2,1);
transition-duration: .15s;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 0.15s;
}
.sub-categories a .image-container{
.sub-categories a .image-container {
width: 20px;
display: inline-block;
margin-left: 0.5rem;
margin-right: -0.8rem;
}
.graph{
.graph {
padding-top: 3rem;
}
.graph .graph-price{
.graph .graph-price {
display: flex;
align-items: center;
justify-content: space-between;
......@@ -2788,25 +2801,22 @@ footer hr {
box-shadow: 1px 1px 6px #c1c1c1;
}
.graph :where(.css-dev-only-do-not-override-1kuana8).ant-slider:hover .ant-slider-track {
background-color: #0070BD;
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;
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;
background-color: #a1a1a1;
}
.graph :where(.css-dev-only-do-not-override-1kuana8).ant-slider .ant-slider-track {
background-color: #0070BD;
background-color: #0070bd;
}
.box-01 .inner .price .sub-text{
color: #D1D1D1;
.box-01 .inner .price .sub-text {
color: #d1d1d1;
}
@media (min-width: 992px) {
.navbar-expand-lg .navbar-nav .nav-link {
margin: 0 2rem;
......@@ -2875,7 +2885,7 @@ footer hr {
background: transparent;
}
.swiper-nav button .image-container>span {
.swiper-nav button .image-container > span {
width: 14px !important;
}
......@@ -2905,14 +2915,14 @@ footer hr {
margin-top: -20px;
margin-bottom: 5rem;
}
.page-title-area .banner-bg .image-container{
.page-title-area .banner-bg .image-container {
height: 100%;
display: block;
}
.page-title-area .banner-bg .image-container>span{
.page-title-area .banner-bg .image-container > span {
height: 100% !important;
}
.page-title-area .banner-bg .image{
.page-title-area .banner-bg .image {
object-fit: cover;
}
.page-title-one {
......@@ -3071,7 +3081,7 @@ footer hr {
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-horizontal>.swiper-pagination-bullets,
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
bottom: -5px !important;
}
......@@ -3426,7 +3436,7 @@ footer hr {
display: inline-block;
}
.tooltip-btn:hover+.tooltips {
.tooltip-btn:hover + .tooltips {
display: block;
}
......@@ -3473,17 +3483,17 @@ input:disabled {
border-color: rgba(118, 118, 118, 0.3) !important;
}
img {
transition: all .6s ease-out;
transition: all 0.6s ease-out;
}
img:hover {
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;
animation: scale1 4s infinite;
transition: all .6s ease-out;
transition: all 0.6s ease-out;
overflow: hidden;
padding: 0.1rem !important;
}
......@@ -3514,17 +3524,17 @@ img:hover {
transform: scale(1);
}
}
.get-in-touch-session .rt-banner .image{
.get-in-touch-session .rt-banner .image {
display: block;
animation: scale2 4s infinite;
transition: all .6s ease-out;
transition: all 0.6s ease-out;
overflow: hidden;
padding: 1.5rem !important;
}
.founder-session .f-img .image{
.founder-session .f-img .image {
display: block;
animation: scale2 4s infinite;
transition: all .6s ease-out;
transition: all 0.6s ease-out;
overflow: hidden;
}
......@@ -3706,7 +3716,7 @@ img:hover {
top: 40%;
}
.swiper-nav button .image-container>span {
.swiper-nav button .image-container > span {
width: 10px !important;
}
......@@ -3743,7 +3753,7 @@ img:hover {
}
.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%;
object-fit: cover;
padding: 1rem;
......@@ -3771,7 +3781,7 @@ img:hover {
.gift-an-experience-inner {
padding: 1rem;
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 {
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!