pre sub order
parent
08c3127390
commit
9329f6bfa9
10
.env
10
.env
|
|
@ -2,6 +2,7 @@ NODE_ENV="development"
|
|||
NEXT_PUBLIC_SERVER_URL=http://192.168.88.17:32770
|
||||
NEXT_PUBLIC_PUBLIC_URL=http://192.168.88.17:32770
|
||||
NEXT_PUBLIC_API_URL=http://192.168.88.17:32770/api
|
||||
NEXT_PUBLIC_STORAGE_URL=http://storage.vesmook.com
|
||||
NEXT_PUBLIC_PACKAGE_VERSION=0.1.1
|
||||
|
||||
|
||||
|
|
@ -15,9 +16,12 @@ NEXT_PUBLIC_PACKAGE_VERSION=0.1.1
|
|||
|
||||
|
||||
|
||||
# NEXT_PUBLIC_SERVER_URL=https://apinetinashop.visabartar.com
|
||||
# NEXT_PUBLIC_PUBLIC_URL=https://apinetinashop.visabartar.com
|
||||
# NEXT_PUBLIC_API_URL=https://apinetinashop.visabartar.com/api
|
||||
# NEXT_PUBLIC_SERVER_URL=https://api.vesmook.com
|
||||
# NEXT_PUBLIC_PUBLIC_URL=https://api.vesmook.com
|
||||
# NEXT_PUBLIC_API_URL=https://api.vesmook.com/api
|
||||
# NEXT_PUBLIC_STORAGE_URL=http://storage.vesmook.com
|
||||
# NEXT_PUBLIC_PACKAGE_VERSION=0.1.1
|
||||
|
||||
|
||||
# NEXT_PUBLIC_API_URL_IMAGE=https://api.macsonline.ir/Files/ReportImages
|
||||
# NEXT_PUBLIC_API_URL_BackUp=https://api.macsonline.ir/Files/BackUps
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
{
|
||||
// Use IntelliSense to learn about possible attributes.
|
||||
// Hover to view descriptions of existing attributes.
|
||||
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"type": "chrome",
|
||||
"request": "launch",
|
||||
"name": "Launch Chrome against localhost",
|
||||
"url": "http://localhost:8080",
|
||||
"webRoot": "${workspaceFolder}"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -2,87 +2,58 @@
|
|||
import Image from "next/image";
|
||||
import PersianNumber from "plugins/PersianNumber";
|
||||
import React, { useContext } from "react";
|
||||
import p1 from "../../../public/images/product/1.png";
|
||||
import logo from "../../../public/images/logo.png";
|
||||
import p2 from "../../../public/images/product/2.png";
|
||||
import AppContext from "@ctx/AppContext";
|
||||
import AddToCart from "../Components/AddToCart/page";
|
||||
|
||||
const CardCart = ({ data }) => {
|
||||
const CTX = useContext(AppContext);
|
||||
|
||||
console.log("data", data);
|
||||
|
||||
return (
|
||||
<div className="group border-t-[1px] border-gray-200 w-full hover:bg-white z-40 tr03 flex rtl pt-2">
|
||||
<div className="group border-t-[1px] border-gray-100 w-full hover:bg-white z-40 tr03 flex rtl pt-2">
|
||||
<div className=" h-fit ">
|
||||
<Image src={p2} className="xs:w-[130px] lg:w-[120px] " />
|
||||
{!!data.mainImage ? (
|
||||
<Image
|
||||
src={`${process.env.NEXT_PUBLIC_STORAGE_URL}/${data.mainImage}`}
|
||||
width={100}
|
||||
height={100}
|
||||
className="xs:!w-[110px] lg:!w-[130px] mx-auto !object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="xs:!w-[85px] lg:!w-[85px] ">
|
||||
<Image
|
||||
src={logo}
|
||||
className="xs:!w-[70px] lg:!w-[70px] mx-auto !object-cover opacity-25 mt-5"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="p-3 text-right w-full">
|
||||
<p className="mb-0 xs:text-[12px] lg:text-[11px] xl:text-[15px] max-h-[50px] tr03 ">
|
||||
{data?.persianName}
|
||||
</p>
|
||||
{data?.hasDiscount && (
|
||||
<p className="mb-0 xs:text-[11px] lg:text-[12px] xl:text-[13px] text-red-600 font-medium">
|
||||
{" "}
|
||||
3 عدد موجود انبار
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className=" rounded-full flex ltr pt-2 mt-2 w-full">
|
||||
<div className="flex justify-between w-full ">
|
||||
{/*{cart.find(e=>id)}*/}
|
||||
{data?.count < 0 ? (
|
||||
<div className="w-[35px] h-[35px] bg-gray-200 overflow-hidden rounded-full ">
|
||||
<div
|
||||
onClick={() => CTX.AddItemToCart(data.id, data.persianName)}
|
||||
>
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 176 176"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="mx-auto mt-[8px]"
|
||||
>
|
||||
<path
|
||||
d="M163 100.475H100.5V162.975C100.5 166.29 99.183 169.47 96.8388 171.814C94.4946 174.158 91.3152 175.475 88 175.475C84.6848 175.475 81.5054 174.158 79.1612 171.814C76.817 169.47 75.5 166.29 75.5 162.975V100.475H13C9.68479 100.475 6.50537 99.1581 4.16117 96.8139C1.81696 94.4697 0.5 91.2903 0.5 87.9751C0.5 84.6599 1.81696 81.4805 4.16117 79.1363C6.50537 76.7921 9.68479 75.4751 13 75.4751H75.5V12.9751C75.5 9.65989 76.817 6.48046 79.1612 4.13626C81.5054 1.79205 84.6848 0.475098 88 0.475098C91.3152 0.475098 94.4946 1.79205 96.8388 4.13626C99.183 6.48046 100.5 9.65989 100.5 12.9751V75.4751H163C166.315 75.4751 169.495 76.7921 171.839 79.1363C174.183 81.4805 175.5 84.6599 175.5 87.9751C175.5 91.2903 174.183 94.4697 171.839 96.8139C169.495 99.1581 166.315 100.475 163 100.475Z"
|
||||
fill="black"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex rtl">
|
||||
<div
|
||||
className="w-[35px] h-[35px] bg-gray-200 overflow-hidden rounded-full text-center "
|
||||
onClick={() => CTX.AddItemToCart(data.id)}
|
||||
>
|
||||
<p className="mb-0 text-[25px] mt-[-2px]">+</p>
|
||||
</div>
|
||||
<p className="mb-0 mx-2 mt-1 font-bold">
|
||||
<PersianNumber number={data?.count} />
|
||||
</p>
|
||||
<div
|
||||
className="w-[35px] h-[35px] bg-red-200 overflow-hidden rounded-full text-center "
|
||||
onClick={() => CTX.RemoveItemFromCart(data.id)}
|
||||
>
|
||||
<p className="mb-0 text-[30px] mt-[-5px]">-</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<AddToCart data={data} />
|
||||
|
||||
<div className="w-full text-right rounded-full">
|
||||
{data?.hasDiscount ? (
|
||||
<div className="flex justify-end">
|
||||
<p className="mb-0 font-bold text-sm absolute opacity-40 mt-[-7px] ml-[20px] text-red-600">
|
||||
<del>
|
||||
<PersianNumber number={data?.cost} style={"text-[13px]"} />
|
||||
<PersianNumber
|
||||
number={(data?.cost / 10).toLocaleString()}
|
||||
style={"text-[13px]"}
|
||||
/>
|
||||
</del>
|
||||
</p>
|
||||
<div className="flex rtl mt-[8px]">
|
||||
{" "}
|
||||
<p className="mb-0 font-bold">
|
||||
<PersianNumber number={data?.cost} />
|
||||
<PersianNumber
|
||||
number={(data?.costWithDiscount / 10).toLocaleString()}
|
||||
/>
|
||||
</p>
|
||||
<small className="mr-1 mt-[3px]">تومان</small>
|
||||
</div>
|
||||
|
|
@ -91,7 +62,7 @@ const CardCart = ({ data }) => {
|
|||
<div className="flex rtl mt-[3px]">
|
||||
{" "}
|
||||
<p className="mb-0 font-bold text-lg">
|
||||
<PersianNumber number={data?.cost} />
|
||||
<PersianNumber number={(data?.cost / 10).toLocaleString()} />
|
||||
</p>
|
||||
<small className="mr-1 mt-[6px]">تومان</small>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,16 +3,17 @@
|
|||
import Image from "next/image";
|
||||
import PersianNumber from "plugins/PersianNumber";
|
||||
import React, { useContext, useState } from "react";
|
||||
import p1 from "../../../public/images/product/1.png";
|
||||
import logo from "../../../public/images/logo.png";
|
||||
import AppContext from "@ctx/AppContext";
|
||||
import Link from "next/link";
|
||||
import AddToCart from "../Components/AddToCart/page";
|
||||
|
||||
const CardCategories = ({ data }) => {
|
||||
const CTX = useContext(AppContext);
|
||||
const cart = CTX.state.cart;
|
||||
|
||||
return (
|
||||
<div className="group border w-full hover:bg-white z-40 tr03">
|
||||
<div className="group border border-gray-50 w-full hover:bg-white z-40 tr03">
|
||||
<>
|
||||
<div
|
||||
className={` tr03 py-2 overflow-hidden xs:h-[200px] lg:h-[230px] ${
|
||||
|
|
@ -22,41 +23,54 @@ const CardCategories = ({ data }) => {
|
|||
// onClick={() => handleRoutineShiftPlanWithDay(index)}
|
||||
>
|
||||
{data.hasDiscount && (
|
||||
<div className=" m-3 ">
|
||||
<div className="absolute mr-2 ">
|
||||
<div className="w-fit rounded-full bg-red-600 overflow-hidden px-1 !py-0 h-fit ">
|
||||
<p className="mb-0 text-white ">
|
||||
<PersianNumber number={35} style="!text-[11px]" />
|
||||
<small className="text-[9px] ml-1">%</small>
|
||||
</p>
|
||||
</div>
|
||||
</div>{" "}
|
||||
<div className="absolute m-3 ">
|
||||
<div className="w-fit rounded-lg bg-red-600 overflow-hidden px-1 ">
|
||||
<p className="mb-0 text-[10px] text-white pt-[3px] ">
|
||||
<PersianNumber
|
||||
number={data.discountPercent}
|
||||
style={"!text-[12px]"}
|
||||
/>
|
||||
<small className="text-[10px] ml-1">%</small>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{data.hasDiscount && (
|
||||
<div className=" m-3 ">
|
||||
<div className="absolute mr-2 mt-[30px] ">
|
||||
<div className="w-fit rounded-full bg-secondary-600 overflow-hidden px-1 !py-0 h-fit ">
|
||||
<div className="absolute mt-[30px] ">
|
||||
<div className="w-fit rounded-lg bg-secondary-600 overflow-hidden px-2 !py-0 h-fit ">
|
||||
<p className="mb-0 text-white text-[10px] ">اصالت کالا</p>
|
||||
</div>
|
||||
</div>{" "}
|
||||
</div>
|
||||
)}
|
||||
<Link href={`/products/${data.id}`}>
|
||||
<div className="w-full h-fit ">
|
||||
<Image
|
||||
src={p1}
|
||||
className="xs:w-[110px] lg:w-[120px] xl:w-[150] mx-auto"
|
||||
/>
|
||||
<div className="w-full h-fit flex justify-center ">
|
||||
{!!data.mainImage ? (
|
||||
<Image
|
||||
src={`${process.env.NEXT_PUBLIC_STORAGE_URL}/${data.mainImage}`}
|
||||
width={100}
|
||||
height={100}
|
||||
className="xs:!w-[110px] lg:!w-[130px] mx-auto !object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="xs:!w-[85px] lg:!w-[85px] h-[90px] mt-10 ">
|
||||
<Image
|
||||
src={logo}
|
||||
className="xs:!w-[70px] lg:!w-[70px] mx-auto !object-cover opacity-25 mt-5"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="p-3 text-right">
|
||||
<p className="mb-0 xs:text-[12px] lg:text-[12px] xl:text-[15px] max-h-[50px] tr03 ">
|
||||
{data.persianName}{" "}
|
||||
</p>
|
||||
{data.hasDiscount && (
|
||||
|
||||
{data.stock <= 3 && (
|
||||
<p className="mb-0 xs:text-[11px] lg:text-[12px] xl:text-[13px] text-red-600 font-medium">
|
||||
{" "}
|
||||
3 عدد موجود انبار
|
||||
{data.stock}عدد موجود انبار
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -65,66 +79,26 @@ const CardCategories = ({ data }) => {
|
|||
</>
|
||||
|
||||
<div className=" rounded-full flex ltr p-3 mt-2">
|
||||
<div className="flex">
|
||||
{/*{cart.find(e=>id)}*/}
|
||||
{!cart.find((item) => item.id === data.id) ? (
|
||||
<div className="w-[35px] h-[35px] bg-gray-200 overflow-hidden rounded-full ">
|
||||
<div
|
||||
onClick={() =>
|
||||
CTX.AddItemToCart(data.id, data.persianName, data.cost)
|
||||
}
|
||||
>
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 176 176"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="mx-auto mt-[8px]"
|
||||
>
|
||||
<path
|
||||
d="M163 100.475H100.5V162.975C100.5 166.29 99.183 169.47 96.8388 171.814C94.4946 174.158 91.3152 175.475 88 175.475C84.6848 175.475 81.5054 174.158 79.1612 171.814C76.817 169.47 75.5 166.29 75.5 162.975V100.475H13C9.68479 100.475 6.50537 99.1581 4.16117 96.8139C1.81696 94.4697 0.5 91.2903 0.5 87.9751C0.5 84.6599 1.81696 81.4805 4.16117 79.1363C6.50537 76.7921 9.68479 75.4751 13 75.4751H75.5V12.9751C75.5 9.65989 76.817 6.48046 79.1612 4.13626C81.5054 1.79205 84.6848 0.475098 88 0.475098C91.3152 0.475098 94.4946 1.79205 96.8388 4.13626C99.183 6.48046 100.5 9.65989 100.5 12.9751V75.4751H163C166.315 75.4751 169.495 76.7921 171.839 79.1363C174.183 81.4805 175.5 84.6599 175.5 87.9751C175.5 91.2903 174.183 94.4697 171.839 96.8139C169.495 99.1581 166.315 100.475 163 100.475Z"
|
||||
fill="black"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex rtl">
|
||||
<div
|
||||
className="w-[35px] h-[35px] bg-gray-200 overflow-hidden rounded-full text-center "
|
||||
onClick={() =>
|
||||
CTX.AddItemToCart(data.id, data.persianName, data.cost)
|
||||
}
|
||||
>
|
||||
<p className="mb-0 text-[25px] mt-[-2px]">+</p>
|
||||
</div>
|
||||
<p className="mb-0 mx-2 mt-1 font-bold">
|
||||
<PersianNumber
|
||||
number={cart.find((item) => item.id === data.id).count}
|
||||
/>
|
||||
</p>
|
||||
<div
|
||||
className="w-[35px] h-[35px] bg-red-200 overflow-hidden rounded-full text-center "
|
||||
onClick={() => CTX.RemoveItemFromCart(data.id)}
|
||||
>
|
||||
<p className="mb-0 text-[30px] mt-[-5px]">-</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex w-full">
|
||||
<AddToCart data={data} />
|
||||
</div>
|
||||
<div className="w-full text-right rounded-full">
|
||||
{data.hasDiscount ? (
|
||||
{data?.hasDiscount ? (
|
||||
<div className="flex justify-end">
|
||||
<p className="mb-0 font-bold text-sm absolute opacity-40 mt-[-7px] ml-[20px] text-red-600">
|
||||
<del>
|
||||
<PersianNumber number={data.cost} style={"text-[13px]"} />
|
||||
<PersianNumber
|
||||
number={(data?.cost / 10).toLocaleString()}
|
||||
style={"text-[13px]"}
|
||||
/>
|
||||
</del>
|
||||
</p>
|
||||
<div className="flex rtl mt-[8px]">
|
||||
{" "}
|
||||
<p className="mb-0 font-bold">
|
||||
<PersianNumber number={data.cost} />
|
||||
<PersianNumber
|
||||
number={(data?.costWithDiscount / 10).toLocaleString()}
|
||||
/>
|
||||
</p>
|
||||
<small className="mr-1 mt-[3px]">تومان</small>
|
||||
</div>
|
||||
|
|
@ -133,7 +107,7 @@ const CardCategories = ({ data }) => {
|
|||
<div className="flex rtl mt-[3px]">
|
||||
{" "}
|
||||
<p className="mb-0 font-bold text-lg">
|
||||
<PersianNumber number={data.cost} />
|
||||
<PersianNumber number={(data?.cost / 10).toLocaleString()} />
|
||||
</p>
|
||||
<small className="mr-1 mt-[6px]">تومان</small>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,94 +3,73 @@
|
|||
import Image from "next/image";
|
||||
import PersianNumber from "plugins/PersianNumber";
|
||||
import React, { useContext, useState } from "react";
|
||||
import p1 from "../../../public/images/product/1.png";
|
||||
import logo from "../../../public/images/logo.png";
|
||||
import AppContext from "@ctx/AppContext";
|
||||
import Link from "next/link";
|
||||
import AddToCart from "../Components/AddToCart/page";
|
||||
|
||||
const CardCategoriesMobile = ({ data }) => {
|
||||
const CTX = useContext(AppContext);
|
||||
const cart = CTX.state.cart;
|
||||
|
||||
console.log("data ", data, cart);
|
||||
|
||||
return (
|
||||
<div className="group border-t-[1px] border-gray-200 w-full hover:bg-white z-40 tr03 flex rtl pt-2 px-3">
|
||||
<div className=" h-fit ">
|
||||
<Image src={p1} className="xs:w-[130px] lg:w-[120px] " />
|
||||
{!!data.mainImage ? (
|
||||
<Image
|
||||
src={`${process.env.NEXT_PUBLIC_STORAGE_URL}/${data.mainImage}`}
|
||||
width={100}
|
||||
height={100}
|
||||
className="xs:!w-[110px] lg:!w-[130px] mx-auto !object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="xs:!w-[85px] lg:!w-[85px] ">
|
||||
<Image
|
||||
src={logo}
|
||||
className="xs:!w-[70px] lg:!w-[70px] mx-auto !object-cover opacity-25 mt-5"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="p-3 text-right w-full">
|
||||
<p className="mb-0 xs:text-[12px] lg:text-[11px] xl:text-[15px] max-h-[50px] tr03 ">
|
||||
{data?.persianName}
|
||||
</p>
|
||||
{data?.hasDiscount && (
|
||||
|
||||
{data.stock <= 3 && (
|
||||
<p className="mb-0 xs:text-[11px] lg:text-[12px] xl:text-[13px] text-red-600 font-medium">
|
||||
{" "}
|
||||
3 عدد موجود انبار
|
||||
{data.stock}عدد موجود انبار
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className=" rounded-full flex ltr pt-2 mt-2 w-full">
|
||||
<div className="flex">
|
||||
{/*{cart.find(e=>id)}*/}
|
||||
{!cart.find((item) => item.id === data.id) ? (
|
||||
<div className="w-[35px] h-[35px] bg-gray-200 overflow-hidden rounded-full ">
|
||||
<div
|
||||
onClick={() =>
|
||||
CTX.AddItemToCart(data.id, data.persianName, data.cost)
|
||||
}
|
||||
>
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 176 176"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="mx-auto mt-[8px]"
|
||||
>
|
||||
<path
|
||||
d="M163 100.475H100.5V162.975C100.5 166.29 99.183 169.47 96.8388 171.814C94.4946 174.158 91.3152 175.475 88 175.475C84.6848 175.475 81.5054 174.158 79.1612 171.814C76.817 169.47 75.5 166.29 75.5 162.975V100.475H13C9.68479 100.475 6.50537 99.1581 4.16117 96.8139C1.81696 94.4697 0.5 91.2903 0.5 87.9751C0.5 84.6599 1.81696 81.4805 4.16117 79.1363C6.50537 76.7921 9.68479 75.4751 13 75.4751H75.5V12.9751C75.5 9.65989 76.817 6.48046 79.1612 4.13626C81.5054 1.79205 84.6848 0.475098 88 0.475098C91.3152 0.475098 94.4946 1.79205 96.8388 4.13626C99.183 6.48046 100.5 9.65989 100.5 12.9751V75.4751H163C166.315 75.4751 169.495 76.7921 171.839 79.1363C174.183 81.4805 175.5 84.6599 175.5 87.9751C175.5 91.2903 174.183 94.4697 171.839 96.8139C169.495 99.1581 166.315 100.475 163 100.475Z"
|
||||
fill="black"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex rtl">
|
||||
<div
|
||||
className="w-[35px] h-[35px] bg-gray-200 overflow-hidden rounded-full text-center "
|
||||
onClick={() =>
|
||||
CTX.AddItemToCart(data.id, data.persianName, data.cost)
|
||||
}
|
||||
>
|
||||
<p className="mb-0 text-[25px] mt-[-2px]">+</p>
|
||||
</div>
|
||||
<p className="mb-0 mx-2 mt-1 font-bold">
|
||||
<PersianNumber
|
||||
number={cart.find((item) => item.id === data.id).count}
|
||||
/>
|
||||
</p>
|
||||
<div
|
||||
className="w-[35px] h-[35px] bg-red-200 overflow-hidden rounded-full text-center "
|
||||
onClick={() => CTX.RemoveItemFromCart(data.id)}
|
||||
>
|
||||
<p className="mb-0 text-[30px] mt-[-5px]">-</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="w-full text-right rounded-full">
|
||||
<AddToCart data={data} />{" "}
|
||||
<div className="w-full text-right rounded-lg">
|
||||
{data?.hasDiscount ? (
|
||||
<div className="flex justify-end">
|
||||
<p className="mb-0 font-bold text-sm absolute opacity-40 mt-[-7px] ml-[20px] text-red-600">
|
||||
<div className="mb-0 font-bold text-sm absolute mt-[-7px] ml-[20px] text-red-600 flex rtl">
|
||||
<del>
|
||||
<PersianNumber number={data?.cost} style={"text-[13px]"} />
|
||||
<PersianNumber
|
||||
number={(data?.cost / 10).toLocaleString()}
|
||||
style={"text-[13px] opacity-40 "}
|
||||
/>
|
||||
</del>
|
||||
</p>
|
||||
|
||||
<span className="bg-red-500 mb-0 px-1 text-[9px] text-white rounded-full mx-2 h-fit ">
|
||||
<PersianNumber
|
||||
number={data?.discountPercent}
|
||||
style={"text-white !text-[10px] mr-1 "}
|
||||
/>
|
||||
%
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex rtl mt-[8px]">
|
||||
{" "}
|
||||
<p className="mb-0 font-bold">
|
||||
<PersianNumber number={data?.cost} />
|
||||
<PersianNumber
|
||||
number={(data?.costWithDiscount / 10).toLocaleString()}
|
||||
/>
|
||||
</p>
|
||||
<small className="mr-1 mt-[3px]">تومان</small>
|
||||
</div>
|
||||
|
|
@ -99,7 +78,7 @@ const CardCategoriesMobile = ({ data }) => {
|
|||
<div className="flex rtl mt-[3px]">
|
||||
{" "}
|
||||
<p className="mb-0 font-bold text-lg">
|
||||
<PersianNumber number={data?.cost} />
|
||||
<PersianNumber number={(data?.cost / 10).toLocaleString()} />
|
||||
</p>
|
||||
<small className="mr-1 mt-[6px]">تومان</small>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,14 @@
|
|||
"use client";
|
||||
import React, { useContext } from "react";
|
||||
import { SwiperSlide } from "swiper/react";
|
||||
import p1 from "../../../public/images/product/1.png";
|
||||
import p2 from "../../../public/images/product/2.png";
|
||||
import p3 from "../../../public/images/product/3.png";
|
||||
import p4 from "../../../public/images/product/4.png";
|
||||
import logo from "../../../public/images/logo.png";
|
||||
|
||||
import Image from "next/image";
|
||||
import PersianNumber from "plugins/PersianNumber";
|
||||
import AppContext from "@ctx/AppContext";
|
||||
import AddToCart from "../Components/AddToCart/page";
|
||||
|
||||
const CardNormal = (props) => {
|
||||
const CardNormal = ({ data }) => {
|
||||
const CTX = useContext(AppContext);
|
||||
const cart = CTX.state.cart;
|
||||
return (
|
||||
|
|
@ -17,82 +16,79 @@ const CardNormal = (props) => {
|
|||
{" "}
|
||||
<>
|
||||
<div
|
||||
className={` tr03 py-2 overflow-hidden xs:h-[200px] lg:h-[250px] ${
|
||||
className={` tr03 py-2 overflow-hidden xs:h-[200px] lg:h-[230px] border border-gray-100 ${
|
||||
1 == 1 ? "bg-white rounded-xl" : " opacity-70"
|
||||
}`}
|
||||
// key={index}
|
||||
// onClick={() => handleRoutineShiftPlanWithDay(index)}
|
||||
>
|
||||
<div className="absolute m-3 ">
|
||||
<div className="w-fit rounded-full bg-red-900 overflow-hidden px-1 ">
|
||||
<p className="mb-0 text-[10px] text-white pt-[3px] ">
|
||||
<PersianNumber number={35} />
|
||||
<small className="text-[10px] ml-1">%</small>
|
||||
</p>
|
||||
</div>
|
||||
</div>{" "}
|
||||
<div className="w-full h-fit ">
|
||||
<Image src={p1} className="xs:w-[110px] lg:w-[170px] mx-auto" />
|
||||
</div>
|
||||
<div className="p-3 text-right">
|
||||
<p className="mb-0 text-[15px] font-bold max-h-[50px] ">
|
||||
لوسیون بدن سلامتی | maya
|
||||
</p>
|
||||
<p className="mb-0 text-[12px] text-red-600 font-medium">
|
||||
{" "}
|
||||
3 عدد موجود انبار
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
<div className="bg-white rounded-full flex ltr p-1 mt-2">
|
||||
<div className="flex">
|
||||
{/*{cart.find(e=>id)}*/}
|
||||
{2 == 1 ? (
|
||||
<div className="w-[35px] h-[35px] bg-gray-200 overflow-hidden rounded-full ">
|
||||
<div onClick={() => CTX.AddItemToCart(123, 1)}>
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 176 176"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="mx-auto mt-[8px]"
|
||||
>
|
||||
<path
|
||||
d="M163 100.475H100.5V162.975C100.5 166.29 99.183 169.47 96.8388 171.814C94.4946 174.158 91.3152 175.475 88 175.475C84.6848 175.475 81.5054 174.158 79.1612 171.814C76.817 169.47 75.5 166.29 75.5 162.975V100.475H13C9.68479 100.475 6.50537 99.1581 4.16117 96.8139C1.81696 94.4697 0.5 91.2903 0.5 87.9751C0.5 84.6599 1.81696 81.4805 4.16117 79.1363C6.50537 76.7921 9.68479 75.4751 13 75.4751H75.5V12.9751C75.5 9.65989 76.817 6.48046 79.1612 4.13626C81.5054 1.79205 84.6848 0.475098 88 0.475098C91.3152 0.475098 94.4946 1.79205 96.8388 4.13626C99.183 6.48046 100.5 9.65989 100.5 12.9751V75.4751H163C166.315 75.4751 169.495 76.7921 171.839 79.1363C174.183 81.4805 175.5 84.6599 175.5 87.9751C175.5 91.2903 174.183 94.4697 171.839 96.8139C169.495 99.1581 166.315 100.475 163 100.475Z"
|
||||
fill="black"
|
||||
{data.hasDiscount && (
|
||||
<div className="absolute m-3 ">
|
||||
<div className="w-fit rounded-lg bg-red-600 overflow-hidden px-1 ">
|
||||
<p className="mb-0 text-[10px] text-white pt-[3px] ">
|
||||
<PersianNumber
|
||||
number={data.discountPercent}
|
||||
style={"!text-[10px]"}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex rtl">
|
||||
<div className="w-[35px] h-[35px] bg-gray-200 overflow-hidden rounded-full text-center ">
|
||||
<p className="mb-0 text-[25px] mt-[-2px]">+</p>
|
||||
</div>
|
||||
<p className="mb-0 mx-2 mt-1 font-bold">
|
||||
<PersianNumber number={1} />
|
||||
</p>
|
||||
<div className="w-[35px] h-[35px] bg-red-200 overflow-hidden rounded-full text-center ">
|
||||
<p className="mb-0 text-[30px] mt-[-5px]">-</p>
|
||||
<small className="text-[10px] ml-1">%</small>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="w-full h-fit flex justify-center ">
|
||||
{!!data.mainImage ? (
|
||||
<Image
|
||||
src={`${process.env.NEXT_PUBLIC_STORAGE_URL}/${data.mainImage}`}
|
||||
width={100}
|
||||
height={100}
|
||||
className="xs:!w-[110px] lg:!w-[130px] mx-auto !object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="xs:!w-[85px] lg:!w-[85px] h-[90px] mt-10 ">
|
||||
<Image
|
||||
src={logo}
|
||||
className="xs:!w-[70px] lg:!w-[70px] mx-auto !object-cover opacity-25 mt-5"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="p-3 text-right">
|
||||
<p className="mb-0 text-[14px] max-h-[44px] overflow-hidden ">
|
||||
{data.persianName}{" "}
|
||||
</p>
|
||||
|
||||
{data.stock <= 3 && (
|
||||
<p className="mb-0 text-[11px] text-red-600 font-medium">
|
||||
{" "}
|
||||
{data.stock}عدد موجود انبار
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
<div className="bg-gray-50 rounded-lg flex ltr p-1 mt-2 border border-gray-100">
|
||||
<div className="flex w-full">
|
||||
<AddToCart data={data} />
|
||||
</div>
|
||||
|
||||
<div className="w-full text-right rounded-full pr-2">
|
||||
{2 == 2 ? (
|
||||
{data?.hasDiscount ? (
|
||||
<>
|
||||
<p className="mb-0 font-bold text-sm absolute right-3 opacity-30 mt-[-5px] text-red-600">
|
||||
<del>
|
||||
<PersianNumber number={150000} style="text-[9px]" />
|
||||
<PersianNumber
|
||||
number={(data?.cost / 10).toLocaleString()}
|
||||
style="!text-[11px]"
|
||||
/>
|
||||
</del>
|
||||
</p>
|
||||
<div className="flex rtl mt-[8px]">
|
||||
{" "}
|
||||
<p className="mb-0 font-bold">
|
||||
<PersianNumber number={150000} />
|
||||
<PersianNumber
|
||||
number={(data?.costWithDiscount / 10).toLocaleString()}
|
||||
/>
|
||||
</p>
|
||||
<small className="mr-1 mt-[3px]">تومان</small>
|
||||
</div>
|
||||
|
|
@ -101,7 +97,7 @@ const CardNormal = (props) => {
|
|||
<div className="flex rtl mt-[3px]">
|
||||
{" "}
|
||||
<p className="mb-0 font-bold text-lg">
|
||||
<PersianNumber number={150000} />
|
||||
<PersianNumber number={(data?.cost / 10).toLocaleString()} />
|
||||
</p>
|
||||
<small className="mr-1 mt-[6px]">تومان</small>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import Image from "next/image";
|
|||
import PersianNumber from "plugins/PersianNumber";
|
||||
import React from "react";
|
||||
import p1 from "../../../public/images/product/1.png";
|
||||
import AddToCart from "../Components/AddToCart/page";
|
||||
|
||||
const CardSurprise = () => {
|
||||
return (
|
||||
|
|
@ -36,42 +37,8 @@ const CardSurprise = () => {
|
|||
</div>
|
||||
</div>
|
||||
</>
|
||||
<div className="bg-white rounded-full flex ltr p-3 mt-2">
|
||||
<div className="flex">
|
||||
{/* <div className="w-[30px] h-[30px] rounded-full mx-1">
|
||||
<div>
|
||||
<svg
|
||||
width="25"
|
||||
height="25"
|
||||
viewBox="0 0 145 183"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M129.626 183C125.799 182.993 122.118 181.677 119.323 179.317L75.958 143.408C75.0148 142.618 73.7759 142.179 72.4896 142.179C71.2032 142.179 69.9643 142.618 69.0212 143.408L25.6662 179.317C23.4815 181.132 20.7588 182.335 17.83 182.778C14.9012 183.221 11.8929 182.885 9.17199 181.811C6.45107 180.737 4.13509 178.972 2.50646 176.731C0.877836 174.49 0.00695006 171.869 0 169.189V23.0189C0 16.9139 2.68691 11.0589 7.46964 6.74207C12.2524 2.4252 18.7391 0 25.5029 0H119.497C126.26 0 132.747 2.4252 137.53 6.74207C142.313 11.0589 145 16.9139 145 23.0189V169.161C145.023 171.852 144.164 174.489 142.53 176.741C140.896 178.992 138.561 180.757 135.818 181.812C133.868 182.592 131.759 182.996 129.626 183ZM72.4998 132.957C76.3447 132.949 80.0521 134.247 82.8846 136.594L126.25 172.503C126.979 173.11 127.888 173.512 128.866 173.66C129.844 173.808 130.849 173.695 131.757 173.335C132.665 172.976 133.437 172.385 133.979 171.636C134.521 170.886 134.809 170.01 134.809 169.115V23.0189C134.809 19.3559 133.196 15.8429 130.327 13.2528C127.457 10.6627 123.565 9.20755 119.507 9.20755H25.5029C21.4447 9.20755 17.5526 10.6627 14.683 13.2528C11.8133 15.8429 10.2012 19.3559 10.2012 23.0189V169.161C10.2002 170.056 10.4884 170.932 11.0304 171.682C11.5725 172.431 12.3448 173.022 13.253 173.381C14.1611 173.741 15.1657 173.854 16.1438 173.706C17.1219 173.558 18.031 173.156 18.76 172.549L62.1252 136.548C64.9627 134.22 68.6652 132.938 72.4998 132.957Z"
|
||||
fill="black"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div> */}
|
||||
<div className="w-[35px] h-[35px] bg-gray-100 overflow-hidden rounded-full mx-1 ">
|
||||
<div>
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 176 176"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="mx-auto mt-[6px]"
|
||||
>
|
||||
<path
|
||||
d="M163 100.475H100.5V162.975C100.5 166.29 99.183 169.47 96.8388 171.814C94.4946 174.158 91.3152 175.475 88 175.475C84.6848 175.475 81.5054 174.158 79.1612 171.814C76.817 169.47 75.5 166.29 75.5 162.975V100.475H13C9.68479 100.475 6.50537 99.1581 4.16117 96.8139C1.81696 94.4697 0.5 91.2903 0.5 87.9751C0.5 84.6599 1.81696 81.4805 4.16117 79.1363C6.50537 76.7921 9.68479 75.4751 13 75.4751H75.5V12.9751C75.5 9.65989 76.817 6.48046 79.1612 4.13626C81.5054 1.79205 84.6848 0.475098 88 0.475098C91.3152 0.475098 94.4946 1.79205 96.8388 4.13626C99.183 6.48046 100.5 9.65989 100.5 12.9751V75.4751H163C166.315 75.4751 169.495 76.7921 171.839 79.1363C174.183 81.4805 175.5 84.6599 175.5 87.9751C175.5 91.2903 174.183 94.4697 171.839 96.8139C169.495 99.1581 166.315 100.475 163 100.475Z"
|
||||
fill="black"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-white rounded-full flex ltr p-3 mt-2 w-full">
|
||||
<AddToCart />
|
||||
|
||||
<div className="w-full text-right rounded-full">
|
||||
{2 == 2 ? (
|
||||
|
|
|
|||
|
|
@ -0,0 +1,62 @@
|
|||
"use client";
|
||||
import AppContext from "@ctx/AppContext";
|
||||
import PersianNumber from "plugins/PersianNumber";
|
||||
import React, { useContext } from "react";
|
||||
|
||||
const AddToCart = ({ data }) => {
|
||||
const CTX = useContext(AppContext);
|
||||
const cart = CTX.state.cart;
|
||||
|
||||
const handleAddItemToCart = (id) => {
|
||||
CTX.AddItemToCart(
|
||||
data.id,
|
||||
data.persianName,
|
||||
data.cost,
|
||||
data.costWithDiscount,
|
||||
data.mainImage,
|
||||
data.hasDiscount,
|
||||
data.maxOrderCount
|
||||
);
|
||||
};
|
||||
return (
|
||||
<>
|
||||
{data.stock == 0 ? (
|
||||
<div className="bg-gray-200 w-full h-fit p-2 rounded-xl">
|
||||
<p className="mb-0 text-[12px] text-center ">اتمام موجودی</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex">
|
||||
{!cart.find((item) => item.id === data.id) ? (
|
||||
<div className="w-[25px] h-[25px] bg-gray-100 overflow-hidden rounded-lg text-center p-1 m-1 cursor-pointer">
|
||||
<div onClick={() => handleAddItemToCart()}>
|
||||
<p className="mb-0 text-[25px] mt-[-10px]">+</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex rtl bg-gray-50 p-1 h-fit rounded-lg">
|
||||
<div
|
||||
className="w-[25px] h-[25px] bg-gray-200 overflow-hidden rounded-lg text-center cursor-pointer "
|
||||
onClick={() => handleAddItemToCart()}
|
||||
>
|
||||
<p className="mb-0 text-[20px] mt-[-2px]">+</p>
|
||||
</div>
|
||||
<p className="mb-0 mx-2 mt-1 text-sm ">
|
||||
<PersianNumber
|
||||
number={cart.find((item) => item.id === data.id).count}
|
||||
/>
|
||||
</p>
|
||||
<div
|
||||
className="w-[25px] h-[25px] bg-red-200 overflow-hidden rounded-lg text-center cursor-pointer "
|
||||
onClick={() => CTX.RemoveItemFromCart(data.id)}
|
||||
>
|
||||
<p className="mb-0 text-[20px] mt-[-2px]">-</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddToCart;
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
"use client";
|
||||
import Link from "next/link";
|
||||
import PersianNumber from "plugins/PersianNumber";
|
||||
import React from "react";
|
||||
|
||||
const NavBarDownCart = ({ calculateTotalCost, event }) => {
|
||||
return (
|
||||
<div className="relative">
|
||||
<div className="fixed w-full bottom-[0] p-4 bg-body-100 border-t-[1px] border-gray-200 flex rtl">
|
||||
{/* <Link href={"/cart/checkout"} className="w-full"> */}
|
||||
<button
|
||||
className="btn btn-primary rounded-lg text-sm w-full"
|
||||
onClick={event}
|
||||
>
|
||||
ادامه فرایند خرید
|
||||
</button>
|
||||
{/* </Link> */}
|
||||
<div className="w-full mx-2">
|
||||
<p className="mb-0 text-sm font-semibold text-primary-500 text-center">
|
||||
قابل پرداخت{" "}
|
||||
</p>
|
||||
<div className="flex justify-center">
|
||||
<p className="mb-0 ">
|
||||
<PersianNumber number={calculateTotalCost?.toLocaleString()} />
|
||||
</p>
|
||||
<small className="text-gray-500 text-[12px] mt-1 mx-1">
|
||||
{" "}
|
||||
تومان
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default NavBarDownCart;
|
||||
|
|
@ -15,6 +15,7 @@ const FilterCategory = ({
|
|||
setRangePrice,
|
||||
sortBy,
|
||||
isRangePrice,
|
||||
theme,
|
||||
}) => {
|
||||
const CTX = useContext(AppContext);
|
||||
const brands = CTX.state.brands;
|
||||
|
|
@ -55,10 +56,18 @@ const FilterCategory = ({
|
|||
}, [selectedBrands, isChecked]);
|
||||
|
||||
return (
|
||||
<div className="ml-4 lg:col-span-2 xl:col-span-1">
|
||||
<div
|
||||
className={` rtl ${
|
||||
theme == 2 ? "col-span-full" : "lg:col-span-2 xl:col-span-1 ml-4"
|
||||
}`}
|
||||
>
|
||||
<div className="sticky top-20 ...">
|
||||
<div className=" w-full">
|
||||
<div className=" border-gray-300 rounded-lg bg-white">
|
||||
<div
|
||||
className={` border-gray-300 rounded-lg ${
|
||||
theme == 2 ? "bg-gray-100" : "bg-gray-50"
|
||||
} `}
|
||||
>
|
||||
<div className=" p-5 flex justify-between">
|
||||
<p className="mb-0 lg:text-sm xl:text-base">برند</p>
|
||||
<div>
|
||||
|
|
@ -98,7 +107,11 @@ const FilterCategory = ({
|
|||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-5 border-gray-300 rounded-lg mt-3 flex justify-between bg-white">
|
||||
<div
|
||||
className={`p-5 border-gray-300 rounded-lg mt-3 flex justify-between ${
|
||||
theme == 2 ? "bg-gray-100" : "bg-gray-50"
|
||||
} `}
|
||||
>
|
||||
<p className="mb-0 lg:text-sm xl:text-base">فقط محصولات موجود </p>
|
||||
<Switch
|
||||
checked={isChecked}
|
||||
|
|
@ -115,7 +128,11 @@ const FilterCategory = ({
|
|||
/>
|
||||
</Switch>
|
||||
</div>
|
||||
<div className="p-5 border-gray-300 rounded-lg mt-3 bg-white">
|
||||
<div
|
||||
className={` p-5 border-gray-300 rounded-lg mt-3 ${
|
||||
theme == 2 ? "bg-gray-100" : "bg-gray-50"
|
||||
} `}
|
||||
>
|
||||
<div className="flex justify-between ">
|
||||
<p className="mb-0">محدوده قیمت</p>
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ const ListProdocts = ({
|
|||
return (
|
||||
<div className="lg:col-span-6 xl:col-span-4 ">
|
||||
<div className=" px-10 ">
|
||||
<div className=" border-b-[1px] border-gray-300 pb-6">
|
||||
<div className=" border-b-[1px] border-gray-50 pb-6">
|
||||
<div className="flex justify-between">
|
||||
<div className="flex">
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,69 @@
|
|||
"use client";
|
||||
import SideBarNavBarMobile from "@comp/Navbar/SideBarNavBarMobile/page";
|
||||
import AppContext from "@ctx/AppContext";
|
||||
import React, { useContext } from "react";
|
||||
|
||||
const SearchSideBar = () => {
|
||||
const CTX = useContext(AppContext);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="mt-5 px-3">
|
||||
<div className="absolute right-0 mr-[15px] mt-[0px]">
|
||||
<div
|
||||
className="bg-gray-100 rounded-r-lg h-[47px] w-[40px] border-l-[1px] mt-[2px] "
|
||||
onClick={() => {
|
||||
CTX.setCloseNavbar(true);
|
||||
}}
|
||||
>
|
||||
<div className="pt-[9px] ">
|
||||
<svg
|
||||
width="25"
|
||||
height="28"
|
||||
viewBox="0 0 235 124"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="mx-auto"
|
||||
>
|
||||
<path
|
||||
d="M145.5 124L145.5 93.4995L235 93.4995L235 124L145.5 124ZM75.5 26.4998L75.5 0.499997L235 0.499997L235 26.4998L75.5 26.4998ZM0.499998 72.4996L0.499997 47.4996L235 47.4996L235 72.4996L0.499998 72.4996Z"
|
||||
fill="black"
|
||||
fill-opacity="0.73"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control bg-gray-100 !border-[0px] border-gray-100 rounded-lg text-right focus:!border-[0px] !text-sm !pr-[60px] "
|
||||
placeholder="دستت برای جست و جو بازه"
|
||||
/>
|
||||
|
||||
<div className="absolute mt-[-46px] ml-[6px]">
|
||||
<div className="w-[40px] h-[40px] bg-gray-200 rounded-lg pt-2">
|
||||
<svg
|
||||
width="17"
|
||||
height="17"
|
||||
viewBox="0 0 275 275"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="mx-auto mt-1"
|
||||
>
|
||||
<path
|
||||
d="M215.913 215.913L265 265M250.832 130.822C250.832 197.553 196.915 251.644 130.424 251.644C63.9166 251.644 10 197.552 10 130.838C10 64.0759 63.9166 10 130.408 10C196.915 10 250.832 64.0919 250.832 130.822Z"
|
||||
stroke="black"
|
||||
stroke-width="18.75"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<SideBarNavBarMobile />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SearchSideBar;
|
||||
|
|
@ -1,69 +1,33 @@
|
|||
"use client";
|
||||
import SideBarNavBarMobile from "@comp/Navbar/SideBarNavBarMobile/page";
|
||||
import AppContext from "@ctx/AppContext";
|
||||
import React, { useContext } from "react";
|
||||
import BottomSheetFilter from "plugins/bottomSheet/BottomSheetFilter";
|
||||
import React, { useContext, useEffect, useState } from "react";
|
||||
|
||||
const FilterCategoryMobile = (props) => {
|
||||
const CTX = useContext(AppContext);
|
||||
|
||||
const [trendFilter, setTrendFilter] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
CTX.fetchProducts(
|
||||
props.id,
|
||||
props.selectedBrands,
|
||||
props.isChecked,
|
||||
props.rangePrice,
|
||||
props.rangePrice,
|
||||
props.sortBy,
|
||||
props.isRangePrice
|
||||
);
|
||||
}, [props.sortBy]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="mt-5 px-3">
|
||||
<div className="absolute right-0 mr-[15px] mt-[0px]">
|
||||
<div
|
||||
className="bg-white rounded-r-lg h-[47px] w-[40px] border-l-[1px] mt-[2px] "
|
||||
onClick={() => {
|
||||
CTX.setCloseNavbar(true);
|
||||
}}
|
||||
>
|
||||
<div className="pt-[9px] ">
|
||||
<svg
|
||||
width="25"
|
||||
height="28"
|
||||
viewBox="0 0 235 124"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="mx-auto"
|
||||
>
|
||||
<path
|
||||
d="M145.5 124L145.5 93.4995L235 93.4995L235 124L145.5 124ZM75.5 26.4998L75.5 0.499997L235 0.499997L235 26.4998L75.5 26.4998ZM0.499998 72.4996L0.499997 47.4996L235 47.4996L235 72.4996L0.499998 72.4996Z"
|
||||
fill="black"
|
||||
fill-opacity="0.73"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control bg-white !border-[0px] border-gray-100 rounded-lg text-right focus:!border-[0px] !text-sm !pr-[60px] "
|
||||
placeholder="دستت برای جست و جو بازه"
|
||||
/>
|
||||
|
||||
<div className="absolute mt-[-46px] ml-[6px]">
|
||||
<div className="w-[40px] h-[40px] bg-gray-100 rounded-lg pt-2">
|
||||
<svg
|
||||
width="17"
|
||||
height="17"
|
||||
viewBox="0 0 275 275"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="mx-auto mt-1"
|
||||
>
|
||||
<path
|
||||
d="M215.913 215.913L265 265M250.832 130.822C250.832 197.553 196.915 251.644 130.424 251.644C63.9166 251.644 10 197.552 10 130.838C10 64.0759 63.9166 10 130.408 10C196.915 10 250.832 64.0919 250.832 130.822Z"
|
||||
stroke="black"
|
||||
stroke-width="18.75"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex my-5 px-3">
|
||||
<div className="w-full flex rtl justify-center">
|
||||
<div className="flex mb-3 mt-5 px-3">
|
||||
<div
|
||||
className="w-full flex rtl justify-center"
|
||||
onClick={() => CTX.setBottomSheetFilterOpen(true)}
|
||||
>
|
||||
<div>
|
||||
<svg
|
||||
width="20"
|
||||
|
|
@ -101,7 +65,10 @@ const FilterCategoryMobile = (props) => {
|
|||
</div>
|
||||
<p className="mb-0 text-sm text-gray-500">فیلتر ها</p>
|
||||
</div>
|
||||
<div className="w-full flex rtl justify-center">
|
||||
<div
|
||||
className="w-full flex rtl justify-center"
|
||||
onClick={() => setTrendFilter(!trendFilter)}
|
||||
>
|
||||
<div>
|
||||
<svg
|
||||
width="20"
|
||||
|
|
@ -121,7 +88,115 @@ const FilterCategoryMobile = (props) => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<SideBarNavBarMobile />
|
||||
{trendFilter ? (
|
||||
<div className=" flex overflow-auto whitespace-nowrap rtl px-2 mb-5 mt-5 ">
|
||||
{/* <div
|
||||
className="bg-primary-500 p-1 px-2 mx-1 rounded-full"
|
||||
onClick={() => props.setSortBy(1)}
|
||||
>
|
||||
<p className="mb-0 text-sm text-white">پربازدید ترین ها</p>
|
||||
</div>
|
||||
<div
|
||||
className="bg-primary-500 p-1 px-2 mx-1 rounded-full"
|
||||
onClick={() => props.setSortBy(2)}
|
||||
>
|
||||
<p className="mb-0 text-sm text-white">پربازدید ها</p>
|
||||
</div>
|
||||
<div
|
||||
className="bg-primary-500 p-1 px-2 mx-1 rounded-full"
|
||||
onClick={() => props.setSortBy(3)}
|
||||
>
|
||||
<p className="mb-0 text-sm text-white"> ترین ها</p>
|
||||
</div>
|
||||
<div
|
||||
className="bg-primary-500 p-1 px-2 mx-1 rounded-full"
|
||||
onClick={() => props.setSortBy(4)}
|
||||
>
|
||||
<p className="mb-0 text-sm text-white">پربازدید ها</p>
|
||||
</div>
|
||||
<div
|
||||
className="bg-primary-500 p-1 px-2 mx-1 rounded-full"
|
||||
onClick={() => props.setSortBy(5)}
|
||||
>
|
||||
<p className="mb-0 text-sm text-white">پربازدید ترین </p>
|
||||
</div> */}
|
||||
|
||||
<div
|
||||
className={`w-fit rounded-full px-2 mx-2 tr03 ${
|
||||
props.sortBy == 1 ? "bg-primary-600" : " opacity-60 "
|
||||
}`}
|
||||
onClick={() => props.setSortBy(1)}
|
||||
>
|
||||
<p
|
||||
className={`mb-0 lg:text-sm xl:text-base text-sm ${
|
||||
props.sortBy == 1 ? "text-white" : " text-gray-500"
|
||||
}`}
|
||||
>
|
||||
پربازدید ترین
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
className={`w-fit rounded-full px-2 mx-2 tr03 ${
|
||||
props.sortBy == 2 ? "bg-primary-600" : " opacity-60 "
|
||||
}`}
|
||||
onClick={() => props.setSortBy(2)}
|
||||
>
|
||||
<p
|
||||
className={`mb-0 lg:text-sm xl:text-base text-sm ${
|
||||
props.sortBy == 2 ? "text-white" : " text-gray-500"
|
||||
}`}
|
||||
>
|
||||
محبوب ترین
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
className={`w-fit rounded-full px-2 mx-2 tr03 ${
|
||||
props.sortBy == 3 ? "bg-primary-600" : " opacity-60 "
|
||||
}`}
|
||||
onClick={() => props.setSortBy(3)}
|
||||
>
|
||||
<p
|
||||
className={`mb-0 lg:text-sm xl:text-base text-sm ${
|
||||
props.sortBy == 3 ? "text-white" : " text-gray-500"
|
||||
}`}
|
||||
>
|
||||
گران ترین
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
className={`w-fit rounded-full px-2 mx-2 tr03 ${
|
||||
props.sortBy == 4 ? "bg-primary-600" : " opacity-60 "
|
||||
}`}
|
||||
onClick={() => props.setSortBy(4)}
|
||||
>
|
||||
<p
|
||||
className={`mb-0 lg:text-sm xl:text-base text-sm ${
|
||||
props.sortBy == 4 ? "text-white" : " text-gray-500"
|
||||
}`}
|
||||
>
|
||||
ارزان ترین
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
className={`w-fit rounded-full px-2 mx-2 tr03 ${
|
||||
props.sortBy == 5 ? "bg-primary-600" : " opacity-60 "
|
||||
}`}
|
||||
onClick={() => props.setSortBy(5)}
|
||||
>
|
||||
<p
|
||||
className={`mb-0 lg:text-sm xl:text-base text-sm ${
|
||||
props.sortBy == 5 ? "text-white" : " text-gray-500"
|
||||
}`}
|
||||
>
|
||||
پرفروش ترین
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
|
||||
<BottomSheetFilter data={props} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -4,14 +4,14 @@ import React from "react";
|
|||
const PaginationCategoory = (props) => {
|
||||
return (
|
||||
<div className="flex justify-center rtl mb-10">
|
||||
<div className="w-[40px] h-[40px] rounded-full bg-primary-400 mx-2">
|
||||
<div className="w-[25px] h-[25px] rounded-full bg-primary-300 mx-2">
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
width="13"
|
||||
height="13"
|
||||
viewBox="0 0 88 151"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="mx-auto mt-3 pr-[2px]"
|
||||
className="mx-auto mt-[6px] "
|
||||
>
|
||||
<path
|
||||
d="M12.9525 138.35L75.249 75.6471L12.5462 13.3506"
|
||||
|
|
@ -22,57 +22,42 @@ const PaginationCategoory = (props) => {
|
|||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="w-[40px] h-[40px] rounded-full bg-primary-800 mx-2">
|
||||
<p className="mb-0 text-center pt-2">
|
||||
<PersianNumber
|
||||
number={1}
|
||||
style="text-white !text-[16px] font-bold "
|
||||
/>
|
||||
<div className="w-[25px] h-[25px] rounded-full bg-primary-200 mx-1">
|
||||
<p className="mb-0 text-center pt-[2px]">
|
||||
<PersianNumber number={1} style=" !text-[14px] " />
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-[40px] h-[40px] rounded-full bg-primary-800 mx-2">
|
||||
<p className="mb-0 text-center pt-2">
|
||||
<PersianNumber
|
||||
number={2}
|
||||
style="text-white !text-[16px] font-bold "
|
||||
/>
|
||||
<div className="w-[25px] h-[25px] rounded-full bg-primary-200 mx-1">
|
||||
<p className="mb-0 text-center pt-[2px]">
|
||||
<PersianNumber number={2} style=" !text-[14px] " />
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-[40px] h-[40px] rounded-full bg-primary-800 mx-2">
|
||||
<p className="mb-0 text-center pt-2">
|
||||
<PersianNumber
|
||||
number={3}
|
||||
style="text-white !text-[16px] font-bold "
|
||||
/>
|
||||
<div className="w-[25px] h-[25px] rounded-full bg-primary-200 mx-1">
|
||||
<p className="mb-0 text-center pt-[2px]">
|
||||
<PersianNumber number={3} style=" !text-[14px] " />
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-[40px] h-[40px] rounded-full bg-primary-800 mx-2">
|
||||
<p className="mb-0 text-center pt-2">
|
||||
<PersianNumber
|
||||
number={4}
|
||||
style="text-white !text-[16px] font-bold "
|
||||
/>
|
||||
<div className="w-[25px] h-[25px] rounded-full bg-primary-200 mx-1">
|
||||
<p className="mb-0 text-center pt-[2px]">
|
||||
<PersianNumber number={4} style=" !text-[14px] " />
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-[40px] h-[40px] rounded-full bg-primary-800 mx-2">
|
||||
<p className="mb-0 text-center pt-2">
|
||||
<PersianNumber
|
||||
number={5}
|
||||
style="text-white !text-[16px] font-bold "
|
||||
/>
|
||||
<div className="w-[25px] h-[25px] rounded-full bg-primary-800 mx-1">
|
||||
<p className="mb-0 text-center pt-[2px]">
|
||||
<PersianNumber number={5} style=" !text-[14px] text-white " />
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-[40px] h-[40px] rounded-full bg-primary-400 mx-2">
|
||||
<div className="w-[25px] h-[25px] rounded-full bg-primary-300 mx-2">
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 89 151"
|
||||
width="13"
|
||||
height="13"
|
||||
viewBox="0 0 88 151"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="mx-auto mt-3 pr-[2px]"
|
||||
className="mx-auto mt-[6px] rotate-180 "
|
||||
>
|
||||
<path
|
||||
d="M74.7462 13.0002L12.7501 76.0001L75.7499 137.996"
|
||||
d="M12.9525 138.35L75.249 75.6471L12.5462 13.3506"
|
||||
stroke="white"
|
||||
stroke-width="25"
|
||||
stroke-linecap="round"
|
||||
|
|
|
|||
|
|
@ -1,11 +1,12 @@
|
|||
import React from "react";
|
||||
import logo from "../../public/images/logo.png";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
|
||||
const Footer = () => {
|
||||
return (
|
||||
<>
|
||||
<div className="bg-gray-200 p-5 mb-10 lg:flex rtl lg:px-20">
|
||||
<div className="bg-gray-100 p-5 pb-10 lg:flex rtl lg:px-20">
|
||||
<div className=" p-3 xs:w-full lg:w-8/12 mx-2 flex rtl">
|
||||
<div className="xs:w-[70px] lg:w-[100px]">
|
||||
<Image src={logo} />
|
||||
|
|
@ -23,7 +24,7 @@ const Footer = () => {
|
|||
<div className="w-8/12">
|
||||
<input
|
||||
type="text"
|
||||
className="form-control !rounded-full text-sm"
|
||||
className="form-control !rounded-full !border-[1px] text-sm"
|
||||
placeholder="شماره تماس برای تحفیف ها"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -33,96 +34,130 @@ const Footer = () => {
|
|||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className=" xs:px-10 lg:px-20">
|
||||
<div className="grid xs:grid-cols-1 lg:grid-cols-2 gap-10 rtl">
|
||||
<div className="grid xs:grid-cols-1 lg:grid-cols-3 gap-10 rtl">
|
||||
<div className="col-span-2">
|
||||
<div className="grid xs:grid-cols-1 lg:grid-cols-2"></div>
|
||||
|
||||
<div className="bg-gray-200">
|
||||
<div className=" xs:px-10 lg:px-20 py-5 ">
|
||||
<div className="grid xs:grid-cols-1 lg:grid-cols-2 gap-10 rtl">
|
||||
<div className="grid xs:grid-cols-1 lg:grid-cols-3 gap-10 rtl">
|
||||
<div className="col-span-2">
|
||||
<div className="grid xs:grid-cols-1 lg:grid-cols-2"></div>
|
||||
<div className=" ">
|
||||
<div>
|
||||
<p className="mb-0">محصولات</p>
|
||||
<div className="h-[1px] w-full bg-gray-200 mt-2"></div>
|
||||
</div>
|
||||
|
||||
<div className="grid xs:grid-cols-2 lg:grid-cols-2">
|
||||
<div>
|
||||
<ul>
|
||||
<Link
|
||||
href={`/categories/bdf6b13c-4be5-4a93-bcdb-612440bdbd6e`}
|
||||
>
|
||||
<li className="text-sm text-gray-600 mt-2">
|
||||
کرم مرطوب کننده دست و پا{" "}
|
||||
</li>
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
href={`/categories/20dce1e7-1dfe-4b2a-9764-6f3ddf46fdb2`}
|
||||
>
|
||||
<li className="text-sm text-gray-600 mt-2">
|
||||
مرطوب کننده و آبرسان صورت{" "}
|
||||
</li>
|
||||
</Link>
|
||||
<Link
|
||||
href={`/categories/16bcdc90-6842-4201-9d5c-54cd8f565148`}
|
||||
>
|
||||
<li className="text-sm text-gray-600 mt-2">
|
||||
شوینده سطوح
|
||||
</li>
|
||||
</Link>
|
||||
<Link
|
||||
href={`/categories/b7549222-87f7-4b0b-8938-210539b3a395`}
|
||||
>
|
||||
<li className="text-sm text-gray-600 mt-2">
|
||||
بهداشت دهان و دندان
|
||||
</li>
|
||||
</Link>
|
||||
<Link
|
||||
href={`/categories/f3e79ed0-d608-470d-8656-7a98ff933c1e`}
|
||||
>
|
||||
<li className="text-sm text-gray-600 mt-2">
|
||||
نرم کننده مو
|
||||
</li>
|
||||
</Link>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<ul>
|
||||
<Link
|
||||
href={`/categories/b909db09-2188-4a4d-8578-e1f7102947bc`}
|
||||
>
|
||||
<li className="text-sm text-gray-600 mt-2">
|
||||
کیت رنگ مو{" "}
|
||||
</li>
|
||||
</Link>
|
||||
<Link
|
||||
href={`/categories/effe5d98-d4b7-47e1-9bfb-4d3c77ab3347`}
|
||||
>
|
||||
<li className="text-sm text-gray-600 mt-2">
|
||||
بهداشت خانه و آشپرخانه{" "}
|
||||
</li>
|
||||
</Link>
|
||||
<Link
|
||||
href={`/categories/debf7aad-4f08-4d03-ba70-6663ae1aa90d`}
|
||||
>
|
||||
<li className="text-sm text-gray-600 mt-2">
|
||||
سرم مو{" "}
|
||||
</li>
|
||||
</Link>
|
||||
<Link
|
||||
href={`/categories/8bf20569-c3e3-457f-b9ad-140ef449741b`}
|
||||
>
|
||||
<li className="text-sm text-gray-600 mt-2">
|
||||
ژل بهداشتی بانوان{" "}
|
||||
</li>
|
||||
</Link>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className=" ">
|
||||
<div>
|
||||
<p className="mb-0">محصولات</p>
|
||||
<p className="mb-0">درباره ما</p>
|
||||
<div className="h-[1px] w-full bg-gray-200 mt-2"></div>
|
||||
</div>
|
||||
|
||||
<div className="grid xs:grid-cols-2 lg:grid-cols-2">
|
||||
<div>
|
||||
<ul>
|
||||
<li className="text-base text-gray-600 mt-2">
|
||||
بهداشت شخصی{" "}
|
||||
</li>
|
||||
<li className="text-base text-gray-600 mt-2">
|
||||
بهداشت و زیبایی ناخن{" "}
|
||||
</li>
|
||||
<li className="text-base text-gray-600 mt-2">
|
||||
مراقبت از کودکان{" "}
|
||||
</li>
|
||||
<li className="text-base text-gray-600 mt-2">
|
||||
بهداشت خانگی{" "}
|
||||
</li>
|
||||
<li className="text-base text-gray-600 mt-2">
|
||||
ضدعفونی کننده{" "}
|
||||
</li>
|
||||
<li className="text-base text-gray-600 mt-2">
|
||||
لوازم آرایشی
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<ul>
|
||||
<li className="text-base text-gray-600 mt-2">
|
||||
لوازم آرایشی
|
||||
</li>
|
||||
<li className="text-base text-gray-600 mt-2">
|
||||
آرایش و مراقبت مو{" "}
|
||||
</li>
|
||||
<li className="text-base text-gray-600 mt-2">
|
||||
مراقبت از پوست{" "}
|
||||
</li>
|
||||
<li className="text-base text-gray-600 mt-2">
|
||||
لوازم بهداشتی{" "}
|
||||
</li>
|
||||
<li className="text-base text-gray-600 mt-2">
|
||||
عطر، ادوکلن و اسپری{" "}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<ul>
|
||||
<li className="text-sm text-gray-600 mt-2">
|
||||
سوالات متداول{" "}
|
||||
</li>
|
||||
<li className="text-sm text-gray-600 mt-2">تماس باما </li>
|
||||
<li className="text-sm text-gray-600 mt-2">قوانین سایت</li>
|
||||
<li className="text-sm text-gray-600 mt-2">درباره ما </li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className=" ">
|
||||
|
||||
<div>
|
||||
<div>
|
||||
<p className="mb-0">درباره ما</p>
|
||||
<p className="mb-0">چرا وسمه</p>
|
||||
<div className="h-[1px] w-full bg-gray-200 mt-2"></div>
|
||||
</div>
|
||||
<div>
|
||||
<ul>
|
||||
<li className="text-base text-gray-600 mt-2">
|
||||
سوالات متداول{" "}
|
||||
</li>
|
||||
<li className="text-base text-gray-600 mt-2">تماس باما </li>
|
||||
<li className="text-base text-gray-600 mt-2">قوانین سایت</li>
|
||||
<li className="text-base text-gray-600 mt-2">درباره ما </li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div>
|
||||
<p className="mb-0">چرا وسمه</p>
|
||||
<div className="h-[1px] w-full bg-gray-200 mt-2"></div>
|
||||
</div>
|
||||
|
||||
<p className="mb-0 text-base text-gray-600 mt-3">
|
||||
وسمه تعهد داره تجربه خرید لوازم آرایشی و بهداشتی رو متحول کنه. این
|
||||
تحول میتونه برای مشتری احساس قسمتی از خانواده وسمه بودن رو داشته
|
||||
باشه. وسمه با برطرف کردن دغدغههای خرید لوازم آرایشی و بهداشتی به
|
||||
ساختن لایف استایل شخصی خانمهای ایرانی کمک میکنه و زندگی راحتتری
|
||||
پیش روی مشتریانش قرار میده. از سال 1400 ما تمام انرژیمون رو به
|
||||
کار گرفتیم تا با تمرکز برکیفیت کالا، سرعت ارسال و قیمت کالا ، نیاز
|
||||
افراد رو برطرف کنیم و تجربه جدیدی از لذت خرید به وجود بیاریم.
|
||||
</p>
|
||||
{/*
|
||||
<p className="mb-0 text-sm text-gray-600 mt-3">
|
||||
وسمه تعهد داره تجربه خرید لوازم آرایشی و بهداشتی رو متحول کنه.
|
||||
این تحول میتونه برای مشتری احساس قسمتی از خانواده وسمه بودن رو
|
||||
داشته باشه. وسمه با برطرف کردن دغدغههای خرید لوازم آرایشی و
|
||||
بهداشتی به ساختن لایف استایل شخصی خانمهای ایرانی کمک میکنه و
|
||||
زندگی راحتتری پیش روی مشتریانش قرار میده. از سال 1400 ما تمام
|
||||
انرژیمون رو به کار گرفتیم تا با تمرکز برکیفیت کالا، سرعت ارسال و
|
||||
قیمت کالا ، نیاز افراد رو برطرف کنیم و تجربه جدیدی از لذت خرید
|
||||
به وجود بیاریم.
|
||||
</p>
|
||||
{/*
|
||||
<div className="flex rtl justify-center mt-5">
|
||||
<div className="w-[70px] mx-1">
|
||||
<Image src={w11} className="opacity-50" />
|
||||
|
|
@ -145,19 +180,18 @@ const Footer = () => {
|
|||
</div>
|
||||
</div> */}
|
||||
|
||||
<div className="flex ltr justify-center mt-5 ">
|
||||
<div className=" flex justify-end flex-wrap ">
|
||||
<div className="bg-white w-[100px] h-[100px] rounded-3xl mx-2 xs:mt-3 lg:mt-0"></div>
|
||||
<div className="bg-white w-[100px] h-[100px] rounded-3xl mx-2 xs:mt-3 lg:mt-0"></div>
|
||||
<div className="bg-white w-[300px] h-[100px] rounded-3xl mx-2 xs:mt-3 lg:mt-0"></div>
|
||||
<div className="flex ltr justify-center mt-5 ">
|
||||
<div className=" flex justify-end flex-wrap ">
|
||||
<div className="bg-white w-[100px] h-[100px] rounded-3xl mx-2 xs:mt-3 lg:mt-0"></div>
|
||||
<div className="bg-white w-[100px] h-[100px] rounded-3xl mx-2 xs:mt-3 lg:mt-0"></div>
|
||||
<div className="bg-white w-[300px] h-[100px] rounded-3xl mx-2 xs:mt-3 lg:mt-0"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="h-[1px] border-[1px] border-gray-200 my-10 xs:mx-5 lg:mx-20">
|
||||
<p className="mb-0 text-gray-400 text-sm text-center py-5 rtl">
|
||||
<p className="mb-0 text-gray-400 text-sm text-center py-5 rtl bg-gray-100">
|
||||
استفاده از مطالب فروشگاه شاواز فقط برای مقاصد غیرتجاری و باذکر منبع
|
||||
بلامانع است. کلیه حقوق این سایت متعلق به شرکت وسمه می باشد. ورژن
|
||||
{process.env.NEXT_PUBLIC_PACKAGE_VERSION}
|
||||
|
|
|
|||
|
|
@ -6,8 +6,10 @@ import p1 from "../../../public/images/product/1.png";
|
|||
import p2 from "../../../public/images/product/2.png";
|
||||
import p3 from "../../../public/images/product/3.png";
|
||||
import p4 from "../../../public/images/product/4.png";
|
||||
import CardNormal from "@comp/Cards/CardNormal/page";
|
||||
|
||||
const BeautySection = () => {
|
||||
const BeautySection = ({ data }) => {
|
||||
console.log("BeautySection", data);
|
||||
return (
|
||||
<section className="mb-10 pb-10 xs:bg-sky-500 lg:bg-transparent xs:mx-3 lg:mx-0 xs:px-5 lg:px-0 xs:rounded-3xl lg:rounded-[0px] xs:mt-0 lg:mt-20">
|
||||
<div className=" relative xs:hidden lg:block ">
|
||||
|
|
@ -34,8 +36,6 @@ const BeautySection = () => {
|
|||
<p className="mb-0 text-white font-bold xs:text-sm lg:text-2xl xl:text-2xl">
|
||||
لوازم بهداشتی زیبایی{" "}
|
||||
</p>
|
||||
|
||||
<p className="mb-0">مشاهده بیشتر</p>
|
||||
</div>
|
||||
</div>
|
||||
<Swiper
|
||||
|
|
@ -46,7 +46,7 @@ const BeautySection = () => {
|
|||
className="rtl relative mt-5"
|
||||
breakpoints={{
|
||||
320: {
|
||||
slidesPerView: 1.6,
|
||||
slidesPerView: 1.3,
|
||||
},
|
||||
480: {
|
||||
slidesPerView: 2,
|
||||
|
|
@ -62,707 +62,18 @@ const BeautySection = () => {
|
|||
},
|
||||
}}
|
||||
>
|
||||
<SwiperSlide>
|
||||
<>
|
||||
<div
|
||||
className={` tr03 py-2 overflow-hidden xs:h-[200px] lg:h-[250px] ${
|
||||
1 == 1 ? "bg-white rounded-xl" : " opacity-70"
|
||||
}`}
|
||||
// key={index}
|
||||
// onClick={() => handleRoutineShiftPlanWithDay(index)}
|
||||
>
|
||||
<div className="absolute m-3 ">
|
||||
<div className="w-fit rounded-full bg-red-900 overflow-hidden px-1 ">
|
||||
<p className="mb-0 text-[10px] text-white pt-[3px] ">
|
||||
<PersianNumber number={35} />
|
||||
<small className="text-[10px] ml-1">%</small>
|
||||
</p>
|
||||
</div>
|
||||
</div>{" "}
|
||||
<div className="w-full h-fit ">
|
||||
<Image
|
||||
src={p1}
|
||||
className="xs:w-[110px] lg:w-[170px] mx-auto"
|
||||
/>
|
||||
</div>
|
||||
<div className="p-3 text-right">
|
||||
<p className="mb-0 text-[15px] font-bold max-h-[50px] ">
|
||||
لوسیون بدن سلامتی | maya
|
||||
</p>
|
||||
<p className="mb-0 text-[12px] text-red-600 font-medium">
|
||||
{" "}
|
||||
3 عدد موجود انبار
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
<div className="bg-white rounded-full flex ltr p-3 mt-2">
|
||||
<div className="flex">
|
||||
{/* <div className="w-[30px] h-[30px] rounded-full mx-1">
|
||||
<div>
|
||||
<svg
|
||||
width="25"
|
||||
height="25"
|
||||
viewBox="0 0 145 183"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M129.626 183C125.799 182.993 122.118 181.677 119.323 179.317L75.958 143.408C75.0148 142.618 73.7759 142.179 72.4896 142.179C71.2032 142.179 69.9643 142.618 69.0212 143.408L25.6662 179.317C23.4815 181.132 20.7588 182.335 17.83 182.778C14.9012 183.221 11.8929 182.885 9.17199 181.811C6.45107 180.737 4.13509 178.972 2.50646 176.731C0.877836 174.49 0.00695006 171.869 0 169.189V23.0189C0 16.9139 2.68691 11.0589 7.46964 6.74207C12.2524 2.4252 18.7391 0 25.5029 0H119.497C126.26 0 132.747 2.4252 137.53 6.74207C142.313 11.0589 145 16.9139 145 23.0189V169.161C145.023 171.852 144.164 174.489 142.53 176.741C140.896 178.992 138.561 180.757 135.818 181.812C133.868 182.592 131.759 182.996 129.626 183ZM72.4998 132.957C76.3447 132.949 80.0521 134.247 82.8846 136.594L126.25 172.503C126.979 173.11 127.888 173.512 128.866 173.66C129.844 173.808 130.849 173.695 131.757 173.335C132.665 172.976 133.437 172.385 133.979 171.636C134.521 170.886 134.809 170.01 134.809 169.115V23.0189C134.809 19.3559 133.196 15.8429 130.327 13.2528C127.457 10.6627 123.565 9.20755 119.507 9.20755H25.5029C21.4447 9.20755 17.5526 10.6627 14.683 13.2528C11.8133 15.8429 10.2012 19.3559 10.2012 23.0189V169.161C10.2002 170.056 10.4884 170.932 11.0304 171.682C11.5725 172.431 12.3448 173.022 13.253 173.381C14.1611 173.741 15.1657 173.854 16.1438 173.706C17.1219 173.558 18.031 173.156 18.76 172.549L62.1252 136.548C64.9627 134.22 68.6652 132.938 72.4998 132.957Z"
|
||||
fill="black"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div> */}
|
||||
<div className="w-[35px] h-[35px] bg-gray-100 overflow-hidden rounded-full mx-1 ">
|
||||
<div>
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 176 176"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="mx-auto mt-[6px]"
|
||||
>
|
||||
<path
|
||||
d="M163 100.475H100.5V162.975C100.5 166.29 99.183 169.47 96.8388 171.814C94.4946 174.158 91.3152 175.475 88 175.475C84.6848 175.475 81.5054 174.158 79.1612 171.814C76.817 169.47 75.5 166.29 75.5 162.975V100.475H13C9.68479 100.475 6.50537 99.1581 4.16117 96.8139C1.81696 94.4697 0.5 91.2903 0.5 87.9751C0.5 84.6599 1.81696 81.4805 4.16117 79.1363C6.50537 76.7921 9.68479 75.4751 13 75.4751H75.5V12.9751C75.5 9.65989 76.817 6.48046 79.1612 4.13626C81.5054 1.79205 84.6848 0.475098 88 0.475098C91.3152 0.475098 94.4946 1.79205 96.8388 4.13626C99.183 6.48046 100.5 9.65989 100.5 12.9751V75.4751H163C166.315 75.4751 169.495 76.7921 171.839 79.1363C174.183 81.4805 175.5 84.6599 175.5 87.9751C175.5 91.2903 174.183 94.4697 171.839 96.8139C169.495 99.1581 166.315 100.475 163 100.475Z"
|
||||
fill="black"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-full text-right rounded-full">
|
||||
{2 == 2 ? (
|
||||
<>
|
||||
<p className="mb-0 font-bold text-sm absolute right-3 opacity-30 mt-[-5px] text-red-600">
|
||||
<del>
|
||||
<PersianNumber number={150000} style={"text-[13px]"} />
|
||||
</del>
|
||||
</p>
|
||||
<div className="flex rtl mt-[8px]">
|
||||
{" "}
|
||||
<p className="mb-0 font-bold">
|
||||
<PersianNumber number={150000} />
|
||||
</p>
|
||||
<small className="mr-1 mt-[3px]">تومان</small>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="flex rtl mt-[3px]">
|
||||
{" "}
|
||||
<p className="mb-0 font-bold text-lg">
|
||||
<PersianNumber number={150000} />
|
||||
</p>
|
||||
<small className="mr-1 mt-[6px]">تومان</small>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<>
|
||||
<div
|
||||
className={` tr03 py-2 overflow-hidden xs:h-[200px] lg:h-[250px] ${
|
||||
1 == 1 ? "bg-white rounded-xl" : " opacity-70"
|
||||
}`}
|
||||
// key={index}
|
||||
// onClick={() => handleRoutineShiftPlanWithDay(index)}
|
||||
>
|
||||
<div className="absolute m-3 ">
|
||||
<div className="w-fit rounded-full bg-red-900 overflow-hidden px-1 ">
|
||||
<p className="mb-0 text-[10px] text-white pt-[3px] ">
|
||||
<PersianNumber number={35} />
|
||||
<small className="text-[10px] ml-1">%</small>
|
||||
</p>
|
||||
</div>
|
||||
</div>{" "}
|
||||
<div className="w-full h-fit ">
|
||||
<Image
|
||||
src={p2}
|
||||
className="xs:w-[110px] lg:w-[170px] mx-auto"
|
||||
/>
|
||||
</div>
|
||||
<div className="p-3 text-right">
|
||||
<p className="mb-0 text-[15px] font-bold max-h-[50px] ">
|
||||
سلامتی | maya
|
||||
</p>
|
||||
<p className="mb-0 text-[12px] text-red-600 font-medium">
|
||||
{" "}
|
||||
3 عدد موجود انبار
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
<div className="bg-white rounded-full flex ltr p-3 mt-2">
|
||||
<div className="flex">
|
||||
{/* <div className="w-[30px] h-[30px] rounded-full mx-1">
|
||||
<div>
|
||||
<svg
|
||||
width="25"
|
||||
height="25"
|
||||
viewBox="0 0 145 183"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M129.626 183C125.799 182.993 122.118 181.677 119.323 179.317L75.958 143.408C75.0148 142.618 73.7759 142.179 72.4896 142.179C71.2032 142.179 69.9643 142.618 69.0212 143.408L25.6662 179.317C23.4815 181.132 20.7588 182.335 17.83 182.778C14.9012 183.221 11.8929 182.885 9.17199 181.811C6.45107 180.737 4.13509 178.972 2.50646 176.731C0.877836 174.49 0.00695006 171.869 0 169.189V23.0189C0 16.9139 2.68691 11.0589 7.46964 6.74207C12.2524 2.4252 18.7391 0 25.5029 0H119.497C126.26 0 132.747 2.4252 137.53 6.74207C142.313 11.0589 145 16.9139 145 23.0189V169.161C145.023 171.852 144.164 174.489 142.53 176.741C140.896 178.992 138.561 180.757 135.818 181.812C133.868 182.592 131.759 182.996 129.626 183ZM72.4998 132.957C76.3447 132.949 80.0521 134.247 82.8846 136.594L126.25 172.503C126.979 173.11 127.888 173.512 128.866 173.66C129.844 173.808 130.849 173.695 131.757 173.335C132.665 172.976 133.437 172.385 133.979 171.636C134.521 170.886 134.809 170.01 134.809 169.115V23.0189C134.809 19.3559 133.196 15.8429 130.327 13.2528C127.457 10.6627 123.565 9.20755 119.507 9.20755H25.5029C21.4447 9.20755 17.5526 10.6627 14.683 13.2528C11.8133 15.8429 10.2012 19.3559 10.2012 23.0189V169.161C10.2002 170.056 10.4884 170.932 11.0304 171.682C11.5725 172.431 12.3448 173.022 13.253 173.381C14.1611 173.741 15.1657 173.854 16.1438 173.706C17.1219 173.558 18.031 173.156 18.76 172.549L62.1252 136.548C64.9627 134.22 68.6652 132.938 72.4998 132.957Z"
|
||||
fill="black"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div> */}
|
||||
<div className="w-[35px] h-[35px] bg-gray-100 overflow-hidden rounded-full mx-1 ">
|
||||
<div>
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 176 176"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="mx-auto mt-[6px]"
|
||||
>
|
||||
<path
|
||||
d="M163 100.475H100.5V162.975C100.5 166.29 99.183 169.47 96.8388 171.814C94.4946 174.158 91.3152 175.475 88 175.475C84.6848 175.475 81.5054 174.158 79.1612 171.814C76.817 169.47 75.5 166.29 75.5 162.975V100.475H13C9.68479 100.475 6.50537 99.1581 4.16117 96.8139C1.81696 94.4697 0.5 91.2903 0.5 87.9751C0.5 84.6599 1.81696 81.4805 4.16117 79.1363C6.50537 76.7921 9.68479 75.4751 13 75.4751H75.5V12.9751C75.5 9.65989 76.817 6.48046 79.1612 4.13626C81.5054 1.79205 84.6848 0.475098 88 0.475098C91.3152 0.475098 94.4946 1.79205 96.8388 4.13626C99.183 6.48046 100.5 9.65989 100.5 12.9751V75.4751H163C166.315 75.4751 169.495 76.7921 171.839 79.1363C174.183 81.4805 175.5 84.6599 175.5 87.9751C175.5 91.2903 174.183 94.4697 171.839 96.8139C169.495 99.1581 166.315 100.475 163 100.475Z"
|
||||
fill="black"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-full text-right rounded-full">
|
||||
{2 == 2 ? (
|
||||
<>
|
||||
<p className="mb-0 font-bold text-sm absolute right-3 opacity-30 mt-[-5px] text-red-600">
|
||||
<del>
|
||||
<PersianNumber number={150000} style={"text-[13px]"} />
|
||||
</del>
|
||||
</p>
|
||||
<div className="flex rtl mt-[8px]">
|
||||
{" "}
|
||||
<p className="mb-0 font-bold">
|
||||
<PersianNumber number={150000} />
|
||||
</p>
|
||||
<small className="mr-1 mt-[3px]">تومان</small>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="flex rtl mt-[3px]">
|
||||
{" "}
|
||||
<p className="mb-0 font-bold text-lg">
|
||||
<PersianNumber number={150000} />
|
||||
</p>
|
||||
<small className="mr-1 mt-[6px]">تومان</small>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<>
|
||||
<div
|
||||
className={` tr03 py-2 overflow-hidden xs:h-[200px] lg:h-[250px] ${
|
||||
1 == 1 ? "bg-white rounded-xl" : " opacity-70"
|
||||
}`}
|
||||
// key={index}
|
||||
// onClick={() => handleRoutineShiftPlanWithDay(index)}
|
||||
>
|
||||
<div className="absolute m-3 ">
|
||||
<div className="w-fit rounded-full bg-red-900 overflow-hidden px-1 ">
|
||||
<p className="mb-0 text-[10px] text-white pt-[3px] ">
|
||||
<PersianNumber number={35} />
|
||||
<small className="text-[10px] ml-1">%</small>
|
||||
</p>
|
||||
</div>
|
||||
</div>{" "}
|
||||
<div className="w-full h-fit ">
|
||||
<Image
|
||||
src={p3}
|
||||
className="xs:w-[110px] lg:w-[170px] mx-auto"
|
||||
/>
|
||||
</div>
|
||||
<div className="p-3 text-right">
|
||||
<p className="mb-0 text-[15px] font-bold max-h-[50px] ">
|
||||
لوسیو
|
||||
</p>
|
||||
<p className="mb-0 text-[12px] text-red-600 font-medium">
|
||||
{" "}
|
||||
3 عدد موجود انبار
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
<div className="bg-white rounded-full flex ltr p-3 mt-2">
|
||||
<div className="flex">
|
||||
{/* <div className="w-[30px] h-[30px] rounded-full mx-1">
|
||||
<div>
|
||||
<svg
|
||||
width="25"
|
||||
height="25"
|
||||
viewBox="0 0 145 183"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M129.626 183C125.799 182.993 122.118 181.677 119.323 179.317L75.958 143.408C75.0148 142.618 73.7759 142.179 72.4896 142.179C71.2032 142.179 69.9643 142.618 69.0212 143.408L25.6662 179.317C23.4815 181.132 20.7588 182.335 17.83 182.778C14.9012 183.221 11.8929 182.885 9.17199 181.811C6.45107 180.737 4.13509 178.972 2.50646 176.731C0.877836 174.49 0.00695006 171.869 0 169.189V23.0189C0 16.9139 2.68691 11.0589 7.46964 6.74207C12.2524 2.4252 18.7391 0 25.5029 0H119.497C126.26 0 132.747 2.4252 137.53 6.74207C142.313 11.0589 145 16.9139 145 23.0189V169.161C145.023 171.852 144.164 174.489 142.53 176.741C140.896 178.992 138.561 180.757 135.818 181.812C133.868 182.592 131.759 182.996 129.626 183ZM72.4998 132.957C76.3447 132.949 80.0521 134.247 82.8846 136.594L126.25 172.503C126.979 173.11 127.888 173.512 128.866 173.66C129.844 173.808 130.849 173.695 131.757 173.335C132.665 172.976 133.437 172.385 133.979 171.636C134.521 170.886 134.809 170.01 134.809 169.115V23.0189C134.809 19.3559 133.196 15.8429 130.327 13.2528C127.457 10.6627 123.565 9.20755 119.507 9.20755H25.5029C21.4447 9.20755 17.5526 10.6627 14.683 13.2528C11.8133 15.8429 10.2012 19.3559 10.2012 23.0189V169.161C10.2002 170.056 10.4884 170.932 11.0304 171.682C11.5725 172.431 12.3448 173.022 13.253 173.381C14.1611 173.741 15.1657 173.854 16.1438 173.706C17.1219 173.558 18.031 173.156 18.76 172.549L62.1252 136.548C64.9627 134.22 68.6652 132.938 72.4998 132.957Z"
|
||||
fill="black"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div> */}
|
||||
<div className="w-[35px] h-[35px] bg-gray-100 overflow-hidden rounded-full mx-1 ">
|
||||
<div>
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 176 176"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="mx-auto mt-[6px]"
|
||||
>
|
||||
<path
|
||||
d="M163 100.475H100.5V162.975C100.5 166.29 99.183 169.47 96.8388 171.814C94.4946 174.158 91.3152 175.475 88 175.475C84.6848 175.475 81.5054 174.158 79.1612 171.814C76.817 169.47 75.5 166.29 75.5 162.975V100.475H13C9.68479 100.475 6.50537 99.1581 4.16117 96.8139C1.81696 94.4697 0.5 91.2903 0.5 87.9751C0.5 84.6599 1.81696 81.4805 4.16117 79.1363C6.50537 76.7921 9.68479 75.4751 13 75.4751H75.5V12.9751C75.5 9.65989 76.817 6.48046 79.1612 4.13626C81.5054 1.79205 84.6848 0.475098 88 0.475098C91.3152 0.475098 94.4946 1.79205 96.8388 4.13626C99.183 6.48046 100.5 9.65989 100.5 12.9751V75.4751H163C166.315 75.4751 169.495 76.7921 171.839 79.1363C174.183 81.4805 175.5 84.6599 175.5 87.9751C175.5 91.2903 174.183 94.4697 171.839 96.8139C169.495 99.1581 166.315 100.475 163 100.475Z"
|
||||
fill="black"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-full text-right rounded-full">
|
||||
{2 == 2 ? (
|
||||
<>
|
||||
<p className="mb-0 font-bold text-sm absolute right-3 opacity-30 mt-[-5px] text-red-600">
|
||||
<del>
|
||||
<PersianNumber number={150000} style={"text-[13px]"} />
|
||||
</del>
|
||||
</p>
|
||||
<div className="flex rtl mt-[8px]">
|
||||
{" "}
|
||||
<p className="mb-0 font-bold">
|
||||
<PersianNumber number={150000} />
|
||||
</p>
|
||||
<small className="mr-1 mt-[3px]">تومان</small>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="flex rtl mt-[3px]">
|
||||
{" "}
|
||||
<p className="mb-0 font-bold text-lg">
|
||||
<PersianNumber number={150000} />
|
||||
</p>
|
||||
<small className="mr-1 mt-[6px]">تومان</small>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<>
|
||||
<div
|
||||
className={` tr03 py-2 overflow-hidden xs:h-[200px] lg:h-[250px] ${
|
||||
1 == 1 ? "bg-white rounded-xl" : " opacity-70"
|
||||
}`}
|
||||
// key={index}
|
||||
// onClick={() => handleRoutineShiftPlanWithDay(index)}
|
||||
>
|
||||
<div className="absolute m-3 ">
|
||||
<div className="w-fit rounded-full bg-red-900 overflow-hidden px-1 ">
|
||||
<p className="mb-0 text-[10px] text-white pt-[3px] ">
|
||||
<PersianNumber number={35} />
|
||||
<small className="text-[10px] ml-1">%</small>
|
||||
</p>
|
||||
</div>
|
||||
</div>{" "}
|
||||
<div className="w-full h-fit ">
|
||||
<Image
|
||||
src={p4}
|
||||
className="xs:w-[110px] lg:w-[170px] mx-auto"
|
||||
/>
|
||||
</div>
|
||||
<div className="p-3 text-right">
|
||||
<p className="mb-0 text-[15px] font-bold max-h-[50px] ">
|
||||
لوسیون |mexicano milanono
|
||||
</p>
|
||||
<p className="mb-0 text-[12px] text-red-600 font-medium">
|
||||
{" "}
|
||||
3 عدد موجود انبار
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
<div className="bg-white rounded-full flex ltr p-3 mt-2">
|
||||
<div className="flex">
|
||||
{/* <div className="w-[30px] h-[30px] rounded-full mx-1">
|
||||
<div>
|
||||
<svg
|
||||
width="25"
|
||||
height="25"
|
||||
viewBox="0 0 145 183"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M129.626 183C125.799 182.993 122.118 181.677 119.323 179.317L75.958 143.408C75.0148 142.618 73.7759 142.179 72.4896 142.179C71.2032 142.179 69.9643 142.618 69.0212 143.408L25.6662 179.317C23.4815 181.132 20.7588 182.335 17.83 182.778C14.9012 183.221 11.8929 182.885 9.17199 181.811C6.45107 180.737 4.13509 178.972 2.50646 176.731C0.877836 174.49 0.00695006 171.869 0 169.189V23.0189C0 16.9139 2.68691 11.0589 7.46964 6.74207C12.2524 2.4252 18.7391 0 25.5029 0H119.497C126.26 0 132.747 2.4252 137.53 6.74207C142.313 11.0589 145 16.9139 145 23.0189V169.161C145.023 171.852 144.164 174.489 142.53 176.741C140.896 178.992 138.561 180.757 135.818 181.812C133.868 182.592 131.759 182.996 129.626 183ZM72.4998 132.957C76.3447 132.949 80.0521 134.247 82.8846 136.594L126.25 172.503C126.979 173.11 127.888 173.512 128.866 173.66C129.844 173.808 130.849 173.695 131.757 173.335C132.665 172.976 133.437 172.385 133.979 171.636C134.521 170.886 134.809 170.01 134.809 169.115V23.0189C134.809 19.3559 133.196 15.8429 130.327 13.2528C127.457 10.6627 123.565 9.20755 119.507 9.20755H25.5029C21.4447 9.20755 17.5526 10.6627 14.683 13.2528C11.8133 15.8429 10.2012 19.3559 10.2012 23.0189V169.161C10.2002 170.056 10.4884 170.932 11.0304 171.682C11.5725 172.431 12.3448 173.022 13.253 173.381C14.1611 173.741 15.1657 173.854 16.1438 173.706C17.1219 173.558 18.031 173.156 18.76 172.549L62.1252 136.548C64.9627 134.22 68.6652 132.938 72.4998 132.957Z"
|
||||
fill="black"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div> */}
|
||||
<div className="w-[35px] h-[35px] bg-gray-100 overflow-hidden rounded-full mx-1 ">
|
||||
<div>
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 176 176"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="mx-auto mt-[6px]"
|
||||
>
|
||||
<path
|
||||
d="M163 100.475H100.5V162.975C100.5 166.29 99.183 169.47 96.8388 171.814C94.4946 174.158 91.3152 175.475 88 175.475C84.6848 175.475 81.5054 174.158 79.1612 171.814C76.817 169.47 75.5 166.29 75.5 162.975V100.475H13C9.68479 100.475 6.50537 99.1581 4.16117 96.8139C1.81696 94.4697 0.5 91.2903 0.5 87.9751C0.5 84.6599 1.81696 81.4805 4.16117 79.1363C6.50537 76.7921 9.68479 75.4751 13 75.4751H75.5V12.9751C75.5 9.65989 76.817 6.48046 79.1612 4.13626C81.5054 1.79205 84.6848 0.475098 88 0.475098C91.3152 0.475098 94.4946 1.79205 96.8388 4.13626C99.183 6.48046 100.5 9.65989 100.5 12.9751V75.4751H163C166.315 75.4751 169.495 76.7921 171.839 79.1363C174.183 81.4805 175.5 84.6599 175.5 87.9751C175.5 91.2903 174.183 94.4697 171.839 96.8139C169.495 99.1581 166.315 100.475 163 100.475Z"
|
||||
fill="black"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-full text-right rounded-full">
|
||||
{2 == 2 ? (
|
||||
<>
|
||||
<p className="mb-0 font-bold text-sm absolute right-3 opacity-30 mt-[-5px] text-red-600">
|
||||
<del>
|
||||
<PersianNumber number={150000} style={"text-[13px]"} />
|
||||
</del>
|
||||
</p>
|
||||
<div className="flex rtl mt-[8px]">
|
||||
{" "}
|
||||
<p className="mb-0 font-bold">
|
||||
<PersianNumber number={150000} />
|
||||
</p>
|
||||
<small className="mr-1 mt-[3px]">تومان</small>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="flex rtl mt-[3px]">
|
||||
{" "}
|
||||
<p className="mb-0 font-bold text-lg">
|
||||
<PersianNumber number={150000} />
|
||||
</p>
|
||||
<small className="mr-1 mt-[6px]">تومان</small>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<>
|
||||
<div
|
||||
className={` tr03 py-2 overflow-hidden xs:h-[200px] lg:h-[250px] ${
|
||||
1 == 1 ? "bg-white rounded-xl" : " opacity-70"
|
||||
}`}
|
||||
// key={index}
|
||||
// onClick={() => handleRoutineShiftPlanWithDay(index)}
|
||||
>
|
||||
<div className="absolute m-3 ">
|
||||
<div className="w-fit rounded-full bg-red-900 overflow-hidden px-1 ">
|
||||
<p className="mb-0 text-[10px] text-white pt-[3px] ">
|
||||
<PersianNumber number={35} />
|
||||
<small className="text-[10px] ml-1">%</small>
|
||||
</p>
|
||||
</div>
|
||||
</div>{" "}
|
||||
<div className="w-full h-fit ">
|
||||
<Image
|
||||
src={p1}
|
||||
className="xs:w-[110px] lg:w-[170px] mx-auto"
|
||||
/>
|
||||
</div>
|
||||
<div className="p-3 text-right">
|
||||
<p className="mb-0 text-[15px] font-bold max-h-[50px] ">
|
||||
لوسیون بدن سلامتی | maya
|
||||
</p>
|
||||
<p className="mb-0 text-[12px] text-red-600 font-medium">
|
||||
{" "}
|
||||
3 عدد موجود انبار
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
<div className="bg-white rounded-full flex ltr p-3 mt-2">
|
||||
<div className="flex">
|
||||
{/* <div className="w-[30px] h-[30px] rounded-full mx-1">
|
||||
<div>
|
||||
<svg
|
||||
width="25"
|
||||
height="25"
|
||||
viewBox="0 0 145 183"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M129.626 183C125.799 182.993 122.118 181.677 119.323 179.317L75.958 143.408C75.0148 142.618 73.7759 142.179 72.4896 142.179C71.2032 142.179 69.9643 142.618 69.0212 143.408L25.6662 179.317C23.4815 181.132 20.7588 182.335 17.83 182.778C14.9012 183.221 11.8929 182.885 9.17199 181.811C6.45107 180.737 4.13509 178.972 2.50646 176.731C0.877836 174.49 0.00695006 171.869 0 169.189V23.0189C0 16.9139 2.68691 11.0589 7.46964 6.74207C12.2524 2.4252 18.7391 0 25.5029 0H119.497C126.26 0 132.747 2.4252 137.53 6.74207C142.313 11.0589 145 16.9139 145 23.0189V169.161C145.023 171.852 144.164 174.489 142.53 176.741C140.896 178.992 138.561 180.757 135.818 181.812C133.868 182.592 131.759 182.996 129.626 183ZM72.4998 132.957C76.3447 132.949 80.0521 134.247 82.8846 136.594L126.25 172.503C126.979 173.11 127.888 173.512 128.866 173.66C129.844 173.808 130.849 173.695 131.757 173.335C132.665 172.976 133.437 172.385 133.979 171.636C134.521 170.886 134.809 170.01 134.809 169.115V23.0189C134.809 19.3559 133.196 15.8429 130.327 13.2528C127.457 10.6627 123.565 9.20755 119.507 9.20755H25.5029C21.4447 9.20755 17.5526 10.6627 14.683 13.2528C11.8133 15.8429 10.2012 19.3559 10.2012 23.0189V169.161C10.2002 170.056 10.4884 170.932 11.0304 171.682C11.5725 172.431 12.3448 173.022 13.253 173.381C14.1611 173.741 15.1657 173.854 16.1438 173.706C17.1219 173.558 18.031 173.156 18.76 172.549L62.1252 136.548C64.9627 134.22 68.6652 132.938 72.4998 132.957Z"
|
||||
fill="black"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div> */}
|
||||
<div className="w-[35px] h-[35px] bg-gray-100 overflow-hidden rounded-full mx-1 ">
|
||||
<div>
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 176 176"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="mx-auto mt-[6px]"
|
||||
>
|
||||
<path
|
||||
d="M163 100.475H100.5V162.975C100.5 166.29 99.183 169.47 96.8388 171.814C94.4946 174.158 91.3152 175.475 88 175.475C84.6848 175.475 81.5054 174.158 79.1612 171.814C76.817 169.47 75.5 166.29 75.5 162.975V100.475H13C9.68479 100.475 6.50537 99.1581 4.16117 96.8139C1.81696 94.4697 0.5 91.2903 0.5 87.9751C0.5 84.6599 1.81696 81.4805 4.16117 79.1363C6.50537 76.7921 9.68479 75.4751 13 75.4751H75.5V12.9751C75.5 9.65989 76.817 6.48046 79.1612 4.13626C81.5054 1.79205 84.6848 0.475098 88 0.475098C91.3152 0.475098 94.4946 1.79205 96.8388 4.13626C99.183 6.48046 100.5 9.65989 100.5 12.9751V75.4751H163C166.315 75.4751 169.495 76.7921 171.839 79.1363C174.183 81.4805 175.5 84.6599 175.5 87.9751C175.5 91.2903 174.183 94.4697 171.839 96.8139C169.495 99.1581 166.315 100.475 163 100.475Z"
|
||||
fill="black"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-full text-right rounded-full">
|
||||
{2 == 2 ? (
|
||||
<>
|
||||
<p className="mb-0 font-bold text-sm absolute right-3 opacity-30 mt-[-5px] text-red-600">
|
||||
<del>
|
||||
<PersianNumber number={150000} style={"text-[13px]"} />
|
||||
</del>
|
||||
</p>
|
||||
<div className="flex rtl mt-[8px]">
|
||||
{" "}
|
||||
<p className="mb-0 font-bold">
|
||||
<PersianNumber number={150000} />
|
||||
</p>
|
||||
<small className="mr-1 mt-[3px]">تومان</small>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="flex rtl mt-[3px]">
|
||||
{" "}
|
||||
<p className="mb-0 font-bold text-lg">
|
||||
<PersianNumber number={150000} />
|
||||
</p>
|
||||
<small className="mr-1 mt-[6px]">تومان</small>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<>
|
||||
<div
|
||||
className={` tr03 py-2 overflow-hidden xs:h-[200px] lg:h-[250px] ${
|
||||
1 == 1 ? "bg-white rounded-xl" : " opacity-70"
|
||||
}`}
|
||||
// key={index}
|
||||
// onClick={() => handleRoutineShiftPlanWithDay(index)}
|
||||
>
|
||||
<div className="absolute m-3 ">
|
||||
<div className="w-fit rounded-full bg-red-900 overflow-hidden px-1 ">
|
||||
<p className="mb-0 text-[10px] text-white pt-[3px] ">
|
||||
<PersianNumber number={35} />
|
||||
<small className="text-[10px] ml-1">%</small>
|
||||
</p>
|
||||
</div>
|
||||
</div>{" "}
|
||||
<div className="w-full h-fit ">
|
||||
<Image
|
||||
src={p1}
|
||||
className="xs:w-[110px] lg:w-[170px] mx-auto"
|
||||
/>
|
||||
</div>
|
||||
<div className="p-3 text-right">
|
||||
<p className="mb-0 text-[15px] font-bold max-h-[50px] ">
|
||||
لوسیون بدن سلامتی | maya
|
||||
</p>
|
||||
<p className="mb-0 text-[12px] text-red-600 font-medium">
|
||||
{" "}
|
||||
3 عدد موجود انبار
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
<div className="bg-white rounded-full flex ltr p-3 mt-2">
|
||||
<div className="flex">
|
||||
{/* <div className="w-[30px] h-[30px] rounded-full mx-1">
|
||||
<div>
|
||||
<svg
|
||||
width="25"
|
||||
height="25"
|
||||
viewBox="0 0 145 183"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M129.626 183C125.799 182.993 122.118 181.677 119.323 179.317L75.958 143.408C75.0148 142.618 73.7759 142.179 72.4896 142.179C71.2032 142.179 69.9643 142.618 69.0212 143.408L25.6662 179.317C23.4815 181.132 20.7588 182.335 17.83 182.778C14.9012 183.221 11.8929 182.885 9.17199 181.811C6.45107 180.737 4.13509 178.972 2.50646 176.731C0.877836 174.49 0.00695006 171.869 0 169.189V23.0189C0 16.9139 2.68691 11.0589 7.46964 6.74207C12.2524 2.4252 18.7391 0 25.5029 0H119.497C126.26 0 132.747 2.4252 137.53 6.74207C142.313 11.0589 145 16.9139 145 23.0189V169.161C145.023 171.852 144.164 174.489 142.53 176.741C140.896 178.992 138.561 180.757 135.818 181.812C133.868 182.592 131.759 182.996 129.626 183ZM72.4998 132.957C76.3447 132.949 80.0521 134.247 82.8846 136.594L126.25 172.503C126.979 173.11 127.888 173.512 128.866 173.66C129.844 173.808 130.849 173.695 131.757 173.335C132.665 172.976 133.437 172.385 133.979 171.636C134.521 170.886 134.809 170.01 134.809 169.115V23.0189C134.809 19.3559 133.196 15.8429 130.327 13.2528C127.457 10.6627 123.565 9.20755 119.507 9.20755H25.5029C21.4447 9.20755 17.5526 10.6627 14.683 13.2528C11.8133 15.8429 10.2012 19.3559 10.2012 23.0189V169.161C10.2002 170.056 10.4884 170.932 11.0304 171.682C11.5725 172.431 12.3448 173.022 13.253 173.381C14.1611 173.741 15.1657 173.854 16.1438 173.706C17.1219 173.558 18.031 173.156 18.76 172.549L62.1252 136.548C64.9627 134.22 68.6652 132.938 72.4998 132.957Z"
|
||||
fill="black"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div> */}
|
||||
<div className="w-[35px] h-[35px] bg-gray-100 overflow-hidden rounded-full mx-1 ">
|
||||
<div>
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 176 176"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="mx-auto mt-[6px]"
|
||||
>
|
||||
<path
|
||||
d="M163 100.475H100.5V162.975C100.5 166.29 99.183 169.47 96.8388 171.814C94.4946 174.158 91.3152 175.475 88 175.475C84.6848 175.475 81.5054 174.158 79.1612 171.814C76.817 169.47 75.5 166.29 75.5 162.975V100.475H13C9.68479 100.475 6.50537 99.1581 4.16117 96.8139C1.81696 94.4697 0.5 91.2903 0.5 87.9751C0.5 84.6599 1.81696 81.4805 4.16117 79.1363C6.50537 76.7921 9.68479 75.4751 13 75.4751H75.5V12.9751C75.5 9.65989 76.817 6.48046 79.1612 4.13626C81.5054 1.79205 84.6848 0.475098 88 0.475098C91.3152 0.475098 94.4946 1.79205 96.8388 4.13626C99.183 6.48046 100.5 9.65989 100.5 12.9751V75.4751H163C166.315 75.4751 169.495 76.7921 171.839 79.1363C174.183 81.4805 175.5 84.6599 175.5 87.9751C175.5 91.2903 174.183 94.4697 171.839 96.8139C169.495 99.1581 166.315 100.475 163 100.475Z"
|
||||
fill="black"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-full text-right rounded-full">
|
||||
{2 == 2 ? (
|
||||
<>
|
||||
<p className="mb-0 font-bold text-sm absolute right-3 opacity-30 mt-[-5px] text-red-600">
|
||||
<del>
|
||||
<PersianNumber number={150000} style={"text-[13px]"} />
|
||||
</del>
|
||||
</p>
|
||||
<div className="flex rtl mt-[8px]">
|
||||
{" "}
|
||||
<p className="mb-0 font-bold">
|
||||
<PersianNumber number={150000} />
|
||||
</p>
|
||||
<small className="mr-1 mt-[3px]">تومان</small>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="flex rtl mt-[3px]">
|
||||
{" "}
|
||||
<p className="mb-0 font-bold text-lg">
|
||||
<PersianNumber number={150000} />
|
||||
</p>
|
||||
<small className="mr-1 mt-[6px]">تومان</small>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<>
|
||||
<div
|
||||
className={` tr03 py-2 overflow-hidden xs:h-[200px] lg:h-[250px] ${
|
||||
1 == 1 ? "bg-white rounded-xl" : " opacity-70"
|
||||
}`}
|
||||
// key={index}
|
||||
// onClick={() => handleRoutineShiftPlanWithDay(index)}
|
||||
>
|
||||
<div className="absolute m-3 ">
|
||||
<div className="w-fit rounded-full bg-red-900 overflow-hidden px-1 ">
|
||||
<p className="mb-0 text-[10px] text-white pt-[3px] ">
|
||||
<PersianNumber number={35} />
|
||||
<small className="text-[10px] ml-1">%</small>
|
||||
</p>
|
||||
</div>
|
||||
</div>{" "}
|
||||
<div className="w-full h-fit ">
|
||||
<Image
|
||||
src={p1}
|
||||
className="xs:w-[110px] lg:w-[170px] mx-auto"
|
||||
/>
|
||||
</div>
|
||||
<div className="p-3 text-right">
|
||||
<p className="mb-0 text-[15px] font-bold max-h-[50px] ">
|
||||
لوسیون بدن سلامتی | maya
|
||||
</p>
|
||||
<p className="mb-0 text-[12px] text-red-600 font-medium">
|
||||
{" "}
|
||||
3 عدد موجود انبار
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
<div className="bg-white rounded-full flex ltr p-3 mt-2">
|
||||
<div className="flex">
|
||||
{/* <div className="w-[30px] h-[30px] rounded-full mx-1">
|
||||
<div>
|
||||
<svg
|
||||
width="25"
|
||||
height="25"
|
||||
viewBox="0 0 145 183"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M129.626 183C125.799 182.993 122.118 181.677 119.323 179.317L75.958 143.408C75.0148 142.618 73.7759 142.179 72.4896 142.179C71.2032 142.179 69.9643 142.618 69.0212 143.408L25.6662 179.317C23.4815 181.132 20.7588 182.335 17.83 182.778C14.9012 183.221 11.8929 182.885 9.17199 181.811C6.45107 180.737 4.13509 178.972 2.50646 176.731C0.877836 174.49 0.00695006 171.869 0 169.189V23.0189C0 16.9139 2.68691 11.0589 7.46964 6.74207C12.2524 2.4252 18.7391 0 25.5029 0H119.497C126.26 0 132.747 2.4252 137.53 6.74207C142.313 11.0589 145 16.9139 145 23.0189V169.161C145.023 171.852 144.164 174.489 142.53 176.741C140.896 178.992 138.561 180.757 135.818 181.812C133.868 182.592 131.759 182.996 129.626 183ZM72.4998 132.957C76.3447 132.949 80.0521 134.247 82.8846 136.594L126.25 172.503C126.979 173.11 127.888 173.512 128.866 173.66C129.844 173.808 130.849 173.695 131.757 173.335C132.665 172.976 133.437 172.385 133.979 171.636C134.521 170.886 134.809 170.01 134.809 169.115V23.0189C134.809 19.3559 133.196 15.8429 130.327 13.2528C127.457 10.6627 123.565 9.20755 119.507 9.20755H25.5029C21.4447 9.20755 17.5526 10.6627 14.683 13.2528C11.8133 15.8429 10.2012 19.3559 10.2012 23.0189V169.161C10.2002 170.056 10.4884 170.932 11.0304 171.682C11.5725 172.431 12.3448 173.022 13.253 173.381C14.1611 173.741 15.1657 173.854 16.1438 173.706C17.1219 173.558 18.031 173.156 18.76 172.549L62.1252 136.548C64.9627 134.22 68.6652 132.938 72.4998 132.957Z"
|
||||
fill="black"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div> */}
|
||||
<div className="w-[35px] h-[35px] bg-gray-100 overflow-hidden rounded-full mx-1 ">
|
||||
<div>
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 176 176"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="mx-auto mt-[6px]"
|
||||
>
|
||||
<path
|
||||
d="M163 100.475H100.5V162.975C100.5 166.29 99.183 169.47 96.8388 171.814C94.4946 174.158 91.3152 175.475 88 175.475C84.6848 175.475 81.5054 174.158 79.1612 171.814C76.817 169.47 75.5 166.29 75.5 162.975V100.475H13C9.68479 100.475 6.50537 99.1581 4.16117 96.8139C1.81696 94.4697 0.5 91.2903 0.5 87.9751C0.5 84.6599 1.81696 81.4805 4.16117 79.1363C6.50537 76.7921 9.68479 75.4751 13 75.4751H75.5V12.9751C75.5 9.65989 76.817 6.48046 79.1612 4.13626C81.5054 1.79205 84.6848 0.475098 88 0.475098C91.3152 0.475098 94.4946 1.79205 96.8388 4.13626C99.183 6.48046 100.5 9.65989 100.5 12.9751V75.4751H163C166.315 75.4751 169.495 76.7921 171.839 79.1363C174.183 81.4805 175.5 84.6599 175.5 87.9751C175.5 91.2903 174.183 94.4697 171.839 96.8139C169.495 99.1581 166.315 100.475 163 100.475Z"
|
||||
fill="black"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-full text-right rounded-full">
|
||||
{2 == 2 ? (
|
||||
<>
|
||||
<p className="mb-0 font-bold text-sm absolute right-3 opacity-30 mt-[-5px] text-red-600">
|
||||
<del>
|
||||
<PersianNumber number={150000} style={"text-[13px]"} />
|
||||
</del>
|
||||
</p>
|
||||
<div className="flex rtl mt-[8px]">
|
||||
{" "}
|
||||
<p className="mb-0 font-bold">
|
||||
<PersianNumber number={150000} />
|
||||
</p>
|
||||
<small className="mr-1 mt-[3px]">تومان</small>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="flex rtl mt-[3px]">
|
||||
{" "}
|
||||
<p className="mb-0 font-bold text-lg">
|
||||
<PersianNumber number={150000} />
|
||||
</p>
|
||||
<small className="mr-1 mt-[6px]">تومان</small>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
{data?.map((e) => (
|
||||
<SwiperSlide>
|
||||
<CardNormal data={e} />
|
||||
</SwiperSlide>
|
||||
))}
|
||||
</Swiper>
|
||||
|
||||
<div className="mx-5 mt-8">
|
||||
<p className="mb-0 text-sm text-gray-600 xs:text-white md:text-black">
|
||||
مشاهده بیشتر{" "}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import React from "react";
|
|||
import between1 from "../../../public/images/between1.png";
|
||||
import between2 from "../../../public/images/between2.png";
|
||||
import between from "../../../public/images/between.jpeg";
|
||||
import Link from "next/link";
|
||||
|
||||
const BetweenSexualSection = () => {
|
||||
return (
|
||||
|
|
@ -32,34 +33,45 @@ const BetweenSexualSection = () => {
|
|||
</p>
|
||||
|
||||
<div className=" xs:block lg:flex mt-10">
|
||||
<div className="bg-pink-300 p-3 w-full mx-1 rounded-3xl xs:my-10 lg:my-0 ">
|
||||
<div className="flex justify-end">
|
||||
<div className="absolute mt-[-43px]">
|
||||
<div className="xs:w-[140px] lg:w-[150px]">
|
||||
<Image src={between1} className=" object-cover" />
|
||||
<Link
|
||||
href={`/categories/7e92af7d-0370-451f-9770-5e26b5c8dc63`}
|
||||
className="w-full mx-3"
|
||||
>
|
||||
<div className="bg-pink-300 p-3 w-full mx-1 rounded-3xl lg:my-0 ">
|
||||
<div className="flex justify-end">
|
||||
<div className="absolute mt-[-43px]">
|
||||
<div className="xs:w-[140px] lg:w-[150px]">
|
||||
<Image src={between1} className=" object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="xs:text-lg lg:text-xl ">لوازم بانوان وسمه</h3>
|
||||
<h3 className="xs:text-lg lg:text-xl ">لوازم بانوان وسمه</h3>
|
||||
|
||||
<p className="mb-0 w-fit bg-sky-200 rounded-full py-1 px-3 mt-2 text-sm">
|
||||
شروع خرید{" "}
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-sky-300 p-3 w-full mx-1 rounded-3xl xs:my-10 lg:my-0 ">
|
||||
<div className="flex justify-end">
|
||||
<div className="absolute mt-[-43px]">
|
||||
<div className="xs:w-[140px] lg:w-[150px]">
|
||||
<Image src={between2} className=" object-cover" />
|
||||
<p className="mb-0 w-fit bg-sky-200 rounded-full py-1 px-3 mt-2 text-sm">
|
||||
شروع خرید{" "}
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
href={`/categories/7e92af7d-0370-451f-9770-5e26b5c8dc63`}
|
||||
className="w-full mx-3"
|
||||
>
|
||||
<div className="bg-sky-300 p-3 w-full mx-1 rounded-3xl xs:my-3 lg:my-0 ">
|
||||
<div className="flex justify-end">
|
||||
<div className="absolute mt-[-43px]">
|
||||
<div className="xs:w-[140px] lg:w-[150px]">
|
||||
<Image src={between2} className=" object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="xs:text-lg lg:text-xl ">لوازم آقایان وسمه</h3>
|
||||
<h3 className="xs:text-lg lg:text-xl ">لوازم آقایان وسمه</h3>
|
||||
|
||||
<p className="mb-0 w-fit bg-sky-200 rounded-full py-1 px-3 mt-2 text-sm">
|
||||
شروع خرید{" "}
|
||||
</p>
|
||||
</div>
|
||||
<p className="mb-0 w-fit bg-sky-200 rounded-full py-1 px-3 mt-2 text-sm">
|
||||
شروع خرید{" "}
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import png from "../../../public/images/5.png";
|
|||
import shs from "../../../public/images/6.png";
|
||||
import hft from "../../../public/images/7.png";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
|
||||
const HeroSection = () => {
|
||||
return (
|
||||
|
|
@ -21,99 +22,111 @@ const HeroSection = () => {
|
|||
</div>
|
||||
<div className="flex xs:flex-wrap justify-center xs:mt-[50px] lg:mt-[100px] xl:mt-[180px] ">
|
||||
<div className="xs:m-2 lg:m-0">
|
||||
<div className="lg:w-[130px] xs:w-[75px] lg:h-[130px] xs:h-[75px] bg-glass rounded-full mx-2">
|
||||
{" "}
|
||||
<div className="flex justify-center">
|
||||
<div className="absolute w-full">
|
||||
<div className=" xs:w-[110px] lg:w-[170px] lg:ml-[-20px] xs:ml-[-15px] mt-[-10px] ">
|
||||
<Image src={yek} />
|
||||
<Link href={`/categories/62b94d76-a025-4d08-a663-6cf8685d24c5`}>
|
||||
<div className="lg:w-[130px] xs:w-[75px] lg:h-[130px] xs:h-[75px] bg-glass rounded-full mx-2">
|
||||
{" "}
|
||||
<div className="flex justify-center">
|
||||
<div className="absolute w-full">
|
||||
<div className=" xs:w-[110px] lg:w-[170px] lg:ml-[-20px] xs:ml-[-15px] mt-[-10px] ">
|
||||
<Image src={yek} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<p className="mb-0 text-white text-sm mt-2">عطر و ادکلن</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<p className="mb-0 text-white text-sm mt-2">مراقبت پوست</p>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="xs:m-2 lg:m-0">
|
||||
<div className="lg:w-[130px] xs:w-[75px] lg:h-[130px] xs:h-[75px] bg-glass rounded-full mx-2">
|
||||
{" "}
|
||||
<div className="flex justify-center">
|
||||
<div className="absolute w-full">
|
||||
<div className=" xs:w-[110px] lg:w-[170px] lg:ml-[-20px] xs:ml-[-15px] mt-[-10px] ">
|
||||
<Image src={doo} />
|
||||
<Link href={`/categories/991c9adb-934d-43d6-9dab-e0ebde035d8e`}>
|
||||
<div className="lg:w-[130px] xs:w-[75px] lg:h-[130px] xs:h-[75px] bg-glass rounded-full mx-2">
|
||||
{" "}
|
||||
<div className="flex justify-center">
|
||||
<div className="absolute w-full">
|
||||
<div className=" xs:w-[110px] lg:w-[170px] lg:ml-[-20px] xs:ml-[-15px] mt-[-10px] ">
|
||||
<Image src={doo} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<p className="mb-0 text-white text-sm mt-2">وسایل بهداشتی</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<p className="mb-0 text-white text-sm mt-2">آرایش لب</p>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="xs:m-2 lg:m-0">
|
||||
<div className="lg:w-[130px] xs:w-[75px] lg:h-[130px] xs:h-[75px] bg-glass rounded-full mx-2 group tr03">
|
||||
{" "}
|
||||
<div className="flex justify-center">
|
||||
<div className="absolute w-full">
|
||||
<div className=" xs:w-[110px] lg:w-[170px] lg:ml-[-20px] xs:ml-[-15px] mt-[-10px] ">
|
||||
<Image src={see} />{" "}
|
||||
<Link href={`/categories/9c95ca17-c041-497b-a7bf-b58b716e2155`}>
|
||||
<div className="lg:w-[130px] xs:w-[75px] lg:h-[130px] xs:h-[75px] bg-glass rounded-full mx-2 group tr03">
|
||||
{" "}
|
||||
<div className="flex justify-center">
|
||||
<div className="absolute w-full">
|
||||
<div className=" xs:w-[110px] lg:w-[170px] lg:ml-[-20px] xs:ml-[-15px] mt-[-10px] ">
|
||||
<Image src={see} />{" "}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<p className="mb-0 text-white text-sm mt-2"> آرایشی چشم</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<p className="mb-0 text-white text-sm mt-2"> آرایش ناخن</p>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="xs:m-2 lg:m-0">
|
||||
<div className="lg:w-[130px] xs:w-[75px] lg:h-[130px] xs:h-[75px] bg-glass rounded-full mx-2">
|
||||
{" "}
|
||||
<div className="flex justify-center">
|
||||
<div className="absolute w-full">
|
||||
<div className=" xs:w-[110px] lg:w-[170px] lg:ml-[-20px] xs:ml-[-15px] mt-[-10px] ">
|
||||
<Image src={chr} />
|
||||
<Link href={`/categories/7202f039-339e-44ff-90d8-113b2991a958`}>
|
||||
<div className="lg:w-[130px] xs:w-[75px] lg:h-[130px] xs:h-[75px] bg-glass rounded-full mx-2">
|
||||
{" "}
|
||||
<div className="flex justify-center">
|
||||
<div className="absolute w-full">
|
||||
<div className=" xs:w-[110px] lg:w-[170px] lg:ml-[-20px] xs:ml-[-15px] mt-[-10px] ">
|
||||
<Image src={chr} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<p className="mb-0 text-white text-sm mt-2">آرایش صورت</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<p className="mb-0 text-white text-sm mt-2">بهداشت جنسی</p>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="xs:m-2 lg:m-0">
|
||||
<div className="lg:w-[130px] xs:w-[75px] lg:h-[130px] xs:h-[75px] bg-glass rounded-full mx-2">
|
||||
{" "}
|
||||
<div className="flex justify-center">
|
||||
<div className="absolute w-full">
|
||||
<div className=" xs:w-[110px] lg:w-[170px] lg:ml-[-20px] xs:ml-[-15px] mt-[-10px] ">
|
||||
<Image src={png} />
|
||||
<Link href={`/categories/2e11e55c-0941-49f8-9d22-dfa21088f639`}>
|
||||
<div className="lg:w-[130px] xs:w-[75px] lg:h-[130px] xs:h-[75px] bg-glass rounded-full mx-2">
|
||||
{" "}
|
||||
<div className="flex justify-center">
|
||||
<div className="absolute w-full">
|
||||
<div className=" xs:w-[110px] lg:w-[170px] lg:ml-[-20px] xs:ml-[-15px] mt-[-10px] ">
|
||||
<Image src={png} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<p className="mb-0 text-white text-sm mt-2">بهداشت زنانه</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<p className="mb-0 text-white text-sm mt-2">آرایش چشم</p>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="xs:m-2 lg:m-0">
|
||||
<div className="lg:w-[130px] xs:w-[75px] lg:h-[130px] xs:h-[75px] bg-glass rounded-full mx-2">
|
||||
{" "}
|
||||
<div className="flex justify-center">
|
||||
<div className="absolute w-full">
|
||||
<div className=" xs:w-[110px] lg:w-[170px] lg:ml-[-20px] xs:ml-[-15px] mt-[-10px] ">
|
||||
<Image src={shs} />{" "}
|
||||
<Link href={`/categories/7e92af7d-0370-451f-9770-5e26b5c8dc63`}>
|
||||
<div className="lg:w-[130px] xs:w-[75px] lg:h-[130px] xs:h-[75px] bg-glass rounded-full mx-2">
|
||||
{" "}
|
||||
<div className="flex justify-center">
|
||||
<div className="absolute w-full">
|
||||
<div className=" xs:w-[110px] lg:w-[170px] lg:ml-[-20px] xs:ml-[-15px] mt-[-10px] ">
|
||||
<Image src={shs} />{" "}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<p className="mb-0 text-white text-sm mt-2">بهداشت مردانه</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<p className="mb-0 text-white text-sm mt-2">کرم پودر</p>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -7,8 +7,9 @@ import p2 from "../../../public/images/product/2.png";
|
|||
import p3 from "../../../public/images/product/3.png";
|
||||
import p4 from "../../../public/images/product/4.png";
|
||||
import khane from "../../../public/images/khane.jpg";
|
||||
import CardNormal from "@comp/Cards/CardNormal/page";
|
||||
|
||||
const HomeSection = () => {
|
||||
const HomeSection = ({ data }) => {
|
||||
return (
|
||||
<section className="xs:mb-0 lg:mb-20">
|
||||
<div className=" xs:px-5 lg:px-20 mt-10">
|
||||
|
|
@ -38,7 +39,7 @@ const HomeSection = () => {
|
|||
className="rtl relative mt-4"
|
||||
breakpoints={{
|
||||
320: {
|
||||
slidesPerView: 1.6,
|
||||
slidesPerView: 1.3,
|
||||
},
|
||||
480: {
|
||||
slidesPerView: 2,
|
||||
|
|
@ -47,238 +48,18 @@ const HomeSection = () => {
|
|||
slidesPerView: 3,
|
||||
},
|
||||
1024: {
|
||||
slidesPerView: 3.2,
|
||||
slidesPerView: 3.4,
|
||||
},
|
||||
1440: {
|
||||
slidesPerView: 4,
|
||||
slidesPerView: 3.8,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<SwiperSlide>
|
||||
<>
|
||||
<div
|
||||
className={` tr03 py-2 overflow-hidden ${
|
||||
1 == 1 ? "bg-white rounded-xl" : " opacity-70"
|
||||
}`}
|
||||
// key={index}
|
||||
// onClick={() => handleRoutineShiftPlanWithDay(index)}
|
||||
>
|
||||
<div className="absolute mr-2 ">
|
||||
<div className="w-fit rounded-full bg-red-900 overflow-hidden px-1 ">
|
||||
<p className="mb-0 text-[10px] text-white ">
|
||||
<PersianNumber number={35} style="text-sm" />
|
||||
<small className="text-[10px] ml-1">%</small>
|
||||
</p>
|
||||
</div>
|
||||
</div>{" "}
|
||||
<div className="w-full h-fit ">
|
||||
<Image
|
||||
src={p2}
|
||||
className="xs:w-[100px] lg:w-[130px] mx-auto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
<div className="bg-white rounded-full flex ltr p-1 mt-2">
|
||||
<div className="flex">
|
||||
<div className="w-[35px] h-[35px] bg-gray-100 overflow-hidden rounded-full ">
|
||||
<div>
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 176 176"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="mx-auto mt-[6px]"
|
||||
>
|
||||
<path
|
||||
d="M163 100.475H100.5V162.975C100.5 166.29 99.183 169.47 96.8388 171.814C94.4946 174.158 91.3152 175.475 88 175.475C84.6848 175.475 81.5054 174.158 79.1612 171.814C76.817 169.47 75.5 166.29 75.5 162.975V100.475H13C9.68479 100.475 6.50537 99.1581 4.16117 96.8139C1.81696 94.4697 0.5 91.2903 0.5 87.9751C0.5 84.6599 1.81696 81.4805 4.16117 79.1363C6.50537 76.7921 9.68479 75.4751 13 75.4751H75.5V12.9751C75.5 9.65989 76.817 6.48046 79.1612 4.13626C81.5054 1.79205 84.6848 0.475098 88 0.475098C91.3152 0.475098 94.4946 1.79205 96.8388 4.13626C99.183 6.48046 100.5 9.65989 100.5 12.9751V75.4751H163C166.315 75.4751 169.495 76.7921 171.839 79.1363C174.183 81.4805 175.5 84.6599 175.5 87.9751C175.5 91.2903 174.183 94.4697 171.839 96.8139C169.495 99.1581 166.315 100.475 163 100.475Z"
|
||||
fill="black"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-full text-right rounded-full pr-2">
|
||||
{2 == 2 ? (
|
||||
<>
|
||||
<p className="mb-0 font-bold text-sm absolute right-3 opacity-30 mt-[-5px] text-red-600">
|
||||
<del>
|
||||
<PersianNumber number={150000} style="text-[9px]" />
|
||||
</del>
|
||||
</p>
|
||||
<div className="flex rtl mt-[8px]">
|
||||
{" "}
|
||||
<p className="mb-0 font-bold">
|
||||
<PersianNumber number={150000} />
|
||||
</p>
|
||||
<small className="mr-1 mt-[3px]">تومان</small>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="flex rtl mt-[3px]">
|
||||
{" "}
|
||||
<p className="mb-0 font-bold text-lg">
|
||||
<PersianNumber number={150000} />
|
||||
</p>
|
||||
<small className="mr-1 mt-[6px]">تومان</small>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<>
|
||||
<div
|
||||
className={` tr03 py-2 overflow-hidden ${
|
||||
1 == 1 ? "bg-white rounded-xl" : " opacity-70"
|
||||
}`}
|
||||
// key={index}
|
||||
// onClick={() => handleRoutineShiftPlanWithDay(index)}
|
||||
>
|
||||
<div className="absolute mr-2 ">
|
||||
<div className="w-fit rounded-full bg-red-900 overflow-hidden px-1 ">
|
||||
<p className="mb-0 text-[10px] text-white ">
|
||||
<PersianNumber number={35} style="text-sm" />
|
||||
<small className="text-[10px] ml-1">%</small>
|
||||
</p>
|
||||
</div>
|
||||
</div>{" "}
|
||||
<div className="w-full h-fit ">
|
||||
<Image
|
||||
src={p3}
|
||||
className="xs:w-[100px] lg:w-[130px] mx-auto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
<div className="bg-white rounded-full flex ltr p-1 mt-2">
|
||||
<div className="flex">
|
||||
<div className="w-[35px] h-[35px] bg-gray-100 overflow-hidden rounded-full ">
|
||||
<div>
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 176 176"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="mx-auto mt-[6px]"
|
||||
>
|
||||
<path
|
||||
d="M163 100.475H100.5V162.975C100.5 166.29 99.183 169.47 96.8388 171.814C94.4946 174.158 91.3152 175.475 88 175.475C84.6848 175.475 81.5054 174.158 79.1612 171.814C76.817 169.47 75.5 166.29 75.5 162.975V100.475H13C9.68479 100.475 6.50537 99.1581 4.16117 96.8139C1.81696 94.4697 0.5 91.2903 0.5 87.9751C0.5 84.6599 1.81696 81.4805 4.16117 79.1363C6.50537 76.7921 9.68479 75.4751 13 75.4751H75.5V12.9751C75.5 9.65989 76.817 6.48046 79.1612 4.13626C81.5054 1.79205 84.6848 0.475098 88 0.475098C91.3152 0.475098 94.4946 1.79205 96.8388 4.13626C99.183 6.48046 100.5 9.65989 100.5 12.9751V75.4751H163C166.315 75.4751 169.495 76.7921 171.839 79.1363C174.183 81.4805 175.5 84.6599 175.5 87.9751C175.5 91.2903 174.183 94.4697 171.839 96.8139C169.495 99.1581 166.315 100.475 163 100.475Z"
|
||||
fill="black"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-full text-right rounded-full pr-2">
|
||||
{2 == 2 ? (
|
||||
<>
|
||||
<p className="mb-0 font-bold text-sm absolute right-3 opacity-30 mt-[-5px] text-red-600">
|
||||
<del>
|
||||
<PersianNumber number={150000} style="text-[9px]" />
|
||||
</del>
|
||||
</p>
|
||||
<div className="flex rtl mt-[8px]">
|
||||
{" "}
|
||||
<p className="mb-0 font-bold">
|
||||
<PersianNumber number={150000} />
|
||||
</p>
|
||||
<small className="mr-1 mt-[3px]">تومان</small>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="flex rtl mt-[3px]">
|
||||
{" "}
|
||||
<p className="mb-0 font-bold text-lg">
|
||||
<PersianNumber number={150000} />
|
||||
</p>
|
||||
<small className="mr-1 mt-[6px]">تومان</small>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<>
|
||||
<div
|
||||
className={` tr03 py-2 overflow-hidden ${
|
||||
1 == 1 ? "bg-white rounded-xl" : " opacity-70"
|
||||
}`}
|
||||
// key={index}
|
||||
// onClick={() => handleRoutineShiftPlanWithDay(index)}
|
||||
>
|
||||
<div className="absolute mr-2 ">
|
||||
<div className="w-fit rounded-full bg-red-900 overflow-hidden px-1 ">
|
||||
<p className="mb-0 text-[10px] text-white ">
|
||||
<PersianNumber number={35} style="text-sm" />
|
||||
<small className="text-[10px] ml-1">%</small>
|
||||
</p>
|
||||
</div>
|
||||
</div>{" "}
|
||||
<div className="w-full h-fit ">
|
||||
<Image
|
||||
src={p1}
|
||||
className="xs:w-[100px] lg:w-[130px] mx-auto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
<div className="bg-white rounded-full flex ltr p-1 mt-2">
|
||||
<div className="flex">
|
||||
<div className="w-[35px] h-[35px] bg-gray-100 overflow-hidden rounded-full ">
|
||||
<div>
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 176 176"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="mx-auto mt-[6px]"
|
||||
>
|
||||
<path
|
||||
d="M163 100.475H100.5V162.975C100.5 166.29 99.183 169.47 96.8388 171.814C94.4946 174.158 91.3152 175.475 88 175.475C84.6848 175.475 81.5054 174.158 79.1612 171.814C76.817 169.47 75.5 166.29 75.5 162.975V100.475H13C9.68479 100.475 6.50537 99.1581 4.16117 96.8139C1.81696 94.4697 0.5 91.2903 0.5 87.9751C0.5 84.6599 1.81696 81.4805 4.16117 79.1363C6.50537 76.7921 9.68479 75.4751 13 75.4751H75.5V12.9751C75.5 9.65989 76.817 6.48046 79.1612 4.13626C81.5054 1.79205 84.6848 0.475098 88 0.475098C91.3152 0.475098 94.4946 1.79205 96.8388 4.13626C99.183 6.48046 100.5 9.65989 100.5 12.9751V75.4751H163C166.315 75.4751 169.495 76.7921 171.839 79.1363C174.183 81.4805 175.5 84.6599 175.5 87.9751C175.5 91.2903 174.183 94.4697 171.839 96.8139C169.495 99.1581 166.315 100.475 163 100.475Z"
|
||||
fill="black"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-full text-right rounded-full pr-2">
|
||||
{2 == 2 ? (
|
||||
<>
|
||||
<p className="mb-0 font-bold text-sm absolute right-3 opacity-30 mt-[-5px] text-red-600">
|
||||
<del>
|
||||
<PersianNumber number={150000} style="text-[9px]" />
|
||||
</del>
|
||||
</p>
|
||||
<div className="flex rtl mt-[8px]">
|
||||
{" "}
|
||||
<p className="mb-0 font-bold">
|
||||
<PersianNumber number={150000} />
|
||||
</p>
|
||||
<small className="mr-1 mt-[3px]">تومان</small>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="flex rtl mt-[3px]">
|
||||
{" "}
|
||||
<p className="mb-0 font-bold text-lg">
|
||||
<PersianNumber number={150000} />
|
||||
</p>
|
||||
<small className="mr-1 mt-[6px]">تومان</small>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
{data?.map((e) => (
|
||||
<SwiperSlide>
|
||||
<CardNormal data={e} />
|
||||
</SwiperSlide>
|
||||
))}
|
||||
</Swiper>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,8 @@ import p3 from "../../../public/images/product/3.png";
|
|||
import p4 from "../../../public/images/product/4.png";
|
||||
import CardNormal from "@comp/Cards/CardNormal/page";
|
||||
|
||||
const SurpriseSection = () => {
|
||||
const SurpriseSection = ({ data }) => {
|
||||
console.log("sss injaaaha", data);
|
||||
return (
|
||||
<section className="mb-10 pb-10 xs:bg-red-500 lg:bg-transparent xs:mx-3 lg:mx-0 xs:px-5 lg:px-0 xs:rounded-3xl lg:rounded-[0px] mt-20">
|
||||
<div className=" relative xs:hidden lg:block ">
|
||||
|
|
@ -32,11 +33,11 @@ const SurpriseSection = () => {
|
|||
|
||||
<div className="xs:px-0 lg:px-20">
|
||||
<div className="w-full rtl relative ">
|
||||
<div className="pt-5 flex relative">
|
||||
<div className="pt-5 flex relative justify-between">
|
||||
<p className="mb-0 text-white font-bold xs:text-sm lg:text-2xl xl:text-2xl">
|
||||
پیشنهاد های ویژه امروز{" "}
|
||||
</p>
|
||||
<TimerDown />
|
||||
{/* <TimerDown /> */}
|
||||
</div>
|
||||
</div>
|
||||
<Swiper
|
||||
|
|
@ -63,16 +64,18 @@ const SurpriseSection = () => {
|
|||
},
|
||||
}}
|
||||
>
|
||||
<SwiperSlide>
|
||||
<CardNormal />
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<CardNormal />
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<CardNormal />
|
||||
</SwiperSlide>
|
||||
{data?.map((e) => (
|
||||
<SwiperSlide>
|
||||
<CardNormal data={e} />
|
||||
</SwiperSlide>
|
||||
))}
|
||||
</Swiper>
|
||||
|
||||
<div className="mx-5 mt-8">
|
||||
<p className="mb-0 text-sm text-gray-600 xs:text-white md:text-black">
|
||||
مشاهده بیشتر{" "}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
"use client";
|
||||
import CardCart from "@comp/Cards/CardCart/page";
|
||||
import AppContext from "@ctx/AppContext";
|
||||
import Link from "next/link";
|
||||
import PersianNumber from "plugins/PersianNumber";
|
||||
import React, { useContext, useState } from "react";
|
||||
|
||||
|
|
@ -19,6 +20,14 @@ const CartNavbar = (props) => {
|
|||
<p className="mb-0 text-white">سبد خرید</p>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end">
|
||||
<div className="absolute mt-[-50px] mr-[3px]">
|
||||
<div className="bg-white border-[1px] w-[25px] h-[25px] rounded-full text-center">
|
||||
<PersianNumber number={cart?.length} style={"!text-sm"} />{" "}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{smallBasket && (
|
||||
<div
|
||||
className={`relative !z-[100] tr03 ${
|
||||
|
|
@ -27,7 +36,7 @@ const CartNavbar = (props) => {
|
|||
onMouseEnter={() => setSmallBasket(true)}
|
||||
onMouseLeave={() => setSmallBasket(false)}
|
||||
>
|
||||
<div className="absolute w-[400px] bg-white rounded-xl mt-2 max-h-[450px] overflow-auto mr-[-310px] scroll-1">
|
||||
<div className="absolute w-[400px] bg-white border-[3px] border-gray-100 rounded-xl mt-2 max-h-[450px] overflow-auto mr-[-310px] scroll-1">
|
||||
<div className="text-center p-3">
|
||||
<p className="mb-0 text-sm pb-3">
|
||||
<PersianNumber
|
||||
|
|
@ -56,10 +65,12 @@ const CartNavbar = (props) => {
|
|||
<small className="mr-1 mt-[6px]">تومان</small>
|
||||
</p>
|
||||
</div> */}
|
||||
<button className="btn btn-primary text-sm w-full py-3 rounded-3xl">
|
||||
{" "}
|
||||
ثبت خرید
|
||||
</button>
|
||||
<Link href={"/cart"}>
|
||||
<button className="btn btn-primary text-sm w-full py-3 rounded-3xl">
|
||||
{" "}
|
||||
ثبت خرید
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,18 @@
|
|||
"use client";
|
||||
import Image from "next/image";
|
||||
import React, { useContext } from "react";
|
||||
import React, { useContext, useState } from "react";
|
||||
import logo from "../../../public/images/logo.png";
|
||||
import Link from "next/link";
|
||||
import AppContext from "@ctx/AppContext";
|
||||
|
||||
const SideBarNavBarMobile = () => {
|
||||
const CTX = useContext(AppContext);
|
||||
const [firstChild, setFirstChild] = useState([]);
|
||||
const [firstChildIndex, setFirstChildIndex] = useState(-1);
|
||||
|
||||
const dataNav = CTX.state.navData;
|
||||
|
||||
console.log(firstChild);
|
||||
|
||||
const closeNavbar = CTX.state.closeNavbar;
|
||||
console.log("closeNavbar", closeNavbar);
|
||||
|
|
@ -14,25 +20,40 @@ const SideBarNavBarMobile = () => {
|
|||
<>
|
||||
<div className="sm:block lg:hidden ">
|
||||
<div
|
||||
className={`fixed w-[250px] top-0 right-0 z-50 tr03 ${
|
||||
className={`fixed w-full top-0 right-0 z-50 tr03 ${
|
||||
closeNavbar ? "" : "translate-x-full"
|
||||
} `}
|
||||
>
|
||||
<div
|
||||
className={`absolute mt-2 tr03 z-5 ${
|
||||
closeNavbar ? "ml-[-34px] " : ""
|
||||
}`}
|
||||
className={`absolute mt-2 tr03 z-50 ${closeNavbar ? " " : ""}`}
|
||||
>
|
||||
<div
|
||||
className="w-[30px] h-[30px] bg-white shadow rounded-full text-center "
|
||||
onClick={
|
||||
() => CTX.setCloseNavbar(false)
|
||||
// setOpenResIgType(false) &
|
||||
// setResponsiveNavBarItemStep(0)
|
||||
}
|
||||
></div>
|
||||
className="rounded-full text-center m-2 "
|
||||
onClick={() => {
|
||||
CTX.setCloseNavbar(false);
|
||||
setFirstChildIndex(-1);
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
width="15"
|
||||
height="15"
|
||||
viewBox="0 0 88 151"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="mx-auto opacity-70"
|
||||
>
|
||||
<path
|
||||
d="M12.9525 138.35L75.249 75.6471L12.5462 13.3506"
|
||||
stroke="black"
|
||||
stroke-opacity="0.81"
|
||||
stroke-width="25"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div className=" bg-white h-[100vh] relative overflow-hidden tr03 shadow pt-2 ">
|
||||
<div className=" bg-white h-[100vh] relative tr03 shadow pt-2 overflow-auto ">
|
||||
<div className="text-center">
|
||||
<div className=" bg-dark rounded-full mx-auto ">
|
||||
<div className="text-center">
|
||||
|
|
@ -40,31 +61,87 @@ const SideBarNavBarMobile = () => {
|
|||
<div className="text-center mt-5 ">
|
||||
<Image
|
||||
src={logo}
|
||||
width={50}
|
||||
height={50}
|
||||
width={60}
|
||||
height={60}
|
||||
alt=""
|
||||
className="mx-auto"
|
||||
/>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<Link href="/counseling">
|
||||
<div className="xs:w-full md:w-fit text-center mt-4">
|
||||
<button className=" btn-secondary text-sm px-7 mx-2 mt-2 ">
|
||||
مشاوره رایگان
|
||||
</button>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<Link href="/estimate">
|
||||
<div className="xs:w-full md:w-fit text-center">
|
||||
<button className=" btn-outline-primary text-sm px-7 mx-2 mt-2 ">
|
||||
قیمت تخمین{" "}
|
||||
</button>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<div className="flex justify-center mt-5 px-3">
|
||||
<button className="btn btn-outline-primary rounded-full mx-1 text-sm ">
|
||||
عیدی وسمه چی میشه؟
|
||||
</button>
|
||||
<button className="btn bg-red-700 text-white rounded-full mx-1 text-sm ">
|
||||
بمب امروز{" "}
|
||||
</button>
|
||||
</div>
|
||||
<div className="w-[100px] h-[1px] bg-gray-300 mx-auto mt-4 opacity-50"></div>
|
||||
<div>
|
||||
<ul className="text-right px-5">
|
||||
{dataNav?.map((e, index) => (
|
||||
<li
|
||||
onClick={() => {
|
||||
setFirstChild(dataNav[index].children);
|
||||
setFirstChildIndex(index);
|
||||
}}
|
||||
>
|
||||
<div className="py-3 flex justify-between rtl bg-gray-50 px-1 rounded-lg my-1">
|
||||
<p className="text-sm mb-0 font-bold ">{e.name}</p>
|
||||
|
||||
<div>
|
||||
<svg
|
||||
width="12"
|
||||
height="12"
|
||||
viewBox="0 0 88 151"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="mx-auto opacity-70 rotate-180 mt-1"
|
||||
>
|
||||
<path
|
||||
d="M12.9525 138.35L75.249 75.6471L12.5462 13.3506"
|
||||
stroke="black"
|
||||
stroke-opacity="0.81"
|
||||
stroke-width="25"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{firstChildIndex == index && (
|
||||
<>
|
||||
<ul>
|
||||
<li>
|
||||
<Link
|
||||
href={`/categories/${e.id}`}
|
||||
onClick={() => CTX.setCloseNavbar(false)}
|
||||
>
|
||||
<p className="mb-0 text-sm py-3 px-1 text-gray-700">
|
||||
همه موارد
|
||||
</p>
|
||||
</Link>
|
||||
</li>{" "}
|
||||
{firstChild.map((e) => (
|
||||
<li>
|
||||
<Link
|
||||
href={`/categories/${e.id}`}
|
||||
onClick={() => CTX.setCloseNavbar(false)}
|
||||
>
|
||||
<div className="py-3 flex justify-between rtl px-1 rounded-lg my-1 text-gray-700">
|
||||
<p className="mb-0 text-sm">{e.name}</p>
|
||||
</div>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -15,8 +15,11 @@ import CartNavbar from "./CartNavbar/page";
|
|||
import AppContext from "@ctx/AppContext";
|
||||
import BottomSheetCart from "plugins/bottomSheet/BottomSheetCart";
|
||||
import { BottomSheet } from "react-spring-bottom-sheet";
|
||||
import SearchSideBar from "@comp/Category/Mobile/Component/SearchSideBar/page";
|
||||
|
||||
const Navbar = ({ theme }) => {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
const CTX = useContext(AppContext);
|
||||
const dataNav = CTX.state.navData;
|
||||
const cart = CTX.state.cart;
|
||||
|
|
@ -68,7 +71,7 @@ const Navbar = ({ theme }) => {
|
|||
<div className=" pt-10 tr03">
|
||||
<div className="flex justify-between rtl px-20 ">
|
||||
<div
|
||||
className={`w-[100px] mt-0 py-5 border-b-[2px] relative z-10 ${
|
||||
className={`w-[100px] mt-0 py-5 border-b-[2px] relative z-10 ${
|
||||
theme == 0 ? "border-white" : "border-black"
|
||||
} `}
|
||||
>
|
||||
|
|
@ -80,7 +83,7 @@ const Navbar = ({ theme }) => {
|
|||
<div className="flex rtl py-5 ">
|
||||
{1 == 2 ? (
|
||||
<div className="flex">
|
||||
<div className="bg-white py-2 px-5 rounded-xl text-sm ">
|
||||
<div className="bg-gray-100 py-2 px-5 rounded-xl text-sm ">
|
||||
ورود / عضویت{" "}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -88,7 +91,7 @@ const Navbar = ({ theme }) => {
|
|||
<div className="flex">
|
||||
<div>
|
||||
<div
|
||||
className="bg-white py-2 px-5 rounded-xl text-sm flex cursor-pointer "
|
||||
className="bg-gray-100 py-2 px-5 rounded-xl text-sm flex cursor-pointer "
|
||||
onClick={() => setSmallDashboard(!smallDashboard)}
|
||||
>
|
||||
<p className="mb-0">حسین معصومی پور</p>
|
||||
|
|
@ -103,7 +106,7 @@ const Navbar = ({ theme }) => {
|
|||
onMouseEnter={() => setSmallDashboard(true)}
|
||||
onMouseLeave={() => setSmallDashboard(false)}
|
||||
>
|
||||
<div className="absolute w-[270px] bg-white rounded-xl mt-2 mr-[-87px] overflow-hidden">
|
||||
<div className="absolute w-[270px] bg-gray-100 rounded-xl mt-2 mr-[-87px] overflow-hidden">
|
||||
<div>
|
||||
<ul className="p-2 ">
|
||||
<li className="group cursor-pointer">
|
||||
|
|
@ -163,8 +166,8 @@ const Navbar = ({ theme }) => {
|
|||
|
||||
<div className="px-20">
|
||||
<div
|
||||
className={`w-full h-[1px] mt-4 relative top-[-17px] rounded-full overflow-hidden opacity-10 ${
|
||||
theme == 0 ? "bg-gray-300" : "bg-gray-700"
|
||||
className={`w-full h-[2px] mt-4 relative top-[-17px] rounded-full overflow-hidden opacity-10 ${
|
||||
theme == 0 ? "bg-gray-300" : "bg-gray-500"
|
||||
} `}
|
||||
></div>
|
||||
</div>
|
||||
|
|
@ -178,7 +181,7 @@ const Navbar = ({ theme }) => {
|
|||
: " relative top-[-18px] "
|
||||
}
|
||||
|
||||
${theme == 0 ? "" : "!bg-white"}`}
|
||||
${theme == 0 ? "" : "!bg-gray-100"}`}
|
||||
>
|
||||
<div className="flex rtl">
|
||||
{dataNav?.map((e, index) => (
|
||||
|
|
@ -223,7 +226,7 @@ const Navbar = ({ theme }) => {
|
|||
</div>
|
||||
|
||||
<div
|
||||
className={`block absolute w-full bg-white bottom-[-435px] h-[450px] p-4 rounded-b-2xl tr03 z-50 over`}
|
||||
className={`block absolute w-full bg-gray-100 bottom-[-435px] h-[450px] p-4 rounded-b-2xl tr03 z-50 over`}
|
||||
>
|
||||
<div className="flex rtl">
|
||||
<div className=" mx-2 p-5 w-full ">
|
||||
|
|
@ -329,19 +332,25 @@ const Navbar = ({ theme }) => {
|
|||
{!isDesktop && (
|
||||
<>
|
||||
<div
|
||||
className={` p-5 flex justify-between rtl z-[50] ${
|
||||
isScrolled ? " !fixed top-0 w-full bg-white " : " relative "
|
||||
className={` flex justify-between rtl z-[50] rounded-bl-3xl ${
|
||||
isScrolled
|
||||
? " !fixed top-0 w-full bg-gray-100 p-5"
|
||||
: " relative px-5 pt-5 "
|
||||
} `}
|
||||
>
|
||||
{" "}
|
||||
<div className="w-[90px] z-10 ">
|
||||
<Image src={theme == 0 ? logoWhite : logoBlack} />
|
||||
<div className="w-[70px] mt-[6px] z-10 ">
|
||||
{isScrolled ? (
|
||||
<Image src={theme == 0 ? logoBlack : logoBlack} />
|
||||
) : (
|
||||
<Image src={theme == 0 ? logoWhite : logoBlack} />
|
||||
)}
|
||||
</div>
|
||||
<div className="flex">
|
||||
<div className="flex">
|
||||
{1 == 2 ? (
|
||||
<div className="flex">
|
||||
<div className="bg-white py-2 px-3 rounded-xl text-sm ">
|
||||
<div className="bg-gray-100 py-2 px-3 rounded-xl text-sm ">
|
||||
ورود / عضویت{" "}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -349,7 +358,7 @@ const Navbar = ({ theme }) => {
|
|||
<div className="flex">
|
||||
<div>
|
||||
<div
|
||||
className="bg-white py-2 px-3 rounded-xl text-sm flex cursor-pointer "
|
||||
className="bg-gray-100 py-2 px-3 rounded-xl text-sm flex cursor-pointer "
|
||||
onClick={() => setSmallDashboard(!smallDashboard)}
|
||||
>
|
||||
<p className="mb-0 text-sm">حسین معصومی پور</p>
|
||||
|
|
@ -363,7 +372,7 @@ const Navbar = ({ theme }) => {
|
|||
onMouseEnter={() => setSmallDashboard(true)}
|
||||
onMouseLeave={() => setSmallDashboard(false)}
|
||||
>
|
||||
<div className="absolute w-[270px] bg-white rounded-xl mt-2 mr-[-87px] overflow-hidden">
|
||||
<div className="absolute w-[270px] bg-gray-100 rounded-xl mt-2 mr-[-87px] overflow-hidden">
|
||||
<div>
|
||||
<ul className="p-2 ">
|
||||
<li className="group cursor-pointer">
|
||||
|
|
@ -420,15 +429,23 @@ const Navbar = ({ theme }) => {
|
|||
|
||||
<div
|
||||
className="mx-2 mt-2"
|
||||
onClick={() => CTX.setBottomSheetCart(true)}
|
||||
onClick={() => CTX.setBottomSheetCartOpen(true)}
|
||||
>
|
||||
<div className="absolute mt-[-15px] mr-[6px] ">
|
||||
<div className="">
|
||||
<PersianNumber
|
||||
number={cart?.length}
|
||||
style={"!text-[10px] text-primary-900 font-bold"}
|
||||
/>
|
||||
</div>
|
||||
<div className="absolute mt-[-16px] mr-[6px] ">
|
||||
{cart?.length > 0 && (
|
||||
<div className="">
|
||||
<PersianNumber
|
||||
number={cart?.length}
|
||||
style={`!text-[10px] text-primary-900 font-bold ${
|
||||
theme == 1
|
||||
? "text-primary-500"
|
||||
: isScrolled
|
||||
? "text-primary-500"
|
||||
: "text-white"
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<svg
|
||||
width="20"
|
||||
|
|
@ -440,13 +457,17 @@ const Navbar = ({ theme }) => {
|
|||
>
|
||||
<path
|
||||
d="M18.4371 138.212C9.46208 96.3 4.96208 75.3375 16.2246 61.425C27.4746 47.5 48.9121 47.5 91.7746 47.5H156.225C199.1 47.5 220.512 47.5 231.775 61.425C243.025 75.35 238.537 96.3 229.562 138.212L224.2 163.212C218.112 191.625 215.075 205.825 204.762 214.163C194.45 222.5 179.925 222.5 150.875 222.5H97.1246C68.0746 222.5 53.5496 222.5 43.2496 214.163C32.9246 205.825 29.8746 191.625 23.7996 163.212L18.4371 138.212Z"
|
||||
stroke="black"
|
||||
stroke={
|
||||
isScrolled ? "black" : theme == 1 ? "black" : "white"
|
||||
}
|
||||
stroke-width="18.75"
|
||||
/>
|
||||
<path
|
||||
opacity="0.6"
|
||||
d="M199 85L161.5 10M49 85L86.5 10"
|
||||
stroke="black"
|
||||
stroke={
|
||||
isScrolled ? "black" : theme == 1 ? "black" : "white"
|
||||
}
|
||||
stroke-width="18.75"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
|
|
@ -455,6 +476,8 @@ const Navbar = ({ theme }) => {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<SearchSideBar />
|
||||
<BottomSheetCart />
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import Link from "next/link";
|
|||
import PersianNumber from "plugins/PersianNumber";
|
||||
|
||||
const TimerDown = () => {
|
||||
const targetTimestamp = 1704170967 * 1000; // Convert to milliseconds
|
||||
const targetTimestamp = 1707629566 * 1000; // Convert to milliseconds
|
||||
|
||||
const [timeRemaining, setTimeRemaining] = useState({
|
||||
days: 0,
|
||||
|
|
|
|||
|
|
@ -1,4 +1,9 @@
|
|||
/** @type {import('next').NextConfig} */
|
||||
const nextConfig = {}
|
||||
const nextConfig = {
|
||||
reactStrictMode: false, // React Strict Mode is off
|
||||
images: {
|
||||
domains: ["storage.vesmook.com"],
|
||||
},
|
||||
};
|
||||
|
||||
module.exports = nextConfig
|
||||
module.exports = nextConfig;
|
||||
|
|
|
|||
|
|
@ -7,12 +7,29 @@ import p3 from "../../public/images/product/3.png";
|
|||
import p4 from "../../public/images/product/4.png";
|
||||
import Image from "next/image";
|
||||
|
||||
const GalleryBox = () => {
|
||||
const GalleryBox = ({ file }) => {
|
||||
console.log(file && file[0]?.fileLocation);
|
||||
return (
|
||||
<div className=" w-full rounded-3xl">
|
||||
<div className="flex justify-center xs:pb-[10px] lg:py-10">
|
||||
<div className="xs:w-[190px] lg:w-[290px]">
|
||||
<Image src={p4} />
|
||||
{!!file ? (
|
||||
<Image
|
||||
src={`${process.env.NEXT_PUBLIC_STORAGE_URL}/${
|
||||
file && file[0].fileLocation
|
||||
}`}
|
||||
width={500}
|
||||
height={500}
|
||||
className="xs:!w-[110px] lg:!w-[130px] mx-auto !object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="xs:!w-[85px] lg:!w-[85px] ">
|
||||
{/* <Image
|
||||
src={logo}
|
||||
className="xs:!w-[70px] lg:!w-[70px] mx-auto !object-cover opacity-25 mt-5"
|
||||
/> */}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,23 +1,58 @@
|
|||
"use client";
|
||||
|
||||
import CardCart from "@comp/Cards/CardCart/page";
|
||||
import AppContext from "@ctx/AppContext";
|
||||
import Link from "next/link";
|
||||
import PersianNumber from "plugins/PersianNumber";
|
||||
import React, { useContext } from "react";
|
||||
import { BottomSheet } from "react-spring-bottom-sheet";
|
||||
import { toast } from "react-toastify";
|
||||
|
||||
const BottomSheetCart = (props) => {
|
||||
const CTX = useContext(AppContext);
|
||||
const cart = CTX.state.cart;
|
||||
|
||||
return (
|
||||
<BottomSheet
|
||||
open={CTX.state.bottomSheetCart}
|
||||
onDismiss={() => CTX.setBottomSheetCart(false)}
|
||||
open={CTX.state.bottomSheetCartOpen}
|
||||
onDismiss={() => CTX.setBottomSheetCartOpen(false)}
|
||||
className={"z-50 relative"}
|
||||
>
|
||||
<div className="text-center py-2 bg-primary-300 ">
|
||||
<p className="mb-0 text-white relative top-[-5px]">افزودن نقش جدید</p>
|
||||
<div className="text-center p-3">
|
||||
<p className="mb-0 text-sm pb-3">
|
||||
<PersianNumber
|
||||
number={cart?.length}
|
||||
style="text-xl font-bold text-base font-bold mx-2 !text-primary-500"
|
||||
/>
|
||||
محصول موجود در سبد
|
||||
</p>
|
||||
|
||||
{/* <div className="w-5/12 mx-auto h-[1px] bg-gray-200 my-3"></div> */}
|
||||
<div>
|
||||
{cart.map((e) => (
|
||||
<CardCart data={e} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-body-100 p-4"></div>
|
||||
<div className="w-full p-3 ">
|
||||
{/* <div className="">
|
||||
<p className="mb-0 text-sm p-3">
|
||||
جمع کل :
|
||||
<PersianNumber
|
||||
number={2546385}
|
||||
style="text-lg mr-2 font-bold text-gray-500"
|
||||
/>
|
||||
<small className="mr-1 mt-[6px]">تومان</small>
|
||||
</p>
|
||||
</div> */}
|
||||
<Link href={"/cart"}>
|
||||
<button className="btn btn-primary text-sm w-full py-3 rounded-3xl">
|
||||
{" "}
|
||||
ثبت خرید
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
</BottomSheet>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,41 @@
|
|||
"use client";
|
||||
|
||||
import CardCart from "@comp/Cards/CardCart/page";
|
||||
import AppContext from "@ctx/AppContext";
|
||||
import Link from "next/link";
|
||||
import PersianNumber from "plugins/PersianNumber";
|
||||
import React, { useContext } from "react";
|
||||
import { BottomSheet } from "react-spring-bottom-sheet";
|
||||
import { toast } from "react-toastify";
|
||||
|
||||
const BottomSheetDiscount = (props) => {
|
||||
const CTX = useContext(AppContext);
|
||||
const cart = CTX.state.cart;
|
||||
|
||||
return (
|
||||
<BottomSheet
|
||||
open={CTX.state.bottomSheetDiscountOpen}
|
||||
onDismiss={() => CTX.setBottomSheetDiscountOpen(false)}
|
||||
className={"z-50 relative"}
|
||||
>
|
||||
<div className="text-center p-3">
|
||||
<p className="mb-0 text-sm pb-3">افزودن کد تخفیف </p>
|
||||
</div>
|
||||
|
||||
<div className="p-3">
|
||||
<input
|
||||
type="text"
|
||||
className="form-control bg-white !border-[1px] focus:!border-[1px] border-gray-400 focus:!border-gray-300 rounded-lg text-right !text-sm tr03 "
|
||||
placeholder="کد را وارد کنید"
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full p-3 ">
|
||||
<button className="btn btn-primary text-sm w-full py-3 rounded-3xl">
|
||||
برسی کد تخفیف{" "}
|
||||
</button>
|
||||
</div>
|
||||
</BottomSheet>
|
||||
);
|
||||
};
|
||||
|
||||
export default BottomSheetDiscount;
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
"use client";
|
||||
|
||||
import CardCart from "@comp/Cards/CardCart/page";
|
||||
import FilterCategory from "@comp/Category/FilterCategory/page";
|
||||
import AppContext from "@ctx/AppContext";
|
||||
import PersianNumber from "plugins/PersianNumber";
|
||||
import React, { useContext } from "react";
|
||||
import { BottomSheet } from "react-spring-bottom-sheet";
|
||||
import { toast } from "react-toastify";
|
||||
|
||||
const BottomSheetFilter = ({ data }) => {
|
||||
const CTX = useContext(AppContext);
|
||||
const cart = CTX.state.cart;
|
||||
|
||||
return (
|
||||
<BottomSheet
|
||||
open={CTX.state.bottomSheetFilterOpen}
|
||||
onDismiss={() => CTX.setBottomSheetFilterOpen(false)}
|
||||
className={"z-50 relative"}
|
||||
>
|
||||
<div className="text-center p-3">
|
||||
<FilterCategory
|
||||
id={data.id}
|
||||
isChecked={data.isChecked}
|
||||
setIsChecked={data.setIsChecked}
|
||||
selectedBrands={data.selectedBrands}
|
||||
setSelectedBrands={data.setSelectedBrands}
|
||||
rangePrice={data.rangePrice}
|
||||
setRangePrice={data.setRangePrice}
|
||||
sortBy={data.sortBy}
|
||||
setIsRangePrice={data.setIsRangePrice}
|
||||
isRangePrice={data.isRangePrice}
|
||||
theme={2}
|
||||
/>
|
||||
</div>
|
||||
</BottomSheet>
|
||||
);
|
||||
};
|
||||
|
||||
export default BottomSheetFilter;
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.1 KiB After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
|
|
@ -0,0 +1,173 @@
|
|||
import Footer from "@comp/Footer/page";
|
||||
import Navbar from "@comp/Navbar/page";
|
||||
import PersianNumber from "plugins/PersianNumber";
|
||||
import React from "react";
|
||||
|
||||
const page = () => {
|
||||
const number = "02188195164";
|
||||
return (
|
||||
<>
|
||||
<div className="bg-contact-us !min-h-[100vh]">
|
||||
<div className=" pb-20">
|
||||
<Navbar theme={0} />
|
||||
|
||||
<div>
|
||||
<div className="flex justify-center xs:hidden lg:block">
|
||||
<div className="absolute mr-[-1100px] mt-[-200px]">
|
||||
<p className="mb-0 text-[300px] opacity-10 font-extrabold text-white ">
|
||||
{" "}
|
||||
,
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-[150px] ">
|
||||
<div className="px-5">
|
||||
<h1 className="text-white font-bold text-center xs:text-[20px] lg:text-[40px]">
|
||||
وسمه ، بن ماضی زیبایی
|
||||
</h1>
|
||||
|
||||
<p className="mb-0 text-base text-center text-gray-100 xs:text-sm lg:text-base lg:w-7/12 mx-auto">
|
||||
وسمه تهعد داره تجربه خرید لوازم آرایشی و بهداشتی رو متحول کنه.
|
||||
این تحول میتونه برای مشتری احساس قسمتی از خانواده وسمه بودن رو
|
||||
داشته باشه. وسمه با برطرف کردن دغدغههای خرید لوازم آرایشی و
|
||||
بهداشتی به ساختن لایف استایل شخصی خانمهای ایرانی کمک میکنه و
|
||||
زندگی راحتتری پیش روی مشتریانش قرار میده. از سال 1400 ما تمام
|
||||
انرژیمون رو به کار گرفتیم تا با تمرکز برکیفیت کالا، سرعت ارسال و
|
||||
قیمت کالا ، نیاز افراد رو برطرف کنیم و تجربه جدیدی از لذت خرید
|
||||
به وجود بیاریم.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="xs:w-11/12 lg:w-7/12 mx-auto mt-10">
|
||||
<div className="grid xs:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div className="bg-white rounded-xl p-5">
|
||||
<div className="my-3">
|
||||
<h2 className="text-primary-500 font-medium text-right mb-0">
|
||||
جوایز و تقدیر
|
||||
</h2>
|
||||
|
||||
<p className="mb-0 text-sm text-right text-gray-400 mt-2">
|
||||
ما مفتخریم که به خاطر کاری که هر روز از طرف مشتریان،
|
||||
کارمندان و جوامع خود انجام می دهیم، مورد تقدیر قرار می
|
||||
گیریم.
|
||||
</p>
|
||||
|
||||
<div className="mt-2">
|
||||
<button className="btn btn-outline-primary text-sm rounded-full py-1">
|
||||
{" "}
|
||||
مشاهده بیشتر
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-white rounded-xl p-5">
|
||||
<div className="my-3">
|
||||
<h2 className="text-primary-500 font-medium text-right mb-0">
|
||||
موقعیت های ما
|
||||
</h2>
|
||||
|
||||
<p className="mb-0 text-sm text-right text-gray-400 mt-2">
|
||||
در حالی که مواضع ما به دقت مورد بررسی قرار می گیرد و
|
||||
عمیقاً حفظ می شود، فضای زیادی برای بحث سالم و نظرات متفاوت
|
||||
وجود دارد. ما امیدواریم که شفاف بودن در مورد مواضع ما مفید
|
||||
باشد.
|
||||
</p>
|
||||
|
||||
<div className="mt-2">
|
||||
<button className="btn btn-outline-primary text-sm rounded-full py-1">
|
||||
{" "}
|
||||
مشاهده بیشتر
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-white rounded-xl p-5">
|
||||
<div className="my-3">
|
||||
<h2 className="text-primary-500 font-medium text-right mb-0">
|
||||
سیاست عمومی{" "}
|
||||
</h2>
|
||||
|
||||
<p className="mb-0 text-sm text-right text-gray-400 mt-2">
|
||||
ما با سیاستگذاران در مورد طیف وسیعی از موضوعاتی که برای
|
||||
مشتریان و کارمندان ما مهم است، تعامل داریم. درباره نظرات
|
||||
ما در مورد مسائل جاری سیاست بیشتر بیاموزید.
|
||||
</p>
|
||||
|
||||
<div className="mt-2">
|
||||
<button className="btn btn-outline-primary text-sm rounded-full py-1">
|
||||
{" "}
|
||||
مشاهده بیشتر
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-white rounded-xl p-5">
|
||||
<div className="my-3">
|
||||
<h2 className="text-primary-500 font-medium text-right mb-0">
|
||||
اصول رهبری
|
||||
</h2>
|
||||
|
||||
<p className="mb-0 text-sm text-right text-gray-400 mt-2">
|
||||
اصول رهبری ما چیزی فراتر از دیوارکوب های الهام بخش است.
|
||||
این 16 اصل، هر روز بحث ها و تصمیمات ما را هدایت می کن
|
||||
</p>
|
||||
|
||||
<div className="mt-2">
|
||||
<button className="btn btn-outline-primary text-sm rounded-full py-1">
|
||||
{" "}
|
||||
مشاهده بیشتر
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className=" xs:px-3 lg:px-20 lg:flex rtl lg:m-10 xs:m-3 pb-20 ">
|
||||
<div>
|
||||
<h2 className="mb-0 text-right font-semibold xs:text-[17px] lg:text-[20px] my-2 ">
|
||||
موقعیت های ما در وسمه
|
||||
</h2>
|
||||
<p className="mb-0 text-right xs:text-sm lg:text-base">
|
||||
فروشگاه ما به عنوان یک منبع قابل اعتماد برای خرید لوازم آرایشی و
|
||||
زیبایی، به شفافیت و صداقت ارزشمندی میدهد. ما به دقت مواضع و
|
||||
ارزشهایمان را تعیین کردهایم و همواره به دنبال بهبود و توسعه آنها
|
||||
هستیم. همچنین، در فضای ما، به نظرات و دیدگاههای مختلف احترام
|
||||
میگذاریم و فضایی را برای بحث سالم و تبادل نظر فراهم میکنیم. با
|
||||
ایجاد این امکان، ما امیدواریم که از تنوع نظرات و دیدگاهها بهرهمند
|
||||
شویم و از این طریق، به تصمیمات بهتری برای رشد و پیشرفت فروشگاهمان
|
||||
برسیم. با شفافیت، احترام به نظرات متفاوت و توجه به مواضع ما، ما به
|
||||
ایجاد یک جامعه پویا و پایدار از مشتریان و مشتریان آیندهی خود تلاش
|
||||
میکنیم
|
||||
</p>
|
||||
|
||||
<h2 className="mb-0 text-right font-semibold xs:text-[17px] lg:text-[20px] my-2 mt-5 ">
|
||||
جوایز و تقدیر در وسمه
|
||||
</h2>
|
||||
<p className="mb-0 text-right xs:text-sm lg:text-base">
|
||||
ما در "وسمه" مفتخریم که به خاطر کاری که هر روز از طرف مشتریان،
|
||||
کارمندان و جوامع خود انجام میدهیم، مورد تقدیر قرار میگیریم. این
|
||||
تقدیر و اعترافها، نشان از ارزشی است که ما برای ارتباط مستمر و
|
||||
صادقانه با همهی اعضای جامعهی ما قائل هستیم. همهی تلاش ما در
|
||||
"وسمه" به منظور ارائهی بهترین تجربهی ممکن برای مشتریان عزیزمان
|
||||
است. از انتخاب محصولات با کیفیت تا ارائهی خدمات استثنایی، ما به دقت
|
||||
به نیازها و خواستههای شما توجه میکنیم تا اطمینان حاصل شود که هرگز
|
||||
از "وسمه" ناراضی نخواهید شد. با تمام وجود و انگیزهی بیپایان، ما به
|
||||
ارتقاء محصولات و خدماتمان ادامه میدهیم تا همیشه بهترین را برای شما
|
||||
فراهم کنیم. وعدهی ما این است که در "وسمه" همیشه یک محیط پذیرایی،
|
||||
احترام و نوآوری برای شما وجود داشته باشد
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default page;
|
||||
|
|
@ -0,0 +1,426 @@
|
|||
"use client";
|
||||
import NavBarDownCart from "@comp/Carts/component/NavBarDownCart/page";
|
||||
import Navbar from "@comp/Navbar/page";
|
||||
import PersianNumber from "plugins/PersianNumber";
|
||||
import React, { useContext, useEffect } from "react";
|
||||
|
||||
import zarin from "@img/zarin.png";
|
||||
import ap from "@img/ap.png";
|
||||
import Image from "next/image";
|
||||
import AppContext from "@ctx/AppContext";
|
||||
import BottomSheetDiscount from "plugins/bottomSheet/BottomSheetDiscount";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
const page = () => {
|
||||
const CTX = useContext(AppContext);
|
||||
const router = useRouter();
|
||||
const checkOutData = CTX.state.checkOutData;
|
||||
|
||||
console.log(checkOutData);
|
||||
|
||||
useEffect(() => {
|
||||
if (CTX.state.checkOutData.length <= 0) {
|
||||
router.push("/cart");
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className=" pb-20">
|
||||
<Navbar theme={1} />
|
||||
|
||||
<div className="text-right flex rtl justify-between border-y-[1px] border-gray-100 mt-3 px-4 ">
|
||||
<p className="mb-0 !text-sm font-semibold py-4">آدس ها</p>
|
||||
|
||||
<div className="bg-primary-200 w-fit h-fit relative my-3 p-1 rounded-lg">
|
||||
<p className="mb-0 text-[11px] text-white rtl">تغییر آدرس</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex rtl px-3 mt-3">
|
||||
<div>
|
||||
<svg
|
||||
width="25"
|
||||
height="25"
|
||||
viewBox="0 0 234 244"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="mx-auto opacity-70 mt-2"
|
||||
>
|
||||
<path
|
||||
d="M65.8246 162.813C66.1529 163.999 66.7117 165.11 67.4692 166.081C68.2267 167.052 69.168 167.864 70.2394 168.471C71.3107 169.078 72.4911 169.468 73.7133 169.619C74.9354 169.77 76.1752 169.678 77.3621 169.35C78.5489 169.022 79.6594 168.463 80.6303 167.705C81.6011 166.948 82.4133 166.007 83.0203 164.935C83.6274 163.864 84.0175 162.683 84.1683 161.461C84.3192 160.239 84.2279 158.999 83.8996 157.813L65.8246 162.813ZM11.9996 31.0625C10.8081 30.7145 9.55935 30.6066 8.32582 30.745C7.09228 30.8834 5.89851 31.2654 4.81377 31.8688C3.72903 32.4722 2.77491 33.285 2.00678 34.26C1.23864 35.2351 0.671788 36.353 0.3391 37.5488C0.00641134 38.7447 -0.0854865 39.9947 0.0687392 41.2264C0.222965 42.458 0.620244 43.6468 1.23752 44.7237C1.8548 45.8006 2.6798 46.7442 3.66463 47.4997C4.64947 48.2553 5.77454 48.8077 6.97458 49.125L11.9996 31.0625ZM224.35 168.563C225.57 168.28 226.722 167.756 227.737 167.021C228.752 166.286 229.609 165.355 230.257 164.284C230.906 163.212 231.334 162.021 231.515 160.781C231.695 159.541 231.626 158.278 231.31 157.065C230.994 155.853 230.438 154.716 229.676 153.722C228.913 152.728 227.959 151.897 226.869 151.278C225.78 150.659 224.578 150.264 223.333 150.118C222.089 149.971 220.828 150.076 219.625 150.425L224.35 168.563ZM99.4621 191.488C103.337 205.488 94.8371 220.275 79.7871 224.188L84.4996 242.325C109.212 235.913 124.312 211.05 117.537 186.488L99.4621 191.488ZM79.7871 224.188C64.6371 228.125 49.4371 219.325 45.5371 205.2L27.4621 210.2C34.2121 234.638 59.8871 248.725 84.4996 242.325L79.7871 224.188ZM45.5371 205.2C41.6621 191.2 50.1621 176.413 65.2121 172.5L60.4996 154.375C35.7871 160.788 20.6746 185.638 27.4621 210.2L45.5371 205.2ZM65.2121 172.5C80.3621 168.563 95.5621 177.363 99.4621 191.488L117.537 186.488C110.787 162.05 85.1121 147.963 60.4996 154.363L65.2121 172.5ZM83.8996 157.813L56.9996 60.4375L38.9246 65.4375L65.8246 162.813L83.8996 157.813ZM33.2996 36.9625L11.9996 31.0625L6.97458 49.125L28.2871 55.0375L33.2996 36.9625ZM56.9996 60.4375C55.4136 54.8107 52.3969 49.6907 48.2434 45.5766C44.0899 41.4625 38.9413 38.4948 33.2996 36.9625L28.3121 55.0375C33.6246 56.5125 37.5746 60.55 38.9246 65.4375L56.9996 60.4375ZM110.875 198.063L224.35 168.563L219.637 150.425L106.15 179.925L110.875 198.063Z"
|
||||
fill="black"
|
||||
/>
|
||||
<path
|
||||
d="M211.562 49.9502C205.5 28.0002 202.462 17.0252 193.562 12.0377C184.637 7.03772 173.325 9.98772 150.7 15.8752L126.7 22.1002C104.075 27.9752 92.7623 30.9252 87.6248 39.5752C82.4748 48.2127 85.4998 59.1877 91.5623 81.1252L97.9998 104.413C104.062 126.35 107.087 137.325 116 142.313C124.912 147.313 136.225 144.363 158.85 138.488L182.85 132.238C205.475 126.363 216.787 123.425 221.937 114.788C224.762 110.038 225.125 104.588 223.862 97.0002"
|
||||
stroke="black"
|
||||
stroke-opacity="0.44"
|
||||
stroke-width="18.75"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="mx-2">
|
||||
<p className="mb-0 text-sm text-right font-medium text-primary-500 ">
|
||||
آدرس شما{" "}
|
||||
</p>
|
||||
<p className="mb-0 text-[12px] text-gray-500">
|
||||
{" "}
|
||||
تهران ، نارمک ، فلکه پنجم پلاک 5 ، واحد 22
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-right flex rtl justify-between border-y-[1px] border-gray-100 mt-3 px-4 ">
|
||||
<p className="mb-0 text-sm font-semibold py-4">زمان و نحوه ارسال</p>
|
||||
|
||||
<div className="border border-gray-300 w-fit h-fit relative my-3 p-1 rounded-lg">
|
||||
<div className="flex">
|
||||
<div>
|
||||
<svg
|
||||
width="15"
|
||||
height="15"
|
||||
viewBox="0 0 251 200"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="opacity-60"
|
||||
>
|
||||
<path
|
||||
d="M105.625 143.75C110.625 148.75 117.083 151.2 125 151.1C132.917 151 138.75 148.133 142.5 142.5L212.5 37.5L107.5 107.5C101.875 111.25 98.9083 116.979 98.6 124.688C98.2917 132.396 100.633 138.75 105.625 143.75ZM125 0C137.292 0 149.117 1.71667 160.475 5.15C171.833 8.58334 182.508 13.7417 192.5 20.625L168.75 35.625C161.875 32.0833 154.742 29.4292 147.35 27.6625C139.958 25.8958 132.508 25.0083 125 25C97.2917 25 73.6958 34.7417 54.2125 54.225C34.7292 73.7083 24.9917 97.3 25 125C25 133.75 26.2 142.396 28.6 150.938C31 159.479 34.3833 167.5 38.75 175H211.25C216.042 167.083 219.533 158.854 221.725 150.312C223.917 141.771 225.008 132.917 225 123.75C225 116.25 224.113 108.958 222.338 101.875C220.563 94.7917 217.908 87.9167 214.375 81.25L229.375 57.5C235.625 67.2917 240.575 77.7083 244.225 88.75C247.875 99.7917 249.8 111.25 250 123.125C250.208 135 248.854 146.354 245.938 157.188C243.021 168.021 238.75 178.333 233.125 188.125C230.833 191.875 227.708 194.792 223.75 196.875C219.792 198.958 215.625 200 211.25 200H38.75C34.375 200 30.2083 198.958 26.25 196.875C22.2917 194.792 19.1667 191.875 16.875 188.125C11.4583 178.75 7.29167 168.804 4.375 158.288C1.45833 147.771 0 136.675 0 125C0 107.708 3.28334 91.5125 9.85 76.4125C16.4167 61.3125 25.375 48.0833 36.725 36.725C48.075 25.3667 61.35 16.4083 76.55 9.85C91.75 3.29167 107.9 0.00833333 125 0Z"
|
||||
fill="black"
|
||||
fill-opacity="0.61"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<p className="mb-0 text-[11px] rtl mr-2 text-gray-600">
|
||||
سریع ترین زمان ارسال
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="flex rtl px-3 mt-5">
|
||||
<div>
|
||||
<svg
|
||||
width="25"
|
||||
height="25"
|
||||
viewBox="0 0 226 176"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="opacity-70 mt-2"
|
||||
>
|
||||
<path
|
||||
d="M138 163C158.833 163 176.542 155.708 191.125 141.125C205.708 126.542 213 108.833 213 88C213 66.9583 205.342 49.2 190.025 34.725C174.708 20.25 156.325 13.0083 134.875 13C122.792 13 111.458 14.4667 100.875 17.4C90.3083 20.3333 80.1667 24.7333 70.45 30.6L107.475 45.025C114.725 48.0833 120.583 52.8292 125.05 59.2625C129.517 65.6958 131.75 72.775 131.75 80.5C131.75 91.4 128.029 100.583 120.588 108.05C113.138 115.517 104.15 119.25 93.625 119.25H15.55C14.65 123.608 14 128.525 13.6 134C13.2 139.475 13 146.579 13 155.313C13 157.229 13.8 158.992 15.4 160.6C17.0083 162.2 18.7708 163 20.6875 163H138ZM17.525 106.75H93C100.392 106.75 106.612 104.221 111.662 99.1625C116.721 94.1125 119.25 87.8917 119.25 80.5C119.25 75.2583 117.792 70.5042 114.875 66.2375C111.975 61.9625 107.983 58.7542 102.9 56.6125L58.575 38.8C48.5417 47.325 40.0583 57.3208 33.125 68.7875C26.1667 80.2625 20.9667 92.9167 17.525 106.75ZM138 175.5H20.6875C14.9375 175.5 10.1375 173.575 6.2875 169.725C2.42917 165.867 0.5 161.063 0.5 155.313V145.938C0.5 124.554 3.79167 104.958 10.375 87.15C16.9583 69.3333 26.1875 54.0125 38.0625 41.1875C49.9292 28.3542 64.0958 18.3667 80.5625 11.225C97.0542 4.075 115.158 0.5 134.875 0.5C147.275 0.5 158.967 2.78333 169.95 7.35C180.925 11.9167 190.538 18.1292 198.788 25.9875C207.038 33.8542 213.554 43.1042 218.338 53.7375C223.113 64.3958 225.5 75.8167 225.5 88C225.5 99.9833 223.217 111.308 218.65 121.975C214.083 132.642 207.829 141.946 199.888 149.888C191.946 157.829 182.683 164.079 172.1 168.638C161.517 173.213 150.15 175.5 138 175.5Z"
|
||||
fill="black"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="mx-2">
|
||||
<h3 className="mb-0 text-sm text-right font-medium text-primary-500 ">
|
||||
ارسال با پیک (فقط محدوده تهران){" "}
|
||||
</h3>
|
||||
<p className="mb-0 text-[12px] text-gray-500">
|
||||
{" "}
|
||||
<PersianNumber number={5} style={"text-gray-500 mx-1"} />
|
||||
ساعت
|
||||
<small className="mx-2">|</small>
|
||||
هزینه ارسال
|
||||
<PersianNumber number={150} style={"text-gray-500 mx-1"} />
|
||||
هزار تومان
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex rtl px-3 mt-5">
|
||||
<div>
|
||||
<svg
|
||||
width="25"
|
||||
height="25"
|
||||
viewBox="0 0 220 220"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="mt-1 opacity-70"
|
||||
>
|
||||
<path
|
||||
d="M72.5 10V47.5C72.5 54.1304 69.8661 60.4893 65.1777 65.1777C60.4893 69.8661 54.1304 72.5 47.5 72.5H10M147.5 210V172.5C147.5 165.87 150.134 159.511 154.822 154.822C159.511 150.134 165.87 147.5 172.5 147.5H210M210 72.5H172.5C165.87 72.5 159.511 69.8661 154.822 65.1777C150.134 60.4893 147.5 54.1304 147.5 47.5V10M10 147.5H47.5C54.1304 147.5 60.4893 150.134 65.1777 154.822C69.8661 159.511 72.5 165.87 72.5 172.5V210"
|
||||
stroke="black"
|
||||
stroke-opacity="0.79"
|
||||
stroke-width="18.75"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="mx-2">
|
||||
<h3 className="mb-0 text-sm text-right font-medium text-primary-500 ">
|
||||
پست عادی{" "}
|
||||
</h3>
|
||||
<p className="mb-0 text-[12px] text-gray-500">
|
||||
{" "}
|
||||
حداکثر
|
||||
<PersianNumber number={5} style={"text-gray-600 mx-1"} />
|
||||
روز کاری
|
||||
<small className="mx-2">|</small>
|
||||
هزینه ارسال
|
||||
<PersianNumber number={30} style={"text-gray-600 mx-1"} />
|
||||
هزار تومان
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex rtl px-3 mt-5">
|
||||
<div>
|
||||
<svg
|
||||
width="25"
|
||||
height="25"
|
||||
viewBox="0 0 234 244"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="mx-auto opacity-70 mt-2"
|
||||
>
|
||||
<path
|
||||
d="M65.8246 162.813C66.1529 163.999 66.7117 165.11 67.4692 166.081C68.2267 167.052 69.168 167.864 70.2394 168.471C71.3107 169.078 72.4911 169.468 73.7133 169.619C74.9354 169.77 76.1752 169.678 77.3621 169.35C78.5489 169.022 79.6594 168.463 80.6303 167.705C81.6011 166.948 82.4133 166.007 83.0203 164.935C83.6274 163.864 84.0175 162.683 84.1683 161.461C84.3192 160.239 84.2279 158.999 83.8996 157.813L65.8246 162.813ZM11.9996 31.0625C10.8081 30.7145 9.55935 30.6066 8.32582 30.745C7.09228 30.8834 5.89851 31.2654 4.81377 31.8688C3.72903 32.4722 2.77491 33.285 2.00678 34.26C1.23864 35.2351 0.671788 36.353 0.3391 37.5488C0.00641134 38.7447 -0.0854865 39.9947 0.0687392 41.2264C0.222965 42.458 0.620244 43.6468 1.23752 44.7237C1.8548 45.8006 2.6798 46.7442 3.66463 47.4997C4.64947 48.2553 5.77454 48.8077 6.97458 49.125L11.9996 31.0625ZM224.35 168.563C225.57 168.28 226.722 167.756 227.737 167.021C228.752 166.286 229.609 165.355 230.257 164.284C230.906 163.212 231.334 162.021 231.515 160.781C231.695 159.541 231.626 158.278 231.31 157.065C230.994 155.853 230.438 154.716 229.676 153.722C228.913 152.728 227.959 151.897 226.869 151.278C225.78 150.659 224.578 150.264 223.333 150.118C222.089 149.971 220.828 150.076 219.625 150.425L224.35 168.563ZM99.4621 191.488C103.337 205.488 94.8371 220.275 79.7871 224.188L84.4996 242.325C109.212 235.913 124.312 211.05 117.537 186.488L99.4621 191.488ZM79.7871 224.188C64.6371 228.125 49.4371 219.325 45.5371 205.2L27.4621 210.2C34.2121 234.638 59.8871 248.725 84.4996 242.325L79.7871 224.188ZM45.5371 205.2C41.6621 191.2 50.1621 176.413 65.2121 172.5L60.4996 154.375C35.7871 160.788 20.6746 185.638 27.4621 210.2L45.5371 205.2ZM65.2121 172.5C80.3621 168.563 95.5621 177.363 99.4621 191.488L117.537 186.488C110.787 162.05 85.1121 147.963 60.4996 154.363L65.2121 172.5ZM83.8996 157.813L56.9996 60.4375L38.9246 65.4375L65.8246 162.813L83.8996 157.813ZM33.2996 36.9625L11.9996 31.0625L6.97458 49.125L28.2871 55.0375L33.2996 36.9625ZM56.9996 60.4375C55.4136 54.8107 52.3969 49.6907 48.2434 45.5766C44.0899 41.4625 38.9413 38.4948 33.2996 36.9625L28.3121 55.0375C33.6246 56.5125 37.5746 60.55 38.9246 65.4375L56.9996 60.4375ZM110.875 198.063L224.35 168.563L219.637 150.425L106.15 179.925L110.875 198.063Z"
|
||||
fill="black"
|
||||
/>
|
||||
<path
|
||||
d="M211.562 49.9502C205.5 28.0002 202.462 17.0252 193.562 12.0377C184.637 7.03772 173.325 9.98772 150.7 15.8752L126.7 22.1002C104.075 27.9752 92.7623 30.9252 87.6248 39.5752C82.4748 48.2127 85.4998 59.1877 91.5623 81.1252L97.9998 104.413C104.062 126.35 107.087 137.325 116 142.313C124.912 147.313 136.225 144.363 158.85 138.488L182.85 132.238C205.475 126.363 216.787 123.425 221.937 114.788C224.762 110.038 225.125 104.588 223.862 97.0002"
|
||||
stroke="black"
|
||||
stroke-opacity="0.44"
|
||||
stroke-width="18.75"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="mx-2">
|
||||
<h3 className="mb-0 text-sm text-right font-medium text-primary-500 ">
|
||||
پست سفارشی{" "}
|
||||
</h3>
|
||||
<p className="mb-0 text-[12px] text-gray-500">
|
||||
{" "}
|
||||
هزینه ارسال
|
||||
<PersianNumber number={35} style={"text-gray-600 mx-1"} />
|
||||
هزار تومان
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex rtl px-3 mt-5">
|
||||
<div>
|
||||
<svg
|
||||
width="25"
|
||||
height="25"
|
||||
viewBox="0 0 264 264"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="opacity-70 mt-2"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M141.375 117.938L197.625 141.375V122.625L141.375 94.5V66.375C141.375 63.8886 140.387 61.504 138.629 59.7459C136.871 57.9877 134.486 57 132 57C129.514 57 127.129 57.9877 125.371 59.7459C123.613 61.504 122.625 63.8886 122.625 66.375V94.5L66.375 122.625V141.375L122.625 117.938V169.5L94.5 188.25V197.625L132 188.25L169.5 197.625V188.25L141.375 169.5V117.938Z"
|
||||
fill="black"
|
||||
fill-opacity="0.44"
|
||||
/>
|
||||
<path
|
||||
d="M132 263.25C106.041 263.25 80.6654 255.552 59.0815 241.13C37.4975 226.709 20.6749 206.21 10.7409 182.227C0.806868 158.244 -1.79232 131.854 3.27199 106.394C8.3363 80.9345 20.8366 57.5479 39.1923 39.1923C57.5479 20.8366 80.9345 8.3363 106.394 3.27199C131.854 -1.79232 158.244 0.806868 182.227 10.7409C206.21 20.6749 226.709 37.4975 241.13 59.0815C255.552 80.6654 263.25 106.041 263.25 132C263.21 166.798 249.37 200.158 224.764 224.764C200.158 249.37 166.798 263.21 132 263.25ZM132 19.5001C109.75 19.5001 87.9989 26.0981 69.4984 38.4597C50.9979 50.8214 36.5785 68.3915 28.0636 88.9482C19.5488 109.505 17.3209 132.125 21.6617 153.948C26.0026 175.771 36.7171 195.816 52.4505 211.55C68.184 227.283 88.2295 237.998 110.052 242.338C131.875 246.679 154.495 244.451 175.052 235.936C195.609 227.422 213.179 213.002 225.54 194.502C237.902 176.001 244.5 154.25 244.5 132C244.465 102.174 232.602 73.5792 211.511 52.4889C190.421 31.3986 161.826 19.5348 132 19.5001Z"
|
||||
fill="black"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="mx-2">
|
||||
<h3 className="mb-0 text-sm text-right font-medium text-primary-500 ">
|
||||
پست پیشتاز{" "}
|
||||
</h3>
|
||||
<p className="mb-0 text-[12px] text-gray-500">
|
||||
{" "}
|
||||
حداکثر
|
||||
<PersianNumber number={2} style={"text-gray-600 mx-1"} />
|
||||
روز کاری
|
||||
<small className="mx-2">|</small> هزینه ارسال
|
||||
<PersianNumber number={150} style={"text-gray-600 mx-1"} />
|
||||
هزار تومان
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-right flex rtl justify-between border-y-[1px] border-gray-100 mt-3 px-4 ">
|
||||
<p className="mb-0 text-sm font-semibold py-4">روش پرداخت</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="flex rtl px-3 mt-5">
|
||||
<div>
|
||||
<Image src={zarin} className="w-[50px]" />
|
||||
</div>
|
||||
<div className="mx-2">
|
||||
<h3 className="mb-0 text-sm text-right font-medium text-primary-500 ">
|
||||
پرداخت آنلاین
|
||||
</h3>
|
||||
<p className="mb-0 text-[12px] text-gray-500">زرین پال</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex rtl px-3 mt-5">
|
||||
<div>
|
||||
<Image src={ap} className="w-[45px]" />
|
||||
</div>
|
||||
<div className="mx-2">
|
||||
<h3 className="mb-0 text-sm text-right font-medium text-primary-500 ">
|
||||
پرداخت آنلاین
|
||||
</h3>
|
||||
<p className="mb-0 text-[12px] text-gray-500">آسان پرداخت</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="flex justify-between rtl px-3 mt-5"
|
||||
onClick={() => CTX.setBottomSheetDiscountOpen(true)}
|
||||
>
|
||||
<div className="flex">
|
||||
<div>
|
||||
<svg
|
||||
width="25"
|
||||
height="25"
|
||||
viewBox="0 0 244 194"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="opacity-70 mt-2"
|
||||
>
|
||||
<path
|
||||
d="M122 93.875V100.125M122 47V53.25M122 140.75V147M209.5 184.5C216.13 184.5 222.489 181.866 227.178 177.178C231.866 172.489 234.5 166.13 234.5 159.5V122C227.87 122 221.511 119.366 216.822 114.678C212.134 109.989 209.5 103.63 209.5 97C209.5 90.3696 212.134 84.0107 216.822 79.3223C221.511 74.6339 227.87 72 234.5 72V34.5C234.5 27.8696 231.866 21.5107 227.178 16.8223C222.489 12.1339 216.13 9.5 209.5 9.5H34.5C27.8696 9.5 21.5107 12.1339 16.8223 16.8223C12.1339 21.5107 9.5 27.8696 9.5 34.5V72C16.1304 72 22.4893 74.6339 27.1777 79.3223C31.8661 84.0107 34.5 90.3696 34.5 97C34.5 103.63 31.8661 109.989 27.1777 114.678C22.4893 119.366 16.1304 122 9.5 122V159.5C9.5 166.13 12.1339 172.489 16.8223 177.178C21.5107 181.866 27.8696 184.5 34.5 184.5H209.5Z"
|
||||
stroke="black"
|
||||
stroke-opacity="0.54"
|
||||
stroke-width="18.75"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="mx-2">
|
||||
<h3 className="mb-0 text-sm text-right font-medium text-primary-500 ">
|
||||
افزودن کد تخفیف{" "}
|
||||
</h3>
|
||||
<p className="mb-0 text-[12px] text-gray-500">
|
||||
کد تخفیف خود را وارد کنید
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pl-3">
|
||||
<span className="text-[30px] opacity-60">+</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="">
|
||||
<div className="text-right flex rtl justify-between border-y-[1px] border-gray-100 my-3 px-4 ">
|
||||
<p className="mb-0 text-sm font-semibold py-4">حساب نهایی</p>
|
||||
|
||||
<div className="bg-primary-200 w-fit h-fit relative my-3 p-1 rounded-lg">
|
||||
<p className="mb-0 text-[11px] text-white rtl">مشاهده اقلام</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="flex justify-between rtl px-4">
|
||||
<p className="mb-0 text-[12px] text-gray-500">قیمت </p>
|
||||
|
||||
<div className="flex justify-center">
|
||||
<p className="mb-0 ">
|
||||
<PersianNumber
|
||||
number={checkOutData?.totalProductsPrice?.toLocaleString()}
|
||||
style={"!text-[14px] !font-semibold"}
|
||||
/>
|
||||
</p>
|
||||
<small className="text-gray-500 text-[12px] mt-1 mx-1">
|
||||
{" "}
|
||||
تومان
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between rtl my-2 px-4">
|
||||
<p className="mb-0 text-[12px] text-gray-500">تخفیف محصول</p>
|
||||
|
||||
<div className="flex justify-center">
|
||||
<p className="mb-0 ">
|
||||
<PersianNumber
|
||||
number={checkOutData?.discountPrice?.toLocaleString()}
|
||||
style={"!text-[14px] !font-semibold"}
|
||||
/>
|
||||
</p>
|
||||
<small className="text-gray-500 text-[12px] mt-1 mx-1">
|
||||
{" "}
|
||||
تومان
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between rtl my-2 px-4">
|
||||
<p className="mb-0 text-[12px] text-gray-500">هزینه بسته بندی</p>
|
||||
|
||||
<div className="flex justify-center">
|
||||
<p className="mb-0 ">
|
||||
<PersianNumber
|
||||
number={checkOutData?.packingPrice?.toLocaleString()}
|
||||
style={"!text-[14px] !font-semibold"}
|
||||
/>
|
||||
</p>
|
||||
<small className="text-gray-500 text-[12px] mt-1 mx-1">
|
||||
{" "}
|
||||
تومان
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between rtl my-2 px-4">
|
||||
<p className="mb-0 text-[12px] text-gray-500">هزینه ارسال</p>
|
||||
|
||||
<div className="flex justify-center">
|
||||
<p className="mb-0 ">
|
||||
<PersianNumber
|
||||
number={checkOutData?.deliveryPrice?.toLocaleString()}
|
||||
style={"!text-[14px] !font-semibold"}
|
||||
/>
|
||||
</p>
|
||||
<small className="text-gray-500 text-[12px] mt-1 mx-1">
|
||||
{" "}
|
||||
تومان
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between bg-primary-100 p-3 rtl my-2">
|
||||
<p className="mb-0 text-sm text-primary-600 font-bold">
|
||||
قابل پرداخت
|
||||
</p>
|
||||
|
||||
<div className="flex justify-center">
|
||||
<p className="mb-0 ">
|
||||
<PersianNumber
|
||||
number={checkOutData?.totalPrice?.toLocaleString()}
|
||||
style={"!text-[14px] !font-semibold text-primary-800"}
|
||||
/>
|
||||
</p>
|
||||
<small className="text-gray-500 text-[12px] mt-1 mx-1">
|
||||
{" "}
|
||||
تومان
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<NavBarDownCart
|
||||
calculateTotalCost={checkOutData.totalPrice}
|
||||
event={() => console.log("D")}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<BottomSheetDiscount />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default page;
|
||||
|
|
@ -0,0 +1,191 @@
|
|||
"use client";
|
||||
import CardCart from "@comp/Cards/CardCart/page";
|
||||
import NavBarDownCart from "@comp/Carts/component/NavBarDownCart/page";
|
||||
import Navbar from "@comp/Navbar/page";
|
||||
import AppContext from "@ctx/AppContext";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Chapar from "plugins/Chapar";
|
||||
import PersianNumber from "plugins/PersianNumber";
|
||||
import React, { useContext, useEffect } from "react";
|
||||
import { toast } from "react-toastify";
|
||||
|
||||
const page = () => {
|
||||
const CTX = useContext(AppContext);
|
||||
const router = useRouter();
|
||||
const cart = CTX.state.cart;
|
||||
|
||||
const calculateTotalCost = cart.reduce(
|
||||
(total, item) => total + parseInt(item.cost) * item.count,
|
||||
0
|
||||
);
|
||||
|
||||
const calculateTotalCostWithDiscount = cart.reduce(
|
||||
(total, item) => total + parseInt(item.costWithDiscount) * item.count,
|
||||
0
|
||||
);
|
||||
|
||||
// const calculateTotalCostWithDiscount = cart.reduce((total, item) => {
|
||||
// // Check if costWithDiscount is defined and a valid number
|
||||
// if (
|
||||
// typeof item.costWithDiscount === "number" &&
|
||||
// !isNaN(item.costWithDiscount)
|
||||
// ) {
|
||||
// // If costWithDiscount is defined and valid, include it in the calculation
|
||||
// return total + item.costWithDiscount * item.count;
|
||||
// } else {
|
||||
// // If costWithDiscount is not defined or not a valid number, use regular cost
|
||||
// return total + item.cost * item.count;
|
||||
// }
|
||||
// }, 0);
|
||||
|
||||
const handleGoCheckOut = async () => {
|
||||
// Check if the user is authorized based on the presence of a token in local storage
|
||||
const token = localStorage.getItem("token");
|
||||
|
||||
if (token) {
|
||||
// If token exists, proceed to checkout
|
||||
const productsToSend = cart.map((item) => ({
|
||||
productId: item.id,
|
||||
count: parseInt(item.count),
|
||||
}));
|
||||
try {
|
||||
const data = await Chapar.post(
|
||||
`${process.env.NEXT_PUBLIC_API_URL}/order/bag/add`,
|
||||
|
||||
JSON.stringify(productsToSend),
|
||||
|
||||
{
|
||||
headers: {
|
||||
Authorization: localStorage.getItem("token"),
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
CTX.setCheckOutData(data);
|
||||
} catch ({ error, status }) {
|
||||
toast.error(`${error?.response?.data?.message}`, {
|
||||
position: "bottom-right",
|
||||
closeOnClick: true,
|
||||
});
|
||||
}
|
||||
router.push("/cart/checkout"); // Redirect to the checkout page
|
||||
} else {
|
||||
// If token does not exist, redirect to login
|
||||
router.push("/login"); // Redirect to the login page
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
CTX.setBottomSheetCartOpen(false);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className=" pb-20">
|
||||
<Navbar theme={1} />
|
||||
|
||||
<div className="text-right flex rtl justify-between border-t-[1px] border-gray-200 my-3 px-4 ">
|
||||
<p className="mb-0 text-sm font-semibold py-4">محصولات انتخاب شده</p>
|
||||
|
||||
<div className="bg-primary-200 w-fit h-fit relative my-3 p-1 rounded-lg">
|
||||
<p className="mb-0 text-[11px] text-white rtl">
|
||||
<PersianNumber number={cart?.length} style={"mx-1"} />
|
||||
محصول
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="">
|
||||
{cart?.map((e) => (
|
||||
<CardCart data={e} />
|
||||
))}
|
||||
|
||||
<div className="">
|
||||
<div className="text-right flex rtl justify-between border-y-[1px] border-gray-200 my-3 px-4 ">
|
||||
<p className="mb-0 text-sm font-semibold py-4">حساب نهایی</p>
|
||||
|
||||
{/* <div className="bg-primary-200 w-fit h-fit relative my-3 p-1 rounded-lg">
|
||||
<p className="mb-0 text-[11px] text-white rtl">
|
||||
<PersianNumber number={cart?.length} style={"mx-1"} />
|
||||
محصول
|
||||
</p>
|
||||
</div> */}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="flex justify-between rtl px-4">
|
||||
<p className="mb-0 text-[12px] text-gray-500">قیمت </p>
|
||||
|
||||
<div className="flex justify-center">
|
||||
<p className="mb-0 ">
|
||||
<PersianNumber
|
||||
number={(calculateTotalCost / 10)?.toLocaleString()}
|
||||
style={"!text-[14px] !font-semibold"}
|
||||
/>
|
||||
</p>
|
||||
<small className="text-gray-500 text-[12px] mt-1 mx-1">
|
||||
{" "}
|
||||
تومان
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between rtl my-2 px-4">
|
||||
<p className="mb-0 text-[12px] text-gray-500">تخفیف محصول</p>
|
||||
|
||||
<div className="flex justify-center">
|
||||
<p className="mb-0 ">
|
||||
<PersianNumber
|
||||
number={(
|
||||
(calculateTotalCost - calculateTotalCostWithDiscount) /
|
||||
10
|
||||
)?.toLocaleString()}
|
||||
style={"!text-[14px] !font-semibold"}
|
||||
/>
|
||||
</p>
|
||||
<small className="text-gray-500 text-[12px] mt-1 mx-1">
|
||||
{" "}
|
||||
تومان
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between bg-primary-100 p-3 rtl my-2">
|
||||
<p className="mb-0 text-sm text-primary-600 font-bold">
|
||||
قابل پرداخت
|
||||
</p>
|
||||
|
||||
<div className="flex justify-center">
|
||||
<p className="mb-0 ">
|
||||
<PersianNumber
|
||||
number={
|
||||
calculateTotalCostWithDiscount !== 0
|
||||
? (
|
||||
calculateTotalCostWithDiscount / 10
|
||||
)?.toLocaleString()
|
||||
: 0
|
||||
}
|
||||
style={"!text-[14px] !font-semibold text-primary-800"}
|
||||
/>
|
||||
</p>
|
||||
<small className="text-gray-500 text-[12px] mt-1 mx-1">
|
||||
{" "}
|
||||
تومان
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<NavBarDownCart
|
||||
calculateTotalCost={calculateTotalCostWithDiscount / 10}
|
||||
event={() => handleGoCheckOut()}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default page;
|
||||
|
|
@ -63,7 +63,19 @@ export default function page({ params }) {
|
|||
</div>
|
||||
|
||||
<div className="xs:block lg:hidden ">
|
||||
<FilterCategoryMobile />
|
||||
<FilterCategoryMobile
|
||||
id={params.id}
|
||||
isChecked={isChecked}
|
||||
setIsChecked={setIsChecked}
|
||||
selectedBrands={selectedBrands}
|
||||
setSelectedBrands={setSelectedBrands}
|
||||
rangePrice={rangePrice}
|
||||
setRangePrice={setRangePrice}
|
||||
sortBy={sortBy}
|
||||
setIsRangePrice={setIsRangePrice}
|
||||
isRangePrice={isRangePrice}
|
||||
setSortBy={setSortBy}
|
||||
/>
|
||||
<ListProductsMobile />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,247 @@
|
|||
import Footer from "@comp/Footer/page";
|
||||
import Navbar from "@comp/Navbar/page";
|
||||
import PersianNumber from "plugins/PersianNumber";
|
||||
import React from "react";
|
||||
|
||||
const page = () => {
|
||||
const number = "02188195164";
|
||||
return (
|
||||
<>
|
||||
<div className="bg-contact-us !min-h-[100vh]">
|
||||
<div className=" pb-20">
|
||||
<Navbar theme={0} />
|
||||
|
||||
<div>
|
||||
<div className="flex justify-center xs:hidden lg:block">
|
||||
<div className="absolute mr-[-1100px] mt-[-200px]">
|
||||
<p className="mb-0 text-[300px] opacity-10 font-extrabold text-white ">
|
||||
{" "}
|
||||
,
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-[150px] ">
|
||||
<div className="px-5">
|
||||
<h1 className="text-white font-bold text-center xs:text-[20px] lg:text-[40px]">
|
||||
به خدمات مشتری وسمه خوش آمدید
|
||||
</h1>
|
||||
|
||||
<p className="mb-0 text-base text-center text-gray-100 xs:text-sm lg:text-base">
|
||||
امروز در مورد چه کمکی می خواهید؟ شما میتوانید به سرعت از بسیاری
|
||||
از موارد در اینجا مراقبت کنید، یا در صورت نیاز با ما ارتباط
|
||||
برقرار کنید.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="xs:w-11/12 lg:w-7/12 mx-auto mt-10">
|
||||
<div className="grid xs:grid-cols-2 lg:grid-cols-5 gap-4">
|
||||
<div className="bg-white rounded-xl p-5">
|
||||
<div>
|
||||
{" "}
|
||||
<svg
|
||||
width="50"
|
||||
height="50"
|
||||
viewBox="0 0 234 245"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="mx-auto opacity-50"
|
||||
>
|
||||
<path
|
||||
d="M65.8285 163.318C66.1568 164.505 66.7156 165.616 67.4731 166.587C68.2306 167.557 69.1719 168.37 70.2433 168.977C71.3146 169.584 72.4951 169.974 73.7172 170.125C74.9393 170.276 76.1792 170.184 77.366 169.856C78.5528 169.528 79.6633 168.969 80.6342 168.211C81.605 167.454 82.4172 166.512 83.0242 165.441C83.6313 164.37 84.0214 163.189 84.1722 161.967C84.3231 160.745 84.2318 159.505 83.9035 158.318L65.8285 163.318ZM12.0035 31.5684C10.812 31.2204 9.56326 31.1124 8.32972 31.2508C7.09619 31.3892 5.90242 31.7712 4.81768 32.3746C3.73293 32.978 2.77882 33.7908 2.01068 34.7659C1.24255 35.7409 0.675695 36.8588 0.343006 38.0547C0.0103176 39.2505 -0.0815803 40.5006 0.0726454 41.7322C0.226871 42.9639 0.62415 44.1526 1.24143 45.2295C1.85871 46.3064 2.6837 47.25 3.66854 48.0056C4.65338 48.7611 5.77845 49.3136 6.97848 49.6309L12.0035 31.5684ZM224.353 169.068C225.574 168.786 226.726 168.262 227.741 167.527C228.755 166.792 229.613 165.861 230.261 164.789C230.91 163.718 231.338 162.527 231.518 161.287C231.699 160.047 231.63 158.783 231.314 157.571C230.998 156.359 230.442 155.222 229.679 154.228C228.917 153.234 227.963 152.403 226.873 151.783C225.784 151.164 224.582 150.77 223.337 150.624C222.093 150.477 220.832 150.582 219.628 150.931L224.353 169.068ZM99.466 191.993C103.341 205.993 94.841 220.781 79.791 224.693L84.5035 242.831C109.216 236.418 124.316 211.556 117.541 186.993L99.466 191.993ZM79.791 224.693C64.641 228.631 49.441 219.831 45.541 205.706L27.466 210.706C34.216 235.143 59.891 249.231 84.5035 242.831L79.791 224.693ZM45.541 205.706C41.666 191.706 50.166 176.918 65.216 173.006L60.5035 154.881C35.791 161.293 20.6785 186.143 27.466 210.706L45.541 205.706ZM65.216 173.006C80.366 169.068 95.566 177.868 99.466 191.993L117.541 186.993C110.791 162.556 85.116 148.468 60.5035 154.868L65.216 173.006ZM83.9035 158.318L57.0035 60.9434L38.9285 65.9434L65.8285 163.318L83.9035 158.318ZM33.3035 37.4684L12.0035 31.5684L6.97848 49.6309L28.291 55.5434L33.3035 37.4684ZM57.0035 60.9434C55.4175 55.3165 52.4008 50.1965 48.2473 46.0825C44.0938 41.9684 38.9452 39.0006 33.3035 37.4684L28.316 55.5434C33.6285 57.0184 37.5785 61.0559 38.9285 65.9434L57.0035 60.9434ZM110.878 198.568L224.353 169.068L219.641 150.931L106.153 180.431L110.878 198.568Z"
|
||||
fill="black"
|
||||
/>
|
||||
<path
|
||||
d="M211.565 50.4561C205.503 28.5061 202.465 17.5311 193.565 12.5436C184.64 7.54358 173.328 10.4936 150.703 16.3811L126.703 22.6061C104.078 28.4811 92.7652 31.4311 87.6277 40.0811C82.4777 48.7186 85.5027 59.6936 91.5652 81.6311L98.0027 104.919C104.065 126.856 107.09 137.831 116.003 142.819C124.915 147.819 136.228 144.869 158.853 138.994L182.853 132.744C205.478 126.869 216.79 123.931 221.94 115.294C224.765 110.544 225.128 105.094 223.865 97.5061"
|
||||
stroke="black"
|
||||
stroke-opacity="0.44"
|
||||
stroke-width="18.75"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div className="mb-4 mt-8">
|
||||
<h2 className="text-gray-500 text-center mb-0">
|
||||
تحویل، سفارش یا بازگشت
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-white rounded-xl p-5">
|
||||
<div>
|
||||
{" "}
|
||||
<svg
|
||||
width="50"
|
||||
height="50"
|
||||
viewBox="0 0 195 234"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="mx-auto opacity-50"
|
||||
>
|
||||
<path
|
||||
d="M97.5 223C108.859 223 120.107 220.855 130.602 216.686C141.097 212.518 150.632 206.409 158.665 198.707C166.697 191.005 173.069 181.861 177.416 171.798C181.763 161.735 184 150.949 184 140.057V93.9407C184.001 73.5647 176.18 53.9012 162.029 38.7007M11 112.354V140.057C10.9942 156.385 16.0145 172.351 25.4316 185.955C34.8487 199.559 48.2438 210.195 63.938 216.53M140.75 22.1121C120.883 11.1136 97.2729 8.13312 75.1139 13.8262C52.955 19.5192 34.062 33.4194 22.591 52.4692C17.8677 60.2912 14.5352 68.8126 12.73 77.6839"
|
||||
stroke="black"
|
||||
stroke-width="21.4286"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M88.5037 59.1046C94.8666 57.838 101.445 57.9569 107.753 59.4527C114.062 60.9484 119.94 63.7828 124.954 67.7469C129.968 71.711 133.99 76.7037 136.724 82.3569C139.458 88.01 140.834 94.1794 140.75 100.41V127.118M129.678 161.954C123.791 168.241 116.043 172.654 107.469 174.603C98.8954 176.551 89.9055 175.943 81.7025 172.858C73.4996 169.773 66.475 164.359 61.5688 157.341C56.6626 150.323 54.109 142.035 54.2497 133.587V100.41C54.2168 94.7128 55.394 89.0687 57.7097 83.8216M97.4997 102.235V129.938"
|
||||
stroke="black"
|
||||
stroke-opacity="0.46"
|
||||
stroke-width="21.4286"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div className="mb-4 mt-8">
|
||||
<h2 className="text-gray-500 text-center mb-0">
|
||||
امنیت و حریم خصوصی{" "}
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-white rounded-xl p-5">
|
||||
<div>
|
||||
{" "}
|
||||
<svg
|
||||
width="50"
|
||||
height="50"
|
||||
viewBox="0 0 269 220"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="mx-auto opacity-50"
|
||||
s
|
||||
>
|
||||
<path
|
||||
d="M134.5 85V135M112.85 97.5L156.15 122.5M156.15 97.5L112.838 122.5M68.65 85V135M47 97.5L90.3 122.5M90.3 97.5L47 122.5M200.35 85C200.35 85 200.35 100.237 200.35 110C200.35 119.763 200.35 135 200.35 135M178.7 97.5L222 122.5M222 97.5L178.688 122.5M259.5 110C259.5 157.137 259.5 180.712 244.85 195.35C230.212 210 206.637 210 159.5 210H109.5C62.3625 210 38.7875 210 24.15 195.35C9.5 180.712 9.5 157.137 9.5 110C9.5 62.8625 9.5 39.2875 24.15 24.65C38.7875 10 62.3625 10 109.5 10H159.5C206.637 10 230.212 10 244.85 24.65C253.025 32.8125 256.638 43.75 258.225 60"
|
||||
stroke="black"
|
||||
stroke-width="18.75"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div className="mb-4 mt-8">
|
||||
<h2 className="text-gray-500 text-center mb-0">
|
||||
رمز عبور ورود{" "}
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-white rounded-xl p-5">
|
||||
<div>
|
||||
{" "}
|
||||
<svg
|
||||
width="50"
|
||||
height="50"
|
||||
viewBox="0 0 263 225"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="mx-auto opacity-50"
|
||||
>
|
||||
<path
|
||||
d="M32.8125 0C24.1101 0 15.7641 3.45702 9.61056 9.61056C3.45702 15.7641 0 24.1101 0 32.8125V154.688C0 172.8 14.7 187.5 32.8125 187.5H75.6562C74.7665 181.282 74.7665 174.968 75.6562 168.75H32.8125C29.0829 168.75 25.506 167.268 22.8688 164.631C20.2316 161.994 18.75 158.417 18.75 154.688V32.8125C18.75 29.0829 20.2316 25.506 22.8688 22.8688C25.506 20.2316 29.0829 18.75 32.8125 18.75H229.688C233.417 18.75 236.994 20.2316 239.631 22.8688C242.268 25.506 243.75 29.0829 243.75 32.8125V118.819C250.781 122.156 257.119 126.694 262.5 132.188V32.8125C262.5 24.1101 259.043 15.7641 252.889 9.61056C246.736 3.45702 238.39 0 229.688 0H32.8125ZM122.175 115.125C121.674 111.248 119.778 107.685 116.841 105.104C113.904 102.523 110.128 101.1 106.219 101.1H53.5875C49.3208 101.1 45.2289 102.795 42.2119 105.812C39.1949 108.829 37.5 112.921 37.5 117.188C37.5006 124.17 39.8353 130.953 44.1329 136.456C48.4305 141.96 54.4444 145.869 61.2187 147.562L62.2125 147.825C68.4937 149.381 74.9062 150.112 81.3375 149.981C85.3102 141.629 90.9986 134.208 98.0319 128.203C105.065 122.197 113.304 117.741 122.175 115.125ZM150 65.625C150 63.1386 150.988 60.754 152.746 58.9959C154.504 57.2377 156.889 56.25 159.375 56.25H215.625C218.111 56.25 220.496 57.2377 222.254 58.9959C224.012 60.754 225 63.1386 225 65.625C225 68.1114 224.012 70.496 222.254 72.2541C220.496 74.0123 218.111 75 215.625 75H159.375C156.889 75 154.504 74.0123 152.746 72.2541C150.988 70.496 150 68.1114 150 65.625ZM79.8938 88.3875C83.2351 88.3875 86.5437 87.7294 89.6307 86.4507C92.7176 85.172 95.5225 83.2979 97.8852 80.9352C100.248 78.5725 102.122 75.7676 103.401 72.6806C104.679 69.5937 105.338 66.2851 105.338 62.9437C105.338 59.6024 104.679 56.2938 103.401 53.2068C102.122 50.1199 100.248 47.315 97.8852 44.9523C95.5225 42.5896 92.7176 40.7155 89.6307 39.4368C86.5437 38.1581 83.2351 37.5 79.8938 37.5C73.1457 37.5 66.6739 40.1807 61.9023 44.9523C57.1307 49.7239 54.45 56.1956 54.45 62.9437C54.45 69.6919 57.1307 76.1636 61.9023 80.9352C66.6739 85.7068 73.1457 88.3875 79.8938 88.3875ZM140.625 131.25C128.193 131.25 116.27 136.189 107.479 144.979C98.6886 153.77 93.75 165.693 93.75 178.125C93.75 190.557 98.6886 202.48 107.479 211.271C116.27 220.061 128.193 225 140.625 225H150C152.486 225 154.871 224.012 156.629 222.254C158.387 220.496 159.375 218.111 159.375 215.625C159.375 213.139 158.387 210.754 156.629 208.996C154.871 207.238 152.486 206.25 150 206.25H140.625C133.166 206.25 126.012 203.287 120.738 198.012C115.463 192.738 112.5 185.584 112.5 178.125C112.5 170.666 115.463 163.512 120.738 158.238C126.012 152.963 133.166 150 140.625 150H150C152.486 150 154.871 149.012 156.629 147.254C158.387 145.496 159.375 143.111 159.375 140.625C159.375 138.139 158.387 135.754 156.629 133.996C154.871 132.238 152.486 131.25 150 131.25H140.625ZM206.25 131.25C203.764 131.25 201.379 132.238 199.621 133.996C197.863 135.754 196.875 138.139 196.875 140.625C196.875 143.111 197.863 145.496 199.621 147.254C201.379 149.012 203.764 150 206.25 150H215.625C223.084 150 230.238 152.963 235.512 158.238C240.787 163.512 243.75 170.666 243.75 178.125C243.75 185.584 240.787 192.738 235.512 198.012C230.238 203.287 223.084 206.25 215.625 206.25H206.25C203.764 206.25 201.379 207.238 199.621 208.996C197.863 210.754 196.875 213.139 196.875 215.625C196.875 218.111 197.863 220.496 199.621 222.254C201.379 224.012 203.764 225 206.25 225H215.625C228.057 225 239.98 220.061 248.771 211.271C257.561 202.48 262.5 190.557 262.5 178.125C262.5 165.693 257.561 153.77 248.771 144.979C239.98 136.189 228.057 131.25 215.625 131.25H206.25ZM140.625 168.75C138.139 168.75 135.754 169.738 133.996 171.496C132.238 173.254 131.25 175.639 131.25 178.125C131.25 180.611 132.238 182.996 133.996 184.754C135.754 186.512 138.139 187.5 140.625 187.5H215.625C218.111 187.5 220.496 186.512 222.254 184.754C224.012 182.996 225 180.611 225 178.125C225 175.639 224.012 173.254 222.254 171.496C220.496 169.738 218.111 168.75 215.625 168.75H140.625Z"
|
||||
fill="black"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div className="mb-4 mt-8">
|
||||
<h2 className="text-gray-500 text-center mb-0">
|
||||
پرداخت، شارژ یا کارت هدیه{" "}
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-white rounded-xl p-5 xs:col-span-2 lg:col-span-1 ">
|
||||
<div>
|
||||
{" "}
|
||||
<svg
|
||||
width="50"
|
||||
height="50"
|
||||
viewBox="0 0 270 220"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="mx-auto opacity-50"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M109.3 0.625H148.2C171.175 0.625 189.375 0.625002 203.613 2.5375C218.263 4.5125 230.125 8.6625 239.487 18.0125C251.037 29.575 254.725 45.05 256.062 65.1375C263.275 68.3 268.725 75.0125 269.312 83.5125C269.375 84.275 269.375 85.0875 269.375 85.8375V134.162C269.375 134.912 269.375 135.725 269.325 136.475C268.725 144.975 263.275 151.7 256.062 154.875C254.725 174.95 251.037 190.425 239.487 201.987C230.125 211.337 218.263 215.487 203.613 217.462C189.363 219.375 171.175 219.375 148.2 219.375H109.3C86.325 219.375 68.125 219.375 53.8875 217.462C39.2375 215.487 27.375 211.337 18.0125 201.987C8.6625 192.625 4.5125 180.763 2.5375 166.113C0.625 151.863 0.625 133.675 0.625 110.7V109.3C0.625 86.325 0.625 68.125 2.5375 53.8875C4.5125 39.2375 8.6625 27.375 18.0125 18.0125C27.375 8.6625 39.2375 4.5125 53.8875 2.5375C68.1375 0.625002 86.325 0.625 109.3 0.625ZM237.1 156.875H212.875C186.062 156.875 163.112 136.525 163.112 110C163.112 83.475 186.063 63.125 212.863 63.125H237.087C235.662 46.3625 232.45 37.5 226.213 31.275C220.925 25.9875 213.675 22.8125 201.1 21.125C188.263 19.4 171.325 19.375 147.487 19.375H109.987C86.15 19.375 69.225 19.4 56.3625 21.125C43.8 22.8125 36.55 25.9875 31.2625 31.275C25.975 36.5625 22.8 43.8125 21.1125 56.3875C19.3875 69.2375 19.3625 86.1625 19.3625 110C19.3625 133.837 19.3875 150.775 21.1125 163.625C22.8 176.188 25.975 183.438 31.2625 188.725C36.55 194.013 43.8 197.187 56.375 198.875C69.225 200.6 86.15 200.625 109.987 200.625H147.487C171.325 200.625 188.262 200.6 201.112 198.875C213.675 197.187 220.925 194.013 226.213 188.725C232.45 182.5 235.675 173.65 237.1 156.875ZM50.625 60C50.625 57.5136 51.6127 55.129 53.3709 53.3709C55.129 51.6127 57.5136 50.625 60 50.625H110C112.486 50.625 114.871 51.6127 116.629 53.3709C118.387 55.129 119.375 57.5136 119.375 60C119.375 62.4864 118.387 64.871 116.629 66.6291C114.871 68.3873 112.486 69.375 110 69.375H60C57.5136 69.375 55.129 68.3873 53.3709 66.6291C51.6127 64.871 50.625 62.4864 50.625 60ZM246.55 81.875H212.875C195.075 81.875 181.862 95.1125 181.862 110C181.862 124.887 195.075 138.125 212.863 138.125H246.838C249.413 137.962 250.525 136.225 250.613 135.175V84.825C250.525 83.775 249.413 82.0375 246.838 81.8875L246.55 81.875Z"
|
||||
fill="black"
|
||||
fill-opacity="0.73"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div className="mb-4 mt-8">
|
||||
<h2 className="text-gray-500 text-center mb-0">
|
||||
پرداخت، شارژ یا کارت هدیه{" "}
|
||||
</h2>
|
||||
</div>
|
||||
</div>{" "}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className=" xs:px-3 lg:px-20 lg:flex rtl lg:m-10 xs:m-3 pb-20 ">
|
||||
<div>
|
||||
<h2 className="mb-0 text-right font-semibold xs:text-[17px] lg:text-[20px] my-2 ">
|
||||
فروشگاه وسمه
|
||||
</h2>
|
||||
<p className="mb-0 text-right xs:text-sm lg:text-base">
|
||||
اینجا جایی است که زیبایی شما به روشنی معنا پیدا میکند و هر آنچه که
|
||||
برای بهترین نسخه خود نیاز دارید، در دسترس شماست. ما به افتخار اینکه
|
||||
انتخابی برای زیبایی و اعتماد به نفس شما هستیم، بسیار خوشحالیم. در
|
||||
فروشگاه وسمه، ما به دنبال ارائه محصولات با کیفیت و خدماتی استثنایی
|
||||
هستیم تا به شما کمک کنیم تا به بهترین شکل ممکن زندگی کنید. اگر سوالی
|
||||
دارید یا نیاز به راهنمایی دارید، تیم ما همیشه در دسترس است تا به شما
|
||||
کمک کند. با افتخار ما را در فروشگاه "وسمه" به عنوان همراهی شما در
|
||||
مسیر زیبایی و اعتماد به نفس خوش آمدید. با احترام و دوستی، تیم
|
||||
فروشگاه "وسمه
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-full lg:mx-10">
|
||||
<div className="flex rtl mt-5">
|
||||
<div className="bg-primary-500 p-3 w-[80px] rounded-lg">
|
||||
<p className="mb-0 text-white text-center">تماس</p>
|
||||
</div>
|
||||
|
||||
<div className="m-3">
|
||||
<PersianNumber number={number} style={"font-bold !text-[17px]"} />{" "}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex rtl mt-5">
|
||||
<div className="bg-primary-500 p-3 w-[80px] rounded-lg">
|
||||
<p className="mb-0 text-white text-center">ایمیل</p>
|
||||
</div>
|
||||
|
||||
<div className="m-3">
|
||||
<p className="font-bold !text-[15x]">info@vesmeh.com </p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex rtl mt-5">
|
||||
<div className="bg-primary-500 p-3 w-[80px] rounded-lg h-fit relative">
|
||||
<p className="mb-0 text-white text-center">آدرس</p>
|
||||
</div>
|
||||
|
||||
<div className="m-3">
|
||||
<p className="font-bold !text-[15x]">
|
||||
تهران، خیابان گاندی جنوبی, خیابان خالد اسلامبولی, پلاک128{" "}
|
||||
</p>{" "}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default page;
|
||||
|
|
@ -7,8 +7,9 @@ import Chapar from "plugins/Chapar";
|
|||
import AppContext from "@ctx/AppContext";
|
||||
import { useEffect, useState } from "react";
|
||||
import "react-toastify/dist/ReactToastify.css";
|
||||
import { ToastContainer } from "react-toastify";
|
||||
import { ToastContainer, toast } from "react-toastify";
|
||||
import Loading from "plugins/Loading/page";
|
||||
import "react-spring-bottom-sheet/dist/style.css";
|
||||
|
||||
export default function RootLayout({ children }) {
|
||||
const [cart, setCart] = useState([]);
|
||||
|
|
@ -17,23 +18,69 @@ export default function RootLayout({ children }) {
|
|||
const [brands, setBrands] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [closeNavbar, setCloseNavbar] = useState(false);
|
||||
const [bottomSheetCart, setBottomSheetCart] = useState(false);
|
||||
const [bottomSheetCartOpen, setBottomSheetCartOpen] = useState(false);
|
||||
const [bottomSheetFilterOpen, setBottomSheetFilterOpen] = useState(false);
|
||||
const [bottomSheetDiscountOpen, setBottomSheetDiscountOpen] = useState(false);
|
||||
const [checkOutData, setCheckOutData] = useState([]);
|
||||
|
||||
const AddItemToCart = (id, persianName, cost) => {
|
||||
console.log("persianName", persianName);
|
||||
console.log(navData);
|
||||
|
||||
const AddItemToCart = (
|
||||
id,
|
||||
persianName,
|
||||
cost,
|
||||
costWithDiscount,
|
||||
mainImage,
|
||||
hasDiscount,
|
||||
maxOrderCount
|
||||
) => {
|
||||
setCart((prevCart) => {
|
||||
// Check if the item is already in the cart
|
||||
const existingItem = prevCart.find((item) => item.id === id);
|
||||
|
||||
let updatedCart;
|
||||
if (existingItem) {
|
||||
// If the item is already in the cart, update its count
|
||||
return prevCart.map((item) =>
|
||||
item.id === id ? { ...item, count: item.count + 1 } : item
|
||||
);
|
||||
if (existingItem.count < maxOrderCount) {
|
||||
updatedCart = prevCart.map((item) =>
|
||||
item.id === id ? { ...item, count: item.count + 1 } : item
|
||||
);
|
||||
} else {
|
||||
// Notify user if maxOrderCount is exceeded
|
||||
toast.error(
|
||||
`
|
||||
نمیتوانید بیشتراز
|
||||
|
||||
${maxOrderCount}
|
||||
|
||||
عدد ثبت کنید `,
|
||||
{
|
||||
position: "bottom-right",
|
||||
closeOnClick: true,
|
||||
}
|
||||
);
|
||||
updatedCart = prevCart;
|
||||
}
|
||||
} else {
|
||||
// If the item is not in the cart, add it with a count of 1
|
||||
return [...prevCart, { id, count: 1, persianName, cost }];
|
||||
updatedCart = [
|
||||
...prevCart,
|
||||
{
|
||||
id,
|
||||
count: 1,
|
||||
persianName,
|
||||
cost,
|
||||
costWithDiscount,
|
||||
mainImage,
|
||||
hasDiscount,
|
||||
maxOrderCount,
|
||||
},
|
||||
];
|
||||
}
|
||||
// Store the updated cart in local storage
|
||||
localStorage.setItem("cart", JSON.stringify(updatedCart));
|
||||
|
||||
// Return the updated cart
|
||||
return updatedCart;
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -46,12 +93,24 @@ export default function RootLayout({ children }) {
|
|||
// If the item is already in the cart
|
||||
if (existingItem.count === 1) {
|
||||
// If the item count is 1, remove it from the cart
|
||||
return prevCart.filter((item) => item.id !== id);
|
||||
const updatedCart = prevCart.filter((item) => item.id !== id);
|
||||
|
||||
// Store the updated cart in local storage
|
||||
localStorage.setItem("cart", JSON.stringify(updatedCart));
|
||||
|
||||
// Return the updated cart
|
||||
return updatedCart;
|
||||
} else {
|
||||
// If the item count is greater than 1, update its count
|
||||
return prevCart.map((item) =>
|
||||
const updatedCart = prevCart.map((item) =>
|
||||
item.id === id ? { ...item, count: item.count - 1 } : item
|
||||
);
|
||||
|
||||
// Store the updated cart in local storage
|
||||
localStorage.setItem("cart", JSON.stringify(updatedCart));
|
||||
|
||||
// Return the updated cart
|
||||
return updatedCart;
|
||||
}
|
||||
} else {
|
||||
// If the item is not in the cart, do nothing
|
||||
|
|
@ -98,6 +157,11 @@ export default function RootLayout({ children }) {
|
|||
};
|
||||
|
||||
useEffect(() => {
|
||||
const storedCart = localStorage.getItem("cart");
|
||||
if (storedCart) {
|
||||
setCart(JSON.parse(storedCart));
|
||||
}
|
||||
|
||||
fetchNavData();
|
||||
}, []);
|
||||
|
||||
|
|
@ -111,14 +175,20 @@ export default function RootLayout({ children }) {
|
|||
loading,
|
||||
brands,
|
||||
closeNavbar,
|
||||
bottomSheetCart,
|
||||
bottomSheetCartOpen,
|
||||
bottomSheetFilterOpen,
|
||||
bottomSheetDiscountOpen,
|
||||
checkOutData,
|
||||
},
|
||||
setCart,
|
||||
setProducts,
|
||||
setNavData,
|
||||
setLoading,
|
||||
setBrands,
|
||||
setBottomSheetCart,
|
||||
setBottomSheetCartOpen,
|
||||
setBottomSheetFilterOpen,
|
||||
setBottomSheetDiscountOpen,
|
||||
setCheckOutData,
|
||||
AddItemToCart,
|
||||
RemoveItemFromCart,
|
||||
fetchNavData,
|
||||
|
|
|
|||
|
|
@ -7,19 +7,52 @@ import BetweenSexualSection from "@comp/LandingPage/BetweenSexualSection/page";
|
|||
import BrandsLogoSection from "@comp/LandingPage/BrandsLogoSection/page";
|
||||
import BeautySection from "@comp/LandingPage/BeautySection/page";
|
||||
import HomeSection from "@comp/LandingPage/HomeSection/page";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
export default function Page() {
|
||||
const [specialOfferData, setSpecialOfferData] = useState([]);
|
||||
const [cosmeticData, setCosmeticData] = useState([]);
|
||||
const [HomeCosmeticData, setHomeCosmeticData] = useState([]);
|
||||
const fetchSpecialOffer = async () => {
|
||||
const res = await fetch(
|
||||
`${process.env.NEXT_PUBLIC_API_URL}/product?page=0&specialOffer=true`
|
||||
);
|
||||
const specialOffer = await res.json();
|
||||
setSpecialOfferData(specialOffer);
|
||||
};
|
||||
|
||||
const fetchCosmetic = async () => {
|
||||
const res = await fetch(
|
||||
`${process.env.NEXT_PUBLIC_API_URL}/product?page=0&categoryId=553af942-7a14-4757-9a03-a3ebec6c865a`
|
||||
);
|
||||
const Cosmetic = await res.json();
|
||||
setCosmeticData(Cosmetic);
|
||||
};
|
||||
|
||||
const fetchHomeCosmetic = async () => {
|
||||
const res = await fetch(
|
||||
`${process.env.NEXT_PUBLIC_API_URL}/product?page=0&categoryId=effe5d98-d4b7-47e1-9bfb-4d3c77ab3347`
|
||||
);
|
||||
const HomeCosmetic = await res.json();
|
||||
setHomeCosmeticData(HomeCosmetic);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchSpecialOffer();
|
||||
fetchCosmetic();
|
||||
fetchHomeCosmetic();
|
||||
}, []);
|
||||
return (
|
||||
<>
|
||||
<div className="bg-header">
|
||||
<Navbar theme={0} />
|
||||
<HeroSection />
|
||||
</div>
|
||||
<SurpriseSection />
|
||||
<SurpriseSection data={specialOfferData} />
|
||||
<BetweenSexualSection />
|
||||
<BrandsLogoSection />
|
||||
<BeautySection />
|
||||
<HomeSection />
|
||||
<BeautySection data={cosmeticData} />
|
||||
<HomeSection data={HomeCosmeticData} />
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ const page = ({ params }) => {
|
|||
<div className=" py-10">
|
||||
<div className="grid xs:grid-cols-1 lg:grid-cols-8 rtl gap-6">
|
||||
<div className="lg:col-span-3 xs:px-[20px] lg:px-[100px]">
|
||||
<GalleryBox />
|
||||
<GalleryBox file={product.files} />
|
||||
</div>
|
||||
|
||||
<div className="lg:col-span-3 xs:px-[20px] lg:px-[100px]">
|
||||
|
|
@ -223,12 +223,8 @@ const page = ({ params }) => {
|
|||
<h3 className=" text-sm text-gray-400 mt-7 mb-2">
|
||||
روش استفاده
|
||||
</h3>
|
||||
<p className="mb-0 text-gray-800 font-normal rounded-xl overflow-hidden border p-3">
|
||||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و
|
||||
با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و
|
||||
مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی
|
||||
تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای
|
||||
</p>
|
||||
|
||||
<div dangerouslySetInnerHTML={{ __html: product.summery }} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -14,6 +14,13 @@
|
|||
@apply bg-primary-600;
|
||||
}
|
||||
|
||||
.btn-outline-primary {
|
||||
@apply border border-primary-500 text-primary-500;
|
||||
}
|
||||
.btn-outline-primary:hover {
|
||||
@apply bg-primary-600 text-white;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
@apply bg-secondary-100 text-white;
|
||||
}
|
||||
|
|
@ -54,7 +61,7 @@
|
|||
|
||||
body {
|
||||
font-family: KalamehWeb !important;
|
||||
background: #eeeeee;
|
||||
background: white;
|
||||
--toastify-font-family: KalamehWeb !important;
|
||||
--Chart-defaults-font-family: KalamehWeb !important;
|
||||
}
|
||||
|
|
@ -87,6 +94,34 @@ body {
|
|||
background-size: cover;
|
||||
}
|
||||
|
||||
.bg-contact-us {
|
||||
background: hsla(201, 100%, 43%, 1);
|
||||
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
hsla(201, 100%, 43%, 1) 36%,
|
||||
hsla(207, 100%, 33%, 1) 100%
|
||||
);
|
||||
|
||||
background: -moz-radial-gradient(
|
||||
circle,
|
||||
hsla(201, 100%, 43%, 1) 36%,
|
||||
hsla(207, 100%, 33%, 1) 100%
|
||||
);
|
||||
|
||||
background: -webkit-radial-gradient(
|
||||
circle,
|
||||
hsla(201, 100%, 43%, 1) 36%,
|
||||
hsla(207, 100%, 33%, 1) 100%
|
||||
);
|
||||
|
||||
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#0090DD", endColorstr="#005CA7", GradientType=1 );
|
||||
|
||||
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#00A6FF", endColorstr="#0062B3", GradientType=1 );
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.bg-navbar {
|
||||
background: rgba(240, 240, 240, 0.4);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,8 +13,8 @@ module.exports = {
|
|||
100: "#FFFBE6",
|
||||
},
|
||||
primary: {
|
||||
100: "#B9E4C9",
|
||||
200: "#2ab1da57",
|
||||
100: "#2189a818",
|
||||
200: "#2189a8ce",
|
||||
300: "#2ab0daa6",
|
||||
400: "#279fc4",
|
||||
500: "#2189A8",
|
||||
|
|
|
|||
Loading…
Reference in New Issue