Skip to content

Jay Mehta / zango-frontend

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

updated pages

1 parent e2f11df7
Inline Side-by-side
Showing 8 changed files with 267 additions and 0 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
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;
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: {},
};
});
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/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/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
......@@ -1687,6 +1687,89 @@ footer hr {
.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) {
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!