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 540 additions and 255 deletions
components/user/MyProfile.js
...@@ -32,8 +32,8 @@ const MyProfile = () => { ...@@ -32,8 +32,8 @@ const MyProfile = () => {
country: Yup.string().required('Country is required'), country: Yup.string().required('Country is required'),
state: Yup.string().required('State is required'), state: Yup.string().required('State is required'),
city: Yup.string().required('City is required'), city: Yup.string().required('City is required'),
address_line1: Yup.string().required('Address Line1 is required'), addressLine1: Yup.string().required('Address Line1 is required'),
address_line2: Yup.string().required('Adrress Line2 is required') addressLine2: Yup.string().required('Adrress Line2 is required')
}) })
) )
}); });
...@@ -75,45 +75,45 @@ const MyProfile = () => { ...@@ -75,45 +75,45 @@ const MyProfile = () => {
<h2>My Profile</h2> <h2>My Profile</h2>
<Table className='abc'> <Table className='abc'>
<thead> <thead>
<tr> <tr>
<th>1</th> <th>1</th>
<th>2</th> <th>2</th>
<th>3</th> <th>3</th>
<th>4</th> <th>4</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr className='main'> <tr className='main'>
<td rowSpan={3}>1</td> <td rowSpan={3}>1</td>
</tr> </tr>
<tr className='sub1'> <tr className='sub1'>
<td>11</td> <td>11</td>
<td>22</td> <td>22</td>
<td>33</td> <td>33</td>
</tr> </tr>
<tr className='sub2'> <tr className='sub2'>
<td>11</td> <td>11</td>
<td>22</td> <td>22</td>
<td>33</td> <td>33</td>
</tr> </tr>
<tr className='main'> <tr className='main'>
<td rowSpan={3}>1</td> <td rowSpan={3}>1</td>
</tr> </tr>
<tr className='sub'> <tr className='sub'>
<td>11</td> <td>11</td>
<td>22</td> <td>22</td>
<td>33</td> <td>33</td>
</tr> </tr>
<tr className='sub'> <tr className='sub'>
<td>11</td> <td>11</td>
<td>22</td> <td>22</td>
<td>33</td> <td>33</td>
</tr> </tr>
</tbody> </tbody>
</Table> </Table>
<div className="bg-white border-div"> <div className="bg-white border-div">
<Formik <Formik
initialValues={{ profile_image: null }} initialValues={{ profile_image: null }}
...@@ -129,14 +129,14 @@ const MyProfile = () => { ...@@ -129,14 +129,14 @@ const MyProfile = () => {
// try { // try {
// const formData = new FormData(); // const formData = new FormData();
// formData.append("file", values.file); // formData.append("file", values.file);
// // Use Axios to send the file data to the server // // Use Axios to send the file data to the server
// const response = await axios.post("/upload", formData, { // const response = await axios.post("/upload", formData, {
// headers: { // headers: {
// "Content-Type": "multipart/form-data" // "Content-Type": "multipart/form-data"
// } // }
// }); // });
// console.log("File uploaded successfully:", response.data); // console.log("File uploaded successfully:", response.data);
// } catch (error) { // } catch (error) {
// console.error("Error uploading file:", error); // console.error("Error uploading file:", error);
...@@ -147,7 +147,7 @@ const MyProfile = () => { ...@@ -147,7 +147,7 @@ const MyProfile = () => {
innerRef={formik => { innerRef={formik => {
// Store Formik instance in a variable // Store Formik instance in a variable
formikUploadImage = formik; formikUploadImage = formik;
}} }}
> >
{({ values, errors, touched, handleChange, handleBlur, handleSubmit }) => ( {({ values, errors, touched, handleChange, handleBlur, handleSubmit }) => (
<Form <Form
...@@ -158,14 +158,16 @@ const MyProfile = () => { ...@@ -158,14 +158,16 @@ const MyProfile = () => {
}} }}
> >
<div className="d-flex align-items-center justify-content-between"> <div className="d-flex align-items-center justify-content-between">
<div className="col-lg-8 d-flex align-items-center"> <div className="col-lg-6 d-flex align-items-center">
<img src="/images/user/user-big.jpg" layout="fill" className="image-fluid me-4" /> <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> <p className="username">John Doe</p>
</div> </div>
<div className="col-lg-2"> <div className="col-lg-4">
<label className="custom-file-input" htmlFor="file-upload"> <label className="uploadProfileImage" htmlFor="file-upload">
<p className="mb-0">Upload</p> <p className="mb-0">Upload Profile Photo</p>
<img src="/images/user/icon-upload.svg" layout="fill" className="image-fluid pb-1" /> <Image alt="" src="/images/user/icon-upload.svg" width="24" height="24" className="pb-1" />
</label> </label>
<input <input
type="file" type="file"
...@@ -174,6 +176,10 @@ const MyProfile = () => { ...@@ -174,6 +176,10 @@ const MyProfile = () => {
onChange={handleProfileUploadChange} onChange={handleProfileUploadChange}
// onBlur={handleBlur} // onBlur={handleBlur}
style={{ display: "none" }} style={{ display: "none" }}
onClick={event => {
const { target = {} } = event || {};
target.value = "";
}}
/> />
{errors.profile_image && touched.profile_image && (<span className="form-error">{errors.profile_image}</span>)} {errors.profile_image && touched.profile_image && (<span className="form-error">{errors.profile_image}</span>)}
</div> </div>
...@@ -417,12 +423,12 @@ const MyProfile = () => { ...@@ -417,12 +423,12 @@ const MyProfile = () => {
<label>Address Line 1</label> <label>Address Line 1</label>
<input <input
type="text" type="text"
name="address_line1" name="addressLine1"
onChange={handleChange} onChange={handleChange}
onBlur={handleBlur} 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> </div>
<div className="col-12 offset-lg-1 col-lg-5"> <div className="col-12 offset-lg-1 col-lg-5">
...@@ -430,12 +436,12 @@ const MyProfile = () => { ...@@ -430,12 +436,12 @@ const MyProfile = () => {
<label>Address Line 2</label> <label>Address Line 2</label>
<input <input
type="text" type="text"
name="address_line2" name="addressLine2"
onChange={handleChange} onChange={handleChange}
onBlur={handleBlur} 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> </div>
......
components/vendor/BusinessDetails.js
...@@ -2,20 +2,22 @@ import { Formik } from "formik"; ...@@ -2,20 +2,22 @@ import { Formik } from "formik";
import { Fragment } from "react"; import { Fragment } from "react";
import { Button, Form } from "react-bootstrap"; import { Button, Form } from "react-bootstrap";
import * as Yup from "yup"; import * as Yup from "yup";
import { FaArrowRight, FaTimes } from "react-icons/fa";
import Image from "next/image";
const BusinessDetails = () => { const BusinessDetails = () => {
const businessDetailsValidationSchema = Yup.object().shape({ const businessDetailsValidationSchema = Yup.object().shape({
pan_number: Yup.string() panNumber: Yup.string()
.required("Pan Number is Required"), .required("Pan Number is Required"),
pan_file: Yup.string() panFile: Yup.mixed()
.required("Pan Image is Required"), .required("Pan Image is Required"),
gst_number: Yup.string() gstNumber: Yup.string()
.required("GST Number is Required"), .required("GST Number is Required"),
gst_certificate_file: Yup.string() gstCertificateFile: Yup.mixed()
.required("GST Certificate is Required"), .required("GST Certificate is Required"),
business_name: Yup.string() businessName: Yup.string()
.required("Business Name is Required"), .required("Business Name is Required"),
brand_logo_file: Yup.string() brandLogoFile: Yup.mixed()
.required("Brand Logo is Required"), .required("Brand Logo is Required"),
pincode: Yup.string() pincode: Yup.string()
.required("Pincode is Required"), .required("Pincode is Required"),
...@@ -25,9 +27,9 @@ const BusinessDetails = () => { ...@@ -25,9 +27,9 @@ const BusinessDetails = () => {
.required("State is Required"), .required("State is Required"),
city: Yup.string() city: Yup.string()
.required("City is Required"), .required("City is Required"),
address_line1: Yup.string() addressLine1: Yup.string()
.required("Address Line 1 is Required"), .required("Address Line 1 is Required"),
address_line2: Yup.string() addressLine2: Yup.string()
.required("Address Line 2 is Required"), .required("Address Line 2 is Required"),
}); });
...@@ -39,24 +41,24 @@ const BusinessDetails = () => { ...@@ -39,24 +41,24 @@ const BusinessDetails = () => {
<div className="content-div business-details"> <div className="content-div business-details">
<h2>Tell us about your business</h2> <h2>Tell us about your business</h2>
<p>Please have the following ready before you begin</p> <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><FaArrowRight /> 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 className="mb-4"><FaArrowRight /> Tax (GST/PAN) details of your business.</p>
<hr /> <hr />
<div className="form-container"> <div className="form-container mt-4">
<Formik <Formik
initialValues={{ initialValues={{
pan_number: "", panNumber: "",
pan_file: "", panFile: "",
gst_number: "", gstNumber: "",
gst_certificate_file: "", gstCertificateFile: "",
business_name: "", businessName: "",
brand_logo_file: "", brandLogoFile: "",
pincode: "", pincode: "",
country: "", country: "",
state: "", state: "",
city: "", city: "",
address_line1: "", addressLine1: "",
address_line2: "" addressLine2: ""
}} }}
validationSchema={businessDetailsValidationSchema} validationSchema={businessDetailsValidationSchema}
// enableReinitialize={true} // enableReinitialize={true}
...@@ -64,7 +66,7 @@ const BusinessDetails = () => { ...@@ -64,7 +66,7 @@ const BusinessDetails = () => {
console.log("business details values", values) console.log("business details values", values)
}} }}
> >
{({ values, errors, touched, handleChange, handleBlur, handleSubmit }) => ( {({ values, errors, touched, handleChange, handleBlur, handleSubmit, setFieldValue }) => (
<Form <Form
onSubmit={e => { onSubmit={e => {
e.preventDefault(); e.preventDefault();
...@@ -72,33 +74,58 @@ const BusinessDetails = () => { ...@@ -72,33 +74,58 @@ const BusinessDetails = () => {
}} }}
> >
<h4>Vendor Business Information</h4> <h4>Vendor Business Information</h4>
<div> <div className="mt-3">
<p>Business documents</p> <p className="textH">Business documents</p>
<div className="row"> <div className="row">
<div className="col-12 col-lg-5"> <div className="col-12 col-lg-5">
<div className="input-group"> <div className="input-group">
<label>Enter Business PAN No.</label> <label>Enter Business PAN No.</label>
<input <input
type="text" type="text"
name="pan_number" name="panNumber"
onChange={handleChange} onChange={handleChange}
onBlur={handleBlur} 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> </div>
<div className="col-12 offset-lg-1 col-lg-5"> <div className="col-12 offset-lg-1 col-lg-5">
<div className="input-group"> <div className="input-group">
<label>Upload PAN</label> <label>Upload PAN</label>
<input <div className="custom-file">
type="file" <input
name="pan_file" type="file"
onChange={handleChange} className="custom-file-input"
onBlur={handleBlur} id="panFile"
value={values.pan_file} name="panFile"
/> onChange={(event) => {
{errors.pan_file && touched.pan_file && (<span className="form-error">{errors.pan_file}</span>)} if (event) {
const file = event.currentTarget.files[0]
setFieldValue("panFile", file)
}
}}
onBlur={handleBlur}
// value={values.panFile}
onClick={event => {
const { target = {} } = event || {};
target.value = "";
}}
/>
<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> </div>
</div> </div>
...@@ -108,25 +135,33 @@ const BusinessDetails = () => { ...@@ -108,25 +135,33 @@ const BusinessDetails = () => {
<label>GST Number</label> <label>GST Number</label>
<input <input
type="text" type="text"
name="gst_number" name="gstNumber"
onChange={handleChange} onChange={handleChange}
onBlur={handleBlur} 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> </div>
<div className="col-12 offset-lg-1 col-lg-5"> <div className="col-12 offset-lg-1 col-lg-5">
<div className="input-group"> <div className="input-group">
<label>GST Certificate</label> <label>GST Certificate</label>
<input <div className="custom-file">
type="file" <input
name="gst_certificate_file" type="file"
onChange={handleChange} className="custom-file-input"
onBlur={handleBlur} id="gstCertificateFile"
value={values.gst_certificate_file} name="gstCertificateFile"
/> onChange={handleChange}
{errors.gst_certificate_file && touched.gst_certificate_file && (<span className="form-error">{errors.gst_certificate_file}</span>)} onBlur={handleBlur}
value={values.gstCertificateFile}
/>
<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> </div>
</div> </div>
...@@ -136,32 +171,40 @@ const BusinessDetails = () => { ...@@ -136,32 +171,40 @@ const BusinessDetails = () => {
<label>Business Name</label> <label>Business Name</label>
<input <input
type="text" type="text"
name="business_name" name="businessName"
onChange={handleChange} onChange={handleChange}
onBlur={handleBlur} 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> </div>
<div className="col-12 offset-lg-1 col-lg-5"> <div className="col-12 offset-lg-1 col-lg-5">
<div className="input-group"> <div className="input-group">
<label>Brand Logo</label> <label>Brand Logo</label>
<input <div className="custom-file">
type="file" <input
name="brand_logo_file" type="file"
onChange={handleChange} className="custom-file-input"
onBlur={handleBlur} id="brandLogoFile"
value={values.brand_logo_file} name="brandLogoFile"
/> onChange={handleChange}
{errors.brand_logo_file && touched.brand_logo_file && (<span className="form-error">{errors.brand_logo_file}</span>)} onBlur={handleBlur}
value={values.brandLogoFile}
/>
<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>
</div> </div>
</div> </div>
<hr /> <hr />
<div> <div className="mt-4">
<p>Business Address</p> <p className="textH">Business Address</p>
<div className="row"> <div className="row">
<div className="col-12 col-lg-5"> <div className="col-12 col-lg-5">
<div className="input-group"> <div className="input-group">
...@@ -230,12 +273,12 @@ const BusinessDetails = () => { ...@@ -230,12 +273,12 @@ const BusinessDetails = () => {
<label>Address Line 1</label> <label>Address Line 1</label>
<input <input
type="text" type="text"
name="address_line1" name="addressLine1"
onChange={handleChange} onChange={handleChange}
onBlur={handleBlur} 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> </div>
<div className="col-12 offset-lg-1 col-lg-5"> <div className="col-12 offset-lg-1 col-lg-5">
...@@ -243,20 +286,20 @@ const BusinessDetails = () => { ...@@ -243,20 +286,20 @@ const BusinessDetails = () => {
<label>Address Line 2</label> <label>Address Line 2</label>
<input <input
type="text" type="text"
name="address_line2" name="addressLine2"
onChange={handleChange} onChange={handleChange}
onBlur={handleBlur} 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> </div>
</div> </div>
<div className="row mb-5"> <div className="row mt-3 mb-1">
<div className="col-12 col-lg-5"> <div className="col-12 col-lg-5">
<div className="input-group"> <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 Send for Approval
</Button> </Button>
</div> </div>
...@@ -273,23 +316,23 @@ const BusinessDetails = () => { ...@@ -273,23 +316,23 @@ const BusinessDetails = () => {
<h2>Help Center</h2> <h2>Help Center</h2>
<ul className="helplist"> <ul className="helplist">
<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> <p>Lorem Ipsum Dolor Sit?</p>
</li> </li>
<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> <p>Lorem Ipsum Dolor Sit?</p>
</li> </li>
<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> <p>Lorem Ipsum Dolor Sit?</p>
</li> </li>
<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> <p>Lorem Ipsum Dolor Sit?</p>
</li> </li>
<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> <p>+1 (407) 8798 789</p>
</li> </li>
</ul> </ul>
......
package.json
...@@ -23,6 +23,7 @@ ...@@ -23,6 +23,7 @@
"react-bootstrap-typeahead": "^6.0.0", "react-bootstrap-typeahead": "^6.0.0",
"react-datepicker": "^4.8.0", "react-datepicker": "^4.8.0",
"react-dom": "18.2.0", "react-dom": "18.2.0",
"react-icons": "^5.0.1",
"react-image-gallery": "^1.3.0", "react-image-gallery": "^1.3.0",
"react-js-pagination": "^3.0.3", "react-js-pagination": "^3.0.3",
"react-multi-carousel": "^2.8.2", "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 { ...@@ -265,12 +265,12 @@ h6 {
position: relative; position: relative;
} }
.image-container > span { .image-container>span {
position: unset !important; position: unset !important;
/* display: inline-block !important; */ /* display: inline-block !important; */
} }
.image-container.d-inblock > span { .image-container.d-inblock>span {
position: unset !important; position: unset !important;
display: inline-block !important; display: inline-block !important;
} }
...@@ -384,10 +384,12 @@ header { ...@@ -384,10 +384,12 @@ header {
padding-left: 2rem; padding-left: 2rem;
padding-right: 2rem; padding-right: 2rem;
} }
.btn-secondary{
padding-left: 2rem; .btn-secondary {
padding-right: 2rem; padding-left: 2rem;
padding-right: 2rem;
} }
.navbar-expand-lg .navbar-nav { .navbar-expand-lg .navbar-nav {
margin-right: 2rem; margin-right: 2rem;
font-size: 15px; font-size: 15px;
...@@ -444,7 +446,7 @@ header { ...@@ -444,7 +446,7 @@ header {
position: relative; 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; background: url(/images/icons/arrow-left.svg) no-repeat center;
width: 14px; width: 14px;
height: 22px; height: 22px;
...@@ -452,7 +454,7 @@ header { ...@@ -452,7 +454,7 @@ header {
display: block; 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; background: url(/images/icons/arrow-right.svg) no-repeat center;
width: 14px; width: 14px;
height: 22px; height: 22px;
...@@ -560,6 +562,10 @@ input:focus-visible { ...@@ -560,6 +562,10 @@ input:focus-visible {
justify-content: space-between; justify-content: space-between;
} }
/*-------- login page --------*/ /*-------- login page --------*/
p { p {
color: #000; color: #000;
...@@ -580,12 +586,12 @@ span.form-error { ...@@ -580,12 +586,12 @@ span.form-error {
position: relative; position: relative;
} }
.image-container > span { .image-container>span {
position: unset !important; position: unset !important;
/* display: inline-block !important; */ /* display: inline-block !important; */
} }
.image-container.d-inblock > span { .image-container.d-inblock>span {
position: unset !important; position: unset !important;
display: inline-block !important; display: inline-block !important;
} }
...@@ -739,18 +745,18 @@ span.form-error { ...@@ -739,18 +745,18 @@ span.form-error {
.btn-submit { .btn-submit {
background: #0070bd; background: #0070bd;
color: #fff; color: #fff;
font-family: "Sofia Pro Bold"; font-family: "Sofia Pro Bold" !important;
font-size: 15px; font-size: 16px !important;
line-height: normal; line-height: normal !important;
} }
.btn-submit:disabled { .btn-submit:disabled {
background-color: #baccd9; background-color: #baccd9 !important;
border: none; border: none;
} }
.btn-submit:hover { .btn-submit:hover {
background-color: #0070bd; background-color: #0070bd !important;
} }
.btn-continue { .btn-continue {
...@@ -785,7 +791,7 @@ span.form-error { ...@@ -785,7 +791,7 @@ span.form-error {
user-select: none; user-select: none;
} }
.check-container input:checked ~ .checkmark:after { .check-container input:checked~.checkmark:after {
display: block; display: block;
} }
...@@ -813,7 +819,7 @@ span.form-error { ...@@ -813,7 +819,7 @@ span.form-error {
width: 0; width: 0;
} }
.check-container input:checked ~ .checkmark { .check-container input:checked~.checkmark {
background-color: #fff; background-color: #fff;
} }
...@@ -885,7 +891,7 @@ span.form-error { ...@@ -885,7 +891,7 @@ span.form-error {
/* custome file input for upload user image */ /* custome file input for upload user image */
.custom-file-input { .uploadProfileImage {
padding: 8px 16px; padding: 8px 16px;
cursor: pointer; cursor: pointer;
background-color: #0070bd; background-color: #0070bd;
...@@ -898,7 +904,7 @@ span.form-error { ...@@ -898,7 +904,7 @@ span.form-error {
width: 80%; width: 80%;
} }
.custom-file-input p { .uploadProfileImage p {
font-family: "Sofia Pro Bold"; font-family: "Sofia Pro Bold";
font-size: 20px; font-size: 20px;
font-weight: 700; font-weight: 700;
...@@ -1016,7 +1022,7 @@ span.form-error { ...@@ -1016,7 +1022,7 @@ span.form-error {
color: #808080; color: #808080;
} }
.card-booking-content > p:last-child { .card-booking-content>p:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
...@@ -1059,7 +1065,7 @@ span.form-error { ...@@ -1059,7 +1065,7 @@ span.form-error {
color: #808080; color: #808080;
} }
.card-booking-content .description > span { .card-booking-content .description>span {
color: #646464; color: #646464;
text-decoration: underline; text-decoration: underline;
} }
...@@ -1069,7 +1075,7 @@ span.form-error { ...@@ -1069,7 +1075,7 @@ span.form-error {
font-weight: 600; font-weight: 600;
} }
.card-booking-content .price > span { .card-booking-content .price>span {
font-size: 0.8rem; font-size: 0.8rem;
color: #808080; color: #808080;
} }
...@@ -1105,7 +1111,7 @@ span.form-error { ...@@ -1105,7 +1111,7 @@ span.form-error {
margin-bottom: 1rem; 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-family: "Sofia Pro Light";
font-size: 14px; font-size: 14px;
line-height: 20px; line-height: 20px;
...@@ -1115,7 +1121,7 @@ span.form-error { ...@@ -1115,7 +1121,7 @@ span.form-error {
margin-bottom: 0; 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-family: "Sofia Pro Light";
font-size: 16px; font-size: 16px;
line-height: 20px; line-height: 20px;
...@@ -1143,6 +1149,15 @@ span.form-error { ...@@ -1143,6 +1149,15 @@ span.form-error {
margin-bottom: 20px; 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 { .business-details::before {
content: ""; content: "";
border-left: 6px solid #0070bd; border-left: 6px solid #0070bd;
...@@ -1172,7 +1187,8 @@ span.form-error { ...@@ -1172,7 +1187,8 @@ span.form-error {
margin-bottom: 0; margin-bottom: 0;
} }
.helplist li p { .helplist li p,
.business-details p {
font-family: "Sofia Pro Light"; font-family: "Sofia Pro Light";
font-size: 18px; font-size: 18px;
line-height: 20px; line-height: 20px;
...@@ -1182,6 +1198,80 @@ span.form-error { ...@@ -1182,6 +1198,80 @@ span.form-error {
margin-left: 1rem; 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 { .let-discover-carousal a {
color: #000; color: #000;
text-align: center; text-align: center;
...@@ -1207,9 +1297,11 @@ span.form-error { ...@@ -1207,9 +1297,11 @@ span.form-error {
background: #f7f5f1; background: #f7f5f1;
padding: 2rem 0; padding: 2rem 0;
} }
.similar-experiences-session { .similar-experiences-session {
padding: 2rem 0; padding: 2rem 0;
} }
.browse-experiences-item { .browse-experiences-item {
border-radius: 1.6875rem; border-radius: 1.6875rem;
background: #fff; background: #fff;
...@@ -1483,19 +1575,23 @@ footer hr { ...@@ -1483,19 +1575,23 @@ footer hr {
text-align: center; text-align: center;
padding: 1rem; padding: 1rem;
} }
.box-01 { .box-01 {
border-radius: 17px; border-radius: 17px;
border: 1px solid #d1d1d1; border: 1px solid #d1d1d1;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.box-01 .head { .box-01 .head {
font-size: 20px; font-size: 20px;
line-height: 20px; line-height: 20px;
padding: 1rem; padding: 1rem;
} }
.box-01 .reset { .box-01 .reset {
padding: 1rem; padding: 1rem;
} }
.box-01 .reset .image-container { .box-01 .reset .image-container {
width: 22px; width: 22px;
display: inline-block; display: inline-block;
...@@ -1507,121 +1603,152 @@ footer hr { ...@@ -1507,121 +1603,152 @@ footer hr {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
.box-01 .reset a .image-container{
margin-left: 0.5rem; .box-01 .reset a .image-container {
margin-left: 0.5rem;
} }
.box-01 .inner { .box-01 .inner {
padding: 1rem; padding: 1rem;
border-top: 2px solid #d1d1d1; border-top: 2px solid #d1d1d1;
} }
.df-sb { .df-sb {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
/* padding: 1rem; */ /* padding: 1rem; */
} }
.accordion-filter {
} .accordion-filter {}
.accordion-filter .accordion-button:not(.collapsed) { .accordion-filter .accordion-button:not(.collapsed) {
background: transparent; background: transparent;
} }
.accordion-filter .accordion-button:focus { .accordion-filter .accordion-button:focus {
border: 0; border: 0;
} }
.accordion-button:focus { .accordion-button:focus {
box-shadow: none; box-shadow: none;
} }
.accordion-filter.accordion-flush .accordion-item { .accordion-filter.accordion-flush .accordion-item {
border: 0; border: 0;
} }
.data-filters-item label { .data-filters-item label {
font-size: 14px; font-size: 14px;
font-weight: 300; font-weight: 300;
} }
.data-filters-item label input { .data-filters-item label input {
margin-right: 0.2rem; margin-right: 0.2rem;
} }
.data-filters-item { .data-filters-item {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
.accordion-filter.accordion-flush .accordion-item .accordion-button { .accordion-filter.accordion-flush .accordion-item .accordion-button {
padding: 0.5rem 0; padding: 0.5rem 0;
color: #000; color: #000;
} }
.accordion-filter .accordion-body { .accordion-filter .accordion-body {
padding: 0; padding: 0;
} }
.accordion-button:not(.collapsed) { .accordion-button:not(.collapsed) {
box-shadow: none; box-shadow: none;
} }
.accordion-button::after { .accordion-button::after {
background: url(/images/icons/arrow-right-01.svg) no-repeat; background: url(/images/icons/arrow-right-01.svg) no-repeat;
} }
.accordion-button:not(.collapsed)::after { .accordion-button:not(.collapsed)::after {
background: url(/images/icons/arrow-down-01.svg) no-repeat right center; background: url(/images/icons/arrow-down-01.svg) no-repeat right center;
} }
.form-select:focus { .form-select:focus {
box-shadow: none; box-shadow: none;
border-color: inherit; border-color: inherit;
} }
.box-01 .form-select { .box-01 .form-select {
border-color: #c3c3c3; border-color: #c3c3c3;
padding: 0.575rem 2.55rem 0.575rem 0.95rem; padding: 0.575rem 2.55rem 0.575rem 0.95rem;
} }
.box-01 .show-all { .box-01 .show-all {
background: transparent; background: transparent;
border: 0; border: 0;
display: flex; display: flex;
align-items: center; align-items: center;
} }
.box-01 .show-all span { .box-01 .show-all span {
font-size: 30px; font-size: 30px;
line-height: 30px; line-height: 30px;
display: inline-block; display: inline-block;
height: 10px; height: 10px;
} }
.time-filter { .time-filter {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
.time-filter .time { .time-filter .time {
position: relative; position: relative;
} }
.time-filter .time:first-child::after { .time-filter .time:first-child::after {
content: ":"; content: ":";
position: absolute; position: absolute;
right: -22px; right: -22px;
top: 30px; top: 30px;
} }
.time-filter .time input { .time-filter .time input {
width: 55px; width: 55px;
text-align: center; text-align: center;
} }
.time-filter .time-field { .time-filter .time-field {
display: flex; display: flex;
align-items: center; align-items: center;
width: 70%; width: 70%;
} }
.time-filter .time-field .time:first-child { .time-filter .time-field .time:first-child {
margin-right: 40px; margin-right: 40px;
} }
.time-filter .time-field .time div:first-child { .time-filter .time-field .time div:first-child {
margin-bottom: 5px; margin-bottom: 5px;
} }
.time-filter .ampm-field { .time-filter .ampm-field {
width: 30%; width: 30%;
padding-top: 15px; padding-top: 15px;
} }
.time-filter .ampm-field .ampm { .time-filter .ampm-field .ampm {
margin: 5px 0; margin: 5px 0;
} }
.time-filter .ampm-field .ampm input { .time-filter .ampm-field .ampm input {
margin-right: 10px; margin-right: 10px;
} }
.listing-filter { .listing-filter {
font-size: 14px; font-size: 14px;
} }
.filter-dd { .filter-dd {
text-align: right; text-align: right;
padding: 2rem 0; padding: 2rem 0;
...@@ -1629,17 +1756,21 @@ footer hr { ...@@ -1629,17 +1756,21 @@ footer hr {
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
} }
.filter-dd a { .filter-dd a {
width: 30px; width: 30px;
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
} }
.filter-dd .box-inner { .filter-dd .box-inner {
position: relative; position: relative;
} }
.filter-dd .box-inner:nth-of-type(2) { .filter-dd .box-inner:nth-of-type(2) {
margin-right: 1rem; margin-right: 1rem;
} }
.top-head { .top-head {
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -1648,6 +1779,7 @@ footer hr { ...@@ -1648,6 +1779,7 @@ footer hr {
padding-bottom: 10px; padding-bottom: 10px;
margin-bottom: 10px; margin-bottom: 10px;
} }
.filter-dd .box-inner .inner-content { .filter-dd .box-inner .inner-content {
background: #fff; background: #fff;
box-shadow: 0px 4px 15.899999618530273px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 4px 15.899999618530273px 0px rgba(0, 0, 0, 0.25);
...@@ -1660,64 +1792,81 @@ footer hr { ...@@ -1660,64 +1792,81 @@ footer hr {
display: none; display: none;
border-radius: 9px; border-radius: 9px;
} }
.filter-dd .box-inner .inner-content.open { .filter-dd .box-inner .inner-content.open {
display: block; display: block;
} }
.filter-dd .box-inner .inner-content .top-head .close-btn { .filter-dd .box-inner .inner-content .top-head .close-btn {
width: 20px; width: 20px;
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
} }
.filter-dd .box-inner .inner-content .list-by { .filter-dd .box-inner .inner-content .list-by {
text-align: left; text-align: left;
} }
.filter-dd .box-inner .inner-content .list-by li { .filter-dd .box-inner .inner-content .list-by li {
padding: 7px 0; padding: 7px 0;
} }
.filter-dd .box-inner .inner-content .list-by li input { .filter-dd .box-inner .inner-content .list-by li input {
margin-right: 10px; margin-right: 10px;
} }
.filter-dd .box-inner .inner-content .list-by li label { .filter-dd .box-inner .inner-content .list-by li label {
font-size: 14px; font-size: 14px;
} }
.browse-experiences-item .img-wrapper { .browse-experiences-item .img-wrapper {
height: 190px; height: 190px;
} }
.listing-items .browse-experiences-item .img-wrapper { .listing-items .browse-experiences-item .img-wrapper {
height: 100%; height: 100%;
} }
.filter-view { .filter-view {
display: none; display: none;
} }
.product-info .wishlist-share a { .product-info .wishlist-share a {
width: 25px; width: 25px;
display: inline-block; display: inline-block;
} }
.product-info .wishlist-share a:first-child { .product-info .wishlist-share a:first-child {
margin-right: 10px; margin-right: 10px;
} }
.product-info .top-row { .product-info .top-row {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
.product-info .top-row .most-booked { .product-info .top-row .most-booked {
color: #808080; color: #808080;
font-size: 24px; font-size: 24px;
} }
.product-reviews { .product-reviews {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0.5rem 0 2rem; padding: 0.5rem 0 2rem;
} }
.product-info .product-reviews .star { .product-info .product-reviews .star {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.product-reviews .star a { .product-reviews .star a {
width: 19px; width: 19px;
display: inline-block; display: inline-block;
} }
.product-reviews .rating { .product-reviews .rating {
background: #002c5f; background: #002c5f;
border-radius: 4px; border-radius: 4px;
...@@ -1725,85 +1874,104 @@ footer hr { ...@@ -1725,85 +1874,104 @@ footer hr {
color: #fff; color: #fff;
margin-right: 10px; margin-right: 10px;
} }
.product-info .product-reviews .review { .product-info .product-reviews .review {
margin-right: 10px; margin-right: 10px;
} }
.product-info .product-name { .product-info .product-name {
font-size: 3.438rem; font-size: 3.438rem;
line-height: 4.813rem; line-height: 4.813rem;
font-weight: 700; font-weight: 700;
} }
.product-info .price { .product-info .price {
font-size: 2.5rem; font-size: 2.5rem;
line-height: 2.5rem; line-height: 2.5rem;
} }
.product-info .price > span {
.product-info .price>span {
color: #808080; color: #808080;
font-size: 14px; font-size: 14px;
} }
.product-info .location { .product-info .location {
font-size: 1.5rem; font-size: 1.5rem;
line-height: 1.5rem; line-height: 1.5rem;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
.product-info .location > span {
.product-info .location>span {
color: #808080; color: #808080;
font-size: 16px; font-size: 16px;
} }
.btn-row { .btn-row {
padding: 2rem 0; padding: 2rem 0;
} }
.image-container.btn-gift { .image-container.btn-gift {
width: 18px; width: 18px;
display: inline-block; display: inline-block;
vertical-align: text-bottom; vertical-align: text-bottom;
} }
.btn-secondary { .btn-secondary {
background: #f0f0f0; background: #f0f0f0;
border: 1px solid #afafaf; border: 1px solid #afafaf;
color: #000; color: #000;
} }
.btn-secondary:hover { .btn-secondary:hover {
background: #e0dede; background: #e0dede;
border: 1px solid #afafaf; border: 1px solid #afafaf;
color: #000; color: #000;
} }
.image-gallery-thumbnail { .image-gallery-thumbnail {
width: 25%; width: 25%;
} }
.image-gallery-content .image-gallery-slide .image-gallery-image { .image-gallery-content .image-gallery-slide .image-gallery-image {
max-height: 100%; max-height: 100%;
} }
.breadcrumb-item + .breadcrumb-item::before {
.breadcrumb-item+.breadcrumb-item::before {
content: ""; content: "";
background: url(/images/icons/arrow-right-grey.svg) no-repeat; background: url(/images/icons/arrow-right-grey.svg) no-repeat;
width: 24px; width: 24px;
height: 24px; height: 24px;
margin: 0 5px; margin: 0 5px;
} }
.breadcrumb .breadcrumb-item a { .breadcrumb .breadcrumb-item a {
color: #808080; color: #808080;
} }
.btn { .btn {
font-size: 20px; font-size: 20px;
} }
.availability-wrappper { .availability-wrappper {
display: flex; display: flex;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
margin-top: 2rem; margin-top: 2rem;
} }
.availability-wrappper li { .availability-wrappper li {
width: 46%; width: 46%;
display: flex; display: flex;
align-items: center; align-items: center;
margin: 0.5rem; margin: 0.5rem;
} }
.availability-wrappper li > span {
.availability-wrappper li>span {
width: 30px; width: 30px;
display: block; display: block;
margin-right: 10px; margin-right: 10px;
} }
.availability-wrappper li .info { .availability-wrappper li .info {
width: 12px; width: 12px;
height: 12px; height: 12px;
...@@ -1812,9 +1980,11 @@ footer hr { ...@@ -1812,9 +1980,11 @@ footer hr {
display: block; display: block;
cursor: pointer; cursor: pointer;
} }
.availability-wrappper li .info-div { .availability-wrappper li .info-div {
position: relative; position: relative;
} }
.availability-wrappper li .info-text { .availability-wrappper li .info-text {
position: absolute; position: absolute;
top: 100%; top: 100%;
...@@ -1828,117 +1998,140 @@ footer hr { ...@@ -1828,117 +1998,140 @@ footer hr {
/* Add any other styles you need for your info div */ /* Add any other styles you need for your info div */
} }
.view-all-reviews-btn { .view-all-reviews-btn {
color: #000; color: #000;
} }
.guest-reviews-detail .head { .guest-reviews-detail .head {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
.guest-reviews-detail .head .name { .guest-reviews-detail .head .name {
font-size: 24px; font-size: 24px;
line-height: 24px; line-height: 24px;
} }
.guest-reviews-detail .head .month { .guest-reviews-detail .head .month {
color: #808080; color: #808080;
} }
.guest-reviews-detail .star { .guest-reviews-detail .star {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.guest-reviews-detail .star a { .guest-reviews-detail .star a {
width: 19px; width: 19px;
display: inline-block; display: inline-block;
} }
.review-content a { .review-content a {
color: #808080; color: #808080;
text-decoration: underline !important; text-decoration: underline !important;
} }
.guest-reviews-detail { .guest-reviews-detail {
margin-right: 3rem; margin-right: 3rem;
} }
.guest-reviews-session .head-btn { .guest-reviews-session .head-btn {
margin-right: 3rem; margin-right: 3rem;
} }
.guest-reviews-detail { .guest-reviews-detail {
margin-bottom: 2rem; margin-bottom: 2rem;
} }
.guest-reviews-session > .container {
.guest-reviews-session>.container {
border-top: 1px solid #c9c9c9; border-top: 1px solid #c9c9c9;
padding-top: 3rem; padding-top: 3rem;
} }
.guest-reviews-session { .guest-reviews-session {
padding: 0 0 2rem 0; padding: 0 0 2rem 0;
} }
.browse-experiences-item .explore-now .btn{
font-size: 13px; .browse-experiences-item .explore-now .btn {
padding-left: 1rem; font-size: 13px;
padding-right: 1rem; padding-left: 1rem;
padding-right: 1rem;
} }
.accordion-01 { .accordion-01 {
/* border: 1px solid #707070; /* border: 1px solid #707070;
border-radius: 17px; border-radius: 17px;
padding: 5px; */ padding: 5px; */
} }
.accordion-01 .accordion-button::after {
background-image: url(https://d3dfzqkbc19l96.cloudfront.net/public/assets/images/icons/plus.svg); .accordion-01 .accordion-button::after {
width: 15px; background-image: url(https://d3dfzqkbc19l96.cloudfront.net/public/assets/images/icons/plus.svg);
height: 15px; width: 15px;
background-size: 90%; height: 15px;
position: absolute; background-size: 90%;
right: 5px; position: absolute;
top: 40%; right: 5px;
} top: 40%;
.accordion-01 .accordion-button:not(.collapsed)::after { }
background-image: url(https://d3dfzqkbc19l96.cloudfront.net/public/assets/images/icons/minus.svg);
width: 15px; .accordion-01 .accordion-button:not(.collapsed)::after {
height: 3px; background-image: url(https://d3dfzqkbc19l96.cloudfront.net/public/assets/images/icons/minus.svg);
background-size: 90%; width: 15px;
} height: 3px;
.accordion-01 .accordion-button { background-size: 90%;
font-size: 20px; }
line-height: 28px;
color: #000000; .accordion-01 .accordion-button {
position: relative; font-size: 20px;
padding-top: 30px; line-height: 28px;
padding-bottom: 30px; color: #000000;
/* font-weight: 700; */ position: relative;
padding-right: 35px; padding-top: 30px;
} padding-bottom: 30px;
/* font-weight: 700; */
.accordion-01 .accordion-body { padding-right: 35px;
padding-top: 0; }
padding-bottom: 35px;
font-size: 18px; .accordion-01 .accordion-body {
line-height: 25px; padding-top: 0;
padding-right: 50px; padding-bottom: 35px;
} font-size: 18px;
.accordion-01 .accordion-button:not(.collapsed) { line-height: 25px;
color: #c9262b; padding-right: 50px;
background-color: transparent; }
box-shadow: none;
font-weight: 600; .accordion-01 .accordion-button:not(.collapsed) {
} color: #c9262b;
.accordion-01 .accordion-item { background-color: transparent;
border: 0; box-shadow: none;
border-bottom: 1px solid #DDDDDD; font-weight: 600;
} }
.accordion-01 .accordion-item:last-child {
border-bottom: 0; .accordion-01 .accordion-item {
} border: 0;
.accordion-button:focus { border-bottom: 1px solid #DDDDDD;
box-shadow: none; }
}
.accordion-01.accordion { .accordion-01 .accordion-item:last-child {
/* margin-top: 35px; */ border-bottom: 0;
border-top: 1px solid #DDDDDD; }
border-bottom: 1px solid #DDDDDD;
} .accordion-button:focus {
.faqs-session{ box-shadow: none;
padding: 5rem 0; }
.accordion-01.accordion {
/* margin-top: 35px; */
border-top: 1px solid #DDDDDD;
border-bottom: 1px solid #DDDDDD;
}
.faqs-session {
padding: 5rem 0;
} }
...@@ -1976,60 +2169,74 @@ footer hr { ...@@ -1976,60 +2169,74 @@ footer hr {
margin-left: 10px; margin-left: 10px;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.hide-on-desktop { .hide-on-desktop {
display: none !important; display: none !important;
} }
}
@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;
} }
@media (max-width:1023px) {
.guest-reviews-session .head-btn {
.product-info .product-name { margin-right: 0;
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) {
.hide-on-mobile { .guest-reviews-detail {
display: none !important; margin-right: 0;
}
} }
}
@media (max-width: 767px) {
.hide-on-mobile {
display: none !important;
}
}
@media (max-width: 767px) { @media (max-width: 767px) {
footer .subscribe input { footer .subscribe input {
width: 67%; width: 67%;
} }
.footer-link h3 { .footer-link h3 {
font-size: 20px; font-size: 20px;
} }
footer .footer-link.mtp-0 { footer .footer-link.mtp-0 {
padding-top: 0; padding-top: 0;
} }
footer .footer-link { footer .footer-link {
padding-top: 2rem; padding-top: 2rem;
} }
.signUp-to-experience-our-platform .title { .signUp-to-experience-our-platform .title {
font-size: 32px; font-size: 32px;
line-height: 33px; line-height: 33px;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
.signUp-to-experience-our-platform-session { .signUp-to-experience-our-platform-session {
background: url(../public/images/sign-up-exp-bg-m.png) no-repeat; background: url(../public/images/sign-up-exp-bg-m.png) no-repeat;
background-size: 100%; background-size: 100%;
...@@ -2037,77 +2244,97 @@ footer hr { ...@@ -2037,77 +2244,97 @@ footer hr {
padding: 1rem; padding: 1rem;
color: #fff; color: #fff;
} }
.testimonial-item .name { .testimonial-item .name {
font-size: 20px; font-size: 20px;
line-height: 22px; line-height: 22px;
} }
.testimonial-item { .testimonial-item {
padding: 0 0rem; padding: 0 0rem;
} }
.gift-an-experience-inner .img { .gift-an-experience-inner .img {
padding-top: 3rem; padding-top: 3rem;
} }
.gift-an-experience-inner .content .title { .gift-an-experience-inner .content .title {
font-size: 32px; font-size: 32px;
line-height: 35px; line-height: 35px;
} }
.gift-an-experience-inner { .gift-an-experience-inner {
padding: 1rem; padding: 1rem;
border-radius: 27px; border-radius: 27px;
background: #f6f6f6 url(/images/gift-experience-bg-m.png) no-repeat center bottom; background: #f6f6f6 url(/images/gift-experience-bg-m.png) no-repeat center bottom;
} }
.carousal-c .owl-custom01.owl-carousel .owl-nav button.owl-next { .carousal-c .owl-custom01.owl-carousel .owl-nav button.owl-next {
right: calc(-9% + 1px); right: calc(-9% + 1px);
} }
.carousal-c .owl-custom01.owl-carousel .owl-nav button.owl-prev { .carousal-c .owl-custom01.owl-carousel .owl-nav button.owl-prev {
left: calc(-9% + 1px); left: calc(-9% + 1px);
} }
.slider-item.slider-item-01 { .slider-item.slider-item-01 {
background: url(/images/home-banner/01-m.jpg) no-repeat; background: url(/images/home-banner/01-m.jpg) no-repeat;
} }
.slider-item { .slider-item {
height: 200vw; height: 200vw;
border-radius: 0 0 25px 25px; border-radius: 0 0 25px 25px;
background-position: 100% !important; background-position: 100% !important;
padding-top: 2rem; padding-top: 2rem;
} }
.slider-item .d-table { .slider-item .d-table {
display: inherit !important; display: inherit !important;
} }
.home-banner .banner-txt h1 { .home-banner .banner-txt h1 {
font-size: 20px; font-size: 20px;
line-height: 22px; line-height: 22px;
} }
.home-banner .banner-txt .title { .home-banner .banner-txt .title {
font-size: 32px; font-size: 32px;
line-height: 35px; line-height: 35px;
} }
.searchbar-h input { .searchbar-h input {
font-size: 13px; font-size: 13px;
} }
.searchbar-h { .searchbar-h {
height: 55px; height: 55px;
padding: 1rem; padding: 1rem;
} }
.searchbar-h .search-icon { .searchbar-h .search-icon {
right: 8px; right: 8px;
top: 11px; top: 11px;
} }
.searchbar-session { .searchbar-session {
margin-top: -33px; margin-top: -33px;
} }
.let-discover-session { .let-discover-session {
padding: 2rem 0; padding: 2rem 0;
} }
.head01 .title { .head01 .title {
font-size: 16px; font-size: 16px;
line-height: 18px; line-height: 18px;
} }
.head01 h2 { .head01 h2 {
font-size: 32px; font-size: 32px;
line-height: 33px; line-height: 33px;
} }
.carousal-c { .carousal-c {
padding: 0 1rem; padding: 0 1rem;
} }
} }
\ No newline at end of file \ No newline at end of file
yarn.lock
...@@ -2408,6 +2408,11 @@ ...@@ -2408,6 +2408,11 @@
"resolved" "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz" "resolved" "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz"
"version" "3.2.0" "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": "react-image-gallery@^1.3.0":
"integrity" "sha512-lKnPaOzxqSdujPFyl+CkVw0j1aYoNCHk61cvr1h7aahf5aWqmPcR9YhUB4cYrt5Tn5KHDaPUzYm5/+cX9WxzaA==" "integrity" "sha512-lKnPaOzxqSdujPFyl+CkVw0j1aYoNCHk61cvr1h7aahf5aWqmPcR9YhUB4cYrt5Tn5KHDaPUzYm5/+cX9WxzaA=="
"resolved" "https://registry.npmjs.org/react-image-gallery/-/react-image-gallery-1.3.0.tgz" "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!