Skip to content

Jay Mehta / zango-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 5ff3e0ee by jaymehta
Options

.

2 parents d56cc26f eb6dc002
Expand all
Inline Side-by-side
Showing 90 changed files with 2100 additions and 304 deletions
components/about-us/AboutUs.js 0 → 100644
import React from 'react'
import MissionVision from './MissionVision'
import Offers from './Offers'
import Founder from './Founder'
import OurMembers from './OurMembers'
import OurPartners from './OurPartners'
import SignUpToExperienceOurPlatform from '../home/SignUpToExperienceOurPlatform'
import PageBanner from './PageBanner.js'
const AboutUs = () => {
return (
<>
<PageBanner />
<MissionVision />
<Offers />
<Founder />
<OurMembers />
<OurPartners />
<SignUpToExperienceOurPlatform />
</>
)
}
export default AboutUs
\ No newline at end of file
components/about-us/Founder.js 0 → 100644
import Image from 'next/image'
import React from 'react'
import { fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvariants.js";
import { motion } from "framer-motion";
const Founder = () => {
return (
<section className='founder-session'>
<div className='container'>
<div className='row'>
<div className='col-12'>
<div className='founder-inner'>
<div className='row align-items-center'>
<div className='col-md-6 second-o'>
<span className='image-container f-img'>
<Image layout='fill' className='image img fluid' src="/images/founder.png" />
</span>
</div>
<div className='col-md-6 first-o'>
<div className='founder-detail'>
<div className="head-btn">
<motion.div variants={slideFromRight(0.4)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
<div className="head01">
<h2>What Our Founder Says</h2>
</div>
<div className='title'>Martin Madden </div>
<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>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. </p>
</motion.div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
)
}
export default Founder
\ No newline at end of file
components/about-us/MissionVision.js 0 → 100644
import React from "react";
import { fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvariants.js";
import { motion } from "framer-motion";
import { Button } from "react-bootstrap";
import Image from "next/image.js";
const MissionVision = () => {
return (
<section className="mission-vision-session">
<div className="container">
<div className="row">
<div className="col-md-8">
<div className="row mb-3">
<div className="col-12">
<div className="head-btn">
<motion.div variants={slideFromRight(0.4)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
<div className="head01">
<div className="title">Let’s</div>
<h2>Make it easier for everyone to experience the world.</h2>
</div>
</motion.div>
</div>
</div>
</div>
<div className="row">
<div className="col-12">
<div className="our-mission">
<div className="row mb-4">
<div className="col-2">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/our-mission.svg" />
</span>
</div>
<div className="col-10">
<div className="inner">
<div className="title">Our Mission</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>
<div className="row">
<div className="col-2">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/our-vision.svg" />
</span>
</div>
<div className="col-10">
<div className="inner">
<div className="title">Our Vision</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>
</div>
</div>
</div>
</div>
<div className="col-md-4">
<div className="img-banner">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/mission-vision-img.png" />
</span>
</div>
</div>
</div>
</div>
</section>
);
};
export default MissionVision;
components/about-us/Offers.js 0 → 100644
import React from "react";
import { fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvariants.js";
import { motion } from "framer-motion";
import Image from "next/image.js";
const Offers = () => {
return (
<section className="offers-session">
<div className="container">
<div className="row">
<div className="col-12">
<div className="offers-wrapper">
<div className="row align-items-center">
<div className="col-md-2">
<div className="head-btn">
<motion.div variants={slideFromRight(0.4)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
<div className="head01">
<div className="title">What Zango </div>
<h2>Offers</h2>
</div>
</motion.div>
</div>
</div>
<div className="col-md-4">
<div className="offers-session-item">
<div className="head">
<div className="img">
<span className="image-container">
<Image layout="fill" className="image img-fluid" alt="" src="/images/icons/holidays_icon.svg" />
</span>
</div>
<div className="title">Instant confirmation</div>
</div>
<div className="disc">At Zango, every reservation is instantly confirmed. Once you’ve found your perfect stay, a few clicks are all it takes.</div>
</div>
</div>
<div className="col-md-3">
<div className="offers-session-item">
<div className="head">
<div className="img">
<span className="image-container">
<Image layout="fill" className="image img-fluid" alt="" src="/images/icons/holidays_icon.svg" />
</span>
</div>
<div className="title">Instant confirmation</div>
</div>
<div className="disc">At Zango, every reservation is instantly confirmed. Once you’ve found your perfect stay, a few clicks are all it takes.</div>
</div>
</div>
<div className="col-md-3">
<div className="offers-session-item last">
<div className="head">
<div className="img">
<span className="image-container">
<Image layout="fill" className="image img-fluid" alt="" src="/images/icons/holidays_icon.svg" />
</span>
</div>
<div className="title">Instant confirmation</div>
</div>
<div className="disc">At Zango, every reservation is instantly confirmed. Once you’ve found your perfect stay, a few clicks are all it takes.</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
);
};
export default Offers;
components/about-us/OurMembers.js 0 → 100644
import React from "react";
import { fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvariants.js";
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Autoplay, Pagination } from "swiper/modules";
import { motion } from "framer-motion";
// Import Swiper styles
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";
import Image from "next/image.js";
const OurMembers = () => {
const ourMembersData = [
{
image: "/images/our-members/01.png",
name: "Dave Smith",
disc: "Lorem ipsum dolor sit amet, "
},
{
image: "/images/our-members/02.png",
name: "Silva Johnson",
disc: "Lorem ipsum dolor sit amet, "
},
{
image: "/images/our-members/03.png",
name: "Will Miller",
disc: "Lorem ipsum dolor sit amet, "
},
{
image: "/images/our-members/04.png",
name: "Noah Jones",
disc: "Lorem ipsum dolor sit amet, "
}
];
return (
<section className="our-members-session">
<div className="container">
<div className="row">
<div className="col-12">
<div className="head-btn">
<motion.div variants={slideFromRight(0.4)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
<div className="head01">
<div className="title">Our</div>
<h2>Members</h2>
</div>
</motion.div>
</div>
</div>
</div>
<div className="row">
<div className="col-12 position-relative">
<Swiper
slidesPerView={1}
loop={false}
spaceBetween={10}
navigation={{ nextEl: ".aboutus-arrow-left", prevEl: ".aboutus-arrow-right" }}
pagination={{
clickable: true
}}
autoHeight={true}
breakpoints={{
640: {
slidesPerView: 1,
spaceBetween: 20,
autoplay: true
},
768: {
slidesPerView: 4,
spaceBetween: 40
},
1024: {
slidesPerView: 4,
spaceBetween: 40
}
}}
modules={[Navigation, Autoplay, Pagination]}
className="mySwiper01 mySwiper02"
>
{ourMembersData &&
ourMembersData.map((data, index) => {
return (
<SwiperSlide>
<motion.div
variants={zoomIn("left", 0.3)}
initial={"hidden"}
whileInView={"show"}
viewport={{ once: false, amount: 0.2 }}
>
<div className="our-member-item">
<div className="img">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src={data.image} />
</span>
</div>
<div className="details">
<div className="name"> {data.name}</div>
<div className="disc"> {data.disc} </div>
</div>
</div>
</motion.div>
</SwiperSlide>
);
})}
</Swiper>
<div className="swiper-nav">
<div className="navbutton d-flex justify-content-between ">
<button className="aboutus-arrow-right arrow">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-left.svg" />
</span>
</button>
<button className="aboutus-arrow-left arrow">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-right.svg" />
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</section>
);
};
export default OurMembers;
components/about-us/OurPartners.js 0 → 100644
import React from "react";
import { fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvariants.js";
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Autoplay } from "swiper/modules";
import { motion } from "framer-motion";
// Import Swiper styles
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";
import Image from "next/image.js";
const OurPartners = () => {
const ourPartnersData = [
{
image: "/images/our-partners/01.svg"
},
{
image: "/images/our-partners/01.svg"
},
{
image: "/images/our-partners/01.svg"
},
{
image: "/images/our-partners/01.svg"
}
];
return (
<section className="our-partners-session">
<div className="container">
<div className="row">
<div className="col-12">
<div className="head-btn">
<motion.div variants={slideFromRight(0.4)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
<div className="head01">
<div className="title">Our</div>
<h2>Partners</h2>
</div>
</motion.div>
</div>
</div>
</div>
<div className="row">
<div className="col-12 position-relative">
<Swiper
slidesPerView={1}
loop={false}
spaceBetween={10}
navigation={{ nextEl: ".arrow-left-op", prevEl: ".arrow-right-op" }}
breakpoints={{
640: {
slidesPerView: 1,
spaceBetween: 20,
autoplay: true
},
768: {
slidesPerView: 4,
spaceBetween: 40
},
1024: {
slidesPerView: 4,
spaceBetween: 40
}
}}
modules={[Navigation, Autoplay]}
className="mySwiper01 mySwiper02"
>
{ourPartnersData &&
ourPartnersData.map((data, index) => {
return (
<SwiperSlide>
<motion.div
variants={zoomIn("left", 0.3)}
initial={"hidden"}
whileInView={"show"}
viewport={{ once: false, amount: 0.2 }}
>
<div className="our-partners-item">
<div className="img">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src={data.image} />
</span>
</div>
</div>
</motion.div>
</SwiperSlide>
);
})}
</Swiper>
<div className="swiper-nav">
<div className="navbutton d-flex justify-content-between ">
<button className="arrow-right-op arrow">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-left.svg" />
</span>
</button>
<button className="arrow-left-op arrow">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-right.svg" />
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</section>
);
};
export default OurPartners;
components/about-us/PageBanner.js 0 → 100644
import Image from "next/image";
import React from "react";
import { fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvariants.js";
import { motion } from "framer-motion";
const PageBanner = () => {
return (
<>
<div className="page-title-area">
<div className="banner-bg">
<span className="image-container hide-on-mobile">
<Image layout="fill" className="image img-fluid" alt="" src="/images/banner/about-us.png" />
</span>
<span className="image-container hide-on-desktop">
<Image layout="fill" className="image img-fluid" alt="" src="/images/banner/about-us-m.png" />
</span>
</div>
<div className="d-table">
<div className="d-table-cell">
<div className="page-title-item">
<div className="container-fluid">
<div className="row">
<div className="col-12">
<motion.div variants={fadeIn(0.4)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
<h1>ABOUT US</h1>
</motion.div>
</div>
</div>
</div>
{/* <ul>
<li>
<Link href={homePageUrl}>{homePageText}</Link>
</li>
<li className="active">{activePageText}</li>
</ul> */}
</div>
</div>
</div>
</div>
</>
);
};
export default PageBanner;
components/animationvariants.js 0 → 100644
export const fadeIn = (direction, delay) => {
return {
hidden: {
y: direction === "up" ? 40 : direction === "down" ? -40 : 0,
x: direction === "left" ? 40 : direction === "right" ? -40 : 0,
opacity: 0,
},
show: {
y: 0,
x: 0,
opacity: 1,
transition: {
type: "tween",
duration: 0.5,
delay: delay,
ease: [0.25, 0.25, 0.25, 0.75],
},
},
};
};
export const zoomIn = (direction, delay) => {
return {
hidden: {
y: direction === "up" ? 40 : direction === "down" ? -40 : 0,
x: direction === "left" ? 40 : direction === "right" ? -40 : 0,
opacity: 0,
scale: 0.6,
},
show: {
y: 0,
x: 0,
opacity: 1,
scale: 1,
transition: {
type: "tween",
duration: 0.6,
delay: delay,
ease: [0.25, 0.25, 0.25, 0.75],
},
},
};
};
export const slideFromLeft = (delay) => {
return {
hidden: {
x: -90,
opacity: 0,
},
show: {
x: 0,
opacity: 1,
transition: {
type: "tween",
duration: 0.5,
delay: delay,
ease: [0.25, 0.25, 0.25, 0.75],
},
},
};
};
export const slideFromRight = (delay) => {
return {
hidden: {
x: 90,
opacity: 0,
},
show: {
x: 0,
opacity: 1,
transition: {
type: "tween",
duration: 0.5,
delay: delay,
ease: [0.25, 0.25, 0.25, 0.75],
},
},
};
};
\ No newline at end of file
components/blog-details/BlogDetails.js 0 → 100644
import React from 'react'
import PageBanner from './PageBanner'
import BlogsDetailInner from './BlogsDetailInner'
import MostReadBlogs from './MostReadBlogs'
const BlogDetails = () => {
return (
<>
<PageBanner />
<BlogsDetailInner />
<MostReadBlogs />
</>
)
}
export default BlogDetails
components/blog-details/BlogsDetailInner.js 0 → 100644
import Image from 'next/image'
import React from 'react'
const BlogsDetailInner = () => {
return (
<section className='blog-detail-inner-session'>
<div className='container'>
<div className='row align-items-center mb-3'>
<div className='col-md-6'>
<div className='profile'>
<span className='image-container'>
<Image layout='fill' alt='' className='image img-fluid' src="/images/blog-pic.png" />
</span>
<div className='name'>By John Smith</div>
</div>
</div>
<div className='col-md-6'>
<div className='date'>
<span className='image-container'>
<Image layout='fill' alt='' className='image img-fluid' src="/images/icons/calendar.svg" />
</span>
<div className=''>27th Jan 2024</div>
</div>
</div>
</div>
<div className='row'>
<div className='col-12'>
<ul className='flag-list'>
<li>
<a href="">Adventure</a>
</li>
<li>
<a href="">Fun</a>
</li>
<li>
<a href="">Lorem Ipsum</a>
</li>
</ul>
</div>
</div>
<div className='row'>
<div className='col-12'>
<h2>13 MOST Unique Places to Stay in Washington State</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>
<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>
</section>
)
}
export default BlogsDetailInner
components/blog-details/MostReadBlogs.js 0 → 100644
import React from "react";
import { fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvariants.js";
import { motion } from "framer-motion";
import { Button } from "react-bootstrap";
import { Swiper, SwiperSlide } from "swiper/react";
// import {BlogData} from "../blogs/BlogsItem"
import { Navigation, Autoplay } from "swiper/modules";
// Import Swiper styles
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";
import { BlogData } from "../blogs/BlogsItem.js";
import Image from "next/image.js";
const MostReadBlogs = () => {
return (
<section className="most-read-blogs-session">
<div className="container">
<div className="row">
<div className="col-12">
<div className="head-btn">
<motion.div variants={slideFromRight(0.4)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
<div className="head01">
<div className="title">Most Read</div>
<h2>Blogs</h2>
</div>
</motion.div>
<div className="view-all-btn">
<Button variant="primary">View All</Button>
</div>
</div>
</div>
</div>
<div className="row">
<div className="col-12 position-relative">
<Swiper
slidesPerView={1}
// autoplay={{
// delay: 2500,
// disableOnInteraction: false
// }}
// spaceBetween={10}
navigation={{ nextEl: ".most-read-blog-arrow-left", prevEl: ".most-read-blog-arrow-right" }}
breakpoints={{
640: {
slidesPerView: 1,
spaceBetween: 20
},
768: {
slidesPerView: 2,
spaceBetween: 40
},
1024: {
slidesPerView: 3,
spaceBetween: 20
}
}}
modules={[Navigation, Autoplay]}
className="mySwiper01 mySwiper02"
>
{BlogData &&
BlogData.map(data => {
return (
<SwiperSlide>
<motion.div
variants={zoomIn("left", 0.3)}
initial={"hidden"}
whileInView={"show"}
viewport={{ once: false, amount: 0.2 }}
>
<div className="blog-item">
<div className="img-wrapper">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src={data.image} />
</span>
<div className="top-rated">{data.flag}</div>
</div>
<div className="info">
<div className="read-row">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/clock.svg" />
</span>
<div className="">{data.read}</div>
</div>
<div className="title">{data.title}</div>
<div className="discription">{data.discription}</div>
<div className="read-more">
<Button href="/listing" variant="primary">
Read More
</Button>
</div>
</div>
</div>
</motion.div>
</SwiperSlide>
);
})}
</Swiper>
<div className="swiper-nav">
<div className="navbutton d-flex justify-content-between ">
<button className="most-read-blog-arrow-right arrow">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-left.svg" />
</span>
</button>
<button className="most-read-blog-arrow-left arrow">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-right.svg" />
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</section>
);
};
export default MostReadBlogs;
components/blog-details/PageBanner.js 0 → 100644
import Image from "next/image";
import React from "react";
import { fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvariants.js";
import { motion } from "framer-motion";
const PageBanner = () => {
return (
<>
<div className="page-title-area">
<div className="banner-bg">
<span className="image-container hide-on-mobile">
<Image layout="fill" className="image img-fluid" alt="" src="/images/blogs/01.png" />
</span>
<span className="image-container hide-on-desktop">
<Image layout="fill" className="image img-fluid" alt="" src="/images/blogs/01.png" />
</span>
</div>
</div>
</>
);
};
export default PageBanner;
components/blogs/Blogs.js 0 → 100644
import React from "react";
import { fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvariants.js";
import { motion } from "framer-motion";
import BlogsItem from "./BlogsItem.js";
import PageBanner from "./PageBanner.js";
const Blogs = () => {
return (
<>
<PageBanner />
<BlogsItem />
</>
);
};
export default Blogs;
components/blogs/PageBanner.js 0 → 100644
import Image from "next/image";
import React from "react";
import { fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvariants.js";
import { motion } from "framer-motion";
const PageBanner = () => {
return (
<>
<div className="page-title-area">
<div className="banner-bg">
<span className="image-container hide-on-mobile">
<Image layout="fill" className="image img-fluid" alt="" src="/images/banner/blogs.png" />
</span>
<span className="image-container hide-on-desktop">
<Image layout="fill" className="image img-fluid" alt="" src="/images/banner/blogs-m.png" />
</span>
</div>
<div className="d-table">
<div className="d-table-cell">
<div className="page-title-item">
<div className="container-fluid">
<div className="row">
<div className="col-12">
<motion.div variants={fadeIn(0.4)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
<h1>Blogs</h1>
</motion.div>
</div>
</div>
</div>
{/* <ul>
<li>
<Link href={homePageUrl}>{homePageText}</Link>
</li>
<li className="active">{activePageText}</li>
</ul> */}
</div>
</div>
</div>
</div>
</>
);
};
export default PageBanner;
components/contact-us/ContactUs.js 0 → 100644
import React from "react";
import GetinTouch from "./GetinTouch";
import { fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvariants.js";
import { motion } from "framer-motion";
import PageBanner from "./PageBanner.js";
const ContactUs = () => {
return (
<>
<PageBanner/>
<GetinTouch />
</>
);
};
export default ContactUs;
components/contact-us/GetinTouch.js 0 → 100644
import Image from "next/image";
import React, { useState } from "react";
import { fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvariants.js";
import { motion } from "framer-motion";
import { Formik, Form, Field, ErrorMessage } from "formik";
import * as Yup from "yup";
import PhoneInput from "react-phone-input-2";
import "react-phone-input-2/lib/style.css";
const validationSchema = Yup.object().shape({
fullName: Yup.string().required("Full name is required"),
email: Yup.string().email("Invalid email").required("Email is required"),
phone: Yup.string().required("Phone number is required"),
zipCode: Yup.string().required("Zip code is required"),
message: Yup.string().required("Message is required")
});
const GetinTouch = () => {
const [phone, setPhone] = useState("");
return (
<section className="get-in-touch-session">
<div className="container">
<div className="row">
<div className="col-md-6">
<div className="row mb-3">
<div className="col-12">
<div className="head-btn">
<motion.div variants={slideFromRight(0.4)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
<div className="head01">
<div className="title">Let’s</div>
<h2>Get In Touch</h2>
</div>
</motion.div>
</div>
</div>
</div>
<div className="row">
<div className="col-12">
<Formik
initialValues={{
fullName: "",
email: "",
phone: "",
zipCode: "",
message: ""
}}
validationSchema={validationSchema}
onSubmit={(values, { setSubmitting }) => {
// Handle form submission here
console.log(values);
setSubmitting(false);
}}
>
{({ isSubmitting, values, handleChange, handleBlur, touched, errors }) => (
<Form className="form-01">
<div className="row">
<div className="col-md-6 mb-4">
<Field
className="form-control"
type="text"
name="fullName"
placeholder="Enter Your Full Name"
onChange={handleChange}
onBlur={handleBlur}
value={values.fullName}
/>
{touched.fullName && errors.fullName && <div className="text-danger">{errors.fullName}</div>}
</div>
<div className="col-md-6 mb-4">
<Field
className="form-control"
type="email"
name="email"
placeholder="Enter Your Email Address"
onChange={handleChange}
onBlur={handleBlur}
value={values.email}
/>
{touched.email && errors.email && <div className="text-danger">{errors.email}</div>}
</div>
<div className="col-md-6 mb-4">
<Field
as={PhoneInput}
inputClass="form-control"
country={"in"}
name="phone"
placeholder="Enter Your Contact Number"
onChange={phone => handleChange({ target: { name: "phone", value: phone } })}
onBlur={handleBlur}
value={values.phone}
/>
{touched.phone && errors.phone && <div className="text-danger">{errors.phone}</div>}
</div>
<div className="col-md-6 mb-4">
<Field
className="form-control"
type="text"
name="zipCode"
placeholder="Enter Your Zip Code"
onChange={handleChange}
onBlur={handleBlur}
value={values.zipCode}
/>
{touched.zipCode && errors.zipCode && <div className="text-danger">{errors.zipCode}</div>}
</div>
<div className="col-md-12 mb-4">
<Field
className="form-control"
as="textarea"
rows={7}
name="message"
placeholder="Type your message..."
onChange={handleChange}
onBlur={handleBlur}
value={values.message}
/>
{touched.message && errors.message && <div className="text-danger">{errors.message}</div>}
</div>
<div className="col-md-12">
<button className="btn btn-primary" type="submit" disabled={isSubmitting}>
Submit
</button>
</div>
</div>
</Form>
)}
</Formik>
</div>
</div>
</div>
<div className="col-md-6">
<div className="rt-banner">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/contact-us-img.png" />
</span>
</div>
</div>
</div>
</div>
</section>
);
};
export default GetinTouch;
components/contact-us/PageBanner.js 0 → 100644
import Image from "next/image";
import React from "react";
import { fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvariants.js";
import { motion } from "framer-motion";
const PageBanner = () => {
return (
<>
<div className="page-title-area">
<div className="banner-bg">
<span className="image-container hide-on-mobile">
<Image layout="fill" className="image img-fluid" alt="" src="/images/banner/contact-us.png" />
</span>
<span className="image-container hide-on-desktop">
<Image layout="fill" className="image img-fluid" alt="" src="/images/banner/contact-us-m.png" />
</span>
</div>
<div className="d-table">
<div className="d-table-cell">
<div className="page-title-item">
<div className="container-fluid">
<div className="row">
<div className="col-12">
<motion.div variants={fadeIn(0.4)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
<h1>CONTACT US</h1>
</motion.div>
</div>
</div>
</div>
{/* <ul>
<li>
<Link href={homePageUrl}>{homePageText}</Link>
</li>
<li className="active">{activePageText}</li>
</ul> */}
</div>
</div>
</div>
</div>
</>
);
};
export default PageBanner;
components/detail/DetailInfo.js
import Image from "next/image";
import React, { Fragment, useState } from "react";
import { Button } from "react-bootstrap";
import { fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvariants.js";
import { motion } from "framer-motion";
const DetailInfo = () => {
const [showInfo, setShowInfo] = useState(false);
const [showInfo, setShowInfo] = useState(false);
const [isToggled, setIsToggled] = useState(false);
const handleMouseEnter = () => {
setShowInfo(true);
};
const handleMouseLeave = () => {
setShowInfo(false);
};
const handleClick = () => {
setIsToggled(!isToggled);
};
const handleMouseEnter = () => {
setShowInfo(true);
};
const handleMouseLeave = () => {
setShowInfo(false);
};
return (
<Fragment>
<div className="row">
......@@ -20,10 +26,11 @@ const DetailInfo = () => {
<div className="hide-on-mobile">
<div className="top-row">
<div className="most-booked">Most Booked</div>
<div className="wishlist-share">
<a href="#" className="add-to-wishlist">
<a href="#" className={`add-to-wishlist ${isToggled ? "active" : ""}`} onClick={handleClick}>
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/wishlist-01.svg" />
<Image layout="fill" alt="" className="image img-fluid" src={isToggled ? "/images/icons/wishlist-01-active.svg" : "/images/icons/wishlist-01.svg"} />
</span>
</a>
<a href="#" className="add-to-forwardt">
......@@ -33,7 +40,9 @@ const DetailInfo = () => {
</a>
</div>
</div>
<div className="product-name">Edge City Climb</div>
<motion.div variants={slideFromRight(0.4)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
<div className="product-name">Edge City Climb</div>
</motion.div>
</div>
<div className="product-reviews">
<span className="rating">8.8</span>
......@@ -93,53 +102,53 @@ const DetailInfo = () => {
</div>
</div>
<div className="row hide-on-desktop">
<div className="col-12">
<ul className="availability-wrappper">
<li>
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/availability/month.svg" />
</span>
Month: All
</li>
<li>
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/availability/time.svg" />
</span>
Time: 9:45 AM - 10:00 AM
</li>
<li>
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/availability/duration.svg" />
</span>
Duration: 2-3 Hours
</li>
<li>
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/availability/contact.svg" />
</span>
Contact: 1(332) 204-8500
</li>
<li>
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/availability/date.svg" />
</span>
Date: All
</li>
<li>
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/availability/age.svg" />
</span>
Age: 13+
<div className="info-div">
<a className="image-container info" onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/info.svg" />
</a>
{showInfo && <div className="info-text">13+. Climbers aged 13-17 must be accompanied by an adult (18+)</div>}
</div>
</li>
</ul>
</div>
<div className="col-12">
<ul className="availability-wrappper">
<li>
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/availability/month.svg" />
</span>
Month: All
</li>
<li>
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/availability/time.svg" />
</span>
Time: 9:45 AM - 10:00 AM
</li>
<li>
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/availability/duration.svg" />
</span>
Duration: 2-3 Hours
</li>
<li>
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/availability/contact.svg" />
</span>
Contact: 1(332) 204-8500
</li>
<li>
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/availability/date.svg" />
</span>
Date: All
</li>
<li>
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/availability/age.svg" />
</span>
Age: 13+
<div className="info-div">
<a className="image-container info" onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/info.svg" />
</a>
{showInfo && <div className="info-text">13+. Climbers aged 13-17 must be accompanied by an adult (18+)</div>}
</div>
</li>
</ul>
</div>
</div>
</Fragment>
);
};
......
components/detail/Faqs.js
import React from "react";
import { Accordion } from "react-bootstrap";
import { fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvariants.js";
import { motion } from "framer-motion";
const Faqs = () => {
return (
<section className="faqs-session">
<div className="container">
<div className="row">
<div className="col-12">
<div className="row">
<div className="col-12">
<motion.div variants={slideFromRight(0.4)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
<div className="head-btn">
<div className="head01">
<div className="title">What others</div>
<h2>Have asked us…</h2>
</div>
</div>
</div>
</motion.div>
</div>
</div>
<div className="row">
<div className="col-12">
<Accordion defaultActiveKey="0" className="accordion-01">
<Accordion.Item eventKey="0">
<Accordion.Header>Lorem ipsum dolor sit amet, consectetur adipiscing elit ?</Accordion.Header>
<Accordion.Body>
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
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
</Accordion.Body>
</Accordion.Item>
<Accordion.Item eventKey="1">
<Accordion.Header>Lorem ipsum dolor sit amet, consectetur adipiscing elit ?</Accordion.Header>
<Accordion.Body>
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
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
</Accordion.Body>
</Accordion.Item>
</Accordion>
......
components/detail/SimilarExperiences.js
......@@ -2,9 +2,15 @@ import dynamic from "next/dynamic";
import Image from "next/image";
import React from "react";
import { Button } from "react-bootstrap";
const OwlCarousel = dynamic(() => import("react-owl-carousel"), {
ssr: false
});
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Autoplay } from "swiper/modules";
// Import Swiper styles
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";
import { fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvariants.js";
import { motion } from "framer-motion";
const SimilarExperiences = () => {
const ListingData = [
{
......@@ -81,10 +87,12 @@ const SimilarExperiences = () => {
<div className="row">
<div className="col-12">
<div className="head-btn">
<div className="head01">
<div className="title">Similar Experiences</div>
<h2>Experiences</h2>
</div>
<motion.div variants={slideFromRight(0.4)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
<div className="head01">
<div className="title">Similar Experiences</div>
<h2>Experiences</h2>
</div>
</motion.div>
<div className="view-all-btn">
<Button variant="primary">View All</Button>
</div>
......@@ -93,24 +101,42 @@ const SimilarExperiences = () => {
</div>
<div className="row">
<div className="col-12">
<div className="browse-experiences-carousal carousal-c">
<OwlCarousel
className="owl-theme owl-custom01"
margin={30}
items={4}
dots={false}
nav={true}
responsive={projects.responsive}
autoplay={false}
autoplayTimeout={5000}
center={false}
loop={false}
touchDrag={true}
<div className="browse-experiences-carousal position-relative">
<Swiper
slidesPerView={1}
// autoplay={{
// delay: 2500,
// disableOnInteraction: false
// }}
// spaceBetween={10}
navigation={{ nextEl: ".similar-experiences-arrow-left", prevEl: ".similar-experiences-arrow-right" }}
breakpoints={{
640: {
slidesPerView: 1,
spaceBetween: 20
},
768: {
slidesPerView: 2,
spaceBetween: 40
},
1024: {
slidesPerView: 4,
spaceBetween: 20
}
}}
modules={[Navigation, Autoplay]}
className="mySwiper01 mySwiper02"
>
{ListingData &&
ListingData.map(data => {
return (
<div className="item">
<SwiperSlide>
<motion.div
variants={zoomIn("left", 0.3)}
initial={"hidden"}
whileInView={"show"}
viewport={{ once: false, amount: 0.2 }}
>
<div className="browse-experiences-item">
<div className="img-wrapper">
<span className="image-container">
......@@ -146,18 +172,34 @@ const SimilarExperiences = () => {
<div className="">{data.taxes}</div>
</div>
<div className="explore-now">
<Button variant="primary">Explore Now</Button>
<Button href="/listing" variant="primary">
Explore Now
</Button>
</div>
</div>
</div>
</div>
</motion.div>
</SwiperSlide>
);
})}
</OwlCarousel>
</Swiper>
<div className="swiper-nav">
<div className="navbutton d-flex justify-content-between ">
<button className="similar-experiences-arrow-right arrow">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-left.svg" />
</span>
</button>
<button className="similar-experiences-arrow-left arrow">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-right.svg" />
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</>
......
components/home/BrowseExperiences.js
import dynamic from "next/dynamic";
import Image from "next/image";
import { fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvariants.js";
import React from "react";
import { Button } from "react-bootstrap";
const OwlCarousel = dynamic(() => import("react-owl-carousel"), {
ssr: false
});
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Autoplay } from "swiper/modules";
import { motion } from "framer-motion";
// Import Swiper styles
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";
const BrowseExperiences = () => {
const ListingData = [
{
image: "/images/Browse-Experiences/01.png",
......@@ -58,22 +65,7 @@ const BrowseExperiences = () => {
taxes: "Includes taxes & Fees"
}
];
const projects = {
responsive: {
0: {
items: 1
},
450: {
items: 1
},
600: {
items: 3
},
1000: {
items: 4
}
}
};
return (
<>
<section className="browse-experiences-session">
......@@ -81,10 +73,12 @@ const BrowseExperiences = () => {
<div className="row">
<div className="col-12">
<div className="head-btn">
<div className="head01">
<div className="title">Browse Experiences</div>
<h2>In New York</h2>
</div>
<motion.div variants={slideFromRight(0.4)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
<div className="head01">
<div className="title">Browse Experiences</div>
<h2>In New York</h2>
</div>
</motion.div>
<div className="view-all-btn">
<Button variant="primary">View All</Button>
</div>
......@@ -93,24 +87,42 @@ const BrowseExperiences = () => {
</div>
<div className="row">
<div className="col-12">
<div className="browse-experiences-carousal carousal-c">
<OwlCarousel
className="owl-theme owl-custom01"
margin={30}
items={4}
dots={false}
nav={true}
responsive={projects.responsive}
autoplay={false}
autoplayTimeout={5000}
center={false}
loop={false}
touchDrag={true}
<div className="browse-experiences-carousal position-relative">
<Swiper
slidesPerView={1}
// autoplay={{
// delay: 2500,
// disableOnInteraction: false
// }}
autoHeight={true}
navigation={{ nextEl: ".BrowseExperiences-left", prevEl: ".BrowseExperiences-right" }}
breakpoints={{
640: {
slidesPerView: 1,
spaceBetween: 20
},
768: {
slidesPerView: 2,
spaceBetween: 40
},
1024: {
slidesPerView: 4,
spaceBetween: 20
}
}}
modules={[Navigation, Autoplay]}
className="mySwiper01 mySwiper02"
>
{ListingData &&
ListingData.map(data => {
return (
<div className="item">
<SwiperSlide>
<motion.div
variants={zoomIn("left", 0.3)}
initial={"hidden"}
whileInView={"show"}
viewport={{ once: false, amount: 0.2 }}
>
<div className="browse-experiences-item">
<div className="img-wrapper">
<span className="image-container">
......@@ -146,14 +158,29 @@ const BrowseExperiences = () => {
<div className="">{data.taxes}</div>
</div>
<div className="explore-now">
<Button variant="primary">Explore Now</Button>
<Button href="/listing" variant="primary">Explore Now</Button>
</div>
</div>
</div>
</div>
</motion.div>
</SwiperSlide>
);
})}
</OwlCarousel>
</Swiper>
<div className="swiper-nav">
<div className="navbutton d-flex justify-content-between ">
<button className="BrowseExperiences-right arrow">
<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">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-right.svg" />
</span>
</button>
</div>
</div>
</div>
</div>
</div>
......
components/home/GiftAnExperience.js
import Image from "next/image";
import React from "react";
import { Button } from "react-bootstrap";
import { motion } from "framer-motion";
import { fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvariants.js";
const GiftAnExperience = () => {
return (
<>
......@@ -12,6 +13,7 @@ const GiftAnExperience = () => {
<div className="gift-an-experience-inner">
<div className="row align-items-center">
<div className="col-md-6">
<motion.div variants={zoomIn(0.4)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
<div className="content">
<div className="title">Gift An Experience For Any Occasion</div>
<div className="disc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>
......@@ -19,6 +21,7 @@ const GiftAnExperience = () => {
<Button variant="primary">Gift An Experience</Button>
</div>
</div>
</motion.div>
</div>
<div className="col-md-6">
<div className="img">
......
components/home/LetDiscover.js
import dynamic from "next/dynamic";
import Image from "next/image";
import React from "react";
import { fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvariants.js";
import { Button } from "react-bootstrap";
const OwlCarousel = dynamic(() => import("react-owl-carousel"), {
ssr: false
});
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Autoplay, Parallax } from "swiper/modules";
import { motion } from "framer-motion";
// Import Swiper styles
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";
const LetDiscover = () => {
const letDiscoverData = [
{
......@@ -46,36 +52,24 @@ const LetDiscover = () => {
{
image: "/images/discover/04.png",
title: "Wellness"
},
];
const letDiscover = {
responsive: {
0: {
items: 2,
margin: 20
},
450: {
items: 3
},
600: {
items: 5
},
1000: {
items: 6
}
}
};
];
return (
<>
<section className="let-discover-session">
<div className="container">
<div className="row">
<div className="col-12">
{/* <motion.div variants={slideFromRight(0.4)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
your text or div will come here
</motion.div> */}
<div className="head-btn">
<div className="head01">
<div className="title">Let’s </div>
<h2>Discover</h2>
</div>
<motion.div variants={slideFromRight(0.4)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
<div className="head01">
<div className="title">Let’s </div>
<h2>Discover</h2>
</div>
</motion.div>
<div className="view-all-btn">
<Button variant="primary">View All</Button>
</div>
......@@ -84,34 +78,70 @@ const LetDiscover = () => {
</div>
<div className="row">
<div className="col-12">
<div className="let-discover-carousal carousal-c">
<OwlCarousel
className="owl-theme owl-custom01"
margin={50}
items={6}
dots={false}
nav={true}
responsive={letDiscover.responsive}
autoplay={false}
autoplayTimeout={5000}
center={false}
loop={false}
touchDrag={true}
<div className="let-discover-carousal position-relative">
<Swiper
modules={[Autoplay, Navigation]}
slidesPerView={6}
// autoplay={{
// delay: 7000,
// disableOnInteraction: false,
// }}
navigation={{
nextEl: ".discover-swiper-button-next",
prevEl: ".discover-swiper-button-prev"
}}
speed={1200}
breakpoints={{
640: {
slidesPerView: 3,
spaceBetween: 20
},
768: {
slidesPerView: 4,
spaceBetween: 20
},
1024: {
slidesPerView: 6,
spaceBetween: 20
}
}}
className="mySwiper01 mySwiper02"
>
{letDiscoverData &&
letDiscoverData.map((data, index) => {
return (
<div className="item">
<SwiperSlide>
<motion.div
variants={zoomIn("left", 0.3)}
initial={"hidden"}
whileInView={"show"}
viewport={{ once: false, amount: 0.2 }}
>
<a href="">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src={data.image} />
</span>
<div className="title">{data.title}</div>
</a>
</div>
</motion.div>
</SwiperSlide>
);
})}
</OwlCarousel>
</Swiper>
<div className="swiper-nav">
<div className="navbutton d-flex justify-content-between ">
<button className="discover-swiper-button-prev arrow" aria-label="Prev">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-left.svg" />
</span>
</button>
<button className="discover-swiper-button-next arrow" aria-label="Next">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-right.svg" />
</span>
</button>
</div>
</div>
</div>
</div>
</div>
......
components/home/SignUpToExperienceOurPlatform.js
import React from 'react'
import { Button } from 'react-bootstrap'
import { motion } from "framer-motion";
import { fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvariants.js";
const SignUpToExperienceOurPlatform = () => {
return (
......@@ -8,11 +10,13 @@ const SignUpToExperienceOurPlatform = () => {
<div className='container'>
<div className='row justify-content-center'>
<div className='col-md-8'>
<motion.div variants={zoomIn(0.4)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
<div className='signUp-to-experience-our-platform'>
<div className='title'>Sign Up to experience our platform</div>
<div className='disc'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>
<div className=''><Button variant="primary">Gift An Experience</Button></div>
</div>
</motion.div>
</div>
</div>
</div>
......
components/home/Testimonial.js
import dynamic from "next/dynamic";
import Image from "next/image";
import React from "react";
const OwlCarousel = dynamic(() => import("react-owl-carousel"), {
ssr: false
});
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Autoplay } from "swiper/modules";
import { fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvariants.js";
import { motion } from "framer-motion";
// Import Swiper styles
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";
const Testimonial = () => {
const testimonialData = [
{
......@@ -15,92 +22,37 @@ const Testimonial = () => {
name: "Erika Payne, Los Angeles CA"
},
];
const projects = {
responsive: {
0: {
items: 1
},
450: {
items: 1
},
600: {
items: 1
},
1000: {
items: 1
}
}
};
return (
<>
<section className="testimonial-session">
<div className="container">
<div className="row">
<div className="col-12">
<div className="testimonial-carousal">
<OwlCarousel
className="owl-theme owl-custom01"
margin={50}
items={6}
dots={false}
nav={true}
responsive={projects.responsive}
autoplay={false}
autoplayTimeout={5000}
center={false}
loop={false}
touchDrag={true}
<div className="testimonial-carousal position-relative">
<Swiper
slidesPerView={1}
autoplay={{
delay: 9000,
disableOnInteraction: false
}}
autoHeight={true}
spaceBetween={10}
navigation={{ nextEl: ".testimonial-arrow-left", prevEl: ".testimonial-arrow-right" }}
modules={[Navigation, Autoplay]}
className="mySwiper01 mySwiper02"
>
<div className="item">
<div className="testimonial-item">
<div className="img">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/testimonial/01.png" />
</span>
</div>
<div className="rating">
<a href="">
<span className="image-container">
<Image layout="fill" className="image img-fluid" alt="" src="/images/icons/star.svg" />
</span>
</a>
<a href="">
<span className="image-container">
<Image layout="fill" className="image img-fluid" alt="" src="/images/icons/star.svg" />
</span>
</a>
<a href="">
<span className="image-container">
<Image layout="fill" className="image img-fluid" alt="" src="/images/icons/star.svg" />
</span>
</a>
<a href="">
<span className="image-container">
<Image layout="fill" className="image img-fluid" alt="" src="/images/icons/star.svg" />
</span>
</a>
<a href="">
<span className="image-container">
<Image layout="fill" className="image img-fluid" alt="" src="/images/icons/star.svg" />
</span>
</a>
{/* <a href="">
<span className='fa fa-star'>
<Image layout='fill' alt='' src="/images/icons/star.svg" />
</span>
</a> */}
</div>
<div className="disc">
“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 className="name">Erika Payne, Los Angeles CA</div>
</div>
</div>
{testimonialData &&
testimonialData.map(data => {
return (
<div className="item">
<SwiperSlide>
<motion.div
variants={zoomIn("left", 0.3)}
initial={"hidden"}
whileInView={"show"}
viewport={{ once: false, amount: 0.2 }}
>
<div className="testimonial-item">
<div className="img">
<span className="image-container">
......@@ -144,10 +96,27 @@ const Testimonial = () => {
</div>
<div className="name">{data.name}</div>
</div>
</div>
</motion.div>
</SwiperSlide>
);
})}
</OwlCarousel>
</Swiper>
<div className="swiper-nav">
<div className="navbutton d-flex justify-content-center justify-content-md-between ">
<button className="testimonial-arrow-right arrow">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-left.svg" />
</span>
</button>
<button className="testimonial-arrow-left arrow">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-right.svg" />
</span>
</button>
</div>
</div>
</div>
</div>
</div>
......
components/layout/DropdownUserProfile.js deleted 100644 → 0
import { signOut } from "next-auth/react";
import Image from "next/image";
import Link from "next/link";
import { useRouter } from "next/router";
import React, { Fragment, useEffect, useState } from "react";
import { renderImage } from "../../services/imageHandling";
const DropdownUserProfile = () => {
const router = useRouter();
const logoutHandler = () => {
signOut();
};
return (
<Fragment>
<div className="row">
<div className="col-12 col-lg-12">
<div>
<ul className="link-list">
<li>
<Link href="/personal-details">
<a>
Personal Info <i className="arrow-right"></i>
</a>
</Link>
</li>
</ul>
</div>
</div>
</div>
</Fragment>
);
};
export default DropdownUserProfile;
components/layout/Header.js
......@@ -33,7 +33,7 @@ const Header = () => {
<header className={`header_wrap ${isSticky ? "stick" : ""}`}>
<Navbar expand="lg" className="bg-body-tertiary">
<Container fluid>
<Navbar.Brand href="#">
<Navbar.Brand href="/">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/Zango-logo.svg" />
</span>
......
components/layout/VendorDashboardSidebar.js
import Image from 'next/image';
import { useRouter } from 'next/router';
import React from 'react';
import React, { useState } from 'react';
const Sidebar = ({ collapsed, toggleSidebar }) => {
const Sidebar = () => {
const router = useRouter();
const [collapsed, setCollapsed] = useState(false);
const toggleSidebar = () => {
setCollapsed(!collapsed);
};
return (
<div className={`sidebar ${collapsed ? 'collapsed' : ''}`}>
{/* <button className="toggle-btn" onClick={toggleSidebar}>
......@@ -18,13 +24,13 @@ const Sidebar = ({ collapsed, toggleSidebar }) => {
</a>
</li>
<li className={router.pathname === "/vendor/orders" ? "active" : ""}>
<a href="#">
<a href="/vendor/orders">
<Image alt="" width={22} height={15} src="/images/vendor/icon-orders.svg" />
<span>Orders</span>
</a>
</li>
<li className={router.pathname === "/vendor/activities" ? "active" : ""}>
<a href="#">
<a href="/vendor/activities">
<Image alt="" width={22} height={15} src="/images/vendor/icon-activities.svg" />
<span>Activities</span>
</a>
......
components/listing/LetDiscover.js 0 → 100644
import Image from "next/image";
import React from "react";
import {fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvariants.js";
import { Button } from "react-bootstrap";
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Autoplay } from "swiper/modules";
import { motion } from "framer-motion";
// Import Swiper styles
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";
const LetDiscover = () => {
const letDiscoverData = [
{
image: "/images/discover/01.png",
title: "All"
},
{
image: "/images/discover/02.png",
title: "Art & History"
},
{
image: "/images/discover/03.png",
title: "Experiential Dining "
},
{
image: "/images/discover/04.png",
title: "Family"
},
{
image: "/images/discover/05.png",
title: "Fitness"
},
{
image: "/images/discover/06.png",
title: "Performing Arts"
},
{
image: "/images/discover/01.png",
title: "Pop Ups"
},
{
image: "/images/discover/02.png",
title: "Tour"
},
{
image: "/images/discover/03.png",
title: "Classes"
},
{
image: "/images/discover/04.png",
title: "Wellness"
}
];
return (
<>
<section className="let-discover-session let-discover-listing-session">
<div className="container">
<div className="row">
<div className="col-12">
{/* <motion.div variants={slideFromRight(0.4)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
your text or div will come here
</motion.div> */}
<div className="head-btn">
<motion.div variants={slideFromRight(0.4)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
<div className="head01">
<div className="title">Let’s </div>
<h2>Discover</h2>
</div>
</motion.div>
</div>
</div>
</div>
<div className="row">
<div className="col-12">
<div className="let-discover-carousal position-relative">
<Swiper
slidesPerView={3}
autoplay={{
delay: 9000,
disableOnInteraction: false
}}
spaceBetween={10}
navigation={{ nextEl: ".letdiscover-arrow-left", prevEl: ".letdiscover-arrow-right" }}
breakpoints={{
640: {
slidesPerView: 3,
spaceBetween: 20
},
768: {
slidesPerView: 4,
spaceBetween: 20
},
1024: {
slidesPerView: 10,
spaceBetween: 20
}
}}
modules={[Navigation, Autoplay]}
className="mySwiper01 mySwiper02"
>
{letDiscoverData &&
letDiscoverData.map((data, index) => {
return (
<SwiperSlide>
<motion.div
variants={zoomIn("left", 0.3)}
initial={"hidden"}
whileInView={"show"}
viewport={{ once: false, amount: 0.2 }}
>
<a href="">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src={data.image} />
</span>
<div className="title">{data.title}</div>
</a>
</motion.div>
</SwiperSlide>
);
})}
</Swiper>
<div className="swiper-nav">
<div className="navbutton d-flex justify-content-between ">
<button className="letdiscover-arrow-right arrow">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-left.svg" />
</span>
</button>
<button className="letdiscover-arrow-left arrow">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-right.svg" />
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</>
);
};
export default LetDiscover;
components/listing/Listing.js
import React, { Fragment } from "react";
import LetDiscover from "../home/LetDiscover";
import ListingInner from "./ListingInner";
import SignUpToExperienceOurPlatform from "../home/SignUpToExperienceOurPlatform";
import LetDiscover from "./LetDiscover";
const Listing = () => {
return (
......
components/listing/ListingItems.js
......@@ -99,7 +99,7 @@ const ListingItems = () => {
<div className="">{data.taxes}</div>
</div>
<div className="explore-now">
<Button variant="primary">Explore Now</Button>
<Button href="/detail" variant="primary">Explore Now</Button>
</div>
</div>
</div>
......
components/login/Login.js
......@@ -24,7 +24,7 @@ const Login = props => {
<div className="row">
<div className="col-11 col-lg-4 login-div">
<div className="">
<h2>{props.type == "vendor" ? "Vendor Login" : "Login to Experience"}</h2>
<h2>{props.type == "user" ? "Login to Experience" : (props.type == "vendor" ? "Vendor Login" : "Admin Login")}</h2>
<div className="form-container">
<Formik
initialValues={{
......
components/privacy-policy/PrivacyPolicy.js 0 → 100644
import React from 'react'
const PrivacyPolicy = () => {
return (
<>
<section className='s-page-session'>
<div className='container'>
<div className='row'>
<div className='col-12'>
<h2>Privacy Policy</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>
<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>
<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>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</li>
<li> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</li>
<li> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</li>
<li> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</li>
<li> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</li>
</ul>
<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>
</section>
</>
)
}
export default PrivacyPolicy
components/terms-and-conditions/TermsAndConditions.js 0 → 100644
import React from 'react'
const TermsAndConditions = () => {
return (
<>
<section className='s-page-session'>
<div className='container'>
<div className='row'>
<div className='col-12'>
<h2>Terms & Conditions</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>
<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>
<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>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</li>
<li> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</li>
<li> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</li>
<li> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</li>
<li> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</li>
</ul>
<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>
</section>
</>
)
}
export default TermsAndConditions
components/vendor/ActivityListing.js 0 → 100644
import { Fragment } from "react";
import { Button, Image, Table } from "react-bootstrap";
import { FaFilter } from "react-icons/fa";
const ActivityListing = () => {
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9]
return (
<Fragment>
<div className="row">
<div className="col-12 col-lg-12">
<div className="rightContent">
<div className="d-flex align-items-center justify-content-between px-2 mb-2">
<div>
<h2>Activities</h2>
<p>View all the Activities</p>
</div>
<div>
<Button type="button" variant="" className="btnAdd m-0">
<Image alt="" width="16" height="16" src="/images/vendor/icon-filter.svg" className="me-2"/> Filter
</Button>
</div>
</div>
<Table responsive className="listingTable">
<thead>
<tr>
<th>
<label className="check-container mb-0 ps-2" htmlFor="checkh">
<input
type="checkbox"
id="checkh"
className="check-box"
/>
<span className="checkmark"></span>
</label>
</th>
<th>Category</th>
<th>Sub Category</th>
<th>Name</th>
<th>Location</th>
<th>Price</th>
<th>Place</th>
<th>Gift</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
{array.map((data, index) => (
<tr key={index}>
<td>
<label className="check-container mb-0 ps-2" htmlFor={`check${index}`}>
<input
type="checkbox"
id={`check${index}`}
className="check-box"
/>
<span className="checkmark"></span>
</label>
</td>
<td>Adventure</td>
<td>Ice-Skating</td>
<td>Ice-Skating in NY</td>
<td>North Avenue</td>
<td>$ 479</td>
<td>Outdoor</td>
<td>Allowed</td>
<td><Image alt="" width={20} height={20} src="/images/vendor/icon-view.svg" /></td>
<td><Image alt="" width={20} height={20} src="/images/vendor/icon-more-vertical.svg" /></td>
</tr>
))}
<tr>
<td colSpan={10}>Showing Results 10 of 1567</td>
</tr>
</tbody>
</Table>
</div>
</div>
</div>
</Fragment>
);
};
export default ActivityListing;
components/vendor/OrderListing.js 0 → 100644
import { Fragment } from "react";
import { Button, Image, Table } from "react-bootstrap";
import { FaFilter } from "react-icons/fa";
const OrderListing = () => {
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9]
return (
<Fragment>
<div className="row">
<div className="col-12 col-lg-12">
<div className="rightContent">
<div className="d-flex align-items-center justify-content-between px-2 mb-2">
<div>
<h2>Orders</h2>
<p>View all the orders</p>
</div>
<div>
<Button type="button" variant="" className="btnAdd m-0">
<Image alt="" width="16" height="16" src="/images/vendor/icon-filter.svg" className="me-2"/> Filter
</Button>
</div>
</div>
<Table responsive className="listingTable">
<thead>
<tr>
<th>
<label className="check-container mb-0 ps-2" htmlFor="checkh">
<input
type="checkbox"
id="checkh"
className="check-box"
/>
<span className="checkmark"></span>
</label>
</th>
<th>Order ID</th>
<th>Order Date</th>
<th>Items</th>
<th>Total Amount</th>
<th>Status</th>
<th></th>
</tr>
</thead>
<tbody>
{array.map((data, index) => (
<tr key={index}>
<td>
<label className="check-container mb-0 ps-2" htmlFor={`check${index}`}>
<input
type="checkbox"
id={`check${index}`}
className="check-box"
/>
<span className="checkmark"></span>
</label>
</td>
<td>ID_8797878</td>
<td>29 Jan 2024</td>
<td>Edge City Climb <span>+3more</span></td>
<td>$ 499</td>
<td><div className="statusDiv processing">Processing</div></td>
<td><Image alt="" width={20} height={20} src="/images/vendor/icon-more-vertical.svg" /></td>
</tr>
))}
<tr>
<td colSpan={7}>Showing Results 10 of 1567</td>
</tr>
</tbody>
</Table>
</div>
</div>
</div>
</Fragment>
);
};
export default OrderListing;
package.json
......@@ -14,6 +14,7 @@
"axios": "^0.27.2",
"easyinvoice": "^2.3.3",
"formik": "^2.2.9",
"framer-motion": "^11.0.14",
"mdbreact": "^5.2.0",
"next": "12.2.5",
"next-auth": "^4.10.3",
......@@ -41,6 +42,7 @@
"redux": "^4.2.0",
"redux-devtools-extension": "^2.13.9",
"redux-thunk": "^2.4.1",
"swiper": "^11.1.0",
"validator": "^13.7.0",
"yup": "^0.32.11"
},
......
pages/about-us.js 0 → 100644
import AboutUs from "../components/about-us/AboutUs";
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 AboutUsPage() {
return (
<Layout>
<AboutUs />
</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-details.js 0 → 100644
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 0 → 100644
import AboutUs from "../components/about-us/AboutUs";
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 BlogsPage() {
return (
<Layout>
<Blogs />
</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/contact-us.js 0 → 100644
import AboutUs from "../components/about-us/AboutUs";
import ContactUs from "../components/contact-us/ContactUs";
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 contactUsPage() {
return (
<Layout>
<ContactUs />
</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/gift-card.js 0 → 100644
import AboutUs from "../components/about-us/AboutUs";
import GiftCard from "../components/gift-card/GiftCard";
import Layout from "../components/layout/Layout";
import PrivacyPolicy from "../components/privacy-policy/PrivacyPolicy";
import TermsAndConditions from "../components/terms-and-conditions/TermsAndConditions";
import { loadUser } from "../redux/actions/userActions";
import { wrapper } from "../redux/store";
export default function GiftCardPage() {
return (
<Layout>
<GiftCard />
</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/privacy-policy.js 0 → 100644
import AboutUs from "../components/about-us/AboutUs";
import Layout from "../components/layout/Layout";
import PrivacyPolicy from "../components/privacy-policy/PrivacyPolicy";
import TermsAndConditions from "../components/terms-and-conditions/TermsAndConditions";
import { loadUser } from "../redux/actions/userActions";
import { wrapper } from "../redux/store";
export default function PrivacyPolicyPage() {
return (
<Layout>
<PrivacyPolicy />
</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/terms-and-conditions.js 0 → 100644
import AboutUs from "../components/about-us/AboutUs";
import Layout from "../components/layout/Layout";
import TermsAndConditions from "../components/terms-and-conditions/TermsAndConditions";
import { loadUser } from "../redux/actions/userActions";
import { wrapper } from "../redux/store";
export default function TermsAndConditionsPage() {
return (
<Layout>
<TermsAndConditions />
</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/vendor/activities/index.js 0 → 100644
import React from "react";
import Layout from "../../../components/layout/Layout";
import { wrapper } from "../../../redux/store";
import Sidebar from "../../../components/layout/VendorDashboardSidebar";
import ActivityListing from "../../../components/vendor/ActivityListing";
// import { loadUser } from "../redux/actions/userActions";
// import { wrapper } from "../redux/store";
export default function ActivityListingPage() {
return (
<Layout>
<div className="sidebarContainer">
<Sidebar />
<div className="content">
<ActivityListing />
</div>
</div>
</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(getVendorDetails())
return {
props: {},
};
});
pages/vendor/dashboard/index.js
......@@ -13,11 +13,6 @@ const VendorDashboard = () => {
const { user, error } = useSelector(state => state.loadedUser);
const router = useRouter();
console.log("user", user);
const [collapsed, setCollapsed] = useState(false);
const toggleSidebar = () => {
setCollapsed(!collapsed);
};
const ApprovalStatus = () => {
if (user) {
......@@ -77,7 +72,7 @@ const VendorDashboard = () => {
return (
<Layout>
<div className="sidebarContainer">
<Sidebar collapsed={collapsed} toggleSidebar={toggleSidebar} />
<Sidebar />
<div className="content">
<div className="row">
<ApprovalStatus />
......
pages/vendor/orders/index.js 0 → 100644
import React from "react";
import Layout from "../../../components/layout/Layout";
import { wrapper } from "../../../redux/store";
import OrderListing from "../../../components/vendor/OrderListing";
import Sidebar from "../../../components/layout/VendorDashboardSidebar";
// import { loadUser } from "../redux/actions/userActions";
// import { wrapper } from "../redux/store";
export default function OrderListingPage() {
return (
<Layout>
<div className="sidebarContainer">
<Sidebar />
<div className="content">
<OrderListing />
</div>
</div>
</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(getVendorDetails())
return {
props: {},
};
});
public/fonts/Poppins-SemiBold.ttf 0 → 100644
No preview for this file type
public/images/bg/mission-vision-bg.svg 0 → 100644
This diff could not be displayed because it is too large.
public/images/icons/arrow-left-02.svg 0 → 100644
<svg width="15" height="23" viewBox="0 0 15 23" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.5677 2.45618L3.77734 11.2466L12.5677 20.037" stroke="black" stroke-width="4" stroke-linecap="round"/>
</svg>
public/images/icons/filter-icon.svg 0 → 100644
<svg width="45" height="45" viewBox="0 0 45 45" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="44" height="44" rx="3.5" stroke="black"/>
<path d="M17.1707 28.5C17.5825 27.3348 18.6938 26.5 20 26.5C21.3062 26.5 22.4175 27.3348 22.8293 28.5H33V30.5H22.8293C22.4175 31.6652 21.3062 32.5 20 32.5C18.6938 32.5 17.5825 31.6652 17.1707 30.5H13V28.5H17.1707ZM23.1707 21.5C23.5825 20.3348 24.6938 19.5 26 19.5C27.3062 19.5 28.4175 20.3348 28.8293 21.5H33V23.5H28.8293C28.4175 24.6652 27.3062 25.5 26 25.5C24.6938 25.5 23.5825 24.6652 23.1707 23.5H13V21.5H23.1707ZM17.1707 14.5C17.5825 13.3348 18.6938 12.5 20 12.5C21.3062 12.5 22.4175 13.3348 22.8293 14.5H33V16.5H22.8293C22.4175 17.6652 21.3062 18.5 20 18.5C18.6938 18.5 17.5825 17.6652 17.1707 16.5H13V14.5H17.1707Z" fill="black"/>
</svg>
public/images/icons/wishlist-01-active.svg 0 → 100644
<svg width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.5015 5.47197C17.3399 2.92417 21.7262 3.00875 24.4601 5.74848C27.1942 8.4882 27.2881 12.853 24.7453 15.6999L14.5002 25.961L4.25532 15.6999C1.71259 12.853 1.80764 8.4813 4.54047 5.74848C7.27639 3.01256 11.6549 2.92039 14.5015 5.47197ZM22.7496 7.45554C20.9382 5.64043 18.0137 5.5668 16.1159 7.27039L14.5026 8.71842L12.8885 7.27152C10.9853 5.56555 8.06602 5.6406 6.2493 7.45731C4.4492 9.25742 4.35883 12.1405 6.01774 14.0447L14.5002 22.5406L22.9829 14.0447C24.6425 12.1398 24.5524 9.26218 22.7496 7.45554Z" fill="#D7443E"/>
<path d="M4 10.5C4.4 2.9 10.8333 5 14 7L20 4.5L23 6L25.5 10.5L24 14L14.5 23.5L13 22.5L4 12.5V10.5Z" fill="#D7443E"/>
</svg>
public/images/our-partners/01.svg 0 → 100644
<svg width="202" height="203" viewBox="0 0 202 203" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect y="0.282715" width="201.767" height="201.767" fill="url(#pattern0)"/>
<defs>
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_165_21856" transform="scale(0.002)"/>
</pattern>
<image id="image0_165_21856" width="500" height="500" xlink:href="data:image/png;base64,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"/>
</defs>
</svg>
public/images/vendor/icon-filter.svg 0 → 100644
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.17071 16C4.58254 14.8348 5.69378 14 7 14C8.3062 14 9.4175 14.8348 9.8293 16H20V18H9.8293C9.4175 19.1652 8.3062 20 7 20C5.69378 20 4.58254 19.1652 4.17071 18H0V16H4.17071ZM10.1707 9C10.5825 7.83481 11.6938 7 13 7C14.3062 7 15.4175 7.83481 15.8293 9H20V11H15.8293C15.4175 12.1652 14.3062 13 13 13C11.6938 13 10.5825 12.1652 10.1707 11H0V9H10.1707ZM4.17071 2C4.58254 0.83481 5.69378 0 7 0C8.3062 0 9.4175 0.83481 9.8293 2H20V4H9.8293C9.4175 5.16519 8.3062 6 7 6C5.69378 6 4.58254 5.16519 4.17071 4H0V2H4.17071Z" fill="white"/>
</svg>
public/images/vendor/icon-img.svg 0 → 100644
<svg width="20" height="18" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18 2H2V16L11.2923 6.70649C11.6828 6.31595 12.3159 6.31591 12.7065 6.70641L18 12.0104V2ZM0 0.9934C0 0.44476 0.45531 0 0.9918 0H19.0082C19.556 0 20 0.44495 20 0.9934V17.0066C20 17.5552 19.5447 18 19.0082 18H0.9918C0.44405 18 0 17.5551 0 17.0066V0.9934ZM6 8C4.89543 8 4 7.1046 4 6C4 4.89543 4.89543 4 6 4C7.10457 4 8 4.89543 8 6C8 7.1046 7.10457 8 6 8Z" fill="black"/>
</svg>
public/images/vendor/icon-more-vertical.svg 0 → 100644
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 20C11.45 20 10.9792 19.8042 10.5875 19.4125C10.1958 19.0208 10 18.55 10 18C10 17.45 10.1958 16.9792 10.5875 16.5875C10.9792 16.1958 11.45 16 12 16C12.55 16 13.0208 16.1958 13.4125 16.5875C13.8042 16.9792 14 17.45 14 18C14 18.55 13.8042 19.0208 13.4125 19.4125C13.0208 19.8042 12.55 20 12 20ZM12 14C11.45 14 10.9792 13.8042 10.5875 13.4125C10.1958 13.0208 10 12.55 10 12C10 11.45 10.1958 10.9792 10.5875 10.5875C10.9792 10.1958 11.45 10 12 10C12.55 10 13.0208 10.1958 13.4125 10.5875C13.8042 10.9792 14 11.45 14 12C14 12.55 13.8042 13.0208 13.4125 13.4125C13.0208 13.8042 12.55 14 12 14ZM12 8C11.45 8 10.9792 7.80417 10.5875 7.4125C10.1958 7.02083 10 6.55 10 6C10 5.45 10.1958 4.97917 10.5875 4.5875C10.9792 4.19583 11.45 4 12 4C12.55 4 13.0208 4.19583 13.4125 4.5875C13.8042 4.97917 14 5.45 14 6C14 6.55 13.8042 7.02083 13.4125 7.4125C13.0208 7.80417 12.55 8 12 8Z" fill="#686767"/>
</svg>
public/images/vendor/icon-view.svg 0 → 100644
<svg width="22" height="18" viewBox="0 0 22 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.0003 0C16.3924 0 20.8784 3.87976 21.8189 9C20.8784 14.1202 16.3924 18 11.0003 18C5.60812 18 1.12215 14.1202 0.181641 9C1.12215 3.87976 5.60812 0 11.0003 0ZM11.0003 16C15.2359 16 18.8603 13.052 19.7777 9C18.8603 4.94803 15.2359 2 11.0003 2C6.7646 2 3.14022 4.94803 2.22278 9C3.14022 13.052 6.7646 16 11.0003 16ZM11.0003 13.5C8.51498 13.5 6.50026 11.4853 6.50026 9C6.50026 6.51472 8.51498 4.5 11.0003 4.5C13.4855 4.5 15.5003 6.51472 15.5003 9C15.5003 11.4853 13.4855 13.5 11.0003 13.5ZM11.0003 11.5C12.381 11.5 13.5003 10.3807 13.5003 9C13.5003 7.6193 12.381 6.5 11.0003 6.5C9.6196 6.5 8.50026 7.6193 8.50026 9C8.50026 10.3807 9.6196 11.5 11.0003 11.5Z" fill="black"/>
</svg>
styles/fonts.css
......@@ -210,4 +210,10 @@
font-style: normal;
font-weight: 400;
src: local('Poppons Regular'), url('../public/fonts/Poppins-Regular.ttf') format('truetype');
}
@font-face {
font-family: 'Poppins SemiBold';
font-style: normal;
font-weight: 600;
src: local('Poppons SemiBold'), url('../public/fonts/Poppins-SemiBold.ttf') format('truetype');
}
\ No newline at end of file
yarn.lock
This diff could not be displayed because it is too large.
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!