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
Inline Side-by-side
Showing 18 changed files with 1185 additions and 192 deletions
components/home/BrowseExperiences.js
...@@ -6,6 +6,58 @@ const OwlCarousel = dynamic(() => import("react-owl-carousel"), { ...@@ -6,6 +6,58 @@ const OwlCarousel = dynamic(() => import("react-owl-carousel"), {
ssr: false ssr: false
}); });
const BrowseExperiences = () => { const BrowseExperiences = () => {
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"
}
];
const projects = { const projects = {
responsive: { responsive: {
0: { 0: {
...@@ -55,184 +107,23 @@ const BrowseExperiences = () => { ...@@ -55,184 +107,23 @@ const BrowseExperiences = () => {
loop={false} loop={false}
touchDrag={true} touchDrag={true}
> >
{ListingData &&
ListingData.map(data => {
return (
<div className="item"> <div className="item">
<div className="browse-experiences-item"> <div className="browse-experiences-item">
<div className="img-wrapper"> <div className="img-wrapper">
<span className="image-container"> <span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/Browse-Experiences/01.png" /> <Image layout="fill" alt="" className="image img-fluid" src={data.image} />
</span>
<div className="top-rated">Top Rated</div>
</div>
<div className="info">
<div className="top-name">
<div className="title">City Climb</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">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, <a href="">Read More</a>
</div>
<div className="price">
$200 <span className="off">40% OFF</span>
</div>
<div className="detail">
<div>For 1 Night</div>
<div>Includes taxes & Fees</div>
</div>
<div className="explore-now">
<Button variant="primary">Explore Now</Button>
</div>
</div>
</div>
</div>
<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="/images/Browse-Experiences/02.png" />
</span>
<div className="top-rated">Top Rated</div>
</div>
<div className="info">
<div className="top-name">
<div className="title">City Climb</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">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, <a href="">Read More</a>
</div>
<div className="price">
$200 <span className="off">40% OFF</span>
</div>
<div className="detail">
<div>For 1 Night</div>
<div>Includes taxes & Fees</div>
</div>
<div className="explore-now">
<Button variant="primary">Explore Now</Button>
</div>
</div>
</div>
</div>
<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="/images/Browse-Experiences/03.png" />
</span>
<div className="top-rated">Top Rated</div>
</div>
<div className="info">
<div className="top-name">
<div className="title">City Climb</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">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, <a href="">Read More</a>
</div>
<div className="price">
$200 <span className="off">40% OFF</span>
</div>
<div className="detail">
<div>For 1 Night</div>
<div>Includes taxes & Fees</div>
</div>
<div className="explore-now">
<Button variant="primary">Explore Now</Button>
</div>
</div>
</div>
</div>
<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="/images/Browse-Experiences/04.png" />
</span>
<div className="top-rated">Top Rated</div>
</div>
<div className="info">
<div className="top-name">
<div className="title">City Climb</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">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, <a href="">Read More</a>
</div>
<div className="price">
$200 <span className="off">40% OFF</span>
</div>
<div className="detail">
<div>For 1 Night</div>
<div>Includes taxes & Fees</div>
</div>
<div className="explore-now">
<Button variant="primary">Explore Now</Button>
</div>
</div>
</div>
</div>
<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="/images/Browse-Experiences/01.png" />
</span> </span>
<div className="top-rated">Top Rated</div> <div className="top-rated">{data.topRated}</div>
</div> </div>
<div className="info"> <div className="info">
<div className="top-name"> <div className="top-name">
<div className="title">City Climb</div> <div className="title">{data.title}</div>
<div className="rating-wishlist"> <div className="rating-wishlist">
<div className="rating"> <div className="rating">
8.8{" "} 8.8
<span className="image-container"> <span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" /> <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" />
</span> </span>
...@@ -245,14 +136,14 @@ const BrowseExperiences = () => { ...@@ -245,14 +136,14 @@ const BrowseExperiences = () => {
</div> </div>
</div> </div>
<div className="discription"> <div className="discription">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, <a href="">Read More</a> {data.discription} <a href="">Read More</a>
</div> </div>
<div className="price"> <div className="price">
$200 <span className="off">40% OFF</span> ${data.price} <span className="off">{data.offPrice} OFF</span>
</div> </div>
<div className="detail"> <div className="detail">
<div>For 1 Night</div> <div className="">{data.days}</div>
<div>Includes taxes & Fees</div> <div className="">{data.taxes}</div>
</div> </div>
<div className="explore-now"> <div className="explore-now">
<Button variant="primary">Explore Now</Button> <Button variant="primary">Explore Now</Button>
...@@ -260,6 +151,8 @@ const BrowseExperiences = () => { ...@@ -260,6 +151,8 @@ const BrowseExperiences = () => {
</div> </div>
</div> </div>
</div> </div>
);
})}
</OwlCarousel> </OwlCarousel>
</div> </div>
</div> </div>
......
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/ListingFilter.js
import Image from "next/image"; import Image from "next/image";
import React from "react"; import React, { useState } from "react";
import { Accordion, Form } from "react-bootstrap";
// import upArrow from "./assets/up-arrow.png";
// import downArrow from "./assets/down-arrow.png";
import upArrow from "../../public/images/icons/up-s.svg";
// import downArrow from "../images/icons/down-s.svg";
import downArrow from "../../public/images/icons/down-s.svg";
const ListingFilter = () => { const ListingFilter = () => {
const [showContent, setShowContent] = useState(false);
const toggleContent = () => {
setShowContent(!showContent);
};
return ( return (
<> <>
<div className="listing-filter"> <div className="listing-filter">
<div className="box-01"> <div className="box-01">
<div className="df-sb"> <div className="df-sb p-all">
<div className="head">Filter By:</div> <div className="head">Filter By:</div>
<div className="reset"> <div className="reset">
<a href=""> <a href="">
...@@ -18,6 +31,449 @@ const ListingFilter = () => { ...@@ -18,6 +31,449 @@ const ListingFilter = () => {
</div> </div>
</div> </div>
</div> </div>
<div className="box-01">
<div className="p-all">
<div className="head">Your Budget</div>
</div>
<div className="inner">
<div className="price">$200 - $5000+</div>
<div className="graph">
<img className="img-fluid w-100" src="/images/buget.svg" />
</div>
</div>
</div>
<div className="box-01">
<div className="p-all">
<div className="head">Experience Category</div>
</div>
<div className="inner">
<Accordion className="accordion-filter" defaultActiveKey="0" flush>
<Accordion.Item eventKey="0">
<Accordion.Header>Adventure</Accordion.Header>
<Accordion.Body>
<div className="data-filters-item">
<label htmlFor="Boat">
<input id="Boat" type="checkbox" /> Boat
</label>
</div>
<div className="data-filters-item">
<label htmlFor="Games">
<input id="Games" type="checkbox" /> Games
</label>
</div>
<div className="data-filters-item">
<label htmlFor="Helicopter">
<input id="Helicopter" type="checkbox" /> Helicopter
</label>
</div>
<div className="data-filters-item">
<label htmlFor="Ice-skating">
<input id="Ice-skating" type="checkbox" /> Ice-skating
</label>
</div>
<div className="data-filters-item">
<label htmlFor="Jet-skiing">
<input id="Jet-skiing" type="checkbox" /> Jet-skiing
</label>
</div>
<div className="data-filters-item">
<label htmlFor="Kayaking">
<input id="Kayaking" type="checkbox" /> Kayaking
</label>
</div>
<div className="data-filters-item">
<label htmlFor="Park">
<input id="Park" type="checkbox" /> Park
</label>
</div>
<div className="data-filters-item">
<label htmlFor="Rooftop">
<input id="Rooftop" type="checkbox" /> Rooftop
</label>
</div>
</Accordion.Body>
</Accordion.Item>
<Accordion.Item eventKey="1">
<Accordion.Header>Art & History</Accordion.Header>
<Accordion.Body>
<div className="data-filters-item">
<label htmlFor="Boat">
<input id="Boat" type="checkbox" /> Boat
</label>
</div>
<div className="data-filters-item">
<label htmlFor="Games">
<input id="Games" type="checkbox" /> Games
</label>
</div>
</Accordion.Body>
</Accordion.Item>
<Accordion.Item eventKey="2">
<Accordion.Header>Experiential Dining </Accordion.Header>
<Accordion.Body>
<div className="data-filters-item">
<label htmlFor="Boat">
<input id="Boat" type="checkbox" /> Boat
</label>
</div>
<div className="data-filters-item">
<label htmlFor="Games">
<input id="Games" type="checkbox" /> Games
</label>
</div>
</Accordion.Body>
</Accordion.Item>
<Accordion.Item eventKey="3">
<Accordion.Header>Family</Accordion.Header>
<Accordion.Body>
<div className="data-filters-item">
<label htmlFor="Boat">
<input id="Boat" type="checkbox" /> Boat
</label>
</div>
<div className="data-filters-item">
<label htmlFor="Games">
<input id="Games" type="checkbox" /> Games
</label>
</div>
</Accordion.Body>
</Accordion.Item>
<Accordion.Item eventKey="4">
<Accordion.Header>Fitness</Accordion.Header>
<Accordion.Body>
<div className="data-filters-item">
<label htmlFor="Boat">
<input id="Boat" type="checkbox" /> Boat
</label>
</div>
<div className="data-filters-item">
<label htmlFor="Games">
<input id="Games" type="checkbox" /> Games
</label>
</div>
</Accordion.Body>
</Accordion.Item>
<Accordion.Item eventKey="5">
<Accordion.Header>Performing Arts</Accordion.Header>
<Accordion.Body>
<div className="data-filters-item">
<label htmlFor="Boat">
<input id="Boat" type="checkbox" /> Boat
</label>
</div>
<div className="data-filters-item">
<label htmlFor="Games">
<input id="Games" type="checkbox" /> Games
</label>
</div>
</Accordion.Body>
</Accordion.Item>
<Accordion.Item eventKey="6">
<Accordion.Header>Pop Ups</Accordion.Header>
<Accordion.Body>
<div className="data-filters-item">
<label htmlFor="Boat">
<input id="Boat" type="checkbox" /> Boat
</label>
</div>
<div className="data-filters-item">
<label htmlFor="Games">
<input id="Games" type="checkbox" /> Games
</label>
</div>
</Accordion.Body>
</Accordion.Item>
<Accordion.Item eventKey="7">
<Accordion.Header>Tour</Accordion.Header>
<Accordion.Body>
<div className="data-filters-item">
<label htmlFor="Boat">
<input id="Boat" type="checkbox" /> Boat
</label>
</div>
<div className="data-filters-item">
<label htmlFor="Games">
<input id="Games" type="checkbox" /> Games
</label>
</div>
</Accordion.Body>
</Accordion.Item>
<Accordion.Item eventKey="8">
<Accordion.Header>Classes</Accordion.Header>
<Accordion.Body>
<div className="data-filters-item">
<label htmlFor="Boat">
<input id="Boat" type="checkbox" /> Boat
</label>
</div>
<div className="data-filters-item">
<label htmlFor="Games">
<input id="Games" type="checkbox" /> Games
</label>
</div>
</Accordion.Body>
</Accordion.Item>
<Accordion.Item eventKey="9">
<Accordion.Header>Wellness</Accordion.Header>
<Accordion.Body>
<div className="data-filters-item">
<label htmlFor="Boat">
<input id="Boat" type="checkbox" /> Boat
</label>
</div>
<div className="data-filters-item">
<label htmlFor="Games">
<input id="Games" type="checkbox" /> Games
</label>
</div>
</Accordion.Body>
</Accordion.Item>
</Accordion>
</div>
</div>
<div className="box-01">
<div className="p-all">
<div className="head">Location Type:</div>
</div>
<div className="inner">
<div className="data-filters-item">
<label htmlFor="Indoor">
<input id="Indoor" type="checkbox" /> Indoor
</label>
</div>
<div className="data-filters-item">
<label htmlFor="Outdoor">
<input id="Outdoor" type="checkbox" /> Outdoor
</label>
</div>
<div className="data-filters-item">
<label htmlFor="Both">
<input id="Both" type="checkbox" /> Both
</label>
</div>
</div>
</div>
<div className="box-01">
<div className="p-all">
<div className="head">Rating:</div>
</div>
<div className="inner">
<div className="data-filters-item">
<label htmlFor="Excellent (9+)">
<input name="Rating" id="Excellent (9+)" type="radio" /> Excellent (9+)
</label>
</div>
<div className="data-filters-item">
<label htmlFor="Very Good (7+)">
<input name="Rating" id="Very Good (7+)" type="radio" /> Very Good (7+)
</label>
</div>
<div className="data-filters-item">
<label htmlFor="Pleasant (5+)">
<input name="Rating" id="Pleasant (5+)" type="radio" /> Pleasant (5+)
</label>
</div>
</div>
</div>
<div className="box-01">
<div className="p-all">
<div className="head">Months:</div>
</div>
<div className="inner">
<div className="data-filters-item">
<Form.Select aria-label="Default select example">
<option>Select</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
</Form.Select>
</div>
</div>
</div>
<div className="box-01">
<div className="p-all">
<div className="head">Days</div>
</div>
<div className="inner">
<div className="data-filters-item">
<label htmlFor="Weekdays">
<input id="Weekdays" type="checkbox" /> Weekdays
</label>
</div>
<div className="data-filters-item">
<label htmlFor="Weekends">
<input id="Weekends" type="checkbox" /> Weekends
</label>
</div>
<div className="data-filters-item">
<label htmlFor="All">
<input id="All" type="checkbox" /> All
</label>
</div>
</div>
</div>
<div className="box-01">
<div className="p-all">
<div className="head">Time</div>
</div>
<div className="inner">
<div className="data-filters-item">
<div className="time-filter">
<div className="time-field">
<div className="time">
<div>Hour</div>
<div className="">
<input className="form-control" type="text" placeholder="0" />
</div>
</div>
<div className="time">
<div>Mins</div>
<div className="">
<input className="form-control" type="text" placeholder="0" />
</div>
</div>
</div>
<div className="ampm-field">
<div className="ampm">
<input className="form-check-label" type="radio" id="Am" name="ampm" />
<label htmlFor="Am">Am</label>
</div>
<div className="ampm">
<input className="form-check-label" type="radio" id="Pm" name="ampm" />
<label htmlFor="Pm">Pm</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="box-01">
<div className="p-all">
<div className="head">Duration</div>
</div>
<div className="inner">
<div className="data-filters-item">
<label htmlFor="10 Mins">
<input id="10 Mins" type="checkbox" /> 10 Mins
</label>
</div>
<div className="data-filters-item">
<label htmlFor="10 to 60 Mins (Activity) - 120 Mins">
<input id="10 to 60 Mins (Activity) - 120 Mins" type="checkbox" /> 10 to 60 Mins (Activity) - 120 Mins
</label>
</div>
<div className="data-filters-item">
<label htmlFor="15+ (Activity) - 60 Mins ">
<input id="15+ (Activity) - 60 Mins " type="checkbox" /> 15+ (Activity) - 60 Mins
</label>
</div>
<div className="data-filters-item">
<label htmlFor="15 to 20 Mins ">
<input id="15 to 20 Mins " type="checkbox" /> 15 to 20 Mins
</label>
</div>
<div className="data-filters-item">
<label htmlFor="20 to 40 Mins">
<input id="20 to 40 Mins" type="checkbox" /> 20 to 40 Mins
</label>
</div>
<div className="data-filters-item">
<label htmlFor="20 Mins">
<input id="20 Mins" type="checkbox" /> 20 Mins
</label>
</div>
{showContent && (
<div className="data-filters-item">
<label htmlFor="30 Mins">
<input id="30 Mins" type="checkbox" /> 30 Mins
</label>
</div>
)}
<div className="data-filters-item">
<button className="show-all" onClick={toggleContent}>
{showContent ? "Hide" : "Show All"}
<img src={showContent ? "/images/icons/down-s.svg" : "/images/icons/up-s.svg"} alt="" style={{ marginLeft: "5px" }} />
</button>
</div>
</div>
</div>
<div className="box-01">
<div className="p-all">
<div className="head">Group Size</div>
</div>
<div className="inner">
<div className="data-filters-item">
<label htmlFor="">Minimum Group Size</label>
<Form.Select aria-label="Default select example">
<option>Select</option>
{/* <option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option> */}
</Form.Select>
</div>
<div className="data-filters-item">
<label htmlFor="">Maximum Group Size</label>
<Form.Select aria-label="Default select example">
<option>Select</option>
{/* <option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option> */}
</Form.Select>
</div>
</div>
</div>
<div className="box-01">
<div className="p-all">
<div className="head">Suitable Age Group:</div>
</div>
<div className="inner">
<div className="data-filters-item">
<label htmlFor="2+">
<input id="2+" type="checkbox" /> 2+
</label>
</div>
<div className="data-filters-item">
<label htmlFor="5+">
<input id="5+" type="checkbox" /> 5+
</label>
</div>
<div className="data-filters-item">
<label htmlFor="8+ ">
<input id="8+ " type="checkbox" /> 8+
</label>
</div>
<div className="data-filters-item">
<label htmlFor="10+ ">
<input id="10+ " type="checkbox" /> 10+
</label>
</div>
<div className="data-filters-item">
<label htmlFor="12+">
<input id="12+" type="checkbox" /> 12+
</label>
</div>
<div className="data-filters-item">
<label htmlFor="14+">
<input id="14+" type="checkbox" /> 14+
</label>
</div>
{showContent && (
<div className="data-filters-item">
<label htmlFor="16+">
<input id="16+" type="checkbox" /> 16+
</label>
</div>
)}
<div className="data-filters-item">
<button className="show-all" onClick={toggleContent}>
{showContent ? "Hide" : "Show All"}
<img src={showContent ? "/images/icons/down-s.svg" : "/images/icons/up-s.svg"} alt="" style={{ marginLeft: "5px" }} />
</button>
</div>
</div>
</div>
<div></div>
</div> </div>
</> </>
); );
......
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/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/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 \ No newline at end of file
styles/globals.css
...@@ -758,20 +758,210 @@ footer hr{ ...@@ -758,20 +758,210 @@ footer hr{
} }
.box-01{ .box-01{
border-radius: 17px; border-radius: 17px;
border: 1px solid #D1D1D1; border: 2px solid #D1D1D1;
margin-bottom: 1rem;
}
.box-01 .p-all{
padding: 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 a{
display: flex;
align-items: center;
} }
.box-01 .reset .image-container{ .box-01 .reset .image-container{
width: 22px; width: 22px;
display: inline-block; display: inline-block;
margin-left: 5px;
} }
.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;
}
@media (min-width: 992px) @media (min-width: 992px)
{ {
...@@ -804,6 +994,36 @@ footer hr{ ...@@ -804,6 +994,36 @@ footer hr{
} }
} }
@media (max-width: 767px) { @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 { footer .subscribe input {
width: 67%; 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!