Skip to content

Jay Mehta / zango-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 31b4c038 by Jyotsna
Options

conflict resolved

2 parents 36bfc536 e23a313f
Expand all
Inline Side-by-side
Showing 26 changed files with 949 additions and 94 deletions
components/detail/Detail.js 0 → 100644
import React, { Fragment } from "react";
import DetailGallery from "./DetailGallery";
import DetailInfo from "./DetailInfo";
const Detail = () => {
return (
<Fragment>
<main>
<section className="main-mt">
<div className="container mt-5">
<div className="row mb-5">
<div className="col-xl-6">
<DetailGallery></DetailGallery>
</div>
<div className="col-xl-6 listing-wrapper">
<DetailInfo></DetailInfo>
</div>
</div>
</div>
</section>
</main>
</Fragment>
);
};
export default Detail;
components/detail/DetailGallery.js 0 → 100644
import React from 'react'
import { Breadcrumb } from 'react-bootstrap'
const DetailGallery = () => {
return (
<div className="product-gallery">
<div className="row">
<div className="col-12">
<div className="breadcrumb-container">
<Breadcrumb>
<Breadcrumb.Item href="#">Home</Breadcrumb.Item>
<Breadcrumb.Item href="#">Jewellery</Breadcrumb.Item>
<Breadcrumb.Item href={`/listing?category`}>asdasdas</Breadcrumb.Item>
<Breadcrumb.Item active>Title</Breadcrumb.Item>
</Breadcrumb>
</div>
</div>
</div>
<div className="product-gallery-item">
asdasd
</div>
</div>
)
}
export default DetailGallery
\ No newline at end of file \ No newline at end of file
components/detail/DetailInfo.js 0 → 100644
import Image from "next/image";
import React, { Fragment } from "react";
import { Button } from "react-bootstrap";
const DetailInfo = () => {
return (
<Fragment>
<div className="row">
<div className="col-12">
<div className="product-info">
<div className="top-row">
<div className="most-booked">Most Booked</div>
<div className="wishlist-share">
<a href="#" className="add-to-wishlist">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/wishlist-01.svg" />
</span>
</a>
<a href="#" className="add-to-forwardt">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/forward.svg" />
</span>
</a>
</div>
</div>
<div className="product-name">
Edge City Climb
</div>
<div className="product-reviews">
<span className="rating">8.8</span>
<span className="review">1,365 Reviews</span>
<span className="star">
<a href="">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" />
</span>
</a>
<a href="">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" />
</span>
</a>
<a href="">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" />
</span>
</a>
<a href="">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" />
</span>
</a>
<a href="">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" />
</span>
</a>
</span>
</div>
<div className="">Per Person</div>
<div className="price">$185 <span>20% Off</span></div>
<div className="mb-4">
The world’s highest building ascent, City Climb allows participants to scale the outside of a skyscraper more than 1,200 feet (366 meters) above the ground, then lean out and look down from the highest outdoor platform in the city. Following that, experience The Edge, the highest outdoor sky deck in the Western Hemisphere. Height: 4.9ft - 6.7ft; Maximum Weight: 310lbs; Cannot be under the influence of alcohol.
</div>
<div className="location">Location & Address <span>(Outdoor)</span></div>
<div className="mb-2">Chelsea </div>
<div className="">30 Hudson Yards, New York, NY 10001</div>
<div className="btn-row">
<Button variant="primary me-3">Book Now</Button>
<Button variant="secondary">Gift Now <span className="image-container btn-gift">
<Image layout="fill" className="image img-fluid" src="/images/icons/gift-card-icon.svg" />
</span></Button>
</div>
</div>
</div>
</div>
</Fragment>
);
};
export default DetailInfo;
components/home/LetDiscover.js
...@@ -33,8 +33,20 @@ const LetDiscover = () => { ...@@ -33,8 +33,20 @@ const LetDiscover = () => {
}, },
{ {
image: "/images/discover/01.png", image: "/images/discover/01.png",
title: "All" title: "Pop Ups"
} },
{
image: "/images/discover/02.png",
title: "Tour"
},
{
image: "/images/discover/03.png",
title: "Classes"
},
{
image: "/images/discover/04.png",
title: "Wellness"
},
]; ];
const letDiscover = { const letDiscover = {
responsive: { responsive: {
...@@ -79,7 +91,7 @@ const LetDiscover = () => { ...@@ -79,7 +91,7 @@ const LetDiscover = () => {
items={6} items={6}
dots={false} dots={false}
nav={true} nav={true}
responsive={letDiscoverData.responsive} responsive={letDiscover.responsive}
autoplay={false} autoplay={false}
autoplayTimeout={5000} autoplayTimeout={5000}
center={false} center={false}
......
components/home/ProductItem.js 0 → 100644
import Image from "next/image";
import React from "react";
import { Button } from "react-bootstrap";
const ProductItem = () => {
const ListingData = [
{
image: "/images/Browse-Experiences/01.png",
topRated: "Top Rated",
title: "City Climb",
discription: "Lorem ipsum dolor sit amet, consectetur adipiscing elit,",
price: "200",
offPrice: "40%",
days: "For 1 Night",
taxes: "Includes taxes & Fees"
},
{
image: "/images/Browse-Experiences/02.png",
topRated: "Top Rated",
title: "City Climb",
discription: "Lorem ipsum dolor sit amet, consectetur adipiscing elit,",
price: "200",
offPrice: "40%",
days: "For 1 Night",
taxes: "Includes taxes & Fees"
},
{
image: "/images/Browse-Experiences/03.png",
topRated: "Top Rated",
title: "City Climb",
discription: "Lorem ipsum dolor sit amet, consectetur adipiscing elit,",
price: "200",
offPrice: "40%",
days: "For 1 Night",
taxes: "Includes taxes & Fees"
},
{
image: "/images/Browse-Experiences/04.png",
topRated: "Top Rated",
title: "City Climb",
discription: "Lorem ipsum dolor sit amet, consectetur adipiscing elit,",
price: "200",
offPrice: "40%",
days: "For 1 Night",
taxes: "Includes taxes & Fees"
},
{
image: "/images/Browse-Experiences/01.png",
topRated: "Top Rated",
title: "City Climb",
discription: "Lorem ipsum dolor sit amet, consectetur adipiscing elit,",
price: "200",
offPrice: "40%",
days: "For 1 Night",
taxes: "Includes taxes & Fees"
}
];
return (
<>
{ListingData &&
ListingData.map(data => {
return (
<div className="item">
<div className="browse-experiences-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.topRated}</div>
</div>
<div className="info">
<div className="top-name">
<div className="title">{data.title}</div>
<div className="rating-wishlist">
<div className="rating">
8.8
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" />
</span>
</div>
<div className="wishlist">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/wishlist.svg" />
</span>
</div>
</div>
</div>
<div className="discription">
{data.discription} <a href="">Read More</a>
</div>
<div className="price">
${data.price} <span className="off">{data.offPrice} OFF</span>
</div>
<div className="detail">
<div className="">{data.days}</div>
<div className="">{data.taxes}</div>
</div>
<div className="explore-now">
<Button variant="primary">Explore Now</Button>
</div>
</div>
</div>
</div>
);
})}
</>
);
};
export default ProductItem;
components/listing/ListingInner.js
import React from 'react' import React, { useEffect, useState } from "react";
import ListingFilter from './ListingFilter' import ListingFilter from "./ListingFilter";
import ListingItems from "./ListingItems";
import Image from "next/image";
const ListingInner = () => { const ListingInner = () => {
const [isFilterViewOpen, setIsFilterViewOpen] = useState(false);
const [isGridViewOpen, setIsGridViewOpen] = useState(false);
const [isOpen, setIsOpen] = useState(false);
const [size, setSize] = useState(768);
const toggleGridViewDropdown = () => {
setIsGridViewOpen(!isGridViewOpen);
};
const toggleFilterViewDropdown = () => {
setIsFilterViewOpen(!isFilterViewOpen);
};
const toggleDropdown = () => {
setIsOpen(!isOpen);
};
useEffect(() => {
const handleResize = () => {
// console.log("Window Width:");
setSize(window.innerWidth);
};
// Initial window width
handleResize();
// Add event listener for window resize
window.addEventListener("resize", handleResize);
// Clean up the event listener on component unmount
return () => {
window.removeEventListener("resize", handleResize);
};
}, []);
return ( return (
<> <>
<section className='listing-inner-session'> <section className="listing-inner-session">
<div className='container'> <div className="container">
<div className='row'> <div className="row">
<div className='col-md-4'> <div className="col-12">
<div className="filter-dd">
<div className="filter-view box-inner">
<a onClick={toggleFilterViewDropdown}>
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/filter-view.svg" />
</span>
</a>
{/* <div className={`inner-content ${isGridViewOpen ? "open" : ""}`}>
<div className="top-head">
<div className="">View By</div>
<div className="close-btn" onClick={toggleGridViewDropdown}>
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/close-icon.svg" />
</span>
</div>
</div>
<ul className="list-by">
<li>
<input className="form-check-labe" type="radio" id="3 Grid View" name="gridView" />
<label htmlFor="3 Grid View">3 Grid View</label>
</li>
<li>
<input className="form-check-labe" type="radio" id="4 Grid View" name="gridView" />
<label htmlFor="4 Grid View">4 Grid View</label>
</li>
</ul>
</div> */}
</div>
<div className="grid-view box-inner">
<a onClick={toggleGridViewDropdown}>
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/grid-view.svg" />
</span>
</a>
<div className={`inner-content ${isGridViewOpen ? "open" : ""}`}>
<div className="top-head">
<div className="">View By</div>
<div className="close-btn" onClick={toggleGridViewDropdown}>
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/close-icon.svg" />
</span>
</div>
</div>
<ul className="list-by">
<li>
<input className="form-check-labe" type="radio" id="3 Grid View" name="gridView" />
<label htmlFor="3 Grid View">3 Grid View</label>
</li>
<li>
<input className="form-check-labe" type="radio" id="4 Grid View" name="gridView" />
<label htmlFor="4 Grid View">4 Grid View</label>
</li>
</ul>
</div>
</div>
<div className="sort-by box-inner">
<a onClick={toggleDropdown}>
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/sort-by.svg" />
</span>
</a>
<div className={`inner-content ${isOpen ? "open" : ""}`}>
<div className="top-head">
<div className="">Sort By</div>
<div className="close-btn" onClick={toggleDropdown}>
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/close-icon.svg" />
</span>
</div>
</div>
<ul className="list-by">
<li>
<input className="form-check-labe" type="radio" id="Price - High to Low" name="sort" />
<label htmlFor="Price - High to Low">Price - High to Low</label>
</li>
<li>
<input className="form-check-labe" type="radio" id="Price - Low to High" name="sort" />
<label htmlFor="Price - Low to High">Price - Low to High</label>
</li>
<li>
<input className="form-check-labe" type="radio" id="Most Rated" name="sort" />
<label htmlFor="Most Rated">Most Rated</label>
</li>
<li>
<input className="form-check-labe" type="radio" id="Most Popular" name="sort" />
<label htmlFor="Most Popular">Most Popular</label>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div className="row ">
{ (isFilterViewOpen || size > 768) && (
<>
<div className={`col-md-3 first-block-content ${isFilterViewOpen ? "show" : ""}`}>
<ListingFilter /> <ListingFilter />
</div> </div>
<div className='col-md-4'> </>
assadasd )}
<div className="col-md-9">
<ListingItems />
</div> </div>
</div> </div>
</div> </div>
</section> </section>
</> </>
) );
} };
export default ListingInner export default ListingInner;
components/listing/ListingItems.js 0 → 100644
import Image from "next/image";
import React from "react";
import { Button } from "react-bootstrap";
const ListingItems = () => {
const ListingData = [
{
image: "/images/Browse-Experiences/01.png",
topRated: "Top Rated",
title: "City Climb",
discription: "Lorem ipsum dolor sit amet, consectetur adipiscing elit,",
price: "200",
offPrice: "40%",
days: "For 1 Night",
taxes: "Includes taxes & Fees"
},
{
image: "/images/Browse-Experiences/02.png",
topRated: "Top Rated",
title: "City Climb",
discription: "Lorem ipsum dolor sit amet, consectetur adipiscing elit,",
price: "200",
offPrice: "40%",
days: "For 1 Night",
taxes: "Includes taxes & Fees"
},
{
image: "/images/Browse-Experiences/03.png",
topRated: "Top Rated",
title: "City Climb",
discription: "Lorem ipsum dolor sit amet, consectetur adipiscing elit,",
price: "200",
offPrice: "40%",
days: "For 1 Night",
taxes: "Includes taxes & Fees"
},
{
image: "/images/Browse-Experiences/04.png",
topRated: "Top Rated",
title: "City Climb",
discription: "Lorem ipsum dolor sit amet, consectetur adipiscing elit,",
price: "200",
offPrice: "40%",
days: "For 1 Night",
taxes: "Includes taxes & Fees"
},
{
image: "/images/Browse-Experiences/01.png",
topRated: "Top Rated",
title: "City Climb",
discription: "Lorem ipsum dolor sit amet, consectetur adipiscing elit,",
price: "200",
offPrice: "40%",
days: "For 1 Night",
taxes: "Includes taxes & Fees"
}
];
return (
<>
<div className="listing-items">
<div className="row">
{ListingData &&
ListingData.map(data => {
return (
<div className="col-md-3">
<div className="item">
<div className="browse-experiences-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.topRated}</div>
</div>
<div className="info">
<div className="top-name">
<div className="title">{data.title}</div>
<div className="rating-wishlist">
<div className="rating">
8.8
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" />
</span>
</div>
<div className="wishlist">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/wishlist.svg" />
</span>
</div>
</div>
</div>
<div className="discription">
{data.discription} <a href="">Read More</a>
</div>
<div className="price">
${data.price} <span className="off">{data.offPrice} OFF</span>
</div>
<div className="detail">
<div className="">{data.days}</div>
<div className="">{data.taxes}</div>
</div>
<div className="explore-now">
<Button variant="primary">Explore Now</Button>
</div>
</div>
</div>
</div>
</div>
);
})}
</div>
</div>
</>
);
};
export default ListingItems;
pages/_document.js
...@@ -15,7 +15,7 @@ class MyDocument extends Document { ...@@ -15,7 +15,7 @@ class MyDocument extends Document {
<Head> <Head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" crossOrigin="anonymous" /> <link rel="preload" as="font" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" crossOrigin/>
<link <link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css"
rel="stylesheet" rel="stylesheet"
......
pages/detail.js 0 → 100644
import Detail from "../components/detail/Detail";
import Home from "../components/home/Home";
import Layout from "../components/layout/Layout";
import Listing from "../components/listing/Listing";
import { wrapper } from "../redux/store";
export default function DetailPage() {
/** Client side rendering, traditional API call. */
// const dispatch = useDispatch();
// useEffect(() => {
// const fetchData = async () => {
// await dispatch(getProjects({ currentPage: 1, featuredOnHome: true }));
// };
// fetchData();
// });
return (
<Layout>
<Detail />
</Layout>
);
}
/** For server side rendering */
export const getStaticProps = wrapper.getStaticProps(store => async ({ req, query }) => {
// Get the menu data.
// get the locations data.
return {
props: {},
};
});
pages/index.js
...@@ -20,7 +20,7 @@ export default function IndexPage() { ...@@ -20,7 +20,7 @@ export default function IndexPage() {
} }
/** For server side rendering */ /** For server side rendering */
export const getStaticProps = wrapper.getStaticProps(store => async ({ req, query }) => { export const getServerSideProps = wrapper.getServerSideProps(store => async ({ req, query }) => {
// Get the menu data. // Get the menu data.
// get the locations data. // get the locations data.
......
public/images/buget.svg 0 → 100644
<svg width="197" height="85" viewBox="0 0 197 85" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.604492" y="39.501" width="9.89746" height="44.9429" rx="2" fill="#D9D9D9"/>
<rect x="17.502" y="33.7051" width="9.89746" height="50.7388" rx="2" fill="#D9D9D9"/>
<rect x="34.3994" y="24.2378" width="9.89746" height="60.2061" rx="2" fill="#D9D9D9"/>
<rect x="51.2969" y="14.3843" width="9.89746" height="70.0596" rx="2" fill="#D9D9D9"/>
<rect x="68.1943" y="14.3843" width="9.89746" height="70.0596" rx="2" fill="#D9D9D9"/>
<rect x="85.0918" y="14.3843" width="9.89746" height="70.0596" rx="2" fill="#D9D9D9"/>
<rect x="101.989" y="8.06738" width="9.89746" height="76.3765" rx="2" fill="#D9D9D9"/>
<rect x="118.887" y="8.06738" width="9.89746" height="76.3765" rx="2" fill="#D9D9D9"/>
<rect x="135.784" y="0.313965" width="9.89746" height="84.1299" rx="2" fill="#D9D9D9"/>
<rect x="152.682" y="0.313965" width="9.89746" height="84.1299" rx="2" fill="#D9D9D9"/>
<rect x="169.579" y="0.313965" width="9.89746" height="84.1299" rx="2" fill="#D9D9D9"/>
<rect x="186.477" y="0.313965" width="9.89746" height="84.1299" rx="2" fill="#D9D9D9"/>
</svg>
public/images/icons/arrow-down-01.svg 0 → 100644
<svg width="11" height="7" viewBox="0 0 11 7" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.19238 1.03516L5.38183 5.22461L9.57129 1.03516" stroke="black" stroke-width="2" stroke-linecap="round"/>
</svg>
public/images/icons/arrow-right-01.svg 0 → 100644
<svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.28711 9.56006L5.47656 5.37061L1.28711 1.18115" stroke="black" stroke-width="2" stroke-linecap="round"/>
</svg>
public/images/icons/arrow-right-grey.svg 0 → 100644
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.1715 12.0007L8.22168 7.05093L9.6359 5.63672L15.9999 12.0007L9.6359 18.3646L8.22168 16.9504L13.1715 12.0007Z" fill="#808080"/>
</svg>
public/images/icons/close-icon.svg 0 → 100644
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="7.44873" cy="6.76721" r="6.5" fill="black"/>
<circle cx="7.44873" cy="6.76721" r="6.5" fill="black"/>
<path d="M9.87158 4.34656L5.0279 9.19024" stroke="white" stroke-linecap="round"/>
<path d="M9.87061 9.18906L5.02948 4.34793" stroke="white" stroke-linecap="round"/>
</svg>
public/images/icons/down-s.svg 0 → 100644
<svg width="11" height="7" viewBox="0 0 11 7" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.36035 1.0835L5.5498 5.27295L9.73926 1.0835" stroke="black" stroke-width="2" stroke-linecap="round"/>
</svg>
public/images/icons/filter-view.svg 0 → 100644
<svg width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1.05836" y="0.839605" width="27.2641" height="27.2641" rx="2.16874" stroke="black" stroke-width="0.61964"/>
<path d="M11.3883 18.1896C11.6435 17.4676 12.332 16.9503 13.1414 16.9503C13.9508 16.9503 14.6394 17.4676 14.8946 18.1896H21.1968V19.4289H14.8946C14.6394 20.1509 13.9508 20.6682 13.1414 20.6682C12.332 20.6682 11.6435 20.1509 11.3883 19.4289H8.80396V18.1896H11.3883ZM15.1061 13.8521C15.3613 13.1302 16.0499 12.6129 16.8593 12.6129C17.6686 12.6129 18.3573 13.1302 18.6124 13.8521H21.1968V15.0914H18.6124C18.3573 15.8134 17.6686 16.3307 16.8593 16.3307C16.0499 16.3307 15.3613 15.8134 15.1061 15.0914H8.80396V13.8521H15.1061ZM11.3883 9.51467C11.6435 8.79267 12.332 8.27539 13.1414 8.27539C13.9508 8.27539 14.6394 8.79267 14.8946 9.51467H21.1968V10.7539H14.8946C14.6394 11.4759 13.9508 11.9932 13.1414 11.9932C12.332 11.9932 11.6435 11.4759 11.3883 10.7539H8.80396V9.51467H11.3883Z" fill="black"/>
</svg>
public/images/icons/forward.svg 0 → 100644
<svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_165_21764)">
<path d="M12.2259 0C12.6659 0.369869 13.1017 0.744835 13.5465 1.10879C16.6467 3.64566 19.7487 6.18021 22.8499 8.7159C22.8951 8.75286 22.9362 8.79477 23 8.85341C19.4024 11.8057 15.8171 14.7481 12.1915 17.7234V12.2237C11.6065 12.3041 11.0474 12.348 10.5025 12.461C6.57422 13.2758 3.63736 15.4489 1.77922 19.0213C1.19918 20.1364 0.76923 21.3303 0.270514 22.488C0.19666 22.6595 0.122473 22.8308 0.0137514 23C0.00987202 22.9469 0.00262202 22.8937 0.0026034 22.8406C0.00206344 21.3288 -0.00338712 19.817 0.00330611 18.3053C0.0307121 12.1152 4.45783 6.80224 10.5249 5.68267C10.9949 5.59593 11.474 5.55828 11.9488 5.49811C12.022 5.48884 12.0954 5.48114 12.181 5.47129V0C12.196 0 12.2109 0 12.2259 0Z" fill="#424242"/>
</g>
<defs>
<clipPath id="clip0_165_21764">
<rect width="23" height="23" fill="white"/>
</clipPath>
</defs>
</svg>
public/images/icons/grid-view.svg 0 → 100644
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1.23145" y="1.48047" width="44" height="44" rx="3.5" stroke="black"/>
<rect x="12.7314" y="12.4805" width="10.3529" height="10.3529" rx="3" fill="black"/>
<rect x="24.3784" y="12.4805" width="10.3529" height="10.3529" rx="3" fill="black"/>
<rect x="12.7314" y="24.1275" width="10.3529" height="10.3529" rx="3" fill="black"/>
<rect x="24.3784" y="24.1275" width="10.3529" height="10.3529" rx="3" fill="black"/>
</svg>
public/images/icons/sort-by.svg 0 → 100644
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.779297" y="1.48047" width="44" height="44" rx="3.5" fill="white" stroke="black"/>
<path d="M31.2793 15.9805V27.9805H34.2793L30.2793 32.9805L26.2793 27.9805H29.2793V15.9805H31.2793ZM23.2793 29.9805V31.9805H14.2793V29.9805H23.2793ZM25.2793 22.9805V24.9805H14.2793V22.9805H25.2793ZM25.2793 15.9805V17.9805H14.2793V15.9805H25.2793Z" fill="black"/>
</svg>
public/images/icons/up-s.svg 0 → 100644
<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 7" width="11" height="7">
<title>down-s-svg</title>
<style>
.s0 { fill: none;stroke: #000000;stroke-linecap: round;stroke-width: 2 }
</style>
<path id="Layer" fill-rule="evenodd" class="s0" d="m9.7 5.3l-4.2-4.2-4.1 4.2"/>
</svg>
\ No newline at end of file \ No newline at end of file
public/images/icons/wishlist-01.svg 0 → 100644
<svg width="25" height="23" viewBox="0 0 25 23" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.5015 2.47197C15.3399 -0.0758325 19.7262 0.00875068 22.4601 2.74848C25.1942 5.4882 25.2881 9.85304 22.7453 12.6999L12.5002 22.961L2.25532 12.6999C-0.287408 9.85304 -0.19236 5.4813 2.54047 2.74848C5.27639 0.012557 9.65493 -0.0796145 12.5015 2.47197ZM20.7496 4.45554C18.9382 2.64043 16.0137 2.5668 14.1159 4.27039L12.5026 5.71842L10.8885 4.27152C8.98526 2.56555 6.06602 2.6406 4.2493 4.45731C2.4492 6.25742 2.35883 9.14049 4.01774 11.0447L12.5002 19.5406L20.9829 11.0447C22.6425 9.13976 22.5524 6.26218 20.7496 4.45554Z" fill="#424242"/>
</svg>
styles/globals.css
...@@ -1489,19 +1489,17 @@ footer hr { ...@@ -1489,19 +1489,17 @@ footer hr {
text-align: center; text-align: center;
padding: 1rem; padding: 1rem;
} }
.box-01{
.box-01 {
border-radius: 17px; border-radius: 17px;
border: 1px solid #D1D1D1; border: 1px solid #D1D1D1;
margin-bottom: 1rem;
} }
.box-01 .head{
.box-01 .head {
font-size: 20px; font-size: 20px;
line-height: 20px; line-height: 20px;
padding: 1rem; padding: 1rem;
} }
.box-01 .reset .image-container{
.box-01 .reset .image-container {
width: 22px; width: 22px;
display: inline-block; display: inline-block;
} }
...@@ -1509,6 +1507,270 @@ footer hr { ...@@ -1509,6 +1507,270 @@ footer hr {
.box-01 .reset a { .box-01 .reset a {
color: #0070BD; color: #0070BD;
} }
.box-01 .inner{
padding: 1rem;
border-top: 2px solid #D1D1D1;
}
.df-sb{
display: flex;
align-items: center;
justify-content: space-between;
/* padding: 1rem; */
}
.accordion-filter{
}
.accordion-filter .accordion-button:not(.collapsed){
background: transparent;
}
.accordion-filter .accordion-button:focus{
border: 0;
}
.accordion-button:focus{
box-shadow: none;
}
.accordion-filter.accordion-flush .accordion-item{
border: 0;
}
.data-filters-item label{
font-size: 14px;
font-weight: 300;
}
.data-filters-item label input{
margin-right: 0.2rem;
}
.data-filters-item{
margin-bottom: 0.5rem;
}
.accordion-filter.accordion-flush .accordion-item .accordion-button {
padding: 0.5rem 0;
color: #000;
}
.accordion-body{
padding: 0;
}
.accordion-button:not(.collapsed){
box-shadow: none;
}
.accordion-button::after{
background: url(/images/icons/arrow-right-01.svg) no-repeat;
}
.accordion-button:not(.collapsed)::after{
background: url(/images/icons/arrow-down-01.svg) no-repeat right center;
}
.form-select:focus{
box-shadow: none;
border-color: inherit;
}
.box-01 .form-select{
border-color: #C3C3C3;
padding: 0.575rem 2.55rem 0.575rem 0.95rem;
}
.box-01 .show-all{
background: transparent;
border: 0;
display: flex;
align-items: center;
}
.box-01 .show-all span{
font-size: 30px;
line-height: 30px;
display: inline-block;
height: 10px;
}
.time-filter{
display: flex;
justify-content: space-between;
align-items: center;
}
.time-filter .time{
position: relative;
}
.time-filter .time:first-child::after{
content: ':';
position: absolute;
right: -22px;
top: 30px;
}
.time-filter .time input{
width: 55px;
text-align: center;
}
.time-filter .time-field{
display: flex;
align-items: center;
width: 70%;
}
.time-filter .time-field .time:first-child{
margin-right: 40px;
}
.time-filter .time-field .time div:first-child{
margin-bottom: 5px;
}
.time-filter .ampm-field{
width: 30%;
padding-top: 15px;
}
.time-filter .ampm-field .ampm{
margin: 5px 0;
}
.time-filter .ampm-field .ampm input{
margin-right: 10px;
}
.listing-filter{
font-size: 14px;
}
.filter-dd{
text-align: right;
padding: 2rem 0;
display: flex;
align-items: center;
justify-content: flex-end;
}
.filter-dd a{
width: 30px;
display: inline-block;
cursor: pointer;
}
.filter-dd .box-inner{
position: relative;
}
.filter-dd .box-inner:nth-of-type(2){
margin-right: 1rem;
}
.top-head{
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #F0F0F0;
padding-bottom: 10px;
margin-bottom: 10px;
}
.filter-dd .box-inner .inner-content{
background: #fff;
box-shadow: 0px 4px 15.899999618530273px 0px rgba(0, 0, 0, 0.25);
width: 300px;
position: absolute;
right: 0;
top: 40px;
z-index: 1;
padding: 1.5rem;
display: none;
border-radius: 9px;
}
.filter-dd .box-inner .inner-content.open{
display: block;
}
.filter-dd .box-inner .inner-content .top-head .close-btn{
width: 20px;
display: inline-block;
cursor: pointer;
}
.filter-dd .box-inner .inner-content .list-by{
text-align: left;
}
.filter-dd .box-inner .inner-content .list-by li{
padding: 7px 0;
}
.filter-dd .box-inner .inner-content .list-by li input{
margin-right: 10px;
}
.filter-dd .box-inner .inner-content .list-by li label{
font-size: 14px;
}
.browse-experiences-item .img-wrapper {
height: 190px;
}
.listing-items .browse-experiences-item .img-wrapper {
height: 100%;
}
.filter-view{
display: none;
}
.product-info .wishlist-share a{
width: 25px;
display: inline-block;
}
.product-info .wishlist-share a:first-child{
margin-right: 10px;
}
.product-info .top-row{
display: flex;
align-items: center;
justify-content: space-between;
}
.product-info .top-row .most-booked{
color: #808080;
font-size: 24px;
}
.product-info .product-reviews{
display: flex;
align-items: center;
padding: 0.5rem 0 1.5rem;
}
.product-info .product-reviews .star{
display: flex;
align-items: center;
}
.product-info .product-reviews .star a{
width: 19px;
display: inline-block;
}
.product-info .product-reviews .rating{
background: #002C5F;
border-radius: 4px;
padding: 5px;
color: #fff;
margin-right: 10px;
}
.product-info .product-reviews .review{
margin-right: 10px;
}
.product-info .product-name{
font-size: 3.438rem;
line-height: 4.813rem;
font-weight: 700;
}
.product-info .price{
font-size: 2.5rem;
line-height: 2.5rem;
}
.product-info .price>span{
color: #808080;
font-size: 14px;
}
.product-info .location{
font-size: 1.5rem;
line-height: 1.5rem;
margin-bottom: 0.5rem;
}
.product-info .location>span{
color: #808080;
font-size: 16px;
}
.btn-row{
padding: 2rem 0;
}
.image-container.btn-gift{
width: 18px;
display: inline-block;
vertical-align: text-bottom;
}
.btn-secondary{
background: #F0F0F0;
border: 1px solid #AFAFAF;
color: #000;
}
.btn-secondary:hover{
background: #e0dede;
border: 1px solid #AFAFAF;
color: #000;
}
@media (min-width: 992px) { @media (min-width: 992px) {
.navbar-expand-lg .navbar-nav .nav-link { .navbar-expand-lg .navbar-nav .nav-link {
...@@ -1547,124 +1809,99 @@ footer hr { ...@@ -1547,124 +1809,99 @@ footer hr {
@media (max-width: 767px) { @media (max-width: 767px) {
footer .subscribe input { footer .subscribe input {
width: 67%; width: 67%;
} }
.footer-link h3 { .footer-link h3 {
font-size: 20px; font-size: 20px;
} }
footer .footer-link.mtp-0 { footer .footer-link.mtp-0 {
padding-top: 0; padding-top: 0;
} }
footer .footer-link { footer .footer-link {
padding-top: 2rem; padding-top: 2rem;
} }
.signUp-to-experience-our-platform .title { .signUp-to-experience-our-platform .title {
font-size: 32px; font-size: 32px;
line-height: 33px; line-height: 33px;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
.signUp-to-experience-our-platform-session{
.signUp-to-experience-our-platform-session {
background: url(../public/images/sign-up-exp-bg-m.png) no-repeat; background: url(../public/images/sign-up-exp-bg-m.png) no-repeat;
background-size: 100%; background-size: 100%;
object-fit: cover; object-fit: cover;
padding: 1rem; padding: 1rem;
color: #fff; color: #fff;
} }
.testimonial-item .name { .testimonial-item .name {
font-size: 20px; font-size: 20px;
line-height: 22px; line-height: 22px;
} }
.testimonial-item { .testimonial-item {
padding: 0 0rem; padding: 0 0rem;
} }
.gift-an-experience-inner .img{
.gift-an-experience-inner .img {
padding-top: 3rem; padding-top: 3rem;
} }
.gift-an-experience-inner .content .title { .gift-an-experience-inner .content .title {
font-size: 32px; font-size: 32px;
line-height: 35px; line-height: 35px;
} }
.gift-an-experience-inner { .gift-an-experience-inner {
padding: 1rem; padding: 1rem;
border-radius: 27px; border-radius: 27px;
background: #F6F6F6 url(/images/gift-experience-bg-m.png) no-repeat center bottom; background: #F6F6F6 url(/images/gift-experience-bg-m.png) no-repeat center bottom;
} }
.carousal-c .owl-custom01.owl-carousel .owl-nav button.owl-next { .carousal-c .owl-custom01.owl-carousel .owl-nav button.owl-next {
right: calc(-9% + 1px); right: calc(-9% + 1px);
} }
.carousal-c .owl-custom01.owl-carousel .owl-nav button.owl-prev { .carousal-c .owl-custom01.owl-carousel .owl-nav button.owl-prev {
left: calc(-9% + 1px); left: calc(-9% + 1px);
} }
.slider-item.slider-item-01 { .slider-item.slider-item-01 {
background: url(/images/home-banner/01-m.jpg) no-repeat; background: url(/images/home-banner/01-m.jpg) no-repeat;
} }
.slider-item { .slider-item {
height: 200vw; height: 200vw;
border-radius: 0 0 25px 25px; border-radius: 0 0 25px 25px;
background-position: 100% !important; background-position: 100% !important;
padding-top: 2rem; padding-top: 2rem;
} }
.slider-item .d-table {
.slider-item .d-table { display: inherit!important;
display: inherit !important; }
} .home-banner .banner-txt h1 {
.home-banner .banner-txt h1 {
font-size: 20px; font-size: 20px;
line-height: 22px; line-height: 22px;
} }
.home-banner .banner-txt .title {
.home-banner .banner-txt .title {
font-size: 32px; font-size: 32px;
line-height: 35px; line-height: 35px;
} }
.searchbar-h input {
.searchbar-h input {
font-size: 13px; font-size: 13px;
} }
.searchbar-h {
.searchbar-h {
height: 55px; height: 55px;
padding: 1rem; padding: 1rem;
} }
.searchbar-h .search-icon {
.searchbar-h .search-icon {
right: 8px; right: 8px;
top: 11px; top: 11px;
} }
.searchbar-session {
.searchbar-session {
margin-top: -33px; margin-top: -33px;
} }
.let-discover-session {
.let-discover-session {
padding: 2rem 0; padding: 2rem 0;
} }
.head01 .title {
.head01 .title {
font-size: 16px; font-size: 16px;
line-height: 18px; line-height: 18px;
} }
.head01 h2 {
.head01 h2 {
font-size: 32px; font-size: 32px;
line-height: 33px; line-height: 33px;
} }
.carousal-c {
.carousal-c {
padding: 0 1rem; padding: 0 1rem;
} }
} }
\ No newline at end of file \ No newline at end of file
yarn.lock
...@@ -1274,7 +1274,12 @@ ...@@ -1274,7 +1274,12 @@
dependencies: dependencies:
"is-in-browser" "^1.0.2" "is-in-browser" "^1.0.2"
"csstype@^2.0.0", "csstype@^2.5.2": "csstype@^2.0.0":
"integrity" "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA=="
"resolved" "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz"
"version" "2.6.20"
"csstype@^2.5.2":
"integrity" "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==" "integrity" "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA=="
"resolved" "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz" "resolved" "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz"
"version" "2.6.20" "version" "2.6.20"
...@@ -1461,7 +1466,7 @@ ...@@ -1461,7 +1466,7 @@
dependencies: dependencies:
"@babel/runtime" "^7.1.2" "@babel/runtime" "^7.1.2"
"dom-helpers@^5.0.1", "dom-helpers@^5.2.1": "dom-helpers@^5.0.1", "dom-helpers@^5.2.0", "dom-helpers@^5.2.1":
"integrity" "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==" "integrity" "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA=="
"resolved" "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz" "resolved" "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz"
"version" "5.2.1" "version" "5.2.1"
...@@ -1469,13 +1474,20 @@ ...@@ -1469,13 +1474,20 @@
"@babel/runtime" "^7.8.7" "@babel/runtime" "^7.8.7"
"csstype" "^3.0.2" "csstype" "^3.0.2"
"dom-helpers@^5.2.0": "domain-browser@^1.1.1":
"integrity" "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==" "integrity" "sha512-jnjyiM6eRyZl2H+W8Q/zLMA481hzi0eszAaBUzIVnmYVDBbnLxVNnfu1HgEBvCbL+71FrxMl3E6lpKH7Ge3OXA=="
"resolved" "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz" "resolved" "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz"
"version" "5.2.1" "version" "1.2.0"
"duplexify@^3.4.2", "duplexify@^3.6.0":
"integrity" "sha512-07z8uv2wMyS51kKhD1KsdXJg5WQ6t93RneqRxUHnskXVtlYYkLqM0gqStQZ3pj073g687jPCHrqNfCzawLYh5g=="
"resolved" "https://registry.npmjs.org/duplexify/-/duplexify-3.7.1.tgz"
"version" "3.7.1"
dependencies: dependencies:
"@babel/runtime" "^7.8.7" "end-of-stream" "^1.0.0"
"csstype" "^3.0.2" "inherits" "^2.0.1"
"readable-stream" "^2.0.0"
"stream-shift" "^1.0.0"
"domain-browser@^1.1.1": "domain-browser@^1.1.1":
"integrity" "sha512-jnjyiM6eRyZl2H+W8Q/zLMA481hzi0eszAaBUzIVnmYVDBbnLxVNnfu1HgEBvCbL+71FrxMl3E6lpKH7Ge3OXA==" "integrity" "sha512-jnjyiM6eRyZl2H+W8Q/zLMA481hzi0eszAaBUzIVnmYVDBbnLxVNnfu1HgEBvCbL+71FrxMl3E6lpKH7Ge3OXA=="
...@@ -3737,7 +3749,7 @@ ...@@ -3737,7 +3749,7 @@
"object-assign" "^4.1.1" "object-assign" "^4.1.1"
"react-is" "^16.13.1" "react-is" "^16.13.1"
"prop-types@15.7.2": "prop-types@^15.5.6", "prop-types@^15.6.0", "prop-types@^15.6.1", "prop-types@15.7.2":
"integrity" "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==" "integrity" "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ=="
"resolved" "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz" "resolved" "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz"
"version" "15.7.2" "version" "15.7.2"
...@@ -4224,10 +4236,8 @@ ...@@ -4224,10 +4236,8 @@
"version" "16.14.0" "version" "16.14.0"
dependencies: dependencies:
"loose-envify" "^1.1.0" "loose-envify" "^1.1.0"
"object-assign" "^4.1.1"
"prop-types" "^15.6.2"
"react@17.0.1": "react@^0.14.0 || ^15.0.0 || ^16.0.0", "react@^0.14.0 || ^15.0.0 || ^16.0.0-beta || ^16.0.0", "react@^15.5.4 || ^16.0.0", "react@^16.3.0", "react@^16.x", "react@0.14.x || ^15.0.0 || ^16.0.0", "react@0.14.x || ^15.0.0 || ^16.0.0 || ^17.0.0", "react@17.0.1":
"integrity" "sha512-lG9c9UuMHdcAexXtigOZLX8exLWkW0Ku29qPRU8uhF2R9BN96dLCt0psvzPLlHc5OWkgymP3qwTRgbnw5BKx3w==" "integrity" "sha512-lG9c9UuMHdcAexXtigOZLX8exLWkW0Ku29qPRU8uhF2R9BN96dLCt0psvzPLlHc5OWkgymP3qwTRgbnw5BKx3w=="
"resolved" "https://registry.npmjs.org/react/-/react-17.0.1.tgz" "resolved" "https://registry.npmjs.org/react/-/react-17.0.1.tgz"
"version" "17.0.1" "version" "17.0.1"
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!