Skip to content

Jay Mehta / zango-frontend

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

updated home page

1 parent 1e264089
Inline Side-by-side
Showing 9 changed files with 223 additions and 150 deletions
components/home/LetDiscover.js
......@@ -6,7 +6,37 @@ const OwlCarousel = dynamic(() => import("react-owl-carousel"), {
ssr: false
});
const LetDiscover = () => {
const projects = {
const letDiscoverData = [
{
image: "/images/discover/01.png",
title: "All"
},
{
image: "/images/discover/02.png",
title: "Art & History"
},
{
image: "/images/discover/03.png",
title: "Experiential Dining "
},
{
image: "/images/discover/04.png",
title: "Family"
},
{
image: "/images/discover/05.png",
title: "Fitness"
},
{
image: "/images/discover/06.png",
title: "Performing Arts"
},
{
image: "/images/discover/01.png",
title: "All"
}
];
const letDiscover = {
responsive: {
0: {
items: 2,
......@@ -49,69 +79,26 @@ const LetDiscover = () => {
items={6}
dots={false}
nav={true}
responsive={projects.responsive}
responsive={letDiscoverData.responsive}
autoplay={false}
autoplayTimeout={5000}
center={false}
loop={false}
touchDrag={true}
>
<div className="item">
<a href="">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/discover/01.png" />
</span>
<div className="title">All</div>
</a>
</div>
<div className="item">
<a href="">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/discover/02.png" />
</span>
<div className="title">Art & History</div>
</a>
</div>
<div className="item">
<a href="">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/discover/03.png" />
</span>
<div className="title">Experiential Dining </div>
</a>
</div>
<div className="item">
<a href="">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/discover/04.png" />
</span>
<div className="title">Family</div>
</a>
</div>
<div className="item">
<a href="">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/discover/05.png" />
</span>
<div className="title">Fitness</div>
</a>
</div>
<div className="item">
<a href="">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/discover/06.png" />
</span>
<div className="title">Performing Arts</div>
</a>
</div>
<div className="item">
<a href="">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/discover/01.png" />
</span>
<div className="title">Other</div>
</a>
</div>
{letDiscoverData &&
letDiscoverData.map((data, index) => {
return (
<div className="item">
<a href="">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src={data.image} />
</span>
<div className="title">{data.title}</div>
</a>
</div>
);
})}
</OwlCarousel>
</div>
</div>
......
components/home/Testimonial.js
......@@ -5,6 +5,16 @@ const OwlCarousel = dynamic(() => import("react-owl-carousel"), {
ssr: false
});
const Testimonial = () => {
const testimonialData = [
{
disc: "“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.”",
name: "Erika Payne, Los Angeles CA"
},
{
disc: "“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.”",
name: "Erika Payne, Los Angeles CA"
},
];
const projects = {
responsive: {
0: {
......@@ -87,98 +97,56 @@ const Testimonial = () => {
<div className="name">Erika Payne, Los Angeles CA</div>
</div>
</div>
<div className="item">
<div className="testimonial-item">
<div className="img">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/testimonial/01.png" />
</span>
</div>
<div className="rating">
<a href="">
<span className="image-container">
<Image layout="fill" className="image img-fluid" alt="" src="/images/icons/star.svg" />
</span>
</a>
<a href="">
<span className="image-container">
<Image layout="fill" className="image img-fluid" alt="" src="/images/icons/star.svg" />
</span>
</a>
<a href="">
<span className="image-container">
<Image layout="fill" className="image img-fluid" alt="" src="/images/icons/star.svg" />
</span>
</a>
<a href="">
<span className="image-container">
<Image layout="fill" className="image img-fluid" alt="" src="/images/icons/star.svg" />
</span>
</a>
<a href="">
<span className="image-container">
<Image layout="fill" className="image img-fluid" alt="" src="/images/icons/star.svg" />
</span>
</a>
{/* <a href="">
<span className='fa fa-star'>
<Image layout='fill' alt='' src="/images/icons/star.svg" />
</span>
</a> */}
</div>
<div className="disc">
“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud.”
</div>
<div className="name">Erika Payne, Los Angeles CA</div>
</div>
</div>
<div className="item">
<div className="testimonial-item">
<div className="img">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/testimonial/01.png" />
</span>
</div>
<div className="rating">
<a href="">
<span className="image-container">
<Image layout="fill" className="image img-fluid" alt="" src="/images/icons/star.svg" />
</span>
</a>
<a href="">
<span className="image-container">
<Image layout="fill" className="image img-fluid" alt="" src="/images/icons/star.svg" />
</span>
</a>
<a href="">
<span className="image-container">
<Image layout="fill" className="image img-fluid" alt="" src="/images/icons/star.svg" />
</span>
</a>
<a href="">
<span className="image-container">
<Image layout="fill" className="image img-fluid" alt="" src="/images/icons/star.svg" />
</span>
</a>
<a href="">
<span className="image-container">
<Image layout="fill" className="image img-fluid" alt="" src="/images/icons/star.svg" />
</span>
</a>
{/* <a href="">
{testimonialData &&
testimonialData.map(data => {
return (
<div className="item">
<div className="testimonial-item">
<div className="img">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/testimonial/01.png" />
</span>
</div>
<div className="rating">
<a href="">
<span className="image-container">
<Image layout="fill" className="image img-fluid" alt="" src="/images/icons/star.svg" />
</span>
</a>
<a href="">
<span className="image-container">
<Image layout="fill" className="image img-fluid" alt="" src="/images/icons/star.svg" />
</span>
</a>
<a href="">
<span className="image-container">
<Image layout="fill" className="image img-fluid" alt="" src="/images/icons/star.svg" />
</span>
</a>
<a href="">
<span className="image-container">
<Image layout="fill" className="image img-fluid" alt="" src="/images/icons/star.svg" />
</span>
</a>
<a href="">
<span className="image-container">
<Image layout="fill" className="image img-fluid" alt="" src="/images/icons/star.svg" />
</span>
</a>
{/* <a href="">
<span className='fa fa-star'>
<Image layout='fill' alt='' src="/images/icons/star.svg" />
</span>
</a> */}
</div>
<div className="disc">
“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud.”
</div>
<div className="name">Erika Payne, Los Angeles CA</div>
</div>
</div>
</div>
<div className="disc">
{data.disc}
</div>
<div className="name">{data.name}</div>
</div>
</div>
);
})}
</OwlCarousel>
</div>
</div>
......
components/listing/Listing.js 0 → 100644
import React, { Fragment } from "react";
import LetDiscover from "../home/LetDiscover";
import ListingInner from "./ListingInner";
const Listing = () => {
return (
<Fragment>
<main>
<LetDiscover />
<ListingInner />
</main>
</Fragment>
);
};
export default Listing;
components/listing/ListingFilter.js 0 → 100644
import Image from "next/image";
import React from "react";
const ListingFilter = () => {
return (
<>
<div className="listing-filter">
<div className="box-01">
<div className="df-sb">
<div className="head">Filter By:</div>
<div className="reset">
<a href="">
Reset
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/reset-icon.svg" />
</span>
</a>
</div>
</div>
</div>
</div>
</>
);
};
export default ListingFilter;
components/listing/ListingInner.js 0 → 100644
import React from 'react'
import ListingFilter from './ListingFilter'
const ListingInner = () => {
return (
<>
<section className='listing-inner-session'>
<div className='container'>
<div className='row'>
<div className='col-md-4'>
<ListingFilter />
</div>
<div className='col-md-4'>
assadasd
</div>
</div>
</div>
</section>
</>
)
}
export default ListingInner
pages/index.js
......@@ -20,13 +20,14 @@ export default function IndexPage() {
}
/** For server side rendering */
export const getServerSideProps = wrapper.getServerSideProps(store => async ({ req, query }) => {
export const getStaticProps = wrapper.getStaticProps(store => async ({ req, query }) => {
// Get the menu data.
// get the locations data.
return {
props: {}
props: {},
};
});
pages/listing.js 0 → 100644
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 ListingPage() {
/** Client side rendering, traditional API call. */
// const dispatch = useDispatch();
// useEffect(() => {
// const fetchData = async () => {
// await dispatch(getProjects({ currentPage: 1, featuredOnHome: true }));
// };
// fetchData();
// });
return (
<Layout>
<Listing />
</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/reset-icon.svg 0 → 100644
<svg width="22" height="21" viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.281 14.4254C18.8527 14.5683 18.4771 14.7046 18.0945 14.8181C17.7448 14.922 17.3995 14.7178 17.3114 14.3777C17.2347 14.0814 17.3807 13.7666 17.6877 13.6569C18.5552 13.3469 19.4264 13.0464 20.3017 12.7581C20.6259 12.6513 20.9765 12.8393 21.0708 13.1658C21.3183 14.0228 21.5567 14.8826 21.782 15.7455C21.8771 16.1095 21.6665 16.4235 21.3148 16.5053C20.967 16.5863 20.6587 16.3946 20.5516 16.0265C20.4752 15.7644 20.4041 15.5008 20.3209 15.203C20.1615 15.4597 20.0272 15.6955 19.8744 15.919C18.0766 18.5483 15.5789 20.0708 12.3673 20.4313C7.39279 20.9898 2.64548 17.7592 1.43085 13.0069C1.32158 12.5793 1.48921 12.248 1.86369 12.1514C2.22607 12.0579 2.5463 12.2799 2.66209 12.7042C3.27375 14.9459 4.58487 16.6899 6.58145 17.9259C8.21379 18.9365 10.0091 19.3768 11.9337 19.2204C15.1066 18.9624 17.4819 17.447 19.0959 14.7678C19.1541 14.6712 19.2034 14.5694 19.281 14.4254Z" fill="#0070BD"/>
<path d="M3.33764 6.55596C3.74981 6.41839 4.12504 6.27982 4.50852 6.16864C4.94568 6.0419 5.35473 6.38002 5.30973 6.8189C5.28398 7.07004 5.14382 7.25224 4.90277 7.33667C4.04693 7.63641 3.19005 7.93359 2.3294 8.21971C1.97998 8.33588 1.63137 8.15319 1.53082 7.80294C1.28861 6.95922 1.0546 6.11312 0.829167 5.26494C0.732506 4.90127 0.930926 4.57132 1.26891 4.48475C1.62736 4.39294 1.94082 4.57875 2.05527 4.9578C2.13421 5.21928 2.20434 5.48332 2.28507 5.76986C2.32502 5.71496 2.3558 5.67902 2.37959 5.63908C4.14513 2.67439 6.75813 0.950152 10.2407 0.557351C15.2196 -0.00421969 19.932 3.20256 21.173 7.95917C21.2886 8.40232 21.125 8.73478 20.7426 8.83398C20.3806 8.92789 20.0625 8.70659 19.9452 8.28025C19.2799 5.86381 17.8264 4.04049 15.608 2.81671C11.3194 0.450899 5.72376 2.08276 3.43408 6.35253C3.40454 6.40762 3.38035 6.46546 3.33764 6.55596Z" fill="#0070BD"/>
</svg>
styles/globals.css
......@@ -756,8 +756,22 @@ footer hr{
text-align: center;
padding: 1rem;
}
.box-01{
border-radius: 17px;
border: 1px solid #D1D1D1;
}
.box-01 .head{
font-size: 20px;
line-height: 20px;
padding: 1rem;
}
.box-01 .reset .image-container{
width: 22px;
display: inline-block;
}
.box-01 .reset a{
color: #0070BD;
}
@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!