Skip to content

Jay Mehta / zango-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 746c0ed2 by Jyotsna
Options

user journey - login, signup and profile page done

1 parent f50d0658
Expand all
Inline Side-by-side
Showing 51 changed files with 782 additions and 1 deletions
components/layout/DropdownUserProfile.js 0 → 100644
import { signOut } from "next-auth/react";
import Image from "next/image";
import Link from "next/link";
import { useRouter } from "next/router";
import React, { Fragment, useEffect, useState } from "react";
import { renderImage } from "../../services/imageHandling";
const DropdownUserProfile = () => {
const router = useRouter();
const logoutHandler = () => {
signOut();
};
return (
<Fragment>
<div className="row">
<div className="col-12 col-lg-12">
<div>
<ul className="link-list">
<li>
<Link href="/personal-details">
<a>
Personal Info <i className="arrow-right"></i>
</a>
</Link>
</li>
</ul>
</div>
</div>
</div>
</Fragment>
);
};
export default DropdownUserProfile;
components/login/Login.js 0 → 100644
import React, { useState } from 'react';
import { Formik } from "formik";
import Image from "next/image";
import Link from "next/link";
import { Fragment } from "react";
import { Button, Form } from "react-bootstrap";
import * as Yup from "yup";
import { renderImage } from "../../services/imageHandling";
const Login = (props) => {
console.log(props.type)
const loginValidationSchema = Yup.object().shape({
email: Yup.string()
.required("Email Id is Required")
.email("Please Enter An Valid Email Id"),
password: Yup.string()
.required("Password is Required")
});
return (
<Fragment>
<div className="contaier-fluid login-banner-image">
<div className="row">
<div className="col-12 col-lg-4 login-div">
<div className="">
<h2>{props.type=="vendor" ? "Vendor Login" : "Login to Experience"}</h2>
<div className="form-container">
<Formik
initialValues={{
email: "",
password: ""
}}
validationSchema={loginValidationSchema}
// enableReinitialize={true}
onSubmit={values => {
console.log("login values",values)
}}
>
{({ values, errors, touched, handleChange, handleBlur, handleSubmit }) => (
<Form
onSubmit={e => {
e.preventDefault();
handleSubmit();
}}
>
<div className="input-group">
<label>Email Id</label>
<input
type="text"
name="email"
onChange={handleChange}
onBlur={handleBlur}
value={values.email}
placeholder="yourname@example.com"
/>
{errors.email && touched.email && (<span className="form-error">{errors.email}</span>)}
</div>
<div className="input-group">
<label>Password</label>
<input
type="text"
name="password"
onChange={handleChange}
onBlur={handleBlur}
value={values.password}
placeholder="#@$!%@#"
/>
{errors.password && touched.password && (<span className="form-error">{errors.password}</span>)}
</div>
<div className="input-group">
<Button type="submit" className="btn btn-primary btn-submit">
Login
</Button>
</div>
</Form>
)}
</Formik>
<div className="input-group justify-content-center">
<p className="text-center mb-0">or <Link href={`../signup/${props.type}`}>Create a new account</Link></p>
</div>
{props && props.type == "user" && (
<>
<div className="input-group mb-0">
<div className="btn-continue">
<span className="col-1 image-container">
<Image src={renderImage("/images/login/icon-google.png")} layout="fill" className="image" />
</span>
<span className="col-10 text-center">Continue with Google</span>
</div>
</div>
<div className="input-group mb-0">
<div className="btn-continue">
<span className="col-1 image-container">
<Image src={renderImage("/images/login/icon-fb1.png")} layout="fill" className="image" />
</span>
<span className="col-10 text-center">Continue with Facebook</span>
</div>
</div>
<div className="input-group mb-0">
<div className="btn-continue mb-0">
<span className="col-1 image-container">
<Image src={renderImage("/images/login/icon-apple.png")} layout="fill" className="image" />
</span>
<span className="col-10 text-center">Continue with Apple</span>
</div>
</div>
</>
)}
</div>
</div>
</div>
</div>
</div>
</Fragment>
)
}
export default Login;
\ No newline at end of file \ No newline at end of file
components/user/MyBookings.js 0 → 100644
import Image from "next/image";
import React, { Fragment } from "react";
import { renderImage } from "../../services/imageHandling";
const MyBookings = () => {
const bookingsData = [
{
id: "0",
name: "City Climb",
start_date: "Jan 8, 2021",
end_date: "Jan 9, 2021",
price: "$200",
status: "Confirmed",
image: "/images/user/image1.png"
},
{
id: "1",
name: "City Climb",
start_date: "Jan 8, 2021",
end_date: "Jan 9, 2021",
price: "$200",
status: "Confirmed",
image: "/images/user/image1.png"
},
{
id: "2",
name: "City Climb",
start_date: "Jan 8, 2021",
end_date: "Jan 9, 2021",
price: "$200",
status: "Confirmed",
image: "/images/user/image1.png"
},
{
id: "3",
name: "City Climb",
start_date: "Jan 8, 2021",
end_date: "Jan 9, 2021",
price: "$200",
status: "Confirmed",
image: "/images/user/image1.png"
}
]
return (
<Fragment>
<div className="container">
<div className="row">
<div className="col-12 col-lg-12 form-container content-wraaper">
<h2>My Bookings</h2>
<div className="row">
{bookingsData?.length && bookingsData.map((data, index) => (
<div className="col-12 col-lg-3" key={`1${index}`}>
<div className="card-booking">
<div className="card-booking-img">
<span className="image-container">
<Image src={renderImage(data.image)} layout="fill" className="image" />
</span>
</div>
<div className="card-booking-content">
<p className="activity-name">{data.name}</p>
<p>{data.start_date} - {data.end_date}</p>
<p>{data.price}</p>
<p className="status">{data.status}</p>
</div>
<div className="hr-div" />
<div className="card-booking-footer">
<div className="d-flex align-items-center justify-content-between">
<div className="d-flex align-items-center">
<span className="image-container me-2">
<Image src={renderImage("/images/user/icon-rebook.svg")} layout="fill" className="image" />
</span>
<p className="duration mb-0">Rebook this booking</p>
</div>
<div className="image-container">
<Image src={renderImage("/images/user/arrow-right.svg")} layout="fill" className="image" />
</div>
</div>
</div>
</div>
</div>
))}
</div>
<div className="row">
{bookingsData?.length && bookingsData.map((data, index) => (
<div className="col-12 col-lg-3" key={`2${index}`}>
<div className="card-booking">
<div className="card-booking-img">
<span className="image-container">
<Image src={renderImage(data.image)} layout="fill" className="image" />
</span>
</div>
<div className="card-booking-content">
<p className="activity-name">{data.name}</p>
<p>{data.start_date} - {data.end_date}</p>
<p>{data.price}</p>
<p className="status">{data.status}</p>
</div>
<div className="hr-div" />
<div className="card-booking-footer">
<div className="d-flex align-items-center justify-content-between">
<div className="d-flex align-items-center">
<span className="image-container me-2">
<Image src={renderImage("/images/user/icon-rebook.svg")} layout="fill" className="image" />
</span>
<p className="duration mb-0">Rebook this booking</p>
</div>
<div className="image-container">
<Image src={renderImage("/images/user/arrow-right.svg")} layout="fill" className="image" />
</div>
</div>
</div>
</div>
</div>
))}
</div>
<div className="row">
{bookingsData?.length && bookingsData.map((data, index) => (
<div className="col-12 col-lg-3" key={`3${index}`}>
<div className="card-booking">
<div className="card-booking-img">
<span className="image-container">
<Image src={renderImage(data.image)} layout="fill" className="image" />
</span>
</div>
<div className="card-booking-content">
<p className="activity-name">{data.name}</p>
<p>{data.start_date} - {data.end_date}</p>
<p>{data.price}</p>
<p className="status">{data.status}</p>
</div>
<div className="hr-div" />
<div className="card-booking-footer">
<div className="d-flex align-items-center justify-content-between">
<div className="d-flex align-items-center">
<span className="image-container me-2">
<Image src={renderImage("/images/user/icon-rebook.svg")} layout="fill" className="image" />
</span>
<p className="duration mb-0">Rebook this booking</p>
</div>
<div className="image-container">
<Image src={renderImage("/images/user/arrow-right.svg")} layout="fill" className="image" />
</div>
</div>
</div>
</div>
</div>
))}
</div>
</div>
</div>
</div>
</Fragment>
)
}
export default MyBookings;
\ No newline at end of file \ No newline at end of file
components/user/MyGiftCard.js 0 → 100644
import Image from "next/image";
import React, { Fragment } from "react";
import { Button } from "react-bootstrap";
import { renderImage } from "../../services/imageHandling";
const MyGiftCard = () => {
const giftCardData = [
{
id: "0",
sender_email: "John@gmail.com",
receiver_email: "martha@gmail.com",
gift_amount: "$750",
image: "/images/zango-logo.svg"
},
{
id: "1",
sender_email: "John@gmail.com",
receiver_email: "martha@gmail.com",
gift_amount: "$750",
image: "/images/zango-logo.svg"
},
{
id: "2",
sender_email: "John@gmail.com",
receiver_email: "martha@gmail.com",
gift_amount: "$750",
image: "/images/zango-logo.svg"
},
]
return (
<Fragment>
<div className="container">
<div className="row">
<div className="col-12 col-lg-12 form-container content-wraaper">
<h2>My Gift Card</h2>
<div className="row">
{giftCardData?.length && giftCardData.map((data, index) => (
<div className="col-12 col-lg-4" key={`1${index}`}>
<div className="card-booking">
<div className="card-booking-img bgGrey">
<span className="image-container">
<Image src={renderImage(data.image)} layout="fill" className="image" />
</span>
</div>
<div className="card-booking-content details-wrapper">
<p className="details">Details</p>
<div className="d-flex align-items-start justify-content-between">
<div className="details-div">
<p>Sender’s Email Id</p>
<p>{data.sender_email}</p>
</div>
<div className="details-div">
<p>Receiver’s Email Id</p>
<p>{data.receiver_email}</p>
</div>
</div>
<div className="details-div">
<p>Gift Amount</p>
<p>{data.gift_amount}</p>
</div>
</div>
</div>
</div>
))}
</div>
</div>
</div>
</div>
</Fragment>
)
}
export default MyGiftCard;
\ No newline at end of file \ No newline at end of file
components/user/MyWhishList.js 0 → 100644
import Image from "next/image";
import React, { Fragment } from "react";
import { Button } from "react-bootstrap";
import { renderImage } from "../../services/imageHandling";
const MyWhishList = () => {
const whishListData = [
{
id: "0",
name: "City Climb",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
price: "$200",
discount: "40% OFF",
availablity: "For 1 Night",
other: "Includes taxes & Fees",
rating: "8.8",
type: "Top Rated",
image: "/images/user/image1.png"
},
{
id: "1",
name: "City Climb",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
price: "$200",
discount: "40% OFF",
availablity: "For 1 Night",
other: "Includes taxes & Fees",
rating: "8.8",
type: "Top Rated",
image: "/images/user/image2.png"
},
{
id: "2",
name: "City Climb",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
price: "$200",
discount: "40% OFF",
availablity: "For 1 Night",
other: "Includes taxes & Fees",
rating: "8.8",
type: "Top Rated",
image: "/images/user/image3.png"
},
{
id: "3",
name: "City Climb",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
price: "$200",
discount: "40% OFF",
availablity: "For 1 Night",
other: "Includes taxes & Fees",
rating: "8.8",
type: "Top Rated",
image: "/images/user/image4.png"
}
]
return (
<Fragment>
<div className="container">
<div className="row">
<div className="col-12 col-lg-12 form-container content-wraaper">
<h2>My Bookings</h2>
<div className="row">
{whishListData?.length && whishListData.map((data, index) => (
<div className="col-12 col-lg-3" key={`1${index}`}>
<div className="card-booking">
<div className="card-booking-img">
<span className="image-container">
<Image src={renderImage(data.image)} layout="fill" className="image" />
</span>
<p className="type">{data.type}</p>
</div>
<div className="card-booking-content">
<div className="d-flex align-items-start justify-content-between">
<p className="activity-name">{data.name}</p>
<div className="d-flex align-items-center">
<div className="rating">
<span className="me-1 pt-1">{data.rating}</span>
<span className="image-container">
<Image src={renderImage("/images/user/star.svg")} layout="fill" className="image" />
</span>
</div>
<span className="image-container">
<Image src={renderImage("/images/user/heart.svg")} layout="fill" className="image" />
</span>
</div>
</div>
<p className="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, <span>Read More</span></p>
<p className="price">{data.price} <span>{data.discount}</span></p>
<p className="other">{data.availablity}</p>
<p className="other">{data.other}</p>
</div>
<div className="card-booking-footer pt-0">
<Button type="button" className="btn btn-primary btn-explore">
Explore Now
</Button>
</div>
</div>
</div>
))}
</div>
</div>
</div>
</div>
</Fragment>
)
}
export default MyWhishList;
\ No newline at end of file \ No newline at end of file
package.json
...@@ -25,11 +25,13 @@ ...@@ -25,11 +25,13 @@
"react-dom": "18.2.0", "react-dom": "18.2.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",
"react-otp-input": "^3.1.1",
"react-phone-input-2": "^2.15.1", "react-phone-input-2": "^2.15.1",
"react-player": "^2.11.0", "react-player": "^2.11.0",
"react-rating": "^2.0.5", "react-rating": "^2.0.5",
"react-redux": "^8.0.2", "react-redux": "^8.0.2",
"react-toastify": "^9.0.8", "react-toastify": "^9.0.8",
"reactjs-otp-input": "^2.0.8",
"redux": "^4.2.0", "redux": "^4.2.0",
"redux-devtools-extension": "^2.13.9", "redux-devtools-extension": "^2.13.9",
"redux-thunk": "^2.4.1", "redux-thunk": "^2.4.1",
......
pages/login/[type]/index.js 0 → 100644
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import Layout from "../../../components/layout/Layout";
import Login from "../../../components/login/Login";
export default function LoginPage() {
const router = useRouter();
const [loginType, setLoginType] = useState("");
useEffect(() => {
setLoginType(router?.query?.type)
}, [router])
return (
<Layout>
<Login type={loginType} />
</Layout>
);
};
\ No newline at end of file \ No newline at end of file
pages/signup/[type]/index.js 0 → 100644
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import Layout from "../../../components/layout/Layout";
import Signup from "../../../components/signup/Signup";
export default function SignupPage () {
const router = useRouter();
const [signupType, setSignupType] = useState("");
useEffect(() => {
setSignupType(router?.query?.type)
}, [router])
return (
<Layout>
<Signup type={signupType} />
</Layout>
);
};
\ No newline at end of file \ No newline at end of file
pages/user/bookings/index.js 0 → 100644
import React from "react";
import Layout from "../../../components/layout/Layout";
import MyBookings from "../../../components/user/MyBookings";
export default function UserBokkingsPage () {
return (
<Layout>
<MyBookings />
</Layout>
);
};
\ No newline at end of file \ No newline at end of file
pages/user/giftcard/index.js 0 → 100644
import React from "react";
import Layout from "../../../components/layout/Layout";
import MyGiftCard from "../../../components/user/MyGiftCard";
export default function UserGiftCardPage () {
return (
<Layout>
<MyGiftCard />
</Layout>
);
};
\ No newline at end of file \ No newline at end of file
pages/user/profile/index.js 0 → 100644
import React from "react";
import Layout from "../../../components/layout/Layout";
import MyProfile from "../../../components/user/MyProfile";
export default function UserProfilePage () {
return (
<Layout>
<MyProfile />
</Layout>
);
};
\ No newline at end of file \ No newline at end of file
pages/user/whishlist/index.js 0 → 100644
import React from "react";
import Layout from "../../../components/layout/Layout";
import MyWhishList from "../../../components/user/MyWhishList";
export default function UserProfilePage () {
return (
<Layout>
<MyWhishList />
</Layout>
);
};
\ No newline at end of file \ No newline at end of file
pages/vendor/activity-details/index.js 0 → 100644
import React from "react";
import Layout from "../../../components/layout/Layout";
import ActivityDetails from "../../../components/vendor/ActivityDetails";
export default function ActivityDetailsPage () {
return (
<Layout>
<ActivityDetails />
</Layout>
);
};
\ No newline at end of file \ No newline at end of file
pages/vendor/business-details/index.js 0 → 100644
import React from "react";
import Layout from "../../../components/layout/Layout";
import BusinessDetails from "../../../components/vendor/BusinessDetails";
export default function BusinessDetailsPage () {
return (
<Layout>
<BusinessDetails />
</Layout>
);
};
\ No newline at end of file \ No newline at end of file
pages/vendor/dashboard/index.js 0 → 100644
import Image from "next/image";
import React, { Fragment, useRef, useState } from "react";
import { Badge, Button, Col, Container, Nav, Navbar, Overlay, OverlayTrigger, Popover, Row } from "react-bootstrap";
const VendorDashboard = () => {
const [show, setShow] = useState(false);
const [target, setTarget] = useState(null);
const ref = useRef(null);
const handleClick = (event) => {
setShow(!show);
setTarget(event.target);
};
const [collapsed, setCollapsed] = useState(false);
const toggleSidebar = () => {
setCollapsed(!collapsed);
};
return (
<>
<Navbar bg="dark" variant="dark">
<Navbar.Brand href="#">Your Logo</Navbar.Brand>
<Nav className="mr-auto">
<Nav.Link href="#">Home</Nav.Link>
<Nav.Link href="#">About</Nav.Link>
<Nav.Link href="#">Services</Nav.Link>
<Nav.Link href="#">Contact</Nav.Link>
</Nav>
<Nav>
<Nav.Link ref={ref}>
{/* <FaBell /> */}
<Badge variant="danger" onClick={handleClick}>5</Badge>
<Overlay
show={show}
target={target}
placement="bottom"
container={ref}
containerPadding={0}
className="bottom"
>
<Popover id="popover-contained">
<Popover.Header as="h3">Popover bottom</Popover.Header>
<Popover.Body>
<strong>Holy guacamole!</strong> Check this info.
</Popover.Body>
</Popover>
</Overlay>
</Nav.Link>
</Nav>
</Navbar>
<Fragment>
<header className="header_wrap">
<Navbar expand="lg" className="bg-body-tertiary">
<Container>
<Navbar.Brand href="#">
<span className="image-container">
<Image 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>
<Nav.Link href="#action1">Blogs</Nav.Link>
<Nav.Link href="#action2" className="gift-card">
Gift Card
<span className="image-container">
<Image layout="fill" className="image img-fluid" src="/images/icons/gift-card-icon.svg" alt="" />
</span>
</Nav.Link>
</Nav>
</Navbar.Collapse> */}
</Container>
</Navbar>
</header>
<Container fluid>
<Row>
<Col xs={12} md={3} lg={2} className={`sidebar ${collapsed ? 'collapsed' : ''}`}>
<ul>
<li><img src="/images/vendor/orders.svg" className="me-1 img-fluid" /> Orders</li>
<li><img src="/images/vendor/activities.svg" className="me-1 img-fluid" /> Activities</li>
</ul>
</Col>
<Col className="content">
{/* <Button onClick={toggleSidebar} className="toggle-btn">
{collapsed ? 'Expand Sidebar' : 'Collapse Sidebar'}
</Button> */}
</Col>
</Row>
</Container>
</Fragment>
</>
);
};
export default VendorDashboard;
\ No newline at end of file \ No newline at end of file
public/fonts/SofiaPro-Bold.ttf 0 → 100644
No preview for this file type
public/fonts/SofiaPro-Light.otf 0 → 100644
No preview for this file type
public/images/user/arrow-down.svg 0 → 100644
<svg width="18" height="12" viewBox="0 0 18 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.3291 2.2096L8.66437 9.54486L15.9996 2.2096" stroke="black" stroke-width="2.5" stroke-linecap="round"/>
</svg>
public/images/user/arrow-right.svg 0 → 100644
<svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.83215 10.317L6.36231 5.7868L1.83215 1.25665" stroke="black" stroke-width="2" stroke-linecap="round"/>
</svg>
public/images/user/icon-rebook.svg 0 → 100644
<svg width="22" height="21" viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18.9055 14.5082C18.4772 14.6511 18.1016 14.7873 17.719 14.9009C17.3693 15.0047 17.024 14.8005 16.9359 14.4604C16.8592 14.1641 17.0052 13.8493 17.3122 13.7396C18.1797 13.4296 19.051 13.1291 19.9262 12.8408C20.2504 12.734 20.601 12.9221 20.6953 13.2485C20.9428 14.1056 21.1812 14.9653 21.4065 15.8282C21.5016 16.1922 21.291 16.5062 20.9393 16.5881C20.5915 16.669 20.2833 16.4773 20.1761 16.1092C20.0997 15.8471 20.0286 15.5836 19.9454 15.2857C19.786 15.5424 19.6518 15.7782 19.4989 16.0017C17.7011 18.631 15.2034 20.1535 11.9918 20.5141C7.0173 21.0725 2.26999 17.842 1.05536 13.0896C0.94609 12.6621 1.11372 12.3307 1.4882 12.2341C1.85058 12.1406 2.17082 12.3626 2.28661 12.787C2.89826 15.0286 4.20938 16.7726 6.20596 18.0087C7.8383 19.0192 9.63362 19.4596 11.5582 19.3031C14.7311 19.0452 17.1064 17.5298 18.7204 14.8505C18.7786 14.7539 18.828 14.6522 18.9055 14.5082Z" fill="black"/>
<path d="M2.96264 6.6387C3.37481 6.50112 3.75004 6.36256 4.13352 6.25138C4.57068 6.12464 4.97973 6.46275 4.93473 6.90163C4.90898 7.15277 4.76882 7.33497 4.52777 7.4194C3.67193 7.71914 2.81505 8.01633 1.9544 8.30244C1.60498 8.41861 1.25637 8.23592 1.15582 7.88568C0.913606 7.04196 0.679603 6.19585 0.454167 5.34768C0.357506 4.984 0.555926 4.65405 0.893909 4.56748C1.25236 4.47567 1.56582 4.66148 1.68027 5.04054C1.75921 5.30201 1.82934 5.56605 1.91007 5.85259C1.95002 5.79769 1.9808 5.76175 2.00459 5.72181C3.77013 2.75712 6.38313 1.03288 9.86571 0.640084C14.8446 0.0785135 19.557 3.28529 20.798 8.04191C20.9136 8.48505 20.75 8.81751 20.3676 8.91672C20.0056 9.01062 19.6875 8.78933 19.5702 8.36299C18.9049 5.94654 17.4514 4.12323 15.233 2.89944C10.9444 0.533632 5.34876 2.16549 3.05908 6.43526C3.02954 6.49035 3.00535 6.5482 2.96264 6.6387Z" fill="black"/>
</svg>
public/images/user/icon-upload.svg 0 → 100644
<svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_822_2426)">
<path d="M9.42095 17.9955C7.74795 17.9955 6.07482 18.0077 4.40196 17.9919C2.88299 17.9776 1.71997 17.3098 0.93939 16.0019C0.595308 15.4253 0.434052 14.7898 0.429198 14.1207C0.420861 12.9713 0.42386 11.8218 0.427347 10.6724C0.428578 10.2666 0.665323 9.94704 1.01872 9.84787C1.36379 9.75103 1.74455 9.87552 1.91918 10.1851C2.00554 10.3383 2.05602 10.5326 2.05799 10.7089C2.07025 11.8072 2.0636 12.9056 2.06433 14.0039C2.06524 15.3656 3.05837 16.3566 4.42382 16.3569C7.75706 16.3576 11.0903 16.3576 14.4235 16.3569C15.7883 16.3566 16.7792 15.3657 16.7805 14.0012C16.7816 12.8837 16.7792 11.7662 16.7818 10.6487C16.7827 10.2761 17.0027 9.97174 17.3386 9.85925C17.6642 9.7502 18.0322 9.8442 18.2285 10.1278C18.3254 10.2677 18.4083 10.4527 18.4093 10.6179C18.417 11.8882 18.4483 13.161 18.385 14.4286C18.2986 16.1571 16.8886 17.6592 15.1825 17.9274C14.9126 17.9698 14.6366 17.9917 14.3633 17.9926C12.7159 17.9985 11.0684 17.9956 9.42095 17.9955Z" fill="white"/>
<path d="M8.60829 2.8014C8.51582 2.88978 8.46464 2.93682 8.41551 2.98592C7.33132 4.06962 6.24638 5.15257 5.16413 6.2382C4.93684 6.46621 4.67918 6.58473 4.35323 6.51343C3.75759 6.38313 3.50952 5.67584 3.89462 5.20251C3.93479 5.15314 3.98126 5.10872 4.02638 5.06358C5.60243 3.48716 7.17861 1.91087 8.75493 0.334721C9.19952 -0.109824 9.64455 -0.111806 10.0867 0.330207C11.6723 1.91518 13.2567 3.50135 14.8433 5.0852C15.0778 5.31923 15.1922 5.58743 15.107 5.91663C14.9505 6.52134 14.2322 6.7394 13.7703 6.31924C13.5533 6.12172 13.352 5.90675 13.1442 5.69903C12.2363 4.79131 11.328 3.88402 10.4228 2.97362C10.3755 2.92596 10.3554 2.85116 10.3226 2.78899C10.2941 2.80928 10.2656 2.82956 10.2371 2.84984V3.07034C10.237 6.37897 10.2373 9.68759 10.2367 12.9962C10.2366 13.4664 10.0233 13.7694 9.62433 13.8757C9.13892 14.0049 8.64805 13.6568 8.61301 13.1567C8.60677 13.0676 8.60846 12.978 8.60846 12.8886C8.60826 9.61822 8.60829 6.34788 8.60829 3.07754C8.60829 3.00319 8.60829 2.92884 8.60829 2.8014Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_822_2426">
<rect width="18" height="18" fill="white" transform="translate(0.423828)"/>
</clipPath>
</defs>
</svg>
public/images/user/star.svg 0 → 100644
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.28289 0.452759L8.86537 5.32316H13.9864L9.84341 8.33323L11.4259 13.2036L7.28289 10.1936L3.13987 13.2036L4.72236 8.33323L0.579354 5.32316H5.7004L7.28289 0.452759Z" fill="#FFD600"/>
</svg>
public/images/vendor/activities.svg 0 → 100644
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11 7V11H7V7H11ZM13 7H18V11H13V7ZM11 18H7V13H11V18ZM13 18V13H18V17C18 17.5523 17.5523 18 17 18H13ZM11 0V5H7V0H11ZM13 0H17C17.5523 0 18 0.44772 18 1V5H13V0ZM5 7V11H0V7H5ZM5 18H1C0.44772 18 0 17.5523 0 17V13H5V18ZM5 0V5H0V1C0 0.44772 0.44772 0 1 0H5Z" fill="white"/>
</svg>
public/images/vendor/call.svg 0 → 100644
<svg width="31" height="31" viewBox="0 0 31 31" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="15.5" cy="15.5" r="15.5" fill="#0070BD"/>
</svg>
public/images/vendor/orders.svg 0 → 100644
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 14C5.28333 14 5.52083 13.9042 5.7125 13.7125C5.90417 13.5208 6 13.2833 6 13C6 12.7167 5.90417 12.4792 5.7125 12.2875C5.52083 12.0958 5.28333 12 5 12C4.71667 12 4.47917 12.0958 4.2875 12.2875C4.09583 12.4792 4 12.7167 4 13C4 13.2833 4.09583 13.5208 4.2875 13.7125C4.47917 13.9042 4.71667 14 5 14ZM5 10C5.28333 10 5.52083 9.90417 5.7125 9.7125C5.90417 9.52083 6 9.28333 6 9C6 8.71667 5.90417 8.47917 5.7125 8.2875C5.52083 8.09583 5.28333 8 5 8C4.71667 8 4.47917 8.09583 4.2875 8.2875C4.09583 8.47917 4 8.71667 4 9C4 9.28333 4.09583 9.52083 4.2875 9.7125C4.47917 9.90417 4.71667 10 5 10ZM5 6C5.28333 6 5.52083 5.90417 5.7125 5.7125C5.90417 5.52083 6 5.28333 6 5C6 4.71667 5.90417 4.47917 5.7125 4.2875C5.52083 4.09583 5.28333 4 5 4C4.71667 4 4.47917 4.09583 4.2875 4.2875C4.09583 4.47917 4 4.71667 4 5C4 5.28333 4.09583 5.52083 4.2875 5.7125C4.47917 5.90417 4.71667 6 5 6ZM8 14H14V12H8V14ZM8 10H14V8H8V10ZM8 6H14V4H8V6ZM2 18C1.45 18 0.979167 17.8042 0.5875 17.4125C0.195833 17.0208 0 16.55 0 16V2C0 1.45 0.195833 0.979167 0.5875 0.5875C0.979167 0.195833 1.45 0 2 0H16C16.55 0 17.0208 0.195833 17.4125 0.5875C17.8042 0.979167 18 1.45 18 2V16C18 16.55 17.8042 17.0208 17.4125 17.4125C17.0208 17.8042 16.55 18 16 18H2ZM2 16H16V2H2V16Z" fill="white"/>
</svg>
public/images/vendor/question.svg 0 → 100644
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM11 15V17H13V15H11ZM13 13.3551C14.4457 12.9248 15.5 11.5855 15.5 10C15.5 8.067 13.933 6.5 12 6.5C10.302 6.5 8.88637 7.70919 8.56731 9.31346L10.5288 9.70577C10.6656 9.01823 11.2723 8.5 12 8.5C12.8284 8.5 13.5 9.17157 13.5 10C13.5 10.8284 12.8284 11.5 12 11.5C11.4477 11.5 11 11.9477 11 12.5V14H13V13.3551Z" fill="#0070BD"/>
</svg>
services/imageHandling.js
...@@ -13,3 +13,22 @@ export const cleanImage = originalImage => { ...@@ -13,3 +13,22 @@ export const cleanImage = originalImage => {
return imageUrl; return imageUrl;
}; };
export const renderImage = imagePath => {
let imageUrl = "/images/default.svg";
if (imagePath) {
/** When the AWS S3 plugin is activated, images are uploaded to S3 rather than local file system. */
if (imagePath.startsWith("http") || imagePath.startsWith("https")) {
imageUrl = imagePath;
} else if (process.env.NEXT_PUBLIC_IMAGE_URL) {
/** If now S3, then images are stored under the public/uploads directory of Strapi */
imageUrl = `${process.env.NEXT_PUBLIC_IMAGE_URL}${imagePath}`;
} else {
imageUrl = `http://localhost:3000${imagePath}`;
}
}
return imageUrl;
};
styles/fonts.css
...@@ -31,4 +31,20 @@ ...@@ -31,4 +31,20 @@
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
src: local('Inter Medium'), url('../public/fonts/Inter-Medium.ttf') format('truetype'); src: local('Inter Medium'), url('../public/fonts/Inter-Medium.ttf') format('truetype');
}
\ No newline at end of file \ No newline at end of file
}
@font-face {
font-family: 'Sofia Pro Light';
font-style: normal;
font-weight: 300;
src: local('Sofia Pro Light'), url('../public/fonts/SofiaPro-Light.otf') format('opentype');
}
@font-face {
font-family: 'Sofia Pro Bold';
font-style: normal;
font-weight: 700;
src: local('Sofia Pro Bold'), url('../public/fonts/SofiaPro-Bold.ttf') format('truetype');
}
yarn.lock
This diff could not be displayed because it is too large.
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!