first commit
commit
9581309d67
|
|
@ -0,0 +1,21 @@
|
||||||
|
NODE_ENV="development"
|
||||||
|
|
||||||
|
NEXT_PUBLIC_SERVER_URL=http://192.168.88.12:32770
|
||||||
|
NEXT_PUBLIC_PUBLIC_URL=http://192.168.88.12:32770
|
||||||
|
NEXT_PUBLIC_API_URL=http://192.168.88.12:32770/api
|
||||||
|
|
||||||
|
# SECURE_LOCAL_STORAGE_HASH_KEY=f1da2b2c7a4c446934267fea631102ec389b5b99
|
||||||
|
# NEXT_PUBLIC_API_URL_IMAGE=https://192.168.88.12:49154/Files/ReportImages
|
||||||
|
# NEXT_PUBLIC_API_URL_BackUp=https://192.168.88.12:49154/Files/BackUps
|
||||||
|
|
||||||
|
# NEXT_PUBLIC_SERVER_URL=https://j3884z97-32769.euw.devtunnels.ms
|
||||||
|
# NEXT_PUBLIC_PUBLIC_URL=https://j3884z97-32769.euw.devtunnels.ms
|
||||||
|
# NEXT_PUBLIC_API_URL=https://j3884z97-32769.euw.devtunnels.ms/api
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
# NEXT_PUBLIC_SERVER_URL=https://api.brizco.io
|
||||||
|
# NEXT_PUBLIC_PUBLIC_URL=https://api.brizco.io
|
||||||
|
# NEXT_PUBLIC_API_URL=https://api.brizco.io/api
|
||||||
|
# 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,4 @@
|
||||||
|
NODE_ENV="production"
|
||||||
|
NEXT_PUBLIC_SERVER_URL=https://api.brizco.io
|
||||||
|
NEXT_PUBLIC_PUBLIC_URL=https://api.brizco.io
|
||||||
|
NEXT_PUBLIC_API_URL=https://api.brizco.io/api
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
{
|
||||||
|
"extends": "next/core-web-vitals"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,36 @@
|
||||||
|
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||||
|
|
||||||
|
# dependencies
|
||||||
|
/node_modules
|
||||||
|
/.pnp
|
||||||
|
.pnp.js
|
||||||
|
.yarn/install-state.gz
|
||||||
|
|
||||||
|
# testing
|
||||||
|
/coverage
|
||||||
|
|
||||||
|
# next.js
|
||||||
|
/.next/
|
||||||
|
/out/
|
||||||
|
|
||||||
|
# production
|
||||||
|
/build
|
||||||
|
|
||||||
|
# misc
|
||||||
|
.DS_Store
|
||||||
|
*.pem
|
||||||
|
|
||||||
|
# debug
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
|
||||||
|
# local env files
|
||||||
|
.env*.local
|
||||||
|
|
||||||
|
# vercel
|
||||||
|
.vercel
|
||||||
|
|
||||||
|
# typescript
|
||||||
|
*.tsbuildinfo
|
||||||
|
next-env.d.ts
|
||||||
|
|
@ -0,0 +1,36 @@
|
||||||
|
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
|
||||||
|
|
||||||
|
## Getting Started
|
||||||
|
|
||||||
|
First, run the development server:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run dev
|
||||||
|
# or
|
||||||
|
yarn dev
|
||||||
|
# or
|
||||||
|
pnpm dev
|
||||||
|
# or
|
||||||
|
bun dev
|
||||||
|
```
|
||||||
|
|
||||||
|
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
||||||
|
|
||||||
|
You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.
|
||||||
|
|
||||||
|
This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
|
||||||
|
|
||||||
|
## Learn More
|
||||||
|
|
||||||
|
To learn more about Next.js, take a look at the following resources:
|
||||||
|
|
||||||
|
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
||||||
|
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
||||||
|
|
||||||
|
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
|
||||||
|
|
||||||
|
## Deploy on Vercel
|
||||||
|
|
||||||
|
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
|
||||||
|
|
||||||
|
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
|
||||||
|
|
@ -0,0 +1,119 @@
|
||||||
|
import Image from "next/image";
|
||||||
|
import PersianNumber from "plugins/PersianNumber";
|
||||||
|
import React from "react";
|
||||||
|
import p1 from "../../../public/images/product/1.png";
|
||||||
|
|
||||||
|
const CardCategories = () => {
|
||||||
|
return (
|
||||||
|
<div className="group border w-full hover:bg-white z-40 tr03">
|
||||||
|
<>
|
||||||
|
<div
|
||||||
|
className={` tr03 py-2 overflow-hidden xs:h-[200px] lg:h-[230px] ${
|
||||||
|
1 == 1 ? " rounded-xl" : " opacity-70"
|
||||||
|
}`}
|
||||||
|
// key={index}
|
||||||
|
// onClick={() => handleRoutineShiftPlanWithDay(index)}
|
||||||
|
>
|
||||||
|
<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>{" "}
|
||||||
|
<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 ">
|
||||||
|
<p className="mb-0 text-white text-[10px] ">اصالت کالا</p>
|
||||||
|
</div>
|
||||||
|
</div>{" "}
|
||||||
|
</div>{" "}
|
||||||
|
<div className="w-full h-fit ">
|
||||||
|
<Image
|
||||||
|
src={p1}
|
||||||
|
className="xs:w-[110px] lg:w-[120px] xl:w-[150] mx-auto"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="p-3 text-right">
|
||||||
|
<p className="mb-0 xs:text-[12px] lg:text-[12px] xl:text-[15px] max-h-[50px] tr03 ">
|
||||||
|
لوسیون بدن سلامتی | mayasasdsdsda asdsad
|
||||||
|
</p>
|
||||||
|
<p className="mb-0 xs:text-[11px] lg:text-[12px] xl:text-[13px] text-red-600 font-medium">
|
||||||
|
{" "}
|
||||||
|
3 عدد موجود انبار
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
<div className=" 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] tr03 group-hover: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] opacity-40 tr03 group-hover:opacity-100"
|
||||||
|
>
|
||||||
|
<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 ? (
|
||||||
|
<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={270000} 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>
|
||||||
|
) : (
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CardCategories;
|
||||||
|
|
@ -0,0 +1,75 @@
|
||||||
|
import Image from "next/image";
|
||||||
|
import PersianNumber from "plugins/PersianNumber";
|
||||||
|
import React from "react";
|
||||||
|
import p1 from "../../../public/images/product/1.png";
|
||||||
|
import p2 from "../../../public/images/product/2.png";
|
||||||
|
|
||||||
|
const CardCategoriesMobile = () => {
|
||||||
|
return (
|
||||||
|
<div className="group border-t-[1px] border-gray-200 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] " />
|
||||||
|
</div>
|
||||||
|
<div className="p-3 text-right">
|
||||||
|
<p className="mb-0 xs:text-[12px] lg:text-[11px] xl:text-[15px] max-h-[50px] tr03 ">
|
||||||
|
لوسیون بدن سلامتی | mayasasdsdsda asdsad
|
||||||
|
</p>
|
||||||
|
<p className="mb-0 xs:text-[11px] lg:text-[10px] xl:text-[13px] text-red-600 font-medium">
|
||||||
|
{" "}
|
||||||
|
3 عدد موجود انبار
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className=" rounded-full flex ltr pt-2 mt-2">
|
||||||
|
<div className="flex">
|
||||||
|
<div className="w-[35px] h-[35px] tr03 group-hover: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] opacity-40 tr03 group-hover:opacity-100"
|
||||||
|
>
|
||||||
|
<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 ? (
|
||||||
|
<div className="flex justify-end">
|
||||||
|
<p className="mb-0 text-sm absolute opacity-40 mt-[-7px] ml-[20px] text-red-600">
|
||||||
|
<del>
|
||||||
|
<PersianNumber number={270000} style={"!text-[11px]"} />
|
||||||
|
</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>
|
||||||
|
) : (
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CardCategoriesMobile;
|
||||||
|
|
@ -0,0 +1,107 @@
|
||||||
|
import Image from "next/image";
|
||||||
|
import PersianNumber from "plugins/PersianNumber";
|
||||||
|
import React from "react";
|
||||||
|
import p1 from "../../../public/images/product/1.png";
|
||||||
|
|
||||||
|
const CardSurprise = () => {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CardSurprise;
|
||||||
|
|
@ -0,0 +1,169 @@
|
||||||
|
import React from "react";
|
||||||
|
import logo from "../../public/images/logo.png";
|
||||||
|
import Image from "next/image";
|
||||||
|
|
||||||
|
const Footer = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="bg-gray-200 p-5 mb-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} />
|
||||||
|
</div>
|
||||||
|
<div className="mr-3">
|
||||||
|
<h3>
|
||||||
|
فروشگاه لوازم آرایشی و بهداشتی{" "}
|
||||||
|
<small className="text-base mr1 bg-sky-300 px-1 rounded-full">
|
||||||
|
وسمه{" "}
|
||||||
|
</small>
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className=" xs:w-full lg:w-4/12 mx-2 flex xs:mt-5 lg:mt-0">
|
||||||
|
<div className="w-8/12">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control !rounded-full text-sm"
|
||||||
|
placeholder="شماره تماس برای تحفیف ها"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<button className="btn btn-primary py-1 relative rounded-full z-10 left-[40px] !font-normal w-4/12 text-sm">
|
||||||
|
{" "}
|
||||||
|
ثبت شماره
|
||||||
|
</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=" ">
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className=" ">
|
||||||
|
<div>
|
||||||
|
<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>
|
||||||
|
{/*
|
||||||
|
<div className="flex rtl justify-center mt-5">
|
||||||
|
<div className="w-[70px] mx-1">
|
||||||
|
<Image src={w11} className="opacity-50" />
|
||||||
|
</div>
|
||||||
|
<div className="w-[10px] h-[1px] border-[1px] border-gray-500 border-dashed mt-9 opacity-20"></div>
|
||||||
|
<div className="w-[70px] mx-1">
|
||||||
|
<Image src={w22} className="opacity-50" />
|
||||||
|
</div>
|
||||||
|
<div className="w-[10px] h-[1px] border-[1px] border-gray-500 border-dashed mt-9 opacity-20"></div>
|
||||||
|
<div className="w-[70px] mx-1">
|
||||||
|
<Image src={w33} className="opacity-50" />
|
||||||
|
</div>
|
||||||
|
<div className="w-[10px] h-[1px] border-[1px] border-gray-500 border-dashed mt-9 opacity-20"></div>
|
||||||
|
<div className="w-[70px] mx-1">
|
||||||
|
<Image src={w44} className="opacity-50" />
|
||||||
|
</div>
|
||||||
|
<div className="w-[10px] h-[1px] border-[1px] border-gray-500 border-dashed mt-9 opacity-20"></div>
|
||||||
|
<div className="w-[70px] mx-1">
|
||||||
|
<Image src={w55} className="opacity-50" />
|
||||||
|
</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>
|
||||||
|
</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>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Footer;
|
||||||
|
|
@ -0,0 +1,771 @@
|
||||||
|
import Image from "next/image";
|
||||||
|
import PersianNumber from "plugins/PersianNumber";
|
||||||
|
import React from "react";
|
||||||
|
import { Swiper, 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";
|
||||||
|
|
||||||
|
const BeautySection = () => {
|
||||||
|
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 ">
|
||||||
|
<div className="w-full flex justify-end absolute ">
|
||||||
|
<svg
|
||||||
|
width="700"
|
||||||
|
height="400"
|
||||||
|
viewBox="0 0 1037 590"
|
||||||
|
fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
className="mr-[20px]"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M25.6693 0H1012C1025.81 0 1037 11.1929 1037 25V565C1037 578.807 1025.81 590 1012 590H371.096C362.569 590 354.631 585.654 350.036 578.472L4.60942 38.4715C-6.03513 21.8311 5.91551 0 25.6693 0Z"
|
||||||
|
fill="#219EBC"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="xs:px-0 lg:px-20">
|
||||||
|
<div className="w-full rtl 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>
|
||||||
|
|
||||||
|
<p className="mb-0">مشاهده بیشتر</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Swiper
|
||||||
|
spaceBetween={50}
|
||||||
|
slidesPerView={6.2}
|
||||||
|
onSlideChange={() => console.log("slide change")}
|
||||||
|
onSwiper={(swiper) => console.log(swiper)}
|
||||||
|
className="rtl relative mt-5"
|
||||||
|
breakpoints={{
|
||||||
|
320: {
|
||||||
|
slidesPerView: 1.6,
|
||||||
|
},
|
||||||
|
480: {
|
||||||
|
slidesPerView: 2,
|
||||||
|
},
|
||||||
|
768: {
|
||||||
|
slidesPerView: 3,
|
||||||
|
},
|
||||||
|
1024: {
|
||||||
|
slidesPerView: 4.5,
|
||||||
|
},
|
||||||
|
1440: {
|
||||||
|
slidesPerView: 6,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<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>
|
||||||
|
</Swiper>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default BeautySection;
|
||||||
|
|
@ -0,0 +1,71 @@
|
||||||
|
import Image from "next/image";
|
||||||
|
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";
|
||||||
|
|
||||||
|
const BetweenSexualSection = () => {
|
||||||
|
return (
|
||||||
|
<section>
|
||||||
|
<div className=" xs:px-5 lg:px-20 mt-10">
|
||||||
|
<div className="grid xs:grid-cols-1 lg:grid-cols-3 rtl ">
|
||||||
|
<div className=" rounded-3xl overflow-hidden relative z-10">
|
||||||
|
<div className="w-full">
|
||||||
|
<Image src={between} className=" object-cover" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-gray-100 relative xs:left-[0px] lg:left-[30px] xs:top-[-35px] lg:top-0 col-span-2 z-0 rounded-3xl xs:pr-5 lg:pr-[55px] xs:pt-[55px] lg:pt-10 pl-5">
|
||||||
|
<div className="xs:block lg:flex">
|
||||||
|
<h2 className="xs:text-2xl lg:text-3xl font-bold">
|
||||||
|
لوازم آرایشی وسمه
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<p className="mb-0 w-fit bg-sky-200 rounded-full py-1 px-3 xs:mr-0 lg:mr-2 xs:mt-2 lg:mt-0 xs:text-sm lg:text-base ">
|
||||||
|
به صرفه زیبا شـــــــــــــو
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="mb-0 text-gray-500 text-sm mt-3">
|
||||||
|
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
|
||||||
|
استفاده از طراحان گرافیک است
|
||||||
|
</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" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<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" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default BetweenSexualSection;
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
import MovingLogos from "plugins/MovingLogos/page";
|
||||||
|
import React from "react";
|
||||||
|
|
||||||
|
const BrandsLogoSection = () => {
|
||||||
|
return (
|
||||||
|
<section>
|
||||||
|
<div className=" p-5 relative overflow-hidden lg:mt-20">
|
||||||
|
<MovingLogos />
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default BrandsLogoSection;
|
||||||
|
|
@ -0,0 +1,123 @@
|
||||||
|
import React from "react";
|
||||||
|
import yek from "../../../public/images/1.png";
|
||||||
|
import doo from "../../../public/images/2.png";
|
||||||
|
import see from "../../../public/images/3.png";
|
||||||
|
import chr from "../../../public/images/4.png";
|
||||||
|
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";
|
||||||
|
|
||||||
|
const HeroSection = () => {
|
||||||
|
return (
|
||||||
|
<div className=" xs:mt-[150px] md:mt-[60px] xl:mt-[180px] relative">
|
||||||
|
<div className="text-center">
|
||||||
|
<h1 className=" xs:text-3xl lg:text-5xl xl:text-6xl text-white font-bold">
|
||||||
|
وسمه ، بن ماضـــــــــــــــــی زیبایی
|
||||||
|
</h1>
|
||||||
|
<h2 className="text-white mt-2 xs:text-sm lg:text-lg xl:text-xl font-light">
|
||||||
|
پلتفرم زیبایی ایرانی راهی برای زیبایی بهتر
|
||||||
|
</h2>
|
||||||
|
</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} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-center">
|
||||||
|
<p className="mb-0 text-white text-sm mt-2">عطر و ادکلن</p>
|
||||||
|
</div>
|
||||||
|
</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} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-center">
|
||||||
|
<p className="mb-0 text-white text-sm mt-2">وسایل بهداشتی</p>
|
||||||
|
</div>
|
||||||
|
</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} />{" "}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-center">
|
||||||
|
<p className="mb-0 text-white text-sm mt-2"> آرایشی چشم</p>
|
||||||
|
</div>
|
||||||
|
</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} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-center">
|
||||||
|
<p className="mb-0 text-white text-sm mt-2">آرایش صورت</p>
|
||||||
|
</div>
|
||||||
|
</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} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-center">
|
||||||
|
<p className="mb-0 text-white text-sm mt-2">بهداشت زنانه</p>
|
||||||
|
</div>
|
||||||
|
</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} />{" "}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-center">
|
||||||
|
<p className="mb-0 text-white text-sm mt-2">بهداشت مردانه</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default HeroSection;
|
||||||
|
|
@ -0,0 +1,290 @@
|
||||||
|
import Image from "next/image";
|
||||||
|
import PersianNumber from "plugins/PersianNumber";
|
||||||
|
import React from "react";
|
||||||
|
import { Swiper, 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 khane from "../../../public/images/khane.jpg";
|
||||||
|
|
||||||
|
const HomeSection = () => {
|
||||||
|
return (
|
||||||
|
<section className="xs:mb-0 lg:mb-20">
|
||||||
|
<div className=" xs:px-5 lg:px-20 mt-10">
|
||||||
|
<div className="grid xs:grid-cols-1 lg:grid-cols-3 rtl ">
|
||||||
|
<div className="rounded-3xl overflow-hidden relative z-10">
|
||||||
|
<div className="w-full">
|
||||||
|
<Image src={khane} className="object-cover" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-gray-100 relative xs:left-[0px] lg:left-[30px] xs:top-[-35px] lg:top-0 col-span-2 z-0 rounded-3xl xs:pr-5 lg:pr-[55px] xs:pt-[55px] lg:pt-3 xl:pt-10 pl-5 xs:pb-10 lg:pb-0">
|
||||||
|
<div className="xs:block lg:flex">
|
||||||
|
<h2 className="xs:text-2xl lg:text-xl xl:text-3xl font-bold">
|
||||||
|
لوازم بهداشتی منزل وسمه
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<p className="mb-0 w-fit bg-sky-200 rounded-full py-1 px-3 xs:mr-0 lg:mr-2 xs:mt-2 lg:mt-0 xs:text-sm lg:text-sm xl:text-base ">
|
||||||
|
به صرفه شـــــــــــــو
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Swiper
|
||||||
|
spaceBetween={50}
|
||||||
|
slidesPerView={6.2}
|
||||||
|
onSlideChange={() => console.log("slide change")}
|
||||||
|
onSwiper={(swiper) => console.log(swiper)}
|
||||||
|
className="rtl relative mt-4"
|
||||||
|
breakpoints={{
|
||||||
|
320: {
|
||||||
|
slidesPerView: 1.6,
|
||||||
|
},
|
||||||
|
480: {
|
||||||
|
slidesPerView: 2,
|
||||||
|
},
|
||||||
|
768: {
|
||||||
|
slidesPerView: 3,
|
||||||
|
},
|
||||||
|
1024: {
|
||||||
|
slidesPerView: 3.2,
|
||||||
|
},
|
||||||
|
1440: {
|
||||||
|
slidesPerView: 4,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<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>
|
||||||
|
</Swiper>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default HomeSection;
|
||||||
|
|
@ -0,0 +1,755 @@
|
||||||
|
import TimerDown from "@comp/TimerDown/TimerDown";
|
||||||
|
import Image from "next/image";
|
||||||
|
import PersianNumber from "plugins/PersianNumber";
|
||||||
|
import React from "react";
|
||||||
|
import { Swiper, 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";
|
||||||
|
|
||||||
|
const SurpriseSection = () => {
|
||||||
|
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 ">
|
||||||
|
<div className="w-full flex justify-end absolute ">
|
||||||
|
<svg
|
||||||
|
width="700"
|
||||||
|
height="400"
|
||||||
|
viewBox="0 0 1037 590"
|
||||||
|
fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
className="mr-[20px]"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M25.6693 0H1012C1025.81 0 1037 11.1929 1037 25V565C1037 578.807 1025.81 590 1012 590H371.096C362.569 590 354.631 585.654 350.036 578.472L4.60942 38.4715C-6.03513 21.8311 5.91551 0 25.6693 0Z"
|
||||||
|
fill="#EF3D59"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="xs:px-0 lg:px-20">
|
||||||
|
<div className="w-full rtl relative ">
|
||||||
|
<div className="pt-5 flex relative">
|
||||||
|
<p className="mb-0 text-white font-bold xs:text-sm lg:text-2xl xl:text-2xl">
|
||||||
|
پیشنهاد های ویژه امروز{" "}
|
||||||
|
</p>
|
||||||
|
<TimerDown />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Swiper
|
||||||
|
spaceBetween={50}
|
||||||
|
slidesPerView={6.2}
|
||||||
|
onSlideChange={() => console.log("slide change")}
|
||||||
|
onSwiper={(swiper) => console.log(swiper)}
|
||||||
|
className="rtl relative mt-5"
|
||||||
|
breakpoints={{
|
||||||
|
320: {
|
||||||
|
slidesPerView: 1.6,
|
||||||
|
},
|
||||||
|
480: {
|
||||||
|
slidesPerView: 2,
|
||||||
|
},
|
||||||
|
768: {
|
||||||
|
slidesPerView: 3,
|
||||||
|
},
|
||||||
|
1024: {
|
||||||
|
slidesPerView: 4.5,
|
||||||
|
},
|
||||||
|
1440: {
|
||||||
|
slidesPerView: 6,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<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-[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>
|
||||||
|
</Swiper>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SurpriseSection;
|
||||||
|
|
@ -0,0 +1,490 @@
|
||||||
|
"use client";
|
||||||
|
import React, { useEffect, useState } from "react";
|
||||||
|
import Image from "next/image";
|
||||||
|
import logo from "../../public/images/logo.png";
|
||||||
|
import logoWhite from "../../public/images/logo-white.png";
|
||||||
|
import logoBlack from "../../public/images/logo.png";
|
||||||
|
import divider from "../../public/images/divider.png";
|
||||||
|
import cover from "../../public/images/cover.png";
|
||||||
|
import { Menu } from "@headlessui/react";
|
||||||
|
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
import Link from "next/link";
|
||||||
|
import PersianNumber from "plugins/PersianNumber";
|
||||||
|
import CardCategoriesMobile from "@comp/Cards/CardCategoriesMobile/page";
|
||||||
|
|
||||||
|
const Navbar = ({ theme, dataNav }) => {
|
||||||
|
console.log(dataNav);
|
||||||
|
const [navItemHover, setNavItemHover] = useState(null);
|
||||||
|
const [isDesktop, setIsDesktop] = useState(null);
|
||||||
|
const [closeNavbar, setClosNavbar] = useState(false);
|
||||||
|
const [isScrolled, setIsScrolled] = useState(false);
|
||||||
|
const [smallDashboard, setSmallDashboard] = useState(false);
|
||||||
|
const [smallBasket, setSmallBasket] = useState(false);
|
||||||
|
|
||||||
|
const handleItemNavber = (index) => {
|
||||||
|
setNavItemHover(index);
|
||||||
|
console.log("index", index);
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const handleResize = () => {
|
||||||
|
setIsDesktop(window.innerWidth > 1000); // You can adjust the width threshold as needed
|
||||||
|
};
|
||||||
|
|
||||||
|
// Set initial window size
|
||||||
|
handleResize();
|
||||||
|
|
||||||
|
// Add event listener to handle window resize
|
||||||
|
window.addEventListener("resize", handleResize);
|
||||||
|
|
||||||
|
// Remove event listener on component unmount
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener("resize", handleResize);
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const handleScroll = () => {
|
||||||
|
const scrollTop = window.scrollY;
|
||||||
|
setIsScrolled(scrollTop > 200);
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener("scroll", handleScroll);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener("scroll", handleScroll);
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{isDesktop && (
|
||||||
|
<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 ${
|
||||||
|
theme == 0 ? "border-white" : "border-black"
|
||||||
|
} `}
|
||||||
|
>
|
||||||
|
<Image src={theme == 0 ? logoWhite : logoBlack} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex rtl py-5 ">
|
||||||
|
{2 == 2 ? (
|
||||||
|
<div className="flex">
|
||||||
|
<div className="bg-white py-2 px-5 rounded-xl text-sm ">
|
||||||
|
ورود / عضویت{" "}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="flex">
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
className="bg-white py-2 px-5 rounded-xl text-sm flex cursor-pointer "
|
||||||
|
onClick={() => setSmallDashboard(!smallDashboard)}
|
||||||
|
>
|
||||||
|
<p className="mb-0">حسین معصومی پور</p>
|
||||||
|
<div className="w-[20px] h-[20px] rounded-full bg-primary-500 mr-2"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{smallDashboard && (
|
||||||
|
<div
|
||||||
|
className={`relative !z-[100] tr03 ${
|
||||||
|
smallDashboard ? "opacity-100" : "opacity-0"
|
||||||
|
} `}
|
||||||
|
onMouseEnter={() => setSmallDashboard(true)}
|
||||||
|
onMouseLeave={() => setSmallDashboard(false)}
|
||||||
|
>
|
||||||
|
<div className="absolute w-[270px] bg-white rounded-xl mt-2 mr-[-87px] overflow-hidden">
|
||||||
|
<div>
|
||||||
|
<ul className="p-2 ">
|
||||||
|
<li className="group cursor-pointer">
|
||||||
|
<div className="flex justify-between p-2 rounded-full group-hover:bg-primary-200 tr03">
|
||||||
|
<p className="mb-0 text-sm text-gray-500 group-hover:text-black tr03">
|
||||||
|
داشبورد
|
||||||
|
</p>
|
||||||
|
<div className="w-[20px] h-[20px] rounded-full bg-primary-200 group-hover:bg-primary-500 tr03 "></div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li className="group cursor-pointer">
|
||||||
|
<div className="flex justify-between p-2 rounded-full group-hover:bg-primary-200 tr03">
|
||||||
|
<p className="mb-0 text-sm text-gray-500 group-hover:text-black tr03">
|
||||||
|
سفارشات
|
||||||
|
</p>
|
||||||
|
<div className="w-[20px] h-[20px] rounded-full bg-primary-200 group-hover:bg-primary-500 tr03 "></div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li className="group cursor-pointer">
|
||||||
|
<div className="flex justify-between p-2 rounded-full group-hover:bg-primary-200 tr03">
|
||||||
|
<p className="mb-0 text-sm text-gray-500 group-hover:text-black tr03">
|
||||||
|
پیگیری سفارش
|
||||||
|
</p>
|
||||||
|
<div className="w-[20px] h-[20px] rounded-full bg-primary-200 group-hover:bg-primary-500 tr03 "></div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li className="group cursor-pointer">
|
||||||
|
<div className="flex justify-between p-2 rounded-full group-hover:bg-primary-200 tr03">
|
||||||
|
<p className="mb-0 text-sm text-gray-500 group-hover:text-black tr03">
|
||||||
|
پشتیبانی{" "}
|
||||||
|
</p>
|
||||||
|
<div className="w-[20px] h-[20px] rounded-full bg-primary-200 group-hover:bg-primary-500 tr03 "></div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li className="flex justify-between p-2 rounded-full group hover:bg-red-200 tr03 cursor-pointer">
|
||||||
|
<p className="mb-0 text-sm text-red-500 group-hover: ">
|
||||||
|
خروج{" "}
|
||||||
|
</p>
|
||||||
|
<div className="w-[20px] h-[20px] rounded-full bg-red-200 group-hover:bg-red-500 tr03 "></div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="mr-2">
|
||||||
|
<div
|
||||||
|
className="bg-secondary-600 py-2 px-5 rounded-xl text-sm flex cursor-pointer "
|
||||||
|
onMouseEnter={() => setSmallBasket(true)}
|
||||||
|
onClick={() => setSmallBasket(false)}
|
||||||
|
>
|
||||||
|
<p className="mb-0 text-white">سبد خرید</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{smallBasket && (
|
||||||
|
<div
|
||||||
|
className={`relative !z-[100] tr03 ${
|
||||||
|
smallBasket ? "opacity-100" : "opacity-0"
|
||||||
|
} `}
|
||||||
|
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="text-center p-3">
|
||||||
|
<p className="mb-0 text-sm pb-3">
|
||||||
|
<PersianNumber
|
||||||
|
number={5}
|
||||||
|
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>
|
||||||
|
<CardCategoriesMobile />
|
||||||
|
<CardCategoriesMobile />
|
||||||
|
<CardCategoriesMobile />
|
||||||
|
<CardCategoriesMobile />
|
||||||
|
<CardCategoriesMobile />
|
||||||
|
</div>
|
||||||
|
</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>
|
||||||
|
<button className="btn btn-primary text-sm w-full py-3 rounded-3xl">
|
||||||
|
{" "}
|
||||||
|
ثبت خرید
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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"
|
||||||
|
} `}
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
className={`flex justify-center rtl pt-3 tr03 z-50 tr03 ${
|
||||||
|
navItemHover != null ? "bg-navbar rounded-xl " : "bg-transparent"
|
||||||
|
}${
|
||||||
|
isScrolled
|
||||||
|
? " !fixed top-0 w-full bg-white "
|
||||||
|
: " relative top-[-18px] "
|
||||||
|
}
|
||||||
|
|
||||||
|
${theme == 0 ? "" : "!bg-white"}`}
|
||||||
|
>
|
||||||
|
<div className="flex rtl">
|
||||||
|
{dataNav?.map((e, index) => (
|
||||||
|
<p
|
||||||
|
className={`mb-0 pb-4 px-2 tr03 cursor-pointer ${
|
||||||
|
navItemHover == index
|
||||||
|
? "font-bold border-b-[3px] border-gray-400 text-black "
|
||||||
|
: "border-b-[3px] border-transparent "
|
||||||
|
}
|
||||||
|
${theme == 0 ? "text-gray-300" : "text-gray-900"}
|
||||||
|
${theme == 0 && isScrolled ? "text-gray-900" : ""}`}
|
||||||
|
onMouseEnter={() => handleItemNavber(index)}
|
||||||
|
onMouseLeave={() => setNavItemHover(null)}
|
||||||
|
>
|
||||||
|
{e.name}{" "}
|
||||||
|
</p>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-red-600 mb-4 px-4 rounded-full">
|
||||||
|
<p className="mb-0 text-white">بمب امروز </p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
className="flex justify-center "
|
||||||
|
onMouseEnter={() => setNavItemHover(navItemHover)}
|
||||||
|
onMouseLeave={() => setNavItemHover(null)}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={` w-3/4 mr-0 z-50 ${
|
||||||
|
isScrolled ? "fixed top-10 mt-[29px]" : "relative top-[-3px]"
|
||||||
|
} `}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={`flex ${
|
||||||
|
navItemHover != null ? " opacity-100" : "hidden opacity-0"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div className="w-[60px] absolute left-0 rotate-180 ml-[-60px] mt-[-15px] ">
|
||||||
|
<Image src={divider} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
className={`block absolute w-full bg-white 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 ">
|
||||||
|
<ul className="flex flex-col flex-wrap max-h-96 list-none ">
|
||||||
|
{navItemHover != null &&
|
||||||
|
dataNav &&
|
||||||
|
dataNav[navItemHover].children.map((e) => (
|
||||||
|
<li className=" my-2">
|
||||||
|
<div className="flex">
|
||||||
|
<div className="w-[10px] h-[10px] rounded-full bg-primary-500 mt-1 mx-2"></div>
|
||||||
|
<p className="mb-0 font-bold text-sm hover:text-primary-500 tr03 cursor-pointer">
|
||||||
|
{e.name}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{e.children.length > 0 && (
|
||||||
|
<div>
|
||||||
|
<svg
|
||||||
|
width="10"
|
||||||
|
height="10"
|
||||||
|
viewBox="0 0 923 1697"
|
||||||
|
fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
className="mx-1 mt-[3px]"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M714 209L209.293 848.115L714 1487.23"
|
||||||
|
stroke="blue"
|
||||||
|
stroke-width="200"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* ======hear==== */}
|
||||||
|
{e.children && e.children.length > 0 && (
|
||||||
|
<div>
|
||||||
|
{e.children.map((child) => (
|
||||||
|
<p
|
||||||
|
key={child.id}
|
||||||
|
className="mb-0 mt-2 text-[14px] mr-2 hover:bg-primary-400 hover:text-white w-fit rounded-full px-2 tr03 cursor-pointer"
|
||||||
|
>
|
||||||
|
{child.name}
|
||||||
|
</p>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className=" mx-2 p-5 w-10/12">
|
||||||
|
<div className=" mx-2 h-[300px] w-full bg-red-900 rounded-[60px] overflow-hidden relative border-[3px] border-gray-50">
|
||||||
|
<div className="absolute">
|
||||||
|
<Image
|
||||||
|
src={cover}
|
||||||
|
className="h-[300px] object-cover brightness-50"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className=" mt-[90px] relative">
|
||||||
|
<div className="flex justify-center">
|
||||||
|
<div className="w-[50px] h-[50px] rounded-full bg-white mt-5 ">
|
||||||
|
<svg
|
||||||
|
width="20"
|
||||||
|
height="20"
|
||||||
|
viewBox="0 0 356 357"
|
||||||
|
fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
className="mx-auto mt-4 mr-3 opacity-30"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M0 1.17188L1.17509 356.17L354.586 177.499L0 1.17188Z"
|
||||||
|
fill="black"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p className="mb-0 w-full text-white bg-navbar mt-3 text-center">
|
||||||
|
چرا آرایشی وسمه ؟
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="w-[60px] absolute right-0 rotate-90 mr-[-60px] mt-[-15px] ">
|
||||||
|
<Image src={divider} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{!isDesktop && (
|
||||||
|
<>
|
||||||
|
<div
|
||||||
|
className={` p-5 flex justify-between rtl z-[50] ${
|
||||||
|
isScrolled ? " !fixed top-0 w-full bg-white " : " relative "
|
||||||
|
} `}
|
||||||
|
>
|
||||||
|
{" "}
|
||||||
|
<div className="w-[90px] z-10 ">
|
||||||
|
<Image src={theme == 0 ? logoWhite : logoBlack} />
|
||||||
|
</div>
|
||||||
|
<div onClick={() => setClosNavbar(true)}>
|
||||||
|
<svg
|
||||||
|
width="20"
|
||||||
|
height="30"
|
||||||
|
viewBox="0 0 144 217"
|
||||||
|
fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M58.047 184.449C57.9469 180.136 56.5336 175.951 53.9858 172.422C51.4379 168.893 47.8699 166.179 43.7331 164.624C39.5962 163.069 35.0762 162.741 30.7447 163.684C26.4132 164.626 22.4647 166.796 19.3985 169.918C16.3323 173.041 14.2862 176.976 13.5188 181.226C12.7515 185.476 13.2974 189.85 15.0875 193.795C16.8776 197.74 19.8316 201.079 23.5758 203.39C27.32 205.7 31.6863 206.878 36.1226 206.776"
|
||||||
|
stroke="white"
|
||||||
|
stroke-width="18.75"
|
||||||
|
stroke-linecap="round"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M56.2765 108.128C55.9971 96.0846 45.7282 86.5546 33.3404 86.842C20.9525 87.1294 11.1366 97.1253 11.416 109.168C11.6954 121.212 21.9642 130.742 34.3521 130.454C46.74 130.167 56.5559 120.171 56.2765 108.128Z"
|
||||||
|
stroke="#BE2222"
|
||||||
|
stroke-width="18.75"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M31.5698 10.5202C36.0061 10.4173 40.3725 11.5956 44.1167 13.9061C47.8609 16.2166 50.8148 19.5556 52.605 23.5007C54.3951 27.4459 54.941 31.8201 54.1737 36.0701C53.4063 40.3202 51.3602 44.2552 48.294 47.3776C45.2278 50.5001 41.2793 52.6696 36.9478 53.612C32.6163 54.5543 28.0963 54.2271 23.9594 52.6717C19.8225 51.1163 16.2546 48.4027 13.7067 44.8738C11.1589 41.345 9.74554 37.1595 9.64549 32.8467"
|
||||||
|
stroke="white"
|
||||||
|
stroke-width="18.75"
|
||||||
|
stroke-linecap="round"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M140.956 181.409C141.186 164.842 127.942 151.226 111.375 150.996C94.8082 150.766 81.1916 164.009 80.9615 180.576C80.7314 197.143 93.9751 210.76 110.542 210.99C127.109 211.22 140.726 197.976 140.956 181.409Z"
|
||||||
|
fill="white"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M141.997 106.417C142.227 89.8497 128.983 76.233 112.416 76.0029C95.8492 75.7729 82.2326 89.0165 82.0025 105.583C81.7724 122.15 95.0161 135.767 111.583 135.997C128.15 136.227 141.767 122.984 141.997 106.417Z"
|
||||||
|
fill="white"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M143.039 31.4239C143.269 14.857 130.025 1.24031 113.458 1.01025C96.8912 0.780182 83.2746 14.0238 83.0445 30.5908C82.8144 47.1577 96.0581 60.7744 112.625 61.0045C129.192 61.2345 142.809 47.9909 143.039 31.4239Z"
|
||||||
|
fill="white"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="sm:block lg:hidden ">
|
||||||
|
<div
|
||||||
|
className={`fixed w-[250px] top-0 left-0 z-50 tr03 ${
|
||||||
|
closeNavbar ? "" : "-translate-x-full"
|
||||||
|
} `}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={`absolute mt-2 tr03 z-5 ${
|
||||||
|
closeNavbar ? "ml-[255px] " : "ml-[-30px]"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="w-[30px] h-[30px] bg-white shadow rounded-full text-center "
|
||||||
|
onClick={
|
||||||
|
() => setClosNavbar(false)
|
||||||
|
// setOpenResIgType(false) &
|
||||||
|
// setResponsiveNavBarItemStep(0)
|
||||||
|
}
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
<div className=" bg-white h-[100vh] relative overflow-hidden tr03 shadow pt-2 ">
|
||||||
|
<div className="text-center">
|
||||||
|
<div className=" bg-dark rounded-full mx-auto ">
|
||||||
|
<div className="text-center">
|
||||||
|
<Link href="/">
|
||||||
|
<div className="text-center mt-5 ">
|
||||||
|
<Image
|
||||||
|
src={logo}
|
||||||
|
width={50}
|
||||||
|
height={50}
|
||||||
|
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="w-[100px] h-[1px] bg-gray-300 mx-auto mt-4 opacity-50"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Navbar;
|
||||||
|
|
@ -0,0 +1,95 @@
|
||||||
|
"use client";
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import Link from "next/link";
|
||||||
|
import PersianNumber from "plugins/PersianNumber";
|
||||||
|
|
||||||
|
const TimerDown = () => {
|
||||||
|
const targetTimestamp = 1704170967 * 1000; // Convert to milliseconds
|
||||||
|
|
||||||
|
const [timeRemaining, setTimeRemaining] = useState({
|
||||||
|
days: 0,
|
||||||
|
hours: 0,
|
||||||
|
minutes: 0,
|
||||||
|
seconds: 0,
|
||||||
|
milliseconds: 0,
|
||||||
|
});
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const interval = setInterval(() => {
|
||||||
|
const now = new Date();
|
||||||
|
const timeDifference = targetTimestamp - now.getTime();
|
||||||
|
|
||||||
|
if (timeDifference > 0) {
|
||||||
|
const days = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
|
||||||
|
const hours = Math.floor(
|
||||||
|
(timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
|
||||||
|
);
|
||||||
|
const minutes = Math.floor(
|
||||||
|
(timeDifference % (1000 * 60 * 60)) / (1000 * 60)
|
||||||
|
);
|
||||||
|
const seconds = Math.floor((timeDifference % (1000 * 60)) / 1000);
|
||||||
|
const milliseconds = timeDifference % 1000;
|
||||||
|
|
||||||
|
setTimeRemaining({
|
||||||
|
days,
|
||||||
|
hours,
|
||||||
|
minutes,
|
||||||
|
seconds,
|
||||||
|
milliseconds,
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
clearInterval(interval);
|
||||||
|
}
|
||||||
|
}, 1000);
|
||||||
|
|
||||||
|
return () => clearInterval(interval);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex justify-center ltr border-[2px] border-white realtive mr-5 px-2 rounded-full ">
|
||||||
|
<div className="">
|
||||||
|
<p className="mb-0 = text-center text-white font-bold pt-1">
|
||||||
|
<PersianNumber
|
||||||
|
number={timeRemaining.days}
|
||||||
|
style={"text-[27px] text-white"}
|
||||||
|
/>
|
||||||
|
<small className="text-[10px] px-2">:</small>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="">
|
||||||
|
<p className="mb-0 text-center text-white font-bold pt-1">
|
||||||
|
<PersianNumber
|
||||||
|
number={timeRemaining.hours}
|
||||||
|
style={"text-[27px] text-white"}
|
||||||
|
/>
|
||||||
|
<small className="text-[10px] px-2">:</small>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className=" ">
|
||||||
|
<p className="mb-0 text-center text-white font-bold pt-1">
|
||||||
|
<PersianNumber
|
||||||
|
number={timeRemaining.minutes}
|
||||||
|
style={"text-[27px] text-white"}
|
||||||
|
/>
|
||||||
|
<small className="text-[10px] px-2">:</small>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="">
|
||||||
|
<Link href="/login">
|
||||||
|
{" "}
|
||||||
|
<p className="mb-0 text-center text-white font-bold pt-1">
|
||||||
|
<PersianNumber
|
||||||
|
number={timeRemaining.seconds}
|
||||||
|
style={"text-[27px] text-white"}
|
||||||
|
/>
|
||||||
|
</p>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default TimerDown;
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"baseUrl": ".",
|
||||||
|
"module": "commonjs",
|
||||||
|
"target": "es2020",
|
||||||
|
"paths": {
|
||||||
|
"@comp/*": ["components/*"],
|
||||||
|
"@styles/*": ["styles/*"],
|
||||||
|
"@assets/*": ["assets/*"],
|
||||||
|
"@ctx/*": ["Contexts/*"],
|
||||||
|
"@img/*": ["public/images/*"],
|
||||||
|
"@layout/*": ["layout/*"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"include": ["next-env.d.ts", "**/*.ts", "**/*.js", "**/*.jsx"],
|
||||||
|
"exclude": ["node_modules"]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
/** @type {import('next').NextConfig} */
|
||||||
|
const nextConfig = {}
|
||||||
|
|
||||||
|
module.exports = nextConfig
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,32 @@
|
||||||
|
{
|
||||||
|
"name": "vesmeh",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"dev": "next dev",
|
||||||
|
"build": "next build",
|
||||||
|
"start": "next start",
|
||||||
|
"lint": "next lint"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@headlessui/react": "^1.7.17",
|
||||||
|
"axios": "^1.6.5",
|
||||||
|
"framer-motion": "^10.16.16",
|
||||||
|
"jalali-moment": "^3.3.11",
|
||||||
|
"next": "14.0.4",
|
||||||
|
"rc-slider": "^10.5.0",
|
||||||
|
"react": "^18",
|
||||||
|
"react-dom": "^18",
|
||||||
|
"react-grid-gallery": "^1.0.1-alpha.0",
|
||||||
|
"react-image-gallery": "^1.3.0",
|
||||||
|
"react-toastify": "^9.1.3",
|
||||||
|
"swiper": "^11.0.5"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"autoprefixer": "^10.4.16",
|
||||||
|
"eslint": "^8",
|
||||||
|
"eslint-config-next": "14.0.4",
|
||||||
|
"postcss": "^8.4.32",
|
||||||
|
"tailwindcss": "^3.4.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,43 @@
|
||||||
|
import axios from "axios";
|
||||||
|
|
||||||
|
export const getToken = () => {
|
||||||
|
return "Bearer " + localStorage.token;
|
||||||
|
};
|
||||||
|
|
||||||
|
const Chapar = axios.create({
|
||||||
|
baseURL: process.env.NEXT_PUBLIC_API_URL,
|
||||||
|
timeout: 10000,
|
||||||
|
headers: {
|
||||||
|
common: {
|
||||||
|
"Content-type": "application/json",
|
||||||
|
"Access-Control-Allow-Origin": "*",
|
||||||
|
...(typeof window !== "undefined" &&
|
||||||
|
localStorage.token && {
|
||||||
|
Authorization: getToken(),
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
Chapar.interceptors.response.use(
|
||||||
|
function (response) {
|
||||||
|
// Any status code that lie within the range of 2xx cause this function to trigger
|
||||||
|
// Do something with response data
|
||||||
|
|
||||||
|
return response.data;
|
||||||
|
},
|
||||||
|
function (error, status) {
|
||||||
|
// Any status codes that falls outside the range of 2xx cause this function to trigger
|
||||||
|
// Do something with response error
|
||||||
|
// ;
|
||||||
|
|
||||||
|
if (error.response.status === 401) {
|
||||||
|
localStorage.removeItem("token");
|
||||||
|
window.location.href = "/login";
|
||||||
|
}
|
||||||
|
|
||||||
|
return Promise.reject({ error, status: error?.response?.status });
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
export default Chapar;
|
||||||
|
|
@ -0,0 +1,72 @@
|
||||||
|
"use client ";
|
||||||
|
|
||||||
|
import React from "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 Image from "next/image";
|
||||||
|
|
||||||
|
const GalleryBox = () => {
|
||||||
|
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} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex overflow-x-auto p-3 " id="swich-scrollbar">
|
||||||
|
<div className="rounded-3xl bg-gray-200 p-3 ml-2 inline-block">
|
||||||
|
<div className="xs:w-[50px] lg:w-[80px]">
|
||||||
|
<Image src={p1} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="rounded-3xl bg-gray-200 p-3 ml-2">
|
||||||
|
<div className="xs:w-[50px] lg:w-[80px]">
|
||||||
|
<Image src={p2} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="rounded-3xl bg-gray-200 p-3 ml-2">
|
||||||
|
<div className="xs:w-[50px] lg:w-[80px]">
|
||||||
|
<Image src={p3} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="rounded-3xl bg-gray-200 p-3 ml-2">
|
||||||
|
<div className="xs:w-[50px] lg:w-[80px]">
|
||||||
|
<Image src={p4} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="rounded-3xl bg-gray-200 p-3 ml-2 inline-block">
|
||||||
|
<div className="xs:w-[50px] lg:w-[80px]">
|
||||||
|
{" "}
|
||||||
|
<Image src={p1} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="rounded-3xl bg-gray-200 p-3 ml-2">
|
||||||
|
<div className="xs:w-[50px] lg:w-[80px]">
|
||||||
|
{" "}
|
||||||
|
<Image src={p2} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="rounded-3xl bg-gray-200 p-3 ml-2">
|
||||||
|
<div className="xs:w-[50px] lg:w-[80px]">
|
||||||
|
{" "}
|
||||||
|
<Image src={p3} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="rounded-3xl bg-gray-200 p-3 ml-2">
|
||||||
|
<div className="xs:w-[50px] lg:w-[80px]">
|
||||||
|
{" "}
|
||||||
|
<Image src={p4} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default GalleryBox;
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
const HasPermission = (per, permissions) => {
|
||||||
|
return permissions?.includes(per);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default HasPermission;
|
||||||
|
|
@ -0,0 +1,100 @@
|
||||||
|
import React from "react";
|
||||||
|
|
||||||
|
const Input = ({
|
||||||
|
id,
|
||||||
|
lable,
|
||||||
|
name,
|
||||||
|
type,
|
||||||
|
textarea,
|
||||||
|
mt,
|
||||||
|
disabled,
|
||||||
|
theme,
|
||||||
|
inputEvent,
|
||||||
|
inputFocus,
|
||||||
|
style,
|
||||||
|
value,
|
||||||
|
readOnly,
|
||||||
|
validator,
|
||||||
|
validatorData,
|
||||||
|
select,
|
||||||
|
selectData,
|
||||||
|
defaultValue,
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
class={`relative ${mt ? `mt-${mt}` : "mt-8"} ${
|
||||||
|
disabled ? "opacity-40" : ""
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{textarea ? (
|
||||||
|
<textarea
|
||||||
|
type="text"
|
||||||
|
className={`peer w-full border-b placeholder:text-transparent relative rtl ${
|
||||||
|
theme == 1 ? "form-control-white" : "form-control"
|
||||||
|
}`}
|
||||||
|
placeholder={name}
|
||||||
|
disabled={disabled ? true : false}
|
||||||
|
readOnly={readOnly ? true : false}
|
||||||
|
value={value}
|
||||||
|
onChange={inputEvent}
|
||||||
|
/>
|
||||||
|
) : select ? (
|
||||||
|
<select
|
||||||
|
className={`peer w-full border-b placeholder:text-transparent rtl ${
|
||||||
|
theme == 1 ? "form-control-white" : "form-control"
|
||||||
|
} ${style ? style : ""} relative`}
|
||||||
|
placeholder={name}
|
||||||
|
disabled={disabled ? true : false}
|
||||||
|
readOnly={readOnly ? true : false}
|
||||||
|
value={value}
|
||||||
|
onChange={inputEvent}
|
||||||
|
id={id}
|
||||||
|
defaultValue=""
|
||||||
|
>
|
||||||
|
{defaultValue && (
|
||||||
|
<option value="" disabled hidden>
|
||||||
|
{defaultValue}
|
||||||
|
</option>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{selectData &&
|
||||||
|
selectData.map((e) => <option value={e.value}>{e.key}</option>)}
|
||||||
|
</select>
|
||||||
|
) : (
|
||||||
|
<input
|
||||||
|
type={type}
|
||||||
|
id={id}
|
||||||
|
className={`peer w-full border-b placeholder:text-transparent rtl ${
|
||||||
|
theme == 1 ? "form-control-white" : "form-control"
|
||||||
|
} ${style ? style : ""} relative`}
|
||||||
|
placeholder={name}
|
||||||
|
disabled={disabled ? true : false}
|
||||||
|
readOnly={readOnly ? true : false}
|
||||||
|
value={value}
|
||||||
|
onChange={inputEvent}
|
||||||
|
onFocus={inputFocus}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="flex justify-start w-full absolute mt-[-2px]">
|
||||||
|
<small className="absolute ">
|
||||||
|
{" "}
|
||||||
|
{validator ? <>{validatorData}</> : ""}
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<label
|
||||||
|
htmlFor={id}
|
||||||
|
className={`absolute right-0 mr-3 px-1 -translate-y-3 ${
|
||||||
|
theme == 1 ? "bg-white" : "bg-body-100"
|
||||||
|
} text-sm duration-100 ease-linear peer-placeholder-shown:translate-y-[15px] peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-500 peer-focus:mr-6 peer-focus:-translate-y-3 peer-focus:px-1 peer-focus:text-sm`}
|
||||||
|
>
|
||||||
|
{lable}
|
||||||
|
</label>
|
||||||
|
|
||||||
|
{/* <small>رمز اشتباه</small> */}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Input;
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
const iranPhoneRegex = new RegExp("^(\\+98|0)?9\\d{9}$");
|
||||||
|
|
||||||
|
const validateIranPhone = (phoneNumber) => {
|
||||||
|
return iranPhoneRegex.test(phoneNumber);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default validateIranPhone;
|
||||||
|
|
@ -0,0 +1,28 @@
|
||||||
|
import React, { useContext } from "react";
|
||||||
|
|
||||||
|
import AppContext from "@ctx/AppContext";
|
||||||
|
import gif from "@img/loading.gif";
|
||||||
|
import Image from "next/image";
|
||||||
|
|
||||||
|
const Loading = ({ rateId }) => {
|
||||||
|
const CTX = useContext(AppContext);
|
||||||
|
const loading = CTX.state.loading;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div
|
||||||
|
className={`fixed w-full tr03 z-50 ${
|
||||||
|
loading ? "bottom-5 " : "bottom-[-100px] "
|
||||||
|
} `}
|
||||||
|
>
|
||||||
|
<div className="bg-primary-300 w-fit rounded-full px-1 py-2 flex rtl m-3 ">
|
||||||
|
<p className="mb-0 text-white mx-2 blacj ">لطفا صبر کنید</p>
|
||||||
|
<div className="w-[30px] ml-3">
|
||||||
|
<Image src={gif} alt="" className="" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default Loading;
|
||||||
|
|
@ -0,0 +1,91 @@
|
||||||
|
// MovingLogos.js
|
||||||
|
"use client";
|
||||||
|
import React, { useEffect } from "react";
|
||||||
|
|
||||||
|
import logobrand5 from "../../public/images/logobrand/5.png";
|
||||||
|
import logobrand4 from "../../public/images/logobrand/4.png";
|
||||||
|
import logobrand3 from "../../public/images/logobrand/3.png";
|
||||||
|
import logobrand2 from "../../public/images/logobrand/2.png";
|
||||||
|
import logobrand6 from "../../public/images/logobrand/6.png";
|
||||||
|
import Image from "next/image";
|
||||||
|
|
||||||
|
// import styles from "./MovingLogos.module.css";
|
||||||
|
|
||||||
|
const MovingLogos = () => {
|
||||||
|
const logos = [
|
||||||
|
{ id: 1, logo: logobrand5 },
|
||||||
|
{ id: 2, logo: logobrand4 },
|
||||||
|
{ id: 3, logo: logobrand3 },
|
||||||
|
{ id: 4, logo: logobrand6 },
|
||||||
|
{ id: 1, logo: logobrand5 },
|
||||||
|
{ id: 2, logo: logobrand4 },
|
||||||
|
{ id: 3, logo: logobrand3 },
|
||||||
|
{ id: 4, logo: logobrand2 },
|
||||||
|
{ id: 1, logo: logobrand5 },
|
||||||
|
{ id: 2, logo: logobrand4 },
|
||||||
|
{ id: 3, logo: logobrand3 },
|
||||||
|
{ id: 4, logo: logobrand6 },
|
||||||
|
{ id: 1, logo: logobrand5 },
|
||||||
|
{ id: 2, logo: logobrand4 },
|
||||||
|
{ id: 3, logo: logobrand6 },
|
||||||
|
{ id: 4, logo: logobrand2 },
|
||||||
|
{ id: 1, logo: logobrand5 },
|
||||||
|
{ id: 2, logo: logobrand4 },
|
||||||
|
{ id: 3, logo: logobrand3 },
|
||||||
|
{ id: 4, logo: logobrand2 },
|
||||||
|
];
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const moveLogos = () => {
|
||||||
|
logos.forEach((logo) => {
|
||||||
|
const logoElement = document.getElementById(`logo-${logo.id}`);
|
||||||
|
if (logoElement) {
|
||||||
|
logoElement.style.transform = "translateX(-10px)"; // Adjust the value based on your preference
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const intervalId = setInterval(moveLogos, 100); // Adjust the interval duration based on your preference
|
||||||
|
|
||||||
|
return () => clearInterval(intervalId);
|
||||||
|
}, [logos]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="">
|
||||||
|
{/* {logos.map((e) => (
|
||||||
|
<div className="w-[100px]">
|
||||||
|
<Image
|
||||||
|
key={e.id}
|
||||||
|
id={`logo-${e.id}`}
|
||||||
|
src={e.logo}
|
||||||
|
alt={`Logo ${e.id}`}
|
||||||
|
// className={styles.logo}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))} */}
|
||||||
|
|
||||||
|
<div className="xs:w-4/5 lg:w-3/5 mx-auto">
|
||||||
|
<div className="w-full inline-flex flex-nowrap overflow-hidden [mask-image:_linear-gradient(to_right,transparent_0,_black_100px,_black_calc(100%-100px),transparent_100%)]">
|
||||||
|
<ul
|
||||||
|
x-ref="logos"
|
||||||
|
className="flex items-center justify-center md:justify-start [&_li]:mx-5 [&_img]:max-w-none animate-infinite-scroll hover:animate-infinite-scroll2"
|
||||||
|
>
|
||||||
|
{logos.map((e) => (
|
||||||
|
<li className="w-[]">
|
||||||
|
<Image
|
||||||
|
key={e.id}
|
||||||
|
id={`logo-${e.id}`}
|
||||||
|
src={e.logo}
|
||||||
|
alt={`Logo ${e.id}`}
|
||||||
|
className="xs:w-[60px] lg:w-[100px]"
|
||||||
|
/>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default MovingLogos;
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
const PersianNumber = ({ number, isCost, size, bold, style }) => {
|
||||||
|
if (number || number === 0) {
|
||||||
|
const persianMap = "۰۱۲۳۴۵۶۷۸۹".split("");
|
||||||
|
const formatNumber = isCost
|
||||||
|
? number.toLocaleString().replace(/\d/g, (m) => persianMap[parseInt(m)])
|
||||||
|
: number.toString().replace(/\d/g, (m) => persianMap[parseInt(m)]);
|
||||||
|
return (
|
||||||
|
<span
|
||||||
|
className={`text-[${size ? size : ""}px] ${
|
||||||
|
bold ? "font-bold" : ""
|
||||||
|
} text-sm ${style}`}
|
||||||
|
>
|
||||||
|
{formatNumber}
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
} else return null;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PersianNumber;
|
||||||
|
|
@ -0,0 +1,33 @@
|
||||||
|
import React from "react";
|
||||||
|
import "rc-slider/assets/index.css";
|
||||||
|
import Slider from "rc-slider";
|
||||||
|
|
||||||
|
const RangeSlider = ({ min, max, onChange }) => {
|
||||||
|
const handleStyle = {
|
||||||
|
borderColor: "#2189A8",
|
||||||
|
height: 25,
|
||||||
|
width: 25,
|
||||||
|
marginLeft: 0,
|
||||||
|
marginTop: -9,
|
||||||
|
backgroundColor: "white",
|
||||||
|
};
|
||||||
|
|
||||||
|
const trackStyle = [{ backgroundColor: "#2189A8", height: 8 }];
|
||||||
|
|
||||||
|
const railStyle = { backgroundColor: "#e6e6e6", height: 8 };
|
||||||
|
return (
|
||||||
|
<Slider
|
||||||
|
range
|
||||||
|
min={min}
|
||||||
|
max={max}
|
||||||
|
allowCross={false}
|
||||||
|
defaultValue={[min, max]}
|
||||||
|
onChange={onChange}
|
||||||
|
handleStyle={[handleStyle, handleStyle]}
|
||||||
|
trackStyle={trackStyle}
|
||||||
|
railStyle={railStyle}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default RangeSlider;
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
module.exports = {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
}
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 194 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 285 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 152 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 142 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 203 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 122 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 182 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 189 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 190 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 166 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 123 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 477 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 448 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 496 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 130 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 90 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 75 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 180 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 132 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 223 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.3 KiB |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>
|
||||||
|
After Width: | Height: | Size: 629 B |
|
|
@ -0,0 +1,412 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import CardCategories from "@comp/Cards/CardCategories/page";
|
||||||
|
import CardSurprise from "@comp/Cards/CardSurprise/page";
|
||||||
|
import Navbar from "@comp/Navbar/page";
|
||||||
|
import PersianNumber from "plugins/PersianNumber";
|
||||||
|
import React, { useState } from "react";
|
||||||
|
import { Switch } from "@headlessui/react";
|
||||||
|
import RangeSlider from "plugins/RangeSlider/page";
|
||||||
|
import Footer from "@comp/Footer/page";
|
||||||
|
import CardCategoriesMobile from "@comp/Cards/CardCategoriesMobile/page";
|
||||||
|
|
||||||
|
const page = () => {
|
||||||
|
const [isChecked, setIsChecked] = useState(false);
|
||||||
|
|
||||||
|
const handleCheckboxChange = () => {
|
||||||
|
setIsChecked(!isChecked);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleRangeChange = (values) => {
|
||||||
|
console.log("Range values:", values);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className=" pb-20">
|
||||||
|
<Navbar theme={1} />
|
||||||
|
<div className="xs:block lg:hidden px-5">
|
||||||
|
<div className="mt-5">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control bg-white !border-[0px] border-gray-100 rounded-lg text-right focus:!border-[0px] !text-sm "
|
||||||
|
placeholder="دستت برای جست و جو بازه"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="absolute mt-[-46px] ml-[6px]">
|
||||||
|
<div className="w-[40px] h-[40px] bg-gray-100 rounded-lg pt-2">
|
||||||
|
<svg
|
||||||
|
width="22"
|
||||||
|
height="22"
|
||||||
|
viewBox="0 0 275 275"
|
||||||
|
fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
className="mx-auto"
|
||||||
|
>
|
||||||
|
<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="text-right flex rtl mt-5">
|
||||||
|
<p className="mb-0 rtl text-[12px] text-gray-400 mx-1"> سلاکم</p>
|
||||||
|
<span>
|
||||||
|
{" "}
|
||||||
|
<svg
|
||||||
|
width="7"
|
||||||
|
height="7"
|
||||||
|
viewBox="0 0 151 89"
|
||||||
|
fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
className="mt-2 rotate-90 opacity-30"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M13.1436 14.2219L76.3596 75.9976L138.135 12.7815"
|
||||||
|
stroke="black"
|
||||||
|
stroke-width="25"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<p className="mb-0 rtl text-[12px] text-gray-400 mx-1">خانه اصلی</p>
|
||||||
|
</div> */}
|
||||||
|
|
||||||
|
<div className="flex my-5">
|
||||||
|
<div className="w-full flex rtl justify-center">
|
||||||
|
<div>
|
||||||
|
<svg
|
||||||
|
width="20"
|
||||||
|
height="20"
|
||||||
|
viewBox="0 0 238 214"
|
||||||
|
fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
className="mx-2 opacity-30"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M31.5 107V7M206.5 207V169.5M31.5 207V157M206.5 119.5V7M119 44.5V7M119 207V94.5"
|
||||||
|
stroke="black"
|
||||||
|
stroke-width="12.5"
|
||||||
|
stroke-linecap="round"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M31.5 157C45.3071 157 56.5 145.807 56.5 132C56.5 118.193 45.3071 107 31.5 107C17.6929 107 6.5 118.193 6.5 132C6.5 145.807 17.6929 157 31.5 157Z"
|
||||||
|
stroke="black"
|
||||||
|
stroke-width="12.5"
|
||||||
|
stroke-linecap="round"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M119 94.5C132.807 94.5 144 83.3071 144 69.5C144 55.6929 132.807 44.5 119 44.5C105.193 44.5 94 55.6929 94 69.5C94 83.3071 105.193 94.5 119 94.5Z"
|
||||||
|
stroke="black"
|
||||||
|
stroke-width="12.5"
|
||||||
|
stroke-linecap="round"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M206.5 169.5C220.307 169.5 231.5 158.307 231.5 144.5C231.5 130.693 220.307 119.5 206.5 119.5C192.693 119.5 181.5 130.693 181.5 144.5C181.5 158.307 192.693 169.5 206.5 169.5Z"
|
||||||
|
stroke="black"
|
||||||
|
stroke-width="12.5"
|
||||||
|
stroke-linecap="round"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<p className="mb-0 text-sm text-gray-500">فیلتر ها</p>
|
||||||
|
</div>
|
||||||
|
<div className="w-full flex rtl justify-center">
|
||||||
|
<div>
|
||||||
|
<svg
|
||||||
|
width="20"
|
||||||
|
height="20"
|
||||||
|
viewBox="0 0 300 300"
|
||||||
|
fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
className=" opacity-30"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M175.462 261.712C173.18 261.701 170.943 261.075 168.987 259.9L127.312 234.9C122.624 232.071 118.743 228.082 116.044 223.318C113.344 218.554 111.917 213.175 111.9 207.7V151.137C111.911 147.145 110.67 143.249 108.35 140L50.1623 58.2247C48.8035 56.3369 47.9927 54.1105 47.8193 51.791C47.6459 49.4716 48.1166 47.1493 49.1795 45.0804C50.2424 43.0116 51.8561 41.2765 53.8427 40.0668C55.8292 38.857 58.1113 38.2195 60.4373 38.2247H239.562C241.89 38.215 244.175 38.8497 246.164 40.0585C248.154 41.2673 249.77 43.003 250.833 45.0736C251.897 47.1441 252.367 49.4686 252.191 51.7897C252.015 54.1108 251.201 56.338 249.837 58.2247L191.65 140C189.326 143.248 188.08 147.143 188.087 151.137V249.062C188.084 252.412 186.754 255.624 184.387 257.995C182.021 260.366 178.812 261.702 175.462 261.712ZM60.4373 50.7872L118.525 132.75C122.363 138.111 124.418 144.544 124.4 151.137V207.687C124.408 211.005 125.272 214.264 126.907 217.15C128.543 220.036 130.895 222.451 133.737 224.162L175.412 249.162L175.587 151.125C175.573 144.53 177.633 138.098 181.475 132.737L239.65 50.9622L60.4373 50.7872Z"
|
||||||
|
fill="black"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<p className="mb-0 text-sm text-gray-500">ترند ها</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid xs:grid-cols-1 lg:grid-cols-4 xl:grid-cols-5">
|
||||||
|
<CardCategoriesMobile />
|
||||||
|
<CardCategoriesMobile />
|
||||||
|
<CardCategoriesMobile />
|
||||||
|
<CardCategoriesMobile />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="xs:hidden lg:block">
|
||||||
|
<div className="pl-20 pr-10 grid lg:grid-cols-8 xl:grid-cols-5 rtl mt-20 ">
|
||||||
|
<div className="ml-4 lg:col-span-2 xl:col-span-1">
|
||||||
|
<div className="sticky top-20 ...">
|
||||||
|
<div className=" w-full">
|
||||||
|
<div className="p-5 border-gray-300 rounded-lg flex justify-between bg-white">
|
||||||
|
<p className="mb-0 lg:text-sm xl:text-base">برند</p>
|
||||||
|
<div>
|
||||||
|
<svg
|
||||||
|
width="15"
|
||||||
|
height="15"
|
||||||
|
viewBox="0 0 151 89"
|
||||||
|
fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
className="mt-1"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M13.1436 14.2219L76.3596 75.9976L138.135 12.7815"
|
||||||
|
stroke="black"
|
||||||
|
stroke-width="25"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="p-5 border-gray-300 rounded-lg mt-3 flex justify-between bg-white">
|
||||||
|
<p className="mb-0 lg:text-sm xl:text-base">
|
||||||
|
فقط محصولات موجود{" "}
|
||||||
|
</p>
|
||||||
|
<Switch
|
||||||
|
checked={isChecked}
|
||||||
|
onChange={handleCheckboxChange}
|
||||||
|
className={`${
|
||||||
|
isChecked ? "bg-primary-500" : "bg-gray-400"
|
||||||
|
} relative inline-flex h-6 w-[50px] items-center rounded-full`}
|
||||||
|
>
|
||||||
|
<span className="sr-only">Enable notifications</span>
|
||||||
|
<span
|
||||||
|
className={`${
|
||||||
|
isChecked
|
||||||
|
? "translate-x-[-5px]"
|
||||||
|
: "translate-x-[-30px]"
|
||||||
|
} inline-block h-4 w-4 transform rounded-full bg-white transition`}
|
||||||
|
/>
|
||||||
|
</Switch>
|
||||||
|
</div>
|
||||||
|
<div className="p-5 border-gray-300 rounded-lg mt-3 bg-white">
|
||||||
|
<div className="flex justify-between ">
|
||||||
|
<p className="mb-0">محدوده قیمت</p>
|
||||||
|
<div>
|
||||||
|
<svg
|
||||||
|
width="15"
|
||||||
|
height="15"
|
||||||
|
viewBox="0 0 151 89"
|
||||||
|
fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
className="mt-1"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M13.1436 14.2219L76.3596 75.9976L138.135 12.7815"
|
||||||
|
stroke="black"
|
||||||
|
stroke-width="25"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mt-10 px-5">
|
||||||
|
<RangeSlider
|
||||||
|
min={0}
|
||||||
|
max={100}
|
||||||
|
onChange={handleRangeChange}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex mt-5">
|
||||||
|
<div className="w-full text-center">
|
||||||
|
<p className="mb-0 text-sm">تا قیمت</p>
|
||||||
|
<p className="mb-0">
|
||||||
|
<PersianNumber number={1316464} style="font-bold" />
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="w-full text-center">
|
||||||
|
<p className="mb-0 text-sm">تا قیمت</p>
|
||||||
|
<p className="mb-0">
|
||||||
|
<PersianNumber number={1316464} style="font-bold" />
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-4">
|
||||||
|
<button className="btn btn-primary w-full rounded-full text-sm ">
|
||||||
|
اعمال فیلتر
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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="flex justify-between">
|
||||||
|
<div className="flex">
|
||||||
|
<div>
|
||||||
|
<p className="mb-0 lg:text-sm xl:text-base">
|
||||||
|
{" "}
|
||||||
|
فیلتر بر اساس :
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex">
|
||||||
|
<div className="w-fit bg-primary-600 rounded-full px-2 mx-2">
|
||||||
|
<p className="mb-0 lg:text-sm xl:text-base text-white">
|
||||||
|
پرفروش ترین
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="w-fit opacity-60 rounded-full px-2 mx-2">
|
||||||
|
<p className="mb-0 lg:text-sm xl:text-base">
|
||||||
|
کم فروش ترین
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="w-fit opacity-60 rounded-full px-2 mx-2">
|
||||||
|
<p className="mb-0 lg:text-sm xl:text-base">
|
||||||
|
ارزان ترین
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="w-fit opacity-60 rounded-full px-2 mx-2">
|
||||||
|
<p className="mb-0 lg:text-sm xl:text-base">
|
||||||
|
گران ترین
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="w-fit opacity-60 rounded-full px-2 mx-2">
|
||||||
|
<p className="mb-0 lg:text-sm xl:text-base">
|
||||||
|
اقتصادی ترین
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="">
|
||||||
|
<p className="mb-0 text-base lg:text-sm xl:text-base">
|
||||||
|
<PersianNumber
|
||||||
|
number={12354}
|
||||||
|
style="text-[16px] mx-2 font-bold"
|
||||||
|
/>
|
||||||
|
کالا
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid xs:grid-cols-1 lg:grid-cols-4 xl:grid-cols-5">
|
||||||
|
<CardCategories />
|
||||||
|
<CardCategories />
|
||||||
|
<CardCategories />
|
||||||
|
<CardCategories />
|
||||||
|
<CardCategories />
|
||||||
|
<CardCategories />
|
||||||
|
<CardCategories />
|
||||||
|
<CardCategories />
|
||||||
|
<CardCategories />
|
||||||
|
<CardCategories />
|
||||||
|
<CardCategories />
|
||||||
|
<CardCategories />
|
||||||
|
<CardCategories />
|
||||||
|
<CardCategories />
|
||||||
|
<CardCategories />
|
||||||
|
<CardCategories />
|
||||||
|
<CardCategories />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex justify-center rtl mb-10">
|
||||||
|
<div className="w-[40px] h-[40px] rounded-full bg-primary-400 mx-2">
|
||||||
|
<svg
|
||||||
|
width="16"
|
||||||
|
height="16"
|
||||||
|
viewBox="0 0 88 151"
|
||||||
|
fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
className="mx-auto mt-3 pr-[2px]"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M12.9525 138.35L75.249 75.6471L12.5462 13.3506"
|
||||||
|
stroke="white"
|
||||||
|
stroke-width="25"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
/>
|
||||||
|
</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 "
|
||||||
|
/>
|
||||||
|
</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 "
|
||||||
|
/>
|
||||||
|
</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 "
|
||||||
|
/>
|
||||||
|
</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 "
|
||||||
|
/>
|
||||||
|
</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 "
|
||||||
|
/>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="w-[40px] h-[40px] rounded-full bg-primary-400 mx-2">
|
||||||
|
<svg
|
||||||
|
width="16"
|
||||||
|
height="16"
|
||||||
|
viewBox="0 0 89 151"
|
||||||
|
fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
className="mx-auto mt-3 pr-[2px]"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M74.7462 13.0002L12.7501 76.0001L75.7499 137.996"
|
||||||
|
stroke="white"
|
||||||
|
stroke-width="25"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Footer />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default page;
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
import "../../style/globals.css";
|
||||||
|
import "../../style/fontiran.css";
|
||||||
|
import "swiper/css";
|
||||||
|
import "react-image-gallery/styles/css/image-gallery.css";
|
||||||
|
import Chapar from "plugins/Chapar";
|
||||||
|
|
||||||
|
export const metadata = {
|
||||||
|
title: "Create Next App",
|
||||||
|
description: "Generated by create next app",
|
||||||
|
};
|
||||||
|
|
||||||
|
export default async function RootLayout({ children }) {
|
||||||
|
return (
|
||||||
|
<html lang="en">
|
||||||
|
<body>{children}</body>
|
||||||
|
</html>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,51 @@
|
||||||
|
import React from "react";
|
||||||
|
import logo from "../../../public/images/logo.png";
|
||||||
|
import Image from "next/image";
|
||||||
|
|
||||||
|
const Login = () => {
|
||||||
|
return (
|
||||||
|
<div className="bg-login">
|
||||||
|
<div className="xs:w-11/12 lg:w-4/12 xl:w-3/12 mx-auto pt-[150px]">
|
||||||
|
<div className="bg-white p-10 rounded-3xl">
|
||||||
|
<div className=" flex justify-center">
|
||||||
|
<div className="w-[100px]">
|
||||||
|
<Image src={logo} className="mx-auto" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-center mt-5">
|
||||||
|
<p className="mb-0 text-gray-300 text-base">ورود / ثبت نام</p>
|
||||||
|
<p className="mb-0 text-gray-600 text-lg mt-2">
|
||||||
|
شماره موبایل خود را وارد کنید
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="mt-2">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control !border-0 !bg-gray-200"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="">
|
||||||
|
<button className="btn btn-primary w-full rounded-xl py-3 mt-3">
|
||||||
|
ورود و ثبت نام
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-4">
|
||||||
|
<p className="mb-0 text-sm px-4 rtl">
|
||||||
|
با ورود و یا ثبت نام در وسمه شما{" "}
|
||||||
|
<small className="text-primary-400 text-sm font-semibold">
|
||||||
|
شرایط و قوانین
|
||||||
|
</small>{" "}
|
||||||
|
استفاده از سرویس های سایت شاواز و قوانین حریم خصوصی آن را می
|
||||||
|
پذیرید.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>{" "}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Login;
|
||||||
|
|
@ -0,0 +1,42 @@
|
||||||
|
"use client";
|
||||||
|
import Navbar from "@comp/Navbar/page";
|
||||||
|
import Footer from "@comp/Footer/page";
|
||||||
|
import HeroSection from "@comp/LandingPage/HeroSection/page";
|
||||||
|
import SurpriseSection from "@comp/LandingPage/SurpriseSection/page";
|
||||||
|
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";
|
||||||
|
|
||||||
|
async function getData() {
|
||||||
|
const res = await fetch("http://192.168.88.12:32770/api/product/category");
|
||||||
|
// The return value is *not* serialized
|
||||||
|
// You can return Date, Map, Set, etc.
|
||||||
|
|
||||||
|
if (!res.ok) {
|
||||||
|
// This will activate the closest `error.js` Error Boundary
|
||||||
|
throw new Error("Failed to fetch data");
|
||||||
|
}
|
||||||
|
|
||||||
|
return res.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
export default async function Page() {
|
||||||
|
const dataNav = await getData();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="bg-header">
|
||||||
|
<Navbar theme={0} dataNav={dataNav} />
|
||||||
|
|
||||||
|
<HeroSection />
|
||||||
|
</div>
|
||||||
|
<SurpriseSection />
|
||||||
|
<BetweenSexualSection />
|
||||||
|
<BrandsLogoSection />
|
||||||
|
<BeautySection />
|
||||||
|
<HomeSection />
|
||||||
|
<Footer />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,250 @@
|
||||||
|
import Footer from "@comp/Footer/page";
|
||||||
|
import Navbar from "@comp/Navbar/page";
|
||||||
|
import GalleryBox from "plugins/Gallery/page";
|
||||||
|
import React from "react";
|
||||||
|
|
||||||
|
import l1 from "../../../../public/images/logobrand/2.png";
|
||||||
|
import Image from "next/image";
|
||||||
|
import PersianNumber from "plugins/PersianNumber";
|
||||||
|
|
||||||
|
const page = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Navbar theme={1} />
|
||||||
|
<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 />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="lg:col-span-3 xs:px-[20px] lg:px-[100px]">
|
||||||
|
<div className="text-right mt-7">
|
||||||
|
<h1 className="text-lg font-semibold ">
|
||||||
|
ماسک دو فاز مناسب موهای آسیب دیده تاپ شاپ ظرفیت 200 میلی لیتر
|
||||||
|
</h1>
|
||||||
|
<p className="mb-0 text-sm text-gray-400">
|
||||||
|
Top Shop Biphasic Hair Mask 200 ml
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex my-4">
|
||||||
|
<div className="bg-primary-400 rounded-full py-1 px-3 ml-2">
|
||||||
|
<p className="mb-0 text-sm text-white ">اصالت کالای </p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-danger-100 rounded-full py-1 px-3 ml-2">
|
||||||
|
<p className="mb-0 text-sm text-white ">بمب امروز </p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-secondary-500 rounded-full py-1 px-3 ml-2">
|
||||||
|
<p className="mb-0 text-sm text-white ">ضمانت بازگشت</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex my-5">
|
||||||
|
<div className="w-[30px] h-[30px] rounded-full bg-red-800 border-[5px] border-white shadow mr-2 cursor-pointer "></div>
|
||||||
|
<div className="w-[30px] h-[30px] rounded-full bg-red-700 border-[5px] border-white shadow mr-2 cursor-pointer "></div>
|
||||||
|
<div className="w-[30px] h-[30px] rounded-full bg-red-600 border-[5px] border-white shadow mr-2 cursor-pointer "></div>
|
||||||
|
<div className="w-[30px] h-[30px] rounded-full bg-red-500 border-[5px] border-green-300 scale-110 shadow mr-2 cursor-pointer "></div>
|
||||||
|
<div className="w-[30px] h-[30px] rounded-full bg-red-400 border-[5px] border-white shadow mr-2 cursor-pointer "></div>
|
||||||
|
<div className="w-[30px] h-[30px] rounded-full bg-red-300 border-[5px] border-white shadow mr-2 cursor-pointer "></div>
|
||||||
|
<div className="w-[30px] h-[30px] rounded-full bg-red-200 border-[5px] border-white shadow mr-2 cursor-pointer "></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div className="text-right mt-3 flex justify-between">
|
||||||
|
<div className="flex">
|
||||||
|
<div className="w-[5px] h-[5px] bg-primary-500 rounded-full mt-[10px] ml-2 "></div>
|
||||||
|
<p className="mb-0 text-gray-500 ">ویتامین:</p>
|
||||||
|
</div>
|
||||||
|
<p className="mb-0 text-gray-500 ">ندارد</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="text-right mt-3 flex justify-between">
|
||||||
|
<div className="flex">
|
||||||
|
<div className="w-[5px] h-[5px] bg-primary-500 rounded-full mt-[10px] ml-2 "></div>
|
||||||
|
<p className="mb-0 text-gray-500 ">ویژگی:</p>
|
||||||
|
</div>
|
||||||
|
<p className="mb-0 text-gray-500 ">
|
||||||
|
تقویت کننده , نرم کننده , مرطوب کننده
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* xs:sticky lg:relative xs:top-[60px] lg:top-0 ==> sticky for price=================== */}
|
||||||
|
|
||||||
|
<div className=" mx-auto lg:col-span-2 sticky top-[80px] xs:hidden lg:block xs:px-[20px] lg:px-[100px]">
|
||||||
|
<div className="p-3 h-fit border-[1px] border-gray-300 rounded-xl ">
|
||||||
|
<div className="flex justify-center">
|
||||||
|
<div className="w-[130px]">
|
||||||
|
<Image src={l1} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-center">
|
||||||
|
<p className="mb-0 text-sm text-gray-500">
|
||||||
|
مشاهده محصولات برند تاپ شاپ
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="w-6/12 mx-auto h-[1px] bg-gray-200 mt-4"></div>
|
||||||
|
|
||||||
|
<div className="flex justify-center mt-3">
|
||||||
|
<div>
|
||||||
|
<svg
|
||||||
|
width="15"
|
||||||
|
height="15"
|
||||||
|
viewBox="0 0 226 264"
|
||||||
|
fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
className="ml-1 mt-[2px]"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M94.25 137.531L69.9687 113.25L56.75 126.469L94.25 163.969L169.25 88.9687L156.031 75.75L94.25 137.531Z"
|
||||||
|
fill="black"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M113 263.25L55.1001 232.378C38.5938 223.597 24.7904 210.486 15.1712 194.454C5.552 178.421 0.48019 160.072 0.500058 141.375V19.5C0.505022 14.5287 2.48206 9.76246 5.99729 6.24723C9.51252 2.732 14.2788 0.754964 19.2501 0.75H206.75C211.721 0.754964 216.488 2.732 220.003 6.24723C223.518 9.76246 225.495 14.5287 225.5 19.5V141.375C225.52 160.072 220.448 178.421 210.829 194.454C201.21 210.486 187.406 223.597 170.9 232.378L113 263.25ZM19.2501 19.5V141.375C19.2345 156.673 23.3854 171.687 31.2572 184.804C39.129 197.922 50.4245 208.648 63.9313 215.831L113 241.997L162.069 215.841C175.577 208.656 186.873 197.929 194.745 184.81C202.617 171.69 206.767 156.675 206.75 141.375V19.5H19.2501Z"
|
||||||
|
fill="black"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<p className="mb-0 text-sm font-bold">
|
||||||
|
گارانتی{" "}
|
||||||
|
<small className=" text-primary-500 text-sm">اصالت</small> و{" "}
|
||||||
|
<small className=" text-primary-500 text-sm">
|
||||||
|
سلامت فیزیکی کالا
|
||||||
|
</small>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="w-6/12 mx-auto h-[1px] bg-gray-200 mt-4"></div>
|
||||||
|
|
||||||
|
<div className=" mt-4 ">
|
||||||
|
<div className="flex justify-end rtl mt-[3px] mb-1">
|
||||||
|
{" "}
|
||||||
|
<p className="mb-0 font-semibold text-lg">
|
||||||
|
<PersianNumber number={150000} />
|
||||||
|
</p>
|
||||||
|
<small className="mr-1 mt-[6px]">تومان</small>
|
||||||
|
</div>
|
||||||
|
<button className="btn btn-primary w-full text-sm">
|
||||||
|
افزودن به سبد{" "}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="lg:col-span-6">
|
||||||
|
<div className="xs:px-[15px] lg:px-[100px]">
|
||||||
|
<div className="bg-gray-200 rounded-full xs:p-2 lg:p-3 flex w-fit ">
|
||||||
|
<div className="bg-primary-500 rounded-full p-3 ">
|
||||||
|
<p className=" xs:hidden lg:block mb-0 text-[12px] text-white">
|
||||||
|
مشخصات محصول
|
||||||
|
</p>
|
||||||
|
<p className=" xs:block lg:hidden mb-0 text-[12px] text-white">
|
||||||
|
مشخصات
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className=" rounded-full p-3 ">
|
||||||
|
<p className="mb-0 text-[13px] text-gray-500">روش استفاده</p>
|
||||||
|
</div>
|
||||||
|
<div className=" rounded-full p-3 ">
|
||||||
|
<p className="mb-0 text-[13px] text-gray-500">نقد و بررسی</p>
|
||||||
|
</div>
|
||||||
|
<div className=" rounded-full p-3 ">
|
||||||
|
<p className=" xs:hidden lg:block mb-0 text-[13px] text-gray-500">
|
||||||
|
دیدگاه مخاطبان
|
||||||
|
</p>
|
||||||
|
<p className=" xs:block lg:hidden mb-0 text-[13px] text-gray-500">
|
||||||
|
مخاطبان
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 className=" text-sm text-gray-400 mt-7 mb-2">
|
||||||
|
مشخصات محصول
|
||||||
|
</h3>
|
||||||
|
<div className="min-w-[200px] mt-5 rounded-xl overflow-hidden border ">
|
||||||
|
<div className="bg-gray-100 p-3">
|
||||||
|
<p className="mb-0 text-sm text-gray-600">
|
||||||
|
لورم متن :
|
||||||
|
<small className="text-sm text-gray-800 font-bold ">
|
||||||
|
{" "}
|
||||||
|
ساختگی با تولید
|
||||||
|
</small>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className=" p-3">
|
||||||
|
<p className="mb-0 text-sm text-gray-600">
|
||||||
|
لورم ایپسوم متن :
|
||||||
|
<small className="text-sm text-gray-800 font-bold ">
|
||||||
|
{" "}
|
||||||
|
ساختگی با تولید
|
||||||
|
</small>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-gray-100 p-3">
|
||||||
|
<p className="mb-0 text-sm text-gray-600">
|
||||||
|
لورم :
|
||||||
|
<small className="text-sm text-gray-800 font-bold ">
|
||||||
|
{" "}
|
||||||
|
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت
|
||||||
|
چاپ، و با استفاده{" "}
|
||||||
|
</small>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className=" p-3">
|
||||||
|
<p className="mb-0 text-sm text-gray-600">
|
||||||
|
لورم ایپسوم متن ساختگی :{" "}
|
||||||
|
<small className="text-sm text-gray-800 font-bold ">
|
||||||
|
{" "}
|
||||||
|
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم{" "}
|
||||||
|
</small>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>{" "}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="xs:block lg:hidden sticky bottom-0 ">
|
||||||
|
<div className="w-full bg-[#eeeeee] p-2 border-t-[2px] border-gray-200">
|
||||||
|
<div className="py-4 flex ltr justify-between px-4">
|
||||||
|
<div className="flex justify-end rtl mt-2 mb-1">
|
||||||
|
{" "}
|
||||||
|
<p className="mb-0 text-gray-500 font-semibold">
|
||||||
|
<PersianNumber number={150000} style="text-xl" />
|
||||||
|
</p>
|
||||||
|
<small className="mr-1 mt-[6px] text-gray-500 ">
|
||||||
|
تومان
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
<button className="btn btn-primary w-fit py-3 px-7 text-sm">
|
||||||
|
افزودن به سبد{" "}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Footer />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default page;
|
||||||
|
|
@ -0,0 +1,96 @@
|
||||||
|
import Navbar from "@comp/Navbar/page";
|
||||||
|
import React from "react";
|
||||||
|
|
||||||
|
const page = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Navbar theme={1} />
|
||||||
|
<div className="grid xs:grid-cols-1 lg:grid-cols-4 xl:grid-cols-5 rtl gap-6 xs:px-[20px] lg:px-[100px] xl:[300px]">
|
||||||
|
<div className="rounded-xl border border-gray-100 bg-gray-200 overflow-hidden">
|
||||||
|
<div>
|
||||||
|
<div className="bg-white rounded-b-3xl p-5 flex shadow">
|
||||||
|
<div className="bg-primary-500 w-[60px] h-[60px] rounded-full"></div>
|
||||||
|
|
||||||
|
<div className="m-3">
|
||||||
|
<p className="mb-0 text-sm">حسین معصومی پور</p>
|
||||||
|
<p className="mb-0 text-sm">09123654891</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ul className="p-2 ">
|
||||||
|
<li className="group cursor-pointer">
|
||||||
|
<div className="flex justify-between p-4 rounded-full group-hover:bg-primary-200 tr03">
|
||||||
|
<p className="mb-0 text-sm text-gray-500 group-hover:text-black tr03">
|
||||||
|
داشبورد
|
||||||
|
</p>
|
||||||
|
<div className="w-[20px] h-[20px] rounded-full bg-primary-200 group-hover:bg-primary-500 tr03 "></div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li className="group cursor-pointer">
|
||||||
|
<div className="flex justify-between p-4 rounded-full group-hover:bg-primary-200 tr03">
|
||||||
|
<p className="mb-0 text-sm text-gray-500 group-hover:text-black tr03">
|
||||||
|
سفارشات
|
||||||
|
</p>
|
||||||
|
<div className="w-[20px] h-[20px] rounded-full bg-primary-200 group-hover:bg-primary-500 tr03 "></div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li className="group cursor-pointer">
|
||||||
|
<div className="flex justify-between p-4 rounded-full group-hover:bg-primary-200 tr03">
|
||||||
|
<p className="mb-0 text-sm text-gray-500 group-hover:text-black tr03">
|
||||||
|
پیگیری سفارش
|
||||||
|
</p>
|
||||||
|
<div className="w-[20px] h-[20px] rounded-full bg-primary-200 group-hover:bg-primary-500 tr03 "></div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li className="group cursor-pointer">
|
||||||
|
<div className="flex justify-between p-4 rounded-full group-hover:bg-primary-200 tr03">
|
||||||
|
<p className="mb-0 text-sm text-gray-500 group-hover:text-black tr03">
|
||||||
|
پشتیبانی{" "}
|
||||||
|
</p>
|
||||||
|
<div className="w-[20px] h-[20px] rounded-full bg-primary-200 group-hover:bg-primary-500 tr03 "></div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li className="flex justify-between p-4 rounded-full group hover:bg-red-200 tr03 cursor-pointer">
|
||||||
|
<p className="mb-0 text-sm text-red-500 group-hover: ">خروج </p>
|
||||||
|
<div className="w-[20px] h-[20px] rounded-full bg-red-200 group-hover:bg-red-500 tr03 "></div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="lg:col-span-3 xl:col-span-4 ">
|
||||||
|
<div className="bg-gray-200 p-5 mt-5">
|
||||||
|
<p className="mb-0 font-bold">سابقه سفارشات</p>
|
||||||
|
|
||||||
|
<div className="flex rounded-full bg-gray-300 mt-3 w-fit p-2">
|
||||||
|
<div className="bg-primary-500 py-2 rounded-full px-5">
|
||||||
|
<p className="mb-0 text-white"> جاری</p>
|
||||||
|
</div>
|
||||||
|
<div className=" py-2 rounded-full px-5">
|
||||||
|
<p className="mb-0">تحویل شده</p>
|
||||||
|
</div>
|
||||||
|
<div className=" py-2 rounded-full px-5">
|
||||||
|
<p className="mb-0">مرجوع شده</p>
|
||||||
|
</div>
|
||||||
|
<div className=" py-2 rounded-full px-5">
|
||||||
|
<p className="mb-0">لغو شده</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex justify-center my-[100px]">
|
||||||
|
<p className="mb-0 rounded-full w-fit shadow bg-white p-5 ">
|
||||||
|
شما سفارشی ندارید
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default page;
|
||||||
|
|
@ -0,0 +1,113 @@
|
||||||
|
import Navbar from "@comp/Navbar/page";
|
||||||
|
import React from "react";
|
||||||
|
|
||||||
|
const page = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Navbar theme={1} />
|
||||||
|
<div className="grid xs:grid-cols-1 lg:grid-cols-4 xl:grid-cols-5 rtl gap-6 xs:px-[20px] lg:px-[100px] xl:[300px]">
|
||||||
|
<div className="rounded-xl border border-gray-100 bg-gray-200 overflow-hidden">
|
||||||
|
<div>
|
||||||
|
<div className="bg-white rounded-b-3xl p-5 flex shadow">
|
||||||
|
<div className="bg-primary-500 w-[60px] h-[60px] rounded-full"></div>
|
||||||
|
|
||||||
|
<div className="m-3">
|
||||||
|
<p className="mb-0 text-sm">حسین معصومی پور</p>
|
||||||
|
<p className="mb-0 text-sm">09123654891</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ul className="p-2 ">
|
||||||
|
<li className="group cursor-pointer">
|
||||||
|
<div className="flex justify-between p-4 rounded-full group-hover:bg-primary-200 tr03">
|
||||||
|
<p className="mb-0 text-sm text-gray-500 group-hover:text-black tr03">
|
||||||
|
داشبورد
|
||||||
|
</p>
|
||||||
|
<div className="w-[20px] h-[20px] rounded-full bg-primary-200 group-hover:bg-primary-500 tr03 "></div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li className="group cursor-pointer">
|
||||||
|
<div className="flex justify-between p-4 rounded-full group-hover:bg-primary-200 tr03">
|
||||||
|
<p className="mb-0 text-sm text-gray-500 group-hover:text-black tr03">
|
||||||
|
سفارشات
|
||||||
|
</p>
|
||||||
|
<div className="w-[20px] h-[20px] rounded-full bg-primary-200 group-hover:bg-primary-500 tr03 "></div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li className="group cursor-pointer">
|
||||||
|
<div className="flex justify-between p-4 rounded-full group-hover:bg-primary-200 tr03">
|
||||||
|
<p className="mb-0 text-sm text-gray-500 group-hover:text-black tr03">
|
||||||
|
پیگیری سفارش
|
||||||
|
</p>
|
||||||
|
<div className="w-[20px] h-[20px] rounded-full bg-primary-200 group-hover:bg-primary-500 tr03 "></div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li className="group cursor-pointer">
|
||||||
|
<div className="flex justify-between p-4 rounded-full group-hover:bg-primary-200 tr03">
|
||||||
|
<p className="mb-0 text-sm text-gray-500 group-hover:text-black tr03">
|
||||||
|
پشتیبانی{" "}
|
||||||
|
</p>
|
||||||
|
<div className="w-[20px] h-[20px] rounded-full bg-primary-200 group-hover:bg-primary-500 tr03 "></div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li className="flex justify-between p-4 rounded-full group hover:bg-red-200 tr03 cursor-pointer">
|
||||||
|
<p className="mb-0 text-sm text-red-500 group-hover: ">خروج </p>
|
||||||
|
<div className="w-[20px] h-[20px] rounded-full bg-red-200 group-hover:bg-red-500 tr03 "></div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="lg:col-span-3 xl:col-span-4 ">
|
||||||
|
<div className="bg-primary-500 p-5 rounded-xl ">
|
||||||
|
<div className="flex">
|
||||||
|
<div>
|
||||||
|
<svg
|
||||||
|
width="70"
|
||||||
|
height="70"
|
||||||
|
viewBox="0 0 250 250"
|
||||||
|
fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M51.45 226.087C35.5004 214.498 22.5227 199.296 13.5799 181.725C4.63707 164.155 -0.0165936 144.716 4.44572e-05 125C4.44572e-05 55.9625 55.9626 0 125 0C194.038 0 250 55.9625 250 125C250.017 144.716 245.363 164.155 236.42 181.725C227.477 199.296 214.5 214.498 198.55 226.087L185.863 204.35C202.442 191.632 214.622 174.04 220.69 154.045C226.759 134.05 226.411 112.656 219.696 92.8684C212.981 73.0809 200.236 55.8941 183.251 43.722C166.267 31.55 145.896 25.0042 125 25.0042C104.104 25.0042 83.7333 31.55 66.7488 43.722C49.7642 55.8941 37.0193 73.0809 30.3043 92.8684C23.5892 112.656 23.2414 134.05 29.3098 154.045C35.3781 174.04 47.5576 191.632 64.1375 204.35L51.45 226.087ZM76.875 182.525C65.0629 172.643 56.5793 159.364 52.5769 144.492C48.5746 129.62 49.2475 113.877 54.5044 99.4013C59.7612 84.9254 69.347 72.4187 81.9593 63.5806C94.5717 54.7424 109.599 50.0012 125 50.0012C140.401 50.0012 155.428 54.7424 168.041 63.5806C180.653 72.4187 190.239 84.9254 195.496 99.4013C200.753 113.877 201.425 129.62 197.423 144.492C193.421 159.364 184.937 172.643 173.125 182.525L160.25 160.45C167.272 153.469 172.064 144.561 174.017 134.854C175.971 125.146 174.998 115.078 171.222 105.924C167.447 96.7706 161.038 88.9441 152.809 83.4368C144.581 77.9296 134.902 74.9896 125 74.9896C115.098 74.9896 105.42 77.9296 97.1906 83.4368C88.9617 88.9441 82.5533 96.7706 78.7777 105.924C75.002 115.078 74.0293 125.146 75.9827 134.854C77.9361 144.561 82.7277 153.469 89.75 160.45L76.875 182.525ZM112.5 137.5H137.5L150 250H100L112.5 137.5Z"
|
||||||
|
fill="white"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="mb-0 text-white mx-4 font-semibold">
|
||||||
|
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
|
||||||
|
استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله
|
||||||
|
در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد
|
||||||
|
نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد،
|
||||||
|
کتابهای زیادی در شصت و سه درصد گذشته حال و آینده{" "}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-end m-3">
|
||||||
|
<button className="btn btn-light text-sm py-2 rounded-full px-5">
|
||||||
|
خرید ادامـــــه دارد
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-gray-200 p-5 mt-5">
|
||||||
|
<p className="mb-0 font-bold">سفارش جاری</p>
|
||||||
|
|
||||||
|
<div className="flex justify-center">
|
||||||
|
<p className="mb-0 rounded-full w-fit shadow bg-white p-5 ">
|
||||||
|
شما سفارشی ندارید
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default page;
|
||||||
|
|
@ -0,0 +1,92 @@
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* Name: Kalameh ././fonts
|
||||||
|
* Version: 4.1
|
||||||
|
* Author: Naser Khadem
|
||||||
|
* Created on: March 11, 2019
|
||||||
|
* Updated on: July 17, 2021
|
||||||
|
* Website: http://fontiran.com
|
||||||
|
* Copyright: Commercial/Proprietary Software
|
||||||
|
--------------------------------------------------------------------------------------
|
||||||
|
فونت کلمه یک نرم افزار مالکیتی محسوب می شود. جهت آگاهی از قوانین استفاده از این فونت ها لطفا به وب سایت (فونت ایران دات کام) مراجعه نمایید
|
||||||
|
--------------------------------------------------------------------------------------
|
||||||
|
Kalameh ././fonts are considered a proprietary software. To gain information about the laws regarding the use of these ././fonts, please visit www.fontiran.com
|
||||||
|
--------------------------------------------------------------------------------------
|
||||||
|
This set of ././fonts are used in this project under the license: (.....)
|
||||||
|
------------------------------------------------------------------------------------- .//fonts/-
|
||||||
|
*
|
||||||
|
**/
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: KalamehWeb;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 100;
|
||||||
|
src: url("/fonts/woff2/KalamehWeb-Thin.woff2") format("woff2"),
|
||||||
|
/* FF39+,Chrome36+, Opera24+*/ url("/fonts/woff/KalamehWeb-Thin.woff")
|
||||||
|
format("woff"); /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: KalamehWeb;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 200;
|
||||||
|
src: url("/fonts/woff2/KalamehWeb-ExtraLight.woff2") format("woff2"),
|
||||||
|
/* FF39+,Chrome36+, Opera24+*/
|
||||||
|
url("/fonts/woff/KalamehWeb-ExtraLight.woff") format("woff"); /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: KalamehWeb;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 300;
|
||||||
|
src: url("/fonts/woff2/KalamehWeb-Light.woff2") format("woff2"),
|
||||||
|
/* FF39+,Chrome36+, Opera24+*/ url("/fonts/woff/KalamehWeb-Light.woff")
|
||||||
|
format("woff"); /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: KalamehWeb;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 500;
|
||||||
|
src: url("/fonts/woff2/KalamehWeb-Medium.woff2") format("woff2"),
|
||||||
|
/* FF39+,Chrome36+, Opera24+*/ url("/fonts/woff/KalamehWeb-Medium.woff")
|
||||||
|
format("woff"); /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: KalamehWeb;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 600;
|
||||||
|
src: url("/fonts/woff2/KalamehWeb-Semibold.woff2") format("woff2"),
|
||||||
|
/* FF39+,Chrome36+, Opera24+*/ url("/fonts/woff/KalamehWeb-Semibold.woff")
|
||||||
|
format("woff"); /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: KalamehWeb;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 800;
|
||||||
|
src: url("/fonts/woff2/KalamehWeb-ExtraBold.woff2") format("woff2"),
|
||||||
|
/* FF39+,Chrome36+, Opera24+*/ url("/fonts/woff/KalamehWeb-ExtraBold.woff")
|
||||||
|
format("woff"); /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: KalamehWeb;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 900;
|
||||||
|
src: url("/fonts/woff2/KalamehWeb-Black.woff2") format("woff2"),
|
||||||
|
/* FF39+,Chrome36+, Opera24+*/ url("/fonts/woff/KalamehWeb-Black.woff")
|
||||||
|
format("woff"); /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: KalamehWeb;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: bold;
|
||||||
|
src: url("/fonts/woff2/KalamehWeb-Bold.woff2") format("woff2"),
|
||||||
|
/* FF39+,Chrome36+, Opera24+*/ url("/fonts/woff/KalamehWeb-Bold.woff")
|
||||||
|
format("woff"); /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: KalamehWeb;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: normal;
|
||||||
|
src: url("/fonts/woff2/KalamehWeb-Regular.woff2") format("woff2"),
|
||||||
|
/* FF39+,Chrome36+, Opera24+*/ url("/fonts/woff/KalamehWeb-Regular.woff")
|
||||||
|
format("woff"); /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,159 @@
|
||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
|
@layer components {
|
||||||
|
.btn {
|
||||||
|
@apply py-2 px-4 rounded transition-all;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
@apply bg-primary-500 text-white;
|
||||||
|
}
|
||||||
|
.btn-primary:hover {
|
||||||
|
@apply bg-primary-600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
@apply bg-secondary-100 text-white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-light {
|
||||||
|
@apply bg-gray-100 text-black;
|
||||||
|
}
|
||||||
|
.btn-light:hover {
|
||||||
|
@apply bg-gray-300 text-black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-outline-light {
|
||||||
|
@apply border border-gray-100 text-white;
|
||||||
|
}
|
||||||
|
.btn-outline-light:hover {
|
||||||
|
@apply bg-gray-100 text-black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary:hover {
|
||||||
|
@apply bg-secondary-200;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-info {
|
||||||
|
@apply bg-info-100 text-white;
|
||||||
|
}
|
||||||
|
.btn-info:hover {
|
||||||
|
@apply bg-info-200;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-control {
|
||||||
|
@apply !appearance-none !border-[2px] bg-navbar !border-gray-300 !rounded-2xl !w-full !py-4 !px-3 !text-gray-700 !leading-tight focus:!border-[2px] focus:!border-gray-300 focus:!outline-none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-control-white {
|
||||||
|
@apply !appearance-none !border-[2px] !bg-white !border-gray-300 !rounded-2xl !w-full !py-4 px-3 !text-gray-700 !leading-tight focus:!border-[2px] focus:!border-red-600 focus:!outline-none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: KalamehWeb !important;
|
||||||
|
background: #eeeeee;
|
||||||
|
--toastify-font-family: KalamehWeb !important;
|
||||||
|
--Chart-defaults-font-family: KalamehWeb !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rtl {
|
||||||
|
direction: rtl;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ltr {
|
||||||
|
direction: ltr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tr2 {
|
||||||
|
transition: 2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tr03 {
|
||||||
|
transition: 0.3s all;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fuck-cick {
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-header {
|
||||||
|
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
|
||||||
|
url(../public/images/bg-header.jpg);
|
||||||
|
height: 100vh;
|
||||||
|
background-position: center;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-navbar {
|
||||||
|
background: rgba(240, 240, 240, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-navbar2 {
|
||||||
|
background: rgba(240, 240, 240, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-glass {
|
||||||
|
background: rgba(255, 255, 255, 0.06);
|
||||||
|
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
|
||||||
|
backdrop-filter: blur(4.4px);
|
||||||
|
-webkit-backdrop-filter: blur(4.4px);
|
||||||
|
}
|
||||||
|
|
||||||
|
#swich-scrollbar::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hide scrollbar for IE, Edge and Firefox */
|
||||||
|
#swich-scrollbar {
|
||||||
|
-ms-overflow-style: none; /* IE and Edge */
|
||||||
|
scrollbar-width: none; /* Firefox */
|
||||||
|
}
|
||||||
|
.bg-login {
|
||||||
|
height: 100vh;
|
||||||
|
|
||||||
|
--s: 200px; /* control the size */
|
||||||
|
--c: #2189a836; /* first color */
|
||||||
|
|
||||||
|
--_g: #b3222200 8%, var(--c) 0 17%, #b3222200 0 58%;
|
||||||
|
background: linear-gradient(
|
||||||
|
135deg,
|
||||||
|
#b3222200 20.5%,
|
||||||
|
var(--c) 0 29.5%,
|
||||||
|
#b3222200 0
|
||||||
|
)
|
||||||
|
0 calc(var(--s) / 4),
|
||||||
|
linear-gradient(45deg, var(--_g)) calc(var(--s) / 2) 0,
|
||||||
|
linear-gradient(135deg, var(--_g), var(--c) 0 67%, #d6afaf00 0),
|
||||||
|
linear-gradient(
|
||||||
|
45deg,
|
||||||
|
var(--_g),
|
||||||
|
var(--c) 0 67%,
|
||||||
|
#b3222200 0 83%,
|
||||||
|
var(--c) 0 92%,
|
||||||
|
#b3222200 0
|
||||||
|
),
|
||||||
|
#1095c1; /* second color */
|
||||||
|
background-size: var(--s) var(--s);
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll-1 {
|
||||||
|
overflow: auto;
|
||||||
|
scrollbar-width: thin; /* Firefox */
|
||||||
|
scrollbar-color: #2ab1da57 #b1b1b1; /* Firefox */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Styles for WebKit browsers (Chrome, Safari) */
|
||||||
|
.scroll-1::-webkit-scrollbar {
|
||||||
|
width: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll-1::-webkit-scrollbar-thumb {
|
||||||
|
background-color: #2ab1da1c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll-1::-webkit-scrollbar-track {
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
@import url(./fontiran.css);
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
font-family: KalamehWeb !important;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,88 @@
|
||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
module.exports = {
|
||||||
|
content: [
|
||||||
|
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
|
||||||
|
"./components/**/*.{js,ts,jsx,tsx,mdx}",
|
||||||
|
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
|
||||||
|
"./plugins/**/*.{js,ts,jsx,tsx,mdx}",
|
||||||
|
],
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
backgroundPrimary: {
|
||||||
|
100: "#FFFBE6",
|
||||||
|
},
|
||||||
|
primary: {
|
||||||
|
100: "#B9E4C9",
|
||||||
|
200: "#2ab1da57",
|
||||||
|
300: "#2ab0daa6",
|
||||||
|
400: "#279fc4",
|
||||||
|
500: "#2189A8",
|
||||||
|
600: "#1C7A96",
|
||||||
|
700: "#166B84",
|
||||||
|
800: "#105C72",
|
||||||
|
900: "#0A4D60",
|
||||||
|
},
|
||||||
|
|
||||||
|
secondary: {
|
||||||
|
100: "#FDE9D9",
|
||||||
|
200: "#FCCFB2",
|
||||||
|
300: "#FABF8B",
|
||||||
|
400: "#F8AE64",
|
||||||
|
500: "#F79D3E",
|
||||||
|
600: "#F68C17",
|
||||||
|
700: "#E27600",
|
||||||
|
800: "#B95B00",
|
||||||
|
900: "#8C4000",
|
||||||
|
},
|
||||||
|
|
||||||
|
textMain: {
|
||||||
|
100: "#444444",
|
||||||
|
},
|
||||||
|
mainDisable: {
|
||||||
|
100: "#888888",
|
||||||
|
},
|
||||||
|
info: {
|
||||||
|
100: "#2B91EF",
|
||||||
|
200: "#0061bd",
|
||||||
|
},
|
||||||
|
danger: {
|
||||||
|
100: "#FF2C2C",
|
||||||
|
},
|
||||||
|
body: {
|
||||||
|
100: "#EEEEEE",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
screens: {
|
||||||
|
xs: "290px",
|
||||||
|
sm: "640px",
|
||||||
|
// => @media (min-width: 640px) { ... }
|
||||||
|
|
||||||
|
md: "768px",
|
||||||
|
// => @media (min-width: 768px) { ... }
|
||||||
|
|
||||||
|
lg: "1024px",
|
||||||
|
// => @media (min-width: 1024px) { ... }
|
||||||
|
|
||||||
|
xl: "1440px",
|
||||||
|
// => @media (min-width: 1280px) { ... }
|
||||||
|
|
||||||
|
"2xl": "1536px",
|
||||||
|
// => @media (min-width: 1536px) { ... }
|
||||||
|
},
|
||||||
|
|
||||||
|
animation: {
|
||||||
|
"infinite-scroll": "infinite-scroll 200s linear infinite",
|
||||||
|
},
|
||||||
|
|
||||||
|
keyframes: {
|
||||||
|
"infinite-scroll": {
|
||||||
|
from: { transform: "translateX(0)" },
|
||||||
|
to: { transform: "translateX(-100%)" },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
};
|
||||||
Loading…
Reference in New Issue