Commit 2e2316ed by Ravindra Kanojiya

header cheanges

1 parent c711cc65
...@@ -60,15 +60,15 @@ const BrowseExperiences = ({ allActivitiesData }) => { ...@@ -60,15 +60,15 @@ const BrowseExperiences = ({ allActivitiesData }) => {
breakpoints={{ breakpoints={{
640: { 640: {
slidesPerView: 1, slidesPerView: 1,
spaceBetween: 20 spaceBetween: 0
}, },
768: { 768: {
slidesPerView: 2, slidesPerView: 2,
spaceBetween: 40 spaceBetween: 0
}, },
1024: { 1024: {
slidesPerView: 4, slidesPerView: 4,
spaceBetween: 20 spaceBetween: 0
} }
}} }}
modules={[Navigation, Autoplay]} modules={[Navigation, Autoplay]}
......
...@@ -46,24 +46,28 @@ const Header = () => { ...@@ -46,24 +46,28 @@ const Header = () => {
}, [endUser]); }, [endUser]);
return ( return (
<header className={`header_wrap ${isSticky ? "stick" : ""}`}> <header className={`header_wrap ${isSticky ? "stick" : ""}`}>
{isSticky && <div style={{height :76}} className="bg-transparent"></div>}
<Navbar expand="lg" className="bg-body-tertiary"> <Navbar expand="lg" className="bg-body-tertiary">
<Container fluid> <Container fluid>
<Navbar.Brand href="/"> <Navbar.Brand href="/">
<span className="image-container"> <span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/Zango-logo.svg" /> <Image loading="lazy" layout="fill" alt="" className="image img-fluid" src="/images/Zango-logo.svg" />
</span> </span>
</Navbar.Brand> </Navbar.Brand>
<Navbar.Toggle aria-controls="navbarScroll" /> <Navbar.Toggle aria-controls="navbarScroll" />
<Navbar.Collapse id="navbarScroll"> <Navbar.Collapse id="navbarScroll">
<Nav className=" my-2 my-lg-0" style={{ maxHeight: "100px" }} navbarScroll> <Nav className=" my-2 my-lg-0" style={{ maxHeight: "100px" }} navbarScroll>
<ActiveLink href="/blog" activeClassName="active"> <ActiveLink href="/blog" activeClassName="active">
<a className="nav-link ">Blogs</a> <a className="nav-link ">Blogs</a>
</ActiveLink> </ActiveLink>
<ActiveLink href="/gift-card" activeClassName="active "> <ActiveLink href="/gift-card" activeClassName="active ">
<a className="nav-link gift-card">Gift Card <span className="image-container"> <a className="nav-link gift-card">
<Image layout="fill" className="image img-fluid" src="/images/icons/gift-card-icon.svg" alt="" /> Gift Card{" "}
</span></a> <span className="image-container">
</ActiveLink> <Image layout="fill" className="image img-fluid" src="/images/icons/gift-card-icon.svg" alt="" />
</span>
</a>
</ActiveLink>
{/* <Nav.Link href="/gift-card" className="gift-card"> {/* <Nav.Link href="/gift-card" className="gift-card">
Gift Card Gift Card
...@@ -71,7 +75,6 @@ const Header = () => { ...@@ -71,7 +75,6 @@ const Header = () => {
<Image layout="fill" className="image img-fluid" src="/images/icons/gift-card-icon.svg" alt="" /> <Image layout="fill" className="image img-fluid" src="/images/icons/gift-card-icon.svg" alt="" />
</span> </span>
</Nav.Link> */} </Nav.Link> */}
</Nav> </Nav>
<Form className="d-flex me-3"> <Form className="d-flex me-3">
<div className="header-search"> <div className="header-search">
......
import { Field, Formik } from 'formik'; import { Field, Formik } from "formik";
import Image from 'next/image'; import Image from "next/image";
import React, { Fragment, useEffect, useRef, useState } from 'react'; import React, { Fragment, useEffect, useRef, useState } from "react";
import { Button, Form, Table } from 'react-bootstrap'; import { Button, Form, Table } from "react-bootstrap";
import * as Yup from "yup"; import * as Yup from "yup";
import { renderImage } from '../../services/imageHandling'; import { renderImage } from "../../services/imageHandling";
const MyProfile = () => { const MyProfile = () => {
let formikUploadImage; let formikUploadImage;
const [readOnly, setReadOnly] = useState(true); const [readOnly, setReadOnly] = useState(true);
const profileValidationSchema = Yup.object().shape({ const profileValidationSchema = Yup.object().shape({
first_name: Yup.string() first_name: Yup.string().required("First Name is Required"),
.required("First Name is Required"), last_name: Yup.string().required("Last Name is Required"),
last_name: Yup.string() email: Yup.string().required("Email Id is Required").email("Please Enter An Valid Email Id"),
.required("Last Name is Required"), country_code: Yup.string().required("Country Code is Required"),
email: Yup.string() mobile: Yup.string()
.required("Email Id is Required") .required("Mobile Number is Required")
.email("Please Enter An Valid Email Id"), .matches(/^[0-9\s]+$/, "Please Enter Correct Mobile No."),
country_code: Yup.string() password: Yup.string()
.required("Country Code is Required"), });
mobile: Yup.string()
.required("Mobile Number is Required")
.matches(/^[0-9\s]+$/, "Please Enter Correct Mobile No."),
password: Yup.string()
});
const addressesValidationSchema = Yup.object().shape({ const addressesValidationSchema = Yup.object().shape({
addresses: Yup.array().of( addresses: Yup.array().of(
Yup.object().shape({ Yup.object().shape({
pincode: Yup.string().required('Pincode is required'), pincode: Yup.string().required("Pincode is required"),
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"),
addressLine1: Yup.string().required('Address Line1 is required'), addressLine1: Yup.string().required("Address Line1 is required"),
addressLine2: Yup.string().required('Adrress Line2 is required') addressLine2: Yup.string().required("Adrress Line2 is required")
}) })
) )
}); });
const profileInitialValue = {
first_name: "John",
last_name: "Doe",
email: "john@gmail.com",
country_code: "+1 (406)",
mobile: "785-9909",
password: "*********"
}
// Ref for the first input field const profileInitialValue = {
const firstFieldRef = useRef(null); first_name: "John",
last_name: "Doe",
email: "john@gmail.com",
country_code: "+1 (406)",
mobile: "785-9909",
password: "*********"
};
// Effect to focus on the first field when entering edit mode // Ref for the first input field
useEffect(() => { const firstFieldRef = useRef(null);
console.log("firstFieldRef", readOnly, firstFieldRef.current)
if (!readOnly && firstFieldRef.current) {
firstFieldRef.current.focus();
}
}, [readOnly]);
const handleProfileUploadChange = (event) => { // Effect to focus on the first field when entering edit mode
console.log(event) useEffect(() => {
console.log(event?.currentTarget?.files[0]) console.log("firstFieldRef", readOnly, firstFieldRef.current);
formikUploadImage.setFieldValue("profile_image", event.currentTarget.files[0]); if (!readOnly && firstFieldRef.current) {
formikUploadImage.submitForm() firstFieldRef.current.focus();
} }
}, [readOnly]);
return ( const handleProfileUploadChange = event => {
<Fragment> console.log(event);
<div className="container"> console.log(event?.currentTarget?.files[0]);
<div className="row"> formikUploadImage.setFieldValue("profile_image", event.currentTarget.files[0]);
<div className="col-12 col-lg-12"> formikUploadImage.submitForm();
<div className="form-container content-wraaper"> };
<div className='px-5'>
<h2>My Profile</h2>
return (
<Fragment>
<div className="container">
<div className="row">
<div className="col-12 col-lg-12">
<div className="form-container content-wraaper">
<div className="">
<div className="bg-white border-div">
<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>
<Formik <div className="bg-white border-div">
initialValues={{ profile_image: null }} <Formik
validationSchema={Yup.object().shape({ initialValues={{ profile_image: null }}
profile_image: Yup.mixed().required("Profile Image is Required") validationSchema={Yup.object().shape({
})} profile_image: Yup.mixed().required("Profile Image is Required")
enableReinitialize={true} })}
onSubmit={values => { enableReinitialize={true}
console.log("profile image", values) onSubmit={values => {
console.log("profile image", values);
// onSubmit: async (values, { setSubmitting }) => { // onSubmit: async (values, { setSubmitting }) => {
// setSubmitting(true); // setSubmitting(true);
// 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);
// } // }
// setSubmitting(false); // setSubmitting(false);
// } // }
}} }}
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
onSubmit={e => { onSubmit={e => {
e.preventDefault(); e.preventDefault();
handleSubmit(); handleSubmit();
console.log(errors) console.log(errors);
}} }}
> >
<div className="d-flex align-items-center justify-content-between"> <div className="row align-items-center justify-content-between">
<div className="col-lg-6 d-flex align-items-center"> <div className="col-lg-6 d-flex align-items-center">
<span className="image-container me-4"> <span className="image-container me-4">
<Image layout="fill" alt="" src="/images/user/user-big.jpg" className="image" /> <Image layout="fill" alt="" src="/images/user/user-big.jpg" className="image" />
</span> </span>
<p className="username">John Doe</p> <p className="username">John Doe</p>
</div> </div>
<div className="col-lg-4"> <div className="col-lg-4">
<label className="uploadProfileImage" htmlFor="file-upload"> <label className="uploadProfileImage" htmlFor="file-upload">
<p className="mb-0">Upload Profile Photo</p> <p className="mb-0">Upload Profile Photo</p>
<Image alt="" src="/images/user/icon-upload.svg" width="24" height="24" className="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"
id="file-upload" id="file-upload"
name="profile_image" name="profile_image"
onChange={handleProfileUploadChange} onChange={handleProfileUploadChange}
// onBlur={handleBlur} // onBlur={handleBlur}
style={{ display: "none" }} style={{ display: "none" }}
onClick={event => { onClick={event => {
const { target = {} } = event || {}; const { target = {} } = event || {};
target.value = ""; 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>
</div> </div>
</Form> </Form>
)} )}
</Formik> </Formik>
</div> </div>
<div className="bg-white border-div"> <div className="bg-white border-div">
<Formik <Formik
initialValues={profileInitialValue} initialValues={profileInitialValue}
validationSchema={profileValidationSchema} validationSchema={profileValidationSchema}
enableReinitialize={true} enableReinitialize={true}
onSubmit={values => { onSubmit={values => {
console.log("profile personal details", values) console.log("profile personal details", values);
}} }}
> >
{({ values, errors, touched, handleChange, handleBlur, handleSubmit }) => ( {({ values, errors, touched, handleChange, handleBlur, handleSubmit }) => (
<Form <Form
onSubmit={e => { onSubmit={e => {
e.preventDefault(); e.preventDefault();
handleSubmit(); handleSubmit();
}} }}
> >
<> <>
<div className="d-flex justify-content-between mb-4"> <div className="d-flex justify-content-between mb-4 align-items-center">
<h2 className="mb-0">Personal Information</h2> <h2 className="mb-0">Personal Information</h2>
{/* onClick={() => setReadOnly(prevState => !prevState)} */} {/* onClick={() => setReadOnly(prevState => !prevState)} */}
{readOnly && ( {readOnly && (
<div className="btn-edit"> <div className="btn-edit">
<span className="me-3">Edit</span> <span className="me-3">Edit</span>
<i className="fa fa-edit"></i> <span className="image-container">
</div> <Image className="image img-fluid" layout="fill" alt="" src="/images/icons/edit-icon.svg" />
)} </span>
</div> </div>
<div className="row"> )}
<div className="col-12 col-lg-5"> </div>
<div className="input-group"> <div className="row">
<label>Your First Name</label> <div className="col-12 col-lg-5">
<Field <div className="input-group">
type="text" <label>Your First Name</label>
name="first_name" <Field
onChange={handleChange} type="text"
onBlur={handleBlur} name="first_name"
value={values.first_name} onChange={handleChange}
readOnly={readOnly} onBlur={handleBlur}
innerRef={firstFieldRef} value={values.first_name}
/> readOnly={readOnly}
{errors.first_name && touched.first_name && (<span className="form-error">{errors.first_name}</span>)} innerRef={firstFieldRef}
</div> />
</div> {errors.first_name && touched.first_name && <span className="form-error">{errors.first_name}</span>}
<div className="col-12 offset-lg-1 col-lg-5"> </div>
<div className="input-group"> </div>
<label>Your Last Name</label> <div className="col-12 offset-lg-1 col-lg-5">
<Field <div className="input-group">
type="text" <label>Your Last Name</label>
name="last_name" <Field type="text" name="last_name" onChange={handleChange} onBlur={handleBlur} value={values.last_name} readOnly={readOnly} />
onChange={handleChange} {errors.last_name && touched.last_name && <span className="form-error">{errors.last_name}</span>}
onBlur={handleBlur} </div>
value={values.last_name} </div>
readOnly={readOnly} </div>
/> <div className="row">
{errors.last_name && touched.last_name && (<span className="form-error">{errors.last_name}</span>)} <div className="col-12 col-lg-5">
</div> <div className="input-group">
</div> <label>Email Id</label>
</div> <Field type="text" name="email" onChange={handleChange} onBlur={handleBlur} value={values.email} readOnly={readOnly} />
<div className="row"> {errors.email && touched.email && <span className="form-error">{errors.email}</span>}
<div className="col-12 col-lg-5"> </div>
<div className="input-group"> </div>
<label>Email Id</label> <div className="col-12 offset-lg-1 col-lg-5">
<Field <div className="input-group">
type="text" <label>Mobile Number</label>
name="email" <div className="contact-number">
onChange={handleChange} {readOnly && (
onBlur={handleBlur} <Field
value={values.email} type="text"
readOnly={readOnly} name="country_code"
/> onChange={handleChange}
{errors.email && touched.email && (<span className="form-error">{errors.email}</span>)} onBlur={handleBlur}
</div> value={values.country_code}
</div> readOnly={readOnly}
<div className="col-12 offset-lg-1 col-lg-5"> style={{ width: "80px" }}
<div className="input-group"> />
<label>Mobile Number</label> )}
<div className="contact-number"> {!readOnly && (
{readOnly && ( <select id="country_code" name="country_code" onChange={handleChange} onBlur={handleBlur} style={{ width: "80px" }}>
<Field <option value="+91">+91</option>
type="text" <option value="+44">+44</option>
name="country_code" </select>
onChange={handleChange} )}
onBlur={handleBlur} <Field type="text" name="mobile" onChange={handleChange} onBlur={handleBlur} value={values.mobile} readOnly={readOnly} />
value={values.country_code}
readOnly={readOnly}
style={{ width: "80px" }}
/>
)}
{!readOnly && (
<select
id="country_code"
name="country_code"
onChange={handleChange}
onBlur={handleBlur}
style={{ width: "80px" }}
>
<option value="+91">+91</option>
<option value="+44">+44</option>
</select>
)}
<Field
type="text"
name="mobile"
onChange={handleChange}
onBlur={handleBlur}
value={values.mobile}
readOnly={readOnly}
/>
</div>
{errors.mobile && touched.mobile && (<span className="form-error">{errors.mobile}</span>)}
</div>
</div>
</div>
<div className="row">
<div className="col-12 col-lg-5">
<div className="input-group">
<label>Current Password</label>
<input
type="text"
name="password"
onChange={handleChange}
onBlur={handleBlur}
value={values.password}
readOnly={readOnly}
disabled={true}
/>
</div>
</div>
</div>
</>
</Form>
)}
</Formik>
</div> </div>
{errors.mobile && touched.mobile && <span className="form-error">{errors.mobile}</span>}
</div>
</div>
</div>
<div className="row">
<div className="col-12 col-lg-5">
<div className="input-group">
<label>Current Password</label>
<input type="text" name="password" onChange={handleChange} onBlur={handleBlur} value={values.password} readOnly={readOnly} disabled={true} />
</div>
</div>
</div>
</>
</Form>
)}
</Formik>
</div>
<div className="bg-white border-div">
<div className="bg-white border-div"> <Formik
<Formik initialValues={{
initialValues={{ addresses: [
addresses: [ {
{ pincode: ""
pincode: "", }
]
} }}
] validationSchema={addressesValidationSchema}
}} // enableReinitialize={true}
validationSchema={addressesValidationSchema} onSubmit={values => {
// enableReinitialize={true} console.log("profile address details", values);
onSubmit={values => { }}
console.log("profile address details", values) >
}} {({ values, errors, touched, handleChange, handleBlur, handleSubmit }) => (
> <Form
{({ values, errors, touched, handleChange, handleBlur, handleSubmit }) => ( onSubmit={e => {
<Form e.preventDefault();
onSubmit={e => { handleSubmit();
e.preventDefault(); }}
handleSubmit(); >
}} <>
> <div className="d-flex justify-content-between mb-4">
<> <h2 className="mb-0">Address</h2>
<div className="d-flex justify-content-between mb-4"> <div className="btn-edit">
<h2 className='mb-0'>Address</h2> <span className="me-3">Add</span>
<div className="btn-edit"> <span className="image-container">
<span className="me-3">Add</span> <Image className="image img-fluid" layout="fill" alt="" src="/images/icons/add-icon.svg" />
<i className="fa fa-plus"></i> </span>
</div>
</div>
<div className="row">
<div className="col-12 col-lg-5">
<div className="input-group">
<label>Pincode</label>
<input
type="text"
name="pincode"
onChange={handleChange}
onBlur={handleBlur}
value={values.pincode}
/>
{errors.pincode && touched.pincode && (<span className="form-error">{errors.pincode}</span>)}
</div>
</div>
<div className="col-12 offset-lg-1 col-lg-5">
<div className="input-group">
<label>Country</label>
<select
id="country"
name="country"
onChange={handleChange}
onBlur={handleBlur}
>
<option value="India">India</option>
<option value="America">America</option>
</select>
{errors.country && touched.country && (<span className="form-error">{errors.country}</span>)}
</div>
</div>
</div>
<div className="row">
<div className="col-12 col-lg-5">
<div className="input-group">
<label>State</label>
<select
id="state"
name="state"
onChange={handleChange}
onBlur={handleBlur}
>
<option value="India">India</option>
<option value="America">America</option>
</select>
{errors.state && touched.state && (<span className="form-error">{errors.state}</span>)}
</div>
</div>
<div className="col-12 offset-lg-1 col-lg-5">
<div className="input-group">
<label>City</label>
<select
id="city"
name="city"
onChange={handleChange}
onBlur={handleBlur}
>
<option value="India">India</option>
<option value="America">America</option>
</select>
{errors.city && touched.city && (<span className="form-error">{errors.city}</span>)}
</div>
</div>
</div>
<div className="row">
<div className="col-12 col-lg-5">
<div className="input-group">
<label>Address Line 1</label>
<input
type="text"
name="addressLine1"
onChange={handleChange}
onBlur={handleBlur}
value={values.addressLine1}
/>
{errors.addressLine1 && touched.addressLine1 && (<span className="form-error">{errors.addressLine1}</span>)}
</div>
</div>
<div className="col-12 offset-lg-1 col-lg-5">
<div className="input-group">
<label>Address Line 2</label>
<input
type="text"
name="addressLine2"
onChange={handleChange}
onBlur={handleBlur}
value={values.addressLine2}
/>
{errors.addressLine2 && touched.addressLine2 && (<span className="form-error">{errors.addressLine2}</span>)}
</div>
</div>
</div>
</>
</Form>
)}
</Formik>
</div>
</div> </div>
</div> </div>
</div> <div className="row">
<div className="col-12 col-lg-5">
<div className="input-group">
<label>Pincode</label>
<input type="text" name="pincode" onChange={handleChange} onBlur={handleBlur} value={values.pincode} />
{errors.pincode && touched.pincode && <span className="form-error">{errors.pincode}</span>}
</div>
</div>
<div className="col-12 offset-lg-1 col-lg-5">
<div className="input-group">
<label>Country</label>
<select id="country" name="country" onChange={handleChange} onBlur={handleBlur}>
<option value="India">India</option>
<option value="America">America</option>
</select>
{errors.country && touched.country && <span className="form-error">{errors.country}</span>}
</div>
</div>
</div>
<div className="row">
<div className="col-12 col-lg-5">
<div className="input-group">
<label>State</label>
<select id="state" name="state" onChange={handleChange} onBlur={handleBlur}>
<option value="India">India</option>
<option value="America">America</option>
</select>
{errors.state && touched.state && <span className="form-error">{errors.state}</span>}
</div>
</div>
<div className="col-12 offset-lg-1 col-lg-5">
<div className="input-group">
<label>City</label>
<select id="city" name="city" onChange={handleChange} onBlur={handleBlur}>
<option value="India">India</option>
<option value="America">America</option>
</select>
{errors.city && touched.city && <span className="form-error">{errors.city}</span>}
</div>
</div>
</div>
<div className="row">
<div className="col-12 col-lg-5">
<div className="input-group">
<label>Address Line 1</label>
<input type="text" name="addressLine1" onChange={handleChange} onBlur={handleBlur} value={values.addressLine1} />
{errors.addressLine1 && touched.addressLine1 && <span className="form-error">{errors.addressLine1}</span>}
</div>
</div>
<div className="col-12 offset-lg-1 col-lg-5">
<div className="input-group">
<label>Address Line 2</label>
<input type="text" name="addressLine2" onChange={handleChange} onBlur={handleBlur} value={values.addressLine2} />
{errors.addressLine2 && touched.addressLine2 && <span className="form-error">{errors.addressLine2}</span>}
</div>
</div>
</div>
</>
</Form>
)}
</Formik>
</div> </div>
</div>
</div> </div>
</Fragment> </div>
) </div>
} </div>
</Fragment>
);
};
export default MyProfile;
\ No newline at end of file \ No newline at end of file
export default MyProfile;
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<line x1="8.54687" y1="2.09668" x2="8.54687" y2="14.8603" stroke="#808080" stroke-width="2.5" stroke-linecap="round"/>
<line x1="1.73633" y1="8.48462" x2="14.7422" y2="8.48462" stroke="#808080" stroke-width="2.5" stroke-linecap="round"/>
</svg>
<svg width="23" height="22" viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_670_955)">
<path d="M22.9249 3.2853C22.8676 3.48187 22.8454 3.69711 22.7451 3.87088C22.5704 4.1736 22.3893 4.49058 22.1386 4.73257C18.9389 7.82015 15.7273 10.8964 12.5132 13.9702C12.3978 14.0805 12.2358 14.1699 12.0789 14.2128C10.6081 14.6144 9.13415 15.0053 7.66007 15.3957C7.09642 15.545 6.74959 15.2163 6.90396 14.6783C7.30974 13.264 7.71668 11.85 8.13434 10.439C8.17899 10.2881 8.27056 10.1316 8.38556 10.021C11.5949 6.93289 14.8074 3.84787 18.0256 0.768339C19.0692 -0.230204 20.5651 -0.222105 21.6113 0.768544C21.7947 0.942203 21.9755 1.11839 22.1583 1.2927C22.5501 1.66645 22.8071 2.10735 22.8902 2.63604C22.8942 2.66124 22.913 2.68428 22.9249 2.70833L22.9249 3.2853ZM12.077 12.8643C14.724 10.3253 17.3805 7.7772 20.0169 5.24834C19.1752 4.44104 18.3223 3.62294 17.4821 2.81705C14.8424 5.34906 12.1858 7.89727 9.54231 10.433C10.3804 11.2369 11.2295 12.0514 12.077 12.8643ZM18.3244 1.95904C19.1972 2.79624 20.0512 3.61533 20.9124 4.44144C21.1003 4.2522 21.3298 4.04425 21.5308 3.81342C21.923 3.363 21.9354 2.66405 21.5386 2.21833C21.2614 1.90696 20.9553 1.61349 20.6293 1.34933C20.1696 0.97694 19.4458 0.991548 18.9844 1.36195C18.7388 1.5591 18.5169 1.78347 18.3244 1.95904ZM8.19049 14.1632C9.1534 13.9068 10.08 13.6602 10.9811 13.4203C10.3018 12.769 9.63141 12.1262 8.96286 11.4851C8.71315 12.3509 8.45708 13.2388 8.19049 14.1632Z" fill="#808080"/>
<path d="M11.3495 21.0188C8.82187 21.0188 6.29422 21.0204 3.76658 21.0181C2.57073 21.017 1.68414 20.5098 1.18403 19.4661C1.02772 19.1399 0.939274 18.7532 0.938014 18.3939C0.921993 13.8264 0.921645 9.25888 0.931087 4.6914C0.93404 3.26281 2.06975 2.12395 3.56115 2.0892C5.20707 2.05084 6.85463 2.07443 8.50146 2.07695C8.83653 2.07746 9.07702 2.30644 9.07874 2.59544C9.08047 2.88839 8.82461 3.12033 8.48477 3.12078C6.90947 3.12286 5.33416 3.11973 3.75886 3.12268C2.90942 3.12428 2.28938 3.56772 2.07992 4.32917C2.03502 4.4924 2.02534 4.66841 2.02523 4.83855C2.02242 9.30989 2.02231 13.7812 2.02362 18.2526C2.02387 19.1077 2.45865 19.6978 3.2479 19.9068C3.41788 19.9518 3.60069 19.9704 3.77761 19.9705C8.82573 19.9738 13.8739 19.9737 18.922 19.9726C19.7808 19.9724 20.4068 19.5387 20.6189 18.7876C20.6687 18.6115 20.6823 18.4216 20.6829 18.2379C20.6879 16.7544 20.6848 15.2708 20.6865 13.7872C20.6869 13.4383 20.915 13.2042 21.2392 13.2085C21.5122 13.2121 21.7468 13.4177 21.7685 13.6812C21.7787 13.8041 21.7745 13.9283 21.7744 14.0519C21.7727 15.5423 21.79 17.033 21.7627 18.523C21.7384 19.8522 20.5749 20.9785 19.1899 21.0048C17.5938 21.0351 15.9966 21.0169 14.3999 21.0186C13.3831 21.0198 12.3663 21.0189 11.3495 21.0188Z" fill="#808080"/>
</g>
<defs>
<clipPath id="clip0_670_955">
<rect width="22" height="21" fill="white" transform="translate(0.924805 0.0224915)"/>
</clipPath>
</defs>
</svg>
...@@ -281,7 +281,6 @@ h6 { ...@@ -281,7 +281,6 @@ h6 {
position: relative !important; position: relative !important;
height: unset !important; height: unset !important;
} }
header { header {
position: relative; position: relative;
z-index: 99; z-index: 99;
...@@ -290,7 +289,7 @@ header { ...@@ -290,7 +289,7 @@ header {
.header_wrap.stick .navbar { .header_wrap.stick .navbar {
position: fixed; position: fixed;
top: -100px; top: -100px;
transition: transform 0.5s; transition: transform 0.5s ease-in-out;
transform: translateY(100px); transform: translateY(100px);
background-color: #fff; background-color: #fff;
} }
...@@ -554,21 +553,21 @@ header { ...@@ -554,21 +553,21 @@ header {
border-radius: 73px; border-radius: 73px;
background: #fff; background: #fff;
box-shadow: 0px 4px 57.5px -8px rgba(0, 0, 0, 0.25); box-shadow: 0px 4px 57.5px -8px rgba(0, 0, 0, 0.25);
height: 90px; height: calc(40px + (90 - 40) * (100vw - 320px) / (1920 - 320));
padding: 1.5rem 2.2rem; padding: 1.25vw 1.833vw;
} }
.searchbar-h input { .searchbar-h input {
width: 100%; width: 100%;
border: 0; border: 0;
font-size: 20px; font-size: calc(16px + (20 - 16) * (100vw - 320px) / (1920 - 320));
padding-right: 5rem; padding-right: 5rem;
} }
.searchbar-h .search-icon { .searchbar-h .search-icon {
position: absolute; position: absolute;
right: 35px; right: 1.823vw;
top: 30px; top: 1.563vw;
background: transparent !important; background: transparent !important;
border: 0; border: 0;
} }
...@@ -630,29 +629,6 @@ span.form-error, ...@@ -630,29 +629,6 @@ span.form-error,
font-family: "Sofia Pro Light"; font-family: "Sofia Pro Light";
} }
/*ST Images*/
.image-container {
width: auto;
position: relative;
}
.image-container > span {
position: unset !important;
/* display: inline-block !important; */
}
.image-container.d-inblock > span {
position: unset !important;
display: inline-block !important;
}
.image {
object-fit: contain;
width: 100% !important;
position: relative !important;
height: unset !important;
}
.login-banner-image { .login-banner-image {
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
...@@ -965,15 +941,15 @@ span.form-error, ...@@ -965,15 +941,15 @@ span.form-error,
.uploadProfileImage p { .uploadProfileImage p {
font-family: "Sofia Pro Bold"; font-family: "Sofia Pro Bold";
font-size: 20px; font-size: calc(16px + (20 - 16) * (100vw - 320px) / (1920 - 320));
line-height: 28px; line-height: calc(25px + (28 - 25) * (100vw - 320px) / (1920 - 320));
letter-spacing: 0em; letter-spacing: 0em;
color: #fff; color: #fff;
} }
/*-------- My Bookings ----------*/ /*-------- My Bookings ----------*/
.content-wraaper { .content-wraaper {
padding: 3rem 3rem 0; padding: 3rem 0 0;
} }
.content-wraaper h2 { .content-wraaper h2 {
...@@ -988,9 +964,9 @@ span.form-error, ...@@ -988,9 +964,9 @@ span.form-error,
.username { .username {
font-family: "Sofia Pro Light"; font-family: "Sofia Pro Light";
font-size: 21px; font-size: calc(16px + (21 - 16) * (100vw - 320px) / (1920 - 320));
line-height: calc(20px + (24 - 20) * (100vw - 320px) / (1920 - 320));
font-weight: 600; font-weight: 600;
line-height: 24px;
letter-spacing: 0em; letter-spacing: 0em;
text-align: left; text-align: left;
color: #000; color: #000;
...@@ -999,9 +975,9 @@ span.form-error, ...@@ -999,9 +975,9 @@ span.form-error,
.btn-edit { .btn-edit {
font-family: "Sofia Pro Light"; font-family: "Sofia Pro Light";
font-size: 18px; font-size: calc(16px + (18 - 16) * (100vw - 320px) / (1920 - 320));
line-height: calc(22px + (18 - 22) * (100vw - 320px) / (1920 - 320));
font-weight: 600; font-weight: 600;
line-height: 28px;
letter-spacing: 0em; letter-spacing: 0em;
text-align: center; text-align: center;
color: #808080; color: #808080;
...@@ -1009,8 +985,16 @@ span.form-error, ...@@ -1009,8 +985,16 @@ span.form-error,
border-radius: 6px; border-radius: 6px;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
cursor: pointer; cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.btn-edit > span:first-child {
margin-top: 0.2rem;
}
.btn-edit .image-container .image {
width: calc(16px + (20 - 16) * (100vw - 320px) / (1920 - 320)) !important;
} }
.content-wraaper label { .content-wraaper label {
color: #646464; color: #646464;
font-size: 18px; font-size: 18px;
...@@ -1172,8 +1156,8 @@ span.form-error, ...@@ -1172,8 +1156,8 @@ span.form-error,
.card-booking-content .details-div > p:first-child { .card-booking-content .details-div > p:first-child {
font-family: "Sofia Pro Light"; font-family: "Sofia Pro Light";
font-size: calc(14px + (14 - 14) * (100vw - 320px) / (1920 - 320) ); font-size: calc(14px + (14 - 14) * (100vw - 320px) / (1920 - 320));
line-height: calc(20px + (20 - 20) * (100vw - 320px) / (1920 - 320) ); line-height: calc(20px + (20 - 20) * (100vw - 320px) / (1920 - 320));
letter-spacing: 0em; letter-spacing: 0em;
text-align: left; text-align: left;
color: #808080; color: #808080;
...@@ -1183,8 +1167,8 @@ span.form-error, ...@@ -1183,8 +1167,8 @@ span.form-error,
.card-booking-content .details-div > p:last-child { .card-booking-content .details-div > p:last-child {
font-family: "Sofia Pro Light"; font-family: "Sofia Pro Light";
font-size: 16px; font-size: 16px;
font-size: calc(16px + (16 - 16) * (100vw - 320px) / (1920 - 320) ); font-size: calc(16px + (16 - 16) * (100vw - 320px) / (1920 - 320));
line-height: calc(20px + (20 - 20) * (100vw - 320px) / (1920 - 320) ); line-height: calc(20px + (20 - 20) * (100vw - 320px) / (1920 - 320));
letter-spacing: 0em; letter-spacing: 0em;
text-align: left; text-align: left;
color: #000000; color: #000000;
...@@ -1457,7 +1441,7 @@ span.form-error, ...@@ -1457,7 +1441,7 @@ span.form-error,
color: #ffffff; color: #ffffff;
border: none; border: none;
} }
.btnAdd:disabled .image-container .image{ .btnAdd:disabled .image-container .image {
width: 14px !important; width: 14px !important;
} }
.btnAdd:hover, .btnAdd:hover,
...@@ -1898,7 +1882,7 @@ span.form-error, ...@@ -1898,7 +1882,7 @@ span.form-error,
.browse-experiences-session { .browse-experiences-session {
background: #f7f5f1; background: #f7f5f1;
padding: 2rem 0; padding: 2rem 0 1rem;
} }
.similar-experiences-session { .similar-experiences-session {
...@@ -1981,20 +1965,20 @@ span.form-error, ...@@ -1981,20 +1965,20 @@ span.form-error,
height: 19px; height: 19px;
display: block; display: block;
} }
.rs{ .rs {
/* font-size: calc(32px + (55.008 - 32) * (100vw - 320px) / (1920 - 320)) */ /* font-size: calc(32px + (55.008 - 32) * (100vw - 320px) / (1920 - 320)) */
} }
.share-social-container{ .share-social-container {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.anticon.anticon-copy{ .anticon.anticon-copy {
cursor: pointer; cursor: pointer;
} }
.share-social-container .share-social-some-network{ .share-social-container .share-social-some-network {
margin-right: 1rem; margin-right: 1rem;
} }
.wishlist-share .wishlist{ .wishlist-share .wishlist {
width: 29px; width: 29px;
height: 29px; height: 29px;
} }
...@@ -2131,7 +2115,7 @@ span.form-error, ...@@ -2131,7 +2115,7 @@ span.form-error,
.signUp-to-experience-our-platform-session { .signUp-to-experience-our-platform-session {
background: url(../public/images/sign-up-exp-bg.webp) no-repeat; background: url(../public/images/sign-up-exp-bg.webp) no-repeat;
background-size: 100%; background-size: 100% 100%;
object-fit: cover; object-fit: cover;
padding: 4rem; padding: 4rem;
color: #fff; color: #fff;
...@@ -3500,7 +3484,7 @@ input[type="number"]::-webkit-outer-spin-button { ...@@ -3500,7 +3484,7 @@ input[type="number"]::-webkit-outer-spin-button {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.gift-card-amt>ul{ .gift-card-amt > ul {
display: grid; display: grid;
grid-gap: 20px; grid-gap: 20px;
grid-template-columns: repeat(auto-fill, minmax(calc(33.33% - 15px), 1fr)); grid-template-columns: repeat(auto-fill, minmax(calc(33.33% - 15px), 1fr));
...@@ -3723,10 +3707,12 @@ img:hover { ...@@ -3723,10 +3707,12 @@ img:hover {
font-size: 16px; font-size: 16px;
border-radius: 5px; border-radius: 5px;
} }
.see-my-gift-cards-row{ .see-my-gift-cards-row {
margin-bottom: 4rem; margin-bottom: 4rem;
} }
.browse-experiences-carousal .swiper-slide{
padding: 1rem;
}
@media (min-width: 992px) { @media (min-width: 992px) {
.navbar-expand-lg .navbar-nav .nav-link { .navbar-expand-lg .navbar-nav .nav-link {
margin: 0 2rem; margin: 0 2rem;
...@@ -3815,14 +3801,15 @@ img:hover { ...@@ -3815,14 +3801,15 @@ img:hover {
} }
} }
@media (max-width: 1023px) { @media (max-width: 1023px) {
.gift-card-amt ul li a, .gift-card-amt ul li label { .gift-card-amt ul li a,
.gift-card-amt ul li label {
padding: 1.5rem 2.8rem; padding: 1.5rem 2.8rem;
} }
.gift-card-lt { .gift-card-lt {
width: 100%; width: 100%;
height: 200px; height: 200px;
padding-right: 0; padding-right: 0;
} }
.swiper-nav, .swiper-nav,
.home_nav { .home_nav {
margin-left: -33px; margin-left: -33px;
...@@ -3876,28 +3863,39 @@ img:hover { ...@@ -3876,28 +3863,39 @@ img:hover {
margin-right: 0; margin-right: 0;
} }
} }
@media (max-width: 991px) {
}
@media (max-width: 767px) { @media (max-width: 767px) {
.gift-an-experience-session {
margin-bottom: 2rem;
}
.content-wraaper label {
margin-top: 1rem;
}
.border-div {
padding: 1.5rem;
}
.gift-card-rt .title { .gift-card-rt .title {
font-size: 4.667vw; font-size: 4.667vw;
} }
.gift-card-amt>ul { .gift-card-amt > ul {
grid-gap: 10px; grid-gap: 10px;
} }
.gift-card-amt ul li a, .gift-card-amt ul li label { .gift-card-amt ul li a,
.gift-card-amt ul li label {
padding: 1rem; padding: 1rem;
} }
.see-my-gift-cards-row{ .see-my-gift-cards-row {
text-align: center; text-align: center;
margin-bottom: 3rem; margin-bottom: 3rem;
} }
.card-booking-img.bgGrey { .card-booking-img.bgGrey {
padding: 4rem 4rem; padding: 4rem 4rem;
} }
.rightContent h2 { .rightContent h2 {
font-size: 4.172vw; font-size: 4.172vw;
line-height: 4.172vw; line-height: 4.172vw;
} }
.sub-categories { .sub-categories {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
...@@ -4243,7 +4241,7 @@ img:hover { ...@@ -4243,7 +4241,7 @@ img:hover {
background: url(../public/images/sign-up-exp-bg-m.webp) no-repeat; background: url(../public/images/sign-up-exp-bg-m.webp) no-repeat;
background-size: 100%; background-size: 100%;
object-fit: cover; object-fit: cover;
padding: 1rem; padding: 2rem 1rem;
color: #fff; color: #fff;
} }
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!