Skip to content

Jay Mehta / zango-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 23e35806 by Ravindra Kanojiya
Options

listing page updated

1 parent 3e1d8dd9
Expand all
Inline Side-by-side
Showing 18 changed files with 662 additions and 18 deletions
components/home/LetDiscover.js
......@@ -33,8 +33,20 @@ const LetDiscover = () => {
},
{
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 = {
responsive: {
......@@ -79,7 +91,7 @@ const LetDiscover = () => {
items={6}
dots={false}
nav={true}
responsive={letDiscoverData.responsive}
responsive={letDiscover.responsive}
autoplay={false}
autoplayTimeout={5000}
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 ListingFilter from './ListingFilter'
import React, { useEffect, useState } from "react";
import ListingFilter from "./ListingFilter";
import ListingItems from "./ListingItems";
import Image from "next/image";
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 (
<>
<section className='listing-inner-session'>
<div className='container'>
<div className='row'>
<div className='col-md-4'>
<section className="listing-inner-session">
<div className="container">
<div className="row">
<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 />
</div>
<div className='col-md-4'>
assadasd
</>
)}
<div className="col-md-9">
<ListingItems />
</div>
</div>
</div>
</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 {
<Head>
<meta charset="utf-8" />
<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
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css"
rel="stylesheet"
......
pages/index.js
......@@ -20,7 +20,7 @@ export default function IndexPage() {
}
/** 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 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/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/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
styles/globals.css
......@@ -758,20 +758,210 @@ footer hr{
}
.box-01{
border-radius: 17px;
border: 1px solid #D1D1D1;
border: 2px solid #D1D1D1;
margin-bottom: 1rem;
}
.box-01 .p-all{
padding: 1rem;
}
.box-01 .head{
font-size: 20px;
line-height: 20px;
padding: 1rem;
/* padding: 1rem; */
}
.box-01 .reset a{
display: flex;
align-items: center;
}
.box-01 .reset .image-container{
width: 22px;
display: inline-block;
margin-left: 5px;
}
.box-01 .reset a{
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;
}
@media (min-width: 992px)
{
......@@ -804,6 +994,36 @@ footer hr{
}
}
@media (max-width: 767px) {
@keyframes slide-left {
0% {
max-width: 0px;
opacity: 0;
}
100% {
max-width: 100%;
opacity: 1;
}
}
.first-block-content {
animation-duration: 0.5s;
animation-name: slide-left;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
.filter-dd {
justify-content: space-between;
}
.filter-view{
display: block;
}
.grid-view{
display: none;
}
.browse-experiences-item .img-wrapper {
height: 235px;
}
footer .subscribe input {
width: 67%;
}
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!