Skip to content

Jay Mehta / zango-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit d452f150 by Jyotsna
Options

vendor business details form ui

1 parent 3c81ef95
Inline Side-by-side
Showing 6 changed files with 414 additions and 129 deletions
components/user/MyProfile.js
......@@ -32,8 +32,8 @@ const MyProfile = () => {
country: Yup.string().required('Country is required'),
state: Yup.string().required('State is required'),
city: Yup.string().required('City is required'),
address_line1: Yup.string().required('Address Line1 is required'),
address_line2: Yup.string().required('Adrress Line2 is required')
addressLine1: Yup.string().required('Address Line1 is required'),
addressLine2: Yup.string().required('Adrress Line2 is required')
})
)
});
......@@ -75,7 +75,7 @@ const MyProfile = () => {
<h2>My Profile</h2>
<Table className='abc'>
<Table className='abc'>
<thead>
<tr>
<th>1</th>
......@@ -113,7 +113,7 @@ const MyProfile = () => {
<td>33</td>
</tr>
</tbody>
</Table>
</Table>
<div className="bg-white border-div">
<Formik
initialValues={{ profile_image: null }}
......@@ -158,14 +158,16 @@ const MyProfile = () => {
}}
>
<div className="d-flex align-items-center justify-content-between">
<div className="col-lg-8 d-flex align-items-center">
<img src="/images/user/user-big.jpg" layout="fill" className="image-fluid me-4" />
<div className="col-lg-6 d-flex align-items-center">
<span className="image-container me-4">
<Image layout="fill" alt="" src="/images/user/user-big.jpg" className="image" />
</span>
<p className="username">John Doe</p>
</div>
<div className="col-lg-2">
<label className="custom-file-input" htmlFor="file-upload">
<p className="mb-0">Upload</p>
<img src="/images/user/icon-upload.svg" layout="fill" className="image-fluid pb-1" />
<div className="col-lg-4">
<label className="uploadProfileImage" htmlFor="file-upload">
<p className="mb-0">Upload Profile Photo</p>
<Image alt="" src="/images/user/icon-upload.svg" width="24" height="24" className="pb-1" />
</label>
<input
type="file"
......@@ -174,6 +176,10 @@ const MyProfile = () => {
onChange={handleProfileUploadChange}
// onBlur={handleBlur}
style={{ display: "none" }}
onClick={event => {
const { target = {} } = event || {};
target.value = "";
}}
/>
{errors.profile_image && touched.profile_image && (<span className="form-error">{errors.profile_image}</span>)}
</div>
......@@ -417,12 +423,12 @@ const MyProfile = () => {
<label>Address Line 1</label>
<input
type="text"
name="address_line1"
name="addressLine1"
onChange={handleChange}
onBlur={handleBlur}
value={values.address_line1}
value={values.addressLine1}
/>
{errors.address_line1 && touched.address_line1 && (<span className="form-error">{errors.address_line1}</span>)}
{errors.addressLine1 && touched.addressLine1 && (<span className="form-error">{errors.addressLine1}</span>)}
</div>
</div>
<div className="col-12 offset-lg-1 col-lg-5">
......@@ -430,12 +436,12 @@ const MyProfile = () => {
<label>Address Line 2</label>
<input
type="text"
name="address_line2"
name="addressLine2"
onChange={handleChange}
onBlur={handleBlur}
value={values.address_line2}
value={values.addressLine2}
/>
{errors.address_line2 && touched.address_line2 && (<span className="form-error">{errors.address_line2}</span>)}
{errors.addressLine2 && touched.addressLine2 && (<span className="form-error">{errors.addressLine2}</span>)}
</div>
</div>
</div>
......
components/vendor/BusinessDetails.js
......@@ -2,20 +2,22 @@ import { Formik } from "formik";
import { Fragment } from "react";
import { Button, Form } from "react-bootstrap";
import * as Yup from "yup";
import { FaArrowRight, FaTimes } from "react-icons/fa";
import Image from "next/image";
const BusinessDetails = () => {
const businessDetailsValidationSchema = Yup.object().shape({
pan_number: Yup.string()
panNumber: Yup.string()
.required("Pan Number is Required"),
pan_file: Yup.string()
panFile: Yup.mixed()
.required("Pan Image is Required"),
gst_number: Yup.string()
gstNumber: Yup.string()
.required("GST Number is Required"),
gst_certificate_file: Yup.string()
gstCertificateFile: Yup.mixed()
.required("GST Certificate is Required"),
business_name: Yup.string()
businessName: Yup.string()
.required("Business Name is Required"),
brand_logo_file: Yup.string()
brandLogoFile: Yup.mixed()
.required("Brand Logo is Required"),
pincode: Yup.string()
.required("Pincode is Required"),
......@@ -25,9 +27,9 @@ const BusinessDetails = () => {
.required("State is Required"),
city: Yup.string()
.required("City is Required"),
address_line1: Yup.string()
addressLine1: Yup.string()
.required("Address Line 1 is Required"),
address_line2: Yup.string()
addressLine2: Yup.string()
.required("Address Line 2 is Required"),
});
......@@ -39,24 +41,24 @@ const BusinessDetails = () => {
<div className="content-div business-details">
<h2>Tell us about your business</h2>
<p>Please have the following ready before you begin</p>
<p><i className="fa fa-arrow-right me-1"></i> Your bank account details for receiving payments from ZanGO</p>
<p><i className="fa fa-arrow-right me-1"></i> Tax (GST/PAN) details of your business.</p>
<p><FaArrowRight /> Your bank account details for receiving payments from ZanGO</p>
<p className="mb-4"><FaArrowRight /> Tax (GST/PAN) details of your business.</p>
<hr />
<div className="form-container">
<div className="form-container mt-4">
<Formik
initialValues={{
pan_number: "",
pan_file: "",
gst_number: "",
gst_certificate_file: "",
business_name: "",
brand_logo_file: "",
panNumber: "",
panFile: "",
gstNumber: "",
gstCertificateFile: "",
businessName: "",
brandLogoFile: "",
pincode: "",
country: "",
state: "",
city: "",
address_line1: "",
address_line2: ""
addressLine1: "",
addressLine2: ""
}}
validationSchema={businessDetailsValidationSchema}
// enableReinitialize={true}
......@@ -64,7 +66,7 @@ const BusinessDetails = () => {
console.log("business details values", values)
}}
>
{({ values, errors, touched, handleChange, handleBlur, handleSubmit }) => (
{({ values, errors, touched, handleChange, handleBlur, handleSubmit, setFieldValue }) => (
<Form
onSubmit={e => {
e.preventDefault();
......@@ -72,33 +74,58 @@ const BusinessDetails = () => {
}}
>
<h4>Vendor Business Information</h4>
<div>
<p>Business documents</p>
<div className="mt-3">
<p className="textH">Business documents</p>
<div className="row">
<div className="col-12 col-lg-5">
<div className="input-group">
<label>Enter Business PAN No.</label>
<input
type="text"
name="pan_number"
name="panNumber"
onChange={handleChange}
onBlur={handleBlur}
value={values.pan_number}
value={values.panNumber}
/>
{errors.pan_number && touched.pan_number && (<span className="form-error">{errors.pan_number}</span>)}
{errors.panNumber && touched.panNumber && (<span className="form-error">{errors.panNumber}</span>)}
</div>
</div>
<div className="col-12 offset-lg-1 col-lg-5">
<div className="input-group">
<label>Upload PAN</label>
<div className="custom-file">
<input
type="file"
name="pan_file"
onChange={handleChange}
className="custom-file-input"
id="panFile"
name="panFile"
onChange={(event) => {
if (event) {
const file = event.currentTarget.files[0]
setFieldValue("panFile", file)
}
}}
onBlur={handleBlur}
value={values.pan_file}
// value={values.panFile}
onClick={event => {
const { target = {} } = event || {};
target.value = "";
}}
/>
{errors.pan_file && touched.pan_file && (<span className="form-error">{errors.pan_file}</span>)}
<label className="custom-file-label" htmlFor="panFile">
Upload
</label>
</div>
<p className="textS">Upload in .PNG or .JPG/JPEG format</p>
{errors.panFile && touched.panFile && (<span className="form-error">{errors.panFile}</span>)}
{values.panFile && (
<div className="d-flex align-items-center justify-content-between p-1" style={{ width: "100%" }}>
<p className="textS m-0">{values.panFile.name}</p>
<FaTimes style={{ cursor: "pointer" }} onClick={() => {
setFieldValue("panFile", "")
}} />
</div>
)}
</div>
</div>
</div>
......@@ -108,25 +135,33 @@ const BusinessDetails = () => {
<label>GST Number</label>
<input
type="text"
name="gst_number"
name="gstNumber"
onChange={handleChange}
onBlur={handleBlur}
value={values.gst_number}
value={values.gstNumber}
/>
{errors.gst_number && touched.gst_number && (<span className="form-error">{errors.gst_number}</span>)}
{errors.gstNumber && touched.gstNumber && (<span className="form-error">{errors.gstNumber}</span>)}
</div>
</div>
<div className="col-12 offset-lg-1 col-lg-5">
<div className="input-group">
<label>GST Certificate</label>
<div className="custom-file">
<input
type="file"
name="gst_certificate_file"
className="custom-file-input"
id="gstCertificateFile"
name="gstCertificateFile"
onChange={handleChange}
onBlur={handleBlur}
value={values.gst_certificate_file}
value={values.gstCertificateFile}
/>
{errors.gst_certificate_file && touched.gst_certificate_file && (<span className="form-error">{errors.gst_certificate_file}</span>)}
<label className="custom-file-label" htmlFor="gstCertificateFile">
Upload
</label>
</div>
<p className="textS">Upload in .PNG or .JPG/JPEG format</p>
{errors.gstCertificateFile && touched.gstCertificateFile && (<span className="form-error">{errors.gstCertificateFile}</span>)}
</div>
</div>
</div>
......@@ -136,32 +171,40 @@ const BusinessDetails = () => {
<label>Business Name</label>
<input
type="text"
name="business_name"
name="businessName"
onChange={handleChange}
onBlur={handleBlur}
value={values.business_name}
value={values.businessName}
/>
{errors.business_name && touched.business_name && (<span className="form-error">{errors.business_name}</span>)}
{errors.businessName && touched.businessName && (<span className="form-error">{errors.businessName}</span>)}
</div>
</div>
<div className="col-12 offset-lg-1 col-lg-5">
<div className="input-group">
<label>Brand Logo</label>
<div className="custom-file">
<input
type="file"
name="brand_logo_file"
className="custom-file-input"
id="brandLogoFile"
name="brandLogoFile"
onChange={handleChange}
onBlur={handleBlur}
value={values.brand_logo_file}
value={values.brandLogoFile}
/>
{errors.brand_logo_file && touched.brand_logo_file && (<span className="form-error">{errors.brand_logo_file}</span>)}
<label className="custom-file-label" htmlFor="brandLogoFile">
Upload
</label>
</div>
<p className="textS">Upload in .PNG or .JPG/JPEG format</p>
{errors.brandLogoFile && touched.brandLogoFile && (<span className="form-error">{errors.brandLogoFile}</span>)}
</div>
</div>
</div>
</div>
<hr />
<div>
<p>Business Address</p>
<div className="mt-4">
<p className="textH">Business Address</p>
<div className="row">
<div className="col-12 col-lg-5">
<div className="input-group">
......@@ -230,12 +273,12 @@ const BusinessDetails = () => {
<label>Address Line 1</label>
<input
type="text"
name="address_line1"
name="addressLine1"
onChange={handleChange}
onBlur={handleBlur}
value={values.address_line1}
value={values.addressLine1}
/>
{errors.address_line1 && touched.address_line1 && (<span className="form-error">{errors.address_line1}</span>)}
{errors.addressLine1 && touched.addressLine1 && (<span className="form-error">{errors.addressLine1}</span>)}
</div>
</div>
<div className="col-12 offset-lg-1 col-lg-5">
......@@ -243,20 +286,20 @@ const BusinessDetails = () => {
<label>Address Line 2</label>
<input
type="text"
name="address_line2"
name="addressLine2"
onChange={handleChange}
onBlur={handleBlur}
value={values.address_line2}
value={values.addressLine2}
/>
{errors.address_line2 && touched.address_line2 && (<span className="form-error">{errors.address_line2}</span>)}
{errors.addressLine2 && touched.addressLine2 && (<span className="form-error">{errors.addressLine2}</span>)}
</div>
</div>
</div>
</div>
<div className="row mb-5">
<div className="row mt-3 mb-1">
<div className="col-12 col-lg-5">
<div className="input-group">
<Button type="submit" className="btn btn-primary btn-submit">
<Button type="submit" className="btn btn-primary btn-submit" disabled>
Send for Approval
</Button>
</div>
......@@ -273,23 +316,23 @@ const BusinessDetails = () => {
<h2>Help Center</h2>
<ul className="helplist">
<li>
<img src="/images/vendor/question.svg" className="img-fluid" />
<Image alt="" src="/images/vendor/question.svg" width="22" height="22" />
<p>Lorem Ipsum Dolor Sit?</p>
</li>
<li>
<img src="/images/vendor/question.svg" className="img-fluid" />
<Image alt="" src="/images/vendor/question.svg" width="22" height="22" />
<p>Lorem Ipsum Dolor Sit?</p>
</li>
<li>
<img src="/images/vendor/question.svg" className="img-fluid" />
<Image alt="" src="/images/vendor/question.svg" width="22" height="22" />
<p>Lorem Ipsum Dolor Sit?</p>
</li>
<li>
<img src="/images/vendor/question.svg" className="img-fluid" />
<Image alt="" src="/images/vendor/question.svg" width="22" height="22" />
<p>Lorem Ipsum Dolor Sit?</p>
</li>
<li>
<img src="/images/vendor/call.svg" className="img-fluid" />
<Image alt="" src="/images/vendor/call.svg" width="32" height="32" />
<p>+1 (407) 8798 789</p>
</li>
</ul>
......
package.json
......@@ -23,6 +23,7 @@
"react-bootstrap-typeahead": "^6.0.0",
"react-datepicker": "^4.8.0",
"react-dom": "18.2.0",
"react-icons": "^5.0.1",
"react-image-gallery": "^1.3.0",
"react-js-pagination": "^3.0.3",
"react-multi-carousel": "^2.8.2",
......
public/images/vendor/attachment.svg 0 → 100644
<svg width="17" height="20" viewBox="0 0 17 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 11.5V6C10 3.79086 8.2091 2 6 2C3.79086 2 2 3.79086 2 6V11.5C2 15.0899 4.91015 18 8.5 18C12.0899 18 15 15.0899 15 11.5V2H17V11.5C17 16.1944 13.1944 20 8.5 20C3.80558 20 0 16.1944 0 11.5V6C0 2.68629 2.68629 0 6 0C9.3137 0 12 2.68629 12 6V11.5C12 13.433 10.433 15 8.5 15C6.567 15 5 13.433 5 11.5V6H7V11.5C7 12.3284 7.6716 13 8.5 13C9.3284 13 10 12.3284 10 11.5Z" fill="black"/>
</svg>
styles/globals.css
......@@ -265,12 +265,12 @@ h6 {
position: relative;
}
.image-container > span {
.image-container>span {
position: unset !important;
/* display: inline-block !important; */
}
.image-container.d-inblock > span {
.image-container.d-inblock>span {
position: unset !important;
display: inline-block !important;
}
......@@ -384,10 +384,12 @@ header {
padding-left: 2rem;
padding-right: 2rem;
}
.btn-secondary{
.btn-secondary {
padding-left: 2rem;
padding-right: 2rem;
}
.navbar-expand-lg .navbar-nav {
margin-right: 2rem;
font-size: 15px;
......@@ -444,7 +446,7 @@ header {
position: relative;
}
.owl-custom01.owl-carousel .owl-nav button.owl-prev > span {
.owl-custom01.owl-carousel .owl-nav button.owl-prev>span {
background: url(/images/icons/arrow-left.svg) no-repeat center;
width: 14px;
height: 22px;
......@@ -452,7 +454,7 @@ header {
display: block;
}
.owl-custom01.owl-carousel .owl-nav button.owl-next > span {
.owl-custom01.owl-carousel .owl-nav button.owl-next>span {
background: url(/images/icons/arrow-right.svg) no-repeat center;
width: 14px;
height: 22px;
......@@ -560,6 +562,10 @@ input:focus-visible {
justify-content: space-between;
}
/*-------- login page --------*/
p {
color: #000;
......@@ -580,12 +586,12 @@ span.form-error {
position: relative;
}
.image-container > span {
.image-container>span {
position: unset !important;
/* display: inline-block !important; */
}
.image-container.d-inblock > span {
.image-container.d-inblock>span {
position: unset !important;
display: inline-block !important;
}
......@@ -739,18 +745,18 @@ span.form-error {
.btn-submit {
background: #0070bd;
color: #fff;
font-family: "Sofia Pro Bold";
font-size: 15px;
line-height: normal;
font-family: "Sofia Pro Bold" !important;
font-size: 16px !important;
line-height: normal !important;
}
.btn-submit:disabled {
background-color: #baccd9;
background-color: #baccd9 !important;
border: none;
}
.btn-submit:hover {
background-color: #0070bd;
background-color: #0070bd !important;
}
.btn-continue {
......@@ -785,7 +791,7 @@ span.form-error {
user-select: none;
}
.check-container input:checked ~ .checkmark:after {
.check-container input:checked~.checkmark:after {
display: block;
}
......@@ -813,7 +819,7 @@ span.form-error {
width: 0;
}
.check-container input:checked ~ .checkmark {
.check-container input:checked~.checkmark {
background-color: #fff;
}
......@@ -885,7 +891,7 @@ span.form-error {
/* custome file input for upload user image */
.custom-file-input {
.uploadProfileImage {
padding: 8px 16px;
cursor: pointer;
background-color: #0070bd;
......@@ -898,7 +904,7 @@ span.form-error {
width: 80%;
}
.custom-file-input p {
.uploadProfileImage p {
font-family: "Sofia Pro Bold";
font-size: 20px;
font-weight: 700;
......@@ -1016,7 +1022,7 @@ span.form-error {
color: #808080;
}
.card-booking-content > p:last-child {
.card-booking-content>p:last-child {
margin-bottom: 0;
}
......@@ -1059,7 +1065,7 @@ span.form-error {
color: #808080;
}
.card-booking-content .description > span {
.card-booking-content .description>span {
color: #646464;
text-decoration: underline;
}
......@@ -1069,7 +1075,7 @@ span.form-error {
font-weight: 600;
}
.card-booking-content .price > span {
.card-booking-content .price>span {
font-size: 0.8rem;
color: #808080;
}
......@@ -1105,7 +1111,7 @@ span.form-error {
margin-bottom: 1rem;
}
.card-booking-content .details-div > p:first-child {
.card-booking-content .details-div>p:first-child {
font-family: "Sofia Pro Light";
font-size: 14px;
line-height: 20px;
......@@ -1115,7 +1121,7 @@ span.form-error {
margin-bottom: 0;
}
.card-booking-content .details-div > p:last-child {
.card-booking-content .details-div>p:last-child {
font-family: "Sofia Pro Light";
font-size: 16px;
line-height: 20px;
......@@ -1143,6 +1149,15 @@ span.form-error {
margin-bottom: 20px;
}
.content-div h4 {
font-family: "Sofia Pro Light";
font-size: 30px;
font-weight: 300;
line-height: 37px;
letter-spacing: 0em;
margin-bottom: 20px;
}
.business-details::before {
content: "";
border-left: 6px solid #0070bd;
......@@ -1172,7 +1187,8 @@ span.form-error {
margin-bottom: 0;
}
.helplist li p {
.helplist li p,
.business-details p {
font-family: "Sofia Pro Light";
font-size: 18px;
line-height: 20px;
......@@ -1182,6 +1198,80 @@ span.form-error {
margin-left: 1rem;
}
.business-details p {
margin-left: 0;
margin-bottom: 1rem;
}
.business-details .textH {
font-family: "Sofia Pro Bold";
margin-bottom: 1.5rem;
}
.business-details .textS {
font-size: 12px;
line-height: 12px;
margin-top: 10px;
margin-bottom: 5px;
}
/**custom-file upload**/
.custom-file {
position: relative;
display: inline-block;
}
.custom-file-input {
position: relative;
z-index: 2;
margin: 0;
opacity: 0;
}
.custom-file-label {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 1;
background: #ffffff 0% 0% no-repeat padding-box;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
border-radius: 10px !important;
border: 0.814px solid #000;
box-shadow: 1.628px 3.255px 4.069px 0px rgb(255 255 255 / 25%) inset;
color: #000;
font-family: "Sofia Pro Light";
font-size: 15px;
font-weight: 400;
line-height: normal;
height: 45px;
padding: 16px 22px;
}
.custom-file-label::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
z-index: 3;
display: block;
height: auto;
padding: 0.375rem 0.75rem;
content: "";
background: url(/images/vendor/attachment.svg) #fff no-repeat 0px center;
width: 35px;
/* height: 60px; */
/* border: 0;
background-size: 40%; */
}
/*--------------------------*/
.let-discover-carousal a {
color: #000;
text-align: center;
......@@ -1207,9 +1297,11 @@ span.form-error {
background: #f7f5f1;
padding: 2rem 0;
}
.similar-experiences-session {
padding: 2rem 0;
}
.browse-experiences-item {
border-radius: 1.6875rem;
background: #fff;
......@@ -1483,19 +1575,23 @@ footer hr {
text-align: center;
padding: 1rem;
}
.box-01 {
border-radius: 17px;
border: 1px solid #d1d1d1;
margin-bottom: 1rem;
}
.box-01 .head {
font-size: 20px;
line-height: 20px;
padding: 1rem;
}
.box-01 .reset {
padding: 1rem;
}
}
.box-01 .reset .image-container {
width: 22px;
display: inline-block;
......@@ -1507,121 +1603,152 @@ footer hr {
align-items: center;
justify-content: space-between;
}
.box-01 .reset a .image-container{
.box-01 .reset a .image-container {
margin-left: 0.5rem;
}
.box-01 .inner {
padding: 1rem;
border-top: 2px solid #d1d1d1;
}
.df-sb {
display: flex;
align-items: center;
justify-content: space-between;
/* padding: 1rem; */
}
.accordion-filter {
}
.accordion-filter {}
.accordion-filter .accordion-button:not(.collapsed) {
background: transparent;
}
.accordion-filter .accordion-button:focus {
border: 0;
}
.accordion-button:focus {
box-shadow: none;
}
.accordion-filter.accordion-flush .accordion-item {
border: 0;
}
.data-filters-item label {
font-size: 14px;
font-weight: 300;
}
.data-filters-item label input {
margin-right: 0.2rem;
}
.data-filters-item {
margin-bottom: 0.5rem;
}
.accordion-filter.accordion-flush .accordion-item .accordion-button {
padding: 0.5rem 0;
color: #000;
}
.accordion-filter .accordion-body {
padding: 0;
}
.accordion-button:not(.collapsed) {
box-shadow: none;
}
.accordion-button::after {
background: url(/images/icons/arrow-right-01.svg) no-repeat;
}
.accordion-button:not(.collapsed)::after {
background: url(/images/icons/arrow-down-01.svg) no-repeat right center;
}
.form-select:focus {
box-shadow: none;
border-color: inherit;
}
.box-01 .form-select {
border-color: #c3c3c3;
padding: 0.575rem 2.55rem 0.575rem 0.95rem;
}
.box-01 .show-all {
background: transparent;
border: 0;
display: flex;
align-items: center;
}
.box-01 .show-all span {
font-size: 30px;
line-height: 30px;
display: inline-block;
height: 10px;
}
.time-filter {
display: flex;
justify-content: space-between;
align-items: center;
}
.time-filter .time {
position: relative;
}
.time-filter .time:first-child::after {
content: ":";
position: absolute;
right: -22px;
top: 30px;
}
.time-filter .time input {
width: 55px;
text-align: center;
}
.time-filter .time-field {
display: flex;
align-items: center;
width: 70%;
}
.time-filter .time-field .time:first-child {
margin-right: 40px;
}
.time-filter .time-field .time div:first-child {
margin-bottom: 5px;
}
.time-filter .ampm-field {
width: 30%;
padding-top: 15px;
}
.time-filter .ampm-field .ampm {
margin: 5px 0;
}
.time-filter .ampm-field .ampm input {
margin-right: 10px;
}
.listing-filter {
font-size: 14px;
}
.filter-dd {
text-align: right;
padding: 2rem 0;
......@@ -1629,17 +1756,21 @@ footer hr {
align-items: center;
justify-content: flex-end;
}
.filter-dd a {
width: 30px;
display: inline-block;
cursor: pointer;
}
.filter-dd .box-inner {
position: relative;
}
.filter-dd .box-inner:nth-of-type(2) {
margin-right: 1rem;
}
.top-head {
display: flex;
align-items: center;
......@@ -1648,6 +1779,7 @@ footer hr {
padding-bottom: 10px;
margin-bottom: 10px;
}
.filter-dd .box-inner .inner-content {
background: #fff;
box-shadow: 0px 4px 15.899999618530273px 0px rgba(0, 0, 0, 0.25);
......@@ -1660,64 +1792,81 @@ footer hr {
display: none;
border-radius: 9px;
}
.filter-dd .box-inner .inner-content.open {
display: block;
}
.filter-dd .box-inner .inner-content .top-head .close-btn {
width: 20px;
display: inline-block;
cursor: pointer;
}
.filter-dd .box-inner .inner-content .list-by {
text-align: left;
}
.filter-dd .box-inner .inner-content .list-by li {
padding: 7px 0;
}
.filter-dd .box-inner .inner-content .list-by li input {
margin-right: 10px;
}
.filter-dd .box-inner .inner-content .list-by li label {
font-size: 14px;
}
.browse-experiences-item .img-wrapper {
height: 190px;
}
.listing-items .browse-experiences-item .img-wrapper {
height: 100%;
}
.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-reviews {
display: flex;
align-items: center;
padding: 0.5rem 0 2rem;
}
.product-info .product-reviews .star {
display: flex;
align-items: center;
}
.product-reviews .star a {
width: 19px;
display: inline-block;
}
.product-reviews .rating {
background: #002c5f;
border-radius: 4px;
......@@ -1725,85 +1874,104 @@ footer hr {
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 {
.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 {
.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;
}
.image-gallery-thumbnail {
width: 25%;
}
.image-gallery-content .image-gallery-slide .image-gallery-image {
max-height: 100%;
}
.breadcrumb-item + .breadcrumb-item::before {
.breadcrumb-item+.breadcrumb-item::before {
content: "";
background: url(/images/icons/arrow-right-grey.svg) no-repeat;
width: 24px;
height: 24px;
margin: 0 5px;
}
.breadcrumb .breadcrumb-item a {
color: #808080;
}
.btn {
font-size: 20px;
}
.availability-wrappper {
display: flex;
align-items: center;
flex-wrap: wrap;
margin-top: 2rem;
}
.availability-wrappper li {
width: 46%;
display: flex;
align-items: center;
margin: 0.5rem;
}
.availability-wrappper li > span {
.availability-wrappper li>span {
width: 30px;
display: block;
margin-right: 10px;
}
.availability-wrappper li .info {
width: 12px;
height: 12px;
......@@ -1812,9 +1980,11 @@ footer hr {
display: block;
cursor: pointer;
}
.availability-wrappper li .info-div {
position: relative;
}
.availability-wrappper li .info-text {
position: absolute;
top: 100%;
......@@ -1828,62 +1998,77 @@ footer hr {
/* Add any other styles you need for your info div */
}
.view-all-reviews-btn {
color: #000;
}
.guest-reviews-detail .head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.5rem;
}
.guest-reviews-detail .head .name {
font-size: 24px;
line-height: 24px;
}
.guest-reviews-detail .head .month {
color: #808080;
}
.guest-reviews-detail .star {
display: flex;
align-items: center;
margin-bottom: 1rem;
}
.guest-reviews-detail .star a {
width: 19px;
display: inline-block;
}
.review-content a {
color: #808080;
text-decoration: underline !important;
}
.guest-reviews-detail {
margin-right: 3rem;
}
.guest-reviews-session .head-btn {
margin-right: 3rem;
}
.guest-reviews-detail {
margin-bottom: 2rem;
}
.guest-reviews-session > .container {
.guest-reviews-session>.container {
border-top: 1px solid #c9c9c9;
padding-top: 3rem;
}
.guest-reviews-session {
padding: 0 0 2rem 0;
}
.browse-experiences-item .explore-now .btn{
.browse-experiences-item .explore-now .btn {
font-size: 13px;
padding-left: 1rem;
padding-right: 1rem;
}
.accordion-01 {
/* border: 1px solid #707070;
border-radius: 17px;
padding: 5px; */
}
.accordion-01 .accordion-button::after {
}
.accordion-01 .accordion-button::after {
background-image: url(https://d3dfzqkbc19l96.cloudfront.net/public/assets/images/icons/plus.svg);
width: 15px;
height: 15px;
......@@ -1891,14 +2076,16 @@ footer hr {
position: absolute;
right: 5px;
top: 40%;
}
.accordion-01 .accordion-button:not(.collapsed)::after {
}
.accordion-01 .accordion-button:not(.collapsed)::after {
background-image: url(https://d3dfzqkbc19l96.cloudfront.net/public/assets/images/icons/minus.svg);
width: 15px;
height: 3px;
background-size: 90%;
}
.accordion-01 .accordion-button {
}
.accordion-01 .accordion-button {
font-size: 20px;
line-height: 28px;
color: #000000;
......@@ -1907,37 +2094,43 @@ footer hr {
padding-bottom: 30px;
/* font-weight: 700; */
padding-right: 35px;
}
}
.accordion-01 .accordion-body {
.accordion-01 .accordion-body {
padding-top: 0;
padding-bottom: 35px;
font-size: 18px;
line-height: 25px;
padding-right: 50px;
}
.accordion-01 .accordion-button:not(.collapsed) {
}
.accordion-01 .accordion-button:not(.collapsed) {
color: #c9262b;
background-color: transparent;
box-shadow: none;
font-weight: 600;
}
.accordion-01 .accordion-item {
}
.accordion-01 .accordion-item {
border: 0;
border-bottom: 1px solid #DDDDDD;
}
.accordion-01 .accordion-item:last-child {
}
.accordion-01 .accordion-item:last-child {
border-bottom: 0;
}
.accordion-button:focus {
}
.accordion-button:focus {
box-shadow: none;
}
.accordion-01.accordion {
}
.accordion-01.accordion {
/* margin-top: 35px; */
border-top: 1px solid #DDDDDD;
border-bottom: 1px solid #DDDDDD;
}
.faqs-session{
}
.faqs-session {
padding: 5rem 0;
}
......@@ -1976,60 +2169,74 @@ footer hr {
margin-left: 10px;
}
}
@media (min-width: 768px) {
.hide-on-desktop {
display: none !important;
}
}
@media (max-width:1023px) {
}
@media (max-width:1023px) {
.product-info .product-name {
font-size: 20px;
line-height: 30px;
}
.product-info .top-row .most-booked {
color: #808080;
font-size: 16px;
}
.product-info .product-name {
font-size: 20px;
line-height: 30px;
font-weight: 700;
}
.availability-wrappper li {
width: 100%;
margin: 1rem 0.5rem;
}
.guest-reviews-session .head-btn {
margin-right: 0;
}
.guest-reviews-detail {
margin-right: 0;
}
}
@media (max-width: 767px) {
}
@media (max-width: 767px) {
.hide-on-mobile {
display: none !important;
}
}
}
@media (max-width: 767px) {
footer .subscribe input {
width: 67%;
}
.footer-link h3 {
font-size: 20px;
}
footer .footer-link.mtp-0 {
padding-top: 0;
}
footer .footer-link {
padding-top: 2rem;
}
.signUp-to-experience-our-platform .title {
font-size: 32px;
line-height: 33px;
margin-bottom: 0.5rem;
}
.signUp-to-experience-our-platform-session {
background: url(../public/images/sign-up-exp-bg-m.png) no-repeat;
background-size: 100%;
......@@ -2037,76 +2244,96 @@ footer hr {
padding: 1rem;
color: #fff;
}
.testimonial-item .name {
font-size: 20px;
line-height: 22px;
}
.testimonial-item {
padding: 0 0rem;
}
.gift-an-experience-inner .img {
padding-top: 3rem;
}
.gift-an-experience-inner .content .title {
font-size: 32px;
line-height: 35px;
}
.gift-an-experience-inner {
padding: 1rem;
border-radius: 27px;
background: #f6f6f6 url(/images/gift-experience-bg-m.png) no-repeat center bottom;
}
.carousal-c .owl-custom01.owl-carousel .owl-nav button.owl-next {
right: calc(-9% + 1px);
}
.carousal-c .owl-custom01.owl-carousel .owl-nav button.owl-prev {
left: calc(-9% + 1px);
}
.slider-item.slider-item-01 {
background: url(/images/home-banner/01-m.jpg) no-repeat;
}
.slider-item {
height: 200vw;
border-radius: 0 0 25px 25px;
background-position: 100% !important;
padding-top: 2rem;
}
.slider-item .d-table {
display: inherit !important;
}
.home-banner .banner-txt h1 {
font-size: 20px;
line-height: 22px;
}
.home-banner .banner-txt .title {
font-size: 32px;
line-height: 35px;
}
.searchbar-h input {
font-size: 13px;
}
.searchbar-h {
height: 55px;
padding: 1rem;
}
.searchbar-h .search-icon {
right: 8px;
top: 11px;
}
.searchbar-session {
margin-top: -33px;
}
.let-discover-session {
padding: 2rem 0;
}
.head01 .title {
font-size: 16px;
line-height: 18px;
}
.head01 h2 {
font-size: 32px;
line-height: 33px;
}
.carousal-c {
padding: 0 1rem;
}
......
yarn.lock
......@@ -2408,6 +2408,11 @@
"resolved" "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz"
"version" "3.2.0"
"react-icons@^5.0.1":
"integrity" "sha512-WqLZJ4bLzlhmsvme6iFdgO8gfZP17rfjYEJ2m9RsZjZ+cc4k1hTzknEz63YS1MeT50kVzoa1Nz36f4BEx+Wigw=="
"resolved" "https://registry.npmjs.org/react-icons/-/react-icons-5.0.1.tgz"
"version" "5.0.1"
"react-image-gallery@^1.3.0":
"integrity" "sha512-lKnPaOzxqSdujPFyl+CkVw0j1aYoNCHk61cvr1h7aahf5aWqmPcR9YhUB4cYrt5Tn5KHDaPUzYm5/+cX9WxzaA=="
"resolved" "https://registry.npmjs.org/react-image-gallery/-/react-image-gallery-1.3.0.tgz"
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!