938 lines
53 KiB
JavaScript
938 lines
53 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 Image from "next/image";
|
||
import phi from "@img/adjustw.png";
|
||
import app from "../../src/assets/app.png";
|
||
import Avatar from "boring-avatars";
|
||
import { useLocale, useTranslations } from "next-intl";
|
||
|
||
const stepProducts = () => {
|
||
const t = useTranslations("stepProducts");
|
||
return [
|
||
{
|
||
title: t("setupRoutine.title"),
|
||
desc: t("setupRoutine.desc"),
|
||
},
|
||
{
|
||
title: t("setupSections.title"),
|
||
desc: t("setupSections.desc"),
|
||
},
|
||
{
|
||
title: t("setupPositions.title"),
|
||
desc: t("setupPositions.desc"),
|
||
},
|
||
{
|
||
title: t("setupStaffInfo.title"),
|
||
desc: t("setupStaffInfo.desc"),
|
||
},
|
||
{
|
||
title: t("setupShiftsLogic.title"),
|
||
desc: t("setupShiftsLogic.desc"),
|
||
},
|
||
|
||
{
|
||
title: t("insertTasks.title"),
|
||
desc: t("insertTasks.desc"),
|
||
},
|
||
];
|
||
};
|
||
|
||
const StepProduct = ({}) => {
|
||
const [activeIndex, setActiveIndex] = useState(1);
|
||
const t = useTranslations("stepProducts");
|
||
|
||
const locale = useLocale();
|
||
const isRTL = locale === "fa";
|
||
|
||
return (
|
||
<div className={` rounded-[20px] ${isRTL ? "rtl" : "ltr"}`}>
|
||
<div className={`bg-tertiary rounded-2xl ]`}>
|
||
<motion.div variants={textVariant()}>
|
||
{isRTL ? (
|
||
<div
|
||
className={`text-white font-black text-[30px] xs:text-[30px] sm:text-[50px] md:text-[60px] xs:leading-[60px] lg:leading-normal flex `}
|
||
>
|
||
<div className={` mt-10 ${isRTL ? "text-right" : "text-left"}`}>
|
||
<p className="mb-0">آسان برای پیاده سازی </p>
|
||
<p className="mb-0 mt-[-30px]">آسان برای استفاده </p>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<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.desc}
|
||
</p>
|
||
</div>
|
||
)}
|
||
</motion.div>
|
||
))}
|
||
|
||
<p className="mb-0 text-white mt-8"> {t("endDesc")}</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">
|
||
{isRTL
|
||
? "مدیریت روتین ها"
|
||
: " 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">
|
||
{isRTL ? "عادی" : "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">
|
||
{isRTL ? "جمعه ها" : "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">
|
||
{isRTL ? "مدیریت سکشن ها" : "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">
|
||
{isRTL ? "بار" : "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">
|
||
{isRTL
|
||
? "آشپز خانه فرنگی"
|
||
: " Italian kitchenbar"}
|
||
</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">
|
||
{isRTL
|
||
? "مدیریت پوزیشن ها"
|
||
: "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">
|
||
{isRTL ? "صندوق دار" : "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">
|
||
{isRTL ? "باریستا" : "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">
|
||
{isRTL ? "مدیریت کارکنان" : " 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">
|
||
{isRTL
|
||
? "علی مالکی - باریستا"
|
||
: " 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">
|
||
{isRTL
|
||
? "صدف هدایتی - صندوق دار"
|
||
: " 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">
|
||
{isRTL
|
||
? "مدیریت شیفت ها"
|
||
: " 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">
|
||
{isRTL
|
||
? " شیفت صبح | 07:00-11:59"
|
||
: " 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">
|
||
{isRTL
|
||
? " شیقت عصر| 02:00-17:59"
|
||
: " 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">
|
||
{isRTL
|
||
? "مدیریت فعالیت ها"
|
||
: " 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">
|
||
{isRTL
|
||
? "شیفت صبح | باریستا | روزانه"
|
||
: "morning shift | barista | daily"}
|
||
</p>
|
||
<p className="mb-0 text-sm">
|
||
{isRTL
|
||
? "تمیزی نهایی اسپرسو ماشین"
|
||
: " 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">
|
||
{isRTL
|
||
? "شیفت عصر | ویتر | روزانه"
|
||
: "morning shift | barista | daily"}
|
||
</p>
|
||
<p className="mb-0 text-sm">
|
||
{isRTL
|
||
? "تمیز کردن پنجره های ورودی"
|
||
: " Close the morning shift box"}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default SectionWrapper(StepProduct, "product");
|