Skip to content

Jay Mehta / zango-frontend

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

header cheanges

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