Skip to content

Jay Mehta / zango-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 4e17bce3 by Ravindra Kanojiya
Options

added new pages

1 parent 7cbeb538
Expand all
Inline Side-by-side
Showing 75 changed files with 1841 additions and 256 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/Header.js
......@@ -32,7 +32,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/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/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
package.json
......@@ -13,6 +13,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",
......@@ -38,6 +39,7 @@
"redux": "^4.2.0",
"redux-devtools-extension": "^2.13.9",
"redux-thunk": "^2.4.1",
"swiper": "^11.0.7",
"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: {},
};
});
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>
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!