Skip to content

Jay Mehta / zango-frontend

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

updated home page

1 parent 2ff6c536
Inline Side-by-side
Showing 8 changed files with 143 additions and 22 deletions
components/home/LetDiscover.js
...@@ -41,6 +41,7 @@ const LetDiscover = ({ categories }) => { ...@@ -41,6 +41,7 @@ const LetDiscover = ({ categories }) => {
<Swiper <Swiper
modules={[Autoplay, Navigation]} modules={[Autoplay, Navigation]}
slidesPerView={3} slidesPerView={3}
spaceBetween= {10}
// autoplay={{ // autoplay={{
// delay: 7000, // delay: 7000,
// disableOnInteraction: false, // disableOnInteraction: false,
...@@ -56,7 +57,7 @@ const LetDiscover = ({ categories }) => { ...@@ -56,7 +57,7 @@ const LetDiscover = ({ categories }) => {
spaceBetween: 20 spaceBetween: 20
}, },
768: { 768: {
slidesPerView: 4, slidesPerView: 3,
spaceBetween: 20 spaceBetween: 20
}, },
1024: { 1024: {
......
components/layout/Footer.js
...@@ -162,7 +162,7 @@ const Footer = () => { ...@@ -162,7 +162,7 @@ const Footer = () => {
<div className="subscribe"> <div className="subscribe">
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
<div className="row"> <div className="row">
<div className="col-12"> <div className="col-12 d-flex align-items-center justify-content-between">
<input <input
id="subscribe" id="subscribe"
onChange={e => { onChange={e => {
......
components/layout/Layout.js
...@@ -19,7 +19,8 @@ const Layout = ({ children, title = "Zango", description = "Zango" }) => { ...@@ -19,7 +19,8 @@ const Layout = ({ children, title = "Zango", description = "Zango" }) => {
<Head> <Head>
<title>{title}</title> <title>{title}</title>
<meta charSet="utf-8"></meta> <meta charSet="utf-8"></meta>
<meta name="viewport" content="initial-scale=1.0,width=device-width" /> {/* <meta name="viewport" content="initial-scale=1.0,width=device-width" /> */}
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta name="description" content={description} /> <meta name="description" content={description} />
<meta property="og:title" content={title} /> <meta property="og:title" content={title} />
<meta property="og:description" content={description} /> <meta property="og:description" content={description} />
......
components/listing/ListingItems.js
...@@ -111,10 +111,10 @@ const ListingItems = ({ allActivitiesData, loading, gridClass, totalCount }) => ...@@ -111,10 +111,10 @@ const ListingItems = ({ allActivitiesData, loading, gridClass, totalCount }) =>
itemsCountPerPage={12} itemsCountPerPage={12}
totalItemsCount={totalCount} totalItemsCount={totalCount}
onChange={handlePagination} onChange={handlePagination}
nextPageText={">"} nextPageText={"›"}
prevPageText={"<"} prevPageText={"‹"}
firstPageText={"<<"} firstPageText={"«"}
lastPageText={">>"} lastPageText={"»"}
itemClass="page-item" itemClass="page-item"
linkClass="page-link" linkClass="page-link"
></Pagination> ></Pagination>
......
pages/_document.js
...@@ -14,7 +14,8 @@ class MyDocument extends Document { ...@@ -14,7 +14,8 @@ class MyDocument extends Document {
<Html lang="en"> <Html lang="en">
<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" /> */}
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"></meta>
<link rel="preload" as="font" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" crossOrigin/> <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"
......
public/images/icons/close_icon.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50px" height="50px"><path d="M 9.15625 6.3125 L 6.3125 9.15625 L 22.15625 25 L 6.21875 40.96875 L 9.03125 43.78125 L 25 27.84375 L 40.9375 43.78125 L 43.78125 40.9375 L 27.84375 25 L 43.6875 9.15625 L 40.84375 6.3125 L 25 22.15625 Z"/></svg>
\ No newline at end of file \ No newline at end of file
styles/globals.css
...@@ -365,6 +365,9 @@ header { ...@@ -365,6 +365,9 @@ header {
.header-search { .header-search {
position: relative; position: relative;
} }
.header-search .rbt .rbt-input-main{
padding-right: 2.5rem;
}
.header-search>.form-control{ .header-search>.form-control{
font-size: 0.833vw; font-size: 0.833vw;
} }
...@@ -409,7 +412,7 @@ header { ...@@ -409,7 +412,7 @@ header {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
background: rgb(0, 0, 0); background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5); /* Black see-through */ background: rgba(0, 0, 0, 0.2); /* Black see-through */
color: #f1f1f1; color: #f1f1f1;
width: 100%; width: 100%;
transition: .5s ease; transition: .5s ease;
...@@ -541,7 +544,9 @@ header { ...@@ -541,7 +544,9 @@ header {
border: 3px solid #fff; border: 3px solid #fff;
background: #2a2a2a; background: #2a2a2a;
} }
.searchbar-h .rbt-menu.dropdown-menu.show{
top: 1.7rem !important;
}
.searchbar-h { .searchbar-h {
position: relative; position: relative;
width: 100%; width: 100%;
...@@ -549,7 +554,7 @@ header { ...@@ -549,7 +554,7 @@ header {
background: #fff; background: #fff;
box-shadow: 0px 4px 57.5px -8px rgba(0, 0, 0, 0.25); box-shadow: 0px 4px 57.5px -8px rgba(0, 0, 0, 0.25);
height: 90px; height: 90px;
padding: 2.2rem; padding: 1.5rem 2.2rem;
} }
.searchbar-h input { .searchbar-h input {
...@@ -2172,7 +2177,7 @@ footer .subscribe input { ...@@ -2172,7 +2177,7 @@ footer .subscribe input {
padding: 0.6rem; padding: 0.6rem;
color: #fff; color: #fff;
margin-right: 0.5rem; margin-right: 0.5rem;
width: 62%; width: 100%;
} }
footer hr { footer hr {
...@@ -2327,7 +2332,7 @@ footer hr { ...@@ -2327,7 +2332,7 @@ footer hr {
} }
.time-filter .time input { .time-filter .time input {
/* width: 55px; */ width: 100%;
border: 1px solid #D1D1D1; border: 1px solid #D1D1D1;
border-radius: 5px; border-radius: 5px;
padding: 0.4rem; padding: 0.4rem;
...@@ -2578,7 +2583,9 @@ footer hr { ...@@ -2578,7 +2583,9 @@ footer hr {
.btn { .btn {
font-size: 0.833vw; font-size: 0.833vw;
} }
.btn-check:focus+.btn, .btn:focus, button:focus:not(:focus-visible){
box-shadow: none;
}
.availability-wrappper { .availability-wrappper {
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -2846,8 +2853,8 @@ input[type="number"]::-webkit-outer-spin-button { ...@@ -2846,8 +2853,8 @@ input[type="number"]::-webkit-outer-spin-button {
color: #808080; color: #808080;
background-color: transparent; background-color: transparent;
} }
:where(.css-dev-only-do-not-override-1kuana8).ant-tooltip .ant-tooltip-arrow:before { :where(.css-dev-only-do-not-override-1kuana8).ant-tooltip .ant-tooltip-arrow:before,:where(.css-dev-only-do-not-override-1kuana8).ant-tooltip .ant-tooltip-content {
background: transparent; background: #fff;
} }
:where(.css-dev-only-do-not-override-1kuana8).ant-tooltip .ant-tooltip-arrow::after { :where(.css-dev-only-do-not-override-1kuana8).ant-tooltip .ant-tooltip-arrow::after {
box-shadow: 1px 1px 6px #c1c1c1; box-shadow: 1px 1px 6px #c1c1c1;
...@@ -3607,6 +3614,49 @@ img:hover { ...@@ -3607,6 +3614,49 @@ img:hover {
.form-container .upload-file .anticon.anticon-plus{ .form-container .upload-file .anticon.anticon-plus{
position: absolute; position: absolute;
} }
.search-icon.btn:hover {
color: inherit;
background-color: inherit;
border-color: inherit;
box-shadow: none;
}
.form-control:focus{
box-shadow: none;
border-color: #ced4da;
}
:where(.css-dev-only-do-not-override-1kuana8).ant-tooltip{
z-index: 10;
}
.swiper-nav button{
margin: 0 !important;
padding: 0 !important;
}
/* .let-discover-carousal{
background: orange;
} */
.page-link{
box-shadow: 0px 2.57px 8.85px 0px #00000026;
}
.load-more{
display: flex;
align-items: center;
justify-content: flex-end;
}
.load-more .pagination .page-item{
}
.page-item:not(:first-child) .page-link {
margin-left: 10px;
}
.page-link{
display: block;
font-size: 16px;
border-radius: 5px;
}
@media (min-width: 992px) { @media (min-width: 992px) {
.navbar-expand-lg .navbar-nav .nav-link { .navbar-expand-lg .navbar-nav .nav-link {
margin: 0 2rem; margin: 0 2rem;
...@@ -3722,6 +3772,50 @@ img:hover { ...@@ -3722,6 +3772,50 @@ img:hover {
} }
@media (max-width: 767px) { @media (max-width: 767px) {
.navbar-toggler{
border: 0;
}
.navbar-toggler .navbar-toggler-icon{
background: url(/images/icons/close_icon.svg) no-repeat !important;
background-size: 100% !important;
}
.navbar-toggler.collapsed .navbar-toggler-icon{
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.95' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
.top-rated {
font-size: 12px;
display: flex;
width: 19vw;
align-items: center;
justify-content: center;
line-height: 15px;
}
.discover-swiper-button-prev arrow{
left: 0;
}
.navbar-collapse form{
margin-right: 0 !important;
}
.header-search {
width: 100%;
}
.navbar-expand-lg .navbar-nav {
padding-bottom: 1rem;
}
.navbar-expand-lg .navbar-nav .nav-link.gift-card .image-container {
width: 18px;
}
.header_wrap .navbar-expand-lg .navbar-nav .nav-link {
padding: 0.2rem 0;
display: flex;
align-items: center;
}
.navbar-collapse {
margin-top: 1rem;
}
.copyright {
font-size: 14px;
}
.let-discover-session.let-discover-listing-session .swiper-nav, .home_nav { .let-discover-session.let-discover-listing-session .swiper-nav, .home_nav {
width: 100%; width: 100%;
} }
...@@ -3738,9 +3832,16 @@ img:hover { ...@@ -3738,9 +3832,16 @@ img:hover {
line-height: 3.883vw; line-height: 3.883vw;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.top-btn{ .top-btn {
margin-bottom: 1rem; margin-bottom: 1rem;
} margin-top: 1rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.top-btn button{
width: 100%;
}
.header-search .search-icon .image-container { .header-search .search-icon .image-container {
width: 3.585vw; width: 3.585vw;
} }
...@@ -3752,7 +3853,7 @@ img:hover { ...@@ -3752,7 +3853,7 @@ img:hover {
font-size: 3vw; font-size: 3vw;
} }
.navbar-brand { .navbar-brand {
width: 16.927vw; width: 22.927vw;
} }
.info .top-name .title { .info .top-name .title {
font-size: 4vw; font-size: 4vw;
...@@ -3881,6 +3982,17 @@ img:hover { ...@@ -3881,6 +3982,17 @@ img:hover {
} }
@media (max-width: 767px) { @media (max-width: 767px) {
.container-fluid {
max-width: 100vw;
}
.home-banner-bg::before {
border-radius: 0 0 1rem 1rem;
}
.let-discover-carousal a .title {
padding: 1rem;
font-size: 14px;
line-height: 16px;
}
footer .subscribe input { footer .subscribe input {
width: 67%; width: 67%;
} }
...@@ -3975,12 +4087,17 @@ img:hover { ...@@ -3975,12 +4087,17 @@ img:hover {
.searchbar-h { .searchbar-h {
height: 55px; height: 55px;
padding: 1rem; padding: 0.8rem;
} }
.searchbar-h .rbt-menu.dropdown-menu.show {
top: 0.8rem !important;
}
.rbt-menu > .dropdown-item {
font-size: 13px;
}
.searchbar-h .search-icon { .searchbar-h .search-icon {
right: 8px; right: 8px;
top: 11px; top: 12px;
} }
.searchbar-session { .searchbar-session {
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!