869 lines
50 KiB
JavaScript
869 lines
50 KiB
JavaScript
"use clients";
|
|
import React, { useEffect, useState } from "react";
|
|
import { motion } from "framer-motion";
|
|
|
|
import { SectionWrapper } from "src/hoc";
|
|
import { fadeIn, textVariant } from "src/utils/motion";
|
|
import { styles } from "src/style";
|
|
import { stepProducts } from "src/constans";
|
|
import Image from "next/image";
|
|
import phi from "@img/adjustw.png";
|
|
import app from "../../src/assets/app.png";
|
|
import Avatar from "boring-avatars";
|
|
|
|
const StepProduct = ({}) => {
|
|
const [activeIndex, setActiveIndex] = useState(1);
|
|
|
|
return (
|
|
<div className={` rounded-[20px]`}>
|
|
<div className={`bg-tertiary rounded-2xl ]`}>
|
|
<motion.div variants={textVariant()}>
|
|
<div
|
|
className={`text-white font-black text-[30px] xs:text-[30px] sm:text-[50px] md:text-[60px] xs:leading-[60px] lg:leading-normal flex `}
|
|
>
|
|
<span className="text-primary-300 text-[30px] xs:text-[100px] sm:text-[150px] relative top-[10px] !h-fit font-bold xs:mt-[49px] lg:mt-0">
|
|
E
|
|
</span>
|
|
<div className="text-left mt-10">
|
|
<p className="mb-0">asy to Implement </p>
|
|
<p className="mb-0 mt-[-30px]">asy to Use. </p>
|
|
</div>
|
|
</div>
|
|
{/* <p className="mb-0 text-white text-lfet">
|
|
{" "}
|
|
make your operation simple and smooth
|
|
</p> */}
|
|
</motion.div>
|
|
<div className={` pb-14 grid lg:grid-cols-2 xs:grid-cols-1 gap-7 `}>
|
|
<div>
|
|
{stepProducts.map((e, index) => (
|
|
<motion.div
|
|
key={index}
|
|
variants={fadeIn("", "spring", index * 0.5, 0.75)}
|
|
className={` p-5 rounded-3xl w-full tr03 cursor-pointer ${
|
|
activeIndex == index ? "bg-[#35685952]" : ""
|
|
}`}
|
|
onClick={() => setActiveIndex(index)}
|
|
>
|
|
<h3
|
|
className={`text-white font-bold tr03 ${
|
|
activeIndex == index ? "text-[24px]" : "opacity-50"
|
|
}`}
|
|
>
|
|
{e.title}
|
|
</h3>
|
|
|
|
{activeIndex == index && (
|
|
<div className="mt-3">
|
|
<p className="text-white tracking-wider text-[16px] font-light">
|
|
{e.des}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</motion.div>
|
|
))}
|
|
|
|
<p className="mb-0 text-white mt-8">
|
|
{" "}
|
|
Now just set up your shifts for the upcoming week. Assign staff to
|
|
each position within each shift and designate a supervisor.
|
|
</p>
|
|
</div>
|
|
|
|
<div className=" xs:p-3 lg:p-8 h-fit">
|
|
<div className="flex justify-center items-center relative">
|
|
<div className="relative z-10">
|
|
<Image
|
|
src={app}
|
|
alt="Phone Mockup"
|
|
width={300}
|
|
height={600}
|
|
className="shadow-xl z-90"
|
|
/>
|
|
{/* Example screen content inside the mockup */}
|
|
<div className="absolute inset-3 flex justify-center items-start mt-10 text-white font-bold z-0">
|
|
<div className=" w-11/12 mx-auto">
|
|
<div
|
|
className={`w-full bg-[#132420] rounded-2xl cursor-pointer ${
|
|
activeIndex == 0 ? "pb-3" : ""
|
|
}`}
|
|
>
|
|
<div className="flex" onClick={() => setActiveIndex(0)}>
|
|
<div className="flex w-10/12 p-2 py-3">
|
|
<div className=" rounded mx-1">
|
|
<p className="mb-0 text-center pt-[2px] text-white text-[12px] ">
|
|
1 -
|
|
</p>
|
|
</div>
|
|
<div className="pt-[2px] pr-2 ">
|
|
<h4 className="text-[12px] font-bold">
|
|
Management routines{" "}
|
|
</h4>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="w-2/12 mt-1">
|
|
{activeIndex == 0 ? (
|
|
<div className="w-[20px] h-[20px] bg-secondary-50 shadow-sm rounded-lg mt-2 pt-[4px]">
|
|
<svg
|
|
width="10"
|
|
height="10"
|
|
viewBox="0 0 16 16"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="mx-auto opacity-70"
|
|
>
|
|
<path
|
|
d="M8 1V15M1 8H15"
|
|
stroke="#2B2B2B"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
) : (
|
|
<div className="w-[20px] h-[20px] bg-secondary-50 shadow-sm rounded-lg mt-2 pt-[4px]">
|
|
<svg
|
|
width="10"
|
|
height="10"
|
|
viewBox="0 0 151 89"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="mx-auto opacity-70"
|
|
>
|
|
<path
|
|
d="M12.9522 13.3506L75.4522 75.8506L137.952 13.3506"
|
|
stroke="black"
|
|
stroke-width="25"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div
|
|
className={`flex ${
|
|
activeIndex == 0 ? "block" : "hidden"
|
|
}`}
|
|
>
|
|
<div className="bg-primary-800 shadow-sm rounded-full p-1 w-fit flex m-1">
|
|
<div className="mx-3">
|
|
<p className="mb-0 mt-1 text-[12px] font-medium">
|
|
normal
|
|
</p>
|
|
</div>
|
|
<>
|
|
<div className="w-[25px] h-[25px] bg-secondary-950 rounded-full">
|
|
<svg
|
|
width="10"
|
|
height="10"
|
|
viewBox="0 0 18 18"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="mx-auto mt-[8px]"
|
|
>
|
|
<g clip-path="url(#clip0_72_994)">
|
|
<path
|
|
d="M11.4653 2.36397L10.77 3.05922L4.37926 9.44922C3.94651 9.88272 3.72976 10.0995 3.54376 10.338C3.32409 10.6194 3.13573 10.924 2.98201 11.2462C2.85226 11.5192 2.75551 11.8102 2.56201 12.3907L1.74151 14.8515L1.54051 15.453C1.4935 15.5932 1.48652 15.7437 1.52037 15.8877C1.55422 16.0316 1.62755 16.1633 1.73212 16.2679C1.83669 16.3724 1.96835 16.4458 2.1123 16.4796C2.25626 16.5135 2.4068 16.5065 2.54701 16.4595L3.14851 16.2585L5.60926 15.438C6.19051 15.2445 6.48076 15.1477 6.75376 15.018C7.07626 14.8642 7.38076 14.676 7.66201 14.4562C7.90051 14.2702 8.11726 14.0535 8.55001 13.6207L14.9408 7.22997L15.636 6.53472C16.1891 5.98165 16.4998 5.23152 16.4998 4.44935C16.4998 3.66718 16.1891 2.91705 15.636 2.36397C15.0829 1.8109 14.3328 1.50018 13.5506 1.50018C12.7685 1.50018 12.0183 1.8109 11.4653 2.36397Z"
|
|
stroke="black"
|
|
stroke-width="1.5"
|
|
/>
|
|
<path
|
|
d="M11.4653 2.36397L10.77 3.05922L4.37926 9.44922C3.94651 9.88272 3.72976 10.0995 3.54376 10.338C3.32409 10.6194 3.13573 10.924 2.98201 11.2462C2.85226 11.5192 2.75551 11.8102 2.56201 12.3907L1.74151 14.8515L1.54051 15.453C1.4935 15.5932 1.48652 15.7437 1.52037 15.8877C1.55422 16.0316 1.62755 16.1633 1.73212 16.2679C1.83669 16.3724 1.96835 16.4458 2.1123 16.4796C2.25626 16.5135 2.4068 16.5065 2.54701 16.4595L3.14851 16.2585L5.60926 15.438C6.19051 15.2445 6.48076 15.1477 6.75376 15.018C7.07626 14.8642 7.38076 14.676 7.66201 14.4562C7.90051 14.2702 8.11726 14.0535 8.55001 13.6207L14.9408 7.22997L15.636 6.53472C16.1891 5.98165 16.4998 5.23152 16.4998 4.44935C16.4998 3.66718 16.1891 2.91705 15.636 2.36397C15.0829 1.8109 14.3328 1.50018 13.5506 1.50018C12.7685 1.50018 12.0183 1.8109 11.4653 2.36397Z"
|
|
stroke="white"
|
|
stroke-width="1.5"
|
|
/>
|
|
<g opacity="0.5">
|
|
<path
|
|
d="M10.77white 3.05847C10.77 3.05847 10.857 4.53597 12.1605 5.83947C13.464 7.14297 14.9408 7.22922 14.9408 7.22922M3.14852 16.2585L1.74152 14.85"
|
|
stroke="white"
|
|
stroke-width="1.5"
|
|
/>
|
|
<path
|
|
d="M10.77 3.05847C10.77 3.05847 10.857 4.53597 12.1605 5.83947C13.464 7.14297 14.9408 7.22922 14.9408 7.22922M3.14852 16.2585L1.74152 14.85"
|
|
stroke="white"
|
|
stroke-width="1.5"
|
|
/>
|
|
</g>
|
|
</g>
|
|
<defs>
|
|
<clipPath id="clip0_72_994">
|
|
<rect width="18" height="18" fill="white" />
|
|
</clipPath>
|
|
</defs>
|
|
</svg>
|
|
</div>
|
|
</>
|
|
</div>
|
|
|
|
<div className="bg-primary-800 shadow-sm rounded-full p-1 w-fit flex m-1">
|
|
<div className="mx-3">
|
|
<p className="mb-0 mt-1 text-[12px] font-medium">
|
|
friday
|
|
</p>
|
|
</div>
|
|
<>
|
|
<div className="w-[25px] h-[25px] bg-secondary-950 rounded-full">
|
|
<svg
|
|
width="10"
|
|
height="10"
|
|
viewBox="0 0 18 18"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="mx-auto mt-[8px]"
|
|
>
|
|
<g clip-path="url(#clip0_72_994)">
|
|
<path
|
|
d="M11.4653 2.36397L10.77 3.05922L4.37926 9.44922C3.94651 9.88272 3.72976 10.0995 3.54376 10.338C3.32409 10.6194 3.13573 10.924 2.98201 11.2462C2.85226 11.5192 2.75551 11.8102 2.56201 12.3907L1.74151 14.8515L1.54051 15.453C1.4935 15.5932 1.48652 15.7437 1.52037 15.8877C1.55422 16.0316 1.62755 16.1633 1.73212 16.2679C1.83669 16.3724 1.96835 16.4458 2.1123 16.4796C2.25626 16.5135 2.4068 16.5065 2.54701 16.4595L3.14851 16.2585L5.60926 15.438C6.19051 15.2445 6.48076 15.1477 6.75376 15.018C7.07626 14.8642 7.38076 14.676 7.66201 14.4562C7.90051 14.2702 8.11726 14.0535 8.55001 13.6207L14.9408 7.22997L15.636 6.53472C16.1891 5.98165 16.4998 5.23152 16.4998 4.44935C16.4998 3.66718 16.1891 2.91705 15.636 2.36397C15.0829 1.8109 14.3328 1.50018 13.5506 1.50018C12.7685 1.50018 12.0183 1.8109 11.4653 2.36397Z"
|
|
stroke="black"
|
|
stroke-width="1.5"
|
|
/>
|
|
<path
|
|
d="M11.4653 2.36397L10.77 3.05922L4.37926 9.44922C3.94651 9.88272 3.72976 10.0995 3.54376 10.338C3.32409 10.6194 3.13573 10.924 2.98201 11.2462C2.85226 11.5192 2.75551 11.8102 2.56201 12.3907L1.74151 14.8515L1.54051 15.453C1.4935 15.5932 1.48652 15.7437 1.52037 15.8877C1.55422 16.0316 1.62755 16.1633 1.73212 16.2679C1.83669 16.3724 1.96835 16.4458 2.1123 16.4796C2.25626 16.5135 2.4068 16.5065 2.54701 16.4595L3.14851 16.2585L5.60926 15.438C6.19051 15.2445 6.48076 15.1477 6.75376 15.018C7.07626 14.8642 7.38076 14.676 7.66201 14.4562C7.90051 14.2702 8.11726 14.0535 8.55001 13.6207L14.9408 7.22997L15.636 6.53472C16.1891 5.98165 16.4998 5.23152 16.4998 4.44935C16.4998 3.66718 16.1891 2.91705 15.636 2.36397C15.0829 1.8109 14.3328 1.50018 13.5506 1.50018C12.7685 1.50018 12.0183 1.8109 11.4653 2.36397Z"
|
|
stroke="white"
|
|
stroke-width="1.5"
|
|
/>
|
|
<g opacity="0.5">
|
|
<path
|
|
d="M10.77white 3.05847C10.77 3.05847 10.857 4.53597 12.1605 5.83947C13.464 7.14297 14.9408 7.22922 14.9408 7.22922M3.14852 16.2585L1.74152 14.85"
|
|
stroke="white"
|
|
stroke-width="1.5"
|
|
/>
|
|
<path
|
|
d="M10.77 3.05847C10.77 3.05847 10.857 4.53597 12.1605 5.83947C13.464 7.14297 14.9408 7.22922 14.9408 7.22922M3.14852 16.2585L1.74152 14.85"
|
|
stroke="white"
|
|
stroke-width="1.5"
|
|
/>
|
|
</g>
|
|
</g>
|
|
<defs>
|
|
<clipPath id="clip0_72_994">
|
|
<rect width="18" height="18" fill="white" />
|
|
</clipPath>
|
|
</defs>
|
|
</svg>
|
|
</div>
|
|
</>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
className={`w-full bg-[#132420] rounded-2xl mt-2 cursor-pointer ${
|
|
activeIndex == 1 ? "pb-3" : ""
|
|
}`}
|
|
>
|
|
<div className="flex" onClick={() => setActiveIndex(1)}>
|
|
<div className="flex w-10/12 p-2 py-3">
|
|
<div className=" rounded mx-1">
|
|
<p className="mb-0 text-center pt-[2px] text-white text-[12px] ">
|
|
2 -
|
|
</p>
|
|
</div>
|
|
<div className="pt-[2px] pr-2 ">
|
|
<h4 className="text-[12px] font-bold">
|
|
Management sections{" "}
|
|
</h4>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="w-2/12 mt-1">
|
|
{activeIndex == 1 ? (
|
|
<div className="w-[20px] h-[20px] bg-secondary-50 shadow-sm rounded-lg mt-2 pt-[4px]">
|
|
<svg
|
|
width="10"
|
|
height="10"
|
|
viewBox="0 0 16 16"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="mx-auto opacity-70"
|
|
>
|
|
<path
|
|
d="M8 1V15M1 8H15"
|
|
stroke="#2B2B2B"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
) : (
|
|
<div className="w-[20px] h-[20px] bg-secondary-50 shadow-sm rounded-lg mt-2 pt-[4px]">
|
|
<svg
|
|
width="10"
|
|
height="10"
|
|
viewBox="0 0 151 89"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="mx-auto opacity-70"
|
|
>
|
|
<path
|
|
d="M12.9522 13.3506L75.4522 75.8506L137.952 13.3506"
|
|
stroke="black"
|
|
stroke-width="25"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div
|
|
className={`flex ${
|
|
activeIndex == 1 ? "block" : "hidden"
|
|
}`}
|
|
>
|
|
<div className="bg-primary-800 shadow-sm rounded-full p-1 w-fit flex m-1">
|
|
<div className="mx-3">
|
|
<p className="mb-0 mt-1 text-[12px] font-medium">
|
|
bar
|
|
</p>
|
|
</div>
|
|
<>
|
|
<div className="w-[25px] h-[25px] bg-secondary-950 rounded-full">
|
|
<svg
|
|
width="10"
|
|
height="10"
|
|
viewBox="0 0 18 18"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="mx-auto mt-[8px]"
|
|
>
|
|
<g clip-path="url(#clip0_72_994)">
|
|
<path
|
|
d="M11.4653 2.36397L10.77 3.05922L4.37926 9.44922C3.94651 9.88272 3.72976 10.0995 3.54376 10.338C3.32409 10.6194 3.13573 10.924 2.98201 11.2462C2.85226 11.5192 2.75551 11.8102 2.56201 12.3907L1.74151 14.8515L1.54051 15.453C1.4935 15.5932 1.48652 15.7437 1.52037 15.8877C1.55422 16.0316 1.62755 16.1633 1.73212 16.2679C1.83669 16.3724 1.96835 16.4458 2.1123 16.4796C2.25626 16.5135 2.4068 16.5065 2.54701 16.4595L3.14851 16.2585L5.60926 15.438C6.19051 15.2445 6.48076 15.1477 6.75376 15.018C7.07626 14.8642 7.38076 14.676 7.66201 14.4562C7.90051 14.2702 8.11726 14.0535 8.55001 13.6207L14.9408 7.22997L15.636 6.53472C16.1891 5.98165 16.4998 5.23152 16.4998 4.44935C16.4998 3.66718 16.1891 2.91705 15.636 2.36397C15.0829 1.8109 14.3328 1.50018 13.5506 1.50018C12.7685 1.50018 12.0183 1.8109 11.4653 2.36397Z"
|
|
stroke="black"
|
|
stroke-width="1.5"
|
|
/>
|
|
<path
|
|
d="M11.4653 2.36397L10.77 3.05922L4.37926 9.44922C3.94651 9.88272 3.72976 10.0995 3.54376 10.338C3.32409 10.6194 3.13573 10.924 2.98201 11.2462C2.85226 11.5192 2.75551 11.8102 2.56201 12.3907L1.74151 14.8515L1.54051 15.453C1.4935 15.5932 1.48652 15.7437 1.52037 15.8877C1.55422 16.0316 1.62755 16.1633 1.73212 16.2679C1.83669 16.3724 1.96835 16.4458 2.1123 16.4796C2.25626 16.5135 2.4068 16.5065 2.54701 16.4595L3.14851 16.2585L5.60926 15.438C6.19051 15.2445 6.48076 15.1477 6.75376 15.018C7.07626 14.8642 7.38076 14.676 7.66201 14.4562C7.90051 14.2702 8.11726 14.0535 8.55001 13.6207L14.9408 7.22997L15.636 6.53472C16.1891 5.98165 16.4998 5.23152 16.4998 4.44935C16.4998 3.66718 16.1891 2.91705 15.636 2.36397C15.0829 1.8109 14.3328 1.50018 13.5506 1.50018C12.7685 1.50018 12.0183 1.8109 11.4653 2.36397Z"
|
|
stroke="white"
|
|
stroke-width="1.5"
|
|
/>
|
|
<g opacity="0.5">
|
|
<path
|
|
d="M10.77white 3.05847C10.77 3.05847 10.857 4.53597 12.1605 5.83947C13.464 7.14297 14.9408 7.22922 14.9408 7.22922M3.14852 16.2585L1.74152 14.85"
|
|
stroke="white"
|
|
stroke-width="1.5"
|
|
/>
|
|
<path
|
|
d="M10.77 3.05847C10.77 3.05847 10.857 4.53597 12.1605 5.83947C13.464 7.14297 14.9408 7.22922 14.9408 7.22922M3.14852 16.2585L1.74152 14.85"
|
|
stroke="white"
|
|
stroke-width="1.5"
|
|
/>
|
|
</g>
|
|
</g>
|
|
<defs>
|
|
<clipPath id="clip0_72_994">
|
|
<rect width="18" height="18" fill="white" />
|
|
</clipPath>
|
|
</defs>
|
|
</svg>
|
|
</div>
|
|
</>
|
|
</div>
|
|
|
|
<div className="bg-primary-800 shadow-sm rounded-full p-1 w-fit flex m-1">
|
|
<div className="mx-3">
|
|
<p className="mb-0 mt-1 text-[12px] font-medium">
|
|
Italian kitchen
|
|
</p>
|
|
</div>
|
|
<>
|
|
<div className="w-[25px] h-[25px] bg-secondary-950 rounded-full">
|
|
<svg
|
|
width="10"
|
|
height="10"
|
|
viewBox="0 0 18 18"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="mx-auto mt-[8px]"
|
|
>
|
|
<g clip-path="url(#clip0_72_994)">
|
|
<path
|
|
d="M11.4653 2.36397L10.77 3.05922L4.37926 9.44922C3.94651 9.88272 3.72976 10.0995 3.54376 10.338C3.32409 10.6194 3.13573 10.924 2.98201 11.2462C2.85226 11.5192 2.75551 11.8102 2.56201 12.3907L1.74151 14.8515L1.54051 15.453C1.4935 15.5932 1.48652 15.7437 1.52037 15.8877C1.55422 16.0316 1.62755 16.1633 1.73212 16.2679C1.83669 16.3724 1.96835 16.4458 2.1123 16.4796C2.25626 16.5135 2.4068 16.5065 2.54701 16.4595L3.14851 16.2585L5.60926 15.438C6.19051 15.2445 6.48076 15.1477 6.75376 15.018C7.07626 14.8642 7.38076 14.676 7.66201 14.4562C7.90051 14.2702 8.11726 14.0535 8.55001 13.6207L14.9408 7.22997L15.636 6.53472C16.1891 5.98165 16.4998 5.23152 16.4998 4.44935C16.4998 3.66718 16.1891 2.91705 15.636 2.36397C15.0829 1.8109 14.3328 1.50018 13.5506 1.50018C12.7685 1.50018 12.0183 1.8109 11.4653 2.36397Z"
|
|
stroke="black"
|
|
stroke-width="1.5"
|
|
/>
|
|
<path
|
|
d="M11.4653 2.36397L10.77 3.05922L4.37926 9.44922C3.94651 9.88272 3.72976 10.0995 3.54376 10.338C3.32409 10.6194 3.13573 10.924 2.98201 11.2462C2.85226 11.5192 2.75551 11.8102 2.56201 12.3907L1.74151 14.8515L1.54051 15.453C1.4935 15.5932 1.48652 15.7437 1.52037 15.8877C1.55422 16.0316 1.62755 16.1633 1.73212 16.2679C1.83669 16.3724 1.96835 16.4458 2.1123 16.4796C2.25626 16.5135 2.4068 16.5065 2.54701 16.4595L3.14851 16.2585L5.60926 15.438C6.19051 15.2445 6.48076 15.1477 6.75376 15.018C7.07626 14.8642 7.38076 14.676 7.66201 14.4562C7.90051 14.2702 8.11726 14.0535 8.55001 13.6207L14.9408 7.22997L15.636 6.53472C16.1891 5.98165 16.4998 5.23152 16.4998 4.44935C16.4998 3.66718 16.1891 2.91705 15.636 2.36397C15.0829 1.8109 14.3328 1.50018 13.5506 1.50018C12.7685 1.50018 12.0183 1.8109 11.4653 2.36397Z"
|
|
stroke="white"
|
|
stroke-width="1.5"
|
|
/>
|
|
<g opacity="0.5">
|
|
<path
|
|
d="M10.77white 3.05847C10.77 3.05847 10.857 4.53597 12.1605 5.83947C13.464 7.14297 14.9408 7.22922 14.9408 7.22922M3.14852 16.2585L1.74152 14.85"
|
|
stroke="white"
|
|
stroke-width="1.5"
|
|
/>
|
|
<path
|
|
d="M10.77 3.05847C10.77 3.05847 10.857 4.53597 12.1605 5.83947C13.464 7.14297 14.9408 7.22922 14.9408 7.22922M3.14852 16.2585L1.74152 14.85"
|
|
stroke="white"
|
|
stroke-width="1.5"
|
|
/>
|
|
</g>
|
|
</g>
|
|
<defs>
|
|
<clipPath id="clip0_72_994">
|
|
<rect width="18" height="18" fill="white" />
|
|
</clipPath>
|
|
</defs>
|
|
</svg>
|
|
</div>
|
|
</>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
className={`w-full bg-[#132420] rounded-2xl mt-2 cursor-pointer ${
|
|
activeIndex == 2 ? "pb-3" : ""
|
|
}`}
|
|
>
|
|
<div className="flex" onClick={() => setActiveIndex(2)}>
|
|
<div className="flex w-10/12 p-2 py-3">
|
|
<div className=" rounded mx-1">
|
|
<p className="mb-0 text-center pt-[2px] text-white text-[12px] ">
|
|
3 -
|
|
</p>
|
|
</div>
|
|
<div className="pt-[2px] pr-2 ">
|
|
<h4 className="text-[12px] font-bold">
|
|
Management positions{" "}
|
|
</h4>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="w-2/12 mt-1">
|
|
{activeIndex == 2 ? (
|
|
<div className="w-[20px] h-[20px] bg-secondary-50 shadow-sm rounded-lg mt-2 pt-[4px]">
|
|
<svg
|
|
width="10"
|
|
height="10"
|
|
viewBox="0 0 16 16"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="mx-auto opacity-70"
|
|
>
|
|
<path
|
|
d="M8 1V15M1 8H15"
|
|
stroke="#2B2B2B"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
) : (
|
|
<div className="w-[20px] h-[20px] bg-secondary-50 shadow-sm rounded-lg mt-2 pt-[4px]">
|
|
<svg
|
|
width="10"
|
|
height="10"
|
|
viewBox="0 0 151 89"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="mx-auto opacity-70"
|
|
>
|
|
<path
|
|
d="M12.9522 13.3506L75.4522 75.8506L137.952 13.3506"
|
|
stroke="black"
|
|
stroke-width="25"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div
|
|
className={`flex ${
|
|
activeIndex == 2 ? "block" : "hidden"
|
|
}`}
|
|
>
|
|
<div className="bg-primary-800 shadow-sm rounded-full p-1 w-fit flex m-1">
|
|
<div className="mx-3">
|
|
<p className="mb-0 mt-1 text-[12px] font-medium">
|
|
cashier
|
|
</p>
|
|
</div>
|
|
<>
|
|
<div className="w-[25px] h-[25px] bg-secondary-950 rounded-full">
|
|
<svg
|
|
width="10"
|
|
height="10"
|
|
viewBox="0 0 18 18"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="mx-auto mt-[8px]"
|
|
>
|
|
<g clip-path="url(#clip0_72_994)">
|
|
<path
|
|
d="M11.4653 2.36397L10.77 3.05922L4.37926 9.44922C3.94651 9.88272 3.72976 10.0995 3.54376 10.338C3.32409 10.6194 3.13573 10.924 2.98201 11.2462C2.85226 11.5192 2.75551 11.8102 2.56201 12.3907L1.74151 14.8515L1.54051 15.453C1.4935 15.5932 1.48652 15.7437 1.52037 15.8877C1.55422 16.0316 1.62755 16.1633 1.73212 16.2679C1.83669 16.3724 1.96835 16.4458 2.1123 16.4796C2.25626 16.5135 2.4068 16.5065 2.54701 16.4595L3.14851 16.2585L5.60926 15.438C6.19051 15.2445 6.48076 15.1477 6.75376 15.018C7.07626 14.8642 7.38076 14.676 7.66201 14.4562C7.90051 14.2702 8.11726 14.0535 8.55001 13.6207L14.9408 7.22997L15.636 6.53472C16.1891 5.98165 16.4998 5.23152 16.4998 4.44935C16.4998 3.66718 16.1891 2.91705 15.636 2.36397C15.0829 1.8109 14.3328 1.50018 13.5506 1.50018C12.7685 1.50018 12.0183 1.8109 11.4653 2.36397Z"
|
|
stroke="black"
|
|
stroke-width="1.5"
|
|
/>
|
|
<path
|
|
d="M11.4653 2.36397L10.77 3.05922L4.37926 9.44922C3.94651 9.88272 3.72976 10.0995 3.54376 10.338C3.32409 10.6194 3.13573 10.924 2.98201 11.2462C2.85226 11.5192 2.75551 11.8102 2.56201 12.3907L1.74151 14.8515L1.54051 15.453C1.4935 15.5932 1.48652 15.7437 1.52037 15.8877C1.55422 16.0316 1.62755 16.1633 1.73212 16.2679C1.83669 16.3724 1.96835 16.4458 2.1123 16.4796C2.25626 16.5135 2.4068 16.5065 2.54701 16.4595L3.14851 16.2585L5.60926 15.438C6.19051 15.2445 6.48076 15.1477 6.75376 15.018C7.07626 14.8642 7.38076 14.676 7.66201 14.4562C7.90051 14.2702 8.11726 14.0535 8.55001 13.6207L14.9408 7.22997L15.636 6.53472C16.1891 5.98165 16.4998 5.23152 16.4998 4.44935C16.4998 3.66718 16.1891 2.91705 15.636 2.36397C15.0829 1.8109 14.3328 1.50018 13.5506 1.50018C12.7685 1.50018 12.0183 1.8109 11.4653 2.36397Z"
|
|
stroke="white"
|
|
stroke-width="1.5"
|
|
/>
|
|
<g opacity="0.5">
|
|
<path
|
|
d="M10.77white 3.05847C10.77 3.05847 10.857 4.53597 12.1605 5.83947C13.464 7.14297 14.9408 7.22922 14.9408 7.22922M3.14852 16.2585L1.74152 14.85"
|
|
stroke="white"
|
|
stroke-width="1.5"
|
|
/>
|
|
<path
|
|
d="M10.77 3.05847C10.77 3.05847 10.857 4.53597 12.1605 5.83947C13.464 7.14297 14.9408 7.22922 14.9408 7.22922M3.14852 16.2585L1.74152 14.85"
|
|
stroke="white"
|
|
stroke-width="1.5"
|
|
/>
|
|
</g>
|
|
</g>
|
|
<defs>
|
|
<clipPath id="clip0_72_994">
|
|
<rect width="18" height="18" fill="white" />
|
|
</clipPath>
|
|
</defs>
|
|
</svg>
|
|
</div>
|
|
</>
|
|
</div>
|
|
|
|
<div className="bg-primary-800 shadow-sm rounded-full p-1 w-fit flex m-1">
|
|
<div className="mx-3">
|
|
<p className="mb-0 mt-1 text-[12px] font-medium">
|
|
barista
|
|
</p>
|
|
</div>
|
|
<>
|
|
<div className="w-[25px] h-[25px] bg-secondary-950 rounded-full">
|
|
<svg
|
|
width="10"
|
|
height="10"
|
|
viewBox="0 0 18 18"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="mx-auto mt-[8px]"
|
|
>
|
|
<g clip-path="url(#clip0_72_994)">
|
|
<path
|
|
d="M11.4653 2.36397L10.77 3.05922L4.37926 9.44922C3.94651 9.88272 3.72976 10.0995 3.54376 10.338C3.32409 10.6194 3.13573 10.924 2.98201 11.2462C2.85226 11.5192 2.75551 11.8102 2.56201 12.3907L1.74151 14.8515L1.54051 15.453C1.4935 15.5932 1.48652 15.7437 1.52037 15.8877C1.55422 16.0316 1.62755 16.1633 1.73212 16.2679C1.83669 16.3724 1.96835 16.4458 2.1123 16.4796C2.25626 16.5135 2.4068 16.5065 2.54701 16.4595L3.14851 16.2585L5.60926 15.438C6.19051 15.2445 6.48076 15.1477 6.75376 15.018C7.07626 14.8642 7.38076 14.676 7.66201 14.4562C7.90051 14.2702 8.11726 14.0535 8.55001 13.6207L14.9408 7.22997L15.636 6.53472C16.1891 5.98165 16.4998 5.23152 16.4998 4.44935C16.4998 3.66718 16.1891 2.91705 15.636 2.36397C15.0829 1.8109 14.3328 1.50018 13.5506 1.50018C12.7685 1.50018 12.0183 1.8109 11.4653 2.36397Z"
|
|
stroke="black"
|
|
stroke-width="1.5"
|
|
/>
|
|
<path
|
|
d="M11.4653 2.36397L10.77 3.05922L4.37926 9.44922C3.94651 9.88272 3.72976 10.0995 3.54376 10.338C3.32409 10.6194 3.13573 10.924 2.98201 11.2462C2.85226 11.5192 2.75551 11.8102 2.56201 12.3907L1.74151 14.8515L1.54051 15.453C1.4935 15.5932 1.48652 15.7437 1.52037 15.8877C1.55422 16.0316 1.62755 16.1633 1.73212 16.2679C1.83669 16.3724 1.96835 16.4458 2.1123 16.4796C2.25626 16.5135 2.4068 16.5065 2.54701 16.4595L3.14851 16.2585L5.60926 15.438C6.19051 15.2445 6.48076 15.1477 6.75376 15.018C7.07626 14.8642 7.38076 14.676 7.66201 14.4562C7.90051 14.2702 8.11726 14.0535 8.55001 13.6207L14.9408 7.22997L15.636 6.53472C16.1891 5.98165 16.4998 5.23152 16.4998 4.44935C16.4998 3.66718 16.1891 2.91705 15.636 2.36397C15.0829 1.8109 14.3328 1.50018 13.5506 1.50018C12.7685 1.50018 12.0183 1.8109 11.4653 2.36397Z"
|
|
stroke="white"
|
|
stroke-width="1.5"
|
|
/>
|
|
<g opacity="0.5">
|
|
<path
|
|
d="M10.77white 3.05847C10.77 3.05847 10.857 4.53597 12.1605 5.83947C13.464 7.14297 14.9408 7.22922 14.9408 7.22922M3.14852 16.2585L1.74152 14.85"
|
|
stroke="white"
|
|
stroke-width="1.5"
|
|
/>
|
|
<path
|
|
d="M10.77 3.05847C10.77 3.05847 10.857 4.53597 12.1605 5.83947C13.464 7.14297 14.9408 7.22922 14.9408 7.22922M3.14852 16.2585L1.74152 14.85"
|
|
stroke="white"
|
|
stroke-width="1.5"
|
|
/>
|
|
</g>
|
|
</g>
|
|
<defs>
|
|
<clipPath id="clip0_72_994">
|
|
<rect width="18" height="18" fill="white" />
|
|
</clipPath>
|
|
</defs>
|
|
</svg>
|
|
</div>
|
|
</>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
className={`w-full bg-[#132420] rounded-2xl mt-2 cursor-pointer ${
|
|
activeIndex == 3 ? "pb-3" : ""
|
|
}`}
|
|
>
|
|
<div className="flex" onClick={() => setActiveIndex(3)}>
|
|
<div className="flex w-10/12 p-2 py-3">
|
|
<div className=" rounded mx-1">
|
|
<p className="mb-0 text-center pt-[2px] text-white text-[12px] ">
|
|
4 -
|
|
</p>
|
|
</div>
|
|
<div className="pt-[2px] pr-2 ">
|
|
<h4 className="text-[12px] font-bold">
|
|
Management staff{" "}
|
|
</h4>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="w-2/12 mt-1">
|
|
{activeIndex == 3 ? (
|
|
<div className="w-[20px] h-[20px] bg-secondary-50 shadow-sm rounded-lg mt-2 pt-[4px]">
|
|
<svg
|
|
width="10"
|
|
height="10"
|
|
viewBox="0 0 16 16"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="mx-auto opacity-70"
|
|
>
|
|
<path
|
|
d="M8 1V15M1 8H15"
|
|
stroke="#2B2B2B"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
) : (
|
|
<div className="w-[20px] h-[20px] bg-secondary-50 shadow-sm rounded-lg mt-2 pt-[4px]">
|
|
<svg
|
|
width="10"
|
|
height="10"
|
|
viewBox="0 0 151 89"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="mx-auto opacity-70"
|
|
>
|
|
<path
|
|
d="M12.9522 13.3506L75.4522 75.8506L137.952 13.3506"
|
|
stroke="black"
|
|
stroke-width="25"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div
|
|
className={` ${activeIndex == 3 ? "block" : "hidden"}`}
|
|
>
|
|
<div className="bg-primary-800 shadow-sm rounded-full p-1 w-[95%] flex m-1">
|
|
{" "}
|
|
<div className=" rounded-full sahdow-sm ">
|
|
<Avatar
|
|
size={22}
|
|
name={"ali maleki"}
|
|
variant="beam"
|
|
colors={["#9d9f88", "#83af96", "#b2de93"]}
|
|
/>
|
|
</div>
|
|
<div className="mx-3">
|
|
<p className="mb-0 mt-1 text-[12px] font-medium">
|
|
ali maleki - barista
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="bg-primary-800 shadow-sm rounded-full p-1 w-[95%] flex m-1">
|
|
{" "}
|
|
<div className=" rounded-full sahdow-sm ">
|
|
<Avatar
|
|
size={22}
|
|
name={"sadaf hedayati"}
|
|
variant="beam"
|
|
colors={["#9d9f88", "#83af96", "#b2de93"]}
|
|
/>
|
|
</div>
|
|
<div className="mx-3">
|
|
<p className="mb-0 mt-1 text-[12px] font-medium">
|
|
sadaf hedayati - cashier
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
className={`w-full bg-[#132420] rounded-2xl mt-2 cursor-pointer ${
|
|
activeIndex == 4 ? "pb-3" : ""
|
|
}`}
|
|
>
|
|
<div className="flex" onClick={() => setActiveIndex(4)}>
|
|
<div className="flex w-10/12 p-2 py-3">
|
|
<div className=" rounded mx-1">
|
|
<p className="mb-0 text-center pt-[2px] text-white text-[12px] ">
|
|
5 -
|
|
</p>
|
|
</div>
|
|
<div className="pt-[2px] pr-2 ">
|
|
<h4 className="text-[12px] font-bold">
|
|
Management set shifts{" "}
|
|
</h4>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="w-2/12 mt-1">
|
|
{activeIndex == 4 ? (
|
|
<div className="w-[20px] h-[20px] bg-secondary-50 shadow-sm rounded-lg mt-2 pt-[4px]">
|
|
<svg
|
|
width="10"
|
|
height="10"
|
|
viewBox="0 0 16 16"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="mx-auto opacity-70"
|
|
>
|
|
<path
|
|
d="M8 1V15M1 8H15"
|
|
stroke="#2B2B2B"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
) : (
|
|
<div className="w-[20px] h-[20px] bg-secondary-50 shadow-sm rounded-lg mt-2 pt-[4px]">
|
|
<svg
|
|
width="10"
|
|
height="10"
|
|
viewBox="0 0 151 89"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="mx-auto opacity-70"
|
|
>
|
|
<path
|
|
d="M12.9522 13.3506L75.4522 75.8506L137.952 13.3506"
|
|
stroke="black"
|
|
stroke-width="25"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div
|
|
className={` ${activeIndex == 4 ? "block" : "hidden"}`}
|
|
>
|
|
<div className="bg-primary-800 shadow-sm rounded-full p-1 w-[95%] flex m-1">
|
|
<div className="mx-3">
|
|
<p className="mb-0 mt-1 text-[12px] font-medium">
|
|
morning shift | 07:00-11:59
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="bg-primary-800 shadow-sm rounded-full p-1 w-[95%] flex m-1">
|
|
<div className="mx-3">
|
|
<p className="mb-0 mt-1 text-[12px] font-medium">
|
|
Afternoon shift | 02:00-17:59
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
className={`w-full bg-[#132420] rounded-2xl mt-2 cursor-pointer ${
|
|
activeIndex == 5 ? "pb-3" : ""
|
|
}`}
|
|
>
|
|
<div className="flex" onClick={() => setActiveIndex(5)}>
|
|
<div className="flex w-10/12 p-2 py-3">
|
|
<div className=" rounded mx-1">
|
|
<p className="mb-0 text-center pt-[2px] text-white text-[12px] ">
|
|
6 -
|
|
</p>
|
|
</div>
|
|
<div className="pt-[2px] pr-2 ">
|
|
<h4 className="text-[12px] font-bold">
|
|
Add collection task{" "}
|
|
</h4>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="w-2/12 mt-1">
|
|
{activeIndex == 5 ? (
|
|
<div className="w-[20px] h-[20px] bg-secondary-50 shadow-sm rounded-lg mt-2 pt-[4px]">
|
|
<svg
|
|
width="10"
|
|
height="10"
|
|
viewBox="0 0 16 16"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="mx-auto opacity-70"
|
|
>
|
|
<path
|
|
d="M8 1V15M1 8H15"
|
|
stroke="#2B2B2B"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
) : (
|
|
<div className="w-[20px] h-[20px] bg-secondary-50 shadow-sm rounded-lg mt-2 pt-[4px]">
|
|
<svg
|
|
width="10"
|
|
height="10"
|
|
viewBox="0 0 151 89"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="mx-auto opacity-70"
|
|
>
|
|
<path
|
|
d="M12.9522 13.3506L75.4522 75.8506L137.952 13.3506"
|
|
stroke="black"
|
|
stroke-width="25"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div
|
|
className={` ${activeIndex == 5 ? "block" : "hidden"}`}
|
|
>
|
|
<div className="bg-primary-800 shadow-sm rounded-md p-1 w-[95%] flex m-1">
|
|
<div className="mx-3">
|
|
<p className="mb-0 mt-1 text-[10px] font-medium">
|
|
morning shift | barista | daily
|
|
</p>
|
|
<p className="mb-0 text-sm">
|
|
Backwashing the espresso machine
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-primary-800 shadow-sm rounded-md p-1 w-[95%] flex m-1">
|
|
<div className="mx-3">
|
|
<p className="mb-0 mt-1 text-[10px] font-medium">
|
|
morning shift | cashier | daily
|
|
</p>
|
|
<p className="mb-0 text-sm">
|
|
Close the morning shift box{" "}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SectionWrapper(StepProduct, "product");
|