Skip to content

Jay Mehta / zango-frontend

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

header cheanges

1 parent c711cc65
Expand all
Inline Side-by-side
Showing 6 changed files with 95 additions and 79 deletions
components/home/BrowseExperiences.js
...@@ -60,15 +60,15 @@ const BrowseExperiences = ({ allActivitiesData }) => { ...@@ -60,15 +60,15 @@ const BrowseExperiences = ({ allActivitiesData }) => {
breakpoints={{ breakpoints={{
640: { 640: {
slidesPerView: 1, slidesPerView: 1,
spaceBetween: 20 spaceBetween: 0
}, },
768: { 768: {
slidesPerView: 2, slidesPerView: 2,
spaceBetween: 40 spaceBetween: 0
}, },
1024: { 1024: {
slidesPerView: 4, slidesPerView: 4,
spaceBetween: 20 spaceBetween: 0
} }
}} }}
modules={[Navigation, Autoplay]} modules={[Navigation, Autoplay]}
......
components/layout/Header.js
...@@ -46,24 +46,28 @@ const Header = () => { ...@@ -46,24 +46,28 @@ const Header = () => {
}, [endUser]); }, [endUser]);
return ( return (
<header className={`header_wrap ${isSticky ? "stick" : ""}`}> <header className={`header_wrap ${isSticky ? "stick" : ""}`}>
{isSticky && <div style={{height :76}} className="bg-transparent"></div>}
<Navbar expand="lg" className="bg-body-tertiary"> <Navbar expand="lg" className="bg-body-tertiary">
<Container fluid> <Container fluid>
<Navbar.Brand href="/"> <Navbar.Brand href="/">
<span className="image-container"> <span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/Zango-logo.svg" /> <Image loading="lazy" layout="fill" alt="" className="image img-fluid" src="/images/Zango-logo.svg" />
</span> </span>
</Navbar.Brand> </Navbar.Brand>
<Navbar.Toggle aria-controls="navbarScroll" /> <Navbar.Toggle aria-controls="navbarScroll" />
<Navbar.Collapse id="navbarScroll"> <Navbar.Collapse id="navbarScroll">
<Nav className=" my-2 my-lg-0" style={{ maxHeight: "100px" }} navbarScroll> <Nav className=" my-2 my-lg-0" style={{ maxHeight: "100px" }} navbarScroll>
<ActiveLink href="/blog" activeClassName="active"> <ActiveLink href="/blog" activeClassName="active">
<a className="nav-link ">Blogs</a> <a className="nav-link ">Blogs</a>
</ActiveLink> </ActiveLink>
<ActiveLink href="/gift-card" activeClassName="active "> <ActiveLink href="/gift-card" activeClassName="active ">
<a className="nav-link gift-card">Gift Card <span className="image-container"> <a className="nav-link gift-card">
<Image layout="fill" className="image img-fluid" src="/images/icons/gift-card-icon.svg" alt="" /> Gift Card{" "}
</span></a> <span className="image-container">
</ActiveLink> <Image layout="fill" className="image img-fluid" src="/images/icons/gift-card-icon.svg" alt="" />
</span>
</a>
</ActiveLink>
{/* <Nav.Link href="/gift-card" className="gift-card"> {/* <Nav.Link href="/gift-card" className="gift-card">
Gift Card Gift Card
...@@ -71,7 +75,6 @@ const Header = () => { ...@@ -71,7 +75,6 @@ const Header = () => {
<Image layout="fill" className="image img-fluid" src="/images/icons/gift-card-icon.svg" alt="" /> <Image layout="fill" className="image img-fluid" src="/images/icons/gift-card-icon.svg" alt="" />
</span> </span>
</Nav.Link> */} </Nav.Link> */}
</Nav> </Nav>
<Form className="d-flex me-3"> <Form className="d-flex me-3">
<div className="header-search"> <div className="header-search">
......
public/images/icons/add-icon.svg 0 → 100644
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<line x1="8.54687" y1="2.09668" x2="8.54687" y2="14.8603" stroke="#808080" stroke-width="2.5" stroke-linecap="round"/>
<line x1="1.73633" y1="8.48462" x2="14.7422" y2="8.48462" stroke="#808080" stroke-width="2.5" stroke-linecap="round"/>
</svg>
public/images/icons/edit-icon.svg 0 → 100644
<svg width="23" height="22" viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_670_955)">
<path d="M22.9249 3.2853C22.8676 3.48187 22.8454 3.69711 22.7451 3.87088C22.5704 4.1736 22.3893 4.49058 22.1386 4.73257C18.9389 7.82015 15.7273 10.8964 12.5132 13.9702C12.3978 14.0805 12.2358 14.1699 12.0789 14.2128C10.6081 14.6144 9.13415 15.0053 7.66007 15.3957C7.09642 15.545 6.74959 15.2163 6.90396 14.6783C7.30974 13.264 7.71668 11.85 8.13434 10.439C8.17899 10.2881 8.27056 10.1316 8.38556 10.021C11.5949 6.93289 14.8074 3.84787 18.0256 0.768339C19.0692 -0.230204 20.5651 -0.222105 21.6113 0.768544C21.7947 0.942203 21.9755 1.11839 22.1583 1.2927C22.5501 1.66645 22.8071 2.10735 22.8902 2.63604C22.8942 2.66124 22.913 2.68428 22.9249 2.70833L22.9249 3.2853ZM12.077 12.8643C14.724 10.3253 17.3805 7.7772 20.0169 5.24834C19.1752 4.44104 18.3223 3.62294 17.4821 2.81705C14.8424 5.34906 12.1858 7.89727 9.54231 10.433C10.3804 11.2369 11.2295 12.0514 12.077 12.8643ZM18.3244 1.95904C19.1972 2.79624 20.0512 3.61533 20.9124 4.44144C21.1003 4.2522 21.3298 4.04425 21.5308 3.81342C21.923 3.363 21.9354 2.66405 21.5386 2.21833C21.2614 1.90696 20.9553 1.61349 20.6293 1.34933C20.1696 0.97694 19.4458 0.991548 18.9844 1.36195C18.7388 1.5591 18.5169 1.78347 18.3244 1.95904ZM8.19049 14.1632C9.1534 13.9068 10.08 13.6602 10.9811 13.4203C10.3018 12.769 9.63141 12.1262 8.96286 11.4851C8.71315 12.3509 8.45708 13.2388 8.19049 14.1632Z" fill="#808080"/>
<path d="M11.3495 21.0188C8.82187 21.0188 6.29422 21.0204 3.76658 21.0181C2.57073 21.017 1.68414 20.5098 1.18403 19.4661C1.02772 19.1399 0.939274 18.7532 0.938014 18.3939C0.921993 13.8264 0.921645 9.25888 0.931087 4.6914C0.93404 3.26281 2.06975 2.12395 3.56115 2.0892C5.20707 2.05084 6.85463 2.07443 8.50146 2.07695C8.83653 2.07746 9.07702 2.30644 9.07874 2.59544C9.08047 2.88839 8.82461 3.12033 8.48477 3.12078C6.90947 3.12286 5.33416 3.11973 3.75886 3.12268C2.90942 3.12428 2.28938 3.56772 2.07992 4.32917C2.03502 4.4924 2.02534 4.66841 2.02523 4.83855C2.02242 9.30989 2.02231 13.7812 2.02362 18.2526C2.02387 19.1077 2.45865 19.6978 3.2479 19.9068C3.41788 19.9518 3.60069 19.9704 3.77761 19.9705C8.82573 19.9738 13.8739 19.9737 18.922 19.9726C19.7808 19.9724 20.4068 19.5387 20.6189 18.7876C20.6687 18.6115 20.6823 18.4216 20.6829 18.2379C20.6879 16.7544 20.6848 15.2708 20.6865 13.7872C20.6869 13.4383 20.915 13.2042 21.2392 13.2085C21.5122 13.2121 21.7468 13.4177 21.7685 13.6812C21.7787 13.8041 21.7745 13.9283 21.7744 14.0519C21.7727 15.5423 21.79 17.033 21.7627 18.523C21.7384 19.8522 20.5749 20.9785 19.1899 21.0048C17.5938 21.0351 15.9966 21.0169 14.3999 21.0186C13.3831 21.0198 12.3663 21.0189 11.3495 21.0188Z" fill="#808080"/>
</g>
<defs>
<clipPath id="clip0_670_955">
<rect width="22" height="21" fill="white" transform="translate(0.924805 0.0224915)"/>
</clipPath>
</defs>
</svg>
styles/globals.css
...@@ -281,7 +281,6 @@ h6 { ...@@ -281,7 +281,6 @@ h6 {
position: relative !important; position: relative !important;
height: unset !important; height: unset !important;
} }
header { header {
position: relative; position: relative;
z-index: 99; z-index: 99;
...@@ -290,7 +289,7 @@ header { ...@@ -290,7 +289,7 @@ header {
.header_wrap.stick .navbar { .header_wrap.stick .navbar {
position: fixed; position: fixed;
top: -100px; top: -100px;
transition: transform 0.5s; transition: transform 0.5s ease-in-out;
transform: translateY(100px); transform: translateY(100px);
background-color: #fff; background-color: #fff;
} }
...@@ -554,21 +553,21 @@ header { ...@@ -554,21 +553,21 @@ header {
border-radius: 73px; border-radius: 73px;
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: calc(40px + (90 - 40) * (100vw - 320px) / (1920 - 320));
padding: 1.5rem 2.2rem; padding: 1.25vw 1.833vw;
} }
.searchbar-h input { .searchbar-h input {
width: 100%; width: 100%;
border: 0; border: 0;
font-size: 20px; font-size: calc(16px + (20 - 16) * (100vw - 320px) / (1920 - 320));
padding-right: 5rem; padding-right: 5rem;
} }
.searchbar-h .search-icon { .searchbar-h .search-icon {
position: absolute; position: absolute;
right: 35px; right: 1.823vw;
top: 30px; top: 1.563vw;
background: transparent !important; background: transparent !important;
border: 0; border: 0;
} }
...@@ -630,29 +629,6 @@ span.form-error, ...@@ -630,29 +629,6 @@ span.form-error,
font-family: "Sofia Pro Light"; font-family: "Sofia Pro Light";
} }
/*ST Images*/
.image-container {
width: auto;
position: relative;
}
.image-container > span {
position: unset !important;
/* display: inline-block !important; */
}
.image-container.d-inblock > span {
position: unset !important;
display: inline-block !important;
}
.image {
object-fit: contain;
width: 100% !important;
position: relative !important;
height: unset !important;
}
.login-banner-image { .login-banner-image {
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
...@@ -965,15 +941,15 @@ span.form-error, ...@@ -965,15 +941,15 @@ span.form-error,
.uploadProfileImage p { .uploadProfileImage p {
font-family: "Sofia Pro Bold"; font-family: "Sofia Pro Bold";
font-size: 20px; font-size: calc(16px + (20 - 16) * (100vw - 320px) / (1920 - 320));
line-height: 28px; line-height: calc(25px + (28 - 25) * (100vw - 320px) / (1920 - 320));
letter-spacing: 0em; letter-spacing: 0em;
color: #fff; color: #fff;
} }
/*-------- My Bookings ----------*/ /*-------- My Bookings ----------*/
.content-wraaper { .content-wraaper {
padding: 3rem 3rem 0; padding: 3rem 0 0;
} }
.content-wraaper h2 { .content-wraaper h2 {
...@@ -988,9 +964,9 @@ span.form-error, ...@@ -988,9 +964,9 @@ span.form-error,
.username { .username {
font-family: "Sofia Pro Light"; font-family: "Sofia Pro Light";
font-size: 21px; font-size: calc(16px + (21 - 16) * (100vw - 320px) / (1920 - 320));
line-height: calc(20px + (24 - 20) * (100vw - 320px) / (1920 - 320));
font-weight: 600; font-weight: 600;
line-height: 24px;
letter-spacing: 0em; letter-spacing: 0em;
text-align: left; text-align: left;
color: #000; color: #000;
...@@ -999,9 +975,9 @@ span.form-error, ...@@ -999,9 +975,9 @@ span.form-error,
.btn-edit { .btn-edit {
font-family: "Sofia Pro Light"; font-family: "Sofia Pro Light";
font-size: 18px; font-size: calc(16px + (18 - 16) * (100vw - 320px) / (1920 - 320));
line-height: calc(22px + (18 - 22) * (100vw - 320px) / (1920 - 320));
font-weight: 600; font-weight: 600;
line-height: 28px;
letter-spacing: 0em; letter-spacing: 0em;
text-align: center; text-align: center;
color: #808080; color: #808080;
...@@ -1009,8 +985,16 @@ span.form-error, ...@@ -1009,8 +985,16 @@ span.form-error,
border-radius: 6px; border-radius: 6px;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
cursor: pointer; cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.btn-edit > span:first-child {
margin-top: 0.2rem;
}
.btn-edit .image-container .image {
width: calc(16px + (20 - 16) * (100vw - 320px) / (1920 - 320)) !important;
} }
.content-wraaper label { .content-wraaper label {
color: #646464; color: #646464;
font-size: 18px; font-size: 18px;
...@@ -1172,8 +1156,8 @@ span.form-error, ...@@ -1172,8 +1156,8 @@ span.form-error,
.card-booking-content .details-div > p:first-child { .card-booking-content .details-div > p:first-child {
font-family: "Sofia Pro Light"; font-family: "Sofia Pro Light";
font-size: calc(14px + (14 - 14) * (100vw - 320px) / (1920 - 320) ); font-size: calc(14px + (14 - 14) * (100vw - 320px) / (1920 - 320));
line-height: calc(20px + (20 - 20) * (100vw - 320px) / (1920 - 320) ); line-height: calc(20px + (20 - 20) * (100vw - 320px) / (1920 - 320));
letter-spacing: 0em; letter-spacing: 0em;
text-align: left; text-align: left;
color: #808080; color: #808080;
...@@ -1183,8 +1167,8 @@ span.form-error, ...@@ -1183,8 +1167,8 @@ span.form-error,
.card-booking-content .details-div > p:last-child { .card-booking-content .details-div > p:last-child {
font-family: "Sofia Pro Light"; font-family: "Sofia Pro Light";
font-size: 16px; font-size: 16px;
font-size: calc(16px + (16 - 16) * (100vw - 320px) / (1920 - 320) ); font-size: calc(16px + (16 - 16) * (100vw - 320px) / (1920 - 320));
line-height: calc(20px + (20 - 20) * (100vw - 320px) / (1920 - 320) ); line-height: calc(20px + (20 - 20) * (100vw - 320px) / (1920 - 320));
letter-spacing: 0em; letter-spacing: 0em;
text-align: left; text-align: left;
color: #000000; color: #000000;
...@@ -1457,7 +1441,7 @@ span.form-error, ...@@ -1457,7 +1441,7 @@ span.form-error,
color: #ffffff; color: #ffffff;
border: none; border: none;
} }
.btnAdd:disabled .image-container .image{ .btnAdd:disabled .image-container .image {
width: 14px !important; width: 14px !important;
} }
.btnAdd:hover, .btnAdd:hover,
...@@ -1898,7 +1882,7 @@ span.form-error, ...@@ -1898,7 +1882,7 @@ span.form-error,
.browse-experiences-session { .browse-experiences-session {
background: #f7f5f1; background: #f7f5f1;
padding: 2rem 0; padding: 2rem 0 1rem;
} }
.similar-experiences-session { .similar-experiences-session {
...@@ -1981,20 +1965,20 @@ span.form-error, ...@@ -1981,20 +1965,20 @@ span.form-error,
height: 19px; height: 19px;
display: block; display: block;
} }
.rs{ .rs {
/* font-size: calc(32px + (55.008 - 32) * (100vw - 320px) / (1920 - 320)) */ /* font-size: calc(32px + (55.008 - 32) * (100vw - 320px) / (1920 - 320)) */
} }
.share-social-container{ .share-social-container {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.anticon.anticon-copy{ .anticon.anticon-copy {
cursor: pointer; cursor: pointer;
} }
.share-social-container .share-social-some-network{ .share-social-container .share-social-some-network {
margin-right: 1rem; margin-right: 1rem;
} }
.wishlist-share .wishlist{ .wishlist-share .wishlist {
width: 29px; width: 29px;
height: 29px; height: 29px;
} }
...@@ -2131,7 +2115,7 @@ span.form-error, ...@@ -2131,7 +2115,7 @@ span.form-error,
.signUp-to-experience-our-platform-session { .signUp-to-experience-our-platform-session {
background: url(../public/images/sign-up-exp-bg.webp) no-repeat; background: url(../public/images/sign-up-exp-bg.webp) no-repeat;
background-size: 100%; background-size: 100% 100%;
object-fit: cover; object-fit: cover;
padding: 4rem; padding: 4rem;
color: #fff; color: #fff;
...@@ -3500,7 +3484,7 @@ input[type="number"]::-webkit-outer-spin-button { ...@@ -3500,7 +3484,7 @@ input[type="number"]::-webkit-outer-spin-button {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.gift-card-amt>ul{ .gift-card-amt > ul {
display: grid; display: grid;
grid-gap: 20px; grid-gap: 20px;
grid-template-columns: repeat(auto-fill, minmax(calc(33.33% - 15px), 1fr)); grid-template-columns: repeat(auto-fill, minmax(calc(33.33% - 15px), 1fr));
...@@ -3723,10 +3707,12 @@ img:hover { ...@@ -3723,10 +3707,12 @@ img:hover {
font-size: 16px; font-size: 16px;
border-radius: 5px; border-radius: 5px;
} }
.see-my-gift-cards-row{ .see-my-gift-cards-row {
margin-bottom: 4rem; margin-bottom: 4rem;
} }
.browse-experiences-carousal .swiper-slide{
padding: 1rem;
}
@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;
...@@ -3815,14 +3801,15 @@ img:hover { ...@@ -3815,14 +3801,15 @@ img:hover {
} }
} }
@media (max-width: 1023px) { @media (max-width: 1023px) {
.gift-card-amt ul li a, .gift-card-amt ul li label { .gift-card-amt ul li a,
.gift-card-amt ul li label {
padding: 1.5rem 2.8rem; padding: 1.5rem 2.8rem;
} }
.gift-card-lt { .gift-card-lt {
width: 100%; width: 100%;
height: 200px; height: 200px;
padding-right: 0; padding-right: 0;
} }
.swiper-nav, .swiper-nav,
.home_nav { .home_nav {
margin-left: -33px; margin-left: -33px;
...@@ -3876,28 +3863,39 @@ img:hover { ...@@ -3876,28 +3863,39 @@ img:hover {
margin-right: 0; margin-right: 0;
} }
} }
@media (max-width: 991px) {
}
@media (max-width: 767px) { @media (max-width: 767px) {
.gift-an-experience-session {
margin-bottom: 2rem;
}
.content-wraaper label {
margin-top: 1rem;
}
.border-div {
padding: 1.5rem;
}
.gift-card-rt .title { .gift-card-rt .title {
font-size: 4.667vw; font-size: 4.667vw;
} }
.gift-card-amt>ul { .gift-card-amt > ul {
grid-gap: 10px; grid-gap: 10px;
} }
.gift-card-amt ul li a, .gift-card-amt ul li label { .gift-card-amt ul li a,
.gift-card-amt ul li label {
padding: 1rem; padding: 1rem;
} }
.see-my-gift-cards-row{ .see-my-gift-cards-row {
text-align: center; text-align: center;
margin-bottom: 3rem; margin-bottom: 3rem;
} }
.card-booking-img.bgGrey { .card-booking-img.bgGrey {
padding: 4rem 4rem; padding: 4rem 4rem;
} }
.rightContent h2 { .rightContent h2 {
font-size: 4.172vw; font-size: 4.172vw;
line-height: 4.172vw; line-height: 4.172vw;
} }
.sub-categories { .sub-categories {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
...@@ -4243,7 +4241,7 @@ img:hover { ...@@ -4243,7 +4241,7 @@ img:hover {
background: url(../public/images/sign-up-exp-bg-m.webp) no-repeat; background: url(../public/images/sign-up-exp-bg-m.webp) no-repeat;
background-size: 100%; background-size: 100%;
object-fit: cover; object-fit: cover;
padding: 1rem; padding: 2rem 1rem;
color: #fff; color: #fff;
} }
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!