Skip to content

Jay Mehta / zango-frontend

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

updated ui

1 parent c45eea89
Expand all
Inline Side-by-side
Showing 13 changed files with 315 additions and 37 deletions
components/detail/DetailInfo.js
......@@ -94,13 +94,14 @@ const DetailInfo = ({ activityById }) => {
</motion.div>
</div>
<div className="product-reviews">
<span className="rating">
<div className="rating">
<span className="number">{calculateRating(activityById.data.attributes.reviews.data)}</span>
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" />
{calculateRating(activityById.data.attributes.reviews.data)}
</span>
</span>
<span className="review">{activityById.data.attributes.reviews.data.length > 0 ? activityById.data.attributes.reviews.data.length : 0}</span>
</div>
<span className="review">{activityById.data.attributes.reviews.data.length > 0 ? activityById.data.attributes.reviews.data.length : 0} Review(s)</span>
{/* <span className="star">
<a href="">
<span className="image-container">
......@@ -133,7 +134,7 @@ const DetailInfo = ({ activityById }) => {
<div className="price">
${activityById.data.attributes.pricePerPerson} {activityById.data.attributes.offers && <span>{activityById.data.attributes.offers}% Off</span>}
</div>
<div className="mb-4">{activityById.data.attributes.description}</div>
<div className="my-3">{activityById.data.attributes.description}</div>
<div className="location">Location & Address</div>
{/* <div className="mb-2">Chelsea </div> */}
<div className="">{activityById.data.attributes.address}</div>
......@@ -152,6 +153,23 @@ const DetailInfo = ({ activityById }) => {
{loading ? <Loader /> : "Enquire Now"}
</Button>
<Button
disabled={loading}
// onClick={() => {
// if (!endUser) {
// setloginModal(true);
// } else {
// setenquiryModal(true);
// }
// }}
variant="primary"
>
Book Now
</Button>
</div>
<div className="mb-1">
<Button
onClick={() => {
if (!endUser) {
setloginModal(true);
......@@ -166,19 +184,6 @@ const DetailInfo = ({ activityById }) => {
<Image layout="fill" className="image img-fluid" src="/images/icons/gift-card-icon.svg" />
</span>
</Button>
<Button
disabled={loading}
// onClick={() => {
// if (!endUser) {
// setloginModal(true);
// } else {
// setenquiryModal(true);
// }
// }}
variant="primary"
>
Book Now
</Button>
</div>
</div>
</div>
......
components/home/BrowseExperiences.js
......@@ -19,7 +19,16 @@ import Link from "next/link.js";
import ActiveLink from "../common/ActiveLink.js";
const BrowseExperiences = ({ allActivitiesData }) => {
const { endUser } = useSelector(state => state.endUser);
const calculateRating = data => {
let value = 0;
data.map(item => {
// console.log("item", item);
value = value + item.attributes.rating;
});
// console.log("value", value);
let length = data.length;
return Math.floor(value / length);
};
const router = useRouter();
return (
......@@ -84,28 +93,26 @@ const BrowseExperiences = ({ allActivitiesData }) => {
<SwiperSlide key={data?.id}>
<motion.div variants={zoomIn("left", 0.3)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
<div className="browse-experiences-item">
<a href="/detail" className="img-wrapper">
<div className="img-wrapper">
<span className="image-container">
<img layout="fill" alt="" className="image img-fluid" src={cleanImage(data.attributes?.image?.data?.attributes)} />
</span>
{/* <div className="top-rated">Top Rated</div> */}
</a>
{data.attributes.rating > 100 && <div className="top-rated">Top Rated</div>}
</div>
<div className="info">
<div className="top-name">
<div className="title">{data?.attributes?.name}</div>
<div className="rating-wishlist">
{/* <div className="rating">
<span className="number">{data?.attributes?.rating}</span>
{data?.attributes?.reviews.data.length > 0 && (
<div className="rating">
{/* {console.log(">>", calculateRating(data?.attributes?.reviews.data))} */}
{<span className="number">{calculateRating(data?.attributes?.reviews.data)}</span>}
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" />
</span>
</div> */}
<div className="wishlist">
{endUser && <WishlistComponent activityId={data.id} userId={endUser.id} />}
{/* <span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/wishlist.svg" />
</span> */}
</div>
)}
{endUser && <WishlistComponent activityId={data.id} userId={endUser.id} />}
</div>
</div>
<div className="discription">
......
components/layout/Header.js
......@@ -13,6 +13,7 @@ import axios from "axios";
import ActiveLink from "../common/ActiveLink";
const Header = () => {
const [isGridViewOpen, setIsGridViewOpen] = useState(false);
const { loadedUser } = useSelector(state => state.loadedUser);
const { endUser } = useSelector(state => state.endUser);
const [open, setopen] = useState(false);
......@@ -22,6 +23,9 @@ const Header = () => {
// console.log("user", loadedUser);
const [isSticky, setIsSticky] = useState(false);
const router = useRouter();
const toggleGridViewDropdown = () => {
setIsGridViewOpen(!isGridViewOpen);
};
useEffect(() => {
const handleScroll = () => {
// Check if the scroll position is greater than a certain threshold
......@@ -148,8 +152,65 @@ const Header = () => {
{loadedUser && loadedUser.id ? (
<div className="top-btn">
<div className="logout-bk">
<p>Brand Logo</p>
<p>{loadedUser.phone}</p>
<a onClick={toggleGridViewDropdown} className="user-icon">
<span className="image-container user-pic">
<Image layout="fill" priority alt="" className="image img-fluid" src="/images/icons/user.svg" />
</span>
<span className="image-container arrow-d">
<Image layout="fill" priority alt="" className="image img-fluid" src="/images/icons/user-arrow-down.svg" />
</span>
</a>
{/* <p>{loadedUser.phone}</p> */}
<div className={`inner-box ${isGridViewOpen ? "open" : ""}`}>
<div className="user-info">
<div className="pic">
<span className="image-container">
<Image layout="fill" priority alt="" className="image img-fluid" src="/images/icons/user.svg" />
</span>
</div>
<div className="">
<div className="name">John Doe</div>
<div className="view-profile"><a href="">View Profile</a></div>
</div>
</div>
<div className="user-item">
<ul>
<li>
<a href="">
<span className="image-container">
<Image layout="fill" priority alt="" className="image img-fluid" src="/images/icons/my-booking.svg" />
</span>
My Bookings
</a>
</li>
<li>
<a href="">
<span className="image-container">
<Image layout="fill" priority alt="" className="image img-fluid" src="/images/icons/my-wishlist.svg" />
</span>
My Wishlist
</a>
</li>
<li>
<a href="">
<span className="image-container">
<Image layout="fill" priority alt="" className="image img-fluid" src="/images/icons/my-gift-card.svg" />
</span>
My Gift Card
</a>
</li>
<li>
<a href="">
<span className="image-container">
<Image layout="fill" priority alt="" className="image img-fluid" src="/images/icons/logout.svg" />
</span>
Logout
</a>
</li>
</ul>
</div>
</div>
</div>
<Button
onClick={async () => {
......
components/listing/ListingFilter.js
......@@ -105,6 +105,7 @@ const ListingFilter = () => {
</div>
{activityFilters.category ? (
<div className="inner">
<div className="data-filters-item">
<label>
<input
// checked={activityFilters.subCategories?.includes(data.attributes.name)}
......@@ -137,6 +138,7 @@ const ListingFilter = () => {
/>{" "}
Select all
</label>
</div>
{activityFilters &&
subCategories &&
subCategories.data.map(data => {
......
components/signup/Signup.js
......@@ -18,7 +18,9 @@ import { Loader } from "react-bootstrap-typeahead";
import qs from "qs";
import PhoneInput from "react-phone-input-2";
import OtpTimer from "../common-components/OtpTimer";
import TermsAndConditionModel from "./TermsAndConditionModel";
const Signup = props => {
const [isOpenEis, setIsOpenEis] = useState(false);
console.log("props.type", props.type);
const [otp, setOtp] = useState(new Array(4).fill(""));
const [isOtpSent, setOtpSent] = useState(false);
......@@ -259,7 +261,7 @@ const Signup = props => {
onChange={handleChange}
onBlur={handleBlur}
/>
<span className="checkmark"></span>I Agree to the <Link href="">terms & conditions*</Link>
<span className="checkmark"></span>I Agree to the <a onClick={() => { setIsOpenEis(true) }}>terms & conditions*</a>
</label>
<br />
......@@ -314,6 +316,7 @@ const Signup = props => {
</div>
)}
</div>
<TermsAndConditionModel isOpenEis={isOpenEis} setIsOpenEis={setIsOpenEis} />
</Fragment>
);
};
......
components/signup/TermsAndConditionModel.js 0 → 100644
import React from 'react'
import { Modal } from 'react-bootstrap'
const TermsAndConditionModel = ({ isOpenEis, setIsOpenEis }) => {
return (
<Modal show={isOpenEis} size="xl" dialogClassName="modal-01-session" aria-labelledby="contained-modal-title-vcenter" centered>
<Modal.Body>
<div className="modalWrapper">
<div className="closeIcon">
<button type="button" className="closeIconBtn" onClick={() => setIsOpenEis(false)}>
<img src="/images/icons/close_icon.svg" alt="close icon" />
</button>
</div>
<div className="modalBodyWrapper">
<div className="custom-content-inner">
<div className="row text-center aos-init aos-animate" data-aos="fade-up" data-aos-duration="1500">
<div className="col-12">
<h2 className="head01">Terms & Conditions</h2>
</div>
</div>
<div className='row mt-4'>
<div className='col-12'>
<p>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 exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur</p>
<p>
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 exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </p>
</div>
</div>
</div>
</div>
</div>
</Modal.Body>
</Modal>
)
}
export default TermsAndConditionModel
\ No newline at end of file
public/images/icons/logout.svg 0 → 100644
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_708_3452)">
<path d="M0.746094 1.14281C0.802666 0.994162 0.841643 0.834105 0.919122 0.699009C1.14847 0.299107 1.49575 0.109166 1.93472 0.1091C4.48969 0.108712 7.04466 0.108636 9.59964 0.110032C9.68953 0.110081 9.7808 0.119039 9.86909 0.136901C10.3857 0.24141 10.779 0.722442 10.7856 1.28233C10.7949 2.07788 10.7902 2.87362 10.7886 3.66927C10.7882 3.86574 10.6697 3.99695 10.5041 4.00016C10.3342 4.00346 10.2103 3.86782 10.2098 3.66463C10.2076 2.92472 10.2089 2.18479 10.2087 1.44487C10.2085 0.959238 9.99285 0.73059 9.53247 0.730522C7.0204 0.730152 4.50833 0.730085 1.99626 0.730592C1.54476 0.730683 1.33161 0.958466 1.33158 1.43963C1.3313 5.74231 1.3313 10.045 1.33157 14.3477C1.33161 14.8283 1.54529 15.0567 1.99647 15.0568C4.50854 15.0573 7.02061 15.0573 9.53268 15.0569C9.99259 15.0568 10.2085 14.8275 10.2087 14.342C10.2089 13.5717 10.2087 12.8013 10.2088 12.031C10.2088 11.9804 10.207 11.9293 10.2118 11.8791C10.2273 11.7164 10.3484 11.6017 10.5004 11.6024C10.6529 11.603 10.7761 11.7174 10.7859 11.8817C10.7943 12.023 10.7897 12.1653 10.7897 12.3072C10.79 12.9812 10.79 13.6553 10.7898 14.3293C10.7896 15.0579 10.4934 15.4708 9.83541 15.6609C9.82705 15.6633 9.82041 15.6725 9.81298 15.6785H1.71857C1.55594 15.6024 1.38237 15.545 1.23307 15.4462C0.957483 15.2637 0.828878 14.9667 0.746094 14.6446L0.746094 1.14281Z" fill="black"/>
<path d="M14.3978 7.58408C14.3359 7.51504 14.3012 7.47478 14.2649 7.4362C13.6787 6.81253 13.0921 6.18915 12.506 5.5654C12.469 5.52604 12.4301 5.48746 12.3996 5.44271C12.3123 5.31457 12.326 5.14755 12.4282 5.04041C12.5324 4.93128 12.6862 4.91851 12.8065 5.0127C12.8446 5.04251 12.8775 5.08016 12.9111 5.11593C13.6866 5.93979 14.4619 6.76374 15.2369 7.58802C15.4533 7.81811 15.4544 7.96781 15.2409 8.19487C14.4626 9.02282 13.6839 9.85032 12.9052 10.6779C12.8783 10.7065 12.852 10.7364 12.8224 10.7616C12.6981 10.8676 12.5429 10.8628 12.4323 10.7512C12.3205 10.6386 12.3116 10.4605 12.4133 10.3252C12.4429 10.2858 12.4782 10.2512 12.5119 10.2153C13.0948 9.59531 13.6776 8.97511 14.2617 8.35628C14.2984 8.31739 14.3453 8.28945 14.3875 8.25641C14.3803 8.23872 14.373 8.22102 14.3658 8.20332C14.3135 8.20332 14.2612 8.20332 14.2089 8.20332C11.249 8.20332 8.28918 8.20333 5.32932 8.20323C5.27214 8.20323 5.21475 8.20498 5.15781 8.20065C4.99613 8.18837 4.87875 8.05986 4.87697 7.89656C4.87519 7.73345 4.99197 7.60056 5.15219 7.5871C5.20908 7.58232 5.2665 7.58418 5.32368 7.58418C8.28357 7.58406 11.2435 7.58408 14.2033 7.58408H14.3978Z" fill="black"/>
<path d="M10.5052 11.25C10.6679 11.25 10.7999 11.1097 10.7999 10.9366C10.7999 10.7636 10.6679 10.6233 10.5052 10.6233C10.3424 10.6233 10.2104 10.7636 10.2104 10.9366C10.2104 11.1097 10.3424 11.25 10.5052 11.25Z" fill="black"/>
</g>
<defs>
<clipPath id="clip0_708_3452">
<rect width="14.6538" height="15.5697" fill="white" transform="translate(0.746094 0.108856)"/>
</clipPath>
</defs>
</svg>
public/images/icons/my-booking.svg 0 → 100644
<svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_708_3436)">
<path d="M0.746094 5.29423C0.843181 4.98186 0.932112 4.66829 1.14838 4.40975C1.50451 3.98402 1.95185 3.75309 2.49651 3.74836C3.50414 3.73961 4.5119 3.74558 5.5196 3.74542C5.58323 3.74542 5.64685 3.74542 5.73487 3.74542C5.73487 3.63994 5.73312 3.54635 5.73516 3.45284C5.74553 2.97965 5.7143 2.50045 5.7772 2.03463C5.89036 1.19668 6.64435 0.523988 7.47403 0.514107C8.98536 0.496107 10.4972 0.494599 12.0085 0.513841C12.9543 0.525883 13.7332 1.35704 13.7537 2.32744C13.7623 2.73528 13.7562 3.14345 13.7568 3.55147C13.7569 3.60982 13.7568 3.66816 13.7568 3.74542C13.8375 3.74542 13.9002 3.74542 13.9629 3.74542C14.9472 3.74543 15.9315 3.74406 16.9157 3.74581C17.9778 3.7477 18.7442 4.53123 18.7452 5.61679C18.7466 7.1469 18.7456 8.67701 18.7456 10.2071C18.7456 10.2131 18.7456 10.2191 18.7456 10.2251C18.7442 10.5208 18.6181 10.6909 18.3981 10.6939C18.177 10.6969 18.0437 10.5252 18.0427 10.2336C18.0417 9.96355 18.0425 9.69353 18.0425 9.42351V9.1982C17.3333 9.79543 16.5071 9.56338 15.6922 9.62917C15.6922 9.86704 15.7077 10.1002 15.6893 10.3306C15.625 11.1361 14.9602 11.7237 14.1728 11.6835C13.3008 11.6391 12.7357 11.0365 12.7252 10.1388C12.7232 9.97207 12.7249 9.80531 12.7249 9.62796H6.76644C6.76644 9.81272 6.77038 9.99676 6.76574 10.1806C6.74858 10.861 6.37292 11.4072 5.79488 11.5973C4.74628 11.9423 3.8036 11.254 3.78351 10.1279C3.78063 9.96636 3.78311 9.80476 3.78311 9.6299C2.99528 9.55802 2.16576 9.79827 1.45919 9.20563V15.0511H1.66176C3.09715 15.0511 4.53255 15.0507 5.96794 15.0522C6.04905 15.0523 6.1344 15.0539 6.21037 15.0787C6.36637 15.1295 6.44791 15.2483 6.44517 15.4182C6.44257 15.5803 6.36143 15.6931 6.21293 15.7414C6.13679 15.7661 6.05181 15.7701 5.97081 15.7702C4.54127 15.7718 3.11174 15.7713 1.6822 15.7713H1.47302C1.47228 16.2199 1.79865 16.6304 2.24843 16.7399C2.37774 16.7713 2.51531 16.7778 2.64909 16.7779C7.3771 16.7797 12.1051 16.7794 16.8331 16.7794C17.626 16.7793 18.0424 16.3502 18.0425 15.5334C18.0425 14.8134 18.0424 14.0933 18.0426 13.3733C18.0426 13.3193 18.04 13.2649 18.045 13.2114C18.0643 13.0029 18.2133 12.8554 18.3985 12.8583C18.5779 12.861 18.7203 13.0027 18.7424 13.2025C18.7469 13.2441 18.7455 13.2864 18.7455 13.3284C18.7456 14.0965 18.7469 14.8645 18.7452 15.6326C18.7429 16.7076 17.9762 17.4985 16.9281 17.4989C12.1415 17.5005 7.35494 17.5002 2.56834 17.499C1.67283 17.4988 0.988886 16.9401 0.780926 16.049C0.77315 16.0157 0.757874 15.9842 0.746094 15.9518C0.746094 12.3993 0.746094 8.84677 0.746094 5.29423ZM15.7278 8.89649C16.0952 8.89649 16.4687 8.89929 16.8422 8.89589C17.5473 8.88947 18.0364 8.39323 18.0414 7.67332C18.0462 6.97743 18.0492 6.28136 18.0375 5.58565C18.0346 5.41663 17.9996 5.23477 17.9296 5.08289C17.7251 4.63914 17.3558 4.46437 16.8873 4.46454C12.125 4.46632 7.36266 4.46563 2.60035 4.46566C2.56521 4.46566 2.53003 4.46519 2.49492 4.46657C1.91255 4.48951 1.46772 4.92198 1.45488 5.51784C1.43887 6.26137 1.44017 7.00576 1.45449 7.74937C1.46508 8.29971 1.82081 8.77927 2.3416 8.84977C2.81067 8.91327 3.2944 8.86316 3.77728 8.86316C3.7789 8.82551 3.78162 8.77786 3.78289 8.73017C3.79297 8.35161 3.96925 8.17468 4.33977 8.17429C4.96069 8.17364 5.5816 8.17378 6.20252 8.17423C6.58927 8.1745 6.7594 8.34444 6.7673 8.73498C6.76833 8.78616 6.77477 8.83722 6.77836 8.88394H12.7179C12.7206 8.83083 12.7283 8.78918 12.7239 8.74893C12.6829 8.37658 12.962 8.15667 13.2934 8.16845C13.8668 8.18883 14.4413 8.17409 15.0154 8.1741C15.5697 8.1741 15.6731 8.2734 15.712 8.84221C15.7128 8.85371 15.7184 8.86486 15.7278 8.89649ZM12.3506 3.73552H13.0528C13.0528 3.27741 13.0598 2.82886 13.0512 2.38062C13.0386 1.72883 12.5772 1.23657 11.9386 1.23118C10.4745 1.21882 9.01022 1.22002 7.5461 1.2314C6.99097 1.23571 6.52029 1.6274 6.46674 2.17377C6.41636 2.68786 6.45594 3.21121 6.45594 3.73121H7.14109C7.14109 3.28573 7.14051 2.85441 7.14127 2.42309C7.1419 2.06882 7.26052 1.94655 7.60569 1.94643C9.02891 1.94591 10.4521 1.946 11.8753 1.94636C12.2347 1.94645 12.3499 2.06409 12.3504 2.43018C12.351 2.86087 12.3506 3.29156 12.3506 3.73552ZM11.64 2.68035H7.85495V3.73453H11.64V2.68035ZM4.48629 8.90021C4.48629 8.97397 4.48601 9.02721 4.48634 9.08045C4.48875 9.47035 4.47417 9.86137 4.49823 10.2499C4.52642 10.705 4.85149 10.9758 5.30669 10.9618C5.75755 10.9479 6.05322 10.6517 6.0616 10.191C6.06879 9.79507 6.06362 9.39892 6.06261 9.00288C6.06252 8.96956 6.05254 8.93626 6.04671 8.90021H4.48629ZM13.4318 8.90093C13.4318 9.36229 13.422 9.80595 13.4346 10.2489C13.4465 10.6655 13.76 10.9505 14.189 10.962C14.6236 10.9736 14.9608 10.7144 14.986 10.2993C15.0136 9.84532 14.9965 9.38844 14.9978 8.9328C14.9978 8.92343 14.9849 8.91402 14.9753 8.90093H13.4318Z" fill="black"/>
<path d="M7.47996 15.0531C7.66449 15.0489 7.83085 15.2095 7.83862 15.3992C7.84652 15.5924 7.67651 15.7701 7.48484 15.7688C7.29667 15.7676 7.14069 15.6069 7.13965 15.4132C7.13861 15.2186 7.29104 15.0573 7.47996 15.0531Z" fill="black"/>
<path d="M18.7428 11.7309C18.748 11.9171 18.5862 12.0908 18.4023 12.0962C18.2204 12.1016 18.0508 11.9359 18.0455 11.7475C18.0403 11.5612 18.2021 11.3876 18.386 11.3821C18.5679 11.3768 18.7375 11.5425 18.7428 11.7309Z" fill="black"/>
</g>
<defs>
<clipPath id="clip0_708_3436">
<rect width="18" height="17" fill="white" transform="translate(0.746094 0.5)"/>
</clipPath>
</defs>
</svg>
public/images/icons/my-gift-card.svg 0 → 100644
<svg width="21" height="13" viewBox="0 0 21 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_708_3443)">
<path d="M0.746094 0.904696C0.768634 0.858557 0.791438 0.812515 0.813674 0.766264C0.974804 0.431123 1.25924 0.242719 1.67563 0.213594C1.75334 0.208159 1.83176 0.209456 1.90985 0.209453C6.0048 0.209278 10.0998 0.209271 14.1947 0.20951C14.2728 0.209515 14.3516 0.207221 14.4287 0.215513C14.5883 0.232679 14.6745 0.323813 14.6806 0.456752C14.6863 0.58283 14.6085 0.676552 14.4627 0.705644C14.3816 0.721839 14.2951 0.721652 14.211 0.721686C12.2644 0.72249 10.3178 0.722309 8.37126 0.722311H8.10615V3.1224C8.15793 3.10619 8.21063 3.09268 8.26055 3.0736C8.63576 2.93011 9.00828 2.78106 9.38573 2.64226C10.0977 2.38047 10.8233 2.65758 11.0699 3.29575C11.1223 3.43162 11.2135 3.41609 11.321 3.4161C13.9055 3.41631 16.4901 3.41627 19.0747 3.41627C19.4259 3.41627 19.7771 3.41627 20.1598 3.41627V3.24489C20.1598 2.54948 20.1604 1.85406 20.1595 1.15865C20.1591 0.845986 20.0212 0.723311 19.6628 0.72291C18.4258 0.721527 17.1889 0.722353 15.9519 0.722254C15.8934 0.72225 15.8345 0.724722 15.7763 0.720411C15.5866 0.706367 15.4734 0.6104 15.4718 0.465976C15.4701 0.315044 15.5894 0.211425 15.7909 0.211158C17.1255 0.209391 18.4601 0.203832 19.7946 0.21551C20.355 0.220414 20.7442 0.604829 20.745 1.1159C20.747 2.55233 20.7457 3.98876 20.7457 5.42518C20.7457 7.35752 20.7458 9.28986 20.7456 11.2222C20.7456 11.8619 20.3574 12.2021 19.6245 12.2021C13.7457 12.2025 7.86695 12.1983 1.9882 12.2083C1.37181 12.2093 0.944154 12.0345 0.746094 11.5069C0.746094 7.97286 0.746094 4.43878 0.746094 0.904696ZM8.10452 8.14045V11.6893H8.32678C12.0889 11.6893 15.851 11.6894 19.6131 11.6892C20.0348 11.6891 20.1597 11.5792 20.1597 11.2109C20.1599 9.34168 20.1598 7.47245 20.1598 5.60322V5.39992C20.0652 5.39992 19.9886 5.39991 19.912 5.39991C18.1741 5.39991 16.4363 5.39991 14.6984 5.39991C13.5529 5.39992 12.4073 5.39987 11.2617 5.40004C11.1723 5.40005 11.0984 5.3929 11.0446 5.49444C10.7129 6.11928 10.0468 6.33342 9.32595 6.05893C9.23636 6.02481 9.1455 5.99323 9.01315 5.94521C9.27035 6.36392 9.50169 6.73954 9.73181 7.11573C9.81238 7.24744 9.81184 7.38001 9.71234 7.50296C9.61702 7.62074 9.47886 7.66322 9.31801 7.64237C9.19595 7.62655 9.07383 7.6082 8.95409 7.58254C8.85354 7.56099 8.79303 7.58179 8.76593 7.67326C8.74969 7.72809 8.72336 7.78071 8.70029 7.8339C8.57493 8.12284 8.45861 8.18293 8.10452 8.14045ZM5.82682 11.6802C5.82682 11.6034 5.82681 11.5365 5.82682 11.4697C5.82693 11.0765 5.82398 10.6832 5.8286 10.2901C5.8306 10.1191 5.95449 10.0066 6.12138 10.0065C6.28201 10.0064 6.40321 10.115 6.41122 10.2731C6.41642 10.3754 6.4127 10.4782 6.41272 10.5807C6.41279 10.9439 6.41275 11.307 6.41275 11.6762H7.4994C7.50239 11.6359 7.50624 11.6082 7.50624 11.5804C7.50658 10.1843 7.5067 8.78813 7.50607 7.39198C7.50605 7.35261 7.51046 7.30729 7.49097 7.27479C7.32351 6.9955 7.15101 6.71852 6.96247 6.41236C6.79285 6.68639 6.63618 6.92745 6.49456 7.17511C6.44742 7.25753 6.41758 7.35665 6.41628 7.44853C6.40894 7.96702 6.41624 8.48567 6.4089 9.00416C6.40778 9.08326 6.38257 9.19005 6.32157 9.23334C6.24852 9.28518 6.1186 9.31228 6.02497 9.29663C5.88306 9.2729 5.82719 9.16045 5.82713 9.03428C5.827 8.73858 5.82709 8.44289 5.82709 8.13425C5.25873 8.26157 5.26371 7.83122 5.09763 7.56743C4.92707 7.5937 4.76802 7.62106 4.60788 7.64206C4.4478 7.66305 4.30976 7.62312 4.21295 7.50463C4.11217 7.38128 4.11294 7.24988 4.18997 7.11758C4.23423 7.04156 4.28284 6.96748 4.32898 6.89228C4.51462 6.58968 4.70006 6.28699 4.90891 5.94627C4.71928 6.01396 4.57914 6.06944 4.43477 6.11452C3.91304 6.27741 3.28504 6.13665 3.0307 5.71412C2.8464 5.40793 2.61648 5.3694 2.29206 5.39771C2.14383 5.41065 1.99292 5.39991 1.84322 5.39991H1.33202C1.33202 5.48164 1.33202 5.53822 1.33202 5.5948C1.33202 7.46963 1.33192 9.34446 1.33211 11.2193C1.33214 11.5769 1.45923 11.6889 1.86854 11.6891C3.11817 11.6897 4.3678 11.6894 5.61743 11.689C5.68067 11.6889 5.74391 11.6838 5.82682 11.6802ZM1.33202 3.41625C1.77178 3.41625 2.1928 3.41252 2.61364 3.41844C2.74689 3.42031 2.81514 3.39408 2.86201 3.26944C3.0322 2.81689 3.51341 2.51476 4.05741 2.55343C4.32079 2.57215 4.58112 2.67132 4.83281 2.75672C5.16305 2.86876 5.4834 3.00316 5.81553 3.13084V0.734974C5.78058 0.730116 5.75589 0.723689 5.73119 0.723677C4.41 0.723062 3.0888 0.721087 1.76763 0.724346C1.47884 0.725058 1.3337 0.865293 1.33274 1.12656C1.3306 1.70779 1.33204 2.28904 1.33202 2.87028C1.33201 3.04565 1.33202 3.22102 1.33202 3.41625ZM11.1428 4.873H20.1477V3.94256H11.1428V4.873ZM3.36982 4.35897H3.37054C3.37054 4.59831 3.3648 4.83777 3.37178 5.07695C3.38473 5.52068 3.83395 5.78252 4.29834 5.61284C4.71201 5.4617 5.12149 5.30131 5.52729 5.13467C5.58239 5.11204 5.63647 5.03001 5.63813 4.97429C5.65049 4.55867 5.65346 4.14271 5.64739 3.72699C5.64669 3.6789 5.58439 3.60928 5.53066 3.58755C5.1296 3.42535 4.72519 3.26925 4.31857 3.11795C3.83113 2.93659 3.38166 3.19351 3.37077 3.65807C3.3653 3.89161 3.36982 4.12533 3.36982 4.35897ZM10.5499 4.36536C10.5499 4.11482 10.5572 3.86407 10.5482 3.61378C10.5337 3.21063 10.0943 2.9475 9.66761 3.09712C9.22788 3.2513 8.79759 3.42641 8.36662 3.59896C8.32365 3.61617 8.27889 3.67898 8.27844 3.72099C8.27389 4.14223 8.27477 4.56362 8.28521 4.98476C8.28649 5.03623 8.33927 5.1121 8.39122 5.13323C8.80336 5.30078 9.21782 5.46475 9.63797 5.6162C10.0923 5.77998 10.5402 5.51417 10.5493 5.08282C10.5543 4.84375 10.5502 4.60452 10.5499 4.36536ZM7.69581 4.37875C7.69581 4.20236 7.70011 4.02588 7.69491 3.84961C7.68411 3.48358 7.37067 3.20393 6.97147 3.19893C6.57874 3.19401 6.25008 3.45428 6.23317 3.81556C6.21537 4.19611 6.21561 4.57829 6.23349 4.95884C6.25045 5.32013 6.58032 5.58152 6.9715 5.57524C7.37549 5.56875 7.6841 5.29367 7.69486 4.92495C7.70016 4.743 7.69578 4.56083 7.69581 4.37875ZM7.49977 0.738004H6.4253V2.78791C6.78892 2.64805 7.14212 2.66149 7.49977 2.78102V0.738004ZM2.77334 3.94261H1.34296V4.87626H2.77334V3.94261ZM7.41383 6.06422C7.68248 6.49852 7.9573 6.94278 8.25929 7.43098C8.37018 7.01458 8.66279 6.98301 9.04687 7.08072C8.71735 6.54794 8.41427 6.05793 8.11908 5.58066C7.8693 5.75193 7.65239 5.90065 7.41383 6.06422ZM5.80326 5.5797C5.50402 6.06545 5.20308 6.55397 4.87449 7.08739C5.28722 6.9712 5.56301 7.03473 5.66818 7.42708C5.83043 7.1641 5.96809 6.94145 6.10523 6.71856C6.24535 6.4908 6.38496 6.2628 6.507 6.0639C6.26807 5.89951 6.05185 5.75074 5.80326 5.5797Z" fill="black"/>
</g>
<defs>
<clipPath id="clip0_708_3443">
<rect width="20" height="12" fill="white" transform="translate(0.746094 0.208282)"/>
</clipPath>
</defs>
</svg>
public/images/icons/my-wishlist.svg 0 → 100644
<svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_708_3440)">
<path d="M9.24026 2.94703C9.71309 2.54139 10.1658 2.10309 10.6667 1.73187C12.9966 0.00516993 15.6852 1.04769 16.8965 2.94482C18.0657 4.77602 17.988 6.65089 16.91 8.49932C16.7115 8.83964 16.4486 9.15053 16.1744 9.43409C15.3725 10.2633 14.5515 11.0736 13.7344 11.8876C13.4848 12.1363 13.2058 12.1516 13.0042 11.944C12.8064 11.7403 12.8321 11.4439 13.0727 11.203C13.275 11.0004 13.4841 10.8046 13.6849 10.6005C14.3878 9.88598 15.1417 9.21469 15.7791 8.44402C17.2699 6.64143 17.0999 4.06649 15.3313 2.6299C14.2195 1.72683 12.6785 1.41499 11.157 2.54409C10.6047 2.95393 10.1211 3.43264 9.69992 3.97868C9.38402 4.38824 9.08509 4.38175 8.7723 3.96014C8.36572 3.41211 7.89139 2.93534 7.34425 2.53108C5.37654 1.07722 3.21204 2.05516 2.28553 3.62068C1.42542 5.07402 1.5183 6.54494 2.36645 7.96494C2.65812 8.45327 3.02762 8.90571 3.41879 9.31863C5.23257 11.2332 7.21471 12.9633 9.19744 14.6918C9.21511 14.7072 9.23656 14.7182 9.27217 14.7417C9.48069 14.5809 9.69113 14.4146 9.90579 14.2541C10.1592 14.0647 10.4277 14.0863 10.5999 14.304C10.7771 14.528 10.7323 14.8148 10.4783 15.018C10.1808 15.256 9.87986 15.4898 9.57565 15.7188C9.33354 15.9011 9.13396 15.9016 8.90975 15.7065C6.72185 13.8026 4.53021 11.9028 2.5412 9.77824C1.7446 8.92735 1.13871 7.96757 0.873508 6.80981C0.266307 4.15902 1.88874 1.512 4.47604 0.95102C5.80914 0.661974 6.99378 1.03891 8.04769 1.86796C8.47552 2.20451 8.859 2.59922 9.24026 2.94703Z" fill="black"/>
<path d="M11.7848 13.5783C11.5329 13.5742 11.3225 13.3588 11.3208 13.1034C11.319 12.8375 11.5395 12.6148 11.8002 12.6192C12.0603 12.6236 12.2757 12.8551 12.2647 13.1186C12.2541 13.3729 12.0354 13.5825 11.7848 13.5783Z" fill="black"/>
</g>
<defs>
<clipPath id="clip0_708_3440">
<rect width="17" height="15" fill="white" transform="translate(0.746094 0.854248)"/>
</clipPath>
</defs>
</svg>
public/images/icons/user-arrow-down.svg 0 → 100644
<svg width="18" height="11" viewBox="0 0 18 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.32959 1.81445L8.66485 9.14972L16.0001 1.81446" stroke="black" stroke-width="2.5" stroke-linecap="round"/>
</svg>
styles/globals.css
......@@ -2400,7 +2400,7 @@ footer hr {
}
.data-filters-item {
margin-bottom: 0.5rem;
margin-bottom: 0.7rem;
}
.accordion-filter.accordion-flush .accordion-item .accordion-button {
......@@ -2634,13 +2634,26 @@ footer hr {
.product-reviews .rating {
background: #002c5f;
border-radius: 4px;
padding: 5px;
color: #fff;
font-size: calc(12px + (14 - 12) * (100vw - 320px) / (1920 - 320));
padding: 0.1rem 0.3rem;
margin-right: 10px;
height: calc(20px + (23 - 20) * (100vw - 320px) / (1920 - 320));
display: flex;
align-items: center;
justify-content: center;
}
.product-reviews .rating .image-container {
width: calc(12px + (13 - 12) * (100vw - 320px) / (1920 - 320));
/* margin-top: -4px; */
margin-left: 4px;
}
.product-reviews .rating .number {
padding-top: 0.2rem;
}
.product-info .product-reviews .review {
margin-right: 10px;
margin-left: 0;
}
.product-info .product-name {
......@@ -2681,7 +2694,9 @@ footer hr {
.btn-row {
padding: 2rem 0;
}
.product-info .btn-row {
padding: 1rem 0;
}
.image-container.btn-gift {
width: 0.938vw;
display: inline-block;
......@@ -2897,9 +2912,87 @@ button:focus:not(:focus-visible) {
}
.logout-bk {
/* display: none; */
color: #000;
}
header .top-btn {
display: flex;
align-items: center;
}
header .top-btn .user-icon {
padding: 0;
margin: 0 0.5rem;
display: flex;
align-items: center;
cursor: pointer;
}
header .top-btn .user-icon .image-container.user-pic {
width: 37px;
display: inline-block;
margin-right: 0.5rem;
}
header .top-btn .user-icon .image-container.arrow-d {
width: 12px;
display: inline-block;
}
.top-btn .inner-box {
box-shadow: 0px 4px 15.9px 0px #00000040;
background: #fff;
width: 300px;
position: absolute;
right: 0;
top: 40px;
z-index: 1;
/* padding: 1.5rem; */
display: none;
border-radius: 9px;
}
.top-btn .inner-box.open {
display: block;
}
.logout-bk {
position: relative;
}
.user-info {
background: #eaf6ff;
padding: 1rem;
display: flex;
align-items: center;
border-radius: 9px 9px 0 0;
}
.user-info .image-container {
width: 52px;
display: inline-block;
margin-right: 1rem;
}
.user-info .view-profile a {
font-size: 11px;
color: #808080;
text-decoration: underline !important;
}
.user-item {
padding: 1rem;
background: #fff;
border-radius: 0 0 9px 9px;
}
.user-item ul {
margin: 0;
padding: 0;
}
.user-item ul li a {
display: flex;
align-items: center;
color: #000000;
font-size: 14px;
padding: 0.5rem 0;
}
.user-item ul li a .image-container {
margin-right: 0.5rem;
flex: 0 0 auto;
width: 20px;
}
.accordion-01 .accordion-button {
font-size: 1.042vw;
line-height: 1.042vw;
......@@ -3959,6 +4052,19 @@ footer .footer-link ul {
.contact-numbe .special-label {
display: none !important;
}
.modal-01-session .closeIcon {
position: absolute;
right: 1.5rem;
top: 1rem;
width: 20px;
}
.modal-01-session .closeIcon .closeIconBtn {
border: 0;
background: transparent;
}
.modal-01-session .closeIcon .closeIconBtn img {
width: 20px;
}
@media (min-width: 992px) {
.navbar-expand-lg .navbar-nav .nav-link {
margin: 0 2rem;
......@@ -4149,6 +4255,7 @@ footer .footer-link ul {
justify-content: center;
}
.btn-primary,
.btn-secondary,
.vendor-signup a {
padding: 0.6rem 2rem;
}
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!